/* ============================================================
   halloween.css — Spooky Pumpkin Orange & Midnight Purple Theme
   Extends universal master layout from christmas.css
   ============================================================ */

@import './christmas.css';

:root {
  --accent-primary:   #FF6600;
  --accent-secondary: #9D00FF;
  --bg-deep:          #0F0617;
  --bg-mid:           #1A0A2A;
  --text-primary:     #FFFFFF;
  --text-muted:       #D8B4FE;
  --glow-color:       rgba(255, 102, 0, 0.45);
  --glow-color-purple: rgba(157, 0, 255, 0.4);
}

/* Halloween Theme Typography — Whole Page Content Except Header & Footer */
main,
.section-1,
.section-2,
.content-main,
.content-block,
.sidebar,
.s2-banner,
.holiday-name,
.location-badge,
.countdown-wrapper,
.flip-tile,
.flip-tile__face,
.countdown-unit__label,
.countdown-unit__sep,
.share-btn,
.scroll-indicator,
.timeline,
.timeline__title,
.timeline__text,
.tradition-card,
.tradition-card__title,
.tradition-card__text,
.fun-facts,
.fun-fact-text,
.quiz__question,
.quiz-option,
.quiz__option,
.quiz__feedback,
.quiz__score-number,
.quiz__score-label,
.world-slider-card,
.world-slider__country,
.world-slider__text,
h1, h2, h3, h4, h5, h6 {
  font-family: 'Mountains of Christmas', 'Creepster', 'Cinzel Decorative', serif !important;
}

/* Header & Footer Clean Sans-Serif Typography Exception */
.top-controls-row, .top-controls-row *,
.breadcrumb-pill, .breadcrumb-pill *,
.header-location-picker, .header-location-picker *,
.header-search-picker, .header-search-picker *,
.city-selector-header, .header-search-input,
.footer, .footer *,
.site-footer, .site-footer *,
.holiday-interlink-grid, .holiday-interlink-grid *,
.interlink-card, .interlink-card *,
.interlink-card__title, .interlink-card__date,
#heading-interlink + p {
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}

/* Section 1 Background Theme */
.section-1 {
  background: radial-gradient(ellipse 100% 90% at 50% 30%, #2A0E45 0%, #150624 50%, #08020D 100%) !important;
}

.section-1::before {
  background: radial-gradient(circle, rgba(255, 102, 0, 0.25) 0%, rgba(157, 0, 255, 0.16) 45%, transparent 70%) !important;
}

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

/* Location Badge Theme */
.location-badge {
  background: rgba(255, 102, 0, 0.18) !important;
  border: 1px solid rgba(157, 0, 255, 0.45) !important;
  color: #FF8C00 !important;
  box-shadow: 0 4px 16px rgba(157, 0, 255, 0.3) !important;
}

/* Flip Tile Theme */
.flip-tile__face {
  background: linear-gradient(160deg, rgba(157, 0, 255, 0.35) 0%, rgba(15, 6, 23, 0.95) 100%) !important;
  border: 1px solid rgba(255, 102, 0, 0.45) !important;
  border-top: 2px solid #FF6600 !important;
  text-shadow: 0 0 25px rgba(255, 102, 0, 0.6), 0 0 35px rgba(157, 0, 255, 0.6) !important;
}

.countdown-unit__label,
.countdown-unit__sep {
  color: #FF6600 !important;
}

/* Share Button Theme */
.share-btn {
  background: rgba(157, 0, 255, 0.25) !important;
  border: 1px solid rgba(255, 102, 0, 0.6) !important;
  box-shadow: 0 4px 20px rgba(157, 0, 255, 0.35) !important;
}

.share-btn:hover {
  background: rgba(255, 102, 0, 0.3) !important;
  border-color: #FF8C00 !important;
}

/* Section 2 Cards & Banner Theme */
.s2-banner {
  background: linear-gradient(135deg, rgba(157, 0, 255, 0.35) 0%, rgba(26, 10, 42, 0.95) 100%) !important;
  border: 1px solid rgba(255, 102, 0, 0.35) !important;
}

.content-block,
.sidebar-card {
  background: rgba(26, 10, 42, 0.75) !important;
  border: 1px solid rgba(157, 0, 255, 0.35) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.content-block:hover,
.sidebar-card:hover {
  border-color: rgba(255, 102, 0, 0.65) !important;
  box-shadow: 0 12px 40px rgba(255, 102, 0, 0.18) !important;
}

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

/* Theme Quiz Overrides */
.quiz-option,
.quiz__option {
  background: rgba(26, 10, 42, 0.65) !important;
  border: 1.5px solid rgba(157, 0, 255, 0.35) !important;
}

.quiz-option:hover:not(:disabled),
.quiz__option:hover:not(:disabled) {
  background: rgba(255, 102, 0, 0.35) !important;
  border-color: #FF6600 !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-family: 'Mountains of Christmas', 'Creepster', serif !important;
    font-size: clamp(1.4rem, 4.8vw, 2.2rem) !important;
  }

  .countdown-unit__sep {
    font-family: 'Mountains of Christmas', serif !important;
    color: #FF6600 !important;
  }

  .countdown-unit__label {
    font-family: 'Outfit', 'Inter', sans-serif !important;
    color: #FF6600 !important;
    font-size: clamp(0.7rem, 2.2vw, 0.85rem) !important;
  }

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