/* ============================================================
   TERRANOVA — Theme (Modern Refresh 2026)
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Share+Tech+Mono&display=swap');

/* ============================================================
   PALETTE
   ============================================================ */
:root {
  --gold:          #da0149;
  --gold-light:    #f0185a;
  --gold-dim:      rgba(218,1,73,0.1);
  --gold-glow:     rgba(218,1,73,0.06);
  --dark:          #050505;
  --charcoal:      #0d0d0d;
  --surface:       rgba(255,255,255,0.05);
  --surface-hover: rgba(255,255,255,0.09);
  --surface2:      #161616;
  --text:          #ffffff;
  --text-muted:    rgba(255,255,255,0.88);
  --text-dim:      rgba(255,255,255,0.48);
  --border:        rgba(255,255,255,0.1);
  --border-hover:  rgba(218,1,73,0.7);
  --border-hard:   #1a1a1a;
}

/* ============================================================
   BASE
   ============================================================ */
body {
  font-family: 'DM Sans', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  background: var(--dark);
}

/* ============================================================
   FONTS — headings → Space Grotesk
   ============================================================ */
.nav-logo,
.page-title,
.hero-title,
.hero h1,
h1, h2, h3,
.section-title,
.section-title span,
.sec-title,
.card-title,
.card-name,
.entry-version,
.entry-title,
.about-headline,
.founders-name,
.footer-logo,
.sidebar-brand a,
.empty-title,
.cmd-group-label,
.title-name,
.rule-group-title,
.rule-group-title::before,
.food-name,
.about-quote,
.loc-name {
  font-family: 'Poppins', sans-serif;
}

.about-body p,
.section-lead,
.donation-text,
.card-desc,
.rules-intro,
.hero-sub,
.hero-desc,
.rule-text,
.rule-desc,
.crime-desc,
.step-desc,
.desc-item,
.entry-items li,
.empty-text,
.loc-detail,
.food-desc,
.notice,
.cmd-desc,
input,
textarea,
button {
  font-family: 'DM Sans', sans-serif;
}

/* ============================================================
   LOGO SPLIT — Terra (white) · Nova (red)
   ============================================================ */
.logo-terra { color: var(--text); }
.logo-nova  { color: var(--gold); }

/* ============================================================
   NAV
   ============================================================ */
nav {
  background: rgba(5,5,5,0.85);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border-bottom-color: rgba(255,255,255,0.07);
  position: relative;
}
nav::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(to right, transparent 0%, var(--gold) 20%, var(--gold) 80%, transparent 100%);
  opacity: 0.9;
  pointer-events: none;
}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
.nav-logo {
  font-weight: 700;
  letter-spacing: 0.12em;
  text-shadow: none;
}
.nav-logo:hover {
  text-shadow: 0 0 40px rgba(218,1,73,0.6);
}

.hero-title,
.hero h1 {
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow:
    0 0 120px rgba(218,1,73,0.5),
    0 0 240px rgba(218,1,73,0.2),
    0 4px 60px rgba(0,0,0,1);
}

.page-title {
  font-size: clamp(4rem, 10vw, 8rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow: 0 0 80px rgba(218,1,73,0.35), 0 4px 40px rgba(0,0,0,0.9);
}

.sec-title {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.card-title {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* ============================================================
   PAGE HEADER — dramatic red glow from above
   ============================================================ */
.page-header {
  padding: 13rem 2rem 7rem;
}
.page-header::before {
  background: radial-gradient(ellipse at 50% -10%, rgba(218,1,73,0.3) 0%, transparent 55%);
}

/* ============================================================
   SECTION LABELS
   ============================================================ */
.sec-label {
  font-size: 0.7rem;
  letter-spacing: 0.5em;
}
.page-label {
  font-size: 0.68rem;
  letter-spacing: 0.45em;
}

/* ============================================================
   BUTTONS
   ============================================================ */
.hero-cta,
.hero-cta:hover,
.kofi-btn,
.kofi-btn:hover,
.submit-btn {
  color: #fff;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ============================================================
   BACKGROUND GLOW ORBS
   ============================================================ */
.gb1,
.gb2 {
  background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
}

/* ============================================================
   GRADIENT OVERLAYS
   ============================================================ */
.hero::before {
  background: radial-gradient(ellipse 70% 55% at 50% 50%, rgba(218,1,73,0.07) 0%, transparent 70%);
}
.hero-fallback {
  background:
    linear-gradient(to bottom, rgba(5,5,5,0.45) 0%, rgba(5,5,5,0.65) 55%, rgba(5,5,5,0.97) 100%),
    url('hero-bg.webp') center center / cover no-repeat;
}
.about-content::before {
  background: radial-gradient(ellipse at 0% 50%, rgba(218,1,73,0.06) 0%, transparent 60%);
}
.donation::before {
  background: radial-gradient(ellipse, rgba(218,1,73,0.07) 0%, transparent 65%);
}
.cards-sec::before {
  background: radial-gradient(circle, rgba(218,1,73,0.05) 0%, transparent 65%);
}
.empty-state::before {
  background: radial-gradient(ellipse at center top, rgba(218,1,73,0.05) 0%, transparent 60%);
}
.event-card::before {
  background: radial-gradient(ellipse at center top, rgba(218,1,73,0.05) 0%, transparent 60%);
}

/* ============================================================
   RULE / DIVIDER LINES
   ============================================================ */
.gold-rule,
.sec-rule {
  background: linear-gradient(to right, var(--gold), transparent);
}
.scroll-line {
  background: linear-gradient(to bottom, rgba(255,255,255,0.3), transparent);
}

/* ============================================================
   HERO GRID
   ============================================================ */
.hero-grid {
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
}

/* ============================================================
   CARDS — clean at rest, explosive on hover
   ============================================================ */
.card {
  border-color: rgba(255,255,255,0.1);
  border-radius: 14px;
}
.card::before {
  background: linear-gradient(to right, transparent, var(--gold), transparent);
  opacity: 0.4;
}
.card::after {
  background: radial-gradient(ellipse at 20% 0%, rgba(218,1,73,0.07) 0%, transparent 55%);
  opacity: 0.5;
}
.card:hover {
  border-color: rgba(218,1,73,0.5);
  box-shadow:
    0 24px 60px rgba(0,0,0,0.8),
    0 0 60px rgba(218,1,73,0.1),
    inset 0 1px 0 rgba(218,1,73,0.2);
}
.card:hover::before { opacity: 1; }
.card:hover::after  { opacity: 1; }

/* Icon wrap — solid red block */
.card-icon-wrap {
  background: var(--gold);
  border-color: var(--gold);
  border-radius: 4px;
}
.card-icon-wrap i {
  color: #ffffff;
}
.card:hover .card-icon-wrap {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* ============================================================
   CALLOUT BOXES
   ============================================================ */
.callout {
  border-left-color: var(--gold);
  background: var(--gold-dim);
  border-color: rgba(218,1,73,0.25);
}

/* ============================================================
   STEP NUMBERS
   ============================================================ */
.step-n {
  color: var(--gold);
  background: var(--gold-dim);
}

/* ============================================================
   NAV UNDERLINE
   ============================================================ */
.nav-links a::after {
  background: var(--gold);
}

/* ============================================================
   SIDEBAR NAV (playerguide)
   ============================================================ */
.nav-item:hover,
.nav-item.active {
  color: var(--gold-light);
  border-left-color: var(--gold);
  background: var(--gold-glow);
}

/* ============================================================
   FORM INPUTS (appeal page)
   ============================================================ */
input:focus,
textarea:focus {
  border-color: rgba(218,1,73,0.65);
  box-shadow: 0 0 0 3px rgba(218,1,73,0.08);
}

/* ============================================================
   SCROLLBAR
   ============================================================ */
::-webkit-scrollbar-thumb:hover {
  background: var(--gold);
}