/* ============================================================
   april-fools-day.css — Indigo & Playful Solstice Purple Theme
   Extends universal master layout from christmas.css per ARCHITECTURE.md
   ============================================================ */

@import './christmas.css';

:root {
  --accent-primary:   #a855f7;
  --accent-secondary: #c084fc;
  --bg-deep:          #120e2e;
  --bg-mid:           #1e1b4b;
  --text-primary:     #FFFFFF;
  --text-muted:       #e9d5ff;
  --glow-color:       rgba(168, 85, 247, 0.45);
  --glow-color-purple: rgba(192, 132, 252, 0.4);
}

/* April Fools Main Titles & Primary Section Headings */
h1.holiday-name,
.s2-banner__title,
.content-block__heading {
  font-family: 'Outfit', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em !important;
}

/* Clean Readable Sans-Serif Typography for ALL Section 2 Content, Cards, Timelines, & Body */
.section-2,
.section-2 *,
.content-main,
.content-main *,
.content-sidebar,
.content-sidebar *,
.timeline,
.timeline *,
.timeline__item,
.timeline__item *,
.timeline__title,
.timeline__text,
.timeline__year,
.tradition-card,
.tradition-card *,
.tradition-card__title,
.tradition-card__text,
.fun-facts,
.fun-facts *,
.fun-fact-text,
.holiday-quote,
.holiday-quote *,
.holiday-quote__text,
.holiday-quote__author,
.world-slider,
.world-slider *,
.world-slider__title,
.world-slider__counter,
.world-slide-item,
.world-slide-item *,
.quiz-option,
.quiz__question,
.quiz__progress,
.quiz__feedback,
.quiz__score-number,
.quiz__score-label,
.s2-banner__subtitle {
  font-family: 'Outfit', 'Inter', system-ui, -apple-system, sans-serif !important;
  text-transform: none !important;
}

/* Timeline Item Styles for Clean Hierarchy */
.timeline__year {
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  font-size: 0.85rem !important;
  color: #c084fc !important;
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
  padding: 2px 10px !important;
  border-radius: 9999px !important;
  display: inline-block !important;
  margin-bottom: 6px !important;
}

.timeline__title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.2rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-top: 4px !important;
  margin-bottom: 6px !important;
  line-height: 1.3 !important;
}

.timeline__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  color: rgba(255, 255, 255, 0.85) !important;
}

/* Tradition Cards Hierarchy */
.tradition-card__title {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin-bottom: 6px !important;
}

.tradition-card__text {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.9rem !important;
  line-height: 1.55 !important;
  color: rgba(255, 255, 255, 0.8) !important;
}

/* Sidebar Quote Card */
.holiday-quote__text {
  font-family: 'Outfit', sans-serif !important;
  font-size: 1.1rem !important;
  font-style: italic !important;
  line-height: 1.5 !important;
  color: #ffffff !important;
}

.holiday-quote__author {
  font-family: 'Inter', sans-serif !important;
  font-size: 0.85rem !important;
  font-style: normal !important;
  color: rgba(255, 255, 255, 0.7) !important;
  margin-top: 8px !important;
  display: block !important;
}

/* Section 1 Background Theme */
.section-1 {
  background: radial-gradient(ellipse 100% 90% at 50% 30%, #2e1065 0%, #1e1b4b 50%, #120e2e 85%, #09061a 100%) !important;
}

.section-1::before {
  background: radial-gradient(circle, rgba(168, 85, 247, 0.25) 0%, rgba(192, 132, 252, 0.16) 45%, transparent 70%) !important;
}

.section-1__vignette {
  background: radial-gradient(ellipse 85% 85% at 50% 50%, transparent 45%, rgba(9, 6, 26, 0.85) 100%) !important;
}

/* Location Badge Theme */
.location-badge {
  background: rgba(168, 85, 247, 0.18) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  color: #e9d5ff !important;
  box-shadow: 0 4px 16px rgba(168, 85, 247, 0.3) !important;
}

/* Flip Tile Theme */
.flip-tile__face {
  background: linear-gradient(160deg, rgba(168, 85, 247, 0.25) 0%, rgba(18, 14, 46, 0.95) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.45) !important;
  border-top: 2px solid #a855f7 !important;
  text-shadow: 0 0 25px rgba(168, 85, 247, 0.6), 0 0 35px rgba(192, 132, 252, 0.6) !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
  font-variant-numeric: lining-figures tabular-nums !important;
  -webkit-font-feature-settings: "lnum" 1, "tnum" 1 !important;
  font-feature-settings: "lnum" 1, "tnum" 1 !important;
}

.countdown-unit__label,
.countdown-unit__sep {
  color: #c084fc !important;
  font-family: 'Outfit', 'Inter', sans-serif !important;
}

/* Share Button Theme */
.share-btn {
  background: rgba(168, 85, 247, 0.25) !important;
  border: 1px solid rgba(192, 132, 252, 0.6) !important;
  box-shadow: 0 4px 20px rgba(168, 85, 247, 0.35) !important;
}

.share-btn:hover {
  background: rgba(192, 132, 252, 0.3) !important;
  border-color: #c084fc !important;
}

/* Section 2 Cards & Banner Theme */
.s2-banner {
  background: linear-gradient(135deg, rgba(168, 85, 247, 0.35) 0%, rgba(30, 27, 75, 0.95) 100%) !important;
  border: 1px solid rgba(192, 132, 252, 0.35) !important;
}

.content-block,
.sidebar-card {
  background: rgba(30, 27, 75, 0.75) !important;
  border: 1px solid rgba(168, 85, 247, 0.35) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.content-block:hover,
.sidebar-card:hover {
  border-color: rgba(192, 132, 252, 0.65) !important;
  box-shadow: 0 12px 40px rgba(168, 85, 247, 0.25) !important;
}

/* Scroll Indicator Theme */
.scroll-indicator,
.scroll-indicator span,
.scroll-indicator__arrow {
  color: #f59e0b !important;
  border-color: #f59e0b !important;
}

/* Responsive Mobile View Overrides (< 900px) */
@media (max-width: 900px) {
  .section-1 {
    height: 100dvh !important;
    min-height: 100dvh !important;
    max-height: 100dvh !important;
    padding: 12px 16px clamp(14px, 3.2vh, 28px) 16px !important;
  }

  .scroll-indicator {
    bottom: clamp(14px, 3.2vh, 28px) !important;
  }
}

@media (max-width: 640px) {
  .flip-tile__face {
    font-size: clamp(1.4rem, 4.8vw, 2.2rem) !important;
  }

  .countdown-unit__sep {
    color: #c084fc !important;
  }

  .countdown-unit__label {
    color: #c084fc !important;
    font-size: clamp(0.7rem, 2.2vw, 0.85rem) !important;
  }

  .holiday-title {
    font-size: clamp(2rem, 6.5vw, 3rem) !important;
  }
}