/*
Theme Name: AISF 2027
Template: twentytwentyfive
Author: Extremos Dance BV
Description: Amsterdam International Salsa Festival — editie 2027, thema Roaring 20's.
  Zwart, rood en goud. Koppen in Oswald, tekst in Lato, beide op eigen server.
Version: 1.0
*/

/* ------------------------------------------------------------------
   Het blokthema klemt losse HTML-blokken vast op de contentbreedte
   (740px). Onze eigen secties regelen hun breedte zelf, dus die
   beperking moet eraf, anders staat alles in een smalle kolom.
   ------------------------------------------------------------------ */
.entry-content > .aisf,
.wp-block-post-content > .aisf,
.aisf {
  max-width: none;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

/* Paginatitel hoort niet op deze pagina's; de secties hebben hun eigen kop. */
.wp-block-post-title { display: none; }

/* ------------------------------------------------------------------
   Aansluiten op de menubalk
   Het blokthema zet drie marges boven de inhoud: main (30px), de groep
   daarbinnen (30px) en entry-content (19px). Samen bijna tachtig pixels
   leegte, en daar komt de eigen ruimte van de eerste sectie nog bovenop.
   Onze secties regelen hun ruimte zelf, dus die drie gaan eraf en de
   eerste sectie begint wat dichter op de balk.
   ------------------------------------------------------------------ */
/* Het thema zet deze twee met margin-block-start / padding-block-start
   vanuit theme.json. Zelfde eigenschap, dus zonder !important wint de
   regel die het laatst geladen wordt, en dat is niet de onze. */
main.wp-block-group:has(.aisf) { margin-block-start: 0 !important; }
main:has(.aisf) > .wp-block-group.has-global-padding { padding-block-start: 0 !important; }
.entry-content:has(> .aisf) { margin-block-start: 0; }
.aisf > *:first-child { padding-top: clamp(1.7rem, 3.5vw, 2.8rem); }


/* ------------------------------------------------------------------
   De basis van elke festivalpagina
   ------------------------------------------------------------------
   Dit blok stond tot 4 september 2026 in de inhoud van elke pagina
   afzonderlijk: de kleuren, de sectiemarges, de knop, de eyebrow. Een
   nieuwe pagina die ik aanmaakte had het niet, en dan verwees var(--rood)
   naar niets en werd alles wat rood hoort te zijn onzichtbaar. Dat is drie
   keer misgegaan.

   Nu staat het hier, en heeft elke pagina het automatisch. De pagina's die
   het nog in hun eigen inhoud hebben staan overschrijven het met precies
   dezelfde waarden, dus daar verandert niets; die kopieën kunnen er per
   soort pagina uit zodra we tijd hebben om het rustig na te lopen.
   ------------------------------------------------------------------ */
body:has(.aisf) .wp-block-post-title,
body:has(.aisf) .entry-title{display:none!important}
.aisf{max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important}
.aisf{--zwart:#0c0a0d;--houtskool:#17161a;--rood:#c8102e;--wit:#eae7e4;
  background:var(--zwart);color:var(--wit);font-family:Lato,-apple-system,sans-serif;
  margin:0 calc(50% - 50vw);width:100vw;overflow-x:hidden}
.aisf h1,.aisf h2,.aisf h3,.aisf .aisf-knop,.aisf .aisf-cijfers strong{
  font-family:Oswald,Impact,sans-serif;text-transform:uppercase;font-weight:600;line-height:1.05}
.aisf section,.aisf header,.aisf footer{padding:clamp(3rem,8vw,6rem) clamp(1.2rem,5vw,3rem);max-width:1240px;margin:0 auto}

/* Hero */
.aisf-hero{text-align:center;border-bottom:1px solid rgba(234,231,228,.12)}
.aisf-logo{width:min(210px,46vw);height:auto;margin:0 auto 2rem;display:block}
.aisf-hero h1{font-size:clamp(2.1rem,7.5vw,4.4rem);margin:.5rem 0 1.2rem}
.aisf-hero h1 em{font-style:normal;color:var(--rood)}
.aisf-datum{font-size:clamp(1rem,2.4vw,1.25rem);letter-spacing:.02em;opacity:.85;margin:0 0 2rem}

/* Deco-streepje met gespatieerde kapitalen */
.aisf-eyebrow{display:flex;align-items:center;gap:.9rem;justify-content:center;
  font-size:.78rem;letter-spacing:.22em;text-transform:uppercase;color:var(--wit);opacity:.75;margin:0 0 1rem}
.aisf-eyebrow span{display:block;width:2.5rem;height:1px;background:var(--rood)}
.aisf-sectie .aisf-eyebrow,.aisf-waarom .aisf-eyebrow{justify-content:flex-start}

.aisf-knop{display:inline-block;background:var(--rood);color:#fff;text-decoration:none;
  padding:1rem 2.4rem;letter-spacing:.08em;font-size:1.05rem;border-radius:2px;
  transition:background .15s}
.aisf-knop:hover{background:#a00d24}
.aisf-knop-leeg{background:transparent;border:1px solid var(--rood);color:var(--wit)}
.aisf-knop-leeg:hover{background:var(--rood);color:#fff}
.aisf-prijs{font-size:.95rem;opacity:.7;margin:1rem 0 0}

/* Cijfers, gescheiden door dunne lijnen */
.aisf-cijfers{display:grid;grid-template-columns:repeat(4,1fr);gap:0;text-align:center;
  border-top:1px solid rgba(234,231,228,.12);border-bottom:1px solid rgba(234,231,228,.12);
  padding-top:2.2rem;padding-bottom:2.2rem}
.aisf-cijfers div{border-left:1px solid rgba(234,231,228,.10);padding:.2rem .4rem}
.aisf-cijfers div:first-child{border-left:0}
.aisf-cijfers strong{display:block;font-size:clamp(1.6rem,4.5vw,2.4rem);color:var(--wit)}
.aisf-cijfers span{font-size:.82rem;letter-spacing:.1em;text-transform:uppercase;opacity:.65}

/* Waarom */
.aisf-redenen{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:1.5rem}
.aisf-redenen h3{font-size:1.15rem;color:var(--wit);margin:0 0 .5rem;
  border-left:3px solid var(--rood);padding-left:.8rem}
.aisf-redenen p{margin:0;opacity:.8;font-size:1rem;line-height:1.6}

/* Rasters */
.aisf-sectie h2{font-size:clamp(1.8rem,5vw,2.8rem);margin:0 0 2rem}
.aisf-sectie-donker{background:var(--houtskool)}
.aisf-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:1.2rem}
.aisf-grid-groot{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin-bottom:2.5rem}
.aisf-kaart{margin:0;text-align:center}
.aisf-kaart img{width:100%;height:170px;object-fit:contain;object-position:bottom;display:block}
.aisf-grid-groot .aisf-kaart img{height:240px}
.aisf-kaart figcaption{margin-top:auto;font-size:.78rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.3rem .5rem;background:var(--rood);color:#fff;font-family:Oswald,sans-serif;line-height:1.1;height:3.4rem;box-sizing:border-box;display:flex;align-items:center;justify-content:center;text-align:center;overflow:hidden}
.aisf-noot{opacity:.65;font-size:.95rem;margin:0 0 1.5rem}

.aisf-slot{text-align:center;border-top:1px solid rgba(234,231,228,.12)}
.aisf-slot h2{font-size:clamp(1.6rem,4.5vw,2.4rem);margin:0 0 1.5rem}

@media (max-width:600px){
  .aisf-cijfers{grid-template-columns:repeat(2,1fr);gap:1.5rem 0}
  .aisf-cijfers div:nth-child(3){border-left:0}
  .aisf-kaart img{height:135px}
  .aisf-grid-groot .aisf-kaart img{height:175px}
}

/* ------------------------------------------------------------------
   Aanmelden voor de nieuwsbrief
   ------------------------------------------------------------------
   Het formulier post rechtstreeks naar Mailchimp. Daar wordt de
   aanmelding vastgelegd met datum en IP, en dat is precies de
   toestemming die je later wilt kunnen aantonen. Geen javascript, dus
   er is ook niets dat stuk kan gaan.

   Staat in het thema omdat dit blok op meer dan een pagina kan komen.
   ------------------------------------------------------------------ */
.aisf-inschrijf{display:flex;flex-wrap:wrap;gap:.8rem;align-items:flex-end;margin:1.6rem 0 0;max-width:44rem;position:relative}
.aisf-inschrijf .aisf-veld{display:flex;flex-direction:column;gap:.4rem;flex:1 1 12rem}
.aisf-inschrijf .aisf-veld span{font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;opacity:.7}
.aisf-inschrijf input{background:rgba(255,255,255,.05);border:1px solid rgba(234,231,228,.22);color:var(--wit);
  font-family:Lato,-apple-system,sans-serif;font-size:1rem;padding:.85rem .9rem;border-radius:2px;
  width:100%;box-sizing:border-box}
.aisf-inschrijf input:focus{outline:0;border-color:var(--rood)}
.aisf-inschrijf button{flex:0 0 auto;border:0;cursor:pointer;border-radius:2px;
  font-family:Oswald,Impact,sans-serif;text-transform:uppercase;font-weight:600;letter-spacing:.08em;
  background:var(--rood);color:#fff;padding:.95rem 1.9rem;font-size:1.02rem;transition:background .15s}
.aisf-inschrijf button:hover{background:#a00d24}
/* De honeypot: bots vullen hem in, mensen zien hem niet. Zo wil Mailchimp het. */
.aisf-inschrijf .aisf-weg{position:absolute;left:-5000px}
.aisf-inschrijf-uitleg{margin:1.4rem 0 0;opacity:.85;font-size:1rem;line-height:1.6;max-width:60ch}
.aisf-inschrijf-klein{margin:.9rem 0 0;opacity:.55;font-size:.85rem}
@media (max-width:520px){
  .aisf-inschrijf button{width:100%}
}

/* Instagram onder de naam van een artiest. Als knop, in dezelfde taal als
   .aisf-knop-leeg elders op de site: rode rand die vol rood wordt. Kleiner
   dan de knoppen die naar de kassa gaan, want dit is geen hoofdactie.
   Alleen het logo en de handle; het woord "Instagram" erbij leest als een
   formulier, en de handle blijft in kleine letters want het is een naam. */
.aisf-artinsta{margin:1.1rem 0 0}
.aisf-artinsta a{display:inline-flex;align-items:center;justify-content:center;
  width:2.7rem;height:2.7rem;border:1px solid var(--rood);border-radius:50%;
  color:var(--wit);text-decoration:none;transition:background .15s,color .15s}
.aisf-artinsta a:hover{background:var(--rood);color:#fff}
.aisf-artinsta svg{width:1.25rem;height:1.25rem;
  fill:none;stroke:currentColor;stroke-width:1.8}

/* ------------------------------------------------------------------
   Land en vlag
   ------------------------------------------------------------------
   De artiestpagina's krijgen deze regels nog los meegeleverd vanuit
   bouw-landen.php. Hier staan ze voor de dj's, die hetzelfde kaartje en
   dezelfde kop gebruiken. Identieke regels, dus ze bijten elkaar niet.
   ------------------------------------------------------------------ */
.aisf .aisf-artland{margin:.1rem 0 .6rem;font-size:.95rem;opacity:.6}
.aisf .aisf-kaart{position:relative}
.aisf .aisf-kaart .aisf-kaartvlag{position:absolute;top:.5rem;right:.55rem;z-index:2;
  display:flex;gap:.22rem;line-height:0}
/* padding:0 is nodig: anders erft de vlag de 1rem van .aisf-kaart img en
   wordt het kader ruim twee keer zo groot als de vlag zelf */
.aisf .aisf-kaart .aisf-kaartvlag img{width:1.9rem;height:auto;padding:0;display:block;
  border-radius:2px;box-shadow:0 1px 4px rgba(0,0,0,.7)}
.aisf .aisf-kaart .aisf-kaartvlag-twee img{width:1.5rem}
@media (max-width:600px){
  .aisf .aisf-kaart .aisf-kaartvlag img{width:1.55rem}
  .aisf .aisf-kaart .aisf-kaartvlag-twee img{width:1.25rem}
}