/* =========================================================
   Prospectus Novus Skool - Base Stylesheet (Phase 1)
   ========================================================= */

/* ---- Self-hosted Roboto ----
   Same static weight files and same font-stack position as AOC:
   system-ui renders first (see --font-body below), so on Mac/Windows/
   Linux this Roboto is a fallback that rarely actually paints - kept
   only so both sites degrade the same way if system-ui is unavailable. */
@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Regular.woff2") format("woff2"),
       url("../fonts/Roboto-Regular.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Roboto";
  src: url("../fonts/Roboto-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- Design tokens ----
   NOTE: --color-navy is a placeholder until the client supplies
   the official hex code. Swap the single value below once received. */
:root {
  --color-maroon: #902545;   /* menu hover background */
  --color-white: #ffffff;
  --color-navy: #0a2240;     /* PLACEHOLDER navy blue - footer background and h1 headings, replace with official hex */
  --color-text: #262626;
  --color-nav-bg: #ffffff;
  --color-border: #e2e2e2;
  --color-offwhite: #f7f6f4; /* alternating page-section background, 1 of 3 */
  --color-maroon-tint: #fbf6f8; /* alternating page-section background, ~4% maroon */
  /* Same stack as AOC's --default-font: system-ui renders first on
     every OS (San Francisco on Mac, Segoe UI on Windows), with the
     self-hosted Roboto above only as a same-site fallback. */
  --font-body: system-ui, -apple-system, "Segoe UI", "Roboto", "Helvetica Neue",
    Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --header-max-width: 1200px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Always reserve the scrollbar's width, even on short pages that
     don't need to scroll - otherwise the centred header/main/footer
     shift a few pixels sideways whenever the scrollbar appears or
     disappears between pages of different lengths. */
  overflow-y: scroll;
  /* .page-section below breaks out to full viewport width via 100vw;
     on non-overlay scrollbars 100vw can be a few px wider than the
     visible area, which would otherwise add a horizontal scrollbar.
     Set here (not on body) - overflow-x on body would make body its
     own scroll container, which breaks .site-header's position:
     sticky (it'd stick to body's box instead of the viewport). */
  overflow-x: hidden;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.6;
  font-size: 19px;
  font-weight: 300;
}

/* Thin, larger headings - matches the AOC site's h1-h3 treatment
   (font-weight 200-300, sized up rather than left at browser
   defaults, which render small and bold). */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: 200;
  line-height: 1.25;
}

/* Navy/maroon alternate by depth: h1/h3/h5 navy, h2/h4/h6 maroon.
   Only h1-h3 are in use anywhere on the site today, but this keeps
   the pattern predictable if a page ever needs to go a level deeper.
   Navy gets a touch more weight than the base 200 - at the thin
   weight the dark placeholder navy read too close to the body text
   colour to register as blue. Revisit once the client's real navy
   hex is in (it may not need this bump if it's more saturated). */
h1,
h3,
h5 {
  color: var(--color-navy);
  font-weight: 300;
}

h2,
h4,
h6 {
  color: var(--color-maroon);
}

h1 {
  font-size: 2.5rem;
}

h2 {
  font-size: 2rem;
}

h3 {
  font-size: 1.5rem;
}

/* VISUAL TEST: indent subheadings (h3) and the content directly under
   them, to set them apart from their parent h2 section on
   heading-heavy pages. Every h3 on the site is immediately followed
   by one <p> or <ul>, so the adjacent-sibling selectors below catch
   the related content without needing extra markup. Remove this rule
   to revert. */
h3,
h3 + p,
h3 + ul {
  margin-left: 2rem;
}

h4 {
  font-size: 1.25rem;
}

/* A little breathing room between plain content bullet lists (About
   Us, Referrals and Applications, Finances, etc.) - browsers give
   list items no spacing of their own by default. Scoped to unclassed
   <ul>s so nav-list/dropdown/sitemap-list (which already set their
   own spacing) aren't affected. */
main ul:not([class]) li {
  margin-bottom: 0.5rem;
}

/* Finances bank details list - only the "Bank" line keeps its bullet,
   the rest read as plain label/value rows. */
.bank-details-list {
  list-style: none;
}

.bank-details-list li {
  margin-bottom: 0.5rem;
}

.bank-details-list .bank-bullet {
  list-style: disc;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  max-width: 100%;
  display: block;
}

/* =========================================================
   Header / Navbar
   ========================================================= */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  border-bottom: 1px solid var(--color-border);
  background: var(--color-nav-bg);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.header-inner {
  /* Same max-width/centering as main and footer-inner, so Home and
     the rest of the menu line up with the page content below them.
     The .site-header bar itself still spans the full viewport. */
  max-width: var(--header-max-width);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  padding: 0.5rem 1.25rem;
  gap: 1rem;
}

/* Logo block: logo image with fine-print tagline underneath.
   header-inner is centred to line the nav up with the page content
   below it, but the crest should stay near the true left edge of the
   viewport (just with breathing room) rather than drift inward with
   it on wide screens - this pulls it back out by the same amount. */
.brand {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
  margin-left: min(0px, calc((var(--header-max-width) - 100vw) / 2));
}

.brand-logo {
  width: 64px;
  height: auto;
}

.brand-tagline {
  margin-top: 0.25rem;
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--color-text);
  white-space: nowrap;
}

/* =========================================================
   Main navigation
   ========================================================= */

.main-nav {
  flex: 1 1 auto;
  min-width: 0;
}

.nav-toggle {
  display: none;
  background: none;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  cursor: pointer;
}

.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: nowrap;
  /* flex-end anchors nav content to header-inner's own right edge,
     which (unlike the crest's position) stays constant relative to
     the page content column at every viewport width - the crest's
     pull-to-viewport-edge margin varies with viewport width, so
     aligning "Home" relative to the crest instead would drift
     inconsistently across screen sizes. margin-right nudges the
     whole right-aligned cluster left by a small, fixed amount so
     "Home" lands under the page heading below it. */
  justify-content: flex-end;
  gap: 0.1rem;
  margin-right: 1.25rem;
}

.nav-list li {
  position: relative;
  flex: 0 0 auto;
}

.nav-list a,
.nav-list .nav-label {
  display: block;
  padding: 0.75rem 0.6rem;
  font-size: 0.85rem;
  font-weight: 400;
  white-space: nowrap;
  cursor: pointer;
}

/* .nav-label (Phases / Extra Mural / Auxiliary Services) is excluded
   here deliberately - it doesn't navigate anywhere, so it shouldn't
   look like a link. */
.nav-list a {
  position: relative;
}

/* Inactive parent items (Phases / Extra Mural / Auxiliary Services)
   render as non-link text but still trigger the dropdown */
.nav-label {
  user-select: none;
}

.has-dropdown > a,
.has-dropdown > .nav-label {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.caret {
  font-size: 0.6rem;
  line-height: 1;
}

/* Hover state - required brand mouseover treatment.
   Text colour only (no background) - a background swap was causing
   items to reflow/shift as the mouse moved across the menu. */
.nav-list a:hover,
.nav-list a:focus-visible,
.nav-list .nav-label:hover,
.nav-list .nav-label:focus-visible,
.has-dropdown.open > a,
.has-dropdown.open > .nav-label,
.search-toggle:hover,
.search-toggle:focus-visible,
.nav-search.open > .search-toggle {
  color: var(--color-maroon);
  outline: none;
}

/* Animated underline (same grow-from-the-left effect as the AOC
   site, in the brand maroon rather than AOC's red). Thicker in the
   navbar/dropdowns, thinner everywhere else - see the shared rule
   further down for the footer/sitemap/search-results version. */
.nav-list a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--color-maroon);
  transition: width 0.25s ease-in-out;
}

.nav-list a:hover::before,
.nav-list a:focus-visible::before {
  width: 100%;
}

/* Active state - marks the current page/section (set by js/nav.js).
   Same treatment as hover, but persistent. Dropdown parents (Phases /
   Extra Mural / Auxiliary Services) only get the colour change, not
   the underline, matching their existing hover behaviour since the
   .nav-label itself never navigates anywhere. */
.nav-list a.active,
.nav-label.active {
  color: var(--color-maroon);
}

.nav-list a.active::before {
  width: 100%;
}

/* Dropdown panels - no min-width, so each panel shrinks to fit its
   own longest item (Phases/Extramural stay narrow; Auxiliary
   Services, with "Speech and Language Therapy", naturally stays
   wide) instead of every dropdown matching the widest one on the
   site. */
.dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  display: none;
  z-index: 50;
}

.has-dropdown:hover > .dropdown,
.has-dropdown.open > .dropdown {
  display: block;
}

/* Dropdowns positioned toward the right end of the bar (Extra Mural,
   Auxiliary Services) hang from their right edge instead of their
   left, so the panel can't push past the viewport edge and trigger
   a horizontal scrollbar. */
.dropdown-right {
  left: auto;
  right: 0;
}

.dropdown li a {
  padding: 0.6rem 1rem;
  white-space: nowrap;
}

/* Search item - icon toggles an inline search field below it */
.nav-search {
  display: flex;
  align-items: center;
}

.search-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 0.6rem;
  background: none;
  border: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.search-panel {
  position: absolute;
  top: 100%;
  right: 0;
  left: auto;
  display: none;
  align-items: center;
  gap: 0.4rem;
  min-width: 260px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
  padding: 0.6rem;
  z-index: 50;
}

.nav-search.open .search-panel {
  display: flex;
}

.search-panel input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--color-border);
  border-radius: 3px;
  font: inherit;
  font-size: 0.9rem;
  color: var(--color-text);
}

.search-panel button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  background: var(--color-maroon);
  color: var(--color-white);
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

.search-panel button[type="submit"]:hover,
.search-panel button[type="submit"]:focus-visible {
  background: var(--color-navy);
  outline: none;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================================
   Main content placeholder
   ========================================================= */

main {
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
  min-height: 40vh;
}

.page-section {
  /* Full-bleed breakout - the background spans the whole viewport
     regardless of main's max-width, while .page-section-inner below
     puts the text back in the same column main would have given it. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding: 3.5rem 0;
  /* Flat white for now - alternating tints (off-white / white / light
     maroon) were dropped once the page shrank to 3 sections; the
     --color-offwhite/--color-maroon-tint tokens above are left in
     place in case that treatment comes back after client discussion. */
  background-color: var(--color-white);
  /* Keeps the section heading clear of the sticky header when
     jumped to via a #anchor link. */
  scroll-margin-top: 110px;
}

.page-section-inner {
  /* Same max-width/centering/horizontal padding as main, so text
     lines up exactly where it would if the section weren't full-bleed. */
  max-width: var(--header-max-width);
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* Space above every section heading on standalone pages (About Us,
   Accommodations, Referrals and Applications, the Phase pages, etc.)
   - same breathing room as the padding between index.html's
   page-sections. Low specificity on purpose: .page-section h2 and
   .about-us-main h2 below both set their own margin-top and win the
   cascade, so this doesn't double up with index.html's section
   padding or get overridden before About Us adds its divider. */
main h2 {
  margin-top: 3.5rem;
}

.page-section h2,
.about-us-main h2 {
  margin-bottom: 1rem;
  padding-bottom: 0.75rem;
  /* Faint divider under each main-page section heading (Introduction,
     Mission and Vision, Values), and on About Us under The Learner /
     Admissions / The Team / Management - separates the page's two
     groups (learners, staff). Scoped to .page-section and
     .about-us-main so no other standalone page's h2 picks it up. */
  border-bottom: 1px solid var(--color-border);
}

/* index.html gets its top gap from .page-section's own padding, so
   its h2 stays flush with the top of that padding (no extra margin
   on top of it). About Us has no such section wrapper, so its h2
   needs the explicit top margin from the main h2 rule above. */
.page-section h2 {
  margin-top: 0;
}

.about-us-main h2 {
  margin-top: 3.5rem;
}

.placeholder-copy {
  color: #767676;
  font-style: italic;
}

.lang-block {
  /* Establishes a new block formatting context so this block's text
     shrinks to wrap beside a floated image sitting outside it (e.g.
     the Introduction section's paint-splash graphic, which precedes
     both the English and Afrikaans lang-blocks so the float spans
     across both) instead of ignoring it and running full-width. */
  display: flow-root;
}

/* Containment for the Introduction section's float specifically: the
   paint-splash image precedes both lang-blocks (so it can span them),
   but if it's taller than their combined text, flow-root here stops
   it bleeding down into the Mission and Vision section that follows. */
#introduction .page-section-inner {
  display: flow-root;
}

.lang-block + .lang-block {
  margin-top: 1.5rem;
}

.lang-block-float-img {
  float: right;
  width: 280px;
  height: auto;
  margin: 0 0 1rem 1.5rem;
}

.lang-label {
  margin: 0 0 0.4rem;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #767676;
}

/* Simple tabular data (e.g. Management) - thin borders, maroon
   accent under the header row to echo the brand underline used on
   links elsewhere. */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.95rem;
}

.data-table th,
.data-table td {
  padding: 0.75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--color-border);
}

.data-table th {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #767676;
  border-bottom: 2px solid var(--color-maroon);
}

/* Zebra striping for readability on longer tables like Management -
   reuses the off-white token already defined for alternating
   backgrounds elsewhere on the site. */
.data-table tbody tr:nth-child(even) {
  background-color: var(--color-offwhite);
}

.related-links {
  margin-top: 2rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--color-border);
  font-size: 0.9rem;
}

.related-links-label {
  color: #767676;
  margin-right: 0.4rem;
}

.related-links a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

/* A real element in the markup, not a ::after on the link - a
   pseudo-element attached to the <a> renders *inside* its box,
   which was inflating the link's width and stretching the
   underline out past the word to cover the pipe too. */
.link-separator {
  display: inline-block;
  margin: 0 0.5rem;
  /* var(--color-border) is a hairline gray meant for subtle divider
     lines - too faint to read as a standalone character. */
  color: #767676;
}

.search-results-list {
  list-style: none;
  margin: 1rem 0 0;
  padding: 0;
}

.search-results-list li {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--color-border);
}

.search-results-list a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.sitemap-list {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
}

.sitemap-list li {
  padding: 0.4rem 0;
}

.sitemap-list a {
  position: relative;
  display: inline-block;
  text-decoration: none;
}

.sitemap-list ul {
  list-style: none;
  margin: 0.25rem 0 0;
  padding-left: 1.25rem;
}

/* =========================================================
   Footer (external footer.html)
   ========================================================= */

/* Wraps the splash image and the footer so the footer can sit on
   top of (rather than below) the artwork. Solid navy fallback
   background: on tall/mobile footers the image can run out before
   the footer does, and once that happens the translucent footer
   background blends down to plain navy instead of showing a gap. */
.footer-wrap {
  position: relative;
  background-color: var(--color-navy);
  overflow: hidden;
}

/* Decorative paint-splash flourish. background_05.jpg is a taller
   1920x700 canvas (vs. the old 1920x400) specifically so there's
   enough image left to show through the footer below, not just
   above it. Positioned absolute so the footer can overlap it. */
.footer-splash {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  z-index: 0;
}

.site-footer {
  position: relative;
  z-index: 1;
  /* Reveals the top slice of the splash above the footer, same as
     the old layout. Percentage (not a fixed px/rem) so the reveal
     stays proportional to the splash's own rendered height, which
     also scales with width - keeps the two in sync at any viewport. */
  margin-top: 12%;
  /* rgba, not the `opacity` property - opacity would also fade the
     footer's text/links. This is --color-navy (#0a2240) at 85%
     alpha; keep in sync with --color-navy until the client supplies
     the official hex. Gradient (not a flat fill) so the top edge
     eases in from fully transparent - blends into the splash reveal
     above instead of cutting to a hard line - then settles to a
     flat 85% by 140px down, well before the footer-heading text,
     so body copy always sits on a fully legible backdrop. */
  background: linear-gradient(
    to bottom,
    rgba(10, 34, 64, 0) 0,
    rgba(10, 34, 64, 0.85) 140px,
    rgba(10, 34, 64, 0.85) 100%
  );
  /* Softer than pure white - full-white text on the dark navy read
     as too bright/heavy. Font-weight lightened to match. */
  color: rgba(255, 255, 255, 0.8);
  font-weight: 300;
  padding: 2rem 1.25rem;
}

.site-footer a {
  position: relative;
  display: inline-block;
  color: inherit;
  text-decoration: none;
}

/* Inline links within body copy (e.g. the About Us paragraphs, the
   Finances bullet list) - a single link buried in a sentence is easy
   to miss if it only reveals itself on hover (touch devices can't
   hover at all), so these get a permanently visible maroon underline
   instead of the animated hover-reveal used for nav/footer/list
   links below, which already sit in obviously-clickable contexts.
   Scoped to main so it covers both index.html's page-sections and
   every standalone page (About Us, Finances, Contact, etc.) - none
   of those wrap their content in .page-section. */
main p a,
main li a {
  color: var(--color-maroon);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
}

/* Same animated underline as the navbar, just thinner (1px vs 2px)
   for in-page/footer/sitemap links. */
.site-footer a::before,
.sitemap-list a::before,
.search-results-list a::before,
.related-links a::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background-color: var(--color-maroon);
  transition: width 0.25s ease-in-out;
}

.site-footer a:hover::before,
.site-footer a:focus-visible::before,
.sitemap-list a:hover::before,
.sitemap-list a:focus-visible::before,
.search-results-list a:hover::before,
.search-results-list a:focus-visible::before,
.related-links a:hover::before,
.related-links a:focus-visible::before {
  width: 100%;
}

.footer-inner {
  max-width: var(--header-max-width);
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 1.5rem;
  font-size: 0.85rem;
}

.footer-block {
  flex: 1 1 180px;
  line-height: 1.9;
}

.footer-heading {
  display: inline-block;
  margin-bottom: 0.3rem;
  /* <strong> defaults to browser-bold (~700) - dialed back so it
     doesn't shout against the softer body text above. */
  font-weight: 500;
  color: rgba(255, 255, 255, 0.95);
}

a.credit-link {
  /* Bumped to element+class specificity so this wins over the more
     general .site-footer a { display: inline-block } rule above. */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.5rem;
  font-size: 0.8rem;
}

.credit-logo {
  width: 32px;
  height: 32px;
  border-radius: 3px;
  flex-shrink: 0;
}

/* =========================================================
   Back to top button
   ========================================================= */

.back-to-top {
  position: fixed;
  right: 1.5rem;
  bottom: 1.5rem;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--color-maroon);
  color: var(--color-white);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
  z-index: 90;
}

.back-to-top.visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.back-to-top:hover,
.back-to-top:focus-visible {
  background-color: var(--color-navy);
  outline: none;
}

/* =========================================================
   Responsive - collapse nav below tablet width
   ========================================================= */

@media (max-width: 900px) {
  .header-inner {
    align-items: center;
    flex-wrap: wrap;
  }

  .nav-toggle {
    display: block;
  }

  /* Below this width .footer-inner stacks into 1-2 columns instead
     of a single row, so the footer gets much taller than it is on
     desktop. The splash's `height: auto` scales down with the
     narrower width too, so past this point the two heights part
     ways badly - the image shrinks to a sliver while the footer
     keeps growing. Switch to a fixed height + object-fit: cover so
     the splash keeps a reveal that's actually visible, and give it
     a fixed margin-top to match instead of the proportional 12%. */
  .footer-splash {
    height: 260px;
    object-fit: cover;
    object-position: center;
  }

  .site-footer {
    margin-top: 100px;
  }

  .main-nav {
    flex-basis: 100%;
    display: none;
  }

  .main-nav.open {
    display: block;
  }

  .nav-list {
    flex-direction: column;
    justify-content: flex-start;
  }

  .dropdown {
    position: static;
    border: none;
    box-shadow: none;
    padding-left: 1rem;
  }

  .search-panel {
    position: static;
    border: none;
    box-shadow: none;
    min-width: 0;
    margin-top: 0.25rem;
  }
}

/* =========================================================
   Responsive - float images below phone width
   ========================================================= */

@media (max-width: 600px) {
  /* At 280px wide, this float leaves almost no room for text to
     wrap beside it on a phone-width column - drop the float and
     center it above the text instead. */
  .lang-block-float-img {
    float: none;
    display: block;
    width: 200px;
    margin: 0 auto 1rem;
  }

  /* Paint splash decoration in the Who We Are section is dropped
     on mobile - it just adds clutter at phone width. */
  #introduction .lang-block-float-img {
    display: none;
  }

  /* Below 600px .footer-inner's flex-wrap stacks all 4 blocks into
     a single column, which makes the footer 900px+ tall - far
     taller than background_05.jpg can ever cover, no matter how
     the splash/gradient are sized. Forcing a 2-column grid here
     roughly halves that height, so the taller splash band below
     can realistically reach the whole footer instead of just the
     first block. */
  .footer-inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem 1rem;
  }

  /* A portrait crop of the splash was tried here and didn't read
     well against the stacked footer text at phone width - simplest
     fix is to drop the image on mobile entirely and fall back to a
     flat navy background instead of fighting the crop. */
  .footer-splash {
    display: none;
  }

  .footer-wrap {
    background-color: var(--color-navy);
  }

  .site-footer {
    margin-top: 0;
    background: var(--color-navy);
  }
}