/* ============================================================
   SITE HEADER — aligned with JS BEM class names (site-header__*)

   COLOR STRATEGY: header uses a very dark navy-indigo surface
   (same hue family as the gradient) so it reads as a deeper,
   more concentrated layer of the page — complementary, not clashing.
   ============================================================ */

/* Placeholder skeleton — reserves space and matches final header
   appearance so page load is seamless before JS replaces it.
   :empty ensures this only applies before JS fills the element. */
#site-header:empty {
  display: block;
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  min-height: 88px;
  background: rgba(5, 7, 22, 0.97);
  border-bottom: 1px solid rgba(129,140,248,0.28);
  box-shadow: 0 4px 32px rgba(0,0,0,0.45);
}

header.site-header {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 100;
  width: 100%;

  /* Deep navy-indigo: same family as the gradient, more concentrated */
  background: rgba(5, 7, 22, 0.92);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);

  /* Soft indigo border — feels like the gradient condensed */
  border-bottom: 1px solid rgba(129,140,248,0.28);
  box-shadow: 0 4px 32px rgba(0,0,0,0.45);
}

/* ============================================================
   INNER GRID — Desktop: brand | images | lang | [burger hidden]
                Nav spans full width on row 2
   ============================================================ */
.site-header__inner {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 11px 24px;
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  grid-template-rows: auto auto;
  grid-template-areas:
    "brand images lang burger"
    "nav   nav    nav  nav";
  align-items: stretch;
  gap: 6px 14px;
}

/* ============================================================
   BRAND
   ============================================================ */
.site-header__brandline {
  grid-area: brand;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.site-header__brand {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: #fff;
  white-space: nowrap;
  cursor: default;
  /* Subtle text shadow picks up the gradient glow */
  text-shadow: 0 0 24px rgba(129,140,248,0.35);
}

/* ============================================================
   IMAGES
   ============================================================ */
.site-header__images {
  grid-area: images;
  display: flex;
  align-items: center;
  gap: 8px;
}

.site-header__img {
  display: block;
  height: 28px;
  width: auto;
  border-radius: 4px;
  opacity: 0.80;
  transition: opacity 180ms;
}
.site-header__img:hover { opacity: 1; }

/* ============================================================
   LANGUAGE BUTTON & DROPDOWN
   ============================================================ */
.site-header__lang {
  grid-area: lang;
  position: relative;
  display: flex;
  align-items: center;
}

/* ---- Google Translate widget overrides ---- */
#google_translate_element .goog-te-gadget {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0; /* hides "Powered by Translate" text node */
  line-height: 1;
}

/* Hide until JS has styled it — prevents flash of unstyled GT button */
#google_translate_element .goog-te-gadget-simple {
  background: rgba(129,140,248,0.10) !important;
  border: 1px solid rgba(129,140,248,0.28) !important;
  border-radius: 20px !important;
  padding: 5px 8px 5px 10px !important;
  white-space: nowrap;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  transition: background 180ms, border-color 180ms, visibility 0s;
  visibility: hidden;
}

#google_translate_element.gt-styled .goog-te-gadget-simple {
  visibility: visible;
}

#google_translate_element .goog-te-gadget-simple:hover {
  background: rgba(129,140,248,0.22) !important;
  border-color: rgba(129,140,248,0.55) !important;
}

#google_translate_element .goog-te-menu-value {
  display: inline-flex !important;
  align-items: center !important;
  gap: 4px !important;
  text-decoration: none !important;
  border: none !important;
}

#google_translate_element .goog-te-menu-value span {
  color: rgba(255,255,255,0.68) !important;
  font-size: 0.80rem !important;
  font-weight: 600 !important;
  font-family: 'Inter', system-ui, sans-serif !important;
  padding: 0 !important;
}

#google_translate_element .goog-te-menu-value:hover,
#google_translate_element .goog-te-menu-value:hover span {
  color: #c7d2fe !important;
}

/* Hide cleardot spacer images via CSS, show only the G logo (first img child of .goog-te-gadget-simple) */
#google_translate_element .goog-te-gadget-simple a img {
  display: none !important;
}
#google_translate_element .goog-te-gadget-simple > img {
  display: inline !important;
  height: 14px !important;
  width: auto !important;
  vertical-align: middle !important;
  flex-shrink: 0 !important;
}

/* select-style fallback (some regions render a <select> instead) */
#google_translate_element select.goog-te-combo {
  background: rgba(129,140,248,0.10);
  color: rgba(255,255,255,0.68);
  border: 1px solid rgba(129,140,248,0.28);
  border-radius: 20px;
  padding: 5px 8px 5px 10px;
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  outline: none;
  transition: background 180ms, border-color 180ms, color 180ms;
}

#google_translate_element select.goog-te-combo:hover {
  background: rgba(129,140,248,0.22);
  border-color: rgba(129,140,248,0.55);
  color: #c7d2fe;
}

.site-header__btn {
  background: rgba(129,140,248,0.10);
  color: rgba(255,255,255,0.78);
  border: 1px solid rgba(129,140,248,0.28);
  border-radius: 20px;
  padding: 5px 14px;
  font-size: 0.80rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 180ms, border-color 180ms, color 180ms;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
}

.site-header__btn:hover,
.site-header__btn[aria-expanded="true"] {
  background: rgba(129,140,248,0.22);
  border-color: rgba(129,140,248,0.55);
  color: #c7d2fe;
}

.site-header__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  min-width: 250px;
  background: rgba(5,7,22,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(129,140,248,0.22);
  border-radius: 14px;
  padding: 14px;
  z-index: 200;
  transition: opacity 180ms, transform 180ms;
}

.site-header__menu[aria-hidden="true"] {
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
}

.site-header__menu[aria-hidden="false"] {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.menu-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(129,140,248,0.65);
  padding: 4px 6px;
}

.menu-group { margin-top: 10px; }

.menu-list {
  list-style: none;
  margin: 4px 0 0;
  padding: 0;
}

.menu-list li a {
  display: block;
  padding: 7px 8px;
  border-radius: 8px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 0.88rem;
  font-family: 'Inter', system-ui, sans-serif;
  transition: background 140ms, color 140ms;
}

.menu-list li a:hover {
  background: rgba(129,140,248,0.16);
  color: #c7d2fe;
}

/* ============================================================
   HAMBURGER BUTTON
   ============================================================ */
.site-header__burger {
  grid-area: burger;
  display: none; /* hidden on desktop */
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 38px;
  height: 38px;
  padding: 6px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 8px;
  cursor: pointer;
  transition: background 180ms, border-color 180ms;
}

.site-header__burger:hover {
  background: rgba(129,140,248,0.18);
  border-color: rgba(129,140,248,0.40);
}

/* The three bars */
.site-header__burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(255,255,255,0.80);
  border-radius: 2px;
  transition: transform 220ms var(--ease-snap, ease), opacity 180ms, width 220ms;
  transform-origin: center;
}

/* Animate to × when open */
header.site-header.nav-open .site-header__burger span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
header.site-header.nav-open .site-header__burger span:nth-child(2) {
  opacity: 0;
  width: 0;
}
header.site-header.nav-open .site-header__burger span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ============================================================
   PRIMARY NAV — Desktop
   ============================================================ */
.site-header__nav {
  grid-area: nav;
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  align-items: center;
  padding: 5px 0 3px;
  border-top: 1px solid rgba(255,255,255,0.07);
  /* Pull left so the first tab's text aligns with body content edge
     (compensates for the 11px left padding on each nav link) */
  margin-left: -11px;
}

.site-header__nav a {
  color: rgba(255,255,255,0.68);
  text-decoration: none;
  font-size: 0.92rem;
  font-weight: 500;
  padding: 5px 11px;
  border-radius: 6px;
  transition: background 140ms, color 140ms;
  white-space: nowrap;
  font-family: 'Inter', system-ui, sans-serif;
}

.site-header__nav a:hover {
  background: rgba(129,140,248,0.16);
  color: #c7d2fe;
}

.site-header__nav a[aria-current="page"] {
  background: rgba(129,140,248,0.18);
  color: #c7d2fe;
}

/* ============================================================
   BALLOT BLOCK — localized landing pages
   ============================================================ */
.ballot-block {
  max-width: 740px;
  margin: 14px auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  box-shadow: 0 2px 16px rgba(0,0,0,0.25);
  overflow: hidden;
}

.ballot-block img { display: block; max-width: 100%; height: auto; }
.ballot-block img[src*="write-in-ballot"] { margin-bottom: -8px; }

figure img[src*="write-in-ballot"] { display: block; max-width: 100%; height: auto; }
figure:has(> img[src*="write-in-ballot"]) {
  max-width: 740px;
  margin: 14px auto;
  padding: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 10px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}

/* ============================================================
   MOBILE — ≤ 700px
   Collapse to: brand | lang | burger
   Nav hidden until burger toggles .nav-open on <header>
   ============================================================ */
@media (max-width: 700px) {
  .site-header__inner {
    padding: 10px 24px;
    grid-template-columns: 1fr auto auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "brand lang burger"
      "nav   nav  nav";
    gap: 0 10px;
  }

  /* Show hamburger on mobile */
  .site-header__burger { display: flex; }

  /* Hide images on mobile (write-in gif) */
  .site-header__images { display: none; }

  /* Nav hidden by default on mobile */
  .site-header__nav {
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    padding: 10px 0 8px;
    border-top: 1px solid rgba(255,255,255,0.09);
    margin-left: 0; /* reset desktop compensation */
  }

  /* Show nav when burger is open */
  header.site-header.nav-open .site-header__nav {
    display: flex;
  }

  .site-header__nav a {
    font-size: 0.92rem;
    padding: 10px 12px;
    border-radius: 8px;
  }
}