/*
 * Site header (components/site/header/Header.tsx, HeaderMenu.tsx): logo, main menu, Donate button; below 1100px a
 * burger opens the menu as a card under the header. Same width as the footer (public/zz/footer.css).
 * !important only where the old theme styles a/ul/li/button globally.
 */
.zzh {
  --zh-h: 100px; --zh-b: #006db8; --zh-ink: #111418; --zh-line: #e8edf3;
  position: relative; z-index: 100; background: #fff; box-shadow: 0 1px 0 rgb(16 24 40 / 0.06), 0 8px 20px -14px rgb(16 24 40 / 0.22);
  font-family: "Roboto Condensed", "Roboto", system-ui, sans-serif;
}
.zzh--sticky { position: sticky; top: 0; }
.zzh *, .zzh *::before, .zzh *::after { box-sizing: border-box; }
.zzh ul { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzh li { margin: 0 !important; padding: 0 !important; list-style: none !important; }
.zzh li::before { display: none !important; }

/* white: the phone menu slides up behind it */
.zzh__bar { position: relative; background: #fff; display: flex; align-items: center; gap: clamp(14px, 1.8vw, 28px); max-width: 1680px; height: var(--zh-h); margin: 0 auto; padding: 0 clamp(16px, 4vw, 80px); }

.zzh__logo { display: inline-flex; flex: none; margin-right: auto; }
.zzh__logo img { display: block; width: auto; height: 50px; max-width: none; }

/* main menu */
.zzh__nav ul { display: flex; align-items: stretch; gap: 4px; height: var(--zh-h); }
.zzh__nav li { display: flex; }
.zzh__nav a {
  position: relative; display: flex; align-items: center; padding: 0 clamp(10px, 1.15vw, 18px);
  font: 500 18px/1 "Roboto Condensed", sans-serif; letter-spacing: 0.01em; text-transform: uppercase; white-space: nowrap;
  color: var(--zh-ink) !important; text-decoration: none !important; transition: color 0.2s ease;
}
.zzh__nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 3px; border-radius: 3px; background: var(--zh-b);
  transform: scaleX(0); transition: transform 0.25s ease;
}
.zzh__nav a:hover, .zzh__nav a:focus-visible { color: var(--zh-b) !important; }
.zzh__nav a:hover::after, .zzh__nav a:focus-visible::after, .zzh__nav a.is-active::after { transform: scaleX(1); }
.zzh__nav a:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: -6px; border-radius: 8px; }

/* Donate */
.zzh__donate {
  display: inline-flex; flex: none; align-items: center; height: 50px; padding: 0 22px; border: 2px solid var(--zh-ink); border-radius: 999px;
  font: 600 16px/1 "Poppins", sans-serif; letter-spacing: 0.03em; white-space: nowrap; color: var(--zh-ink) !important; text-decoration: none !important;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.zzh__donate:hover, .zzh__donate:focus-visible { border-color: var(--zh-b); background: var(--zh-b); color: #fff !important; }
.zzh__donate:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 3px; }

/* the donor account button: quieter than Donate, right beside it; its label on wide screens, the icon otherwise */
.zzh__account {
  display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; width: 50px; height: 50px; margin-right: -14px; padding: 0;
  border: 2px solid var(--zh-line); border-radius: 999px; color: var(--zh-ink) !important; text-decoration: none !important;
  font: 500 15px/1 "Poppins", sans-serif; white-space: nowrap; transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.zzh__account span { display: none; }
.zzh__account:hover, .zzh__account:focus-visible, .zzh__account[aria-current="page"] { border-color: var(--zh-b); color: var(--zh-b) !important; }
.zzh__account:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 3px; }
@media (min-width: 1440px) {
  .zzh__account { width: auto; padding: 0 20px 0 16px; }
  .zzh__account span { display: inline; }
}

/* burger (below desktop width) */
.zzh__burger {
  display: none; flex: none; place-content: center; gap: 5px; width: 46px; height: 46px; margin: 0 -8px 0 0 !important; padding: 0 !important;
  border: 0 !important; border-radius: 12px !important; background: transparent !important; box-shadow: none !important; color: var(--zh-ink); cursor: pointer;
}
.zzh__burger span { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform 0.25s ease, opacity 0.2s ease; }
.zzh__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.zzh__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.zzh__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.zzh__burger:hover { background: #f2f7fc !important; }
.zzh__burger:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: 0; }

/* the phone/tablet menu: a card that slides down from under the header like a curtain (and back up), roomy rows,
   the current page in blue, Donate as the button; its links fade in one after another.
   .zzh__drop is the window it slides through: everything below the header's bottom edge, overflow hidden, so the
   card is never drawn over the header bar while it moves (it used to slide behind the bar on z-index -1, but the
   bar's own white is painted under such a card, so its text, corners and shadow flickered through the bar).
   Only the card's transform animates (on the GPU, its own layer); the links only fade in, so text doesn't shimmer. */
.zzh__drop {
  position: absolute; top: 100%; left: 0; right: 0; height: calc(100vh - var(--zh-h)); height: calc(100dvh - var(--zh-h));
  overflow: hidden; pointer-events: none;
}
.zzh__panel {
  position: relative; max-height: 100%; overflow-y: auto; overscroll-behavior: contain; pointer-events: auto;
  border-radius: 0 0 22px 22px; background: #fff; box-shadow: 0 28px 48px -18px rgb(16 24 40 / 0.32);
  transform: translate3d(0, -100%, 0); backface-visibility: hidden; visibility: hidden; will-change: transform;
  transition: transform 0.38s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.38s;
}
.zzh__panel.is-open { transform: translate3d(0, 0, 0); visibility: visible; transition: transform 0.46s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s; }
/* closing: the links stay as they are while the card rolls up (hidden once it is up), like a curtain */
.zzh__panel li { opacity: 0; transition: opacity 0s linear 0.38s; }
.zzh__panel.is-open li { opacity: 1; transition: opacity 0.32s ease; transition-delay: calc(0.1s + var(--i, 0) * 0.04s); }
.zzh__panel ul { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 18px !important; }
.zzh__panel a {
  display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 16px; border-radius: 14px;
  font: 500 16px/1.2 "Poppins", sans-serif; color: #0b1b33 !important; text-decoration: none !important; transition: background-color 0.2s ease, color 0.2s ease;
}
.zzh__panel a:hover, .zzh__panel a:focus-visible { background: #f2f7fc; color: var(--zh-b) !important; }
.zzh__panel a:focus-visible { outline: 3px solid rgb(0 109 184 / 0.35); outline-offset: -3px; }
.zzh__panel a.is-active { background: #eaf3fb; color: var(--zh-b) !important; font-weight: 600; }
.zzh__panel a.is-donate {
  justify-content: center; margin-top: 10px; border-radius: 999px; background: linear-gradient(135deg, #0b7ac4 0%, #006db8 50%, #005592 100%);
  color: #fff !important; font-weight: 600; box-shadow: 0 10px 22px -10px rgb(0 109 184 / 0.7);
}
.zzh__panel a.is-donate:hover { filter: brightness(1.06); }

/* skip link: shown when tabbed to */
.zzh-skip {
  position: absolute; top: 8px; left: -9999px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: #fff; color: #006db8 !important;
  font: 600 15px/1 "Poppins", sans-serif; box-shadow: 0 6px 20px rgb(16 24 40 / 0.2);
}
.zzh-skip:focus { left: 8px; }
#content-start { height: 0; outline: none; }

/* tablets and phones: logo, Donate, burger */
@media (max-width: 1099px) {
  .zzh { --zh-h: 76px; }
  .zzh__bar { gap: 14px; }
  .zzh__nav { display: none; }
  .zzh__logo img { height: 42px; }
  .zzh__donate { height: 44px; padding: 0 18px; font-size: 15px; }
  .zzh__account { width: 44px; height: 44px; margin-right: -4px; }
  .zzh__burger { display: grid; }
}
@media (min-width: 1100px) {
  .zzh:not(.zzh--compact) .zzh__drop, .zzh:not(.zzh--compact) .zzh__panel { display: none !important; }
}
/* a main menu too long for the screen (more items or longer labels than fit): the burger instead of a header that
   spills off the edge. HeaderMenu.tsx adds .zzh--compact whenever the full menu doesn't fit. */
.zzh--compact .zzh__nav { display: none; }
.zzh--compact .zzh__burger { display: grid; }
@media (max-width: 639px) {
  .zzh { --zh-h: 70px; }
  .zzh__logo img { height: 38px; }
  .zzh__donate { display: none; }
  .zzh__account { margin-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .zzh__nav a::after, .zzh__burger span, .zzh__panel, .zzh__panel.is-open, .zzh__panel a, .zzh__panel li, .zzh__panel.is-open li { transition: none; }
}