/* Clutch Academy — "carnival" theme.
   Token values live in :root; Phase 4 replaces this block with the
   admin-generated theme.css custom properties. */
:root {
  --bg-cream: #fef9e9;
  --ink: #273838;
  --ink-footer: #1e2e2a;
  --maroon: #611824;
  --maroon-hover: #581423;
  --gold: #fdbf72;
  --gold-logo: #FEE99A;
  --orange: #d18657;
  --text-body: #4a4a44;
  --text-muted: #6e6e64;
  --footer-text: #9fb0a9;
  --text-muted-on-dark: #9fb0a9;
  --footer-muted: #8fa199;
  --footer-credit: #8a9d95;
  --font-display: 'Playfair Display', serif;
  --font-body: 'Nunito Sans', sans-serif;
  --font-script: 'Caveat', cursive;
  --font-logo: 'Dancing Script', cursive;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-cream); font-family: var(--font-body); color: var(--ink); }
a { color: var(--maroon); text-decoration: none; }
a:hover { color: var(--maroon-hover); }
img { max-width: 100%; }

/* Keyboard focus: always visible, on light and dark sections alike */
:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Skip link — first tab stop, completely hidden until it receives focus */
.skip-link {
  position: absolute;
  width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.skip-link:focus {
  width: auto; height: auto; margin: 0; overflow: visible;
  clip: auto; clip-path: none;
  left: 8px; top: 0; z-index: 200;
  background: var(--bg-cream); color: var(--maroon);
  padding: 10px 18px; border-radius: 0 0 8px 8px; font-weight: 700; font-size: 14px;
}

/* Honor "reduce motion": no reveal animation, no flicker, no auto-advancing slides */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .reveal-left { opacity: 1 !important; transform: none !important; }
}

.wrap { max-width: 1180px; margin: 0 auto; padding-left: 56px; padding-right: 56px; }

/* ---------- Header / nav ---------- */
.site-nav {
  background: var(--ink); position: sticky; top: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  /* extra bottom padding keeps the script descenders clear of the marquee lights */
  padding: 16px 56px 26px; min-height: 72px; overflow: visible;
}
/* Left-aligned inside its grid column on desktop, so the links sit well clear of
   the centred logo. The stacked layout below re-centres them. */
.nav-links { display: flex; gap: 22px; flex-wrap: wrap; }
.nav-links a {
  color: var(--bg-cream); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap;
}
.nav-links a.current { color: var(--gold); }
/* Visible to screen readers only */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Link-styled button, so contact triggers are real buttons for assistive tech */
.linkish {
  background: none; border: none; padding: 0; font: inherit; cursor: pointer;
  color: inherit; text-decoration: underline;
}
/* Right-hand group: secondary text links sitting beside the Donate pill */
.nav-actions { justify-self: end; display: flex; align-items: center; gap: 18px; }
.nav-action-link {
  color: var(--bg-cream); font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.10em; white-space: nowrap;
}
.nav-links a:hover, .nav-action-link:hover { color: var(--gold); }

.nav-logo { justify-self: center; z-index: 3; display: flex; align-items: center; }
.nav-logo span { font-family: var(--font-logo); color: var(--gold-logo); font-size: 56px; font-weight: 700; line-height: 1.05; }
.nav-donate {
  justify-self: end; background: var(--gold); color: var(--ink); padding: 10px 22px;
  border-radius: 24px; font-size: 13px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; z-index: 2; transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.nav-donate:hover { color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 14px rgba(0,0,0,0.35); }
.nav-donate:active { transform: translateY(1px); box-shadow: inset 0 3px 6px rgba(0,0,0,0.35); }
.marquee-dots {
  position: absolute; bottom: 4px; left: 16px; right: 16px; z-index: 10;
  display: flex; justify-content: space-between; pointer-events: none;
  opacity: 0; transition: opacity 0.3s ease;
}
.site-nav { position: sticky; }
.marquee-dots.on { opacity: 1; }
.marquee-dots .dot { width: 6px; height: 6px; border-radius: 50%; box-shadow: 0 0 4px rgba(255,244,201,0.7); flex-shrink: 0; }

/* The bar always renders 64 dots. Below roughly 1100px that many 6px dots no
   longer fit between the 16px margins, so they bunch together and stop spanning
   the bar. Trim the count per breakpoint to hold the desktop rhythm
   (~17-24px between dot centres) all the way down to a 320px phone. */
/* Optical centring on phones: with both insets at 16px the row still reads a
   touch left-heavy, so shift it 2px left. Left and right stay 32px apart so the
   row keeps its width — to nudge further, move both numbers together. */
@media (max-width: 720px) { .marquee-dots { left: 14px; right: 18px; } }

@media (max-width: 1100px) { .marquee-dots .dot:nth-child(n+47) { display: none; } }
@media (max-width: 860px)  { .marquee-dots .dot:nth-child(n+37) { display: none; } }
@media (max-width: 660px)  { .marquee-dots .dot:nth-child(n+29) { display: none; } }
@media (max-width: 520px)  { .marquee-dots .dot:nth-child(n+23) { display: none; } }
@media (max-width: 400px)  { .marquee-dots .dot:nth-child(n+18) { display: none; } }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block; padding: 14px 30px; border-radius: 24px; font-size: 14px;
  font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  transition: transform 0.12s ease, box-shadow 0.12s ease; cursor: pointer; border: none; font-family: var(--font-body);
}
.btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,0.3); }
.btn:active { transform: translateY(1px); box-shadow: inset 0 3px 7px rgba(0,0,0,0.35); }
.btn-maroon { background: var(--maroon); color: var(--bg-cream); }
.btn-maroon:hover { color: var(--bg-cream); }
.btn-outline-cream { border: 1.5px solid var(--bg-cream); color: var(--bg-cream); background: transparent; }
.btn-outline-cream:hover { color: var(--bg-cream); }
.btn-cream { background: var(--bg-cream); color: var(--maroon); white-space: nowrap; }

/* ---------- Type helpers ---------- */
.script { font-family: var(--font-script); }

/* ---------- Hero (Home) ---------- */
.hero { background: var(--ink); width: 100%; padding: 64px 56px 0; }
.hero-inner { text-align: center; padding: 20px 40px 56px; max-width: 760px; margin: 0 auto; }
.hero-eyebrow { font-family: var(--font-script); font-size: 28px; font-weight: 700; color: var(--gold); margin-bottom: 6px; }
.hero-title { font-family: var(--font-display); font-size: 48px; line-height: 1.15; font-weight: 800; margin: 0 0 22px; color: var(--bg-cream); }
.hero-body { font-size: 18px; line-height: 1.65; color: #d7ded8; margin: 0 0 32px; }
.hero-cta { display: flex; gap: 16px; justify-content: center; }

/* ---------- Mission ---------- */
.mission { padding-top: 80px; padding-bottom: 80px; }
.mission-header { text-align: center; max-width: 720px; margin: 0 auto 44px; }
.mission-header .eyebrow { font-family: var(--font-script); font-size: 26px; color: var(--maroon); margin-bottom: 6px; }
.mission-header h2 { font-family: var(--font-display); font-size: 32px; font-weight: 700; margin: 0 0 16px; color: var(--ink); }
.mission-header p { font-size: 17.5px; line-height: 1.7; color: var(--text-body); margin: 0; }
.mission-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.mission-card { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 28px; }
.mission-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 700; margin: 0 0 8px; }
.mission-card p { font-size: 16.5px; color: var(--text-body); line-height: 1.6; margin: 0; }

/* ---------- Impact ---------- */
.impact { background: var(--maroon); padding: 60px 56px; }
.impact-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; text-align: center; }
.impact-number { font-family: var(--font-display); font-size: 46px; font-weight: 800; color: var(--gold); line-height: 1; }
.impact-label { font-size: 14.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #f0e0cf; margin-top: 10px; }

/* ---------- Story ---------- */
.story { background: var(--ink); padding: 72px 56px; }
.story-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.story .eyebrow { font-family: var(--font-script); font-size: 26px; color: var(--gold); margin-bottom: 6px; }
.story h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 0 0 16px; color: var(--bg-cream); }
.story p { font-size: 17px; line-height: 1.7; color: #cdd6d0; margin: 0; }
.slideshow {
  position: relative; width: 100%; padding-top: 66%; background: var(--ink);
  border: 8px solid var(--bg-cream); border-radius: 8px;
  box-shadow: 0 22px 44px rgba(0,0,0,0.5); overflow: hidden;
}
.slide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.9s ease; }
.slide.active { opacity: 1; }
.slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.slide-label { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--bg-cream); letter-spacing: 0.04em; }
.slideshow-toggle {
  position: absolute; right: 8px; bottom: 8px; z-index: 5;
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer;
  background: rgba(30,46,42,0.78); color: var(--bg-cream);
  border: 1px solid rgba(254,249,233,0.55); font-size: 12px; line-height: 1;
}
.slideshow-toggle:hover { background: rgba(30,46,42,0.95); }

/* ---------- Partners ---------- */
.partners { padding-top: 64px; padding-bottom: 64px; }
.partners .eyebrow { text-align: center; font-family: var(--font-script); font-size: 26px; color: var(--maroon); margin-bottom: 28px; }
.partners-row { display: flex; justify-content: center; align-items: center; gap: 20px; flex-wrap: wrap; }
.partner-chip {
  border: 2px dashed var(--orange); border-radius: 24px; padding: 12px 24px;
  font-size: 16px; font-weight: 600; color: var(--text-body);
}

/* ---------- Donate band ---------- */
.donate { padding: 8px 56px 80px; }
.donate-inner {
  max-width: 1180px; margin: 0 auto; background: var(--maroon); border-radius: 14px;
  padding: 52px 56px; display: flex; align-items: center; justify-content: space-between;
  gap: 32px; flex-wrap: wrap;
}
.donate-inner h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 0 0 12px; color: var(--bg-cream); }
.donate-inner p { font-size: 17px; line-height: 1.65; color: #fbe0e0; margin: 0; }

/* ---------- Footer ---------- */
.footer { background: var(--ink-footer); }
.footer-grid { max-width: 1180px; margin: 0 auto; padding: 44px 56px 32px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 40px; }
.footer-grid img { width: 270px; height: auto; margin-bottom: 14px; }
.footer-grid p, .footer-text { font-size: 15.5px; color: var(--footer-text); line-height: 1.8; }
.footer-grid p { line-height: 1.6; max-width: 280px; }
.footer-heading { font-size: 13px; font-weight: 700; color: var(--bg-cream); margin-bottom: 12px; }
.footer-legal { max-width: 1180px; margin: 0 auto; padding: 20px 56px 0; border-top: 1px solid #33443f; font-size: 14.5px; color: var(--footer-muted); }
.footer-credit { max-width: 1180px; margin: 0 auto; padding: 10px 56px 28px; font-size: 14px; color: var(--footer-credit); }
.footer-credit a { color: var(--footer-text); text-decoration: underline; }
.footer.simple { text-align: center; }
.footer.simple .footer-legal { border-top: none; padding: 32px 56px 12px; }
.footer.simple .footer-credit { padding: 0 56px 26px; }

/* ---------- About page ---------- */
.page-header { text-align: center; padding-top: 64px; padding-bottom: 40px; }
.page-header .eyebrow { font-family: var(--font-script); font-size: 28px; color: var(--maroon); margin-bottom: 6px; }
.page-header h1 { font-family: var(--font-display); font-size: 42px; font-weight: 800; margin: 0 0 18px; color: var(--ink); }
.page-header p { font-size: 18px; line-height: 1.65; color: var(--text-body); max-width: 640px; margin: 0 auto; }
.two-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.about-cards { padding-top: 40px; padding-bottom: 72px; }
.about-card { background: #fff; border: 2px solid var(--ink); border-radius: 10px; padding: 32px; }
.about-card h2 { font-family: var(--font-display); font-size: 23px; font-weight: 700; margin: 0 0 14px; }
.about-card p { font-size: 17px; line-height: 1.75; color: var(--text-body); margin: 0 0 12px; }
.about-card p:last-child { margin-bottom: 0; }
.leadership { background: var(--ink); padding: 72px 56px; }
.leadership-inner { max-width: 1180px; margin: 0 auto; }
.leadership .eyebrow { font-family: var(--font-script); font-size: 26px; color: var(--gold); margin-bottom: 8px; }
.leadership h2 { font-family: var(--font-display); font-size: 28px; font-weight: 700; margin: 0 0 40px; color: var(--bg-cream); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; color: var(--bg-cream); }
.avatar {
  width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-family: var(--font-display); font-size: 19px;
  font-weight: 700; margin: 0 auto 14px; overflow: hidden;
}
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.person-name { font-weight: 700; font-size: 17px; margin-bottom: 2px; }
.person-role { font-size: 15px; color: var(--text-muted-on-dark); }
.contact { padding-top: 16px; padding-bottom: 80px; }
.contact .eyebrow { font-family: var(--font-script); font-size: 26px; color: var(--maroon); margin-bottom: 6px; }
.contact h2 { font-family: var(--font-display); font-size: 26px; font-weight: 700; margin: 0 0 18px; }
.contact-details { font-size: 17px; color: var(--text-body); line-height: 1.9; }
.contact-cta { background: var(--maroon); border-radius: 14px; padding: 36px; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }
.contact-cta h3 { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--bg-cream); margin: 0 0 10px; }
.contact-cta p { font-size: 16px; color: #fbe0e0; margin: 0 0 20px; line-height: 1.6; }

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal-left { opacity: 0; transform: translateX(-60px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.in, .reveal-left.in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */

/* Four nav items plus the wide script logo need ~373px per side; below about
   1200px that no longer fits and the logo would drift off-centre, so the header
   switches to the stacked layout (logo on its own row, links centred) early. */
@media (max-width: 1200px) {
  .site-nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; padding: 14px 32px 24px; }
  .nav-logo { order: -1; width: 100%; justify-content: center; }
  .nav-links { order: 1; gap: 20px; justify-content: center; }
  .nav-actions { order: 2; justify-self: auto; flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 960px) {
  .mission-grid, .impact-grid, .people-grid { grid-template-columns: repeat(2, 1fr); }
  .story-grid, .two-grid { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
}
@media (max-width: 720px) {
  .wrap, .hero, .impact, .story, .leadership, .donate { padding-left: 24px; padding-right: 24px; }
  .site-nav { display: flex; padding: 12px 20px 22px; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .nav-logo span { font-size: 42px; }
  .nav-logo { order: -1; width: 100%; justify-content: center; }
  .nav-links { gap: 14px; order: 1; }
  .nav-links a { font-size: 12px; }
  .nav-actions { order: 2; gap: 14px; }
  .hero-title { font-size: 36px; }
  .page-header h1 { font-size: 34px; }
  .mission-grid, .impact-grid, .people-grid { grid-template-columns: 1fr; }
  .donate-inner { padding: 36px 28px; }
}