/* ============================================================
   FUENCE PODCAST — GLOBAL DESIGN SYSTEM
   FILE: assets/css/style.css
   ============================================================
   HOW TO CUSTOMIZE:
   → Change site colors: edit :root variables below
   → Change fonts: edit @import line + font-family values
   → This file affects EVERY page — edit carefully
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=Source+Serif+4:wght@300;400;600&family=DM+Sans:opsz,wght@9..40,300;9..40,400;9..40,500;9..40,600&display=swap');

/* ============================================================
   EDIT: BRAND COLORS — change here, updates everywhere
   ============================================================ */
:root {
  /* Backgrounds */
  --bg-page:        #FAFAF7;
  --bg-card:        #FFFFFF;
  --bg-dark:        #0F1923;
  --bg-dark-card:   #1A2733;
  --bg-tint:        #F0F4F2;

  /* Text */
  --text-dark:      #0F1923;
  --text-body:      #2E3D4A;
  --text-muted:     #6B7E8C;
  --text-light:     #F4F1EB;
  --text-light-dim: #A8B8C4;

  /* Brand */
  --teal:           #0A6E6E;
  --teal-light:     #E8F4F4;
  --teal-hover:     #085858;
  --amber:          #C8860A;
  --amber-light:    #FDF3E0;
  --amber-bright:   #E8A020;
  --red-soft:       #C0392B;

  /* Borders */
  --border:         #DDE4E0;
  --border-dark:    #2A3A47;

  /* Typography */
  --font-display: 'Playfair Display', Georgia, serif;
  --font-serif:   'Source Serif 4', Georgia, serif;
  --font-sans:    'DM Sans', system-ui, sans-serif;

  /* Spacing */
  --sp-xs:  4px;  --sp-sm:  8px;  --sp-md: 16px;
  --sp-lg: 24px;  --sp-xl: 40px;  --sp-2xl:64px;  --sp-3xl:96px;

  /* Layout */
  --max-w:      1140px;
  --max-w-sm:    760px;
  --radius:       10px;
  --radius-sm:     6px;
  --radius-lg:    16px;
  --shadow-sm:  0 2px 8px  rgba(15,25,35,.08);
  --shadow-md:  0 4px 20px rgba(15,25,35,.12);
  --shadow-lg:  0 8px 40px rgba(15,25,35,.16);
  --transition: 0.2s ease;
}

/* ============================================================
   BASE RESET
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px;scroll-behavior:smooth}
body{background:var(--bg-page);color:var(--text-body);font-family:var(--font-sans);font-weight:400;line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:var(--teal);text-decoration:none;transition:color var(--transition)}
a:hover{color:var(--teal-hover)}
button{cursor:pointer;font-family:var(--font-sans);border:none;background:none}

/* ============================================================
   LAYOUT
   ============================================================ */
.container    {max-width:var(--max-w);   margin:0 auto;padding:0 var(--sp-lg)}
.container-sm {max-width:var(--max-w-sm);margin:0 auto;padding:0 var(--sp-lg)}
.section      {padding:var(--sp-3xl) 0}
.section-sm   {padding:var(--sp-2xl) 0}
.section-dark {background:var(--bg-dark);color:var(--text-light)}
.section-tint {background:var(--bg-tint)}

/* ============================================================
   TYPOGRAPHY
   ============================================================ */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-dark);line-height:1.2;font-weight:700}
h1{font-size:clamp(2.2rem,5vw,3.4rem)}
h2{font-size:clamp(1.7rem,3vw,2.4rem)}
h3{font-size:clamp(1.2rem,2vw,1.55rem)}
h4{font-size:1.05rem}
p {font-size:1rem;line-height:1.75;color:var(--text-body)}

.section-dark h1,.section-dark h2,.section-dark h3,.section-dark h4{color:var(--text-light)}
.section-dark p{color:var(--text-light-dim)}
.text-teal  {color:var(--teal)}
.text-amber {color:var(--amber)}
.text-muted {color:var(--text-muted)}
.text-center{text-align:center}

/* Section label — small caps above headings */
.section-label{
  display:inline-block;font-family:var(--font-sans);
  font-size:.72rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal);margin-bottom:var(--sp-md)
}
.section-label::before{content:'— ';color:var(--amber)}
.section-dark .section-label{color:var(--amber-bright)}

/* Divider bar */
.divider{width:48px;height:3px;background:var(--amber-bright);border-radius:2px;margin:var(--sp-md) 0 var(--sp-xl)}
.divider-center{margin-left:auto;margin-right:auto}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{
  display:inline-flex;align-items:center;gap:var(--sp-sm);
  padding:11px 24px;border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:.9rem;font-weight:600;
  text-decoration:none;transition:all var(--transition);
  white-space:nowrap;border:2px solid transparent;cursor:pointer
}
.btn-primary{background:var(--teal);color:#fff;border-color:var(--teal)}
.btn-primary:hover{background:var(--teal-hover);border-color:var(--teal-hover);color:#fff;transform:translateY(-1px);box-shadow:var(--shadow-md)}
.btn-amber{background:var(--amber-bright);color:#fff;border-color:var(--amber-bright)}
.btn-amber:hover{background:var(--amber);border-color:var(--amber);color:#fff;transform:translateY(-1px)}
.btn-outline{background:transparent;color:var(--teal);border-color:var(--teal)}
.btn-outline:hover{background:var(--teal);color:#fff;transform:translateY(-1px)}
.btn-outline-light{background:transparent;color:var(--text-light);border-color:rgba(244,241,235,.4)}
.btn-outline-light:hover{background:rgba(244,241,235,.1);border-color:var(--text-light);color:var(--text-light)}
.btn-petition{background:var(--red-soft);color:#fff;border-color:var(--red-soft)}
.btn-petition:hover{background:#a93226;color:#fff;transform:translateY(-1px)}
.btn-lg{padding:14px 32px;font-size:1rem}
.btn-sm{padding:7px 16px;font-size:.82rem}

/* ============================================================
   CARDS
   ============================================================ */
.card{
  background:var(--bg-card);border:1px solid var(--border);
  border-radius:var(--radius);padding:var(--sp-xl);
  box-shadow:var(--shadow-sm);transition:box-shadow var(--transition),transform var(--transition)
}
.card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}
.card-dark{background:var(--bg-dark-card);border-color:var(--border-dark)}

/* ============================================================
   BADGES
   ============================================================ */
.badge{
  display:inline-flex;align-items:center;gap:5px;
  padding:3px 10px;border-radius:20px;
  font-size:.72rem;font-weight:600;letter-spacing:.05em;text-transform:uppercase
}
.badge-teal  {background:var(--teal-light); color:var(--teal)}
.badge-amber {background:var(--amber-light);color:var(--amber)}
.badge-active{background:#E8F5E9;color:#2E7D32}
.badge-soon  {background:#FFF3E0;color:#E65100}
.badge-private{background:#F3E5F5;color:#7B1FA2}

/* ============================================================
   GRIDS
   ============================================================ */
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-lg)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-lg)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-lg)}

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.fade-up{animation:fadeUp .5s ease both}
.fade-in{animation:fadeIn .4s ease both}
.delay-1{animation-delay:.1s}.delay-2{animation-delay:.2s}
.delay-3{animation-delay:.3s}.delay-4{animation-delay:.4s}

/* Scroll reveal — add class="scroll-reveal" to any element */
.scroll-reveal{opacity:0;transform:translateY(20px);transition:opacity .55s ease,transform .55s ease}
.scroll-reveal.visible{opacity:1;transform:translateY(0)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:900px){.grid-3,.grid-4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .container,.container-sm{padding:0 var(--sp-md)}
  .section{padding:var(--sp-2xl) 0}
}
::-webkit-scrollbar{width:6px}
::-webkit-scrollbar-track{background:var(--bg-page)}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px}