/* ============================================================
   AI COUNTRY MUSIC — Shared stylesheet for content pages
   (about.html, songs.html, faq.html, blog/*)
   Not used by index.html, which keeps its own inline styles.
   ============================================================ */

:root{
  --black:        #14100c;
  --brown-dark:   #2b1d14;
  --brown:        #4a2f1c;
  --rust:         #a8461f;
  --amber:        #d98e34;
  --gold:         #e8b04b;
  --gold-light:   #f4cd7c;
  --cream:        #f3e9d6;
  --cream-dim:    #d9c9ac;


  /* --- Kleur als rgb-triplet -----------------------------------
     Nodig om dezelfde kleur op wisselende dekking te kunnen zetten
     (rgba(var(--gold-rgb), .18)) in plaats van overal een hardgecodeerde
     rgba te herhalen die bij een themawissel niet meebeweegt. */
  --black-rgb:    20,16,12;
  --gold-rgb:     232,176,75;
  --cream-rgb:    243,233,214;
  --rust-rgb:     168,70,31;

  /* Op donkere thema's is --gold prima leesbaar als tekst; op een licht
     thema niet. Deze twee bestaan zodat tekst een eigen, donkerdere
     variant kan pakken zonder dat vullingen en randjes mee verdonkeren. */
  --gold-text:       var(--gold);
  --gold-light-text: var(--gold-light);

  /* --- Afronding ---------------------------------------------- */
  --r-xs:     8px;
  --r-sm:     14px;
  --r-md:     18px;
  --r-lg:     24px;
  --r-xl:     32px;
  --r-pill:   999px;

  /* --- Schaduw ------------------------------------------------
     Meerlaags: een korte contactschaduw voor scherpte plus een wijde
     ambient laag voor diepte. Eén laag leest altijd vlak. De tint volgt
     het thema, want zwart op een licht papier grijst de kleur eronder. */
  --shadow-tint:  12, 7, 2;
  --shadow-boost: 1;
  --shadow-xs:
    0 1px 2px  rgba(var(--shadow-tint), calc(.20 * var(--shadow-boost)));
  --shadow-sm:
    0 1px 2px  rgba(var(--shadow-tint), calc(.16 * var(--shadow-boost))),
    0 4px 10px rgba(var(--shadow-tint), calc(.16 * var(--shadow-boost)));
  --shadow-md:
    0 2px 4px  rgba(var(--shadow-tint), calc(.14 * var(--shadow-boost))),
    0 8px 20px rgba(var(--shadow-tint), calc(.22 * var(--shadow-boost)));
  --shadow-lg:
    0 3px 8px   rgba(var(--shadow-tint), calc(.16 * var(--shadow-boost))),
    0 14px 32px rgba(var(--shadow-tint), calc(.24 * var(--shadow-boost))),
    0 32px 72px rgba(var(--shadow-tint), calc(.22 * var(--shadow-boost)));
  --glow-amber:
    0 4px 12px  rgba(var(--amber-rgb),.24),
    0 14px 34px rgba(var(--amber-rgb),.32);
  --glow-amber-strong:
    0 6px 16px  rgba(var(--amber-rgb),.30),
    0 20px 48px rgba(var(--amber-rgb),.44);
  --amber-rgb: 217,142,52;

  /* --- Ruimte, op een 4px-raster ------------------------------ */
  --sp-1:  4px;   --sp-2:  8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 24px;   --sp-6: 32px;   --sp-7: 48px;  --sp-8: 64px;

  /* --- Typografie ---------------------------------------------
     Zes maten met echte sprongen. Halve pixels (12.5, 13.5) lezen niet
     als hiërarchie maar als ruis; verschil maak je met gewicht, kleur
     en spatiëring. */
  --fs-micro: 10px;
  --fs-xs:    12px;
  --fs-sm:    14px;
  --fs-base:  17px;
  --fs-md:    20px;
  --fs-lg:    24px;

  --ls-micro:   .12em;
  --ls-label:   .08em;
  --ls-display: .03em;

  --lh-tight: 1.1;
  --lh-snug:  1.35;
  --lh-body:  1.7;

  /* Leesbreedte. .page was 760px breed met tekst van 16px, ongeveer 89
     tekens per regel. Comfortabel lezen ligt tussen 60 en 75; daarboven
     raakt het oog de volgende regel kwijt bij het terugspringen. */
  --measure: 68ch;

  --font-display: "Bebas Neue", "Arial Narrow", sans-serif;
  --font-body:    "Inter", -apple-system, sans-serif;
  --font-accent:  "Rye", serif;
}

/* ============================================================
   THEMA'S — gelijk aan de speler op index.html, zodat iemand die op
   Neon of Wildflower staat niet bij elke klik in een ander uiterlijk
   valt. Zonder data-theme-attribuut gebeurt er niets, dus deze blokken
   zijn onschadelijk voor pagina's die het script nog niet hebben.
   ============================================================ */
:root[data-theme="neon"]{
  --black:        #0b0616;
  --brown-dark:   #1c0f30;
  --brown:        #351a52;
  --rust:         #7c2fd6;
  --amber:        #9d4dff;
  --gold:         #b878ff;
  --gold-light:   #dcb3ff;
  --cream:        #f2e9ff;
  --cream-dim:    #cbb8e8;

  --black-rgb:    11,6,22;
  --gold-rgb:     184,120,255;
  --cream-rgb:    242,233,255;
  --rust-rgb:     124,47,214;
  --amber-rgb:    157,77,255;

  --shadow-tint:  8, 2, 24;
  --shadow-boost: 1.15;
}
:root[data-theme="wildflower"]{
  --black:        #faf3e4;
  --brown-dark:   #e3f0d6;
  --brown:        #cde3ba;
  --rust:         #d1508a;
  --amber:        #e0a831;
  --gold:         #f0c34e;
  --gold-light:   #fbe08a;
  --cream:        #1f2e22;
  --cream-dim:    #46594a;

  --black-rgb:    250,243,228;
  --gold-rgb:     240,195,78;
  --cream-rgb:    31,46,34;
  --rust-rgb:     209,80,138;
  --amber-rgb:    224,168,49;

  /* Zwart op crème grijst de kleur eronder; warm bruin blijft schoon,
     en licht papier heeft minder schaduwdichtheid nodig. */
  --shadow-tint:  86, 58, 22;
  --shadow-boost: .7;

  /* Fel geel is prima als knopvulling of randje, maar als tekst op een
     bleke achtergrond onleesbaar. Vandaar deze aparte tekstvarianten. */
  --gold-text:       #8a5a12;
  --gold-light-text: #a8720f;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--font-body);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{ max-width:100%; display:block; }
/* Linkkleur via de -text-varianten. Op de donkere thema's zijn die
   identiek aan --gold-light/--gold, dus daar verandert niets. Op
   Wildflower haalde het paletgeel maar 1,2 : 1 contrast op het crème —
   praktisch onleesbaar. --gold-text haalt 5,4 : 1 en voldoet aan AA. */
a{ color:var(--gold-text); text-decoration:underline; text-underline-offset:2px; }
a:hover{ color:var(--gold-light-text); }
h1,h2,h3{
  margin:0 0 .5em;
  font-family:var(--font-display);
  letter-spacing:var(--ls-display);
  line-height:var(--lh-tight);
  color:var(--cream);
  text-wrap:balance;   /* geen los woord op de laatste regel */
}
h1{ font-size:clamp(36px,6vw,56px); }
h2{ font-size:clamp(26px,4vw,34px); margin-top:2em; }
h3{ font-size:var(--fs-md); font-family:var(--font-body); font-weight:700; letter-spacing:0; margin-top:1.6em; }
p{
  margin:0 0 1.1em;
  color:var(--cream-dim);
  font-size:var(--fs-base);
  line-height:var(--lh-body);
  max-width:var(--measure);
  text-wrap:pretty;
}
ul,ol{ color:var(--cream-dim); font-size:var(--fs-base); line-height:var(--lh-body); padding-left:22px; max-width:var(--measure); }
li{ margin-bottom:.5em; }
strong{ color:var(--cream); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.5em;
  font-family:var(--font-accent);
  font-size:var(--fs-sm); letter-spacing:var(--ls-label); color:var(--gold-text);
  text-transform:lowercase;
}
.eyebrow::before{ content:""; width:22px; height:1px; background:var(--gold); display:inline-block; }

/* ---------- Site header (simple, for content pages) ---------- */
.site-header{
  position:sticky; top:0; z-index:10;
  display:flex; align-items:center; justify-content:space-between;
  padding:var(--sp-4) var(--sp-5);
  background:rgba(var(--black-rgb),.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(var(--gold-rgb),.15);
}
.site-header .logo{
  font-family:var(--font-display); font-size:var(--fs-md); letter-spacing:.05em;
  color:var(--cream); text-decoration:none;
}
.site-header .logo span{ color:var(--gold-text); }
.site-header nav{ display:flex; gap:var(--sp-5); flex-wrap:wrap; }
.site-header nav a{
  font-size:var(--fs-sm); font-weight:600; color:var(--cream-dim);
  text-decoration:none; letter-spacing:.02em;
}
.site-header nav a:hover{ color:var(--gold-text); }
.lang-toggle-btn{
  padding:7px 13px;
  border-radius:var(--r-sm);
  border:1px solid rgba(var(--cream-rgb),.2);
  background:rgba(var(--cream-rgb),.05);
  color:var(--cream);
  font-size:var(--fs-xs);
  font-weight:700;
  font-family:var(--font-body);
  cursor:pointer;
  text-decoration:none;
}
.lang-toggle-btn:hover{ border-color:var(--gold); color:var(--gold-light); background:rgba(var(--gold-rgb),.1); }

/* ---------- Page shell ---------- */
.page-hero{
  padding:var(--sp-8) var(--sp-5) var(--sp-5);
  max-width:760px;
  margin:0 auto;
}
.page{
  max-width:760px;
  margin:0 auto;
  padding:0 var(--sp-5) var(--sp-8);
}
.page > *:first-child{ margin-top:0; }

/* ---------- Cards / lists reused across pages ---------- */
.card{
  background:linear-gradient(180deg, rgba(var(--cream-rgb),.05), rgba(var(--cream-rgb),.02));
  border:1px solid rgba(var(--gold-rgb),.18);
  border-radius:var(--r-lg);
  padding:var(--sp-5) var(--sp-6);
  margin-bottom:var(--sp-4);
  box-shadow:var(--shadow-xs);
}

.song-list{ list-style:none; padding:0; margin:0; }
.song-row{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:var(--sp-4) 0;
  border-bottom:1px solid rgba(var(--gold-rgb),.12);
}
.song-row:last-child{ border-bottom:none; }
.song-title{ color:var(--cream); font-weight:600; font-size:var(--fs-base); }
.song-title a{ color:var(--cream); text-decoration:underline; text-decoration-color:rgba(var(--gold-rgb),.4); text-underline-offset:3px; }
.song-title a:hover{ color:var(--gold-text); text-decoration-color:var(--gold-text); }
.song-tag{
  font-size:var(--fs-xs); font-weight:700; letter-spacing:var(--ls-label); text-transform:uppercase;
  color:var(--gold-text); background:rgba(var(--gold-rgb),.12);
  border-radius:var(--r-pill); padding:3px 9px; margin-left:var(--sp-2);
}

.faq-item{ margin-bottom:var(--sp-6); }
.faq-item h3{ color:var(--gold-light-text); margin-top:0; }

.author-block{
  display:flex;
  gap:var(--sp-5);
  align-items:flex-start;
  margin-top:var(--sp-5);
  padding:var(--sp-5);
  background:linear-gradient(180deg, rgba(var(--cream-rgb),.05), rgba(var(--cream-rgb),.02));
  border:1px solid rgba(var(--gold-rgb),.18);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-xs);
}
.author-photo{
  width:110px; height:138px;
  object-fit:cover;
  border-radius:var(--r-md);
  border:2px solid rgba(var(--gold-rgb),.35);
  box-shadow:var(--shadow-md);
  flex-shrink:0;
}
@media (max-width:520px){
  .author-block{ flex-direction:column; align-items:center; text-align:center; }
}

.blog-list{ list-style:none; padding:0; margin:0; }
.blog-list li{
  padding:var(--sp-5) 0; border-bottom:1px solid rgba(var(--gold-rgb),.12);
}
.blog-list li:last-child{ border-bottom:none; }
.blog-list a{ font-family:var(--font-display); font-size:var(--fs-lg); letter-spacing:var(--ls-display); text-decoration:none; color:var(--cream); }
.blog-list a:hover{ color:var(--gold-text); }
.blog-date{ display:block; font-size:var(--fs-xs); color:var(--cream-dim); margin-top:var(--sp-1); letter-spacing:var(--ls-label); text-transform:uppercase; }
.blog-excerpt{ margin-top:8px; }

/* ---------- Songcatalogus ---------- */
/* Deze stonden als inline style="" in songs.html, met negatieve marges om
   een te grote afstand te compenseren. Nu de ruimte op het raster staat,
   is dat compenseren niet meer nodig. */
.fine-print{
  font-size:var(--fs-sm);
  color:var(--cream-dim);
  opacity:.8;
  max-width:var(--measure);
}
.cta-row{ margin-top:var(--sp-6); }

.song-controls{
  display:flex; flex-wrap:wrap; align-items:center; gap:var(--sp-3);
  margin:var(--sp-6) 0 var(--sp-4);
}
.song-search{
  flex:1 1 240px;
  padding:var(--sp-3) var(--sp-4);
  border-radius:var(--r-pill);
  border:1px solid rgba(var(--gold-rgb),.25);
  background:rgba(var(--cream-rgb),.05);
  color:var(--cream);
  font-family:var(--font-body);
  font-size:var(--fs-base);
  box-shadow:var(--shadow-xs);
}
.song-search::placeholder{ color:var(--cream-dim); opacity:.7; }
.song-filters{ display:flex; gap:var(--sp-2); flex-wrap:wrap; }
.filter-btn{
  padding:var(--sp-2) var(--sp-4);
  border-radius:var(--r-pill);
  border:1px solid rgba(var(--gold-rgb),.25);
  background:rgba(var(--cream-rgb),.05);
  color:var(--cream-dim);
  font-family:var(--font-body);
  font-size:var(--fs-sm);
  font-weight:600;
  cursor:pointer;
  box-shadow:var(--shadow-xs);
  transition:border-color .15s ease, color .15s ease, background .15s ease, box-shadow .15s ease;
}
.filter-btn:hover{ border-color:var(--gold); color:var(--gold-light-text); }
.filter-btn.active{
  background:linear-gradient(180deg,var(--gold-light),var(--amber));
  border-color:transparent;
  color:#241605;
  box-shadow:var(--glow-amber);
}
.song-count{
  font-size:var(--fs-sm);
  color:var(--cream-dim);
  margin:0 0 var(--sp-3);
  font-variant-numeric:tabular-nums;
}
.song-title-wrap{ display:flex; align-items:baseline; flex-wrap:wrap; gap:var(--sp-2); }

/* ---------- "Over deze muziek" ---------- */
/* Staat onder de songlijst en is bewust ruim afgezet met een lijn erboven:
   het is een ander soort inhoud dan de catalogus erboven, en die overgang
   moet je zien voordat je hem leest. */
.about-music{
  margin-top:var(--sp-8);
  padding-top:var(--sp-7);
  border-top:1px solid rgba(var(--gold-rgb),.18);
}
.about-music h2{ margin-top:0; }
.about-music h3{
  margin-top:var(--sp-7);
  color:var(--gold-light-text);
}
.about-music h3:first-of-type{ margin-top:var(--sp-5); }
.about-music p{ margin-bottom:0; }

/* ---------- CTA back to player ---------- */
.cta-listen{
  display:inline-flex; align-items:center; gap:10px;
  margin-top:8px;
  padding:14px var(--sp-5);
  border-radius:var(--r-pill);
  background:linear-gradient(180deg,var(--gold-light),var(--amber));
  color:#241605 !important;
  font-weight:700; font-size:var(--fs-base);
  text-decoration:none;
  box-shadow:var(--glow-amber);
  /* Deze hover verplaatste de knop zonder overgang: een sprongetje. */
  transition:transform .18s ease, box-shadow .18s ease;
}
.cta-listen:hover{ transform:translateY(-1px); box-shadow:var(--glow-amber-strong); }

/* ---------- Footer ---------- */
.site-footer{
  border-top:1px solid rgba(var(--gold-rgb),.15);
  padding:var(--sp-6) var(--sp-5);
  text-align:center;
  font-size:var(--fs-sm);
  color:var(--cream-dim);
}
.site-footer a{ color:var(--cream-dim); }
.site-footer a:hover{ color:var(--gold-text); }

@media (max-width:640px){
  .site-header{ flex-direction:column; align-items:flex-start; gap:10px; }
  .page-hero{ padding:36px 20px 10px; }
  .page{ padding:0 20px 60px; }
}

/* ============================================================
   TOEGANKELIJKHEID
   ============================================================ */

/* Er was nergens een focusstijl. Wie met Tab door de pagina loopt — of
   dat nu uit voorkeur is of uit noodzaak — zag niet waar hij stond,
   omdat de browserstandaard door de eigen opmaak werd overstemd.
   :focus-visible toont de ring alleen bij toetsenbordgebruik, dus
   muisklikkers merken er niets van. */
:where(a, button, input, select, textarea, [tabindex]):focus-visible{
  outline:2px solid var(--gold-text);
  outline-offset:3px;
  border-radius:var(--r-xs);
}

/* scroll-behavior:smooth stond onvoorwaardelijk aan. Voor wie gevoelig is
   voor beweging — vestibulaire klachten, migraine — kan dat misselijkheid
   geven. Het besturingssysteem geeft die voorkeur door; die respecteren we. */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}

/* Selectie met de themakleur in plaats van het standaardblauw. */
::selection{ background:rgba(var(--gold-rgb),.3); color:var(--cream); }

/* ---------- Cookie consent banner ---------- */
.cookie-banner{
  position:fixed;
  left:16px; right:16px; bottom:16px;
  max-width:640px;
  margin:0 auto;
  z-index:200;
  background:var(--brown-dark);
  border:1px solid rgba(var(--gold-rgb),.3);
  border-radius:var(--r-lg);
  padding:var(--sp-4) var(--sp-5);
  box-shadow:var(--shadow-lg);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px;
  font-family:var(--font-body);
}
.cookie-banner[hidden]{ display:none; }
.cookie-banner p{
  margin:0;
  flex:1 1 260px;
  font-size:var(--fs-sm);
  color:var(--cream-dim);
  line-height:var(--lh-snug);
}
.cookie-banner a{ color:var(--gold-text); }
.cookie-banner-actions{ display:flex; gap:10px; flex-shrink:0; }
.cookie-btn{
  padding:9px 16px;
  border-radius:var(--r-pill);
  font-size:var(--fs-sm);
  font-weight:700;
  cursor:pointer;
  border:1px solid rgba(var(--cream-rgb),.25);
  background:rgba(var(--cream-rgb),.06);
  color:var(--cream);
}
.cookie-btn.cookie-accept{
  background:linear-gradient(180deg,var(--gold-light),var(--amber));
  color:#241605;
  border:none;
}
@media (max-width:520px){
  .cookie-banner{ flex-direction:column; align-items:stretch; }
  .cookie-banner-actions{ justify-content:flex-end; }
}