/* header — site header, megamenu, breadcrumb, page-nav, search chrome
   Ported from design-export/base.css (Phase 3 Stage 2 split).
   No literal colour, no literal font family: every value is a token. */

/* =============================== GROUP 1 · CHROME ======================== */

/* Header. NOTE: the toolkit ships no header markup — these class names are
   ours, listed in notes.md as an open naming decision. */
.site-header {
  position: relative;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  /* Inline inset that reproduces .row's content edge from inside a full-bleed
     grid item: half the leftover width, never less than the page gutter. Used
     by the utility strip and the mobile drawer so both line up with the main
     menu above/below them. Resolves against the using element's grid area. */
  --header-inset: max(var(--page-gutter), calc((100% - var(--content-max) + var(--page-gutter) * 2) / 2));
  /* Gutter between the brand column and the menu column, and the hairline
     divider that sits in it. */
  --header-split: clamp(1.5rem, 2.4vw, 2.75rem);
}

/* --- 2-row header grid ---------------------------------------------------
   ROW 1  .site-header__info  — utility menu + search, full-bleed strip
   ROW 2  .site-header__main  — brand column | primary menu column

   Source order is brand+menu FIRST and the utility strip LAST (see the note in
   parts/repeats/header.php); both children are explicitly placed, so grid alone
   decides what paints where. `reading-flow: grid-rows` then walks keyboard focus
   in visual row order instead of source order — the supported replacement for a
   positive tabindex ladder, which would have leapfrogged the skip links. app.js
   hoists the node at runtime where reading-flow is not implemented yet.

   Column tracks: a bleed track either side of one content track sized exactly
   like .row (--content-max minus its two gutters), so a full-bleed row and a
   content-width row share the same right edge. */
.site-header__inner {
  display: grid;
  grid-template-columns:
    [full-start] minmax(var(--page-gutter), 1fr)
    [content-start] minmax(0, calc(var(--content-max) - var(--page-gutter) * 2))
    [content-end] minmax(var(--page-gutter), 1fr)
    [full-end];
  reading-flow: grid-rows;
}

/* --- ROW 1 · utility strip ----------------------------------------------- */
.site-header__info {
  grid-row: 1; grid-column: full;
  display: flex; align-items: center; justify-content: flex-end;
  /* Items never wrap internally (see below); the CONTAINER may, so an unusually
     long secondary menu drops to a second strip row instead of spilling out of
     the page. */
  flex-wrap: wrap; row-gap: 0;
  gap: clamp(1rem, 1.7vw, 1.75rem);
  padding-inline: var(--header-inset);
  background: var(--header-utility-bg);
  border-bottom: 1px solid var(--header-border);
}
/* Direct child only: the dropdown .sub-menu panels are also <ul> and must keep
   their own stacked layout. */
.site-header__info > ul {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 1.7vw, 1.75rem); row-gap: 0; padding-block: .55rem;
}
/* white-space on both: a utility label that wrapped would grow the strip and
   break the row rhythm, so every item is single-line by construction and the
   gap clamp absorbs the width instead. */
.site-header__info a { color: var(--header-fg-muted); text-decoration: none; white-space: nowrap; }
.site-header__info a:hover { color: var(--header-fg); }
/* JS swaps dropdown-parent links (About Us, Facilities, Contact Us) for <button>
   toggles, so the button must read as the link it replaced — same colour, no
   chrome. Parity only; no new visual. */
.site-header__info button {
  background: none; border: 0; margin: 0; padding: 0;
  font: inherit; line-height: inherit; cursor: pointer;
  color: var(--header-fg-muted); text-decoration: none; white-space: nowrap;
}
.site-header__info button:hover { color: var(--header-fg); }
/* Search reveal sits at the right end of the strip, set off from the menu. */
.site-header__info .site-header__search-link {
  flex: 0 0 auto; margin-inline-start: clamp(.25rem, 1vw, 1rem);
  color: var(--header-fg-muted); font-weight: 600; font-size: var(--fs-min);
}
.site-header__info .site-header__search-link:hover { color: var(--header-fg); }

/* --- ROW 2 · brand | primary menu ---------------------------------------- */
.site-header__main {
  grid-row: 2; grid-column: content;
  display: grid;
  /* minmax(0, auto), not auto: the brand column must be allowed to shrink below
     its max-content width on small screens, or the group lockup (a 14:1 strip)
     pushes the whole row wider than the viewport. */
  grid-template-columns: minmax(0, auto) minmax(0, 1fr);
  align-items: stretch;
}

/* Brand column. The site logo is the primary mark; the group lockup rides above
   it as a secondary endorsement line. The divider is on this column so it runs
   the full height of the row. */
.site-header__brand {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: .5rem; min-width: 0;
  padding-block: 1rem;
  padding-inline-end: var(--header-split);
  border-inline-end: 1px solid var(--header-border);
}
/* "Part of" + the group lockup — secondary by construction. */
.site-header__group { display: inline-flex; align-items: center; gap: .6rem; max-width: 100%; min-width: 0; text-decoration: none; }
.site-header__group-label {
  flex: 0 0 auto;
  font-size: var(--fs-min); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--header-accent, var(--header-fg-muted)); white-space: nowrap; line-height: 1;
}
.site-header__group-logo {
  /* Never allowed to compete with the site logo: capped at 18px (the height the
     lockup was drawn at) and at 40% of whatever height the brand gives its own
     mark, with a floor so it stays legible on the short-lockup brands. */
  height: clamp(12px, calc(var(--logo-height) * .4), 0.9rem);
  width: auto; min-width: 0; max-width: 100%; display: block;
  object-fit: contain; object-position: left center;
  /* Its OWN filter channel, not the site logo's: the lockup is a shared asset
     drawn in white and would disappear on the three white bars, whose site
     logos are full-colour and must stay untreated. */
  filter: var(--header-group-logo-filter);
}
/* The primary mark. --logo-height is the per-brand optical-parity height.
   The negative bottom margin is the portrait-lockup escape hatch (tokens.css):
   the mark keeps its full height and stays IN FLOW — so it still reserves its
   own width in the brand column and needs no magic top offset — but stops
   contributing --logo-overhang of that height to the row, and hangs over
   whatever follows the header instead. z-index clears the page-title band
   below it (z-index 1) while staying under the sticky page nav (20), the
   megamenu (50) and the mobile drawer (55), all of which should cover it. */
.site-header-logo {
  flex: 0 0 auto; display: block;
  position: relative; z-index: 10;
  margin-bottom: calc(-1 * var(--logo-overhang));
  padding: var(--logo-pad);
  background: var(--logo-panel);
}
.site-header-logo img {
  height: var(--logo-height);
  width: auto;
  /* min() so the brand cap is honoured on a wide bar but the mark can still give
     way on a narrow one: the phone brand column is ~130px, which is under the
     natural width of most of these lockups at their full height. object-fit
     keeps the ratio, so it scales down rather than squashing. */
  max-width: min(var(--logo-max-width), 100%);
  object-fit: contain;
  object-position: left center;
  filter: var(--header-logo-filter);
}

/* Menu column. Right-aligned so the last item lands on the same content edge as
   the utility strip above it. */
#main-nav, .site-header__nav {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1rem;
  min-width: 0;
  padding-inline-start: var(--header-split);
}

/* Items are single-line by construction; the container is allowed to wrap so a
   site with a longer study menu than DC's gets a taller header rather than one
   that overflows its own content column. */
.menu-primary {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
  gap: clamp(1rem, 1.9vw, 1.85rem); row-gap: .4rem;
}
/* JS swaps dropdown-parent links for <button> toggles, so both must be styled. */
.menu-primary > .menu-item > a,
.menu-primary > .menu-item > button {
  font-family: var(--font-display);
  font-weight: var(--display-weight);
  /* Sheds width with the viewport but never below the 1.1rem floor, so long
     labels lose type size before they lose their single line. */
  font-size: clamp(var(--fs-min), 1.05vw + .35rem, 1.3rem);
  letter-spacing: var(--display-track);
  color: var(--header-fg);
  text-decoration: none;
  padding: 0 0 4px;
  border-bottom: 4px solid transparent;
  display: flex; align-items: center;
  /* A study-area label that wraps would double the row height and shunt the
     brand column with it — every item stays on one line. */
  white-space: nowrap;
  background: none; cursor: pointer; line-height: inherit;
}
/* Info-menu toggle buttons carry an inline caret, so align them like a flex row. */
.site-header__info .menu-item-has-children > button { display: inline-flex; align-items: center; }

/* Dropdown indicator caret on parents that open a panel — primary study menu
   AND the upper Information menu (About Us etc.). app.js turns every
   .menu-item-has-children parent in the header into a <button>, so both menus
   use the same button hook. */
.menu-primary > .menu-item-has-children > button::after,
.menu-item-study > button::after,
.site-header__info .menu-item-has-children > button::after {
  content: ""; flex: 0 0 auto; width: .42em; height: .42em; margin-left: .5em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg); transition: transform var(--transition);
}
.menu-primary > .menu-item-has-children.is-open > button::after,
.menu-item-study.is-open > button::after,
.site-header__info .menu-item-has-children.is-open > button::after { transform: translateY(1px) rotate(-135deg); }
.menu-primary > .menu-item > a:hover,
.menu-primary > .menu-item > button:hover,
.menu-primary > .menu-item.is-open > a,
.menu-primary > .menu-item.is-open > button,
.menu-primary > .menu-item.current-menu-item > a { border-bottom-color: var(--accent); }

.site-header__search-link {
  display: inline-flex; align-items: center; gap: .6rem;
  color: var(--header-fg); font-weight: 700; text-decoration: none;
}
.site-header__search-link svg { flex: 0 0 auto; }

/* Megamenu. Class names ours — see notes.md. Hidden until the parent item is
   hovered/focused or .is-open (JS, Stage 5); drops full-width below the header. */
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 50;
  background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.mega-menu__panel { display: grid; grid-template-columns: repeat(3, 1fr) 1.05fr; gap: 2.2rem; padding-block: 2rem; }
.mega-menu__column .eyebrow { margin-bottom: 1rem; }
.mega-menu__destination {
  display: flex; justify-content: space-between; gap: .875rem;
  border-bottom: 1px solid var(--line); padding-bottom: .6rem;
}
.mega-menu__destination + .mega-menu__destination { margin-top: .75rem; }
.mega-menu__destination a {
  font-family: var(--font-display); font-weight: 700;
  color: var(--text-heading); text-decoration: none;
}
.mega-menu__destination a:hover { color: var(--link); }
.mega-menu__destination span { flex: 0 0 auto; color: var(--muted); font-variant-numeric: tabular-nums; }

/* Browse-our-courses column: the two destinations are the prominent action on
   that edge of the menu, so they render as solid primary buttons (not count
   rows). Also sets a deliberate gap under the intro paragraph. */
.mega-menu__column--browse .section-intro { margin: .5rem 0 1.15rem; }
.mega-menu__column--browse ul { margin: 0; padding: 0; list-style: none; }
.mega-menu__column--browse .mega-menu__destination { display: block; border-bottom: 0; padding-bottom: 0; }
.mega-menu__column--browse .mega-menu__destination span { display: none; }
.mega-menu__column--browse .mega-menu__destination a {
  display: block; text-align: center;
  background: var(--btn-primary-bg); color: var(--btn-primary-text);
  padding: .75rem 1.25rem; border-radius: var(--radius-pill);
  transition: background var(--transition), color var(--transition);
}
.mega-menu__column--browse .mega-menu__destination a:hover { background: var(--link-hover); color: var(--btn-primary-text); }
.mega-menu__escape {
  /* navy-DEEP, not navy: --accent-on-dark is calibrated against --navy-deep, so
     the accent eyebrow + link below clear AA on it for every brand (on the
     lighter --surface-dark, nlc's link measured 3.8:1). */
  background: var(--surface-dark-alt); border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .9rem;
}
.mega-menu__escape h3 { color: var(--white); font-size: 1.625rem; }
/* The escape card is a dark (--surface-dark) card inside the light megamenu
   panel, so its eyebrow + link must read on dark. The base .eyebrow / link
   colour is --em-color / --link (orange on dc, a brand text-on-LIGHT colour) and
   fails on navy. Use the header accent where a brand sets one (dc: teal), else
   --accent-on-dark, which is calibrated for this navy ground on every site. */
.mega-menu__escape .eyebrow { color: var(--header-accent, var(--accent-on-dark)); }
.mega-menu__escape a { color: var(--header-accent, var(--accent-on-dark)); }
.mega-menu__escape a:hover { color: var(--white); }
.mega-menu__quick-entry { background: var(--light); padding-block: 1.1rem; display: flex; align-items: center; gap: 1.4rem; flex-wrap: wrap; }

/* Feature call-out card — the managed sibling of the escape card, same dark slot.
   Eyebrow + heading + body, optional chip links, optional CTA. Used by the
   Student Life / Apprenticeships / Employers mega panels. */
.mega-menu__feature {
  background: var(--surface-dark-alt); border-radius: var(--radius-md);
  padding: 1.6rem 1.7rem; display: flex; flex-direction: column; gap: .9rem;
}
/* Pair the label with the token designed for this ground: --btn-accent-text is
   the calibrated foreground for --btn-accent-bg on every brand. Hardcoding
   --navy was navy-on-blue on brands whose accent is blue (dncg), and only
   passed on brands with a light accent (dc's teal). */
.mega-menu__feature .eyebrow { align-self: flex-start; color: var(--btn-accent-text); background: var(--btn-accent-bg); padding: .2rem .7rem; border-radius: var(--radius-pill); }
.mega-menu__feature h3 { color: var(--white); font-size: 1.625rem; margin: 0; }
.mega-menu__feature p { color: rgba(var(--on-dark-rgb), .86); margin: 0; }
.mega-menu__chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: .2rem 0 0; padding: 0; list-style: none; }
.mega-menu__chips li { margin: 0; }
.mega-menu__chips a {
  display: inline-block; padding: .35rem .8rem; border-radius: var(--radius-pill);
  background: rgba(var(--on-dark-rgb), .12); color: var(--white);
  font-size: var(--fs-min); font-weight: 700; text-decoration: none;
  transition: background var(--transition);
}
.mega-menu__chips a:hover { background: rgba(var(--on-dark-rgb), .22); }
.mega-menu__feature-cta { align-self: flex-start; margin-top: .3rem; }

/* Dropdown behaviour (Phase 3 Stage 3). The design-export only ever showed the
   megamenu and submenus OPEN, so the hide-by-default + reveal states are added
   here. Reveal on :hover / :focus-within (pre-JS) and on .is-open (the class the
   Stage 5 script toggles on click/keyboard). Regular wp_nav_menu submenus render
   as a card dropdown; the megamenu (.menu-item-study) spans the full header. */
.menu-item-has-children { position: relative; }
.menu-item-study { position: static; }   /* megamenu anchors to .site-header, not the item */

.sub-menu {
  position: absolute; top: 100%; left: 0; z-index: 50;
  min-width: 15rem; margin: 0; padding: .5rem 0;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
}
.sub-menu a { display: block; padding: .5rem 1.1rem; color: var(--text-heading); text-decoration: none; font-weight: 700; }
.sub-menu a:hover { color: var(--link); background: var(--light); }
/* Menu items given a .separator / .menu-separator custom class are dividers, not
   links: functions.php blanks the anchor, so the <li> is empty and renders as a
   thin rule between groups. Works in flyout sub-menus and mega columns. */
.sub-menu li.menu-separator,
.sub-menu li.separator {
  height: 0; padding: 0; margin: .45rem 1.1rem;
  border-top: 1px solid var(--line);
  list-style: none; pointer-events: none;
}
.mega-menu__column li.menu-separator,
.mega-menu__column li.separator {
  height: 0; padding: 0; margin: .6rem 0 1.1rem;
  border: 0; border-top: 1px solid var(--line);
  list-style: none; pointer-events: none;
}
/* Right-most items' dropdowns open leftwards so they never spill off the
   viewport edge.
   The utility strip needs this as much as the primary menu and did not have it:
   a closed .sub-menu is visibility:hidden but still LAID OUT, so one hanging off
   the right edge adds its full 15rem to the document's scrollable width and the
   page gets a horizontal scrollbar onto blank space — with nothing visible out
   there to explain it. It only showed between ~1025px and ~1280px, because above
   that the page gutter is wide enough to swallow the overhang.
   Three deep rather than the primary menu's two: utility labels are set at the
   1.1rem floor, so more of them fit inside one 15rem panel width. */
.menu-primary > .menu-item:nth-last-child(-n+2) > .sub-menu,
.site-header__info > ul > .menu-item:nth-last-child(-n+3) > .sub-menu { left: auto; right: 0; }

/* Reveal on click only (.is-open, set by app.js headerNav) — no hover/focus. */
.menu-item-has-children.is-open > .sub-menu,
.menu-item-study.is-open > .mega-menu {
  opacity: 1; visibility: visible; transform: none;
}

/* Breadcrumb — real toolkit vocabulary. Yoast renders a <p class="breadcrumbs">
   with inline <a> links, a "/" separator (forced via wpseo_breadcrumb_separator)
   and a <span class="breadcrumb_last"> current item, so the trail is styled on
   that markup rather than <li>. .disabled kept for any hand-built trail. */
.bread { background: var(--chrome-bg); border-bottom: 1px solid var(--line); }
.bread, .breadcrumbs { line-height: 1.4; }
.breadcrumbs {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem;
  /* padding-inline-start clears an overhanging site logo (--logo-clear, 0 for
     every brand but UCNL). The breadcrumb bar is the first thing under the
     header on a page that shows one, so it is directly in the drop zone. */
  padding-block: 1rem; padding-inline-start: var(--logo-clear); margin: 0; max-width: none;
  font-size: var(--fs-min); letter-spacing: .05em; text-transform: uppercase;
  /* --box-border is a BORDER token (#cfd6da) and was being used as text colour,
     giving the whole breadcrumb trail 1.32:1. decisions.md section 8 flags exactly
     this: a surface/border token used for text moves with the surface for no
     traceable reason, and here it was never legible to begin with. */
  color: var(--text-muted);
}
.breadcrumbs a { color: var(--link); text-decoration: none; }
.breadcrumbs a:hover { text-decoration: underline; }
.breadcrumbs .breadcrumb_last, .breadcrumbs .disabled { color: var(--muted); }

/* Page nav — real toolkit vocabulary. */
.page-navigation { background: var(--white); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); position: sticky; top: 0; z-index: 20; }
.page-nav { position: relative; display: flex; align-items: center; gap: 1rem; padding-block: .85rem; flex-wrap: wrap; }
/* The JS-enhanced page nav collapses overflow into a "More" button, so it must
   stay on ONE line — the container must not wrap the More button onto a 2nd row. */
.page-nav.pn-enhanced { flex-wrap: nowrap; }
.page-nav h2 { font-size: var(--fs-min); white-space: nowrap; color: var(--muted); font-family: var(--font-body); font-weight: 700; }
.page-nav > ul { display: flex; align-items: center; gap: .3rem; flex-wrap: wrap; min-width: 0; font-weight: 700; }
.page-nav.pn-enhanced > ul { flex-wrap: nowrap; overflow: hidden; }
.page-nav > ul > li { flex: 0 0 auto; }
.page-nav > ul > li > a {
  position: relative;
  display: block; padding: .35rem .6rem;
  color: var(--text-heading); text-decoration: none;
  white-space: nowrap;
}
.page-nav > ul > li > a:hover { color: var(--link); background: var(--light); }
/* Active state: teal text + an underline drawn as a pseudo-element so it never
   changes the item's box height. A real border-bottom, with the row's
   align-items:center, made the active item taller and nudged its text UP out of
   line with the others. This keeps every item's baseline identical. */
.page-nav > ul > li.active > a { color: var(--link); }
.page-nav > ul > li.active > a::after {
  content: "";
  position: absolute;
  left: .6rem; right: .6rem;
  bottom: 0;
  height: 4px;
  border-radius: 2px;
  background: var(--link);
}
.page-nav > ul > li.cta-apply { max-width: none; margin-left: auto; }
.page-nav > ul > li.cta-apply.page-nav__cta > a {
  display: inline-flex; flex-direction: column; line-height: 1.2;
  background: var(--surface-blue); color: var(--white);
  padding: .5rem 1.2rem; border-radius: var(--radius-pill); border-bottom: 0;
}
.page-nav > ul > li.cta-apply.page-nav__cta > a:hover { background: var(--blue-dark); }
.page-nav__cta-label { font-weight: 700; }
.page-nav__event { font-weight: 600; opacity: .85; }

.page-nav-more { position: relative; flex: 0 0 auto; }
.page-nav-more-toggle {
  display: inline-flex; align-items: center; gap: .4rem;
  /* white fill on a white bar: the border is the only thing that identifies the
     control, so it carries the 3:1 interactive weight, not the hairline weight */
  border: 1px solid var(--control-border); background: var(--white);
  color: var(--text-heading); font-weight: 700;
  padding: .35rem .8rem; border-radius: var(--radius-pill); white-space: nowrap;
}
.page-nav-more-list {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 5;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  padding-block: .4rem; min-width: 220px;
}
.page-nav-more-list[hidden] { display: none; }
.page-nav-more-list li { max-width: none; }
.page-nav-more-list a { display: block; padding: .5rem 1rem; color: var(--text-heading); text-decoration: none; }
.page-nav-more-list a:hover, .page-nav-more-list a:focus { background: var(--light); text-decoration: underline; }

.course-page-nav__compact { display: flex; align-items: center; gap: 1rem; background: var(--surface-dark); padding: .55rem var(--page-gutter); }
.course-page-nav__jump select {
  font-weight: 700; padding: .5rem .9rem; border-radius: var(--radius-pill);
  border: 1px solid rgba(var(--on-dark-rgb), .4); background: transparent; color: var(--white);
}
.course-page-nav__actions { display: flex; align-items: center; gap: .625rem; margin-left: auto; }
.course-page-nav__event { color: var(--accent-on-dark); font-weight: 700; text-decoration: none; }

/* Anchor targets must clear the sticky bar. */
section[id], article[id], div[id] { scroll-margin-top: 84px; }

/* Search reveal panel. Solid ground + its own stacking context so it always
   paints cleanly over whatever follows the header (e.g. the home hero), rather
   than letting that content bleed through the transparent panel. */
.site-search {
  position: relative; z-index: 60;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  box-shadow: var(--shadow-md);
  padding-block: 1.4rem;
}
.site-search-title { display: flex; align-items: center; gap: .75rem; margin-bottom: 1rem; color: var(--header-fg); }
.search { display: flex; gap: .75rem; flex-wrap: wrap; }
.search__field { position: relative; flex: 1 1 320px; display: flex; background: var(--white); border: 1px solid var(--box-border); border-radius: var(--radius-pill); overflow: hidden; }
.search__field svg { position: absolute; left: 1.1rem; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: var(--muted); pointer-events: none; }
.search__input { width: 100%; flex: 1 1 auto; min-width: 0; border: 0; padding: .875rem 1.25rem .875rem 3.1rem; color: var(--ink); background: transparent; }
.search__input::placeholder { color: var(--muted); }
.search__field:focus-within { border-color: var(--link); }
.search__field--bare { background: transparent; border: 0; border-radius: 0; }

/* =============================================================================
   Mobile menu. The desktop nav collapses below 64em into a "Menu" button
   (hamburger + the word "Menu"); the JS toggle (#menu-toggle-button, app.js
   headerNav) flips .menu-container.is-open. Submenus/megamenu expand inline.
   ========================================================================== */
.menu-toggle {
  display: none; align-items: center; gap: .5rem;
  background: transparent; border: 2px solid var(--header-border);
  color: var(--header-fg); font-family: var(--font-display); font-weight: 700;
  font-size: 1.3rem; padding: .5rem .9rem; border-radius: var(--radius-sm); cursor: pointer;
}
.menu-toggle__icon { flex: 0 0 auto; }

@media (max-width: 64em) {
  /* The utility strip goes as a STRIP, not as content: app.js relocates the
     whole .site-header__info into the drawer, below the study menu, and lifts
     the search trigger out to sit beside the Menu toggle. The element is styled
     by where it currently lives — hidden in the bar, restyled in the drawer —
     so nothing is duplicated and there is one copy of each link. */
  .site-header__inner > .site-header__info { display: none; }
  /* Column roles invert once the menu is a pair of controls: the controls take
     the width they need and the brand takes the remainder, rather than the
     brand claiming max-content and squeezing the controls to nothing. */
  .site-header__main { grid-row: 1; grid-template-columns: minmax(0, 1fr) auto; padding-block: .3rem; }

  /* No second column to divide from once the menu is behind the toggle. */
  .site-header__brand { border-inline-end: 0; padding-inline-end: 1rem; padding-block: .7rem; }
  #main-nav { padding-inline-start: 0; gap: 1.25rem; }
  .menu-toggle { display: inline-flex; }
  /* The relocated search trigger sits left of the toggle and inherits the bar's
     own foreground rather than the strip's muted one. */
  #main-nav > .site-header__search-link { flex: 0 0 auto; color: var(--header-fg); font-weight: 700; font-size: var(--fs-min); }

  /* The drawer is the full width of the header, so it comes out of the menu
     column and hangs off .site-header (the only positioned ancestor) — below
     the audience rule, which stays visible. */
  #main-nav .menu-container {
    position: absolute; inset-inline: 0; top: 100%; z-index: 55;
    margin: 0; padding: .2rem var(--page-gutter) 1.4rem;
    background: var(--header-bg);
    border-bottom: 1px solid var(--header-border);
    box-shadow: var(--shadow-md);
    display: none;
  }
  #main-nav .menu-container.is-open { display: block; }

  .menu-primary { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 0; }
  .menu-primary > .menu-item { border-top: 1px solid var(--header-border); }
  /* Full-width rows with the caret pushed to the trailing edge. Kept as flex,
     not block: a <button> is centred by the UA stylesheet, and the dropdown
     parents ARE buttons once app.js has swapped them. Labels may wrap here —
     the single-line rule is about the horizontal bar, not the drawer. */
  .menu-primary > .menu-item > a,
  .menu-primary > .menu-item > button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    padding: .95rem .2rem; font-size: 1.45rem; border-bottom: 0; white-space: normal;
  }

  /* The utility menu, once app.js has moved it into the drawer. Same element as
     the desktop strip, so every strip property it carries has to be unwound:
     it is no longer a grid item, no longer full-bleed, no longer a right-aligned
     flex row. It reads as the secondary block it is — smaller and quieter than
     the study menu it sits under, separated by a rule. */
  .menu-container > .site-header__info {
    display: block;
    padding-inline: 0; padding-block: 0;
    margin-top: .9rem; padding-top: .5rem;
    background: none;
    border-bottom: 0;
    border-top: 1px solid var(--header-border);
  }
  .menu-container > .site-header__info > ul {
    display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start;
    flex-wrap: nowrap; gap: 0; padding-block: 0;
  }
  /* Beats .site-header__info .menu-item-has-children > button (0,3,1), which
     sets inline-flex for the strip's inline caret. */
  .menu-container > .site-header__info a,
  .menu-container > .site-header__info .menu-item-has-children > button {
    display: flex; align-items: center; justify-content: space-between;
    width: 100%; text-align: left;
    padding: .6rem .2rem;
    font-size: var(--fs-min); font-weight: 600;
    color: var(--header-fg-muted); white-space: normal;
  }
  .menu-container > .site-header__info a:hover,
  .menu-container > .site-header__info .menu-item-has-children > button:hover { color: var(--header-fg); }

  /* Submenus + megamenu expand inline (tap toggles .is-open via app.js). */
  .sub-menu, .mega-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; background: transparent;
    min-width: 0; width: auto; padding: 0; margin: 0;
    display: none;
  }
  .menu-item-has-children.is-open > .sub-menu,
  .menu-item-study.is-open > .mega-menu { display: block; padding: 0 0 .6rem 1rem; }
  .mega-menu__panel { grid-template-columns: 1fr; gap: 1rem; padding-block: .6rem; }

  /* ---------------------------------------------------------------------
     Panel contents re-grounded on the header bar.

     On desktop these panels paint their own white card, so everything inside
     is coloured for a LIGHT ground: .eyebrow takes --em-color (DC's deep
     orange), .section-intro and the destination counts take --muted, rules take
     --line. The rule above flattens that card to `background: transparent`, so
     on a dark bar all of it lands on --header-bg and drops to roughly 2:1.

     Everything below therefore re-points at the header's own channels, which is
     what makes this safe on all six brands rather than only the dark three:
     --header-fg / --header-fg-muted / --header-border already flip per brand, so
     the white-bar sites (hesta, ucnl, dncg) resolve back to their navy-on-white
     values and see no change at all. --header-accent is only set where a brand
     has proved an accent against its own bar (DC's teal, 8:1 on navy); every
     other brand falls back to the plain foreground rather than guessing.
     --------------------------------------------------------------------- */
  .sub-menu a, .mega-menu a { color: var(--header-fg); padding-inline: 0; }
  /* Underline, not just a colour shift: hover feedback has to survive on a
     ground where the brand's --link is one of the colours that just failed. */
  .sub-menu a:hover, .mega-menu a:hover {
    background: transparent; color: var(--header-accent, var(--header-fg)); text-decoration: underline;
  }
  .sub-menu .eyebrow, .mega-menu .eyebrow { color: var(--header-accent, var(--header-fg)); }
  .sub-menu p, .mega-menu p,
  .sub-menu .section-intro, .mega-menu .section-intro { color: var(--header-fg-muted); }
  .mega-menu__destination { border-bottom-color: var(--header-border); }
  .mega-menu__destination span { color: var(--header-fg-muted); }
  .sub-menu li.menu-separator, .sub-menu li.separator,
  .mega-menu__column li.menu-separator, .mega-menu__column li.separator { border-top-color: var(--header-border); }
  /* Both of these are GROUND swaps that only read against a white card — a navy
     panel on a navy bar, and a --light band on a bar that may itself be light.
     Drop the fills and let the hairline carry the grouping instead. */
  .mega-menu__escape { background: transparent; border: 1px solid var(--header-border); }
  .mega-menu__escape h3 { color: var(--header-fg); }
  .mega-menu__quick-entry { background: transparent; }
}

/* Between the full layout and the collapse point the brand and a four- or
   five-item study menu are competing for the same content width. Tighten the
   split and the logo before anything is asked to wrap. */
@media (max-width: 80em) and (min-width: 64.0625em) {
  .site-header { --header-split: 1.4rem; }
  .site-header-logo img { height: calc(var(--logo-height) * .88); }
}

/* Phone tier. The group lockup is drawn at 14:1, so at its normal height it is
   on its own wider than the content column a phone leaves after --page-gutter.
   Three things give: the endorsement line breaks under its own label, the
   lockup drops to its floor height, and the two controls go icon-only with
   their labels kept for assistive tech. */
@media (max-width: 40em) {
  .site-header__group { flex-wrap: wrap; gap: .1rem .5rem; }
  .site-header__group-logo { height: 12px; }
  .site-header__brand { padding-inline-end: .75rem; gap: .35rem; }
  #main-nav { gap: .5rem; }

  .menu-toggle { padding: .5rem .6rem; }
  .menu-toggle span,
  #main-nav > .site-header__search-link span {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%);
    white-space: nowrap; border: 0; padding: 0; margin: -1px;
  }
  #main-nav > .site-header__search-link { padding: .5rem .4rem; }
  #main-nav .menu-container { padding-inline: var(--page-gutter); }
}