:root {
  --gold: #f5c452;
  --ink: #17181a;
  --cream: #f7f4ee;
  --line: #e3ded2;
  --footer-bg: #0b0b0b;
  --footer-text: #b7b7b7;
  --font-body: "Rethink Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-heading: "DM Serif Display", Georgia, "Times New Roman", serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: #fff;
  line-height: 1.5;
}
h1, h2, h3 { font-family: var(--font-heading); font-weight: 400; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 1000;
  background: #fff; color: var(--ink); padding: 0.75em 1.25em;
}
.skip-link:focus { left: 0.5em; top: 0.5em; }

/* ---------------- Header ----------------
   Confirmed on live: header is `position: absolute`, transparent, overlaying only the
   hero image -- NOT sticky/fixed. It scrolls away with the page (verified by scrolling
   800px and re-reading getComputedStyle: still position: absolute, still transparent). */
.site-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 500;
  background: transparent;
}
.site-header-inner {
  max-width: 1320px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5em;
  gap: 1.5em;
}
.site-logo { display: block; }
.site-logo img { height: 52px; width: auto; }
.site-nav { display: none; }
.nav-hamburger {
  background: none; border: none; cursor: pointer; padding: 0.5em;
  display: flex; flex-direction: column; gap: 5px;
}
.nav-hamburger span { width: 26px; height: 2px; background: #fff; display: block; }
.btn-donate {
  display: none;
  background: var(--gold); color: #000; font-weight: 700; text-transform: uppercase;
  font-size: 0.85rem; letter-spacing: 0.03em; padding: 0.7em 1.5em; border-radius: 2px;
  border: 1px solid var(--gold);
}
/* CORRECTED 2026-09-21 verification pass: confirmed live's real header nav/hamburger
   breakpoint via binary-search getComputedStyle checks (not a screenshot glance) -- full
   nav shows starting at exactly 800px width (799px = hamburger, 800px = full nav), not
   900px as an earlier pass assumed. At widths just above the breakpoint (roughly
   800-900px) live's own nav items don't all fit on one line and the list wraps ("Contact
   Us" drops to a second row, right-aligned) rather than overflowing -- reproduced below
   via flex-wrap. */
@media (min-width: 800px) {
  .site-nav { display: block; }
  .nav-hamburger { display: none; }
  .btn-donate { display: inline-block; }
}
.site-nav > ul {
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center;
  flex-wrap: wrap; justify-content: flex-end; row-gap: 0.5em; gap: 1.75em;
}
.nav-item > a, .nav-folder-toggle {
  color: #fff; font-weight: 500; font-size: 1rem;
  background: none; border: none; cursor: pointer;
  font-family: var(--font-body); display: flex; align-items: center; gap: 0.4em; padding: 0;
}
/* Confirmed on live: nav link color/decoration is IDENTICAL at rest and under real
   :hover (rgb(255,255,255) both states) -- no hover color/underline affordance on the
   top-level links themselves. Intentionally no :hover rule here to match. */
.nav-folder { position: relative; }
.nav-dropdown {
  list-style: none; margin: 0; padding: 0.5em 0;
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  /* Confirmed on live via real-hover getComputedStyle: dropdown panel background is
     rgb(23, 31, 49) / #171F31 (dark navy), not white. */
  background: #171f31; min-width: 240px; box-shadow: 0 12px 30px rgba(0,0,0,0.35);
  border-radius: 2px; display: none;
}
.nav-folder.is-open .nav-dropdown { display: block; }
.nav-folder.is-open .nav-caret { transform: rotate(180deg); }
/* Confirmed on live: desktop nav uses a real hover-triggered mega-menu plugin
   (window.wmMegaMenuSettings / willmyerscode megaMenu, loaded from
   cdn.jsdelivr.net/gh/willmyerscode/megaMenu@2), not a click-only toggle. Hover-reveal
   added here at desktop width, alongside the existing click/keyboard toggle (kept for
   touch and keyboard accessibility, since hover alone isn't reachable that way). */
@media (min-width: 800px) {
  .nav-folder:hover .nav-dropdown,
  .nav-folder:focus-within .nav-dropdown { display: block; }
  .nav-folder:hover .nav-caret,
  .nav-folder:focus-within .nav-caret { transform: rotate(180deg); }
}
.nav-caret { transition: transform 0.15s ease; }
.nav-dropdown li a {
  display: block; padding: 0.6em 1.25em; color: #fff;
  font-size: 0.9rem; font-weight: 500; white-space: nowrap;
}
.nav-dropdown li a:hover { background: rgba(255,255,255,0.08); }

/* ---------------- Mobile menu ---------------- */
.mobile-menu {
  position: fixed; inset: 0; z-index: 900; background: #fff; overflow-y: auto;
}
.mobile-menu[hidden] { display: none; }
.mobile-menu-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.2em 1.5em;
}
/* The live logo asset is a white-outline PNG meant for the dark header overlay; on the
   mobile menu's white panel it needs inverting to stay visible. Not independently
   verified against a live mobile-menu screenshot -- flagged as a pragmatic assumption,
   not a confirmed-live value, per the project's typography/visual-detail rigor rule. */
.mobile-menu-header .site-logo img { filter: invert(1) brightness(0.2); }
.mobile-menu-close { background: none; border: none; color: var(--ink); cursor: pointer; padding: 0.5em; }
.mobile-menu-nav { padding: 2em 1.5em 3em; }
.mnav-panel[hidden] { display: none; }
.mnav-folder-open, .mnav-link {
  display: flex; align-items: center; justify-content: center; gap: 0.4em;
  width: 100%; background: none; border: none; cursor: pointer;
  font-family: var(--font-body); font-weight: 600;
  font-size: 1.3rem; color: var(--ink); text-align: center;
  padding: 0.55em 0; text-decoration: none;
}
.mnav-link--top { font-weight: 700; }
.mnav-link--donate { color: #b5852c; font-weight: 700; }
.mnav-back {
  display: flex; align-items: center; gap: 0.4em; margin: 0 auto 1.5em; background: none;
  border: none; color: #9a9a9a; font-weight: 600;
  font-size: 1.1rem; cursor: pointer; font-family: var(--font-body);
}

/* ---------------- Footer ---------------- */
.site-footer { background: var(--footer-bg); color: var(--footer-text); }
.site-footer-inner {
  max-width: 1280px; margin: 0 auto; padding: 4em 1.5em 2.5em;
  display: grid; grid-template-columns: 1fr; gap: 2.5em;
}
@media (min-width: 800px) {
  .site-footer-inner { grid-template-columns: 1fr 0.8fr 1fr 1fr 1.1fr; align-items: start; }
}
.footer-newsletter-title { color: var(--gold); font-weight: 700; margin: 0 0 0.75em; }
.footer-newsletter-form { display: grid; gap: 0.6em; }
.footer-newsletter-form input {
  padding: 0.6em 0.9em; border: 1px solid #333; background: rgba(255,255,255,0.06);
  color: #fff; border-radius: 2px; font-family: var(--font-body); font-size: 0.9rem;
}
.footer-newsletter-form input::placeholder { color: #8a8a8a; }
.footer-newsletter-form button {
  justify-self: start; background: var(--gold); color: #000; font-weight: 700;
  border: none; padding: 0.6em 1.4em; border-radius: 2px; text-transform: uppercase;
  font-size: 0.8rem; letter-spacing: 0.03em; cursor: pointer;
}
.footer-quote { font-family: var(--font-heading); font-style: italic; color: #fff; font-size: 1.05rem; line-height: 1.5; }
.footer-quote-attr { display: block; margin-top: 0.5em; font-family: var(--font-body); font-style: normal; font-size: 0.85rem; color: var(--footer-text); }
.footer-nav ul { list-style: none; margin: 0; padding: 0; text-align: center; }
@media (min-width: 800px) { .footer-nav ul { text-align: left; } }
.footer-nav li { margin-bottom: 0.75em; }
.footer-nav a { color: #fff; font-weight: 500; }
.footer-nav a:hover { color: var(--gold); }
.footer-col { text-align: center; }
@media (min-width: 800px) { .footer-col { text-align: left; } }
.footer-address-label { color: var(--gold); font-weight: 700; margin: 0 0 0.25em; }
.footer-address { margin: 0 0 1em; font-size: 0.9rem; }
.footer-col--links a { color: #fff; text-decoration: underline; }
.footer-social-title { color: var(--gold); font-weight: 700; margin: 1em 0 0.75em; }
.footer-social-icons { display: flex; gap: 0.6em; justify-content: center; }
@media (min-width: 800px) { .footer-social-icons { justify-content: flex-start; } }
.social-icon {
  width: 34px; height: 34px; border-radius: 50%; background: #fff; color: #000;
  display: flex; align-items: center; justify-content: center;
}
.site-footer-bottom { text-align: center; padding: 1.5em 1.5em 2.5em; font-size: 0.85rem; max-width: 900px; margin: 0 auto; }
.site-footer-bottom a { color: var(--footer-text); text-decoration: underline; }
.footer-legal { margin-top: 0.75em; font-size: 0.78rem; color: #8a8a8a; }

/* ---------------- Sign-up floating button + modal ---------------- */
.signup-fab {
  position: fixed; right: 1.25em; bottom: 1.25em; z-index: 700;
  background: var(--gold); color: #000; font-weight: 700; border: none;
  padding: 0.85em 1.4em; border-radius: 30px; font-size: 0.85rem; cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,0.25); font-family: var(--font-body);
}
.signup-modal { position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.6); display: flex; align-items: center; justify-content: center; padding: 1.5em; }
.signup-modal[hidden] { display: none; }
.signup-modal-panel { background: #fff; border-radius: 8px; max-width: 440px; width: 100%; padding: 2.5em 2em; position: relative; }
.signup-modal-close { position: absolute; top: 0.9em; right: 0.9em; background: none; border: none; color: var(--ink); cursor: pointer; padding: 0.4em; }
.signup-modal-body h2 { margin: 0 0 0.5em; font-size: 1.5rem; }
.signup-modal-body p { margin: 0 0 1.25em; color: #3c4657; }
.signup-modal-body form { display: grid; gap: 0.9em; }
.signup-modal-body input {
  padding: 0.75em 1em; border: 1px solid var(--line); border-radius: 2px;
  font-family: var(--font-body); font-size: 1rem;
}
.signup-modal-body button { justify-self: start; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}