/**
 * DishaOnline — Design System : Layout
 * Layer 3 of 3. Header, hero, homepage sections, article, sidebar, footer.
 *
 * @package DishaOnline
 */

/* =========================================================
   1. SITE HEADER (§26)
   ========================================================= */
.dio-topbar {
	background: var(--dio-navy-800);
	color: #C9D8EC;
	font-size: var(--dio-fs-xs);
	line-height: 1.6;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dio-topbar__inner {
	display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s4);
	min-height: 34px;
}
.dio-topbar__note { display: inline-flex; align-items: center; gap: 0.4em; }
.dio-topbar__note svg { width: 13px; height: 13px; flex: none; opacity: 0.85; }
.dio-topbar__links { display: flex; gap: var(--dio-s4); list-style: none; margin: 0; padding: 0; }
.dio-topbar a { color: #C9D8EC; text-decoration: none; }
.dio-topbar a:hover { color: #fff; text-decoration: underline; }
@media (max-width: 768px) { .dio-topbar { display: none; } }

.dio-site-header {
	position: sticky; top: var(--dio-adminbar-h);
	z-index: var(--dio-z-header);
	background: var(--dio-surface);
	border-bottom: 1px solid var(--dio-border);
}
.dio-site-header__inner {
	display: flex; align-items: center; gap: var(--dio-s4);
	min-height: var(--dio-header-h);
}
/* Customizer: "स्क्रॉल पर हेडर चिपकाएं" off. */
.dio-site-header--static { position: static; }

/* Brand */
.dio-brand { display: inline-flex; align-items: center; gap: var(--dio-s3); text-decoration: none; flex: none; }
.dio-brand__mark { width: 36px; height: 36px; flex: none; border-radius: var(--dio-r-sm); }
.dio-brand__text { display: flex; flex-direction: column; line-height: 1.1; }
.dio-brand__name {
	font-size: 1.15rem; font-weight: 800; letter-spacing: -0.02em;
	color: var(--dio-navy-800); font-family: var(--dio-font-en);
}
.dio-brand__name span { color: var(--dio-saffron-text); }
.dio-brand__tag { font-size: 0.6875rem; color: var(--dio-muted); font-weight: 500; letter-spacing: 0.02em; }
@media (max-width: 400px) { .dio-brand__tag { display: none; } }

/* Primary navigation (desktop)
 *
 * The IA has 11 top-level entries, which cannot fit on a 1280px screen at
 * comfortable sizing. Rather than let the bar overflow the container, the
 * nav is allowed to shrink (min-width:0) and the label spacing tightens in
 * steps. Below 1200px the horizontal bar is dropped entirely in favour of
 * the drawer, which is the honest solution for this many sections.
 */
.dio-nav { margin-inline-start: auto; min-width: 0; }
.dio-nav__list {
	display: flex; align-items: center; gap: var(--dio-s1);
	list-style: none; margin: 0; padding: 0;
	min-width: 0;
}
.dio-nav__link {
	display: inline-flex; align-items: center; gap: 0.35em;
	padding: 0.55rem 0.7rem;
	border-radius: var(--dio-r-sm);
	font-size: var(--dio-fs-sm); font-weight: 600;
	color: var(--dio-text-2); text-decoration: none;
	white-space: nowrap;
	transition: background var(--dio-t), color var(--dio-t);
}
.dio-nav__link:hover,
.dio-nav__item:focus-within > .dio-nav__link { background: var(--dio-navy-50); color: var(--dio-navy-700); }
/*
 * The item is a flex row so the link and its dropdown caret sit on one
 * line. Without this the caret button wraps below the label on wide
 * viewports and pushes the header out of alignment.
 */
.dio-nav__item { position: relative; display: flex; align-items: center; }
.dio-nav__item.current-menu-item > .dio-nav__link,
.dio-nav__item[aria-current="page"] > .dio-nav__link { color: var(--dio-navy-700); }
.dio-nav__item.current-menu-item > .dio-nav__link { box-shadow: inset 0 -2px 0 var(--dio-saffron-500); border-radius: 0; }

/* Accessible dropdown */
/*
 * The caret must never drop below 24x24 — WCAG 2.2 (2.5.8) measures the
 * button box itself, so shrinking `width`/`height` to fit the bar is a real
 * failure, not a cosmetic one. Instead the box stays 24x24 and the *visual*
 * caret is scaled via the SVG, with negative margins reclaiming the space so
 * the 10-item bar still fits.
 */
.dio-nav__toggle {
	display: inline-flex; align-items: center; justify-content: center;
	width: 24px; height: 24px; min-width: 24px; min-height: 24px;
	margin-inline-start: -2px;
	background: none; border: 0; cursor: pointer; color: inherit; padding: 0;
	flex: none;
}
.dio-nav__toggle svg { width: 11px; height: 11px; transition: transform var(--dio-t); }
.dio-nav__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.dio-nav__sub {
	position: absolute; top: calc(100% + 6px); inset-inline-start: 0;
	min-width: 230px;
	padding: var(--dio-s2);
	margin: 0;
	list-style: none;
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r);
	box-shadow: var(--dio-shadow-md);
	display: none;
	z-index: 10;
}
/*
 * Bridge the 6px gap between the nav item and its panel.
 *
 * The panel is offset by 6px for visual separation, but that gap was dead
 * space: moving the pointer from the label down to the submenu left the
 * item, fired mouseleave and closed the dropdown before it could be
 * clicked. This invisible strip keeps the pointer inside the item for the
 * whole journey. Do not remove it without also removing the top offset.
 */
.dio-nav__item.is-open > .dio-nav__sub::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: -7px;
	height: 7px;
}
.dio-nav__item.is-open > .dio-nav__sub { display: block; }

/*
 * Flip the panel to the right edge when the item is near the end of the bar,
 * so the last dropdowns never run off-screen.
 */
.dio-nav__item--flip > .dio-nav__sub {
	inset-inline-start: auto;
	inset-inline-end: 0;
}
.dio-nav__sub a {
	display: block;
	padding: 0.5rem 0.65rem;
	border-radius: var(--dio-r-sm);
	font-size: var(--dio-fs-sm);
	color: var(--dio-text-2);
	text-decoration: none;
	line-height: 1.5;
}
.dio-nav__sub a:hover { background: var(--dio-navy-50); color: var(--dio-navy-700); }

@media (max-width: 1199px) { .dio-nav { display: none; } }

/*
 * Progressive tightening so the full IA fits between 1200px and 1600px.
 *
 * The bar carries 10 top-level entries, most with long Devanagari labels.
 * At the previous sizing the list measured ~954px inside a ~937px track, so
 * the final item ("How-To Guides") was clipped at EVERY desktop width and
 * the header search button was pushed against the viewport edge. The steps
 * below shrink padding and label size progressively; below 1200px the bar
 * gives way to the drawer, which is the honest answer for this many
 * sections.
 */
/*
 * NOTE: this has no upper bound on purpose. .dio-container caps at 1220px, so
 * the nav track stays ~920px no matter how wide the viewport gets — a
 * max-width here left the bar clipped on 1920px screens.
 */
/*
 * These values were tuned when the menu had 10 items and 8 dropdown carets,
 * where every pixel counted. The taxonomy merge cut the bar to 6 items with
 * no carets, so the nav now needs ~470px of a ~920px track. The old
 * `gap: 0` + 0.18rem padding squeezed the labels together with no visible
 * separation; there is no longer any reason to crowd them.
 */
@media (min-width: 1200px) {
	.dio-nav__list { gap: 0.35rem; }
	.dio-nav__link { padding-inline: 0.7rem; font-size: var(--dio-fs-sm); letter-spacing: normal; }
	/*
	 * No negative margin here: overlapping the neighbouring link leaves the
	 * caret only ~22px of unobstructed space, which axe correctly reports as
	 * a 2.5.8 failure. Width is reclaimed from the link padding instead.
	 */
	.dio-nav__toggle { margin-inline: 0; }
	.dio-site-header__inner { gap: var(--dio-s3); }
	.dio-brand__tag { display: none; }
}

/*
 * Narrow desktop step. Only trims spacing — never removes it — and only
 * kicks in if the bar is genuinely tight.
 */
@media (min-width: 1200px) and (max-width: 1400px) {
	.dio-nav__list { gap: 0.25rem; }
	.dio-nav__link { padding-inline: 0.55rem; font-size: 0.8125rem; }
	.dio-nav__toggle svg { width: 10px; height: 10px; }
	.dio-brand__name { font-size: 1.02rem; }
	.dio-brand { gap: var(--dio-s2); }
}

/* Header actions */
.dio-header-actions { display: flex; align-items: center; gap: var(--dio-s1); margin-inline-start: auto; }
@media (min-width: 1200px) { .dio-header-actions { margin-inline-start: var(--dio-s2); } }
.dio-iconbtn {
	display: inline-grid; place-items: center;
	width: 44px; height: 44px;
	/*
	 * GeneratePress sets `button { padding: 10px 20px }`. With a fixed 44px
	 * width and border-box sizing that padding plus the 1px borders leaves a
	 * 2px content box, which collapses the icon to an invisible sliver — the
	 * hamburger disappears on mobile. Reset it explicitly; never rely on the
	 * parent theme's button padding here.
	 */
	padding: 0;
	border: 1px solid transparent;
	border-radius: var(--dio-r);
	background: none;
	color: var(--dio-text-2);
	cursor: pointer;
	transition: background var(--dio-t), color var(--dio-t);
}
.dio-iconbtn:hover { background: var(--dio-navy-50); color: var(--dio-navy-700); }
.dio-iconbtn svg { width: 21px; height: 21px; flex: none; }
@media (min-width: 1200px) { .dio-iconbtn--menu { display: none; } }

/* Header search panel */
.dio-header-search {
	display: none;
	padding: var(--dio-s3) 0;
	border-top: 1px solid var(--dio-border);
	background: var(--dio-surface);
}
.dio-header-search.is-open { display: block; }
.dio-searchform { display: flex; gap: var(--dio-s2); }
.dio-searchform__field { position: relative; flex: 1; }
.dio-searchform__field svg {
	position: absolute; inset-inline-start: 12px; top: 50%; transform: translateY(-50%);
	width: 18px; height: 18px; color: var(--dio-muted); pointer-events: none;
}
.dio-searchform input[type="search"] {
	width: 100%;
	min-height: 46px;
	padding: 0.6rem var(--dio-s3) 0.6rem 40px;
	border: 1px solid var(--dio-border-strong);
	border-radius: var(--dio-r);
	background: var(--dio-surface);
	color: var(--dio-text);
	font: inherit; font-size: var(--dio-fs-base);
	-webkit-appearance: none; appearance: none;
}
.dio-searchform input[type="search"]:focus {
	outline: none; border-color: var(--dio-navy-500); box-shadow: var(--dio-focus);
}

/* =========================================================
   2. MOBILE DRAWER
   ========================================================= */
.dio-drawer-backdrop {
	position: fixed; inset: 0;
	background: rgba(8, 23, 46, 0.5);
	opacity: 0; visibility: hidden;
	transition: opacity var(--dio-t), visibility var(--dio-t);
	z-index: var(--dio-z-overlay);
}
.dio-drawer-backdrop.is-open { opacity: 1; visibility: visible; }
.dio-drawer {
	position: fixed; inset-block: var(--dio-adminbar-h) 0; inset-inline-start: 0;
	width: min(86vw, 340px);
	max-width: 100%;
	background: var(--dio-surface);
	z-index: calc(var(--dio-z-overlay) + 1);
	transform: translateX(-100%);
	transition: transform 220ms ease;
	display: flex; flex-direction: column;
	overflow-y: auto;
	overscroll-behavior: contain;
	box-shadow: var(--dio-shadow-md);
}
.dio-drawer.is-open { transform: translateX(0); }
@media (prefers-reduced-motion: reduce) { .dio-drawer { transition: none; } }
.dio-drawer__head {
	display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s3);
	padding: var(--dio-s3) var(--dio-s4);
	border-bottom: 1px solid var(--dio-border);
	position: sticky; top: 0; background: var(--dio-surface); z-index: 1;
}
.dio-drawer__body { padding: var(--dio-s4); }
.dio-drawer__nav, .dio-drawer__nav ul { list-style: none; margin: 0; padding: 0; }
.dio-drawer__nav > li { border-bottom: 1px solid var(--dio-border); }
.dio-drawer__nav a {
	display: block;
	padding: 0.85rem 0.25rem;
	font-size: var(--dio-fs-sm); font-weight: 600;
	color: var(--dio-text); text-decoration: none;
}
.dio-drawer__nav a:hover { color: var(--dio-navy-600); }
.dio-drawer__row { display: flex; align-items: center; justify-content: space-between; gap: var(--dio-s2); }
.dio-drawer__row a { flex: 1; }
.dio-drawer__expand {
	width: 44px; height: 44px; flex: none;
	display: grid; place-items: center;
	padding: 0;                    /* see .dio-iconbtn — GP's button padding crushes the icon */
	background: none; border: 0; cursor: pointer; color: var(--dio-muted);
	border-radius: var(--dio-r-sm);
}
.dio-drawer__expand svg { width: 12px; height: 12px; flex: none; transition: transform var(--dio-t); }
.dio-drawer__expand[aria-expanded="true"] svg { transform: rotate(180deg); }
.dio-drawer__sub { display: none; padding: 0 0 var(--dio-s2) var(--dio-s4); }
.dio-drawer__sub.is-open { display: block; }
.dio-drawer__sub a { padding: 0.6rem 0.25rem; font-weight: 500; color: var(--dio-text-2); font-size: var(--dio-fs-sm); }
body.dio-drawer-open { overflow: hidden; }

/* =========================================================
   3. HERO (§5)
   ========================================================= */
.dio-hero {
	position: relative;
	isolation: isolate;
	background:
		radial-gradient(900px 520px at 88% -10%, rgba(224, 122, 23, 0.20), transparent 62%),
		radial-gradient(700px 420px at 4% 104%, rgba(23, 66, 127, 0.55), transparent 60%),
		linear-gradient(165deg, var(--dio-navy-900) 0%, var(--dio-navy-800) 46%, var(--dio-navy-700) 100%);
	color: #fff;
	padding-block: clamp(2.5rem, 1.4rem + 4.2vw, 4.75rem);
	overflow: hidden;
}
/*
 * Two decorative layers, both pointer-events:none and both pure CSS so they
 * cost no requests and cannot shift layout.
 */
.dio-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
	background-size: 100% 48px, 48px 100%;
	mask-image: radial-gradient(1000px 520px at 22% 40%, #000 35%, transparent 78%);
	-webkit-mask-image: radial-gradient(1000px 520px at 22% 40%, #000 35%, transparent 78%);
	pointer-events: none;
}
.dio-hero::after {
	content: "";
	position: absolute;
	inset-inline-end: -180px;
	inset-block-start: -180px;
	width: 520px;
	height: 520px;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(224, 122, 23, 0.16), transparent 68%);
	filter: blur(6px);
	pointer-events: none;
}

/* Two-column on desktop: message + search on the left, quick access right. */
.dio-hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
	align-items: start;
	gap: clamp(2rem, 1rem + 3vw, 3.5rem);
}
.dio-hero__main { min-width: 0; max-width: 46rem; }
@media (max-width: 1024px) {
	.dio-hero__inner { grid-template-columns: minmax(0, 1fr); }
	.dio-hero__aside { display: none; }
}
.dio-hero__eyebrow {
	display: inline-flex; align-items: center; gap: 0.5em;
	padding: 0.34rem 0.85rem;
	margin-bottom: var(--dio-s5);
	border: 1px solid rgba(255, 255, 255, 0.24);
	border-radius: var(--dio-r-pill);
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	font-size: var(--dio-fs-xs); font-weight: 600; color: #E4EDF9;
	letter-spacing: 0.01em;
}
.dio-hero__eyebrow svg { width: 13px; height: 13px; color: #FFC078; }
.dio-hero__eyebrow .dio-hero__dot {
	width: 6px; height: 6px; border-radius: 50%;
	background: #4ADE80;
	box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.22);
	flex: none;
}
.dio-hero__title {
	margin: 0 0 var(--dio-s4);
	font-size: var(--dio-fs-4xl);
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
/*
 * The highlight is underscored with a soft saffron rule rather than relying
 * on colour alone, so the emphasis survives greyscale and colour-blind view.
 */
/*
 * Devanagari carries matras below the baseline, so a background-position
 * underline collides with them. A short saffron rule under the whole phrase
 * reads cleanly and keeps the emphasis non-colour-dependent.
 */
.dio-hero__title em {
	font-style: normal;
	color: #FFC078;
	position: relative;
	white-space: nowrap;
}
.dio-hero__title em::after {
	content: "";
	position: absolute;
	inset-inline: 0;
	bottom: -0.14em;
	height: 3px;
	border-radius: 3px;
	background: linear-gradient(90deg, rgba(224, 122, 23, 0.95), rgba(224, 122, 23, 0.25));
}
@media (max-width: 560px) {
	.dio-hero__title em { white-space: normal; }
	.dio-hero__title em::after { display: none; }
}
.dio-hero__sub {
	margin: 0 0 var(--dio-s6);
	max-width: 56ch;
	font-size: var(--dio-fs-lg);
	line-height: 1.7;
	color: #CBDAEE;
}
.dio-hero__searchwrap { max-width: 640px; }
/*
 * The search is the primary action of the whole site, so it sits on a raised
 * white "card" that reads clearly against the dark hero.
 */
.dio-hero__search {
	display: flex;
	gap: var(--dio-s2);
	padding: 6px;
	border-radius: calc(var(--dio-r) + 6px);
	background: rgba(255, 255, 255, 0.10);
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.85);
	transition: border-color var(--dio-t), background var(--dio-t);
}
.dio-hero__search:focus-within {
	background: rgba(255, 255, 255, 0.16);
	border-color: rgba(255, 255, 255, 0.38);
}
.dio-hero__field { position: relative; flex: 1; min-width: 0; }
.dio-hero__field svg {
	position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%);
	width: 19px; height: 19px; color: var(--dio-muted); pointer-events: none;
}
.dio-hero__search input[type="search"] {
	width: 100%;
	min-height: 54px;
	padding: 0.75rem var(--dio-s4) 0.75rem 44px;
	border: 1px solid transparent;
	border-radius: var(--dio-r);
	background: #fff;
	color: var(--dio-text);
	font: inherit; font-size: var(--dio-fs-base);
	-webkit-appearance: none; appearance: none;
	box-shadow: var(--dio-shadow-md);
}
.dio-hero__search input[type="search"]:focus {
	outline: none;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.65);
}
.dio-hero__search .dio-btn {
	min-height: 54px;
	padding-inline: 1.5rem;
	font-size: var(--dio-fs-base);
	gap: 0.5em;
	flex: none;
}
.dio-hero__examples {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-s2);
	margin-top: var(--dio-s4);
	font-size: var(--dio-fs-xs);
	color: #A9BEDA;
}
.dio-hero__example {
	display: inline-flex; align-items: center;
	min-height: 32px;
	padding: 0.25rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.2);
	border-radius: var(--dio-r-pill);
	color: #E4EDF9; text-decoration: none;
	font-size: var(--dio-fs-xs);
	transition: background var(--dio-t), border-color var(--dio-t);
}
.dio-hero__example:hover { background: rgba(255, 255, 255, 0.12); border-color: rgba(255,255,255,0.4); color: #fff; }
.dio-hero__stats {
	display: flex; flex-wrap: wrap; gap: var(--dio-s5) var(--dio-s8);
	margin-top: var(--dio-s8);
	padding-top: var(--dio-s5);
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.dio-hero__stat { display: flex; align-items: flex-start; gap: 0.6rem; }
.dio-hero__stat svg { width: 18px; height: 18px; color: #FFC078; flex: none; margin-top: 2px; }
.dio-hero__stat strong { display: block; font-size: var(--dio-fs-base); color: #fff; line-height: 1.3; font-weight: 700; }
.dio-hero__stat span { font-size: var(--dio-fs-xs); color: #A9BEDA; }

/* ---- Quick-access panel (desktop only) ---------------------------------- */
.dio-hero__aside {
	position: relative;
	padding: var(--dio-s5);
	border-radius: var(--dio-r-lg);
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.16);
	box-shadow: 0 28px 60px -34px rgba(0, 0, 0, 0.9);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}
.dio-hero__asidehead {
	display: flex; align-items: center; gap: 0.5rem;
	margin: 0 0 var(--dio-s4);
	font-size: var(--dio-fs-xs);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #A9BEDA;
}
.dio-hero__asidehead svg { width: 15px; height: 15px; color: #FFC078; flex: none; }
.dio-hero__links { display: grid; gap: var(--dio-s2); list-style: none; margin: 0; padding: 0; }
.dio-hero__link {
	display: flex; align-items: center; gap: 0.75rem;
	padding: 0.7rem 0.85rem;
	border-radius: var(--dio-r-sm);
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.10);
	color: #E4EDF9;
	text-decoration: none;
	font-size: var(--dio-fs-sm);
	font-weight: 600;
	transition: background var(--dio-t), border-color var(--dio-t), transform var(--dio-t);
}
.dio-hero__link:hover {
	background: rgba(255, 255, 255, 0.13);
	border-color: rgba(255, 255, 255, 0.30);
	color: #fff;
	transform: translateX(3px);
}
.dio-hero__link svg { width: 17px; height: 17px; color: #FFC078; flex: none; }
.dio-hero__link .dio-hero__linkarrow {
	margin-inline-start: auto;
	width: 15px; height: 15px;
	color: #8FA9CC;
	transition: transform var(--dio-t);
}
.dio-hero__link:hover .dio-hero__linkarrow { transform: translateX(2px); color: #fff; }

@media (prefers-reduced-motion: reduce) {
	.dio-hero__link, .dio-hero__link .dio-hero__linkarrow { transition: none; }
	.dio-hero__link:hover { transform: none; }
	.dio-hero__link:hover .dio-hero__linkarrow { transform: none; }
}

@media (max-width: 560px) {
	.dio-hero__search { flex-direction: column; background: none; border: 0; box-shadow: none; padding: 0; }
	.dio-hero__search .dio-btn { width: 100%; }
	.dio-hero__stats { gap: var(--dio-s4); margin-top: var(--dio-s6); }
}

/* =========================================================
   4. HOMEPAGE SECTIONS
   ========================================================= */
.dio-quickbar { background: var(--dio-surface); border-bottom: 1px solid var(--dio-border); padding-block: var(--dio-s5); }

/* Featured: 1 primary + secondary column */
.dio-featured { display: grid; gap: var(--dio-s5); grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.dio-featured__side { display: grid; gap: var(--dio-s4); align-content: start; }
@media (max-width: 900px) { .dio-featured { grid-template-columns: minmax(0, 1fr); } }

/* Haryana section — distinctive but restrained */
.dio-haryana {
	background: linear-gradient(180deg, var(--dio-navy-50), var(--dio-bg));
	border-block: 1px solid var(--dio-border);
	position: relative;
}
.dio-haryana .dio-section-head__title::before { background: var(--dio-navy-600); }
.dio-haryana__badge {
	display: inline-flex; align-items: center; gap: 0.4em;
	padding: 0.2rem 0.6rem;
	border-radius: var(--dio-r-sm);
	background: var(--dio-navy-700); color: #fff;
	font-size: var(--dio-fs-xs); font-weight: 700; letter-spacing: 0.04em;
}
.dio-haryana__layout { display: grid; gap: var(--dio-s6); grid-template-columns: minmax(0, 1fr) 300px; align-items: start; }
@media (max-width: 900px) { .dio-haryana__layout { grid-template-columns: minmax(0, 1fr); } }
.dio-panel {
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-lg);
}
.dio-panel__title { margin: 0 0 var(--dio-s3); font-size: var(--dio-fs-base); }
.dio-linklist { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dio-s1); }
.dio-linklist a {
	display: flex; align-items: center; gap: var(--dio-s2);
	padding: var(--dio-s2) 0;
	font-size: var(--dio-fs-sm); color: var(--dio-text-2); text-decoration: none; line-height: 1.55;
}
.dio-linklist a::before { content: "›"; color: var(--dio-saffron-600); font-weight: 700; flex: none; }
.dio-linklist a:hover { color: var(--dio-navy-600); }

/* Jobs strip */
.dio-jobs-grid { display: grid; gap: var(--dio-s4); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 768px) { .dio-jobs-grid { grid-template-columns: minmax(0, 1fr); } }

/* Two-column mixed section */
.dio-split { display: grid; gap: var(--dio-s8); grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .dio-split { grid-template-columns: minmax(0, 1fr); gap: var(--dio-s10); } }

/* Trust strip */
.dio-trust { background: var(--dio-navy-800); color: #CBDAEE; }
.dio-trust__grid { display: grid; gap: var(--dio-s6); grid-template-columns: repeat(4, minmax(0, 1fr)); }
.dio-trust__item { display: flex; gap: var(--dio-s3); }
.dio-trust__icon {
	flex: none; display: grid; place-items: center;
	width: 38px; height: 38px; border-radius: var(--dio-r);
	background: rgba(255, 255, 255, 0.08); color: #FFC078;
}
.dio-trust__icon svg { width: 19px; height: 19px; }
.dio-trust__title { margin: 0 0 2px; font-size: var(--dio-fs-sm); color: #fff; }
.dio-trust__text { margin: 0; font-size: var(--dio-fs-xs); line-height: 1.65; color: #A9BEDA; }
@media (max-width: 900px) { .dio-trust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .dio-trust__grid { grid-template-columns: minmax(0, 1fr); gap: var(--dio-s4); } }

/* =========================================================
   5. PAGE HEADERS / ARCHIVES (§22, §57)
   ========================================================= */
.dio-pagehead {
	background: var(--dio-surface);
	border-bottom: 1px solid var(--dio-border);
	padding-block: var(--dio-s6) var(--dio-s8);
}
.dio-pagehead__inner { max-width: 780px; }
.dio-pagehead__kicker {
	display: inline-block;
	margin-bottom: var(--dio-s2);
	font-size: var(--dio-fs-xs); font-weight: 700; letter-spacing: 0.06em;
	text-transform: uppercase; color: var(--dio-saffron-700);
}
.dio-pagehead__title { margin: var(--dio-s3) 0 var(--dio-s3); font-size: var(--dio-fs-3xl); }
.dio-pagehead__desc { margin: 0; font-size: var(--dio-fs-md); color: var(--dio-text-2); line-height: 1.75; }
.dio-pagehead__meta { margin-top: var(--dio-s4); }

/* =========================================================
   6. ARTICLE (§18)
   ========================================================= */
.dio-article { background: var(--dio-surface); border: 1px solid var(--dio-border); border-radius: var(--dio-r-lg); overflow: hidden; }
.dio-article__inner { padding: clamp(1.25rem, 0.8rem + 2vw, 2.5rem); }
.dio-article__header { margin-bottom: var(--dio-s6); }
.dio-article__cat {
	display: inline-block; margin-bottom: var(--dio-s3);
	font-size: var(--dio-fs-xs); font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
	color: var(--dio-saffron-700); text-decoration: none;
}
.dio-article__title { margin: 0 0 var(--dio-s4); font-size: var(--dio-fs-3xl); line-height: 1.25; }
.dio-article__standfirst { margin: 0 0 var(--dio-s5); font-size: var(--dio-fs-lg); color: var(--dio-text-2); line-height: 1.75; }
.dio-article__byline {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--dio-s3);
	padding: var(--dio-s3) 0;
	border-block: 1px solid var(--dio-border);
	font-size: var(--dio-fs-xs); color: var(--dio-muted);
}
.dio-article__byline img { width: 34px; height: 34px; border-radius: 50%; }
.dio-article__byline strong { color: var(--dio-text); font-weight: 700; }
.dio-article__byline .dio-dot { color: var(--dio-border-strong); }
.dio-article__figure { margin: var(--dio-s6) 0; }
.dio-article__figure img { width: 100%; border-radius: var(--dio-r); background: var(--dio-surface-2); }
.dio-article__figure figcaption { margin-top: var(--dio-s2); font-size: var(--dio-fs-xs); color: var(--dio-muted); line-height: 1.6; }

/* Body typography */
.dio-entry-content { font-size: var(--dio-fs-md); line-height: var(--dio-lh-body); color: var(--dio-text); }
.dio-entry-content > * + * { margin-top: var(--dio-s5); }
.dio-entry-content h2 {
	margin-top: var(--dio-s10); font-size: var(--dio-fs-2xl);
	padding-bottom: var(--dio-s2); border-bottom: 1px solid var(--dio-border); scroll-margin-top: calc(var(--dio-adminbar-h) + 90px);
}
.dio-entry-content h3 { margin-top: var(--dio-s8); font-size: var(--dio-fs-xl); scroll-margin-top: calc(var(--dio-adminbar-h) + 90px); }
.dio-entry-content h4 { margin-top: var(--dio-s6); font-size: var(--dio-fs-lg); scroll-margin-top: calc(var(--dio-adminbar-h) + 90px); }
.dio-entry-content :is(ul, ol) { padding-inline-start: 1.35em; display: grid; gap: var(--dio-s2); }
.dio-entry-content li { line-height: 1.75; }
.dio-entry-content li > ul, .dio-entry-content li > ol { margin-top: var(--dio-s2); }
.dio-entry-content blockquote {
	margin: var(--dio-s6) 0;
	padding: var(--dio-s2) var(--dio-s5);
	border-inline-start: 3px solid var(--dio-saffron-500);
	font-family: var(--dio-font-serif);
	font-size: var(--dio-fs-lg);
	color: var(--dio-text-2);
	line-height: 1.8;
}
.dio-entry-content blockquote p:last-child { margin-bottom: 0; }
.dio-entry-content :is(code, kbd) {
	font-family: var(--dio-font-mono); font-size: 0.9em;
	background: var(--dio-surface-2); padding: 0.15em 0.4em; border-radius: var(--dio-r-sm);
	border: 1px solid var(--dio-border);
}
.dio-entry-content pre {
	background: var(--dio-navy-900); color: #E6EDF7;
	padding: var(--dio-s4); border-radius: var(--dio-r);
	overflow-x: auto; font-size: var(--dio-fs-sm); line-height: 1.6;
}
.dio-entry-content pre code { background: none; border: 0; color: inherit; padding: 0; }
.dio-entry-content img { border-radius: var(--dio-r); height: auto; }
.dio-entry-content figure { margin: var(--dio-s6) 0; }
.dio-entry-content figcaption { margin-top: var(--dio-s2); font-size: var(--dio-fs-xs); color: var(--dio-muted); text-align: center; }
.dio-entry-content a { color: var(--dio-navy-600); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.dio-entry-content a:hover { color: var(--dio-navy-500); }
.dio-entry-content hr { border: 0; border-top: 1px solid var(--dio-border); margin: var(--dio-s8) 0; }

.dio-article__footer { margin-top: var(--dio-s8); padding-top: var(--dio-s5); border-top: 1px solid var(--dio-border); }
.dio-updated {
	display: inline-flex; align-items: center; gap: 0.4em;
	padding: 0.25rem 0.65rem;
	border-radius: var(--dio-r-sm);
	background: var(--dio-success-50); color: var(--dio-success-700);
	font-size: var(--dio-fs-xs); font-weight: 600;
}
.dio-updated svg { width: 13px; height: 13px; }

/* Reading progress */
.dio-progress {
	position: fixed; inset-inline: 0; top: var(--dio-adminbar-h);
	height: 3px; z-index: calc(var(--dio-z-header) + 1);
	background: var(--dio-saffron-500);
	transform-origin: 0 50%;
	transform: scaleX(0);
	pointer-events: none;
}

/* =========================================================
   7. SIDEBAR (§28)
   ========================================================= */
.dio-sidebar { display: grid; gap: var(--dio-s5); align-content: start; }
/*
 * The widgets are children of .dio-sidebar-sticky, NOT of .dio-sidebar, so the
 * grid gap above never applied to them — every widget sat flush against the
 * next (measured 0-1px). The spacing has to live on the wrapper that actually
 * contains them.
 */
.dio-sidebar-sticky { display: grid; gap: var(--dio-s5); align-content: start; }
.dio-widget {
	padding: var(--dio-s5);
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-lg);
}
.dio-widget__title {
	margin: 0 0 var(--dio-s4);
	padding-bottom: var(--dio-s2);
	border-bottom: 1px solid var(--dio-border);
	font-size: var(--dio-fs-base);
	display: flex; align-items: center; gap: var(--dio-s2);
}
.dio-widget__title svg { width: 17px; height: 17px; color: var(--dio-saffron-600); flex: none; }
.dio-widget ul { list-style: none; margin: 0; padding: 0; }
/*
 * The newsletter keeps its dark gradient even when it also carries .dio-widget
 * for sidebar spacing. layout.css loads after components.css, so .dio-widget's
 * white surface would otherwise win the cascade and leave pale-blue body text
 * on white — a real contrast failure, not a cosmetic one.
 */
.dio-widget.dio-newsletter {
	border: 0;
	background: linear-gradient(180deg, var(--dio-navy-700), var(--dio-navy-800));
	color: #fff;
}
.dio-widget.dio-newsletter .dio-widget__title { color: #fff; border-bottom-color: rgba(255,255,255,0.15); }
@media (max-width: 1024px) { .dio-sidebar { margin-top: var(--dio-s10); } }

/* =========================================================
   8. FOOTER (§27)
   ========================================================= */
.dio-site-footer { background: var(--dio-navy-900); color: #A9BEDA; margin-top: var(--dio-section); }
.dio-footer__main { padding-block: var(--dio-s10) var(--dio-s8); }
/*
 * Explicit column counts, driven by how many columns actually rendered.
 * Link columns are conditional now (a column with no links is omitted), so the
 * count is set by a body-level class from dio_footer_column_count().
 *
 * NB: `repeat(auto-fit, minmax(...))` does NOT work here — combined with the
 * leading `1.5fr` it collapses to a single track and stacks every column into
 * one narrow strip. Keep the counts explicit.
 */
.dio-footer__grid {
	display: grid;
	gap: var(--dio-s8);
	grid-template-columns: 1.5fr repeat(3, 1fr);
	align-items: start;
}
.dio-footer__grid--cols-1 { grid-template-columns: minmax(0, 1fr); }
.dio-footer__grid--cols-2 { grid-template-columns: 1.5fr 1fr; }
.dio-footer__grid--cols-3 { grid-template-columns: 1.5fr repeat(2, 1fr); }
.dio-footer__grid--cols-4 { grid-template-columns: 1.5fr repeat(3, 1fr); }
/*
 * Customizer "फुटर कॉलम" caps the maximum. Surplus columns are hidden rather
 * than wrapped into a ragged extra row; `nth-of-type` counts only rendered
 * columns. Legal links also live in the footer bottom bar, so nothing becomes
 * unreachable when one is dropped.
 */
.dio-footer__grid--3 { grid-template-columns: 1.5fr repeat(2, 1fr); }
.dio-footer__grid--2 { grid-template-columns: 1.5fr 1fr; }
.dio-footer__grid--3 > .dio-footer__col:nth-of-type(4) { display: none; }
.dio-footer__grid--2 > .dio-footer__col:nth-of-type(n + 3) { display: none; }
.dio-footer__title {
	margin: 0 0 var(--dio-s4); font-size: var(--dio-fs-sm); color: #fff;
	letter-spacing: 0.04em; text-transform: uppercase; font-weight: 700;
}
.dio-footer__about { font-size: var(--dio-fs-sm); line-height: 1.8; margin: 0 0 var(--dio-s4); max-width: 40ch; }
.dio-footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--dio-s2); }
.dio-footer a { color: #A9BEDA; text-decoration: none; font-size: var(--dio-fs-sm); line-height: 1.7; }
.dio-footer a:hover { color: #fff; text-decoration: underline; }
.dio-footer__brand { display: inline-flex; align-items: center; gap: var(--dio-s3); margin-bottom: var(--dio-s4); }
.dio-footer__brand .dio-brand__name { color: #fff; }
.dio-footer__brand .dio-brand__name span { color: var(--dio-saffron-text-dark); }
.dio-footer__social { display: flex; gap: var(--dio-s2); margin-top: var(--dio-s4); }
.dio-footer__social a {
	display: grid; place-items: center;
	width: 40px; height: 40px;
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: var(--dio-r);
	color: #A9BEDA;
	transition: background var(--dio-t), color var(--dio-t);
}
.dio-footer__social a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.dio-footer__social svg { width: 18px; height: 18px; }
.dio-footer__bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding-block: var(--dio-s5);
	font-size: var(--dio-fs-xs);
	line-height: 1.7;
}
.dio-footer__bottom-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--dio-s3); }
.dio-footer__disclaimer { margin: 0 0 var(--dio-s3); max-width: 92ch; color: #8FA3BF; }
@media (max-width: 900px) { .dio-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--dio-s6); } }
@media (max-width: 560px) {
	.dio-footer__grid { grid-template-columns: minmax(0, 1fr); text-align: center; gap: var(--dio-s6); }
	.dio-footer__about { max-width: none; }
	.dio-footer__brand, .dio-footer__social { justify-content: center; }
	.dio-footer__bottom-inner { justify-content: center; text-align: center; }
	.dio-footer ul { gap: var(--dio-s3); }
}

/* Mobile bottom action bar */
.dio-mobilebar {
	position: fixed; inset-inline: 0; bottom: 0;
	z-index: var(--dio-z-header);
	display: none;
	background: var(--dio-surface);
	border-top: 1px solid var(--dio-border);
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -1px 8px rgba(11, 27, 51, 0.06);
}
.dio-mobilebar__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.dio-mobilebar a {
	display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
	min-height: 56px; padding: var(--dio-s2) 0;
	font-size: 0.6875rem; font-weight: 600;
	color: var(--dio-muted); text-decoration: none;
}
.dio-mobilebar a:hover, .dio-mobilebar a[aria-current="page"] { color: var(--dio-navy-600); }
.dio-mobilebar svg { width: 19px; height: 19px; }
@media (max-width: 768px) {
	.dio-mobilebar { display: block; }
	body.dio { padding-bottom: 60px; }
}

/* =========================================================
   9. TOOLS (§16, §47)
   ========================================================= */

/*
 * Engine switcher shown above the live calculator on the tools archive and
 * the tools page template. These are real links carrying ?tool=<key>, so each
 * calculator is shareable and the page works with JavaScript disabled.
 */
.dio-toolswitch {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dio-s2);
	margin-bottom: var(--dio-s5);
}
.dio-toolswitch__item {
	display: inline-flex;
	align-items: center;
	gap: 0.45em;
	min-height: 40px;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-pill);
	background: var(--dio-surface);
	color: var(--dio-text-2);
	text-decoration: none;
	font-size: var(--dio-fs-sm);
	font-weight: 600;
	line-height: 1.2;
	transition: background var(--dio-t), border-color var(--dio-t), color var(--dio-t);
}
.dio-toolswitch__item svg { width: 16px; height: 16px; flex: none; color: var(--dio-saffron-text); }
.dio-toolswitch__item:hover {
	background: var(--dio-navy-50);
	border-color: var(--dio-navy-600);
	color: var(--dio-navy-700);
}
/* Active state carries a border and weight change, not colour alone. */
.dio-toolswitch__item.is-active {
	background: var(--dio-navy-700);
	border-color: var(--dio-navy-700);
	color: #fff;
	font-weight: 700;
}
.dio-toolswitch__item.is-active svg { color: #FFC078; }

.dio-toolstage { margin-bottom: var(--dio-s8); }

@media (pointer: coarse) {
	.dio-toolswitch__item { min-height: 44px; }
}

.dio-toolapp {
	background: var(--dio-surface);
	border: 1px solid var(--dio-border);
	border-radius: var(--dio-r-lg);
	overflow: hidden;
}
.dio-toolapp__head { padding: var(--dio-s5); border-bottom: 1px solid var(--dio-border); background: var(--dio-surface-2); }
.dio-toolapp__title { margin: 0 0 var(--dio-s1); font-size: var(--dio-fs-xl); }
.dio-toolapp__desc { margin: 0; font-size: var(--dio-fs-sm); color: var(--dio-muted); line-height: 1.65; }
.dio-toolapp__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0; }
.dio-toolapp__inputs { padding: var(--dio-s5); }
.dio-toolapp__output {
	padding: var(--dio-s5);
	background: var(--dio-navy-50);
	border-inline-start: 1px solid var(--dio-border);
}
@media (max-width: 768px) {
	.dio-toolapp__body { grid-template-columns: minmax(0, 1fr); }
	.dio-toolapp__output { border-inline-start: 0; border-top: 1px solid var(--dio-border); }
}
.dio-toolapp__actions { display: flex; flex-wrap: wrap; gap: var(--dio-s2); margin-top: var(--dio-s5); }
.dio-result { display: grid; gap: var(--dio-s3); }
.dio-result__primary {
	padding: var(--dio-s4);
	background: var(--dio-surface);
	border: 1px solid var(--dio-navy-300);
	border-radius: var(--dio-r);
	text-align: center;
}
.dio-result__label { display: block; font-size: var(--dio-fs-xs); color: var(--dio-muted); margin-bottom: var(--dio-s1); }
.dio-result__value {
	display: block;
	font-family: var(--dio-font-en);
	font-size: var(--dio-fs-2xl); font-weight: 800;
	color: var(--dio-navy-700);
	line-height: 1.2;
	word-break: break-word;
}
.dio-result__rows { display: grid; gap: 1px; background: var(--dio-border); border: 1px solid var(--dio-border); border-radius: var(--dio-r); overflow: hidden; }
.dio-result__row { display: flex; justify-content: space-between; gap: var(--dio-s3); padding: var(--dio-s3) var(--dio-s4); background: var(--dio-surface); font-size: var(--dio-fs-sm); }
.dio-result__row dt { color: var(--dio-muted); margin: 0; }
.dio-result__row dd { margin: 0; font-weight: 700; color: var(--dio-heading); font-family: var(--dio-font-en); }
.dio-result[hidden] { display: none; }
.dio-tool-placeholder { font-size: var(--dio-fs-sm); color: var(--dio-muted); text-align: center; padding: var(--dio-s8) var(--dio-s4); line-height: 1.7; }

/* Inline radio/segmented control */
.dio-segment { display: inline-flex; border: 1px solid var(--dio-border-strong); border-radius: var(--dio-r); overflow: hidden; }
.dio-segment input { position: absolute; opacity: 0; pointer-events: none; }
.dio-segment label {
	padding: 0.5rem 0.9rem; font-size: var(--dio-fs-sm); font-weight: 600;
	cursor: pointer; color: var(--dio-text-2); background: var(--dio-surface); min-height: 42px;
	display: inline-flex; align-items: center;
}
.dio-segment label + label { border-inline-start: 1px solid var(--dio-border); }
.dio-segment input:checked + label { background: var(--dio-navy-600); color: #fff; }
.dio-segment input:focus-visible + label { outline: 2px solid var(--dio-navy-500); outline-offset: -2px; }

/* =========================================================
   10. SEARCH RESULTS (§21)
   ========================================================= */
.dio-searchbar-lg { max-width: 640px; margin-bottom: var(--dio-s5); }
.dio-search-filters { display: flex; flex-wrap: wrap; gap: var(--dio-s2); margin-bottom: var(--dio-s6); }
.dio-result-item {
	display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: var(--dio-s4);
	padding: var(--dio-s5) 0;
	border-bottom: 1px solid var(--dio-border);
}
.dio-result-item:first-child { padding-top: 0; }
.dio-result-item__media img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: var(--dio-r-sm); }
.dio-result-item__title { margin: var(--dio-s1) 0 var(--dio-s2); font-size: var(--dio-fs-lg); line-height: 1.4; }
.dio-result-item__title a { color: var(--dio-heading); text-decoration: none; }
.dio-result-item__title a:hover { color: var(--dio-navy-600); text-decoration: underline; }
.dio-result-item__excerpt { margin: 0 0 var(--dio-s2); font-size: var(--dio-fs-sm); color: var(--dio-text-2); line-height: 1.7; }
@media (max-width: 600px) {
	.dio-result-item { grid-template-columns: 96px minmax(0, 1fr); gap: var(--dio-s3); }
	.dio-result-item__title { font-size: var(--dio-fs-base); }
	.dio-result-item__excerpt { display: none; }
}

/* =========================================================
   11. 404 (§56)
   ========================================================= */
.dio-404 { text-align: center; padding-block: var(--dio-s16); }
.dio-404__code {
	font-family: var(--dio-font-en); font-size: clamp(4rem, 3rem + 8vw, 8rem);
	font-weight: 800; line-height: 1; color: var(--dio-ghost-figure); margin: 0;
}
.dio-404__title { margin: calc(var(--dio-s6) * -1) 0 var(--dio-s3); font-size: var(--dio-fs-2xl); position: relative; }
.dio-404__text { margin: 0 auto var(--dio-s6); max-width: 50ch; color: var(--dio-muted); font-size: var(--dio-fs-md); }
.dio-404__search { max-width: 520px; margin: 0 auto var(--dio-s8); }

/* =========================================================
   12. GENERATEPRESS BRIDGE
   Neutralise GP wrappers we replace, without touching parent files.
   ========================================================= */
.dio .site-content { padding: 0; }
.dio .site-content > .container,
.dio .container.grid-container { max-width: none; padding: 0; }
.dio #page { overflow-x: clip; }
.dio .entry-content > .alignwide { max-width: none; }