/* ============================================
   Davis Education Foundation — Global Styles
   def.css — Unified Design System
   ============================================ */

/* ── DESIGN TOKENS ── */
:root {
  /* Brand Colors */
  --navy:        #0e315c;
  --navy-deep:   #0b1b3c;
  --navy-950:    #0b1b3c;
  --navy-900:    #122a57;
  --navy-700:    #24508f;
  --sky-300:     #8bcfff;
  --gold:        #ffc24d;
  --gold-300:    #ffd77f;
  --gold-400:    #ffc24d;
  --gold-500:    #f5a623;
  --pink:        #FF2D78;
  --white:       #ffffff;
  --off-white:   #f8fbff;
  --paper-50:    #f8fbff;
  --paper-100:   #eff6ff;
  --paper-150:   #e9f2ff;
  --paper-200:   #dbe8fa;

  /* Brand Page Aliases */
  --brand-navy:  #1A3B69;
  --brand-gold:  #FFC958;

  /* Text Colors — values meet WCAG 2.1 AA (4.5:1) on white */
  --ink-900:     #172848;
  --ink-700:     #415676;
  --ink-500:     #5e6f8e;
  --text:        #172848;
  --text-muted:  #5e6f8e;
  /* Accessible gold for text on light backgrounds (>=4.5:1 on #fff) */
  --gold-text:   #8a5300;

  /* Typography */
  --font-sans:   'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --font-display: 'Fraunces', Georgia, serif;

  /* Spacing & Layout */
  --radius-sm:   14px;
  --radius-md:   20px;
  --radius-lg:   30px;
  --radius-xl:   40px;
  --radius:      14px;
  --container:   1160px;
  --max-width:   1160px;
  --pad-inline:  clamp(16px, 3vw, 36px);
  --section-space: clamp(58px, 8vw, 108px);

  /* Shadows */
  --shadow:      0 4px 24px rgba(13,31,60,0.10);
  --shadow-lg:   0 12px 48px rgba(13,31,60,0.16);
  --shadow-soft: 0 14px 34px rgba(12, 28, 62, 0.1);
  --shadow-mid:  0 22px 54px rgba(10, 24, 54, 0.18);
  --shadow-deep: 0 30px 72px rgba(8, 18, 41, 0.34);
  --shadow-gold: 0 16px 40px rgba(255, 194, 77, 0.2), 0 6px 16px rgba(14, 36, 70, 0.1);

  /* Motion */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --transition:  0.2s ease;

  /* Event page accent (per-page override sets brand color) */
  --event-accent:      var(--gold-400);
  --event-accent-soft: rgba(255, 194, 77, 0.14);
  --event-accent-glow: rgba(255, 194, 77, 0.35);
  --event-accent-deep: var(--gold-500);
}

/* ── RESET ── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.64;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

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

a { color: inherit; }

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  line-height: 1.15;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.kicker {
  margin: 0 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.74rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--navy-700);
}

.kicker::before {
  content: "";
  width: 24px;
  height: 2px;
  border-radius: 99px;
  background: currentColor;
  opacity: 0.62;
}

.title {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: var(--navy-deep);
  text-wrap: balance;
}

.subtitle {
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  color: var(--ink-700);
  line-height: 1.7;
  max-width: 660px;
}

/* ── LAYOUT ── */
.container, .shell {
  width: min(var(--max-width), calc(100% - var(--pad-inline) * 2));
  margin: 0 auto;
}

section {
  padding: var(--section-space) 0;
}

/* ── HERO SECTIONS ── */
.hero {
  background: linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--white);
  padding: 96px 0 80px;
  position: relative;
  overflow: hidden;
}

.hero::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(255,45,120,0.12) 0%, transparent 70%);
  pointer-events: none;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(36px, 5vw, 64px);
  line-height: 1.15;
  max-width: 760px;
  margin-bottom: 20px;
}

.hero p {
  font-size: 18px;
  color: rgba(255,255,255,0.80);
  max-width: 600px;
  margin-bottom: 36px;
  line-height: 1.7;
}

.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── BUTTONS ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 32px;
  border-radius: 999px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  text-decoration: none !important;
  border: none;
  cursor: pointer;
  transition: transform 340ms var(--ease), box-shadow 340ms var(--ease), background 260ms ease;
}

.btn:hover { transform: translateY(-2px); }

.btn--gold,
a.btn--gold,
a.btn--gold:link,
a.btn--gold:visited,
a.btn--gold:any-link {
  background: linear-gradient(135deg, var(--gold-400), var(--gold-500)) !important;
  color: var(--navy-deep) !important;
  box-shadow: var(--shadow-gold);
  text-decoration: none !important;
}

.btn--ghost,
a.btn--ghost,
a.btn--ghost:link,
a.btn--ghost:visited,
a.btn--ghost:any-link {
  background: rgba(255,255,255,0.08) !important;
  color: #fff !important;
  border: 1.5px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px);
  text-decoration: none !important;
}

.btn--ghost:hover {
  background: rgba(255,255,255,0.15) !important;
  border-color: rgba(255,255,255,0.35);
}

.btn--sm { padding: 10px 22px; font-size: 0.875rem; }

.btn-primary, .btn-secondary {
  display: inline-block;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
  transition: all var(--transition);
  cursor: pointer;
  border: none;
}

.btn-primary {
  background: var(--pink);
  color: var(--white);
}

.btn-primary:hover {
  background: #e0205f;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(255,45,120,0.35);
}

.btn-secondary {
  background: rgba(255,255,255,0.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,0.25);
  backdrop-filter: blur(8px);
}

.btn-secondary:hover { background: rgba(255,255,255,0.20); }

/* ── CARDS ── */
.card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  transition: transform 0.28s var(--ease), box-shadow 0.28s var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
}

/* ── STAT CARDS ── */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.stat-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px 24px;
  text-align: center;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-top: 3px solid var(--gold-400);
}

.stat-num {
  font-family: var(--font-display);
  font-size: 42px;
  color: var(--navy);
  font-weight: 700;
  line-height: 1;
}

.stat-label {
  font-size: 14px;
  color: var(--text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── FORMS ── */
.form-section {
  background: var(--off-white);
  padding: 64px 0;
}

.form-card {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 40px;
  max-width: 640px;
  margin: 0 auto;
}

/* ── SECTION DIVIDER ── */
.section-divider {
  width: 64px;
  height: 3px;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--gold-400), var(--gold-500));
  border: none;
  margin: 0;
}

/* ── GLASSMORPHISM ── */
.glass {
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: var(--radius);
}

/* ── ANIMATIONS ── */
@keyframes goldShimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(28px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes gradShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(14px, -12px) scale(1.04); }
}

@keyframes haloDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(24px, -18px) scale(1.06); }
  66% { transform: translate(-16px, 20px) scale(0.95); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

@keyframes kenBurns {
  from { transform: scale(1) translate(0, 0); }
  to   { transform: scale(1.06) translate(-1.5%, -1%); }
}

@keyframes meshDrift {
  0%, 100% { background-position: 0% 0%, 0% 0%, 0% 0%; }
  50%      { background-position: 100% 100%, 100% 100%, 0% 0%; }
}

@keyframes dotDrift {
  from { background-position: 0 0; }
  to   { background-position: 20px 20px; }
}

/* ── EVENT PAGE SEAM ── accent pulsating line between hero and stats */
.event-seam {
  position: relative;
  z-index: 2;
  height: 3px;
  width: 100%;
  background: linear-gradient(90deg,
    var(--event-accent) 0%,
    var(--gold-300) 30%,
    var(--navy-700) 60%,
    var(--event-accent) 100%);
  background-size: 220% 100%;
  animation: gradShift 5s ease-in-out infinite;
}
.event-seam::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -4px; bottom: -4px;
  background: inherit;
  background-size: inherit;
  animation: inherit;
  filter: blur(8px);
  opacity: 0.55;
  pointer-events: none;
}

.accent {
  background: linear-gradient(90deg, var(--gold-400), #fff, var(--gold-300), var(--gold-400));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: goldShimmer 4s ease-in-out infinite;
}

/* Scroll Reveal Animations */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 720ms var(--ease), transform 720ms var(--ease);
  transition-delay: calc(var(--reveal-order, 0) * 110ms);
}

[data-reveal].is-in {
  opacity: 1;
  transform: translateY(0);
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.93);
  transition: transform 800ms var(--ease), opacity 700ms ease;
  transition-delay: calc(var(--reveal-order, 0) * 80ms);
}

[data-reveal="scale"].is-in {
  opacity: 1;
  transform: scale(1);
}

/* ── QUICK NAV PILL: per-page inline styles (see events-*.html) own this ── */
/* Removed def.css .quick-nav / .quick-nav-wrap rules — they were overriding
   the event-themed inline styles (sticky pill, red border, transform offset)
   because def.css loads AFTER the inline <style> block. The inline rules on
   each event page are the source of truth. */

/* ── IMPACT / CONTENT SECTIONS ── */
.impact {
  padding: 72px 0;
  background: var(--off-white);
}

.page-content {
  padding: 64px 0;
}

/* ── DETAIL HERO (shared subpage hero) ──────────
   Base styles for the dark navy hero used on every detail subpage
   (About, Impact, Give, Events, Partner, etc.). Individual pages
   may override via inline <style> (e.g. custom title max-width),
   but these defaults guarantee the hero renders correctly even if
   a page omits its inline block. */
.detail-hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(48px, 6vw, 72px);
  background: linear-gradient(170deg, var(--navy-950) 0%, var(--navy-900) 60%, var(--navy-700) 100%);
  overflow: hidden;
}
.detail-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(circle, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: 0.5;
  pointer-events: none;
}
.detail-hero__halo {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  animation: drift 16s ease-in-out infinite;
}
.detail-hero__halo--one {
  width: 360px; height: 360px;
  top: -15%; right: -5%;
  background: radial-gradient(circle, rgba(255, 194, 77, 0.14), transparent 70%);
}
.detail-hero__halo--two {
  width: 280px; height: 280px;
  bottom: -10%; left: 8%;
  background: radial-gradient(circle, rgba(139, 207, 255, 0.1), transparent 70%);
  animation-delay: -8s;
}
.detail-hero__bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center top;
  opacity: 0.38;
  z-index: 1;
  transition: opacity 600ms ease;
}
.detail-hero__inner { position: relative; z-index: 2; }
.detail-hero .breadcrumb { font-size: 0.82rem; color: rgba(255, 255, 255, 0.55); margin-bottom: 16px; }
.detail-hero .breadcrumb a { color: rgba(255, 255, 255, 0.7); text-decoration: none; transition: color 200ms ease; }
.detail-hero .breadcrumb a:hover { color: var(--gold-400); }
.detail-hero .breadcrumb span { color: rgba(255, 255, 255, 0.4); margin: 0 6px; }
.detail-hero .kicker { color: var(--gold-400); }
.detail-hero .title { color: #ffffff; max-width: 20ch; }
.detail-hero .lede { color: rgba(255, 255, 255, 0.85); max-width: 54ch; margin-top: 12px; }
.detail-hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; }

/* ── RESPONSIVE ── */
@media (max-width: 768px) {
  .hero { padding: 64px 0 48px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: 1fr; }

  /* .quick-nav mobile overrides removed — per-page inline styles own this. */

  .detail-hero__actions { flex-direction: column; }
  .detail-hero__actions .btn { width: 100%; }
}

@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}