/* ────────────────────────────────────────────────────────────────────
   Header 2026 — extracted from EU Navigation artifact
   Scope: .eu-utility, .eu-header, .eu-drawer + dependencies

   Loaded only when get_header('2026') is used (see functions.php).
   ──────────────────────────────────────────────────────────────────── */

/* ─── Fonts: Lato (latin + latin-ext) — local woff2 ──────────────── */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/lato/lato-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/lato/lato-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato/lato-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/lato/lato-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Design tokens ──────────────────────────────────────────────── */
:root {
  /* Primary — Everglades green */
  --green:       #1F5E3F;
  --green-dark:  #0E3D26;
  --green-mid:   #2C7551;
  --green-light: #E8F0EA;
  --green-wash:  #F3F7F4;

  /* Accent — warm yellow */
  --accent:      #E8B93B;
  --accent-dark: #C99820;
  --accent-light:#FBF4DE;

  /* Legacy aliases */
  --gold:        var(--accent);
  --gold-dark:   var(--accent-dark);
  --gold-light:  var(--accent-light);

  /* Neutrals */
  --body:        #111827;
  --muted:       #4B5563;
  --subtle:      #8A94A3;
  --border:      #E3E6EB;
  --white:       #ffffff;
  --page-bg:     #F7F8FA;

  /* Fallback for --ink (artifact left it undefined) */
  --ink:         #1a1a1a;

  --card-radius: 6px;
  --transition:  .22s cubic-bezier(.4,0,.2,1);
}

/* ─── Scoped reset (only header containers) ──────────────────────── */
.eu-utility, .eu-utility *, .eu-utility *::before, .eu-utility *::after,
.eu-header,  .eu-header *,  .eu-header *::before,  .eu-header *::after,
.eu-drawer,  .eu-drawer *,  .eu-drawer *::before,  .eu-drawer *::after,
.eu-drawer-overlay {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ─── Base font on header containers ─────────────────────────────── */
.eu-utility,
.eu-header,
.eu-drawer {
  font-family: 'Lato', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  color: var(--body);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Menu content is navigation, not copyable text. Disable accidental
     text selection on double-click / drag.                              */
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
/* But keep form inputs selectable so users can edit search query. */
.eu-utility input,
.eu-utility textarea,
.eu-drawer input,
.eu-drawer textarea {
  -webkit-user-select: auto;
  -moz-user-select: auto;
  -ms-user-select: auto;
  user-select: auto;
}

/* ─── Scoped element resets (carried over from artifact) ──────────────
   :where() keeps the selector matching, but zeroes the specificity so
   real component rules (.eu-nav-link { color: #fff }, etc.) always win. */
:where(.eu-utility, .eu-header, .eu-drawer) a {
  text-decoration: none;
  color: inherit;
}

/* Kill default focus outline (the dotted ring) on mouse focus.
   Keep an accessible ring on keyboard focus via :focus-visible. */
.eu-utility :focus,
.eu-header  :focus,
.eu-drawer  :focus,
.eu-utility :focus-within,
.eu-header  :focus-within,
.eu-drawer  :focus-within {
  outline: none !important;
}
/* Firefox draws a dotted "inner focus" border on summary/button */
.eu-utility summary::-moz-focus-inner,
.eu-header  summary::-moz-focus-inner,
.eu-drawer  summary::-moz-focus-inner,
.eu-utility button::-moz-focus-inner,
.eu-header  button::-moz-focus-inner,
.eu-drawer  button::-moz-focus-inner {
  border: 0 !important;
  outline: 0 !important;
}
.eu-utility :focus-visible,
.eu-header  :focus-visible,
.eu-drawer  :focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 2px;
  /* No `border-radius` override here — modern browsers make `outline` follow
     the element's own border-radius automatically, so the pill-shaped search
     input keeps its pill outline and rectangular elements stay rectangular. */
}
:where(.eu-utility, .eu-header, .eu-drawer) img {
  display: block;
  max-width: 100%;
}
:where(.eu-utility, .eu-header, .eu-drawer) ul,
:where(.eu-utility, .eu-header, .eu-drawer) li {
  list-style: none;
}
:where(.eu-utility, .eu-header, .eu-drawer) button {
  font-family: inherit;
}

/* ─────────────────────────────────────────
   EU SITE HEADER (matches evergladesuniversity.edu)
   ───────────────────────────────────────── */

/* Top utility bar */
.eu-utility {
  background: var(--green-dark);
  color: rgba(255,255,255,.85);
  font-size: 13px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.eu-utility-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 8px 28px;
  display: grid;
  grid-template-columns: 1fr minmax(280px, 520px) 1fr;
  align-items: center;
  gap: 16px;
}
.eu-utility-announce {
  font-size: 15px;
  font-weight: 800;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}
.eu-utility-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  justify-self: end;
}
.eu-utility-link {
  color: rgba(255,255,255,.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .2s;
  font-weight: 600;
}
.eu-utility-link:hover { color: var(--gold); }
.eu-utility-link svg { width: 14px; height: 14px; }
.eu-utility-search {
  position: relative;
  display: flex;
  align-items: center;
  justify-self: center;
  width: 100%;
  max-width: 420px;
}
.eu-utility-search input {
  width: 100%;
  height: 32px;
  padding: 0 14px 0 34px;
  font-size: 13px;
  font-family: inherit;
  color: #fff !important; /* beats theme's `form input { color: #000 !important }` */
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 999px;
  outline: none;
  box-sizing: border-box;
  transition: background .2s, border-color .2s;
}
/* Theme has `::-webkit-input-placeholder { color: #000 !important }` globally,
   so we need `!important` too. */
.eu-utility-search input::placeholder              { color: rgba(255,255,255,.55) !important; }
.eu-utility-search input::-webkit-input-placeholder { color: rgba(255,255,255,.55) !important; }
.eu-utility-search input::-moz-placeholder          { color: rgba(255,255,255,.55) !important; opacity: 1; }
.eu-utility-search input:-ms-input-placeholder      { color: rgba(255,255,255,.55) !important; }
.eu-utility-search input:focus {
  background: rgba(255,255,255,.16);
  border-color: var(--gold);
}
.eu-utility-search svg {
  position: absolute;
  left: 10px;
  width: 14px;
  height: 14px;
  color: rgba(255,255,255,.6);
  pointer-events: none;
}

/* Main header bar */
.eu-header { background: #fff; position: sticky; top: 0; z-index: 200; }
/* When the WP admin bar is shown (logged-in users), push the sticky header
   below it so the bar doesn't overlap the logo. */
body.admin-bar .eu-header { top: 32px; }
@media (max-width: 782px) {
  body.admin-bar .eu-header { top: 46px; }
}

/* Theme's global.scss sets `html, body { overflow-x: hidden }` which breaks
   position: sticky (sticky needs no overflow ancestor between it and the
   viewport). Replace with `overflow-x: clip` — same visual effect (no
   horizontal scrollbar from bleeding sections), but compatible with sticky.
   Scoped: this CSS only loads on pages using get_header('2026'). */
html, body { overflow-x: clip !important; }

/* Reserve space for the vertical scrollbar permanently so that locking
   page scroll (when a mega-menu opens) doesn't cause a 17 px layout jump
   from the scrollbar suddenly disappearing.                            */
html { scrollbar-gutter: stable; }

/* Static fallback for `--header-height` so legacy hero-form blocks can
   position correctly. `!important` is used so that the OLD hero-with-form
   inline jQuery (which targets the now-defunct `.new-hp-header` selector
   and writes `0px` to body) can't override these values.
   Breakpoints mirror the header's own responsive behaviour:
     ≥1200 px:  utility (38) + bigger logo (97) + navbar (44) ≈ 180 px
     ≥1024 px:  utility (38) + header-top (86) + navbar (44) ≈ 168 px
     900-1023:  utility (38) + header-top (78) + navbar (44) ≈ 160 px
     768-899:   navbar hidden → utility (38) + header-top (72) ≈ 110 px
     641-767:   utility-announce hidden → utility (32) + header-top (72) ≈ 104 px
     ≤640:      utility narrowed, smaller logo → ≈ 92 px               */
html, body { --header-height: 168px !important; }
@media (min-width: 1200px) { html, body { --header-height: 180px !important; } }
@media (max-width: 1023px) { html, body { --header-height: 160px !important; } }
@media (max-width: 899px)  { html, body { --header-height: 110px !important; } }
@media (max-width: 767px)  { html, body { --header-height: 104px !important; } }
@media (max-width: 640px)  { html, body { --header-height:  92px !important; } }

/* Theme's global.scss has `main { margin: 133px 0 0 0 }` — that 133 px
   gap existed because the old header was position:absolute / overlay.
   Our new header sits in the document flow and is sticky, so the
   content should start IMMEDIATELY below it. Override to 0.            */
body.header-2026 main { margin: 0 !important; }

/* Theme's global.scss has `.page-id-8713 aside { position: fixed; top: 238px;
   right: 0; z-index: 10000; display: flex; ... }` — a rule meant for the
   homepage's floating Apply/Request CTA sidebar. But it has specificity
   (0,1,1) which beats our `.eu-drawer` (0,1,0), so on the homepage the
   mobile drawer was being rendered as a tiny floating widget instead of
   the full-screen slide-in panel. Override here with specificity (0,2,1).
   Also force display so the inline `aside { display:none !important }` from
   header.php (now scoped to .eu-floating-cta, but kept here as defense)
   can't ever hide the drawer.                                          */
body.header-2026 aside.eu-drawer {
  position: fixed !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: min(360px, 92vw) !important;
  background: #fff !important;
  z-index: 301 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
}
body.header-2026 .eu-drawer-overlay {
  position: fixed !important;
  inset: 0 !important;
  z-index: 300 !important;
}

/* hero-with-form block's legacy jQuery resets --header-height to
   "undefinedpx" on every resize (it targets the now-defunct
   `header.new-hp-header` selector). jQuery's `.css()` always sets
   inline style WITHOUT `!important`, so it strips our `!important`
   priority and the variable becomes unusable.
   Override the form's `top` directly with hardcoded values per
   breakpoint so the calc(var(--header-height)+40px) is bypassed
   entirely.                                                           */
/* Scoped to homepage (page-id-8713) only — other pages that may use the
   hero-with-form block keep their original calc(var(--header-height)+40px)
   positioning. */
body.header-2026.page-id-8713 section.hero-with-form .form-wrapper.desktop-form {
  top: 145px !important;
}
@media (min-width: 1200px) {
  body.header-2026.page-id-8713 section.hero-with-form .form-wrapper.desktop-form {
    top: 164px !important;
  }
}
@media (max-width: 1023px) {
  body.header-2026.page-id-8713 section.hero-with-form .form-wrapper.desktop-form {
    top: 200px !important;
  }
}
@media (max-width: 899px) {
  body.header-2026.page-id-8713 section.hero-with-form .form-wrapper.desktop-form {
    top: 150px !important;
  }
}
.eu-header-top {
  max-width: 1400px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  gap: 20px;
}
.eu-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex-shrink: 0; }
.eu-logo-img { width: 180px; height: auto; display: block; }
.eu-header-note {
  font-size: 15px;
  line-height: 18px;
  font-weight: 700;
  color: #1F5E3F;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-self: start;
}

/* Upsize on big desktop — bigger logo + larger note text */
@media (min-width: 1200px) {
  .eu-logo-img { width: 215px; }
  .eu-header-note {
    font-size: 18px;
  }
}
@media (max-width: 800px) {
  .eu-header-note {
    display: none;
  }
}
@media (max-width: 640px) {
  .eu-logo-img { width: 132px; height: auto; }
}
@media (max-width: 380px) {
  .eu-logo-img { width: 116px; }
}

/* Anniversary seal — shown on mobile only */
.eu-anniversary { display: none; align-items: center; justify-content: center; width: 46px; height: 46px; flex-shrink: 0; }
.eu-anniversary svg, .eu-anniversary img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* Apply + Request stack (mobile reflows to vertical) */
.eu-cta-stack { display: contents; }

.eu-announce {
  font-size: 15px;
  font-weight: 800;
  color: var(--green);
  white-space: nowrap;
  flex-shrink: 0;
}
.eu-actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* Action buttons */
.eu-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 16px 0 12px;
  height: 44px;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  transition: filter var(--transition), transform var(--transition);
}
.eu-btn:hover  { filter: brightness(1.06); color: #fff; } /* lock white over theme's a:hover */
.eu-btn:active { transform: translateY(1px); }
/* Request button has dark text — keep it dark on hover too */
.eu-btn--request:hover { color: #1a1a1a; }
.eu-btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
}
.eu-btn-icon svg { width: 22px; height: 22px; display: block; }
.eu-btn--apply   { background: #2E7D3A; }
.eu-btn--request { background: #E8C130; color: #1a1a1a; }
.eu-btn--contact { background: #2FA3DC; }
.eu-btn--phone   { background: #2f2f2f; padding: 0; width: 44px; justify-content: center; }
.eu-btn--catalog { background: #7A2B2B; }

.eu-icon-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  font-weight: 600;
  color: #333;
  text-decoration: none;
  padding: 0 6px;
  transition: color var(--transition);
}
.eu-icon-link:hover { color: var(--green); }
.eu-icon-link svg { width: 14px; height: 14px; }

/* Navbar */
.eu-navbar { background: var(--green); position: relative; z-index: 150; }
.eu-navbar-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}
.eu-nav-item { position: static; }
.eu-nav-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 14px 9px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0;
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
}
/* Middle nav items get wider horizontal padding for breathing room.
   The first and last items keep the narrower padding so the navbar
   content stays flush with the inner container edges.
   Only applies at ≥1400 px viewport — below that the original 14px 9px
   padding stays so items don't overflow on smaller screens.            */
@media (min-width: 1400px) {
  .eu-nav-item:not(:first-child):not(:last-child) > .eu-nav-link {
    padding: 14px 29px;
  }
}
.eu-nav-link .chevron {
  width: 11px;
  height: 11px;
  transition: transform .2s;
}
.eu-nav-link:hover,
.eu-nav-item:hover .eu-nav-link { background: var(--green-dark); color: #E8C130; }
.eu-nav-item.is-active .eu-nav-link { background: var(--green-dark); }
.eu-nav-item:hover .eu-nav-link .chevron { transform: rotate(180deg); }

/* MEGA MENU */
.eu-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  /* border-top: 3px solid var(--green); */
  box-shadow: 0 16px 40px rgba(0,0,0,.12);
  z-index: 250;
  /* Height-animation reveal via CSS Grid 0fr↔1fr trick.
     The closed state is fully collapsed (0 height + 0 opacity).
     `grid-template-columns: 1fr` is required so the single column fills
     the full dropdown width — otherwise it defaults to `auto` and
     `.eu-mega-inner` (which uses margin: 0 auto + max-width) shrinks. */
  display: grid;
  grid-template-rows: 0fr;
  grid-template-columns: 1fr;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    grid-template-rows .45s cubic-bezier(0.22, 1, 0.36, 1),
    opacity            .3s  ease,
    visibility         0s .45s;
}
.eu-dropdown > .eu-mega-inner {
  /* min-height: 0 is required for the grid track to actually shrink to 0 */
  min-height: 0;
  overflow: hidden;
}
/* Cap the open dropdown height so it never spills past the viewport, and
   let the inner scroll when content is taller. The 160 px allowance covers
   the utility bar + header-top + navbar stacked above. JS additionally
   switches overflow-y to `auto` after the unroll completes.
   `overscroll-behavior: contain` keeps wheel-scroll inside the dropdown
   from bleeding through to the page when the inner reaches its top/bottom. */
.eu-dropdown.is-open > .eu-mega-inner {
  max-height: calc(100vh - 160px);
  overscroll-behavior: contain;
}
/* Compact scrollbar inside the dropdown */
.eu-dropdown > .eu-mega-inner::-webkit-scrollbar { width: 8px; }
.eu-dropdown > .eu-mega-inner::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,.18);
  border-radius: 999px;
}
.eu-dropdown > .eu-mega-inner::-webkit-scrollbar-thumb:hover {
  background: rgba(0,0,0,.28);
}
.eu-dropdown > .eu-mega-inner::-webkit-scrollbar-track { background: transparent; }

/* JS opens with a slow luxurious unroll — Out-Expo curve gives that
   "premium" deceleration at the end (Radix / Linear / Framer feel). */
.eu-dropdown.is-open {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    grid-template-rows .75s cubic-bezier(0.16, 1, 0.3, 1),
    opacity            .5s  cubic-bezier(0.16, 1, 0.3, 1),
    visibility         0s;
}

/* ── Switch state ─────────────────────────────────────────────────────────
   When user moves from one open menu to a neighbour, we want a Radix-style
   "shared panel" effect: the white background stays visible the whole time,
   only the content swaps. The OLD panel keeps its full size + opacity for
   ~280ms (white background visible) while its CONTENT fades to 0; the NEW
   panel comes in instantly at full size with its own content fading in.
   Both white panels overlap at top:100% so the user sees ONE continuous
   white plate — no green-navbar flash between menus.                     */
.eu-dropdown.is-leaving {
  /* Keep the panel itself fully visible at full height during the switch */
  grid-template-rows: 1fr !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  /* Force this panel below the incoming one so the new content paints on
     top of the leaving panel's empty white area.                         */
  z-index: 249;
}
.eu-dropdown.is-leaving > .eu-mega-inner > * {
  opacity: 0;
  transition: opacity .25s ease;
}

/* `.is-snap-close` is a hard reset still used when the user actually leaves
   the navbar (after the cross-fade has already finished). It kills any
   transition so the panel snaps back to its closed state in a single frame. */
.eu-dropdown.is-snap-close {
  transition: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  grid-template-rows: 0fr !important;
  pointer-events: none !important;
}

/* NEW panel during a switch: same slide-down + fade as a fresh open, just
   slightly faster (~500 ms vs 750 ms). The OLD panel has already been
   snap-closed instantly via JS, so there's no overlap — the new panel
   smoothly unrolls into the empty space.                                 */
.eu-dropdown.is-open.is-switch {
  grid-template-rows: 1fr;
  transition:
    grid-template-rows .5s  cubic-bezier(0.16, 1, 0.3, 1),
    opacity            .35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Layered content fade — delayed so the panel starts unrolling first,
   then content arrives. During a switch, content shows up a touch faster. */
.eu-dropdown > .eu-mega-inner > * {
  opacity: 0;
  transition: opacity .4s ease .15s;
}
.eu-dropdown.is-open > .eu-mega-inner > * {
  opacity: 1;
}
.eu-dropdown.is-open.is-switch > .eu-mega-inner > * {
  opacity: 1;
  transition: opacity .3s ease .08s;
}

/* Keyboard-only fallback */
.eu-nav-item:focus-within > .eu-dropdown:not(.is-open):not(.is-snap-close) {
  grid-template-rows: 1fr;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition:
    grid-template-rows .5s cubic-bezier(0.16, 1, 0.3, 1),
    opacity            .3s ease,
    visibility         0s;
}
.eu-nav-item:focus-within > .eu-dropdown:not(.is-open):not(.is-snap-close) > .eu-mega-inner > * {
  opacity: 1;
}
.eu-mega-inner {
  width: 100%;
  max-width: 1320px;
  margin: 0 auto;
  padding: 32px 40px 36px;
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr 300px;
  align-items: stretch;
}
.eu-mega-grid {
  display: grid;
  gap: 28px;
}
.eu-mega--cols-2 .eu-mega-grid { grid-template-columns: repeat(2, 1fr); }
.eu-mega--cols-3 .eu-mega-grid { grid-template-columns: repeat(3, 1fr); }
.eu-mega--cols-4 .eu-mega-grid { grid-template-columns: repeat(4, 1fr); }
/* Wider gap on big desktop so it matches column-gap inside cols-2 lists
   (52 px). Keeps the spacing rhythm consistent across all sections.    */
@media (min-width: 1200px) {
  .eu-mega-grid { gap: 52px; }
}
.eu-mega-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--green);
  margin: 0 0 14px;
}
.eu-mega-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
/* Default 2-column layout using CSS multi-column.
   Used when no parent dropdown class (.eu-mega--ug / .eu-mega--cols-1) needs
   the no-reflow behavior below.                                            */
.eu-mega-list--cols-2 {
  display: block;
  column-count: 2;
  column-gap: 52px;
}
.eu-mega-list--cols-2 li { break-inside: avoid; }

/* No-reflow layout: items are split into TWO separate <ul.eu-mega-list-col>
   children inside the .eu-mega-list--cols-2 wrapper. The wrapper becomes a
   2-column grid; each <ul> is independent, with its OWN natural height.
   Expanding an item in one column has zero effect on the other column —
   items never shift sideways and the other column never gets empty space. */
.eu-mega--ug .eu-mega-list--cols-2,
.eu-mega--cols-1:not(.eu-mega--ug) .eu-mega-list--cols-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  column-gap: 52px;
  column-count: initial; /* override the base rule */
}
/* Inner per-column list — same base styling as .eu-mega-list */
.eu-mega-list-col {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.eu-mega-list--compact .eu-mega-item { padding: 6px 12px; }
.eu-mega-grid--ug { grid-template-columns: 2fr 1fr !important; }

/* Undergraduate dropdown */
.eu-mega--ug .eu-mega-feature {
  align-self: start;
  min-height: 0;
}
.eu-mega--ug .eu-mega-feature-desc { flex: 0 0 auto; }

.eu-mega-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 9px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  text-decoration: none;
  transition: background .15s;
}
.eu-mega-item:hover { background: var(--green-wash); }
.eu-mega-item-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
}
.eu-mega-item-desc {
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.4;
}

/* Feature card (right column) */
.eu-mega-feature {
  align-self: flex-start;
  position: relative;
  background: linear-gradient(160deg, var(--green-dark) 0%, var(--green) 100%);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #fff;
  text-decoration: none;
  min-height: 220px;
  transition: transform .25s ease;
}
.eu-mega-feature:hover { transform: translateY(-2px); }
.eu-mega-feature-img {
  width: 100%;
  height: 120px;
  object-fit: cover;
  display: block;
}
.eu-mega-feature-body {
  padding: 18px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.eu-mega-feature-eyebrow {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
}
.eu-mega-feature-title {
  font-size: 17px;
  font-weight: 800;
  line-height: 1.25;
  margin: 0;
  color: #fff;
}
.eu-mega-feature-desc {
  font-size: 13px;
  color: rgba(255,255,255,.78);
  line-height: 1.5;
  margin: 4px 0 0;
  flex: 1;
}
.eu-mega-feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 12px;
  font-size: 13px;
  font-weight: 800;
  color: var(--gold);
  letter-spacing: .02em;
}
.eu-mega-feature-cta svg { width: 14px; height: 14px; transition: transform .2s; }
.eu-mega-feature:hover .eu-mega-feature-cta svg { transform: translateX(3px); }

/* EXPANDABLE PROGRAM ITEM (3rd level) */
.eu-mega-acc { display: block; }
summary.eu-mega-item--acc {
  list-style: none;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
}
summary.eu-mega-item--acc::-webkit-details-marker { display: none; }
summary.eu-mega-item--acc::marker { content: ''; }
.eu-mega-item--acc .eu-mega-item-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.eu-mega-acc-meta { display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0; }
.eu-mega-acc-count {
  display: none; /* hide count badge — desktop accordion */
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-light);
  border-radius: 999px;
  padding: 1px 8px;
  min-width: 20px;
  text-align: center;
}
.eu-mega-acc-chevron {
  width: 14px; height: 14px;
  color: var(--subtle);
  transition: transform .2s, color .2s;
}
.eu-mega-acc[open] > summary .eu-mega-acc-chevron { transform: rotate(180deg); color: var(--green); }
.eu-mega-acc[open] > summary.eu-mega-item--acc { background: var(--green-wash); }
.eu-mega-acc-panel {
  display: flex;
  flex-direction: column;
  margin: 2px 0 10px 12px;
  padding-left: 12px;
  border-left: 2px solid var(--green-light);
}
.eu-mega-acc-panel a {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 12px;
  margin: 0 -12px;
  border-radius: 6px;
  text-decoration: none;
  line-height: 1.35;
}
.eu-mega-acc-panel a:hover { background: var(--green-wash); color: var(--green); }

/* First link in each panel is the PARENT program — make it visually stand out */
.eu-mega-acc-panel > a:first-child {
  font-weight: 800;
  color: var(--green);
}

/* Mobile drawer — nested (level-3) accordions */
.eu-drawer-sub--nested { padding-bottom: 6px; }
.eu-drawer-sub--nested .eu-drawer-subsection { border-top: 1px solid var(--border); }
.eu-drawer-sub--nested .eu-drawer-subsection:first-child { border-top: 0; }
.eu-drawer-sub--nested .eu-drawer-subsection summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.eu-drawer-acc-count {
  display: none; /* hide count badge — mobile drawer accordion */
  margin-left: auto;
  font-size: 11px;
  font-weight: 800;
  color: var(--green);
  background: var(--green-light);
  border-radius: 999px;
  padding: 1px 8px;
}
.eu-drawer-sub--nested .eu-drawer-subsection summary::-webkit-details-marker { display: none; }
.eu-drawer-sub--nested .eu-drawer-subsection summary::after {
  content: '';
  width: 11px;
  height: 11px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F5E3F' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  transition: transform .2s;
}
.eu-drawer-sub--nested .eu-drawer-subsection[open] summary::after { transform: rotate(180deg); }
.eu-drawer-sub--nested .eu-drawer-subsub { padding: 0 4px 10px 12px; display: flex; flex-direction: column; }
.eu-drawer-sub--nested .eu-drawer-subsub a { padding: 7px 4px; font-size: 14px; font-weight: 600; color: #4a4a4a; text-decoration: none; }
.eu-drawer-sub--nested .eu-drawer-subsub a:hover { color: var(--green); }

/* First link in each drawer accordion is the PARENT — stand out */
.eu-drawer-sub--nested .eu-drawer-subsub > a:first-child {
  font-weight: 800;
  color: var(--green);
}

/* MOBILE: hamburger + drawer */
.eu-hamburger {
  display: none;
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--ink);
}
.eu-hamburger svg { width: 26px; height: 26px; display: block; }

.eu-drawer-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 300;
  opacity: 0;
  transition: opacity .2s ease;
}
.eu-drawer-overlay.is-open { display: block; opacity: 1; }

.eu-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(360px, 92vw);
  background: #fff;
  z-index: 301;
  overflow-y: auto;
  /* Stops swipe-scroll inside the drawer from bleeding into the body
     after hitting the drawer's edge — works alongside JS body-scroll lock. */
  overscroll-behavior: contain;
  transform: translateX(100%);
  transition: transform .28s ease;
  display: flex;
  flex-direction: column;
  box-shadow: -8px 0 32px rgba(0,0,0,.14);
}
.eu-drawer.is-open { transform: translateX(0); }
body.eu-drawer-open { overflow: hidden; }

.eu-drawer-header {
  position: sticky;
  top: 0;
  background: #fff;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--border);
  z-index: 1;
}
.eu-drawer-header-title {
  font-size: 12px;
  font-weight: 800;
  color: var(--green);
  letter-spacing: .12em;
  text-transform: uppercase;
}
.eu-drawer-close {
  background: none;
  border: 0;
  padding: 6px;
  cursor: pointer;
  color: var(--ink);
}
.eu-drawer-close svg { width: 22px; height: 22px; display: block; }

.eu-drawer-nav { padding: 4px 0 0; flex: 1; }
.eu-drawer-section { border-bottom: 1px solid var(--border); }
.eu-drawer-section > summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.eu-drawer-section > summary::-webkit-details-marker { display: none; }
.eu-drawer-section > summary::marker { display: none; }
.eu-drawer-section > summary::after {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a1a1a' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>") no-repeat center / contain;
  transition: transform .2s;
}
.eu-drawer-section[open] > summary::after { transform: rotate(180deg); }

.eu-drawer-link {
  display: block;
  padding: 14px 20px;
  font-size: 15px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid var(--border);
}
.eu-drawer-link:hover { color: var(--green); }

.eu-drawer-sub {
  padding: 0 20px 14px 28px;
  display: flex;
  flex-direction: column;
}
.eu-drawer-sub-title {
  padding: 12px 4px 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--green);
}
.eu-drawer-sub a {
  display: block;
  padding: 8px 4px;
  font-size: 14px;
  color: #4a4a4a;
  text-decoration: none;
}
.eu-drawer-sub a:hover { color: var(--green); }

/* Direct links (no children) at the program level — match the visual weight
   of <details>.eu-drawer-subsection summary, since both are siblings at the
   same hierarchy level. The chevron alone tells which item has sub-items;
   the typography stays consistent. Placed AFTER `.eu-drawer-sub a` so that
   font-size/color/padding properly override at equal specificity (0,1,1). */
.eu-drawer-sub--nested > a {
  padding: 11px 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--body);
  border-top: 1px solid var(--border);
}
.eu-drawer-sub--nested > a:first-child {
  border-top: 0;
}

/* ─── Drawer item hover/tap feedback ────────────────────────────────
   Mirror the desktop mega-menu's green-wash hover effect on every
   tappable drawer item — same rounded background, same color. Works
   on devices that support hover (laptops, iPads with trackpad) AND
   on touch (`:active` gives instant feedback while finger is down).  */
.eu-drawer-section > summary,
.eu-drawer-link,
.eu-drawer-sub > a,
.eu-drawer-sub--nested > a,
.eu-drawer-sub--nested .eu-drawer-subsection > summary,
.eu-drawer-sub--nested .eu-drawer-subsub > a {
  border-radius: 6px;
  transition: background .15s;
}
@media (hover: hover) {
  .eu-drawer-section > summary:hover,
  .eu-drawer-link:hover,
  .eu-drawer-sub > a:hover,
  .eu-drawer-sub--nested > a:hover,
  .eu-drawer-sub--nested .eu-drawer-subsection > summary:hover,
  .eu-drawer-sub--nested .eu-drawer-subsub > a:hover {
    background: var(--green-wash);
  }
}
.eu-drawer-section > summary:active,
.eu-drawer-link:active,
.eu-drawer-sub > a:active,
.eu-drawer-sub--nested > a:active,
.eu-drawer-sub--nested .eu-drawer-subsection > summary:active,
.eu-drawer-sub--nested .eu-drawer-subsub > a:active {
  background: var(--green-wash);
}

.eu-drawer-cta {
  padding: 16px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--border);
  background: #f9fafa;
  position: sticky;
  bottom: 0;
}
.eu-drawer-cta .eu-btn {
  height: 44px;
  width: 100%;
  justify-content: center;
}
.eu-drawer-cta .eu-btn .label { display: inline; }

/* ─── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .eu-btn--request .label,
  .eu-btn--contact .label,
  .eu-btn--catalog .label { display: none; }
  .eu-btn--request,
  .eu-btn--contact,
  .eu-btn--catalog { padding: 0; width: 44px; justify-content: center; }
  .eu-mega-inner { grid-template-columns: 1fr 260px; gap: 24px; padding: 24px 28px 28px; }
  .eu-mega--cols-3 .eu-mega-grid { grid-template-columns: repeat(2, 1fr); }
  .eu-mega--cols-4 .eu-mega-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .eu-utility-announce { font-size: 12px; }
  .eu-utility-search { max-width: 320px; }
  .eu-navbar { display: none; }
  .eu-hamburger { display: inline-flex; }
  .eu-btn--contact,
  .eu-btn--catalog { display: none; }
  .eu-btn--apply .label,
  .eu-btn--request .label { display: inline; }
  .eu-btn--apply,
  .eu-btn--request { padding: 0 16px 0 12px; width: auto; }
  .eu-actions { gap: 6px; }
  .eu-header-top { padding: 12px 18px; gap: 12px; }
  .eu-mega-inner { grid-template-columns: 1fr; gap: 20px; padding: 20px 18px 22px; }
  .eu-mega-feature { min-height: 0; }
  .eu-mega-feature-img { height: 100px; }
  .eu-mega-grid { gap: 20px; }
  .eu-mega--cols-2 .eu-mega-grid,
  .eu-mega--cols-3 .eu-mega-grid,
  .eu-mega--cols-4 .eu-mega-grid { grid-template-columns: 1fr; }
  .eu-navbar-inner { justify-content: flex-start; overflow-x: auto; }
  .eu-navbar-inner::-webkit-scrollbar { display: none; }
  .eu-nav-link { padding: 14px 14px; font-size: 13px; }
}

/* Hide the announcement strip earlier than the rest of the mobile reflow */
@media (max-width: 768px) {
  .eu-utility-announce { display: none; }
}

@media (max-width: 640px) {
  .eu-utility-inner {
    padding: 7px 16px;
    grid-template-columns: 1fr auto;
    gap: 10px;
  }
  .eu-utility-search { max-width: none; justify-self: stretch; }
  .eu-anniversary { display: flex; }
  .eu-actions .eu-btn--phone,
  .eu-actions .eu-btn--contact,
  .eu-actions .eu-btn--catalog { display: none; }
  .eu-cta-stack { display: flex; flex-direction: column; gap: 6px; }
  .eu-cta-stack .eu-btn { width: 100%; height: 34px; padding: 0 16px; justify-content: center; font-size: 12.5px; }
  .eu-cta-stack .eu-btn .label { display: inline; }
  .eu-cta-stack .eu-btn .eu-btn-icon { display: none; }
  .eu-actions { gap: 10px; align-items: center; margin-left: auto; }
  .eu-header-top { padding: 12px 14px; gap: 10px; align-items: center; }
  .eu-btn .label { display: none; }
  .eu-btn--apply { padding: 0; width: 44px; justify-content: center; }
  .eu-icon-link span { display: none; }
}