/* Header & navigation. Blocks: top-nav, site-header, primary-nav, action-nav.
   Block roots use BEM. The theme strips menu-item classes off <li> (see
   my_css_attributes_filter), so menu internals are targeted structurally under
   the block roots; the generated .sub-menu class on dropdowns is the exception. */

/* Block: top-nav */
.top-nav {
  background-color: var(--acu-sage-purple);
  color: var(--acu-white);
  font-family: var(--font-serif);
}

.top-nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 2.25rem;
  padding: var(--space-xs) var(--space-xl);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
}

.top-nav__list {
  display: flex;
  align-items: center;
  gap: 2.25rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.top-nav__list a,
.top-nav__search {
  color: var(--acu-white);
  text-decoration: none;
}

.top-nav__list a:hover,
.top-nav__list a:focus-visible,
.top-nav__search:hover,
.top-nav__search:focus-visible {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

.top-nav__search {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font: inherit;
  color: inherit;
}

.top-nav__search svg {
  width: var(--text-md);
  height: var(--text-md);
}

/* Block: site-header */
.site-header {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
  padding: var(--space-sm) var(--space-xl);
  background-color: var(--acu-casual-cream);
  color: var(--acu-color-primary-dark);
}

/* On desktop the nav wrapper and its scroll region are transparent: their
   children (primary-nav, action-nav) flow into the site-header flex row exactly
   as before. They only become real boxes (the mobile drawer) below the lg
   breakpoint. */
.site-header__nav,
.site-header__scroll {
  display: contents;
}

/* Drawer-only chrome (the mobile inline search box). Hidden on desktop;
   revealed inside the mobile overlay. */
.site-header__search {
  display: none;
}

/* Hamburger toggle: hidden on desktop, revealed in the mobile media query. */
.site-header__toggle {
  display: none;
  position: relative;
  margin-left: auto;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-md);
  background: transparent;
  color: var(--acu-color-primary-dark);
  cursor: pointer;
}

.site-header__toggle:hover,
.site-header__toggle:focus-visible {
  color: var(--acu-color-primary);
}

/* Three-bar icon drawn from the middle bar plus its two ::before/::after bars. */
.site-header__toggle-icon,
.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  position: absolute;
  left: 50%;
  width: 1.5rem;
  height: 2px;
  background-color: currentColor;
  border-radius: var(--radius-full);
  transition:
    transform var(--motion-fast) var(--ease-out),
    opacity var(--motion-fast) var(--ease-out);
}

.site-header__toggle-icon {
  top: 50%;
  transform: translate(-50%, -50%);
}

.site-header__toggle-icon::before,
.site-header__toggle-icon::after {
  content: "";
  top: 0;
}

.site-header__toggle-icon::before {
  transform: translate(-50%, -0.5rem);
}

.site-header__toggle-icon::after {
  transform: translate(-50%, 0.5rem);
}

/* Open state: morph the three bars into an X. */
.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon {
  background-color: transparent;
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::before {
  transform: translate(-50%, 0) rotate(45deg);
}

.site-header__toggle[aria-expanded="true"] .site-header__toggle-icon::after {
  transform: translate(-50%, 0) rotate(-45deg);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  flex-shrink: 0;
  text-decoration: none;
  color: inherit;
}

/* Monogram 60x40, wordmark 86x40 */
.site-header__logo svg {
  display: block;
  width: 60px;
  height: 40px;
}

.site-header__logo svg + svg {
  width: 86px;
  height: 40px;
}

.site-header__logo strong {
  font-weight: var(--font-bold);
  color: var(--acu-color-primary);
}

/* Block: primary-nav */
.primary-nav {
  flex: 1;
  font-family: var(--font-serif);
}

.primary-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-lg);
  list-style: none;
  margin: 0;
  padding: 0;
}

.primary-nav__list > li {
  position: relative;
}

.primary-nav__list > li > a {
  color: var(--acu-color-primary-dark);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  text-decoration: none;
}

.primary-nav__list > li > a:hover,
.primary-nav__list > li > a:focus-visible,
.primary-nav__list > li > a[aria-expanded="true"] {
  color: var(--acu-color-primary);
}

.primary-nav__list > li:has(> .sub-menu) > a {
  cursor: pointer;
}

.primary-nav__list > li:has(> .sub-menu) > a::after {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-left: 0.4em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--motion-fast) var(--ease-out);
}

.primary-nav__list > li:has(> .sub-menu) > a[aria-expanded="true"]::after {
  transform: rotate(180deg);
}

.primary-nav .sub-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 50%;
  min-width: 18rem;
  margin: 0;
  padding: 0 var(--space-md);
  list-style: none;
  background-color: var(--acu-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -0.25rem);
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    visibility 0s linear var(--motion-fast);
  z-index: 20;
}

.primary-nav__list > li:has(> a[aria-expanded="true"]) > .sub-menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
  transition:
    opacity var(--motion-fast) var(--ease-out),
    transform var(--motion-fast) var(--ease-out),
    visibility 0s linear 0s;
}

.primary-nav .sub-menu a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
  padding: var(--space-sm) 0;
  color: var(--acu-color-primary-dark);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: color var(--motion-fast) var(--ease-out);
}

.primary-nav .sub-menu a::after {
  content: "";
  flex-shrink: 0;
  width: 1.15em;
  height: 1.15em;
  background-color: rgba(33, 23, 75, 0.35);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.primary-nav .sub-menu a:hover,
.primary-nav .sub-menu a:focus-visible {
  color: var(--acu-color-primary);
}

.primary-nav .sub-menu a:hover::after,
.primary-nav .sub-menu a:focus-visible::after {
  background-color: var(--acu-color-primary);
}

/* Block: action-nav */
.action-nav__list {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-sm);
  list-style: none;
  margin: 0;
  padding: 0;
}

.action-nav__list > li > a {
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-lg);
  background-color: var(--acu-color-primary);
  color: var(--acu-white);
  font-family: var(--font-serif);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  text-align: center; /* keeps wrapped labels tidy when the buttons stack at tight widths */
  text-decoration: none;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.action-nav__list > li > a:hover,
.action-nav__list > li > a:focus-visible {
  background-color: var(--acu-color-primary-dark);
}

/* The ACU site reuses its existing action menu, whose "Apply"/"Visit" labels
   would otherwise trigger this brighter vibrant-purple variant. Keep all primary
   action buttons on the base brand purple so they match the refresh design.
.action-nav__list a.plausible-event-name--apply,
.action-nav__list a.plausible-event-name--visit {
  background-color: var(--acu-vibrant-purple);
} */

/* Apply Now is the last item; swap this selector if the menu order changes. */
.action-nav__list > li:last-child > a {
  background-color: var(--acu-sunset-orange);
  color: var(--acu-color-primary-dark);
}

.action-nav__list > li:last-child > a:hover,
.action-nav__list > li:last-child > a:focus-visible {
  background-color: var(--acu-prairie-bronze);
  color: var(--acu-white);
}

/* Hidden visually; kept in markup for assistive tech. */
body > hr,
main > hr,
body > footer > hr {
  display: none;
}

/* ------------------------------------------------------------------ */
/* Mobile navigation (below lg, 1024px).                              */
/* The purple top-nav stays visible (search trigger excepted - search */
/* lives in the menu's inline box instead). The hamburger opens a     */
/* full-screen overlay: inline search, a scrollable list of large     */
/* rows (submenus expand as grey accordion panels), and the CTAs      */
/* pinned to a white bar at the bottom. The overlay is driven purely  */
/* by the toggle's aria-expanded state.                               */
/* ------------------------------------------------------------------ */
@media (max-width: 1023.98px) {
  /* The purple utility bar shows its links on mobile too, left-aligned on a
     single row that scrolls horizontally when it overflows, and without the
     search trigger (the menu's search box covers that). The scrollbar is
     hidden; the cut-off link hints at the overflow. */
  .top-nav__inner {
    justify-content: flex-start;
    gap: var(--space-lg);
    padding: var(--space-2xs) var(--space-md);
    overflow-x: auto;
    scrollbar-width: none;
  }

  .top-nav__inner::-webkit-scrollbar {
    display: none;
  }

  .top-nav__list {
    justify-content: flex-start;
    gap: var(--space-lg);
  }

  .top-nav__list a {
    white-space: nowrap;
  }

  .top-nav__search {
    display: none;
  }

  /* The desktop search overlay is never reachable on mobile: its trigger
     (.top-nav__search) is hidden above, and the open menu carries its own
     inline search box. While closed it's only opacity/visibility-hidden, so
     its absolutely positioned panel is still laid out - and its inner flex row
     can't fit the close button at phone widths, leaving it overhanging ~58px
     past the viewport. That overhang isn't clipped by the masthead, so it
     became document-level horizontal scroll (the sideways "swipe" bug). Drop
     the overlay from layout entirely below the lg breakpoint. */
  .search-overlay {
    display: none;
  }

  /* Lock the page behind the open overlay so only the menu scrolls. */
  body:has(.site-header__toggle[aria-expanded="true"]) {
    overflow: hidden;
  }

  .site-header {
    gap: var(--space-md);
    padding: 0 var(--space-md);
  }

  /* Carry the vertical spacing on the logo itself (not the header) so the logo,
     rather than the taller hamburger, sets the row height. That removes the
     centering offset and lands the logo at the same var(--space-sm) inset the
     open drawer uses, so it doesn't shift when the menu opens. */
  .site-header__logo {
    padding: var(--space-sm) 0;
  }

  .site-header__toggle {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: auto;
  }

  /* The three bars are absolutely centred in the base rule; re-flow the icon as
     a fixed-width flex item so the visible "Menu" label can sit beside it. The
     ::before/::after bars stay anchored to the icon, so the X-morph is intact. */
  .site-header__toggle-icon {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 1.5rem;
    transform: none;
  }

  .site-header__toggle-label {
    font-family: var(--font-serif);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1;
    color: currentColor;
  }

  /* Closed: the menu is hidden. It opens as a full-screen overlay when the
     toggle is expanded (the :has rule below). */
  .site-header__nav {
    display: none;
  }

  /* ---- Open state: full-screen overlay ----
     A flex column: logo at the top, the close (X) pinned to the top-right
     corner, the nav filling the rest. align-items must be stretch (the base
     rule sets center) so every row spans the full width.
     The overlay starts below the visible part of the purple top-nav
     (--drawer-top, measured by header-navigation.js when the menu opens) so
     the logo and X don't jump up when the bar is on screen; once the bar has
     scrolled away the offset is 0 and the overlay covers the full screen. */
  .site-header:has(.site-header__toggle[aria-expanded="true"]) {
    position: fixed;
    top: var(--drawer-top, 0px);
    left: 0;
    right: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    height: calc(100vh - var(--drawer-top, 0px));
    height: calc(100dvh - var(--drawer-top, 0px));
    gap: 0;
    padding: 0;
    overflow: hidden;
    background-color: var(--acu-casual-cream);
  }

  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__logo {
    flex: 0 0 auto;
    padding: var(--space-sm) var(--space-md);
  }

  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__toggle {
    position: absolute;
    /* Match the closed in-flow position so the button doesn't shift on open:
       the 2.75rem toggle centred in the 4rem bar (2.5rem logo + 2x space-sm),
       right edge at the same space-md inset as the closed header padding. */
    top: 0.625rem;
    right: var(--space-md);
    margin: 0;
  }

  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__nav {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }

  /* ---- Inline search box (top of the menu) ---- */
  .site-header__search {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: var(--space-xs);
    margin: var(--space-xs) var(--space-md) var(--space-lg);
    padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
    background-color: var(--acu-white);
    border: 1px solid rgba(33, 23, 75, 0.2);
    border-radius: var(--radius-md);
  }

  .site-header__search:focus-within {
    border-color: var(--acu-color-primary-accent);
    box-shadow: 0 0 0 3px rgba(129, 49, 176, 0.15);
  }

  .site-header__search-input {
    flex: 1;
    min-width: 0;
    padding: var(--space-xs) 0;
    border: 0;
    background: transparent;
    font-family: var(--font-sans);
    font-size: var(--text-lg);
    color: var(--acu-color-primary-dark);
  }

  .site-header__search-input::placeholder {
    color: rgba(33, 23, 75, 0.5);
  }

  .site-header__search-input:focus {
    outline: none;
  }

  .site-header__search-submit {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--acu-color-primary-dark);
    cursor: pointer;
  }

  .site-header__search-submit svg {
    width: var(--text-xl);
    height: var(--text-xl);
  }

  /* ---- Scroll region: the primary list and the secondary (action) links
     scroll together between the pinned search box and CTA bar. ---- */
  .site-header:has(.site-header__toggle[aria-expanded="true"]) .site-header__scroll {
    display: block;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 0 var(--space-md);
  }

  /* ---- Primary nav: list of large rows ---- */

  .primary-nav__list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
  }

  .primary-nav__list > li {
    position: static;
  }

  .primary-nav__list > li > a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: var(--space-md) 0;
    font-size: var(--text-xl);
    font-weight: var(--font-medium);
    line-height: var(--leading-snug);
  }

  /* Items with a submenu read as heavy section headers. */
  .primary-nav__list > li:has(> .sub-menu) > a {
    font-weight: var(--font-black);
  }

  /* Expanded section turns accent purple (its chevron follows currentColor). */
  .primary-nav__list > li > a[aria-expanded="true"] {
    color: var(--acu-color-primary-accent);
  }

  .primary-nav__list > li:has(> .sub-menu) > a::after {
    width: 1.1em;
    height: 1.1em;
    margin-left: var(--space-sm);
  }

  /* ---- Submenu: grey rounded accordion panel ---- */
  .primary-nav .sub-menu {
    position: static;
    min-width: 0;
    margin: var(--space-2xs) 0 var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background-color: rgba(33, 23, 75, 0.06);
    border-radius: var(--radius-lg);
    box-shadow: none;
    transform: none;
    opacity: 1;
    visibility: visible;
    display: none;
    transition: none;
  }

  .primary-nav__list > li:has(> a[aria-expanded="true"]) > .sub-menu {
    display: block;
    transform: none;
  }

  .primary-nav .sub-menu a {
    justify-content: flex-start;
    gap: 0;
    padding: var(--space-sm) 0;
    font-size: var(--text-lg);
    font-weight: var(--font-regular);
    white-space: normal;
  }

  /* No trailing arrow on the accordion links. */
  .primary-nav .sub-menu a::after {
    display: none;
  }

  /* ---- Bottom button bar: the action-nav location pinned to a white bar. The
     button colors (purple, last item orange) come from the base .action-nav
     rules; here we just lay them out full-width in the pinned bar. ---- */
  .action-nav {
    flex: 0 0 auto;
    padding: var(--space-md);
    background-color: var(--acu-white);
    border-top: 1px solid rgba(33, 23, 75, 0.1);
  }

  .action-nav__list {
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: var(--space-sm);
    width: 100%;
  }

  .action-nav__list > li {
    flex: 1 1 40%;
  }

  .action-nav__list > li > a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-md);
    text-align: center;
  }
}

/* Wraps the top-nav and site-header so the search overlay can fill exactly
   their combined height (it's the overlay's positioned ancestor). Sticky with
   a negative top equal to the top-nav's height (measured by
   header-navigation.js), so scrolling slides the purple top-nav out of view
   while the site-header stays pinned. Without JS the var falls back to 0 and
   the whole masthead just sticks. */
.site-masthead {
  position: sticky;
  top: calc(-1 * var(--top-nav-height, 0px));
  z-index: 90;
}

/* Block: search-overlay
   Desktop search panel. Fills the masthead (inset: 0) so it covers exactly the
   top-nav + site-header, lifted above them via z-index. Hidden via
   opacity/visibility so the transition runs and the no-JS fallback (the
   top-nav__search link) still navigates to the search results page. JS toggles
   .is-open. */
.search-overlay {
  position: absolute;
  inset: 0;
  z-index: 100;
  background-color: var(--acu-casual-cream);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.5rem);
  transition:
    opacity var(--motion-base) var(--ease-out),
    transform var(--motion-base) var(--ease-out),
    visibility var(--motion-base) var(--ease-out);
}

.search-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.search-overlay__inner {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  height: 100%;
  max-width: var(--container-xl);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.search-overlay__form {
  flex: 1;
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-2xs) var(--space-2xs) var(--space-md);
  background-color: var(--acu-white);
  border: 1px solid rgba(33, 23, 75, 0.15);
  border-radius: var(--radius-md);
  transition:
    border-color var(--motion-fast) var(--ease-out),
    box-shadow var(--motion-fast) var(--ease-out);
}

.search-overlay__form:focus-within {
  border-color: var(--acu-color-primary-accent);
  box-shadow: 0 0 0 3px rgba(129, 49, 176, 0.15);
}

.search-overlay__icon {
  flex: 0 0 auto;
  width: var(--text-xl);
  height: var(--text-xl);
  color: var(--acu-color-primary-dark);
}

.search-overlay__input {
  flex: 1;
  min-width: 0;
  padding: var(--space-xs) 0;
  border: 0;
  background: transparent;
  font-family: var(--font-sans);
  font-size: var(--text-lg);
  color: var(--acu-color-primary-dark);
}

.search-overlay__input::placeholder {
  color: rgba(33, 23, 75, 0.55);
}

.search-overlay__input:focus {
  outline: none;
}

.search-overlay__submit {
  flex: 0 0 auto;
  padding: var(--space-xs) var(--space-lg);
  border: 0;
  border-radius: var(--radius-md);
  background-color: var(--acu-sunset-orange);
  color: var(--acu-color-primary-dark);
  font-family: var(--font-serif);
  font-size: var(--text-md);
  font-weight: var(--font-semibold);
  cursor: pointer;
  transition:
    background-color var(--motion-fast) var(--ease-out),
    color var(--motion-fast) var(--ease-out);
}

.search-overlay__submit:hover,
.search-overlay__submit:focus-visible {
  background-color: var(--acu-prairie-bronze);
  color: var(--acu-white);
}

.search-overlay__close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--acu-color-primary-dark);
  cursor: pointer;
  transition: background-color var(--motion-fast) var(--ease-out);
}

.search-overlay__close:hover,
.search-overlay__close:focus-visible {
  background-color: rgba(33, 23, 75, 0.08);
}

.search-overlay__close svg {
  width: var(--text-2xl);
  height: var(--text-2xl);
}

/* ---- Submit feedback: while the results page loads, the magnifying-glass
   icon is replaced by a spinning ring (header-navigation.js toggles the
   .is-searching class on submit). Shared by the desktop overlay and the
   mobile inline box; the spinner spans sit idle until then. Honours the
   global prefers-reduced-motion reset, which neutralises the animation. ---- */
.search-overlay__spinner,
.site-header__search-spinner {
  display: none;
  flex: 0 0 auto;
  box-sizing: border-box;
  width: var(--text-xl);
  height: var(--text-xl);
  border: 2px solid rgba(33, 23, 75, 0.25);
  border-top-color: var(--acu-color-primary-dark);
  border-radius: var(--radius-full);
}

.search-overlay__form.is-searching .search-overlay__icon,
.site-header__search.is-searching .site-header__search-submit svg {
  display: none;
}

.search-overlay__form.is-searching .search-overlay__spinner,
.site-header__search.is-searching .site-header__search-spinner {
  display: block;
  animation: ebenezer-search-spin 0.6s linear infinite;
}

@keyframes ebenezer-search-spin {
  to {
    transform: rotate(360deg);
  }
}