/**
 * Custom header + footer overrides
 * -----------------------------------------------------------------------
 * Added as its own stylesheet (loaded after the compiled theme stylesheet
 * via functions.php) rather than hand-edited into style.css, because this
 * export only contains the compiled/minified build output - there's no
 * SCSS source or webpack pipeline present to rebuild it from. Everything
 * else in the theme is untouched.
 *
 * What this file does:
 * 1. Makes the header a real full-width bar that sits in normal document
 *    flow (sticky, not fixed-and-overlapping) so the rest of the page
 *    renders below it instead of underneath/behind it.
 * 2. Turns the existing hamburger-triggered nav drawer into a full-screen
 *    overlay menu at every screen width, matching the pattern used on the
 *    new calvaryschools.org site (tap Menu -> full-screen panel with
 *    simple stacked links), instead of a narrow 288px off-canvas sidebar
 *    that only appeared below 768px.
 * 3. Turns each footer column into a collapsible accordion section on
 *    mobile (tap the heading to expand), matching the new site's mobile
 *    footer - desktop keeps showing everything expanded, exactly as before.
 * -----------------------------------------------------------------------
 */

/* =========================================================================
   1. HEADER: full-width, in-flow bar (not a fixed corner box)
   ========================================================================= */

.site-header {
  /* position:sticky hit an unresolved browser repaint bug when logged into
     wp-admin: the computed layout was always provably correct (full width,
     right background, nothing overlapping - verified repeatedly via
     getComputedStyle/elementFromPoint) but the actual painted pixels
     sometimes stayed stuck on a stale, narrower pre-fix render, and
     nothing short of resizing the real browser viewport (e.g. opening
     devtools) forced a correct repaint - scroll nudges, transform/
     position toggles, and even fully detaching/reattaching the element
     from the DOM all failed to fix it. position:fixed doesn't have
     sticky's "recompute stuck-vs-static on every scroll" internal
     bookkeeping, so it sidesteps that code path entirely instead of
     working around it. Since fixed takes the header out of flow, #main
     below now carries the matching margin-top to reserve its space. */
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  /* Higher than the full-screen menu overlay's z-index (999, below) so the
     hamburger button - the same button that opens it - stays visible and
     clickable on top of the overlay to close it again. The original theme
     never needed this because its overlay never covered the header itself. */
  z-index: 1000 !important;
}

/* The old layout was a CSS grid with a fixed 292px/288px column plan meant
   for a corner logo + off-canvas drawer. Reset it to a plain full-width
   flex bar: logo/hamburger on the left, everything else lives in the
   full-screen overlay (see section 2) rather than inline. */
.site-header-main {
  /* The original theme never fills this bar - .site-header is always
     transparent and only the small logo box (.site-header-main-burger-brand)
     had its own navy background, because the whole thing was designed as a
     floating corner badge over a hero image, not a real full-width bar.
     Now that it spans the page, the row needs its own solid fill or
     everything right of the logo box reads as blank/missing. */
  background: #041e42 !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08);
  display: flex !important;
  /* The compiled theme sets flex-direction:column on this exact
     selector (its very first, un-media-queried rule) and nothing here
     ever overrode it - display/align-items/justify-content were, but
     not this. In column mode the axes swap: align-items:center centers
     things HORIZONTALLY (that's the cross-axis when stacking is
     vertical), which is why the logo read as centered instead of left-
     aligned, and why the schools nav kept landing BELOW it by default
     (that's just normal top-to-bottom column stacking, not a wrap
     decision) no matter what margin/wrap tweaks were tried on the nav
     itself - the real fix was always this one property, one level up. */
  flex-direction: row !important;
  align-items: center !important;
  /* not space-between: .modal-search (the hidden search-overlay markup)
     is a sibling that sits BEFORE .site-header-main-burger-brand in the
     DOM and still counts as a flex item even at its own collapsed 0-width
     - space-between was reading it as "the first item" and shoving the
     actual logo/hamburger (the second item) all the way to the right
     edge instead of the left. flex-start pins the logo where it belongs
     regardless of that invisible sibling.
     !important is required here: the compiled theme stylesheet declares
     its own justify-content:space-between !important on this same
     selector, so a plain (non-important) override here is silently
     ignored - confirmed live, computed style stayed "space-between"
     without this. */
  justify-content: flex-start !important;
  position: relative !important;
  width: 100% !important;
  grid-template-columns: unset;
  grid-template-rows: unset;
  min-height: 92px;
  padding-left: clamp(16px, 4vw, 48px);
  padding-right: clamp(16px, 4vw, 48px);
  pointer-events: auto !important;
}
@media (min-width: 768px) {
  .site-header-main {
    min-height: 108px;
  }
}

/* Belt-and-suspenders for the lazy-load fix in custom-header-footer.js:
   even if that JS hasn't run yet or the "lazyload" class briefly reappears,
   this pins the logo's real size directly (rather than relying on Smush's
   --smush-placeholder-* variables, which are set for the OLD crest image's
   900x1581 aspect ratio) so it can never render at the wrong size. Also
   ~15% smaller than before per request. */
.site-header .site-brand img {
  width: auto !important;
  height: 51px !important;
  max-width: none !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  padding: 0 !important;
}
@media (min-width: 768px) {
  .site-header .site-brand img {
    height: 68px !important;
  }
  /* At this height the wordmark lockup (a wide two-line word, unlike the
     original tall narrow crest this box was sized for) renders ~372px
     wide plus its own 34px margin-left - real measured right edge is
     ~539px from the header's left edge - but .site-brand itself is
     still capped at the compiled stylesheet's max-width:320px, so the
     logo has always overflowed past its own container by ~110px. Only
     noticeable now that the schools nav sits in that overflow's path.
     Widening the box to actually fit the logo (480px has ~25px to
     spare) fixes that at the source, instead of just working around
     wherever the overflow happens to reach next. */
  .site-header .site-brand {
    max-width: 480px !important;
  }
}

.site-header-main-burger-brand {
  position: relative !important;
  /* The compiled stylesheet has its own dormant admin-bar rule on this
     exact element - .admin-bar .site-header-main-burger-brand{top:32px}
     (46px on mobile) - a relative-position offset that never did anything
     because this element's original position value made "top" a no-op.
     Giving it position:relative (needed above for stacking) activated
     that rule for the first time, shoving the logo/hamburger down an
     extra 32px inside a header that was already correctly positioned by
     .site-header's own (separate, correct) admin-bar offset - stacking
     the two and pushing the burger-brand box out past the header's own
     bottom edge. */
  top: auto !important;
  display: flex !important;
  /* the compiled stylesheet also sets flex-direction:row-reverse and
     justify-content:space-between on this exact selector (its mobile
     layout) - overriding those explicitly too, not just .site-header-main
     above, so the hamburger button and logo inside this box stay in
     source order (button, then logo) and sit together on the left
     instead of being reversed/spread apart. */
  flex-direction: row !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 16px;
  min-width: 0 !important;
  min-height: 0 !important;
  /* min-width:0 lets this box shrink below its content's natural size
     when flex-wrap needs the room - but the logo image inside doesn't
     actually get any smaller when that happens (it's sized by a fixed
     height, width:auto, not by its container), so the box would shrink
     while the image kept right on rendering at full size past it - the
     same overflow-past-its-box bug as the .site-brand fix above, just
     re-created one level up by flexbox this time. flex-shrink:0 stops
     that: this box only ever reports its real content width, so
     .site-header-main's flex-wrap (below) makes an accurate call about
     whether the schools nav still fits beside it. */
  flex-shrink: 0 !important;
  /* Must be a real number greater than the overlay's z-index (999 below),
     not "auto": the toggle button inside is position:static, and a
     static/z-index:auto element always paints BELOW a positioned sibling
     that has an explicit z-index, no matter what z-index any ancestor
     (like .site-header) has. That's what made the hamburger/X button
     unclickable once the overlay opened, even after .site-header itself
     was raised above it. */
  z-index: 1001 !important;
}

/* The theme's compiled Font Awesome CSS only ships icon-content rules for
   glyphs referenced in the theme's own markup - fa-times is only ever
   added dynamically by the toggle script (never appears in the static
   HTML), so it was left out of that build entirely and renders as a
   blank/invisible glyph. Draw a plain X ourselves instead of depending on
   that icon subset, so there's always something visible to close with. */
.site-navigation-toggle .fa-times::before {
  content: "\2715" !important;
  font-family: initial !important;
  font-weight: 400 !important;
}

/* .site-header is position:fixed (see above) and so is fully out of
   normal flow - #main needs its own margin-top to reserve the space the
   header actually occupies, matching its min-height at each breakpoint
   (92px / 108px) plus the admin bar's height when logged in (32px desktop
   / 46px mobile, same values used for .site-header-main-navigation's own
   top offset below). */
#main {
  margin-top: 92px !important;
}
@media (min-width: 768px) {
  #main {
    margin-top: 108px !important;
  }
}
body.admin-bar #main {
  margin-top: calc(92px + 32px) !important;
}
@media (min-width: 768px) {
  body.admin-bar #main {
    margin-top: calc(108px + 32px) !important;
  }
}
@media (max-width: 782px) {
  body.admin-bar #main {
    margin-top: calc(92px + 46px) !important;
  }
}

/* Some hero blocks (confirmed on the home template) embed a second, entirely
   separate copy of the header markup - .site-header-main, complete with its
   own logo/hamburger/menu - as the first child inside the hero's own flex
   row, alongside the hero's image/video. It was never noticed before because
   the real header was position:fixed and sat exactly on top of it (both at
   the same y:0), fully hiding this duplicate underneath. Now that the real
   header is sticky and reserves its own space (so page content flows below
   it instead of hiding behind it, as requested), the real header no longer
   overlaps this duplicate, revealing it lower on the page as a second navy
   stripe and squeezing the hero's image/video sideways to make room for it
   in that flex row. It's redundant - the real sticky header already handles
   navigation everywhere - so hide it outright rather than trying to lay it
   out; that also stops it from reserving space in the hero's row at all. */
.wp-block-hero > .site-header-main {
  display: none !important;
}

/* The home hero block's own stylesheet (css/blocks/hero/hero.css) also
   hardcodes left:292px on its background image/video, baking in the same
   assumption that a permanent 292px-wide header column always sits to its
   left. With that column gone, this left it with a 292px blank gap and the
   image/video squeezed into the remaining width. */
.wp-block-hero .banner-image,
.wp-block-hero .banner-image:not(.v-bg) + .banner-image-overlay {
  left: 0 !important;
}

/* The hero block also carries its own separate watermark logo
   (logo_hero field, Theme Options) directly beneath the header. Now that
   the header itself always shows the same wordmark, that hero copy just
   duplicates it immediately below - the same image appearing twice,
   stacked, reads as a glitch rather than two intentional elements. */
.hero-brand {
  display: none !important;
}

/* When logged into wp-admin, WordPress adds its own admin bar fixed to the
   very top of the page (32px tall on desktop, 46px at mobile widths) with
   a z-index far higher than anything else on the page. Our sticky header
   also sits at top:0, so the admin bar was covering its top ~32px,
   cropping the logo/hamburger box and making everything inside it look
   pushed down into the remaining space - only visible when logged in,
   never for a logged-out visitor or in incognito. */
body.admin-bar .site-header {
  top: 32px !important;
}
@media (max-width: 782px) {
  body.admin-bar .site-header {
    top: 46px !important;
  }
}

/* =========================================================================
   2. MENU: same hamburger trigger, now opens a full-screen overlay
   ========================================================================= */

.site-header-main-navigation {
  position: fixed !important;
  /* Starts exactly where the header ends (92px base / 108px at 768px+,
     matching .site-header-main's own min-height below) instead of
     covering the full viewport with a large top-padding on the wrapper
     to visually "clear" the header - that padding had to guess at the
     right number and either left a gap or, combined with the admin-bar
     offset below, a much bigger one than intended. Tying it directly to
     the header's real height means there's never a mismatch. */
  top: 92px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  grid-area: unset !important;
  width: 100% !important;
  transform: none !important;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.25s ease,
    visibility 0s linear 0.25s;
  overflow-y: auto;
  background: #041e42;
  z-index: 999;
}
@media (min-width: 768px) {
  .site-header-main-navigation {
    top: 108px !important;
  }
}
/* Same admin-bar accounting as .site-header above - the overlay is its
   own fixed element and doesn't inherit the header's offset. */
body.admin-bar .site-header-main-navigation {
  top: calc(92px + 32px) !important;
}
@media (min-width: 768px) {
  body.admin-bar .site-header-main-navigation {
    top: calc(108px + 32px) !important;
  }
}
@media (max-width: 782px) {
  body.admin-bar .site-header-main-navigation {
    top: calc(92px + 46px) !important;
  }
}

/* The legacy toggle script still runs its own jQuery slideToggle() on this
   element below 768px, which sets inline display/height while animating.
   !important pins the values our overlay actually needs so it wins
   regardless of what that leftover animation is mid-setting. */
.site-header-main-navigation,
.site-header-main.active .site-header-main-navigation {
  display: block !important;
}

.site-header-main.active .site-header-main-navigation {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.25s ease;
}

/* Prevents the page behind the overlay from scrolling while it's open -
   the existing toggle script already adds/removes this body class. */
body.menu-active {
  overflow: hidden;
}

.site-header-main-navigation-background,
.site-header-main-submenu-flyout {
  display: none !important;
}

.site-header-main-navigation-wrapper {
  /* Just breathing room now - the overlay itself already starts right
     below the header (see .site-header-main-navigation's top offset
     above), so this no longer needs to be a large clearance value. */
  max-width: 768px;
  margin: 0 auto;
  padding: 16px 24px 40px;
}
@media (min-width: 1024px) {
  .site-header-main-navigation-wrapper {
    padding-left: 32px;
    padding-right: 32px;
  }
}

/* The compiled stylesheet's off-canvas layout hardcoded this <nav> to the
   old 292px drawer width - without this it stays pinned narrow even though
   its parent wrapper above is a full 768px, which is what made the overlay
   look like a slim leftover drop-down instead of a full menu. */
.site-header-main-menu,
.site-navigation-quicklinks {
  width: 100% !important;
  max-width: 100% !important;
  /* The compiled stylesheet also puts a large top padding (111px/144px)
     directly on this element, sized for the old off-canvas drawer to
     clear its own corner logo - stacks on top of the wrapper's own
     padding above and was the real source of the big empty gap at the
     top of the menu. */
  padding: 0 !important;
  background: transparent !important;
}

.site-header-main-menu .main-navigation {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  padding-left: 0;
}
.site-header-main-menu .main-navigation > li {
  /* The compiled stylesheet sets text-align:center directly on this
     element (.main-navigation>.menu-item), not just on the parent list -
     a directly-set value always wins over an inherited one regardless of
     specificity, so overriding text-align on the UL alone had no effect;
     it has to be overridden here, on the LI itself. */
  text-align: left;
  position: relative;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.site-header-main-menu .main-navigation > li > a {
  display: block;
  padding: 8px 50px 8px 0;
  font-size: 1.9rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: #fff;
  transition: color 0.15s ease;
}
@media (min-width: 1024px) {
  .site-header-main-menu .main-navigation > li > a {
    font-size: 2.5rem;
  }
}
.site-header-main-menu .main-navigation > li > a:hover {
  color: #e3bf65;
}
/* The compiled stylesheet gives every top-level link its own short 90px
   underline accent bar (meant as a hover/active indicator) sitting right
   at the bottom edge of the link, on top of the full-width divider line
   this design already uses for the same purpose - together they read as
   an unintentional double line under each item. */
.site-header-main-menu .main-navigation > li > a::before {
  content: none !important;
}

/* The logo stays pointless clutter once the full-screen menu is open (the
   header itself stays visible only so the close button keeps working) -
   the reference design's open menu doesn't show a logo either. */
.site-header-main.active .site-brand {
  display: none !important;
}

/* "+" accordion toggle for items with a sub-menu, added by
   custom-header-footer.js (only the theme's compiled CSS/markup ships
   here - there's no dedicated toggle button in the source, and the
   legacy jQuery instead binds to the whole <li>, which would fire
   alongside the link's own navigation). A separate button keeps
   expand/collapse and "go to that page" as two distinct, reliable clicks,
   matching the reference site's circled-plus pattern. */
.ccs-submenu-toggle {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  font-size: 1.05rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ccs-submenu-toggle:hover {
  border-color: #e3bf65;
  color: #e3bf65;
}
/* Swapping the glyph itself (+ / -) via JS instead of rotating the + into
   an X, so it reads as an explicit expand/collapse indicator. */

/* The compiled stylesheet draws its OWN Font Awesome chevron on an
   ::after pseudo-element of these same parent links (the original
   theme's own accordion indicator, from before this toggle button
   existed) - it was never removed, so it sat rendered directly on top
   of the "+"/"-" circle the whole time, reading as one squashed-
   together glyph instead of a clean plus sign. */
.site-header-main-menu .main-navigation > li.menu-item-has-children > a::after {
  content: none !important;
  display: none !important;
}

/* Same leftover icon system, one level down: the compiled stylesheet
   reveals a Font Awesome arrow on ::before when hovering/focusing an
   actual sub-menu link (.sub-menu a:hover:before{opacity:1}), sliding in
   from the left - built for the old off-canvas sidebar's narrower text
   column, where it had room to sit in its own gutter. In this redesign's
   wider, full-screen overlay layout that same icon lands directly on
   top of the link's own text instead (the overlapping ">" on hover). */
.site-header-main-menu .main-navigation .sub-menu a::before {
  content: none !important;
  display: none !important;
}

.site-header-main-menu .main-navigation .sub-menu {
  /* The compiled stylesheet builds this as an absolutely-positioned
     flyout panel that appears to the RIGHT of the parent item
     (left:calc(100% + 10px), clip-path reveal) for the old off-canvas
     design's hover/click flyout - without resetting position/left/width/
     clip-path it renders off-screen to the right instead of inline
     underneath its parent link, regardless of max-height. */
  position: static !important;
  top: auto !important;
  left: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  clip-path: none !important;
  background: transparent !important;
  list-style: none;
  padding-left: 0;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
li.ccs-submenu-open > .sub-menu {
  /* Needs !important: the collapsed base rule above is the more specific
     selector (three classes vs. this rule's tag+two classes), so without
     it the "open" state was silently losing to "collapsed" and nothing
     ever visibly expanded despite the toggle class being applied. */
  max-height: 600px !important;
  /* The compiled stylesheet has its own generic, un-scoped
     .sub-menu{display:none} rule (built for a different flyout/hover
     mechanism entirely) that also happens to match this .sub-menu -
     animating max-height alone never showed anything, since the element
     stayed display:none regardless the whole time. */
  display: block !important;
}
.site-header-main-menu .main-navigation .sub-menu > li > a {
  display: block;
  font-size: 1.4rem;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  color: rgba(255, 255, 255, 0.7);
  padding: 12px 0 12px 4px;
}
@media (min-width: 1024px) {
  .site-header-main-menu .main-navigation .sub-menu > li > a {
    font-size: 1.6rem;
  }
}
.site-header-main-menu .main-navigation .sub-menu > li > a:hover {
  color: #e3bf65;
}

/* Apply Now CTA - reuses the real "Apply" link/URL that already exists in
   the header's own icon buttons (partials/layout/header/buttons.php,
   /admissions/apply/), cloned in here by custom-header-footer.js rather
   than a hardcoded href, so it always points at the real apply page. */
.ccs-menu-apply {
  display: block;
  margin: 16px 0 0;
  padding: 14px 24px;
  border: 1px solid #ad841f;
  color: #e3bf65;
  /* The theme sets html{font-size:62.5%} (1rem=10px), so this was
     rendering at a real 10px - barely legible next to the 36px "HOME"/
     "ABOUT" menu items above it. */
  font-size: 2rem; /* 20px */
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.ccs-menu-apply:hover {
  background: #ad841f;
  color: #041e42;
}

/* Quick links: the theme ships this as a click-to-reveal accordion with
   its own "+"-suffixed toggle button, but the reference layout just shows
   it as a small static label over a plain always-visible row of links, so
   the toggle button is restyled as an inert label and the list is forced
   open regardless of its own active state. */
.site-navigation-quicklinks {
  margin-top: 10px;
  text-align: center;
}
.site-navigation-quicklinks .site-navigation-quicklinks-toggle {
  pointer-events: none;
  margin-bottom: 12px;
  padding: 0;
  font-size: 1.1rem; /* 11px - real px, not the 7.5px 0.75rem read as on paper (see the 62.5% root note below) */
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.4);
}
.site-navigation-quicklinks .site-navigation-quicklinks-toggle-icon {
  display: none;
}
.site-navigation-quicklinks .quick-links {
  /* The compiled stylesheet builds this as a separate absolutely-positioned
     288px-wide flyout panel (left:292px, background:#27446d), not an
     inline list - without resetting position/left/width/background it
     stays pinned to that narrow flyout box regardless of display:flex. */
  position: static !important;
  left: auto !important;
  top: auto !important;
  display: flex !important;
  /* the compiled stylesheet sets flex-direction:column here (for the old
     stacked-flyout layout) - without overriding it too, align-items'
     default "stretch" behavior on a column flex container is what forced
     every item to full container width, one per row, despite flex-basis
     and width both being reset to auto above. */
  flex-direction: row !important;
  flex-wrap: wrap;
  align-items: flex-start !important;
  justify-content: center !important;
  width: 100% !important;
  background: transparent !important;
  gap: 12px 28px;
  list-style: none;
  padding: 0 !important;
  margin: 0;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.site-navigation-quicklinks .quick-links > li {
  /* original off-canvas flyout stacked these as full-width rows -
     auto-width lets them sit side by side and wrap like the reference. */
  flex: 0 0 auto !important;
  width: auto !important;
  text-align: left !important;
}
.site-navigation-quicklinks .quick-links > li > a {
  display: inline-block;
  width: auto !important;
  /* The theme's html{font-size:62.5%} makes 1rem a real 10px, not 16px -
     1.15rem was rendering at a barely-readable 11.5px next to the
     sub-menu links (Admissions Process etc., 18px) right above it. */
  font-size: 1.7rem; /* 17px */
  font-weight: 400;
  color: rgba(255, 255, 255, 0.6);
  background: transparent !important;
  border-bottom: none;
  padding: 0 !important;
}
.site-navigation-quicklinks .quick-links > li > a::before {
  content: none !important;
}
.site-navigation-quicklinks .quick-links > li > a:hover {
  color: #e3bf65;
}
.site-navigation-quicklinks .quick-links .sub-menu {
  display: none;
}

.site-header-social {
  margin-top: 32px;
  width: 100% !important;
  max-width: 100% !important;
}

/* This search toggle is real functionality (it opens the site search
   form), not decoration - hiding the whole wrapper to fix a spacing gap
   also silently removed people's only way to search from the menu.
   The gap was specifically .site-search's own padding-bottom:40px
   (built for the old off-canvas grid layout, where it needed room
   below it that this full-screen overlay doesn't); the button itself
   (.ccs-header-search-toggle below) is relocated out of this wrapper
   entirely by custom-header-footer.js, so what's left behind is just
   the (position:absolute, already out of flow) search form, and this
   zeroes out what would otherwise be 40px of empty padding around it. */
.site-header-main-navigation .site-search {
  padding-bottom: 0 !important;
}

/* relocateSearchToggle() (custom-header-footer.js) moves the real
   search button here, into the header row itself, instead of leaving
   it buried at the bottom of the menu list a visitor has to open and
   scroll through first. Hidden by default and shown only while the
   menu is open, mirroring the hamburger/X on the opposite side - the
   schools nav already occupies (and vacates, see section 3) this same
   spot the rest of the time, so this never competes with it for space. */
.ccs-header-search-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.8rem; /* 18px */
  cursor: pointer;
}
.site-header-main.active .ccs-header-search-toggle {
  display: flex;
  /* The compiled stylesheet's own .site-search-toggle{margin:0 auto}
     (built to center it under the old layout) sets BOTH left and right
     margins to auto - overriding only margin-left here left its
     margin-right:auto still in effect, and auto margins on both sides
     is the standard flexbox centering trick, so it centered instead of
     sitting flush right like the schools nav toggle it's replacing.
     Zeroing margin-right explicitly closes that off. */
  margin-left: auto;
  margin-right: 0;
}

/* Clicking this toggle doesn't open .site-search-form at all - the
   theme's own all.js binds it to .modal-search instead (a separate,
   older popup search element, .modal-search{grid-area:1/2/3/4;...}
   only works when its parent is an actual CSS grid, sized to a real
   box by that grid's own columns/rows. .site-header-main has been
   flex, not grid, since section 1 above - grid-area is inert there, so
   at >=768px .modal-search never got a real width or height from
   anywhere and collapsed to 0, rendering wherever its remaining
   absolutely-positioned content happened to land instead of as an
   actual search bar. (Below 768px a separate rule gives it an explicit
   width:100%, which is why this never showed up at narrow widths.)
   Taking it out of flow entirely with position:fixed sidesteps needing
   a working grid at all, matching how .site-header-main-navigation
   (section 2) already handles the same kind of full-viewport overlay. */
.modal-search {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100vh !important;
  /* Its own z-index:3 is a leftover from the original design too - real
     once, but only relative to siblings that no longer apply here. The
     full-screen menu overlay (section 2) sits at z-index:999 in this
     same stacking context, so without a z-index this size covered
     everything else the whole time, painted correctly but invisible
     underneath it. */
  z-index: 1002 !important;
}

/* =========================================================================
   3. OUR SCHOOLS NAV: inline in the header row, links to each school level
   ========================================================================= */

/* The compiled theme CSS gives .site-header-main width:100% with
   box-sizing:content-box, so its own left/right padding (48px total)
   has always made it render slightly wider than the viewport - invisible
   before since nothing sat flush against that far edge. */
.site-header-main {
  box-sizing: border-box;
  /* The logo lockup's real rendered width varies with viewport (see the
     .site-brand fix above) and can legitimately leave no room at all
     for anything beside it (a phone-width viewport can be narrower than
     the logo itself). Rather than pin this nav to a fixed spot that
     either overlaps the logo or requires guessing a safe-enough
     breakpoint, let it be a normal flex item that wraps to its own full
     row below the logo whenever it doesn't fit - guaranteed never to
     overlap, at any width, without per-breakpoint arithmetic. */
  flex-wrap: wrap;
}

/* A plain flex item (like .site-header-main-burger-brand next to it) -
   margin-left:auto pushes it to the end of whichever line it's on,
   align-items:center on the parent centers it vertically, and
   flex-wrap:wrap above drops it to its own line below the logo/
   hamburger the moment it no longer fits alongside them. */
.ccs-schools-nav {
  margin-left: auto;
  display: flex;
  align-items: center;
}
/* The full-screen main menu overlay (section 2) sits on top of this
   same header row rather than replacing it, so the schools nav/toggle
   stayed visible - and clickable-looking - behind/alongside it the
   whole time the menu was open, even though opening the schools panel
   in that state made no sense (and its own dropdown, itself un-styled
   for sitting on top of the full-screen menu, didn't do anything
   useful there anyway). Hiding it while the main menu is open removes
   that dead, confusing control instead of leaving it visible. */
.site-header-main.active .ccs-schools-nav {
  display: none !important;
}

/* Desktop (>=1280px): the four links show directly, inline, no toggle -
   comfortably clear of the logo now that .site-brand's box actually
   fits it (see the fix above), with margin to spare. */
.ccs-schools-nav-list {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}
.ccs-schools-nav-list li + li {
  margin-left: 24px;
  padding-left: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.ccs-schools-nav-list a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 8px;
  text-decoration: none;
}
/* The theme sets html{font-size:62.5%} (a common trick so 1rem=10px),
   so every rem value here has actually been rendering at 62.5% of what
   it looks like on paper - "1.6rem" is really just 16px, not 25.6px.
   That's why this kept reading as too small even after bumping it once
   already. Sizes below are picked in real px (divided by 10 for the
   rem value) instead of assuming a 16px root. */
.ccs-schools-nav-label {
  font-size: 1.2rem; /* 12px */
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgba(255, 255, 255, 0.6);
}
.ccs-schools-nav-name {
  font-size: 2rem; /* 20px */
  font-weight: 700;
  color: #fff;
  padding-bottom: 4px;
  border-bottom: 2px solid transparent;
}
.ccs-schools-nav-list a.ccs-schools-nav-active .ccs-schools-nav-name {
  border-bottom-color: #ad841f;
}
.ccs-schools-nav-toggle {
  display: none;
}

/* Below 1280px: not enough guaranteed room for four labeled links
   beside the logo/hamburger, so this collapses to a compact "Schools"
   toggle that opens an overlay panel with the same links as full-width
   rows. The panel floats over the page content (like the full-screen
   menu already does) instead of pushing it down, so it never needs to
   be accounted for in the header-height offset that positions #main. */
@media (max-width: 1279.98px) {
  .ccs-schools-nav-list {
    display: none;
    position: fixed;
    left: 0;
    right: 0;
    /* top is set inline by JS to the header's real height when opened */
    flex-direction: column;
    align-items: stretch;
    background: #041e42;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 8px 16px rgba(4, 30, 66, 0.25);
    z-index: 997; /* below the header (1000) and menu overlay (999) */
    padding: 4px 0;
  }
  .ccs-schools-nav-open .ccs-schools-nav-list {
    display: flex;
  }
  .ccs-schools-nav-list li + li {
    margin-left: 0;
    padding-left: 0;
    border-left: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
  }
  .ccs-schools-nav-list a {
    flex-direction: row;
    align-items: baseline;
    gap: 16px;
    padding: 18px 24px;
  }
  .ccs-schools-nav-label {
    flex: 0 0 90px;
  }
  .ccs-schools-nav-name {
    font-size: 2.2rem; /* 22px */
  }
  /* Plain text + caret, no pill/border chrome - "Schools" with a visible
     label fits comfortably beside the logo everywhere in this
     breakpoint range except its own narrowest end (see the label-hiding
     override below), styled the same bare way as the icon-only version
     collapses to. */
  .ccs-schools-nav-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 4px;
    border: none;
    background: transparent;
    color: #fff;
    font-size: 1.6rem; /* 16px */
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
  }
  /* Plain white caret, drawn from two borders rather than a font glyph
     (crisp at any size, no font-rendering quirks, no gold, no circle).
     Points down while closed - the usual "expands downward" cue - and
     flips to point up while the panel's open. */
  .ccs-schools-nav-chevron {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-top: -4px;
    font-size: 0; /* the span's "▾" text content is aria-hidden and
                     purely decorative - the shape is drawn from the
                     borders below instead, so the glyph itself needs
                     to stay invisible rather than rendering underneath */
    border-right: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
  }
  .ccs-schools-nav-open .ccs-schools-nav-chevron {
    transform: rotate(-135deg);
  }
}

/* Below 680px the mobile-size logo (still ~279px wide - it doesn't
   shrink further than this) leaves too little room beside the
   "Schools" label without the two colliding or wrapping to their own
   row. Hiding just the label and keeping the same bare caret needs far
   less of that shrinking gap, so the toggle stays right where it
   belongs, next to the logo, at widths the full label genuinely can't
   fit at. */
@media (max-width: 679.98px) {
  .ccs-schools-nav-toggle {
    width: 36px;
    height: 36px;
    padding: 0;
    justify-content: center;
    gap: 0;
  }
  .ccs-schools-nav-toggle-label {
    display: none;
  }
}

/* =========================================================================
   4. FOOTER: collapsible accordion columns on mobile
   ========================================================================= */

.footer-accordion-icon {
  display: none;
}

@media (max-width: 767.98px) {
  .footer-accordion-toggle {
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .footer-accordion-icon {
    display: inline-block;
    flex-shrink: 0;
    transition: transform 0.2s ease;
  }
  .footer-accordion-toggle[aria-expanded="true"] .footer-accordion-icon {
    transform: rotate(180deg);
  }
  .footer-accordion-content {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
  }
  .footer-accordion-item.is-open .footer-accordion-content {
    max-height: 800px; /* generous cap - real content is short text/links */
  }
}

/* =========================================================================
   5. SITEWIDE CTAS: adapt to however many buttons are actually configured
   ========================================================================= */

/* Each button is marked up as "col-md-5 col-sm-10" - a fixed Bootstrap
   grid share sized for exactly two buttons per row (2 x 5 = 10 of 12
   columns). That's a real theme option (sitewide_ctas) admins can add
   any number of rows to - adding a 3rd button doesn't resize the other
   two, it just overflows the row's 12-column budget, wrapping the extra
   button (and, depending on width, any of the others) onto its own line
   by itself. Sizing each button to its own content instead of a fixed
   column share lets however many are configured sit on one line
   whenever they fit, wrapping as a centered group only when they don't -
   correct for 2, 3, or any other count without needing to know how many
   there'll be. */
/* Bootstrap's .container caps at fixed steps (720px, 960px, 1140px...)
   that only change at its own breakpoints, regardless of how much
   visibly-empty page background surrounds it - the row can legitimately
   run out of room and wrap while the page still looks wide open, since
   that empty space is outside the container, not available to it. Sizing
   this specific container to the viewport (minus its own gutter padding,
   left untouched) instead of Bootstrap's stepped widths means the row
   actually gets to use the space that's visibly there. */
.cta-links .container {
  max-width: 100%;
}
.cta-links .row {
  flex-wrap: wrap;
  justify-content: center;
  gap: 16px 24px;
}
.cta-links-button-container {
  flex: 0 1 auto;
  width: auto;
  max-width: 100%;
}

/* The compiled stylesheet alternates gold/navy by :nth-child(even) - a
   two-tone look that only makes sense for exactly two buttons. With a
   3rd (or any odd count) added, that alternation just falls wherever it
   falls rather than marking anything specific - here landing on "Apply
   Now" by coincidence of its position, not because it's meant to stand
   out. It also reads as a mismatch against the site's own floating
   quick-link buttons (Inquire/Visit/Apply/Give), which are all gold.
   Forcing every CTA button back to the same gold keeps them consistent
   with each other and with that sidebar, regardless of how many there
   are or what order they're in. */
.cta-links-button-container:nth-child(even) .cta-links-button {
  background-color: #ad841f;
  background-image: linear-gradient(to right, #ad841f, #ad841f);
  border-color: #ad841f;
}
.cta-links-button-container:nth-child(even) .cta-links-button:hover,
.cta-links-button-container:nth-child(even) .cta-links-button:focus {
  background-color: #9c7828;
  background-image: linear-gradient(to right, #9c7828, #9c7828);
  border-color: #9c7828;
}

/* =========================================================================
   6. PHONE-WIDTH LOGO: shrink it instead of stacking the schools toggle
   ========================================================================= */

/* Below 480px the schools-nav toggle was dropping to its own row under
   the logo (see section 3) because the mobile logo - fixed at 51px
   tall, ~279px wide, the widest it can be while still fitting alongside
   the hamburger - already leaves no room beside it for anything else on
   a phone-width screen. Per request, shrinking the logo further here
   instead keeps the toggle on the same line as the logo at true phone
   widths, rather than ever falling back to a second row. */
@media (max-width: 479.98px) {
  .site-header .site-brand img {
    height: 38px !important;
  }
}