/* Sticky header on every page. On Home (headerOverlay) it floats over the video hero and turns solid on scroll. */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--ink); color: #fff;
  transition: background-color .35s var(--ease), box-shadow .35s var(--ease);
}
.site-header.is-scrolled { box-shadow: 0 6px 24px color-mix(in srgb, var(--navy-deep) 35%, transparent); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  max-width: 1320px; min-height: var(--header-h); margin: 0 auto; padding: 0 32px;
}
.site-header__logo img { width: 130px; height: auto; }
.site-header__toggle { display: none; background: none; border: 0; color: #fff; padding: 8px; margin-right: -8px; }
.site-header__toggle .icon-close { display: none; }
.site-nav { display: flex; align-items: center; gap: 18px; }
.site-nav__menu { display: flex; list-style: none; align-items: center; gap: 4px; }
.site-nav__link {
  position: relative; display: block; padding: 8px 10px;
  font-size: 13px; line-height: 24px; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 600;
  color: rgba(255, 255, 255, .9); white-space: nowrap; transition: color .2s;
}
.site-nav__link::after {
  content: ""; position: absolute; left: 10px; right: 10px; bottom: 2px; height: 2px; border-radius: 2px;
  background: var(--cyan); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease);
}
.site-nav__link:hover, .site-nav__item.is-current .site-nav__link { color: #fff; }
.site-nav__link:hover::after, .site-nav__item.is-current .site-nav__link::after { transform: scaleX(1); }
.btn-donate {
  display: inline-block; padding: 12px 22px; border-radius: 999px;
  background: var(--light); color: var(--navy); font-size: 13px; line-height: 1; letter-spacing: 1.6px; text-transform: uppercase; font-weight: 700;
  transition: background-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.btn-donate:hover { background: var(--cyan); color: var(--navy-deep); transform: translateY(-1px); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--cyan) 60%, transparent); }

/* Home: transparent over the hero until scrolled or the menu is open. */
.site-header--overlay { position: fixed; left: 0; right: 0; background: linear-gradient(to bottom, color-mix(in srgb, var(--navy-deep) 55%, transparent), color-mix(in srgb, var(--navy-deep) 0%, transparent)); }
.site-header--overlay.is-scrolled, .site-header--overlay.is-open { background-color: var(--ink); }

@media (max-width: 1240px) {
  .site-nav__link { padding: 8px 7px; letter-spacing: 1.2px; }
  .site-nav__link::after { left: 7px; right: 7px; }
}
@media (max-width: 1100px) {
  :root { --header-h: 64px; }
  .site-header__inner { flex-wrap: wrap; gap: 0; padding: 0 20px; }
  .site-header__logo img { width: 112px; }
  .site-header__toggle { display: inline-flex; }
  .site-header.is-open .icon-menu { display: none; }
  .site-header.is-open .icon-close { display: block; }
  .site-nav { display: none; flex-basis: 100%; flex-direction: column; align-items: stretch; gap: 0; padding: 4px 0 20px; }
  .site-header.is-open .site-nav { display: flex; max-height: calc(100vh - var(--header-h)); overflow-y: auto; }
  .site-nav__menu { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav__link { padding: 14px 4px; font-size: 14px; border-bottom: 1px solid rgba(255, 255, 255, .1); }
  .site-nav__link::after { display: none; }
  .site-nav__item.is-current .site-nav__link { color: var(--cyan); }
  .btn-donate { margin-top: 20px; padding: 15px 22px; text-align: center; }
}