/*
  WAD 2026 Half Marathon brand system (brief Section 3).
  White/light-gray stay the dominant surface; green is the one primary action color;
  red is reserved for the health/awareness thread and alerts so it never competes with
  green CTAs for attention.
*/
:root {
  --wad-green: #00a64f;
  --wad-green-dark: #00863f;
  --wad-charcoal: #221f1f;
  --wad-red: #ec2027;
  --wad-gray: #e2dfde;
  --wad-white: #ffffff;

  --wad-font-body: "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  --wad-radius: 14px;
  --wad-shadow: 0 6px 24px rgba(34, 31, 31, 0.08);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  font-family: var(--wad-font-body);
  color: var(--wad-charcoal);
  background: var(--wad-white);
  scroll-behavior: smooth;
}

img { max-width: 100%; display: block; }

a { color: var(--wad-green-dark); }

.container-narrow {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ---------- Buttons ---------- */
.btn-wad {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border-radius: 999px;
  padding: 0.85rem 1.75rem;
  font-weight: 600;
  text-decoration: none;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-size: 1rem;
}
.btn-wad:hover { transform: translateY(-1px); }

.btn-wad-primary {
  background: var(--wad-green);
  color: var(--wad-white);
  box-shadow: 0 4px 14px rgba(0, 166, 79, 0.35);
}
.btn-wad-primary:hover { background: var(--wad-green-dark); color: var(--wad-white); }

/* Default outline: for buttons on normal (theme-following) surfaces — cards, tables, toolbars. */
.btn-wad-outline {
  background: transparent;
  color: var(--wad-charcoal);
  border-color: var(--wad-gray);
}
.btn-wad-outline:hover { background: var(--wad-charcoal); color: var(--wad-white); border-color: var(--wad-charcoal); }

/* For buttons on surfaces that are always dark regardless of theme (e.g. the hero, the sidebar). */
.btn-wad-outline-invert {
  background: transparent;
  color: var(--wad-white);
  border-color: var(--wad-white);
}
.btn-wad-outline-invert:hover { background: var(--wad-white); color: var(--wad-charcoal); }

.btn-wad-outline-danger {
  background: transparent;
  color: var(--wad-red);
  border-color: var(--wad-red);
}
.btn-wad-outline-danger:hover { background: var(--wad-red); color: var(--wad-white); }

.btn-wad-alert {
  background: var(--wad-red);
  color: var(--wad-white);
}

/* Header chrome (top bar, navbar, mega menu) is kept verbatim from PublicSite/wwwroot/css/palette.css
   so both sites share one menu — update both files together. */
/* ---------- Layout chrome ---------- */
.wad-topbar {
  background: var(--wad-charcoal);
  color: var(--wad-gray);
  font-size: 0.8rem;
}
.wad-topbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  /* Vertical only — this element is also .container-narrow, whose side padding must survive. */
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
}
.wad-topbar-contact { display: flex; align-items: center; gap: 1.25rem; flex-wrap: wrap; }
.wad-topbar-contact a { color: var(--wad-gray); text-decoration: none; display: inline-flex; align-items: center; gap: 0.35rem; }
.wad-topbar-contact a:hover { color: var(--wad-white); }
.wad-topbar-utils { display: flex; align-items: center; gap: 0.85rem; }
.wad-topbar .lang-switch a { font-size: 0.8rem; font-weight: 700; color: var(--wad-gray); }
.wad-topbar .lang-switch a.text-green { color: #35d17e; }
.wad-topbar-theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.25);
  background: transparent;
  color: var(--wad-gray);
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wad-topbar-theme:hover { background: rgba(255, 255, 255, 0.1); }

.wad-navbar {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(10px);
  -webkit-backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--wad-gray);
  position: sticky;
  top: 0;
  z-index: 50;
  transition: box-shadow 0.2s ease;
}
.wad-navbar.is-scrolled { box-shadow: 0 4px 20px rgba(34, 31, 31, 0.1); }
.wad-navbar .brand { display: flex; align-items: center; gap: 0.6rem; font-weight: 700; color: var(--wad-charcoal); text-decoration: none; }
.wad-navbar .brand img { height: 40px; width: auto; border-radius: 6px; }

/* Self-contained hamburger button: Bootstrap's .navbar-toggler-icon reads a CSS custom
   property that's only ever set inside a real .navbar component, which .wad-navbar (our
   custom class) never provides — that left the button rendering with no visible icon. */
.wad-nav-toggler {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  cursor: pointer;
}
.wad-nav-toggler:hover { background: var(--wad-gray); }
.wad-nav-toggler-bar {
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 2px;
  background: var(--wad-charcoal);
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.wad-nav-toggler[aria-expanded="true"] .wad-nav-toggler-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.wad-nav-toggler[aria-expanded="true"] .wad-nav-toggler-bar:nth-child(2) { opacity: 0; }
.wad-nav-toggler[aria-expanded="true"] .wad-nav-toggler-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
body.wad-dark .wad-nav-toggler:hover { background: #3a3636; }
body.wad-dark .wad-nav-toggler-bar { background: var(--wad-white); }

/* ---------- Mega menu ---------- */
.wad-nav { display: flex; flex-wrap: wrap; align-items: center; gap: 0.15rem; }
.wad-nav-link {
  display: inline-flex;
  align-items: center;
  color: var(--wad-charcoal);
  text-decoration: none;
  font-weight: 500;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  background: transparent;
  border: none;
  font: inherit;
  cursor: pointer;
}
.wad-nav-link:hover, .wad-nav-link.active { background: var(--wad-gray); }
.wad-nav-link:focus-visible { outline: 2px solid var(--wad-green); outline-offset: 2px; }

/* No position:relative here deliberately — .wad-mega-panel is absolutely positioned
   against .wad-navbar (the nearest positioned ancestor, via position:sticky) so the
   panel spans the full site width rather than just this trigger's width. */
.wad-mega-chevron {
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-left: 0.4em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.15s ease;
  opacity: 0.6;
}
.wad-mega-trigger[aria-expanded="true"] .wad-mega-chevron { transform: rotate(-135deg) translateY(1px); }

.wad-mega-panel {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: var(--wad-white);
  border-top: 3px solid var(--wad-green);
  box-shadow: var(--wad-shadow);
  z-index: 60;
}
.wad-mega-panel.is-open {
  display: block;
  animation: wad-mega-in 0.15s ease;
}
@keyframes wad-mega-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

.wad-mega-inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) minmax(220px, 0.9fr);
  gap: 0.5rem 1.5rem;
  padding: 1.5rem 1.25rem;
}
.wad-mega-col { display: flex; flex-direction: column; gap: 0.25rem; }

.wad-mega-link {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.6rem;
  border-radius: 10px;
  text-decoration: none;
  color: var(--wad-charcoal);
  transition: background 0.15s ease;
}
.wad-mega-link:hover, .wad-mega-link:focus-visible { background: var(--wad-gray); }
.wad-mega-link .icon { font-size: 1.3rem; line-height: 1.3; flex-shrink: 0; }
.wad-mega-link strong { display: block; font-size: 0.95rem; }
.wad-mega-link small { display: block; color: #6b6867; font-size: 0.8rem; font-weight: 400; }

.wad-mega-promo {
  background: var(--wad-gray);
  border-radius: var(--wad-radius);
  padding: 1.25rem;
  border-left: 1px solid rgba(0,0,0,0.05);
}
.wad-mega-promo h4 { margin: 0.4rem 0 0.35rem; font-size: 1.15rem; font-weight: 800; }
.wad-mega-promo p { font-size: 0.85rem; color: #52504f; margin-bottom: 0.9rem; }
.wad-mega-promo .btn-wad { padding: 0.55rem 1.1rem; font-size: 0.85rem; width: 100%; }

@media (max-width: 991.98px) {
  .wad-nav { flex-direction: column; align-items: stretch; gap: 0.15rem; width: 100%; }
  .wad-mega-trigger { width: 100%; justify-content: space-between; }
  .wad-mega-panel {
    display: none;
    position: static;
    width: auto;
    box-shadow: none;
    border-top: none;
    border-left: 2px solid var(--wad-green);
    margin: 0.15rem 0 0.4rem 0.85rem;
  }
  .wad-mega-panel.is-open { animation: none; }
  .wad-mega-inner { grid-template-columns: 1fr; padding: 0.5rem 0.75rem; gap: 0.75rem; }
}

.wad-footer {
  background: var(--wad-charcoal);
  color: var(--wad-white);
  padding: 3rem 0 1.5rem;
}
.wad-footer a { color: var(--wad-gray); }
.wad-footer h4 { color: var(--wad-white); }
.wad-footer .legal-strip { border-top: 1px solid rgba(255,255,255,0.15); margin-top: 2rem; padding-top: 1.25rem; font-size: 0.85rem; color: var(--wad-gray); }

/* ---------- Sections ---------- */
.wad-hero {
  background: linear-gradient(160deg, var(--wad-charcoal) 0%, #3a3536 100%);
  color: var(--wad-white);
  padding: 4rem 0 3rem;
}
.wad-hero .eyebrow { color: var(--wad-green); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; font-size: 0.85rem; }
.wad-hero h1 { font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; margin: 0.5rem 0 1rem; }
.wad-hero p.lead { color: var(--wad-gray); font-size: 1.1rem; max-width: 42rem; }

.wad-countdown { display: flex; gap: 1rem; margin: 1.75rem 0; flex-wrap: wrap; }
.wad-countdown .unit { background: rgba(255,255,255,0.08); border-radius: var(--wad-radius); padding: 0.9rem 1.1rem; min-width: 82px; text-align: center; }
.wad-countdown .unit .num { font-size: 1.8rem; font-weight: 800; color: var(--wad-white); display: block; }
.wad-countdown .unit .label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--wad-gray); }

.wad-section { padding: 3.5rem 0; }
.wad-section-alt { background: var(--wad-gray); }
.wad-section h2 { font-size: clamp(1.5rem, 3vw, 2.1rem); font-weight: 800; margin-bottom: 0.5rem; }
.wad-section .section-lead { color: #52504f; max-width: 44rem; margin-bottom: 2rem; }

.wad-card {
  background: var(--wad-white);
  border-radius: var(--wad-radius);
  box-shadow: var(--wad-shadow);
  padding: 1.5rem;
  height: 100%;
}
.wad-card h3 { margin-top: 0; }

.wad-grid { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.wad-badge {
  display: inline-block;
  background: rgba(0, 166, 79, 0.12);
  color: var(--wad-green-dark);
  border-radius: 999px;
  padding: 0.2rem 0.75rem;
  font-size: 0.8rem;
  font-weight: 700;
}

.wad-alert-badge {
  background: rgba(236, 32, 39, 0.1);
  color: var(--wad-red);
}

.wad-sponsor-strip { display: flex; gap: 2rem; flex-wrap: wrap; align-items: center; justify-content: center; opacity: 0.85; }
.wad-sponsor-strip img { height: 48px; width: auto; filter: grayscale(1); }

/* ---------- Utility ---------- */
.text-green { color: var(--wad-green-dark); }
.text-red { color: var(--wad-red); }
.wad-skip-link {
  position: absolute; left: -999px; top: 0; background: var(--wad-green); color: #fff;
  padding: 0.75rem 1rem; z-index: 100; border-radius: 0 0 8px 0;
}
.wad-skip-link:focus { left: 0; }

@media (max-width: 640px) {
  .wad-hero { padding: 2.5rem 0 2rem; }
  .wad-section { padding: 2.25rem 0; }
}

/* ---------- Dark / high-contrast mode (brief Section 10) ---------- */
body.wad-dark {
  background: #17151580;
  background: var(--wad-charcoal);
  color: var(--wad-gray);
}
/* The page behind <body> must go dark too, or short pages show a white band below the footer. */
html:has(body.wad-dark) { background: var(--wad-charcoal); }
body.wad-dark .wad-navbar { background: rgba(44, 41, 41, 0.92); border-color: #3a3636; }
body.wad-dark .wad-navbar .brand,
body.wad-dark .wad-nav-link { color: var(--wad-white); }
body.wad-dark .wad-nav-link:hover, body.wad-dark .wad-nav-link.active { background: #3a3636; }
body.wad-dark .wad-mega-panel { background: #221f1f; border-top-color: var(--wad-green); box-shadow: none; }
body.wad-dark .wad-mega-link { color: var(--wad-white); }
body.wad-dark .wad-mega-link:hover, body.wad-dark .wad-mega-link:focus-visible { background: #3a3636; }
body.wad-dark .wad-mega-link small { color: #c9c6c5; }
body.wad-dark .wad-mega-promo { background: #2c2929; border-left-color: rgba(255,255,255,0.05); }
body.wad-dark .wad-mega-promo p { color: #c9c6c5; }
@media (max-width: 991.98px) {
  body.wad-dark .wad-mega-panel { border-left-color: var(--wad-green); }
}
body.wad-dark .wad-section-alt { background: #2c2929; }
body.wad-dark .wad-card { background: #2c2929; color: var(--wad-white); box-shadow: none; border: 1px solid #3a3636; }
body.wad-dark .section-lead { color: #c9c6c5; }
body.wad-dark a { color: #35d17e; }

/* Outline buttons: default variant follows the theme (charcoal-on-white in light was
   invisible as charcoal-on-dark-card in dark mode without this — see git history). The
   -invert and -danger variants are unaffected since they're theme-independent by design. */
body.wad-dark .btn-wad-outline { color: var(--wad-gray); border-color: #3a3636; }
body.wad-dark .btn-wad-outline:hover { background: var(--wad-gray); color: var(--wad-charcoal); border-color: var(--wad-gray); }

/* Status badges: the light-mode tint (green-dark/red text over a ~12% tinted fill) drops
   to ~2.7:1 contrast when the fill composites over a dark card instead of white — brighten
   the text and deepen the fill so both clear 4.5:1 again. */
body.wad-dark .wad-badge { background: rgba(0, 166, 79, 0.22); color: #35d17e; }
body.wad-dark .wad-alert-badge { background: rgba(236, 32, 39, 0.18); color: #ff6b6f; }