/*
 * layout/header.css — the site header template parts (parts/header.html).
 *
 * Root classes: .fcs-utility-bar (top row), .fcs-header (nav bar)
 *
 * Responsive: Three sizes (mobile-first)
 * - Small (0–767px): Base styles, utility bar stacks vertically
 * - Medium (768px+): Tablet layout
 * - Large (1024px+): Desktop layout per Figma (1920px canvas, 1240px content)
 */

/* ====== UTILITY BAR ====== */
.fcs-utility-bar {
  background-color: var(--wp--preset--color--background);
  border-bottom: 1px solid var(--wp--preset--color--stroke);
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.fcs-utility-bar__inner {
  align-items: center;
  justify-content: space-between;
}

.fcs-utility-bar .wp-block-site-logo {
  flex-shrink: 0;
}

.fcs-utility-bar .wp-block-site-logo img {
  display: block;
  height: auto;
  width: 100%;
  max-width: 200px;
}

.fcs-utility-bar__actions {
  align-items: center;
  gap: 24px;
  flex-shrink: 0;
}

/* Parents / Alumni / GIVE NOW links */
.fcs-utility-bar__links {
  margin: 0;
  font-size: var(--wp--preset--font-size--small);
  line-height: 1.6;
  gap: 16px !important;
  display: flex;
  align-items: center;
}

.fcs-utility-bar__links p {
  margin: 0;
}

.fcs-utility-bar__links a {
  color: var(--wp--preset--color--foreground);
  text-decoration: none;

  /* Anchors the ::after underline below. */
  position: relative;
  display: inline-block;
}

.fcs-utility-bar__links a:hover,
.fcs-utility-bar__links a:focus-visible {
  color: var(--wp--preset--color--primary);
}

/*
 * Animated underline — the site-wide sweep idiom.
 *
 * Same as the nav bar below, site buttons (components/buttons.css) and prose
 * links (components/links.css): scaleX with the transform-origin flipping
 * between rest and hover, so the bar enters from the left and leaves to the
 * right rather than retracting the way it came.
 *
 * currentcolor, so it follows each link's own colour — GIVE NOW underlines in
 * its link blue, Parents/Alumni in the foreground grey, with no extra rule.
 *
 * base/reset.css zeroes this transition under prefers-reduced-motion.
 */
.fcs-utility-bar__links a::after {
  content: "";
  position: absolute;
  inset: auto 0 -2px 0;
  height: var(--fcs-underline-size);
  background-color: currentcolor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--fcs-sweep-link);
}

.fcs-utility-bar__links a:hover::after,
.fcs-utility-bar__links a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* GIVE NOW special styling — link blue per Figma (one-off, documented exception) */
.fcs-utility-bar__give-now {
  color: #0074c8 !important;
  font-weight: 700;
}

.fcs-utility-bar__give-now:hover,
.fcs-utility-bar__give-now:focus-visible {
  opacity: 0.8;
}

/* Calendar and search icons */
.fcs-utility-bar__calendar-icon,
.fcs-utility-bar__search-icon {
  margin: 0 !important;
  flex-shrink: 0;
}

/*
 * The calendar is a linked image, and core gives `.wp-block-image a`
 * inline-block — which sits on the text baseline and leaves a descender gap
 * under it. That made its figure ~33px tall against the search toggle's 24px,
 * so flex centring lifted the calendar ~4px above the magnifier.
 */
.fcs-utility-bar__calendar-icon a {
  display: block;
}

.fcs-utility-bar__calendar-icon img,
.fcs-utility-bar__search-icon img {
  width: 24px !important;
  height: 24px !important;
  display: block;
  transition: opacity var(--fcs-transition);
}

.fcs-utility-bar__calendar-icon:hover img,
.fcs-utility-bar__calendar-icon:focus-within img,
.fcs-utility-bar__search-icon:hover img,
.fcs-utility-bar__search-icon:focus-within img {
  opacity: 0.7;
}

/* Hamburger menu button (hidden on desktop) */
.fcs-utility-bar__hamburger {
  display: none !important;
  background: none;
  border: none;
  margin: 0 !important;
  padding: 4px;
  flex-shrink: 0;
  cursor: pointer;
  transition: opacity var(--fcs-transition);
}

.fcs-utility-bar__hamburger {
  display: flex;
  align-items: center;
  justify-content: center;
}

.fcs-utility-bar__hamburger img {
  width: 24px !important;
  height: 24px !important;
  display: block;
}

.fcs-utility-bar__hamburger:hover img,
.fcs-utility-bar__hamburger:focus-visible img {
  opacity: 0.7;
}

/* Mobile: Utility bar links wrap, icons still visible */
@media (max-width: 767px) {
  .fcs-utility-bar__inner {
    padding-inline: 20px !important;
  }

  .fcs-utility-bar__actions {
    gap: 12px;
  }

  .fcs-utility-bar__links {
    display: none !important;
  }

  .fcs-utility-bar__hamburger {
    display: block !important;
  }

  .fcs-utility-bar .wp-block-site-logo img {
    max-width: 150px !important;
  }

  /*
   * The navy nav bar is not shown at Small — the hamburger replaces it. But it
   * is NOT display:none, because the navigation block's mobile overlay (the
   * drawer the hamburger opens) is a descendant of .fcs-header: hiding the
   * ancestor hides the drawer too, and display:none also stops the block's own
   * open button from being clickable, which is how the JS triggers it.
   *
   * Instead the bar collapses to zero height and its in-flow contents are
   * hidden, while the overlay — which is position:fixed once open — escapes the
   * collapsed box and renders normally.
   */
  .fcs-header {
    height: 0;
    min-height: 0;
    overflow: visible;
    padding: 0 !important;
  }

  /*
   * Core's overlay threshold for overlayMenu:"mobile" is its own 600px, but our
   * hamburger takes over at 768px. Between those two widths core would still
   * lay the container out as a horizontal bar, so hide it explicitly whenever
   * the drawer is not open — the drawer itself is position:fixed and unaffected.
   */
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container:not(.is-menu-open) {
    display: none;
  }

  /* The block's own hamburger is redundant — ours lives in the utility bar —
   * but it must stay in the DOM and clickable for the JS to forward to it. */
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container-open {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
}

/* ====== PRIMARY NAVIGATION BAR ====== */
.fcs-header {
  position: sticky;
  top: 0;
  z-index: var(--fcs-z-header);
  background-color: #003b70;
  color: #ffffff;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  transition: box-shadow var(--fcs-transition);
}

/* Sticky positioning: account for safe-area-inset-top on notched devices */
.fcs-header {
  top: env(safe-area-inset-top, 0);
}

/* Add shadow when scrolled (injected by JS) */
.fcs-header.is-scrolled {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Navigation block styling */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) {
  padding: 20px 24px !important;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;

  /*
   * No overflow here — it must stay visible. This used to be overflow-x: auto,
   * and any non-visible overflow-x forces overflow-y to auto as well, so the
   * absolutely positioned dropdown panels were clipped inside the 64px bar
   * (and a scrollbar appeared at the bar's right edge when one opened). Items
   * that do not fit wrap instead — see the container rule below.
   */
}

/*
 * Top-level nav items.
 *
 * Scoped to the header — this was previously an unscoped
 * .wp-block-navigation__container rule, which reached every navigation block
 * on the site including the footer's, where its flex-wrap:nowrap fought the
 * two-column mobile grid.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container {
  gap: 24px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* Derived: seven items only just fit at 768px, so below Large the row may
   * wrap to a second line rather than overflow the viewport. */
  flex-wrap: wrap;
  row-gap: 8px;
  width: 100%;
  padding-block: 0 !important;
}

@media (min-width: 1024px) {
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container {
    flex-wrap: nowrap;
  }
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation-item {
  padding: 0;
  flex-shrink: 0;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) a {
  color: #ffffff !important;
  font-weight: 400 !important;
}

/*
 * Top-level nav links.
 *
 * Deliberately minimal. Core nests the list deeper than it looks —
 *
 *   .wp-block-navigation
 *     └ .wp-block-navigation__responsive-container
 *         └ .wp-block-navigation__responsive-container-content
 *             └ .wp-block-navigation__container
 *                 └ .wp-block-navigation-item > a
 *
 * — so the `nav > .wp-block-navigation__container > …` selector this rule used
 * to carry matched nothing, and its display/gap/padding declarations never
 * applied. The spacing you see comes from the container's gap: 24px above plus
 * core's own link defaults, and it matches Figma.
 *
 * Re-pointing the selector at the real structure made that dormant
 * `padding: 12px 16px` live for the first time, which added 32px per item on
 * top of the 24px gap and visibly widened the bar. So the padding is gone
 * rather than restored: this rule now sets only what the underline needs.
 * Do not reintroduce padding here without re-checking the nav against Figma.
 *
 * inline-block matters. Core's links are display:block and fill their <li>,
 * so a bar drawn on them spans the whole cell. inline-block shrinks the link to
 * its text so the bar can sit INSIDE the box and still look like an underline.
 * This is the same construction the footer nav uses.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container > .wp-block-navigation-item > a {
  position: relative;
  display: inline-block;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) a:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) a:focus-visible {
  color: #fbbc05;
}

/*
 * Animated underline on the top-level nav items.
 *
 * Same sweep idiom as the button wipe (components/buttons.css) and the prose
 * link (components/links.css): scaleX with the transform-origin flipping
 * between rest and hover, so the bar enters from the left and exits to the
 * right instead of retracting the way it came.
 *
 * White, pinned — not currentcolor. These links turn yellow (#fbbc05) on
 * hover, which is the exact moment the bar appears, so currentcolor would
 * render it yellow every time. The bar stays white to match the nav's resting
 * state; the yellow belongs to the hover text colour and the social icons.
 *
 * The bar sits at bottom: 0 — INSIDE the link's box, never below it.
 *
 * Scoped to items in the top-level container; the submenu panels and the
 * mobile drawer opt out further down, each for a layout reason.
 *
 * base/reset.css zeroes this transition under prefers-reduced-motion.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container > .wp-block-navigation-item > a::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: var(--fcs-underline-size);
  background-color: #ffffff;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform var(--fcs-sweep-link);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container > .wp-block-navigation-item > a:hover::after,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__container > .wp-block-navigation-item > a:focus-visible::after {
  transform: scaleX(1);
  transform-origin: left;
}

/*
 * The drawer reuses the same link selector, but a sliding underline reads as
 * noise in a vertical stack where items are already full-width. Suppress it.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a::after {
  content: none;
}

/*
 * Chevron — the ONLY thing that opens a submenu.
 *
 * The parent label stays a real link to its page; the chevron is a separate
 * <button> that core wires up (aria-expanded, Esc, close on focus-out). Hover
 * opening is switched off in PHP — see fcs_submenus_open_on_chevron_only() in
 * functions.php, which also swaps the <li> to `.open-on-click`.
 *
 * That class brings core's `padding-right: .85em` for button-style parents
 * with it, so padding is reset here. The hit area is widened with a negative
 * margin instead, so the 10px icon is not a 10px click target.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-icon {
  width: 10px;
  height: 10px;
  padding: 0;
  margin-left: 6px;
  cursor: pointer;
  position: relative;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-icon::before {
  content: "";
  position: absolute;
  inset: -10px;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-icon:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 4px;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-icon svg {
  transition: transform var(--fcs-transition);
}

/*
 * Submenu container (dropdown panel).
 *
 * Core collapses a closed panel to width/height 0 with overflow hidden, which
 * cuts the fade-out short. The panel keeps its size here and is hidden with
 * visibility instead, which also takes its links out of the tab order.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-container {
  background-color: #ffffff;
  color: #1c1c1c;
  border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  padding: 12px 0;
  width: auto;
  height: auto;
  min-width: 200px;
  overflow: visible;
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 10;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition:
    opacity var(--fcs-transition),
    visibility var(--fcs-transition),
    transform var(--fcs-transition);
}

/* Open state — driven by the chevron's aria-expanded, never :hover. */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/*
 * The !important on these colours is not a style choice: the white link rule
 * near the top of this file (`… a { color: #ffffff !important }`) reaches the
 * panel links too, and a normal declaration cannot beat an !important one no
 * matter how specific it is. These are more specific, so among !importants
 * they win. The drawer's submenu rule below has to follow suit.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  display: block;
  padding: 8px 16px;
  color: #1c1c1c !important;
  font-weight: 400;
  font-size: var(--wp--preset--font-size--medium);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item a:focus-visible {
  background-color: #f5f6f8;
  color: #0074c8 !important;
}

/*
 * Opt out of the site-wide sliding underline in the dropdown panels.
 *
 * These links are display:block and fill the panel's width, so the bar would
 * run the full row rather than sit under the label, and it would compete with
 * the background-colour hover above. The fill is the affordance here.
 * See components/links.css for the opt-out convention.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__submenu-container .wp-block-navigation-item a::after {
  content: none;
}

/*
 * Mobile menu — full-screen overlay (Figma "m-menu", 10265:8843).
 *
 * This is the navigation block's own overlay, restyled — not a second menu.
 * The hamburger in the utility bar forwards to it (assets/js/header.js), so
 * core keeps doing the focus trap, Esc to close and the body scroll lock.
 *
 * Layout per Figma (390px frame):
 *   - white, full screen, covering the utility bar;
 *   - a 65px top row holding only the blue close X, 20px from the right —
 *     the same row height as the utility bar, so the X lands where the
 *     hamburger was;
 *   - then a 20px-gutter column of navy 16/24 links, 16px apart;
 *   - parents carry a 16px navy chevron at the far right, flipped when open;
 *   - children list flush under their parent, same type, no indent;
 *   - 24px below the list, Parents / Alumni / GIVE NOW in link blue. Those are
 *     cloned in from the utility bar by header.js, so they are edited in one
 *     place (parts/header.html).
 *
 * Not wrapped in a media query: .is-menu-open is only ever present when the
 * navigation block has actually opened the overlay, so the class is its own
 * condition.
 *
 * Every link colour below is !important for the reason given above the panel
 * link rule: the white `… a { color: #fff !important }` reaches in here too.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open {
  position: fixed;
  inset: 0;
  width: 100%;
  max-width: none;
  padding: 0;
  background-color: var(--wp--preset--color--background);
  color: var(--wp--preset--color--primary);
  z-index: var(--fcs-z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* The 65px top row is the content's top padding; the X sits over it. */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 24px;
  width: 100%;
  padding: calc(env(safe-area-inset-top, 0px) + 65px + 20px) 20px 40px;
}

/*
 * padding !important: core copies the nav block's classes onto this <ul>, so
 * the nav bar's own `:is(.fcs-header__nav, …) { padding: … !important }`
 * lands on the list too and would indent it 16px past the utility links.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: stretch;
  justify-content: flex-start;
  gap: 16px;
  width: 100%;
  padding: 0 !important;
}

/*
 * Each item is a two-column grid: the link, then the chevron at the far
 * right. A parent's submenu drops into a second row spanning both columns,
 * and that row is what animates — 0fr closed, 1fr open. Grid rows can
 * transition to their content height, which max-height cannot do without
 * guessing a ceiling (and a menu can grow to any length).
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto;
  align-items: center;
  column-gap: 16px;
  row-gap: 0;
  width: 100%;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child {
  grid-template-rows: auto 0fr;
  transition: grid-template-rows var(--fcs-transition-slow);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child:has(> .wp-block-navigation-submenu__toggle[aria-expanded="true"]) {
  grid-template-rows: auto 1fr;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a {
  display: block;
  width: 100%;
  padding: 0;
  color: var(--wp--preset--color--primary) !important;
  background-color: transparent;
  font-size: var(--wp--preset--font-size--medium);
  line-height: 24px;
  transition: color var(--fcs-transition);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open a:focus-visible {
  color: var(--wp--preset--color--link) !important;
}

/*
 * Chevron. Core hides it in the overlay and shows every submenu expanded; we
 * bring it back as the accordion toggle. It is the same <button> core wires
 * up for the desktop dropdown, so aria-expanded and Esc come for free.
 *
 * Core's inline SVG is a 12px white stroke sized for the navy bar; the design
 * uses a 16px navy glyph, so the SVG is hidden and the Figma asset drawn in
 * its place. The ::before hit area from the desktop rule still applies.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
  display: block;
  width: 16px;
  height: 16px;
  margin: 0;
  padding: 0;
  border: 0;
  background: url("../../images/icons/FCS_Chevron_Down.svg") center / 16px 16px no-repeat;
  transition: transform var(--fcs-transition-slow);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon svg {
  display: none;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon[aria-expanded="true"] {
  transform: rotate(180deg);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon:focus-visible {
  outline-color: var(--wp--preset--color--primary);
}

/*
 * The submenu — the accordion's second row.
 *
 * Undoes both the desktop dropdown panel above and core's overlay defaults
 * (always visible, 2rem side padding). `.has-child >` lifts this over core's
 * `[aria-expanded=true] ~ .wp-block-navigation__submenu-container` rule,
 * which would otherwise put overflow back to visible and defeat the clip.
 *
 * overflow:hidden + min-height:0 is what lets the 0fr row shrink to nothing.
 * The 16px between items is each child's padding-top rather than a gap or a
 * margin on this list: padding on the clipped element itself would keep a
 * 16px sliver showing when closed; padding on the children is clipped away.
 *
 * visibility takes the closed links out of the tab order. It flips at the
 * start of opening and the end of closing, so the collapse is still seen.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation__submenu-container {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: static;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background-color: transparent;
  opacity: 1;
  transform: none;
  visibility: hidden;
  transition: visibility var(--fcs-transition-slow);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
  visibility: visible;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item {
  padding-top: 16px;
}

/* Beats the dropdown panel's link rule: its padding, dark text and grey fill. */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a {
  padding: 0;
  color: var(--wp--preset--color--primary) !important;
  background-color: transparent;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item a:focus-visible {
  color: var(--wp--preset--color--link) !important;
}

@media (prefers-reduced-motion: reduce) {
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.has-child,
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-icon {
    transition: none;
  }
}

/*
 * Parents / Alumni / GIVE NOW — cloned from the utility bar by header.js and
 * appended after the menu list. The clone is given its own class so none of
 * the utility bar's rules (including its display:none at Small) follow it in.
 *
 * Hidden unless the overlay is open: the element they are appended to is also
 * the container of the desktop nav bar when the overlay is closed.
 */
.fcs-header__drawer-links {
  display: none;
}

.wp-block-navigation__responsive-container.is-menu-open .fcs-header__drawer-links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

.fcs-header__drawer-links p {
  margin: 0;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .fcs-header__drawer-links a {
  width: auto;
  color: var(--wp--preset--color--link) !important;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .fcs-header__drawer-links a:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .fcs-header__drawer-links a:focus-visible {
  color: var(--wp--preset--color--primary) !important;
}

/* Figma "Typography/Form control": 14/20 bold caps — the button type. */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .fcs-header__drawer-links .fcs-header__drawer-give {
  font-size: 14px;
  line-height: 20px;
  font-weight: 700 !important;
  text-transform: uppercase;
}

/*
 * Close X — core's button, repositioned into the 65px top row and drawn with
 * the Figma asset (FCS_Close.svg, the blue X) in place of core's black SVG.
 * 8px padding makes a 40px target around the 24px glyph; top/right 12px put
 * the glyph itself 20px in from the corner, matching the design.
 */
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container-close {
  background-color: transparent;
  border: none;
  color: currentColor;
  cursor: pointer;
  padding: 8px;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  position: absolute;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: 12px;
  z-index: 1;
  display: block;
  width: 40px;
  height: 40px;
  background: url("../../images/icons/FCS_Close.svg") center / 24px 24px no-repeat;
  transition: opacity var(--fcs-transition);
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
  display: none;
}

:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover,
:is(.fcs-header__nav, .fcs-header .wp-block-navigation) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:focus-visible {
  opacity: 0.7;
}

@media (max-width: 767px) {
  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) {
    padding: 8px 16px !important;
  }

  :is(.fcs-header__nav, .fcs-header .wp-block-navigation) > .wp-block-navigation__container > :is(.fcs-header__nav, .fcs-header .wp-block-navigation)-item > a {
    padding: 8px 12px;
    font-size: var(--wp--preset--font-size--small);
  }
}

/* ====== HEADER CTA ======
 *
 * The "Your Journey Starts Here" band under the nav. Figma names it a "Text
 * banner", but it is header chrome, not the Text Banner pattern
 * (patterns/text-banner.php) — hence its own root class. It was
 * .fcs-text-banner until that pattern arrived and needed the name.
 *
 * Structure (parts/header.html):
 *
 *   .fcs-header-cta            full-bleed surface band
 *     .fcs-header-cta__inner   layout container, carries [data-expanded]
 *       .fcs-header-cta__header
 *         .fcs-header-cta__content   heading + description
 *         .fcs-header-cta__toggle    +/- button (Small only)
 *       .fcs-header-cta__actions     the two CTA buttons
 *
 * Derived mobile behaviour (no mobile design exists — see CLAUDE.md
 * "Responsive"): at Small the two CTAs cost more vertical space than the
 * message they support, so they collapse behind a +/- disclosure and the
 * banner reads as a single headline. From Medium up there is room for the
 * row, so the toggle is removed from the accessibility tree and the actions
 * are unconditionally visible.
 *
 * The expanded state lives as [data-expanded] on __inner rather than on the
 * toggle itself: __toggle and __actions are not siblings (the toggle is
 * nested inside __header), so no sibling combinator can reach across. Putting
 * the state on their common ancestor makes the selector independent of how
 * deeply either one is nested.
 */

/*
 * Lion crest behind the band. The art is drawn at a fixed size, not fitted to
 * the band, and centred vertically, so the band's own box crops it to the
 * middle strip. It is deliberately not a pre-cropped file: the band's height
 * changes as the CTAs open and close, and a fixed crop would leave bare
 * strips. The 8% opacity is baked into the SVG.
 *
 * Small (Figma 10535:14401, 390px frame): 320px wide, centre 120px right of
 * the band's centre, so most of it runs off the right edge.
 * Medium+ (Figma 8014:12347, 1920px frame): 526px wide, centre 111px right.
 * Medium has no design of its own; it takes the desktop values, since the band
 * is already the single desktop row there.
 *
 * Padding: Figma is 24px top/bottom at Small. The block's inline padding says
 * the same, but DEV renders a Site Editor copy of this part, so Small is
 * pinned here as well; Medium's 40px rule below overrides it.
 */
.fcs-header-cta {
  padding-top: 24px !important;
  padding-bottom: 24px !important;
  background-color: var(--wp--preset--color--surface);
  background-image: url("../../images/FCS_Lion_Head_Banner.svg");
  background-repeat: no-repeat;
  background-position: calc(50% + 120px) center;
  background-size: 320px auto;
}

/*
 * The band is .alignfull and the inner is .alignwide, so WordPress caps the
 * inner at wideSize (1240px) but gives it no side gutter — at Small the content
 * would otherwise run edge to edge. 20px is the same gutter the utility bar
 * uses, so the logo above and the heading below line up.
 */
.fcs-header-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding-inline: 20px;
}

.fcs-header-cta__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fcs-gutter);
}

/* Figma: 10px between the heading and the line under it. */
.fcs-header-cta__content {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/*
 * Both Figma frames set this heading at ExtraBold (800) with -0.2px tracking:
 * Small (10535:14401) is H3 24px/32px, Large (8014:12347) is H2 36px/40px.
 *
 * Derived: Medium has no design and takes 30px/36px. At 36px the headline
 * wraps beside the two buttons in a 768px row.
 *
 * font-weight is pinned rather than inherited: the global heading weight in
 * theme.json is 500, and this banner is designed heavier than that.
 */
.fcs-header-cta__content h2 {
  margin: 0;
  font-size: 24px;
  line-height: 32px;
  font-weight: 800;
  letter-spacing: -0.2px;
}

/* Figma Small text at Small (14px/20px); paragraph 16px/24px from Medium up. */
.fcs-header-cta__description {
  margin: 0 !important;
  font-size: var(--wp--preset--font-size--small);
  line-height: 20px;
}

/* --- Disclosure toggle (Small only) --- */

.fcs-header-cta__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  /* Line the icon up with the cap-height of the heading beside it. */
  margin-block-start: 0.125rem;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}

.fcs-header-cta__toggle img {
  display: block;
  width: 24px;
  height: 24px;
  transition: opacity var(--fcs-transition);
}

.fcs-header-cta__toggle:hover img,
.fcs-header-cta__toggle:focus-visible img {
  opacity: 0.7;
}

/* --- Actions --- */

.fcs-header-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.75rem;

  /* Collapsed by default at Small. A grid row animating 0fr -> 1fr would
	 * avoid the guessed max-height, but it needs a wrapper element we do not
	 * control from the block markup, so max-height it is: the value only has
	 * to exceed the real height, and two stacked buttons cannot approach it. */
  max-height: 0;
  overflow: hidden;
  transition:
    max-height var(--fcs-transition-slow),
    margin-block-start var(--fcs-transition-slow),
    visibility var(--fcs-transition-slow);
  visibility: hidden;
}

.fcs-header-cta__inner[data-expanded="true"] .fcs-header-cta__actions {
  max-height: 20rem;
  margin-block-start: var(--fcs-gutter);
  visibility: visible;
}

.fcs-header-cta__actions .wp-block-button {
  margin: 0;
}

/* Full-width CTAs while stacked; theme.json owns colour, radius and type. */
.fcs-header-cta__actions .wp-block-button__link {
  display: block;
  width: 100%;
  text-align: center;
}

/*
 * Respect a reduced-motion preference: the panel still opens and closes, it
 * just does not animate.
 */
@media (prefers-reduced-motion: reduce) {
  .fcs-header-cta__actions {
    transition: none;
  }
}

/* --- Medium (768px+): one row, no disclosure --- */

@media (min-width: 768px) {
  /*
   * Figma: the band is 40px top/bottom on desktop, 24px on mobile.
   *
   * The 24px lives on the block's own padding attribute in parts/header.html
   * so it stays visible and editable in the Site Editor, which means it lands
   * as an inline style. Block markup cannot carry a media query, so the
   * desktop value has to come from here — and beating an inline style needs
   * !important, there being no selector specific enough to outrank one.
   */
  .fcs-header-cta {
    padding-top: 40px !important;
    padding-bottom: 40px !important;
    background-position: calc(50% + 111px) center;
    background-size: 526px auto;
  }

  .fcs-header-cta__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--fcs-gutter-lg);
  }

  .fcs-header-cta__header {
    flex: 1;
  }

  .fcs-header-cta__content h2 {
    font-size: 30px;
    line-height: 36px;
  }

  .fcs-header-cta__description {
    font-size: var(--wp--preset--font-size--medium);
    line-height: 24px;
  }

  .fcs-header-cta__toggle {
    display: none;
  }

  /* Reset the collapsed state — above Small the panel is always open, and
	 * [data-expanded] is ignored rather than allowed to hide the CTAs. */
  .fcs-header-cta__actions,
  .fcs-header-cta__inner[data-expanded="true"] .fcs-header-cta__actions {
    flex-direction: row;
    align-items: center;
    flex-shrink: 0;
    gap: 16px;
    max-height: none;
    margin-block-start: 0;
    overflow: visible;
    visibility: visible;
  }

  .fcs-header-cta__actions .wp-block-button__link {
    width: auto;
  }
}

/* --- Large (1024px+) --- */

@media (min-width: 1024px) {
  /* Past the 1240px cap the viewport is wide enough that the gutter is no
	 * longer protecting anything, and keeping it would measure the content at
	 * 1200px instead of the design's 1240px. */
  .fcs-header-cta__inner {
    padding-inline: 0;
  }

  /* Figma H2 on the desktop frame. */
  .fcs-header-cta__content h2 {
    font-size: 36px;
    line-height: 40px;
  }
}