/* ==========================================================================
   Navigation: header, main nav + mega menu (per-item types),
   Quick Links drawer (secondary nav), mobile sheet.
   Markup mirrors what WordPress menus would output (two menu locations).
   ========================================================================== */

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  pointer-events: none;
}
/* Logged in: sit below the WordPress admin bar. WordPress sets this variable only when the bar
   shows (32px, 46px on phones), so visitors see no change. Under 600px the bar normally scrolls
   away; keep it fixed so the header doesn't leave a gap. */
.site-header { top: var(--wp-admin--admin-bar--height, 0px); }
@media (max-width: 600px) { #wpadminbar { position: fixed; } }
.site-header__bar {
  pointer-events: auto;
  position: relative;
  width: 100%;
  height: var(--header-h);
  margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding-inline: max(var(--gutter), (100% - var(--rail-max)) / 2);
  background: var(--c-ink);
  color: var(--c-light);
  border: 1px solid transparent;
  border-bottom-color: var(--color-border-on-dark);
  transition:
    width var(--dur-base) var(--ease-out), height var(--dur-base) var(--ease-out),
    margin var(--dur-base) var(--ease-out), padding var(--dur-base) var(--ease-out),
    border-radius var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}
.site-header.is-floating .site-header__bar {
  width: min(var(--rail-max) + 48px, 100% - 24px);
  height: var(--header-float-h);
  margin-top: 12px;
  padding-inline: 24px;
  border-radius: var(--r-md);
  border-color: var(--color-border-on-dark);
  background: color-mix(in srgb, var(--c-ink) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  box-shadow: var(--shadow-float);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .site-header.is-floating .site-header__bar { background: color-mix(in srgb, var(--c-ink) 96%, transparent); }
}

.site-header__logo { justify-self: start; display: inline-flex; padding: 6px 0; }
.site-header__logo img { height: 24px; width: auto; }

.site-header__actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.header-cta {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--color-accent); color: var(--color-on-accent);
  font-weight: 600; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap;
  transition: background-color var(--dur-base) var(--ease-out);
}
.header-cta:hover { background: var(--color-accent-hover); }

.burger {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center; color: var(--color-accent);
  transition: background-color var(--dur-base) var(--ease-out);
}
.burger:hover { background: color-mix(in srgb, var(--c-light) 6%, transparent); }
.burger__lines { width: 22px; height: 16px; position: relative; }
.burger__lines span {
  position: absolute; left: 0; right: 0; height: 2.5px; border-radius: 2px; background: currentColor;
  transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.burger__lines span:nth-child(1) { top: 0; }
.burger__lines span:nth-child(2) { top: 50%; margin-top: -1.25px; }
.burger__lines span:nth-child(3) { bottom: 0; }
.burger:hover .burger__lines span:nth-child(2) { transform: scaleX(0.7); transform-origin: right; }

/* ---- Main nav ----------------------------------------------------------- */
.mainnav { position: relative; }
.mainnav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.mainnav__item {
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 14px; border-radius: var(--r-pill);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-nav);
  letter-spacing: var(--tr-nav); text-transform: uppercase;
  color: var(--c-light);
  transition: color var(--dur-fast) linear;
}
.mainnav__item:hover, .mainnav__item[aria-expanded="true"] { color: var(--c-white); }
.mainnav__chev { width: 10px; height: 10px; opacity: 0.7; transition: transform var(--dur-base) var(--ease-out); }
.mainnav__item[aria-expanded="true"] .mainnav__chev { transform: rotate(180deg); opacity: 1; }
.mainnav__indicator {
  position: absolute; left: 0; bottom: -2px; height: 2px; border-radius: 2px;
  width: var(--w, 0px); transform: translateX(var(--x, 0px));
  background: var(--color-accent); opacity: 0; pointer-events: none;
  transition: transform var(--dur-base) var(--ease-out), width var(--dur-base) var(--ease-out), opacity var(--dur-fast) linear;
}
.mainnav__indicator.is-visible { opacity: 1; }
.site-header.is-floating .mainnav__indicator { bottom: 2px; }

/* ---- Mega menu ---------------------------------------------------------- */
.mega { position: absolute; left: 0; right: 0; top: 100%; pointer-events: none; }
.mega__sheet {
  width: 100%; margin: 0 auto;
  background: var(--color-surface-3); color: var(--c-light);
  border-bottom: 1px solid var(--color-border-on-dark);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity 200ms linear, transform var(--dur-base) var(--ease-out), visibility 0s linear var(--dur-base),
              width var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
}
.mega.is-open .mega__sheet { pointer-events: auto; opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.site-header.is-floating .mega__sheet {
  width: min(var(--rail-max) + 48px, 100% - 24px);
  margin-top: 8px;
  border: 1px solid var(--color-border-on-dark); border-radius: 20px;
  box-shadow: var(--shadow-float);
}
.mega__inner { position: relative; height: 0; overflow: hidden; transition: height 300ms var(--ease-inout); }
.mega__panel {
  position: absolute; inset: 0 0 auto 0;
  padding-block: 40px 44px;
  opacity: 0; pointer-events: none;
  transform: translateX(calc(var(--dir, 0) * 16px));
  transition: opacity 160ms linear, transform var(--dur-base) var(--ease-out);
}
.mega__panel.is-active { opacity: 1; transform: none; pointer-events: auto; transition-delay: 70ms, 0s; }
/* Mega entrance (Nolan 2026-10-05, from the old staging's GSAP menu): the sheet unrolls like a curtain,
   then the panel's columns and cards rise in one after another; card photos settle from a slight zoom.
   Switching panels replays the stagger (it keys off .is-active); the sheet doesn't replay.
   Fill is "backwards" only, so hover transforms (link nudge, photo zoom) work once the entrance ends.
   Reduced motion keeps the plain fade above. */
@media (prefers-reduced-motion: no-preference) {
  .mega { --mega-start: 140ms; --mega-step: 70ms; }
  .mega__sheet {
    transform: none;
    clip-path: inset(0 -48px 100% -48px);
    transition: clip-path var(--dur-base) var(--ease-inout), opacity var(--dur-fast) linear var(--dur-fast),
                visibility 0s linear var(--dur-base),
                width var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
  }
  .mega.is-open .mega__sheet {
    clip-path: inset(0 -48px -64px -48px); /* negative sides and bottom keep the floating sheet's shadow */
    transition: clip-path var(--dur-flow) var(--ease-flow), opacity 0s, visibility 0s,
                width var(--dur-base) var(--ease-out), margin var(--dur-base) var(--ease-out), border-radius var(--dur-base) var(--ease-out);
  }
  .mega__panel { transform: none; }
  .mega__panel.is-active .mega__grid > * {
    animation: mega-rise var(--dur-flow) var(--ease-flow) backwards;
    animation-delay: calc(var(--mega-start) + var(--mega-i, 0) * var(--mega-step));
  }
  .mega__grid > :nth-child(2) { --mega-i: 1; }
  .mega__grid > :nth-child(3) { --mega-i: 2; }
  .mega__grid > :nth-child(4) { --mega-i: 3; }
  .mega__grid > :nth-child(5) { --mega-i: 4; }
  .mega__panel.is-active .mcard__img,
  .mega__panel.is-active .mcard .event-art {
    animation: mega-settle var(--dur-reveal) var(--ease-out) backwards;
    animation-delay: calc(var(--mega-start) + var(--mega-i, 0) * var(--mega-step));
  }
}
@keyframes mega-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes mega-settle { from { transform: scale(1.06); } }
/* 14ao: every panel is the same three equal columns with one gap, so a feature card is the same size in every panel */
.mega__grid { width: var(--rail); margin-inline: auto; display: grid; gap: 24px; align-items: start; }
.site-header.is-floating .mega__grid { width: calc(100% - 48px); }
.mega__grid--hybrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid--text { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 48px; }
.mega__grid--events { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid--events-no-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.mega__grid--visual { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid--columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mega__grid--columns-no-ad { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Hierarchy (14ao): the title is the eyebrow (body font, small caps, brand accent), the link is the reading line (cream, medium),
   the supporting line is muted. Panel titles, links and rows share one scale: 12 / 18 (links) / 16 (rows) / 13 (support). */
.mega__title {
  font-family: var(--font-body); font-weight: 500; font-size: var(--fs-eyebrow); line-height: 1.5;
  letter-spacing: var(--tr-eyebrow); text-transform: uppercase; color: var(--color-accent);
  margin-bottom: 20px; text-wrap: balance;
}
.mega__line { display: block; }
.mega__group-title { --eyebrow: var(--c-light-muted); margin-bottom: 14px; }
.mega__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mega__links a {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-menu); line-height: var(--lh-menu); font-weight: 500; color: var(--c-light);
  padding-block: 3px;
  transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) linear, opacity var(--dur-base) var(--ease-out);
}
.mega__links a:hover, .mega__links a:focus-visible { color: var(--c-white); transform: translateX(4px); }
/* The text fade (Nolan, 2026-10-03): with a mouse, links rest slightly dimmed and fade up to full on hover/focus, back down on
   leave. Touch screens (the mobile sheet) keep full strength. Cream at 72% on the panel stays well above AA. */
@media (hover: hover) {
  .mega__links a { opacity: 0.72; }
  .mega__links a:hover, .mega__links a:focus-visible { opacity: 1; }
}
/* The hover arrow (R7): the Quick Links motion, on every mega-menu link, internal or off-site alike. No arrow at rest. */
.mega__links a svg, .erow svg {
  width: 16px; height: 16px; flex: none; color: var(--color-accent);
  opacity: 0; transform: translateX(-6px);
  transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-out);
}
.mega__links a:hover svg, .mega__links a:focus-visible svg { opacity: 1; transform: none; }

/* The feature card (14ao): one component for every featured/promo area (About, Events, Missional, Resources, the sheet).
   Spec: 11:8 (the old 410 x 300), photo cropped to fill (cover, centred), eyebrow + title at the top, a foot with a line and the
   arrow circle at the bottom; the whole card is the link; the image zooms 4% on hover/focus (not with reduced motion) and the
   circle turns to the accent. */
.mcard {
  position: relative; isolation: isolate; overflow: clip; /* clip, not hidden: the 11:8 shape gives way before the text is cut off */
  display: flex; flex-direction: column; justify-content: space-between; gap: 24px;
  aspect-ratio: 11 / 8; padding: 24px;
  border-radius: var(--r-md);
  color: var(--c-white); background: var(--color-surface-3);
}
.mcard__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 700ms var(--ease-out); }
.mcard .event-art { transition: transform 700ms var(--ease-out); }
.mcard::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 62%, transparent) 0%, color-mix(in srgb, var(--c-ink) 12%, transparent) 38%, color-mix(in srgb, var(--c-ink) 20%, transparent) 55%, color-mix(in srgb, var(--c-ink) 88%, transparent) 100%);
  transition: opacity var(--dur-base) linear;
}
/* A card with a line of text over a photo gets a deeper lower shade, so the line stays AA over any picture */
.mcard:has(.mcard__text):not(:has(.event-art))::after {
  background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 62%, transparent) 0%, color-mix(in srgb, var(--c-ink) 18%, transparent) 30%, color-mix(in srgb, var(--c-ink) 72%, transparent) 52%, color-mix(in srgb, var(--c-ink) 92%, transparent) 100%);
}
.mcard__head { display: grid; gap: 8px; justify-items: start; }
.mcard__title { font-family: var(--font-display); font-weight: 600; font-size: 20px; line-height: 1.2; letter-spacing: -0.01em; text-wrap: balance; }
.mcard__label { --eyebrow: var(--c-light); }
.mcard__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 16px; border-top: 1px solid color-mix(in srgb, var(--c-white) 55%, transparent); font-size: 14px; font-weight: 500; line-height: 1.35; }
.mcard:hover .mcard__img, .mcard:focus-visible .mcard__img, .mcard:hover .event-art, .mcard:focus-visible .event-art { transform: scale(1.04); }
.mcard:hover .arrow, .mcard:focus-visible .arrow { --arrow-bg: var(--color-accent); --arrow-fg: var(--color-on-accent); --arrow-border: var(--color-accent); }

/* Event cards without a photo are token art on the same dark as the panel: a hairline keeps the card readable as a card */
.mcard--event { outline: 1px solid var(--color-border-on-dark); outline-offset: -1px; }

/* Columns panel ad (14ah): an image-only card has no title, footer or shade */
.mcard--ad::after { content: none; }

/* Events list rows */
.erow {
  display: grid; grid-template-columns: 64px minmax(0, 1fr) 20px; align-items: center; gap: 14px;
  padding: 14px 12px; margin-inline: -12px;
  border-top: 1px solid var(--color-border-on-dark); border-radius: var(--r-sm);
  transition: background-color var(--dur-fast) linear;
}
.erow:last-of-type { border-bottom: 1px solid var(--color-border-on-dark); }
.erow__date { font-family: var(--font-body); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--c-light-muted); }
.erow__title { font-size: 16px; font-weight: 500; line-height: 1.35; color: var(--c-light); }
.erow small { display: inline-block; margin-top: 2px; font-size: 13px; font-weight: 400; color: var(--c-light-muted); }
.erow:hover, .erow:focus-visible { background: color-mix(in srgb, var(--c-light) 5%, transparent); }
.erow:hover .erow__title, .erow:focus-visible .erow__title { color: var(--c-white); }
.erow:hover svg, .erow:focus-visible svg { opacity: 1; transform: none; }
.mega__more { margin-top: 20px; }
.btn--outline-dark { --btn-bg: transparent; --btn-fg: var(--c-light); --btn-border: color-mix(in srgb, var(--c-light) 50%, transparent); --icon-bg: var(--c-light); --icon-fg: var(--c-ink); }
.btn--outline-dark:hover { --btn-border: var(--c-light); --icon-bg: var(--color-accent); }

.mega-scrim {
  position: fixed; inset: 0; z-index: 90; background: var(--color-scrim);
  opacity: 0; visibility: hidden; transition: opacity var(--dur-base) linear, visibility 0s linear var(--dur-base);
}
.mega-scrim.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }

/* ---- Dialog shells (drawer + mobile sheet) ------------------------------ */
/* overflow: clip (not hidden): the dialog must never scroll. With `hidden`, focusing
   the close button on open scrolled the dialog sideways toward the still-off-screen
   panel, which made the drawer jump instead of sliding. */
dialog.overlay {
  position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none;
  margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow: clip;
}
dialog.overlay::backdrop { background: transparent; }
.overlay__scrim { position: absolute; inset: 0; background: var(--color-scrim); opacity: 0; transition: opacity 320ms linear; }
.overlay.is-open .overlay__scrim { opacity: 1; }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: grid; place-items: center;
  transition: background-color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.icon-btn svg { width: 18px; height: 18px; }

/* ---- Quick Links drawer ------------------------------------------------- */
/* Flush to the right edge, full height, square corners (like staging).
   Scrolls by wheel/touch/keys with no visible scrollbar. */
.drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  overflow-y: auto; overscroll-behavior: contain;
  scrollbar-width: none;
  padding: 24px 48px 48px;
  background: var(--c-green); color: var(--c-ink);
  transform: translateX(100%);
  transition: transform var(--dur-drawer-in) var(--ease-drawer);
}
.drawer__panel::-webkit-scrollbar { display: none; }
.drawer.is-open .drawer__panel { transform: none; }
.drawer.is-closing .drawer__panel { transition-duration: var(--dur-drawer-out); transition-timing-function: var(--ease-inout); }
.drawer__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 40px; }
.drawer__logo { height: 20px; width: auto; filter: brightness(0); opacity: 0.9; }
.drawer__close { background: var(--c-ink); color: var(--c-light); }
.drawer__close:hover { transform: rotate(90deg); }
.qgroup__title { --eyebrow: var(--c-ink); margin-bottom: 12px; }
.qlinks { list-style: none; margin: 0; padding: 0; }
.qlinks a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0;
  font-size: 20px; line-height: 1.4; font-weight: 500; letter-spacing: -0.01em;
  transition: transform var(--dur-base) var(--ease-out);
}
.qlinks a svg { width: 16px; height: 16px; flex: none; opacity: 0; transform: translateX(-6px); transition: opacity var(--dur-fast) linear, transform var(--dur-base) var(--ease-out); }
.qlinks a:hover, .qlinks a:focus-visible { transform: translateX(4px); }
.qlinks a:hover svg, .qlinks a:focus-visible svg { opacity: 1; transform: none; }

/* Layout: Quick Links as a large bold list, a divider, then the other groups in
   two columns (one column when two don't fit) */
.drawer__primary .qlinks a {
  padding: 6px 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: 30px; line-height: 1.15; letter-spacing: -0.025em;
}
.drawer__primary .qlinks a svg { width: 20px; height: 20px; }
.drawer__groups {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 32px 40px;
  margin-top: 32px; padding-top: 32px;
  border-top: 1px solid color-mix(in srgb, var(--c-ink) 22%, transparent);
}
.drawer__groups .qlinks a { padding: 4px 0; font-size: 17px; }
@media (max-width: 480px) {
  .drawer__panel { padding: 20px 24px 40px; }
  .drawer__primary .qlinks a { font-size: 26px; }
}
/* Reduced motion: no slide; the drawer opens and closes instantly */
@media (prefers-reduced-motion: reduce) {
  .drawer__panel { transform: none; }
}

/* ---- Mobile sheet ------------------------------------------------------- */
.sheet__panel {
  position: absolute; inset: 0;
  overflow-y: auto; overscroll-behavior: contain;
  background: var(--c-ink); color: var(--c-light);
  padding: 0 var(--gutter);
  opacity: 0; transform: translateY(-16px);
  transition: opacity 320ms linear, transform 320ms var(--ease-out);
}
.sheet.is-open .sheet__panel { opacity: 1; transform: none; }
.sheet__top {
  position: sticky; top: 0; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
  background: var(--c-ink); border-bottom: 1px solid var(--color-border-on-dark);
}
.sheet__top img { height: 22px; width: auto; }
.sheet__close { color: var(--color-accent); margin-right: -13px; } /* the × glyph lines up with the row chevrons on the gutter (44px button, 18px glyph; mobile review MM3) */
.sheet__close:hover { background: color-mix(in srgb, var(--c-light) 6%, transparent); }
.sheet__nav { padding-top: 8px; }
.acc { border-bottom: 1px solid var(--color-border-on-dark); }
.acc > summary, .acc-link {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 18px 0;
  font-family: var(--font-display); font-weight: 600; font-size: 24px; line-height: 1.2; letter-spacing: -0.015em;
}
.acc > summary::-webkit-details-marker { display: none; }
.acc > summary svg { width: 14px; height: 14px; color: var(--color-accent); transition: transform var(--dur-base) var(--ease-out); }
.acc[open] > summary svg { transform: rotate(180deg); }
.acc-link { border-bottom: 1px solid var(--color-border-on-dark); }
.acc-link svg { width: 16px; height: 16px; color: var(--color-accent); }
.acc__body { padding: 0 0 24px; display: grid; gap: 20px; }
.acc__body .mega__links a { font-size: 19px; }
.acc__body .mega__title { margin-bottom: 8px; }
.sheet__cards {
  display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.sheet__cards::-webkit-scrollbar { display: none; }
.sheet__cards .mcard { flex: 0 0 min(250px, 72vw); aspect-ratio: auto; min-height: 190px; padding: 18px; scroll-snap-align: start; }
.sheet__cards .mcard__title { font-size: 18px; }
.sheet__quick { margin-top: 28px; padding: 6px 20px 10px; border-radius: var(--r-lg); background: var(--c-green); color: var(--c-ink); }
.sheet__quick .acc { border-bottom-color: color-mix(in srgb, var(--c-ink) 18%, transparent); }
.sheet__quick .acc:last-child { border-bottom: 0; }
.sheet__quick .acc > summary { font-size: 20px; padding: 16px 0; }
.sheet__quick .acc > summary svg { color: var(--c-ink); }
.sheet__quick .qlinks a { font-size: 18px; padding: 6px 0; }
.sheet__quick .acc__body { padding-bottom: 16px; gap: 0; }
.sheet__bottom {
  position: sticky; bottom: 0; z-index: 2;
  margin-top: 28px; margin-inline: calc(-1 * var(--gutter));
  padding: 20px var(--gutter) calc(20px + env(safe-area-inset-bottom));
  background: linear-gradient(to bottom, transparent, var(--c-ink) 32%);
}
.sheet__bottom .btn { width: 100%; }

/* Reduced motion (14ao): the hover arrow appears without sliding, the links do not nudge, the card image does not zoom */
@media (prefers-reduced-motion: reduce) {
  .mega__links a:hover, .mega__links a:focus-visible { transform: none; }
  .mega__links a svg, .erow svg { transform: none; }
  .mcard:hover .mcard__img, .mcard:focus-visible .mcard__img, .mcard:hover .event-art, .mcard:focus-visible .event-art { transform: none; }
}

/* Animated disclosure where supported (Chrome 131+); instant elsewhere */
@media (prefers-reduced-motion: no-preference) {
  :root { interpolate-size: allow-keywords; }
  .acc::details-content { block-size: 0; overflow: clip; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
  .acc[open]::details-content { block-size: auto; }
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 1199px) and (min-width: 1024px) {
  .mainnav__item { padding: 0 10px; }
}
@media (max-width: 1023px) {
  .site-header__bar { grid-template-columns: auto 1fr auto; }
  .mainnav, .mega { display: none; }
  .site-header__actions { grid-column: 3; gap: 8px; }
  .site-header__logo img { height: 20px; }
  .header-cta { height: 36px; padding: 0 14px; font-size: 12px; }
}
@media (max-width: 359px) {
  .header-cta__text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .header-cta { width: 40px; padding: 0; justify-content: center; }
  .header-cta::before { content: ""; width: 16px; height: 16px; background: currentColor; -webkit-mask: var(--pin-mask) center / contain no-repeat; mask: var(--pin-mask) center / contain no-repeat; }
}
:root { --pin-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 15s5-4.6 5-8.5A5 5 0 0 0 3 6.5C3 10.4 8 15 8 15Zm0-6.3a2.2 2.2 0 1 1 0-4.4 2.2 2.2 0 0 1 0 4.4Z'/%3E%3C/svg%3E"); }