/* ===================================================================
   2026-08-30 sitemap/navigation rebuild — additive CSS only.
   Reuses existing tokens (--navy,--deep,--gold,--ink,--muted,--bg,--line)
   and existing patterns (.aside-card, .content-group, pill buttons).
   Loaded last so it can safely adjust the handful of rules (grid column
   counts) that were hardcoded to the old, smaller item counts.
   =================================================================== */

/* ---------- Top nav: dropdown / flyout submenus ----------
   14 top-level items need to fit one row and render identically across
   browsers. Two real bugs were involved, both fixed here rather than
   patched around:
   (1) flexbox's default min-width:auto on a flex child lets that child's
       intrinsic (unwrapped) content force the flex row wider than its own
       max-width - different Chromium builds resolve this differently
       (confirmed: Chrome kept the intended width, Edge let the whole
       navbar overflow past the viewport with a horizontal scrollbar). The
       fix is to stop using flex + flex-wrap:nowrap for the scrollable list
       itself, and use the older, universally-consistent
       inline-block + white-space:nowrap + overflow-x:auto pattern instead -
       it doesn't have an intrinsic-sizing ambiguity to resolve differently.
   (2) reclaim space so scrolling is rarely needed at all: the decorative
       per-item icon is hidden on desktop (the dropdown caret stays, that's
       functional, not decorative) and padding/gaps are tightened. */
header.container{max-width:1600px}
.navbar-aj{min-width:0}

/* ---------- Unify the inner-page header with index.php's design ----------
   By original (pre-existing) design, only the home page got the dark
   header - .is-inner had its own, different treatment: a white card
   (header.container{background:#fff;border:...;box-shadow:...}) with dark
   navy nav-link text (#173748) and a maroon hover (#791c2b). That's not a
   bug introduced here; it's what the codebase already did before this nav
   rebuild. Per explicit request, every page now gets the same dark header
   as index.php. Home's own version is a semi-transparent blur meant to
   overlay a hero photo (rgba(4,24,35,.72) + backdrop-filter) - inner pages
   have no photo behind the header, so a solid dark navy (not
   semi-transparent) is used there instead of literally copying home's
   overlay effect onto a page with nothing to blur. */
.is-inner header.container{background:linear-gradient(155deg,#0a2a44,#062035)!important;border:0!important;box-shadow:0 10px 30px rgba(6,32,53,.22)!important;padding:0 1.1rem!important}
.is-inner .brand strong,.is-inner .brand .institute-name,.is-inner .brand small{color:#fff!important}
.is-inner .nav-links a{color:rgba(255,255,255,.9)!important}
.is-inner .nav-links a:hover,.is-inner .nav-links a:focus{color:#f6cf70!important}
.is-inner .nav-actions .btn-outline{border-color:rgba(255,255,255,.6)!important;color:#fff!important}
.is-inner .nav-actions .btn-primary{background:var(--gold,#d5ad54)!important;color:#142631!important}
.is-inner .hamb{color:#fff!important}

/* ---------- Header: three-line institution name (2026-09-01 request) ----------
   Split from one combined line ("Arun Jaitley National Institute of Financial
   Management") into two distinct lines. Revised per follow-up: sized between
   "AJNIFM" and the "An Institution of..." tagline - smaller than the former,
   bigger than the latter (.72rem) - rather than matching "AJNIFM" exactly.
   This also comfortably resolves the earlier wrap issue on its own: a
   meaningfully smaller size for "National Institute of Financial Management"
   needs far less horizontal room, so the white-space:nowrap fix from the
   previous round has a lot more margin now, on every page, not just home. */
.is-home .brand-line-2,.is-home .brand-line-3{font-size:1.05rem}
.is-inner .brand-line-2,.is-inner .brand-line-3{font-size:1.2rem}
.brand-line-2{display:block;font-weight:800;line-height:1.15;margin-top:.1rem;white-space:nowrap}
.brand-line-3{display:block;font-weight:600;line-height:1.2;white-space:nowrap}
.brand-line-4{display:block;font-size:.72rem;margin-top:.15rem}
@media(max-width:620px){.is-home .brand-line-2,.is-home .brand-line-3{font-size:.82rem}}
@media(max-width:560px){.is-inner .brand-line-2,.is-inner .brand-line-3{font-size:.92rem}}
@media(max-width:480px){.brand-line-2,.brand-line-3{white-space:normal}.is-home .brand-line-2,.is-home .brand-line-3{font-size:.78rem}.is-inner .brand-line-2,.is-inner .brand-line-3{font-size:.85rem}}

.nav-links{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;min-width:0;max-width:100%}
.nav-list{display:block;white-space:nowrap;list-style:none;margin:0;padding:0;font-size:0;max-width:100%}
.nav-item{display:inline-block;position:relative;vertical-align:top;font-size:1rem;margin-right:.15rem}
.nav-item:last-child{margin-right:0}
.nav-item>a{display:inline-flex;align-items:center;gap:.3rem;white-space:nowrap}
.nav-item-icon{display:none}
.nav-caret{font-size:.62em;opacity:.7;margin-left:.1em}
/* Beats .is-home/.is-inner's own "<n classes> .nav-links a" padding/font-size
   rules the same way the color !important below beats their color rule -
   see the block comment further down. */
.nav-links .nav-item>a{padding:.5rem .4rem!important;font-size:.76rem!important}
.nav-dropdown{list-style:none;margin:0;padding:.4rem;position:absolute;top:100%;left:0;min-width:260px;background:#fff;border:1px solid var(--line,rgba(10,42,68,.08));border-radius:14px;box-shadow:0 18px 40px rgba(6,32,53,.16);z-index:60;display:none;white-space:normal;font-size:1rem}
.nav-item.has-dropdown>.nav-dropdown{display:none}
.nav-dropdown .nav-dropdown{top:-.4rem;left:100%;margin-left:.3rem}
.nav-dropdown li{position:relative;display:block;margin-right:0}
/* Both .is-home and .is-inner set their own color on ".nav-links a" (2 classes),
   which otherwise wins over a plain ".nav-dropdown li>a" (1 class) regardless of
   source order - .is-home's version is white/gold, meant for the dark navbar,
   and is invisible on this white dropdown panel. !important guarantees these
   dropdown-specific colors always win, independent of what the surrounding
   navbar theme does on any given page.
   Two rules, not one: the plain ".nav-dropdown li>a" covers the Quick Access
   tile dropdowns (.qa-tile/.neo-quick-tile aren't inside .nav-links, so
   nothing there competes with it). The ".nav-links"-prefixed one exists
   purely to out-rank .is-home/.is-inner in the TOP NAV's dropdowns, where
   they do compete: dropdown items there ARE ".nav-links a" structurally
   (.nav-dropdown lives inside .nav-links), so when .is-inner's own rule
   ALSO gained !important (header-consistency fix), both sides were
   !important and normal specificity broke the tie - .is-home/.is-inner's 2
   classes beat this rule's original 1, silently winning again (confirmed:
   dropdown items showed invisible white-on-white, gold only on the hovered
   one, matching that rule's hover color). Both colors are identical; the
   second rule only exists to win that specific fight. */
.nav-dropdown li>a{display:flex;align-items:center;justify-content:space-between;gap:.5rem;padding:.55rem .75rem;border-radius:9px;color:#173748!important;font-size:.86rem;font-weight:600;white-space:nowrap}
.nav-dropdown li>a:hover,.nav-dropdown li>a:focus{background:#f3f7fb;color:#791c2b!important;outline:0}
.nav-links .nav-dropdown li>a{color:#173748!important}
.nav-links .nav-dropdown li>a:hover,.nav-links .nav-dropdown li>a:focus{color:#791c2b!important}
@media(min-width:901px){
  .nav-item.has-dropdown:hover>.nav-dropdown,.nav-item.has-dropdown:focus-within>.nav-dropdown{display:block}
}
.nav-item.has-dropdown.js-open>.nav-dropdown{display:block}

/* ---------- Persistent Quick Access bar (all pages; home shows its own richer version instead) ----------
   Same fix, same reasoning as the top nav above: inline-block + nowrap +
   overflow-x:auto rather than flex-wrap:nowrap, so it can't overflow
   differently across browsers.
   The label color below is white rather than the original dark navy: this
   bar has no background of its own, it inherits header.container's -
   which the previous fix made dark navy on every page. Dark-navy text on a
   dark-navy-family background is exactly the invisible-label bug reported;
   white matches the "Quick access" label's own white-on-maroon treatment
   on the home page for the same reason, applied here since there's no
   maroon block in this bar to put it on. */
.qa-bar{display:flex;align-items:center;gap:.9rem;padding:.5rem 0;border-top:1px solid var(--line,rgba(10,42,68,.08));font-size:.82rem;min-width:0}
.qa-bar-label{font-weight:800;color:#fff!important;text-transform:uppercase;font-size:.68rem;letter-spacing:.06em;white-space:nowrap;flex:0 0 auto}
.qa-bar-items{display:block;white-space:nowrap;font-size:0;flex:1;min-width:0;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;padding-bottom:.2rem}
.qa-tile{display:inline-block;position:relative;vertical-align:top;font-size:1rem;margin-right:.45rem}
.qa-tile:last-child{margin-right:0}
.qa-tile>a{display:inline-flex;align-items:center;gap:.35rem;padding:.4rem .6rem;border-radius:999px;background:#f3f7fb;color:var(--navy,#0a2a44)!important;font-weight:700;font-size:.82rem;white-space:nowrap}
.qa-tile>a:hover,.qa-tile>a:focus{background:var(--navy,#0a2a44);color:#fff!important;outline:0}
.qa-tile .nav-dropdown{left:0;top:100%;margin-top:.35rem}
.is-home .qa-bar{display:none}

/* ---------- Home page quick-access tiles (data-driven; same inline-block/nowrap/scroll pattern) ----------
   .neo-quick-label needs its own white-space:normal - .neo-quick sets
   nowrap so the TILES never wrap, but that value inherits into every
   descendant by default, including this label's two lines of text
   ("Citizen & learner services" / "Quick access"). Without the reset here,
   the longer line can't wrap inside its 180px box and instead overflows
   sideways across the neighbouring tile - the exact overlapping text this
   was reported as.
   Width now explicitly matches the header (both capped at 1600px, same
   auto-centering) rather than the plain ".container" class's 1180px cap
   it was inheriting before - .neo-quick is `class="container neo-quick"`,
   so without a rule specific enough to beat plain ".container", it just
   used that generic cap and visibly didn't line up with the header above
   it. Label and tile widths widened proportionally (180px/118px ->
   220px/138px) so the row's actual content fills the wider bar instead of
   leaving a gap at the end, rather than just stretching the container. */
.neo-quick{display:block!important;white-space:nowrap;font-size:0;min-width:0;max-width:1600px!important;margin:0 auto!important;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin;margin-top:-54px;background:#fff;box-shadow:0 18px 60px rgba(9,37,54,.13);position:relative;z-index:7;padding:0}
.neo-quick-label{display:inline-block;vertical-align:top;font-size:1rem;width:220px;white-space:normal}
.neo-quick-label small,.neo-quick-label strong{display:block!important}
.neo-quick-tile{display:inline-block;vertical-align:top;font-size:1rem;width:138px;border-right:1px solid #e5e9e8}
.neo-quick-tile>a{min-width:0;min-height:104px;height:100%;padding:.9rem .6rem;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;color:#193a4b!important;position:relative;white-space:normal}
.neo-quick-tile>a>i:first-child{color:#9a7421;font-size:1.05rem;margin-bottom:.55rem}
.neo-quick-tile>a>i:last-child{position:absolute;right:9px;top:10px;color:#99a7aa;font-size:.6rem}
.neo-quick-tile>a span{font-size:.76rem;font-weight:800}
.neo-quick-tile>a:hover,.neo-quick-tile>a:focus{background:#f7f2e8;outline:3px solid var(--gold,#d5ad54);outline-offset:-3px}
.neo-quick-tile .qa-dropdown{top:100%;left:0;margin-top:0}
@media(max-width:620px){.neo-quick-label{width:150px}.neo-quick-tile{width:112px}}

/* ---------- Contextual sidebar ("In this section") ---------- */
.aside-context nav{display:flex;flex-direction:column;gap:.15rem;margin-top:.6rem}
.aside-context nav a{padding:.5rem .6rem;border-radius:9px;color:#173748;font-weight:600;font-size:.88rem}
.aside-context nav a:hover,.aside-context nav a:focus{background:#f3f7fb;color:#791c2b;outline:0}
.aside-context nav a.is-active{background:#0a2a44;color:#fff}
.aside-up{display:inline-flex;align-items:center;gap:.4rem;font-size:.78rem;color:#791c2b;font-weight:800;margin-top:.3rem}

/* ---------- Hub "children grid" (auto-shown on pages that have nav subsections) ---------- */
.hub-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:1rem;margin-top:1.8rem}
.hub-card{background:#fff;border:1px solid var(--line,rgba(10,42,68,.08));border-radius:16px;padding:1.1rem 1.2rem;box-shadow:0 6px 20px rgba(9,37,54,.05);color:#173748}
.hub-card strong{display:block;font-size:.98rem;margin-bottom:.5rem;color:var(--navy,#092536)}
.hub-card-sub{list-style:none;margin:0;padding:0;font-size:.78rem;color:#61747b}
.hub-card-sub li{padding:.12rem 0}
.hub-card-go{font-size:.8rem;font-weight:800;color:#791c2b;display:inline-flex;align-items:center;gap:.35rem}
.hub-card:hover,.hub-card:focus{border-color:var(--gold,#d5ad54);outline:0}

/* ---------- Faculty category tabs ---------- */
.faculty-tabs{display:flex;flex-wrap:wrap;gap:.5rem;margin:1rem 0}
.faculty-tabs a{padding:.45rem .95rem;border-radius:999px;background:#f3f7fb;color:var(--navy,#0a2a44);font-weight:700;font-size:.84rem}
.faculty-tabs a.is-active{background:var(--navy,#0a2a44);color:#fff}

/* ---------- MDP filter row additions ---------- */
.mdp-archive-toggle{display:flex;align-items:center;gap:.4rem;font-size:.82rem;color:var(--muted,#4f6f8a);white-space:nowrap}
.mdp-filter-note{margin-top:-.4rem}

/* ---------- Footer social icons / Media page social tiles ---------- */
.footer-social{display:flex;gap:.6rem;margin-top:.9rem}
.footer-social a{width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.08);display:inline-flex;align-items:center;justify-content:center;color:#c5d6e6}
.footer-social a:hover,.footer-social a:focus{background:var(--gold,#c9a959);color:#0a1f2e;outline:0}
.social-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1rem}
.social-tile{display:flex;align-items:center;gap:.7rem;background:#fff;border:1px solid var(--line,rgba(10,42,68,.08));border-radius:14px;padding:1rem 1.2rem;color:#173748;font-weight:700}
.social-tile i{font-size:1.3rem;color:#791c2b}
.social-tile:hover,.social-tile:focus{border-color:var(--gold,#d5ad54);outline:0}

/* ---------- Admin: nav manager + settings ---------- */
.admin-checkbox{display:flex;align-items:center;gap:.5rem;font-size:.86rem;color:#2b3d4a}
.alert-flash{background:#eef7ee;border:1px solid #b7dcb7;color:#1f5c1f;border-radius:12px;padding:.8rem 1rem;margin-bottom:1rem;font-weight:700}

/* ---------- Mobile: nav + quick-access collapse into the existing hamburger flyout ----------
   Below 900px the hamburger already switches to a full-width, vertically-
   stacked flyout - there's no horizontal space pressure there at all, so the
   desktop single-row/scroll treatment above is reset back to a normal
   stacked list (and the icon, hidden on desktop to save width, can come
   back for free since each row is full-width regardless). */
@media(max-width:900px){
  .nav-links{overflow-x:visible}
  .nav-links .nav-list{display:block;white-space:normal;font-size:1rem;width:100%}
  .nav-item{display:block;width:100%;margin-right:0}
  .nav-links .nav-item>a{padding:.55rem 0!important;font-size:.9rem!important;justify-content:space-between}
  .nav-item-icon{display:inline-block!important;width:1.1em}
  .nav-dropdown{position:static;box-shadow:none;border:0;border-left:2px solid #e5e9e8;border-radius:0;margin:.2rem 0 .2rem .8rem;padding:0 0 0 .6rem;min-width:0;width:calc(100% - 1.4rem)}
  .nav-dropdown .nav-dropdown{left:0;margin-left:.6rem}
  .qa-tile .nav-dropdown{position:absolute;width:220px}
  .page-layout{grid-template-columns:1fr}
}