/*
Theme Name: Boules & Beats 2026
Theme URI: https://boulesenbeats.nl
Author: NixoWebBuilding
Author URI: https://nixowebbuilding.nl
Description: Landingspagina voor het evenement Boules & Beats 2026 (29 en 30 augustus, De Statie in Valkenswaard). Custom classic theme met inline klant-editor.
Version: 0.8.0
Requires at least: 6.4
Requires PHP: 8.1
Text Domain: boules-en-beats
*/

/* ============================================================
   Self-hosted fonts (waren Google Fonts in de mockup).
   Variabele woff2's uit de build, font-display:swap.
   ============================================================ */
@font-face{
  font-family:"Montserrat";
  src:url("assets/fonts/montserrat-var.woff2") format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Playfair Display";
  src:url("assets/fonts/playfair-var.woff2") format("woff2");
  font-weight:700 900;font-style:normal;font-display:swap;
}
@font-face{
  font-family:"Yellowtail";
  src:url("assets/fonts/yellowtail-400.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap;
}

/* ============================================================
   Boules & Beats 2026, landingspagina
   Palet afgeleid van het brand book en gesampled uit de logo-render.
   Terracotta #D66E3B is gesampled en bevestigd. De groenen zijn
   gekalibreerd op het brand book en moeten nog tegen het
   bronbestand worden gelegd voordat dit live gaat.
   ============================================================ */
:root{
  --groen-diep:#14261F;
  --groen:#1E3A34;
  --groen-mid:#2A4A40;
  /* Brandterracotta. Haalt met wit maar 3.41:1, dus alleen decoratief
     gebruiken: logo, iconen, grote cijfers, randen. */
  --terracotta:#D66E3B;
  /* Zelfde tint en verzadiging, donkerder. Haalt 5.96:1 op wit, 5.21:1 op
     creme en 4.81:1 op creme-warm, dus AA op alle drie de lichte vlakken.
     Dit is de variant voor alles wat tekst of een UI-signaal draagt. */
  --terracotta-tekst:#A04B22;
  --terracotta-hover:#B15325;
  --goud:#E3A63F;
  --creme:#F5EFE4;
  --creme-warm:#EFE6D6;
  --inkt:#12211C;

  --serif:"Playfair Display",Georgia,serif;
  --sans:"Montserrat",system-ui,-apple-system,sans-serif;
  --script:"Yellowtail",cursive;

  --maxw:1180px;
  --radius:14px;
  --schaduw:0 18px 50px rgba(20,38,31,.18);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  font-family:var(--sans);
  font-size:17px;
  line-height:1.65;
  color:var(--inkt);
  background:var(--creme);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}

/* Alleen voor hulpsoftware, visueel weg maar niet display:none. */
.vw{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

h1,h2,h3{font-family:var(--serif);font-weight:900;line-height:1.05;margin:0 0 .5em;letter-spacing:-.01em}
h1{font-size:clamp(2.6rem,7vw,5rem)}
h2{font-size:clamp(2rem,4.4vw,3.3rem)}
h3{font-size:clamp(1.15rem,2vw,1.5rem);font-weight:700}
p{margin:0 0 1.1em}

.script{font-family:var(--script);font-weight:400;color:var(--goud);letter-spacing:0}
.eyebrow{
  font-size:.75rem;font-weight:700;letter-spacing:.22em;text-transform:uppercase;
  color:var(--terracotta-tekst);margin:0 0 1rem;
}

/* ---------- placeholder-markering ---------- */
/* Alles met deze klasse is een aanname of ontbrekend feit.
   Moet door Pleun bevestigd worden voor livegang. */
.todo{
  background:repeating-linear-gradient(45deg,#FFE9C7,#FFE9C7 8px,#FFDFAE 8px,#FFDFAE 16px);
  color:#6B4A12;border-bottom:2px dotted #B07C1E;padding:0 .25em;font-weight:600;
  border-radius:3px;
}

/* ---------- knoppen ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-family:var(--sans);font-weight:700;font-size:1.02rem;
  padding:1.05rem 2rem;border-radius:999px;border:2px solid transparent;
  text-decoration:none;cursor:pointer;transition:transform .16s ease,box-shadow .16s ease,background .16s ease;
  line-height:1;
}
.btn--primair{background:var(--terracotta-tekst);color:#fff;box-shadow:0 10px 26px rgba(169,79,35,.4)}
.btn--primair:hover{background:var(--terracotta-hover);transform:translateY(-2px);box-shadow:0 16px 34px rgba(169,79,35,.5)}
.btn--secundair{background:transparent;color:var(--creme);border-color:rgba(245,239,228,.45)}
.btn--secundair:hover{border-color:var(--creme);background:rgba(245,239,228,.09)}
.btn--groen{background:var(--groen);color:var(--creme)}
.btn--groen:hover{background:var(--groen-mid);transform:translateY(-2px)}
.btn--groot{font-size:1.12rem;padding:1.25rem 2.6rem}

/* ---------- logo ---------- */
.logo{display:flex;flex-direction:column;align-items:center;gap:.55rem;text-align:center}
.logo__mark{width:112px;height:auto}
.logo__woord{
  font-family:var(--serif);font-weight:900;line-height:.86;
  font-size:2.5rem;letter-spacing:.005em;color:var(--creme);
}
.logo__woord .amp{color:var(--goud)}
.logo__regel{width:100%;height:1px;background:var(--goud);opacity:.6}
.logo__tag{
  font-size:.62rem;font-weight:700;letter-spacing:.32em;text-transform:uppercase;color:var(--terracotta);
}
.logo--klein .logo__mark{width:52px}
.logo--klein .logo__woord{font-size:1.15rem}
.logo--klein .logo__tag{font-size:.44rem;letter-spacing:.2em}
.logo--donker .logo__woord{color:var(--groen)}

/* ---------- topbar ---------- */
.topbar{
  background:var(--groen-diep);color:var(--creme);
  font-size:.82rem;font-weight:600;letter-spacing:.04em;
  padding:.7rem 0;
}
.topbar__in{display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;align-items:center;justify-content:center;text-align:center}
.topbar__pill{color:var(--goud);display:inline-flex;align-items:center;gap:.45rem}

/* ---------- hero ---------- */
.hero{position:relative;background:var(--groen-diep);color:var(--creme);overflow:hidden;isolation:isolate}
.hero__bg{position:absolute;inset:0;z-index:-2}
.hero__bg img{width:100%;height:100%;object-fit:cover}
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;
  background:
    radial-gradient(120% 90% at 50% 8%,rgba(227,166,63,.20),transparent 60%),
    linear-gradient(180deg,rgba(20,38,31,.90) 0%,rgba(20,38,31,.80) 45%,rgba(20,38,31,.96) 100%);
}
/* Alleen de verticale padding zetten. Een shorthand hier overschrijft de
   horizontale padding van .wrap, en dan loopt de hele hero op mobiel tot
   tegen de schermrand. */
.hero__in{padding-top:3rem;padding-bottom:4.5rem;text-align:center;display:flex;flex-direction:column;align-items:center}
.hero h1{margin:1.6rem 0 .3rem;color:var(--creme);text-wrap:balance}
.hero h1 .script{display:block;font-size:.62em;margin-top:.06em}
.hero__lead{font-size:clamp(1.05rem,2vw,1.3rem);max-width:46ch;color:rgba(245,239,228,.9);margin-bottom:1.6rem}
.hero__acties{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;margin-bottom:1.5rem}
.hero__schaarste{
  display:inline-flex;align-items:center;gap:.6rem;
  background:rgba(227,166,63,.14);border:1px solid rgba(227,166,63,.4);
  color:var(--goud);border-radius:999px;padding:.55rem 1.2rem;
  font-size:.86rem;font-weight:600;
  /* Zonder wrap en max-width duwen de losse tekstnodes als anonieme flex-items
     de chip breder dan de viewport, en dan snijden de ronde uiteinden af. */
  flex-wrap:wrap;justify-content:center;max-width:100%;
}
.stip{width:8px;height:8px;border-radius:50%;background:var(--goud);flex:none;animation:puls 2.2s ease-in-out infinite}
@keyframes puls{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.75)}}

/* ---------- feitenband ---------- */
.feiten{background:var(--groen);color:var(--creme);border-top:1px solid rgba(245,239,228,.1)}
.feiten__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(245,239,228,.12)}
.feit{background:var(--groen);padding:1.9rem 1.2rem;text-align:center}
.feit__k{font-family:var(--serif);font-weight:900;font-size:1.75rem;color:var(--goud);line-height:1;margin-bottom:.35rem}
.feit__l{font-size:.76rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:rgba(245,239,228,.72)}

/* ---------- secties ---------- */
.sec{padding:5.5rem 0}
.sec--creme{background:var(--creme)}
.sec--warm{background:var(--creme-warm)}
.sec--groen{background:var(--groen);color:var(--creme)}
.sec--groen h2,.sec--groen h3{color:var(--creme)}
.sec--groen .eyebrow{color:var(--goud)}
.sec__kop{max-width:60ch;margin:0 auto 3rem;text-align:center}
.sec__kop p{font-size:1.1rem;opacity:.85;margin-bottom:0}

/* ---------- drie pijlers ---------- */
.pijlers{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
.pijler{
  background:var(--creme);border-radius:var(--radius);padding:2.4rem 1.9rem;
  border:1px solid rgba(20,38,31,.09);text-align:center;
}
.pijler__ico{width:56px;height:56px;margin:0 auto 1.2rem;color:var(--terracotta-tekst)}
.pijler h3{color:var(--groen);margin-bottom:.5rem}
.pijler p{font-size:.97rem;margin-bottom:0;opacity:.82}

/* ---------- teamformats ---------- */
.formats{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;align-items:stretch}
.format{
  position:relative;background:var(--creme);border:2px solid rgba(20,38,31,.1);
  border-radius:var(--radius);padding:2.2rem 1.8rem;display:flex;flex-direction:column;
  transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.format:hover{transform:translateY(-5px);border-color:var(--terracotta-tekst);box-shadow:var(--schaduw)}
.format--uitgelicht{border-color:var(--goud);background:#fff}
.format__badge{
  position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  background:var(--goud);color:var(--groen-diep);font-size:.66rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;padding:.4rem 1rem;border-radius:999px;white-space:nowrap;
}
.format__n{font-family:var(--serif);font-size:3.2rem;font-weight:900;color:var(--terracotta-tekst);line-height:1;margin-bottom:.2rem}
.format h3{color:var(--groen);margin-bottom:.3rem}
.format__dag{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--groen);opacity:.7;margin-bottom:.7rem}
.format p{font-size:.95rem;opacity:.85;flex:1}
.format__prijs{
  margin:1.2rem 0 0;padding-top:1rem;border-top:1px solid rgba(20,38,31,.12);
  font-size:.9rem;font-weight:600;color:var(--groen);opacity:1;flex:none;
}
.format .btn{width:100%;margin-top:.9rem}

/* ---------- tijdlijn ---------- */
.tijdlijn{max-width:760px;margin:0 auto;position:relative;padding-left:2.4rem}
.tijdlijn::before{content:"";position:absolute;left:7px;top:12px;bottom:12px;width:2px;background:rgba(245,239,228,.22)}
.tl{position:relative;padding:0 0 2.3rem}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:-2.4rem;top:7px;width:16px;height:16px;border-radius:50%;
  background:var(--goud);border:3px solid var(--groen);
}
.tl__t{font-family:var(--serif);font-weight:900;font-size:1.3rem;color:var(--goud);margin-bottom:.15rem}
.tl h3{font-size:1.1rem;margin-bottom:.3rem}
.tl p{font-size:.97rem;opacity:.8;margin-bottom:0}

/* ---------- geen ervaring / wederkerigheid ---------- */
.split{display:grid;grid-template-columns:1.05fr .95fr;gap:3.5rem;align-items:center}
.split__beeld{border-radius:var(--radius);overflow:hidden;box-shadow:var(--schaduw)}
.split__beeld img{aspect-ratio:4/3;object-fit:cover;width:100%}
.checklist{list-style:none;padding:0;margin:0 0 2rem}
.checklist li{position:relative;padding-left:2.2rem;margin-bottom:.9rem;font-weight:500}
.checklist li::before{
  content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;
  background:var(--terracotta-tekst);
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px no-repeat,linear-gradient(#000,#000);
  -webkit-mask-composite:xor;mask-composite:exclude;
}

/* ---------- placeholder-beeld ---------- */
.beeld-todo{
  aspect-ratio:4/3;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;
  flex-direction:column;gap:.6rem;text-align:center;padding:2rem;
  background:repeating-linear-gradient(45deg,#E4DCCB,#E4DCCB 12px,#DBD2BF 12px,#DBD2BF 24px);
  border:2px dashed #A99B80;color:#6E6350;font-size:.88rem;font-weight:600;
}
.beeld-todo svg{width:38px;height:38px;opacity:.55}

/* ---------- organisatie / autoriteit ---------- */
.org{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem}
.org__kaart{
  background:rgba(245,239,228,.06);border:1px solid rgba(245,239,228,.16);
  border-radius:var(--radius);padding:2rem;
}
.org__kaart h3{color:var(--goud);font-size:1.2rem;margin-bottom:.5rem}
.org__kaart p{font-size:.95rem;opacity:.82;margin-bottom:0}

/* ---------- sponsors, mede mogelijk gemaakt door ---------- */
.sponsors{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.sponsor-logo{
  aspect-ratio:16/9;padding:1rem;font-size:.78rem;
  display:flex;align-items:center;justify-content:center;
  background:var(--creme);border:1px solid rgba(20,38,31,.12);border-radius:var(--radius);
}
.sponsor-logo.beeld-todo{flex-direction:column;gap:.6rem;border:2px dashed #A99B80}
.sponsor-logo svg{width:26px;height:26px}

/* ---------- teller / sociale bewijskracht ---------- */
.teller{
  text-align:center;background:var(--groen-diep);border-radius:var(--radius);
  padding:3rem 2rem;border:1px solid rgba(227,166,63,.3);
}
.teller__n{font-family:var(--serif);font-weight:900;font-size:clamp(3.4rem,9vw,6rem);color:var(--goud);line-height:1.15}
/* De placeholder-markering tekent een achtergrondbox op de volle regelhoogte.
   Op dit formaat dekt die het label eronder af, dus hier kleiner tonen. */
.teller__n .todo{font-size:.5em}
.teller__l{font-size:.82rem;font-weight:700;letter-spacing:.2em;text-transform:uppercase;color:rgba(245,239,228,.75)}
.balk{max-width:440px;margin:1.8rem auto .8rem;height:9px;border-radius:999px;background:rgba(245,239,228,.16);overflow:hidden}
.balk__vul{height:100%;width:var(--gevuld,0%);border-radius:999px;background:linear-gradient(90deg,var(--terracotta),var(--goud));transition:width .4s ease}
.citaat{
  max-width:640px;margin:3rem auto 0;text-align:center;font-family:var(--serif);
  font-size:clamp(1.25rem,2.4vw,1.65rem);font-weight:700;line-height:1.4;color:var(--creme);
}
.citaat cite{
  display:block;margin-top:1.2rem;font-family:var(--sans);font-size:.82rem;font-weight:600;
  font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--goud);
}

/* ---------- formulier ---------- */
.form-blok{max-width:660px;margin:0 auto;background:#fff;border-radius:var(--radius);padding:2.8rem;box-shadow:var(--schaduw)}
.stappen{display:flex;gap:.5rem;margin-bottom:2rem}
.stap-bal{flex:1;height:5px;border-radius:999px;background:rgba(20,38,31,.13);transition:background .3s ease}
.stap-bal.actief{background:var(--terracotta-tekst)}
fieldset{border:0;padding:0;margin:0}
legend{font-family:var(--serif);font-weight:900;font-size:1.5rem;color:var(--groen);margin-bottom:.4rem;padding:0}
.legend-sub{font-size:.93rem;opacity:.7;margin-bottom:1.6rem}
.keuzes{display:grid;gap:.8rem;margin-bottom:1.6rem}
.keuze{
  display:flex;align-items:center;gap:1rem;padding:1.1rem 1.3rem;cursor:pointer;
  border:2px solid rgba(20,38,31,.12);border-radius:10px;transition:border-color .16s ease,background .16s ease;
}
.keuze:hover{border-color:var(--terracotta-hover);background:rgba(169,79,35,.05)}
.keuze input{accent-color:var(--terracotta-tekst);width:19px;height:19px;flex:none;margin:0}
.keuze input:checked ~ .keuze__tekst strong{color:var(--terracotta-tekst)}
.keuze:has(input:checked){border-color:var(--terracotta-tekst);background:rgba(214,110,59,.07)}
.keuze__tekst strong{display:block;font-size:1rem}
.keuze__tekst span{font-size:.86rem;opacity:.68}
.veld{margin-bottom:1.1rem}
.veld label{display:block;font-size:.86rem;font-weight:600;margin-bottom:.4rem}
.veld input{
  width:100%;padding:.95rem 1.1rem;border:2px solid rgba(20,38,31,.14);border-radius:10px;
  font-family:var(--sans);font-size:1rem;transition:border-color .16s ease;background:#fff;color:var(--inkt);
}
.veld input:focus{outline:none;border-color:var(--terracotta-tekst)}
.veld small{display:block;margin-top:.35rem;font-size:.78rem;opacity:.6}
.form-acties{display:flex;gap:.8rem;margin-top:1.8rem}
.form-acties .btn{flex:1}
.form-nb{font-size:.8rem;opacity:.62;text-align:center;margin:1.2rem 0 0}
.form-nb--kosten{
  text-align:left;opacity:1;background:var(--creme-warm);border-radius:10px;
  padding:1rem 1.2rem;margin:1.6rem 0 0;border-left:3px solid var(--goud);
}
.samenvatting{
  background:var(--creme-warm);border-radius:10px;padding:1.1rem 1.3rem;margin-bottom:1.6rem;
  font-size:.9rem;border-left:3px solid var(--goud);
}
.samenvatting b{color:var(--groen)}

/* ---------- faq ---------- */
.faq{max-width:780px;margin:0 auto}
details{border-bottom:1px solid rgba(20,38,31,.13);padding:1.3rem 0}
summary{
  font-family:var(--serif);font-weight:700;font-size:1.13rem;color:var(--groen);
  cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1rem;
  /* Zonder padding is het raakvlak 30px hoog, onder de 44px-richtlijn. */
  padding:.7rem 0;min-height:44px;
}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font-size:1.6rem;color:var(--terracotta-tekst);flex:none;transition:transform .2s ease;line-height:1}
details[open] summary::after{transform:rotate(45deg)}
details p{margin:.9rem 0 0;font-size:.97rem;opacity:.84}

/* ---------- slot-cta ---------- */
.slot{background:var(--groen-diep);color:var(--creme);text-align:center;padding:6rem 0}
.slot h2{color:var(--creme)}
.slot p{max-width:48ch;margin:0 auto 2rem;opacity:.85;font-size:1.1rem}

/* ---------- footer ---------- */
.foot{background:#0D1A15;color:rgba(245,239,228,.62);padding:3.5rem 0 6.5rem;font-size:.87rem}
.foot__in{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between;align-items:center}
.foot a{color:var(--goud);text-decoration:none}
.foot a:hover{text-decoration:underline}

/* ---------- sticky mobiele cta ---------- */
.sticky{
  position:fixed;left:0;right:0;bottom:0;z-index:50;display:none;
  background:rgba(20,38,31,.97);backdrop-filter:blur(10px);
  padding:.8rem 1rem;border-top:1px solid rgba(227,166,63,.3);
  gap:1rem;align-items:center;justify-content:space-between;
  transform:translateY(110%);transition:transform .25s ease;
}
/* Alleen tonen als de hero-CTA uit beeld is, anders staat er twee keer
   dezelfde CTA in hetzelfde scherm. Zie .sticky--aan in het script. */
.sticky--aan{transform:translateY(0)}
.sticky__t{font-size:.78rem;font-weight:600;color:var(--goud);line-height:1.3}
.sticky .btn{padding:.85rem 1.5rem;font-size:.92rem;flex:none}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .pijlers,.formats,.org{grid-template-columns:1fr}
  .sponsors{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr;gap:2.2rem}
  .feiten__grid{grid-template-columns:repeat(2,1fr)}
  .sec{padding:4rem 0}
  .form-blok{padding:1.8rem}
  .sticky{display:flex}
  .foot{padding-bottom:6.5rem}
  .foot__in{flex-direction:column;text-align:center}
}
@media(max-width:520px){
  .hero__acties{flex-direction:column;width:100%}
  .hero__acties .btn{width:100%}
  .form-acties{flex-direction:column}
}
@media(prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}