/**
 * Navigation: the bar (Nav A) and the full-screen menu overlay.
 *
 * The bar has two states. Over a photo hero it is transparent and sits on top
 * of the image; once the hero has passed it collapses to a solid #111 strip.
 * Templates with no photo hero (the news entry) start in the solid state, which
 * is expressed by `.sbs-header--solid` in the markup rather than by JS.
 */

.sbs-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--sbs-z-header);
  padding: var(--sbs-nav-pad-y) var(--sbs-page-x);
  transition: background-color var(--sbs-dur) var(--sbs-ease);
}

/*
 * Pinned and solid: either scrolled past the hero, or a template that never
 * had one.
 *
 * Only the background and the positioning change. The bar used to drop its
 * vertical padding from 32px to 26px on pin, so scrolling shrank it by 12px
 * and the whole row shifted; the transition animated the size change, which
 * made it more obvious rather than less. One height, always.
 */
.sbs-header--solid,
.sbs-header.is-pinned {
  position: fixed;
  background: var(--sbs-ink);
}

/*
 * Stay put when it pins.
 *
 * At rest the bar is `position: absolute` inside .sbs-site, so WordPress's
 * 32px html margin for the admin bar carries it down with the page. Pinning
 * switches it to `position: fixed`, which is positioned against the viewport
 * and ignores that margin — so on the first scroll the whole bar jumped 32px
 * up and slid under the admin bar. Same height, wrong place, and only ever
 * for logged-in editors.
 *
 * The 782px and 600px breakpoints and the 46px height are WordPress's own.
 * Below 600px its bar stops being fixed and scrolls away with the page, so
 * there is nothing left to sit under.
 */
body.admin-bar .sbs-header--solid,
body.admin-bar .sbs-header.is-pinned {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .sbs-header--solid,
  body.admin-bar .sbs-header.is-pinned {
    top: 46px;
  }
}

@media screen and (max-width: 600px) {
  body.admin-bar .sbs-header--solid,
  body.admin-bar .sbs-header.is-pinned {
    top: 0;
  }
}

/* Sliding the bar out of view and back keeps it from covering content when
 * the visitor scrolls down, without losing it entirely. */
.sbs-header.is-hidden {
  transform: translateY(-100%);
  transition: transform var(--sbs-dur) var(--sbs-ease),
    background-color var(--sbs-dur) var(--sbs-ease);
}

.sbs-header.is-pinned {
  transform: translateY(0);
  transition: transform var(--sbs-dur) var(--sbs-ease),
    background-color var(--sbs-dur) var(--sbs-ease);
}

/*
 * A template with a solid header reserves its height, since the bar is fixed
 * and therefore out of flow. Derived rather than hard-coded: the old 86px was
 * the pinned bar's 26+34+26, which stopped being the height the moment the bar
 * kept its full padding, and left content sliding under it.
 */
.sbs-site--solid-header .sbs-main {
  padding-top: calc(var(--sbs-nav-pad-y) * 2 + var(--sbs-nav-row-h));
}

/*
 * The bar's ink strip stays full-bleed; the row inside it is capped and
 * centred so the wordmark sits on the same left edge as the content below.
 *
 * A max-width here rather than `--sbs-gutter` padding on `.sbs-header`,
 * because the bar switches between `position: absolute` and `position: fixed`
 * when it pins. Those two have different containing blocks, so a percentage
 * gutter would resolve differently in each state and the wordmark would jump
 * sideways at the moment the bar goes solid. Centring an inner box is immune
 * to that, and lands on exactly the same edge the gutter produces.
 */
.sbs-header__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--sbs-nav-row-h);
  max-width: var(--sbs-container);
  margin-inline: auto;
}

/* ---------------------------------------------------------------
 * Branding
 * ------------------------------------------------------------- */
.sbs-branding {
  display: flex;
  align-items: center;
  gap: 16px;
  color: var(--sbs-white);
}

.sbs-branding:hover {
  color: var(--sbs-white);
}

.sbs-branding__logo {
  height: 34px;
  width: auto;
}

.sbs-branding__name {
  font-family: var(--sbs-font-display);
  font-size: 14px;
  font-weight: var(--sbs-w-regular);
  letter-spacing: var(--sbs-ls-nav);
  text-transform: uppercase;
  white-space: nowrap;
}

/* ---------------------------------------------------------------
 * Utility cluster: language picker, Visit campus, Apply, Menu.
 * ------------------------------------------------------------- */
.sbs-header__utility {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-left: auto;
}

.sbs-lang {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--sbs-font-display);
  font-size: var(--sbs-nav-sm);
  letter-spacing: var(--sbs-ls-nav-tight);
  text-transform: uppercase;
}

.sbs-lang__item:not(:last-child)::after {
  content: '/';
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.35);
}

.sbs-lang__link {
  color: rgba(255, 255, 255, 0.5);
}

.sbs-lang__item.is-current .sbs-lang__link {
  color: var(--sbs-white);
}

.sbs-lang__link:hover {
  color: var(--sbs-gold-light);
}

.sbs-nav-utility {
  display: flex;
  align-items: center;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-nav-utility a {
  padding: 14px 24px;
  font-family: var(--sbs-font-display);
  font-size: var(--sbs-nav-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbs-white);
  white-space: nowrap;
}

/* The Apply block is the primary conversion on every page, so it is the one
 * gold element in the bar. Menu items flagged `apply` in the WordPress menu
 * pick it up via a CSS class on the item. */
.sbs-nav-utility .apply > a,
.sbs-nav-apply {
  background: var(--sbs-gold);
  color: var(--sbs-ink);
  transition: background-color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-nav-utility .apply > a:hover,
.sbs-nav-apply:hover {
  background: var(--sbs-gold-light);
  color: var(--sbs-ink);
}

/* ---------------------------------------------------------------
 * Menu button — label plus a two-line 22px rule.
 * ------------------------------------------------------------- */
.sbs-menu-btn {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  min-width: var(--sbs-nav-toggle-w);
  padding: 14px 6px 14px 20px;
  font-family: var(--sbs-font-display);
  font-size: var(--sbs-nav-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbs-white);
}

.sbs-menu-btn__bars {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 22px;
}

.sbs-menu-btn__bars span {
  height: 1px;
  background: currentColor;
  transition: transform var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-menu-btn:hover .sbs-menu-btn__bars span:first-child {
  transform: translateX(4px);
}

/* ---------------------------------------------------------------
 * Overlay
 *
 * Two columns, 480px / 1fr. The left panel is ink-deep and carries the six
 * top-level sections; the right is ink and carries the hovered section's
 * children, the quick links and the contact line.
 * ------------------------------------------------------------- */
/*
 * Four tracks, not two: an empty one either side of the 480px panel and the
 * right-hand column, so the pair together is capped at --sbs-container and
 * centred on exactly the same two edges as the header, the sections and the
 * footer. The ink still covers the whole screen — only the panels are bounded.
 *
 * The flexible tracks bottom out at the page margin rather than at zero, so
 * below the design width the panels keep the same margin the bar has and the
 * Close control still lands on the Menu button it replaces. `minmax(0, …)` on
 * the middle track lets it shrink rather than overflow between 1024px and the
 * design width.
 */
.sbs-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--sbs-z-overlay);
  display: grid;
  grid-template-columns:
    minmax(var(--sbs-page-x), 1fr)
    var(--sbs-overlay-left)
    minmax(0, calc(var(--sbs-container) - var(--sbs-overlay-left)))
    minmax(var(--sbs-page-x), 1fr);
  background: var(--sbs-ink);
  color: var(--sbs-white);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--sbs-dur) var(--sbs-ease-out),
    visibility 0s linear var(--sbs-dur);
}

.sbs-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--sbs-dur) var(--sbs-ease-out),
    visibility 0s;
}

/*
 * Sit below the admin bar rather than under it.
 *
 * The bar is `position: absolute` inside .sbs-site, so WordPress's 32px
 * html margin pushes it down; the overlay is `position: fixed`, which ignores
 * that margin and starts at the top of the viewport. The two rows are then 32px
 * apart for every logged-in editor — invisible to visitors, and the one
 * audience that reviews the site sees it on every open.
 *
 * The 782px breakpoint and the 46px height are WordPress's own.
 */
body.admin-bar .sbs-overlay {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar .sbs-overlay {
    top: 46px;
  }
}

/* Below 600px WordPress's bar is not fixed; it scrolls away with the page. */
@media screen and (max-width: 600px) {
  body.admin-bar .sbs-overlay {
    top: 0;
  }
}

/* Left panel ------------------------------------------------- */

/*
 * Black, and it runs to the left edge of the screen.
 *
 * The panel itself is bounded to the content column like everything else, but
 * its ground is not: the ::before paints the same black across the gutter
 * beside it, so on a wide display the left of the screen reads as one solid
 * black column rather than a black rectangle floating on the overlay's ink.
 * Pure black rather than --sbs-ink-deep, which at #0A0A0A sat a single step
 * from the #111 beside it and made the two panels indistinguishable.
 */
.sbs-overlay__left {
  grid-column: 2;
  position: relative;
  display: flex;
  flex-direction: column;
  background: #000000;
  /*
   * No left padding. The panel already begins on the content column, so an
   * inset on top of that put the wordmark and the whole section list 48px
   * right of where the bar's wordmark sits — the one thing on screen the eye
   * has to compare it against. The black still runs to the edge of the screen
   * behind it; only the type is on the column.
   */
  padding: var(--sbs-nav-pad-y) 48px 44px 0;
}

.sbs-overlay__left::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  /* Starts at the panel's left edge and runs outward, off-screen. A fixed
   * element overflowing to the LEFT cannot produce a scrollbar. */
  right: 100%;
  width: 100vw;
  background: inherit;
  pointer-events: none;
}

/* The sections sit below the brand lockup, not centred: the design hangs
 * them from the top and pushes the social squares to the floor. */
.sbs-overlay__sections {
  list-style: none;
  margin: 96px 0 0;
  padding: 0;
}

.sbs-overlay__sections a {
  display: block;
  padding: 6px 0;
  font-family: var(--sbs-font-display);
  font-size: clamp(28px, 3vw, 42px);
  font-weight: var(--sbs-w-medium);
  line-height: 1.32;
  color: var(--sbs-white);
  transition: color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-overlay__sections li.is-active > a,
.sbs-overlay__sections a:hover,
.sbs-overlay__sections .current-menu-item > a {
  color: var(--sbs-gold);
}

/* Social squares — the other shape allowed to break the square rule, in that
 * they are bordered boxes rather than plain glyphs. */
.sbs-overlay__social {
  display: flex;
  gap: 12px;
  margin-top: auto;
}

.sbs-overlay__social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border: 1px solid var(--sbs-ink-line);
  color: var(--sbs-gold);
  transition: border-color var(--sbs-dur-fast) var(--sbs-ease);
}

.sbs-overlay__social a:hover {
  border-color: var(--sbs-gold);
}

.sbs-overlay__social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/* Right panel ------------------------------------------------ */
.sbs-overlay__right {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  /*
   * Top padding matches the bar's, so the row below lands on the bar's line.
   * No right padding: the panel already ends on the content column, and the
   * page margin on top of it pulled Close 64px in from where the Menu button
   * it replaces sits.
   */
  padding: var(--sbs-nav-pad-y) 0 44px 48px;
}

/*
 * The same box as .sbs-header__inner. Opening the menu replaces the bar with
 * this row, so any difference in padding or height reads as the whole set of
 * controls jumping.
 */
.sbs-overlay__top {
  display: flex;
  align-items: center;
  /* The bar's own spacing (.sbs-header__utility), so the run of controls has
   * the same rhythm here as it does closed. The distance from the search field
   * is not this gap — the auto margin below owns that. */
  gap: 14px;
  min-height: var(--sbs-nav-row-h);
  flex: 0 0 auto;
  /*
   * Wraps rather than overflows. The row's fixed content comes to roughly
   * 810px, and the right panel is only that wide above about 1460px, so on
   * every screen between the tablet breakpoint and the design width the row
   * used to run off the side of the panel and take Close with it. The search
   * field below gives up width first; when even that is not enough the row
   * takes a second line.
   */
  flex-wrap: wrap;
  row-gap: 16px;
}

/* Everything in the row is vertically centred, the Apply block included: it
 * used to fill a 74px row, which at the bar's height would make the gold
 * rectangle grow by 4px at the moment the menu opens. */
.sbs-overlay__top > *,
.sbs-overlay__top .sbs-nav-utility {
  align-self: center;
}

/*
 * The language switcher onwards is one right-aligned group, the way
 * `.sbs-header__utility { margin-left: auto }` behaves in the bar. The auto
 * margin used to sit on Close instead, which right-aligned only Close and left
 * the switcher, Visit campus and Apply floating wherever the search field
 * happened to end — about 90px left of where the bar puts them.
 */
.sbs-overlay__top .sbs-lang {
  margin-left: auto;
}

.sbs-overlay__top .sbs-nav-utility li:not(.apply) {
  display: flex;
  align-items: center;
}

/*
 * Both rows lay the Apply block out the same way. In the bar it was a plain
 * inline link, which is 47px tall, against the overlay's 51px flex box — so
 * the gold rectangle changed size the moment the menu opened. The overlay's
 * wider 34px inline padding went the same way: 20px of extra width on the
 * block pushed everything to its left out of step with the bar.
 *
 * Scoped to `.apply > a` rather than the whole list, deliberately: a rule on
 * `li:not(.apply)` here would outscore the ≤900px rule that hides Visit
 * campus, which is exactly how that link ended up stuck on screen inside the
 * overlay.
 */
.sbs-overlay__top .sbs-nav-utility .apply > a,
.sbs-header__utility .sbs-nav-utility .apply > a {
  display: flex;
  align-items: center;
}

/* The search field's bottom rule is the ONLY border in the overlay. */
.sbs-overlay__search {
  display: flex;
  align-items: center;
  gap: 12px;
  /*
   * 340px is the design width and the cap; the basis is set below it because a
   * wrapping flex container decides line breaks from the BASIS and only
   * shrinks within a line afterwards. At a 340px basis the row came to 835px
   * against the 785px the panel offers at the design width, so Close dropped
   * to a second line while the search field sat there at its full width
   * refusing to give any of it up. At 280px the row fits, and the grow factor
   * hands the slack back to the field.
   */
  flex: 1 1 280px;
  min-width: 200px;
  max-width: 340px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sbs-ink-line);
}

.sbs-overlay__search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: 0;
  padding: 0;
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-eyebrow);
  letter-spacing: var(--sbs-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sbs-white);
}

.sbs-overlay__search input::placeholder {
  color: var(--sbs-grey-400);
}

.sbs-overlay__search button {
  color: var(--sbs-gold);
  font-size: 15px;
}

.sbs-overlay__close {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: var(--sbs-nav-toggle-w);
  /*
   * The same 6px the Menu button carries. Their boxes already end on the same
   * line, but Menu's last child is its rule with 6px of padding after it while
   * Close's label ran flush to the edge, so the word sat 6px right of the mark
   * it replaces.
   */
  padding-right: 6px;
  font-family: var(--sbs-font-display);
  font-size: var(--sbs-nav-sm);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sbs-white);
}

.sbs-overlay__close span:first-child {
  color: var(--sbs-gold);
  font-size: 18px;
}

.sbs-overlay__body {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 48px;
  padding-top: 48px;
  flex: 1;
  min-height: 0;
}

.sbs-overlay__label {
  margin-bottom: 26px;
  font-family: var(--sbs-font-mono);
  font-size: var(--sbs-eyebrow);
  letter-spacing: var(--sbs-ls-eyebrow);
  text-transform: uppercase;
  color: var(--sbs-gold);
}

/* Sub-links. One panel per section, only the active one displayed — the
 * markup carries all six so hovering can swap without a fetch. */
.sbs-overlay__panel {
  display: none;
}

.sbs-overlay__panel.is-active {
  display: block;
}

.sbs-overlay__sublinks {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-overlay__sublinks a {
  display: block;
  padding: 5px 0;
  font-family: var(--sbs-font-display);
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: var(--sbs-w-light);
  line-height: 1.46;
  color: var(--sbs-white);
}

.sbs-overlay__sublinks a:hover {
  color: var(--sbs-gold);
}

.sbs-overlay__quick {
  align-self: start;
  padding: 32px 30px;
  background: var(--sbs-ink-panel);
}

.sbs-overlay__quick ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sbs-overlay__quick li + li {
  margin-top: 10px;
}

.sbs-overlay__quick a {
  font-family: var(--sbs-font-body);
  font-size: 16px;
  color: var(--sbs-grey-400);
}

.sbs-overlay__quick a:hover {
  color: var(--sbs-gold);
}

.sbs-overlay__contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  font-size: var(--sbs-body-xs);
  color: var(--sbs-beige-300);
}

.sbs-overlay__contact .sbs-star {
  color: var(--sbs-gold);
}

.sbs-overlay__contact a {
  color: var(--sbs-beige-300);
  text-decoration: underline;
  text-underline-offset: 4px;
}

.sbs-overlay__contact a:hover {
  color: var(--sbs-gold);
}

/* ---------------------------------------------------------------
 * Responsive
 *
 * Below 1024 the overlay becomes a single full-height column: sections
 * first, then the active section's links, then quick links.
 * ------------------------------------------------------------- */
@media (max-width: 1200px) {
  .sbs-branding__name {
    display: none;
  }
}

@media (max-width: 1024px) {
  /*
   * minmax(0, 1fr), not 1fr. A bare `1fr` is `minmax(auto, 1fr)`, so the track
   * refuses to go below the widest thing in it and the stacked overlay ends up
   * wider than the phone it is on — the menu is then cut off on the right with
   * no way to scroll to it, since the overlay only scrolls vertically. The
   * zero minimum lets the column be the width of the screen and the content
   * inside wrap to fit.
   */
  .sbs-overlay {
    grid-template-columns: minmax(0, 1fr);
    overflow-y: auto;
  }

  /* Back to source order. Left over from the wide layout, the explicit
   * placements would put each panel in its own implicit column and rebuild
   * the two-column overlay this breakpoint exists to undo. */
  .sbs-overlay__left,
  .sbs-overlay__right {
    grid-column: auto;
    min-width: 0;
  }

  .sbs-overlay__left {
    padding: 24px var(--sbs-page-x) 28px;
  }

  .sbs-overlay__sections {
    margin: 32px 0;
  }

  .sbs-overlay__right {
    padding: 0 var(--sbs-page-x) 40px;
  }

  .sbs-overlay__body {
    grid-template-columns: 1fr;
    gap: 32px;
    padding-top: 32px;
  }

  .sbs-overlay__search {
    max-width: none;
  }

  /*
   * Wrapping is on for every width now (see .sbs-overlay__top); stacked, the
   * row just needs a little breathing room at the top.
   *
   * Wrapping rather than hiding Visit campus, which is what the bar does below
   * 900px: the overlay is the one place a visitor has come specifically to
   * find these links. That hide would not reach here anyway —
   * `.sbs-overlay__top .sbs-nav-utility li:not(.apply)` up the file scores
   * (0,3,1) against the bar rule's (0,2,1).
   */
  .sbs-overlay__top {
    padding-top: 8px;
  }

  /* On touch there is no hover, so every section's links are shown under it
   * rather than swapped into a panel the visitor cannot reach. */
  .sbs-overlay__panel {
    display: block;
    margin-bottom: 28px;
  }
}

@media (max-width: 900px) {
  /* Through the token, so the overlay's top row and the reserved height under
   * a solid header come down with the bar instead of drifting apart. */
  :root {
    --sbs-nav-pad-y: 20px;
  }

  /* Visit campus is the first thing to go; Apply and Menu stay to the end. */
  .sbs-nav-utility li:not(.apply) {
    display: none;
  }

  .sbs-nav-utility a,
  .sbs-menu-btn {
    padding: 12px 16px;
  }

  .sbs-header__utility {
    gap: 8px;
  }
}

@media (max-width: 560px) {
  .sbs-lang {
    display: none;
  }

  .sbs-menu-btn {
    padding-left: 10px;
  }
}