/* =====================================================================
   nc-subnav.css — shared secondary sub-nav (Academics / Resources /
   Contact Us). Fully generic/class-based (not scoped to a page's own
   wrapper class), so it's reused by TWO separate campus clusters:
   - Noida: noida-campus.php + includes/nc-subnav.php's links (book-list,
     academic-team, exam-schedule, strength-of-classes, transfer-certificate,
     school-policies-and-committees, blog, school-management-committee).
   - Ambala: ambala-campus.php + includes/amb-subnav.php's links (all
     Resources/Academics items are direct PDF downloads).
   Both clusters' "Contact Us" item links out to the single main
   contact-us.php (not part of either cluster, doesn't load this file).
   Loaded via page_css[] only on pages in one of these two clusters — never
   touches any other page on the site.
   ===================================================================== */

/* top tracks the main header's own height exactly — the header shrinks on
   scroll (topbar collapses, nav shortens; see .site-header.is-shrunk in
   header.css), so this bar needs the same .is-shrunk toggle (via
   nc-subnav.js) or it'd float below empty space once the header shrinks. */
.nc-subnav { position: fixed; top: calc(var(--topbar-h, 38px) + var(--nav-h, 74px)); left: 0; right: 0; z-index: 999; background: var(--maroon-900, #5F141C); box-shadow: 0 6px 16px rgba(0,0,0,.12); transition: top .25s ease; }
.nc-subnav.is-shrunk { top: var(--nav-h-shrink, 60px); }
/* no overflow-x here — it would implicitly clip overflow-y too (the two
   are linked per spec once either is non-visible), hiding the dropdown
   panels. flex-wrap:nowrap + shrinking sizes at small breakpoints keep all
   3 items on one line at any width, per client request (no 2-line wrap). */
.nc-subnav__in { max-width: 1160px; margin: 0 auto; padding: 0 24px; display: flex; align-items: stretch; justify-content: center; gap: 4px; flex-wrap: nowrap; }
.nc-subnav__item { position: relative; flex: none; }
.nc-subnav__item button, .nc-subnav__item.nc-subnav__item > a { display: inline-flex; align-items: center; gap: 6px; background: none; border: none; padding: 13px 18px; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; color: #fff; cursor: pointer; white-space: nowrap; transition: background .2s; }
a.nc-subnav__item { display: inline-flex; align-items: center; padding: 13px 18px; font-family: var(--font-sans); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase; color: #fff; white-space: nowrap; transition: background .2s; }
.nc-subnav__item button svg { width: 13px; height: 13px; transition: transform .25s; }
.nc-subnav__item:hover button, .nc-subnav__item:hover > a, a.nc-subnav__item:hover { background: rgba(255,255,255,.12); }
.has-drop:hover button svg, .has-drop:focus-within button svg { transform: rotate(180deg); }

/* width:max-content + min/max-width lets the panel size itself to its
   widest real item (e.g. "Anti-Corporal Punishment Policy") instead of
   wrapping that text across 2 lines inside a fixed 240px box. */
.nc-subnav__drop { position: absolute; top: 100%; left: 0; width: max-content; min-width: 240px; max-width: min(360px, 90vw); background: #fff; border-radius: 0 0 10px 10px; box-shadow: 0 20px 40px -16px rgba(0,0,0,.3); padding: 8px; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; z-index: 10; }
.has-drop:hover .nc-subnav__drop, .has-drop:focus-within .nc-subnav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nc-subnav__drop a { display: block; padding: 10px 14px; border-radius: 6px; font-size: 13.5px; font-weight: 500; text-transform: none; letter-spacing: normal; color: #201A18; white-space: nowrap; }
.nc-subnav__drop a:hover { background: #F1E7D0; color: var(--maroon-900, #5F141C); }

/* Below 700px, the 3 items become EQUAL-WIDTH flex children (flex:1 1 0)
   filling exactly 100% of the bar between them — this structurally cannot
   overflow the viewport (unlike shrinking font-size/padding on flex:none
   items, which stays pinned to content's natural width and overflows
   regardless of how small the text gets). Each item's own text ellipsizes
   if it's still too tight for its share of the space. */
@media (max-width: 700px) {
  .nc-subnav__in { padding: 0 6px; gap: 2px; }
  .nc-subnav__item { flex: 1 1 0; min-width: 0; }
  .nc-subnav__item button, a.nc-subnav__item {
    width: 100%; justify-content: center; padding: 11px 4px; font-size: 11px; letter-spacing: 0; gap: 4px;
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .nc-subnav__item button svg { flex: none; width: 10px; height: 10px; }
  .nc-subnav__drop { left: 0; right: auto; min-width: 220px; }
}
@media (max-width: 400px) {
  .nc-subnav__item button, a.nc-subnav__item { padding: 9px 2px; font-size: 9.5px; gap: 2px; }
}

/* ---- .page-hero clearance (book-list / academic-team / exam-schedule /
   strength-of-classes / transfer-certificate / school-policies / blog) ----
   These inner pages share components.css's generic .page-hero, whose
   padding-block doesn't normally need to clear the fixed header (its tall,
   centred content already reads fine starting a little way into the block).
   Adding this fixed subnav on top means it now needs real clearance —
   this file is only loaded on pages that also have .nc-subnav, so it's
   safe to override directly, no extra scoping needed. */
.page-hero { padding-top: calc(var(--topbar-h, 38px) + var(--nav-h, 74px) + 48px + clamp(2.8rem, 6vw, 5rem)) !important; }

/* ---- No green accents on this page cluster — client wants maroon only on
   Academics/Resources pages, not the site's usual green accent
   (inner.css/home.css use --green-* elsewhere on purpose, per brand book;
   these overrides are scoped to nc-subnav.css so only pages in this
   cluster are repainted). contact.css's own green refs were changed to
   maroon directly since contact-us.php is the only page using that file. ---- */
.data-table thead th { background: var(--maroon-900, #5F141C) !important; }
.data-table tbody td:first-child { color: var(--maroon-900, #5F141C) !important; }
.dl-item .t { color: var(--maroon-900, #5F141C) !important; }
.news-card__date svg { color: var(--maroon-600, #A63A46) !important; }