/* Dit is onze bruiloft - trouwsite-stijlen
   6 stijlen: Hand Drawn (de botanische save-the-date) en vijf uitgesproken
   eigen werelden. Thema = class op de body (sod-thema-<slug>). Alles wat het
   bruidspaar invult blijft gewone tekst in de blokken; versiering komt uit de CSS. */

:root {
  --sod-primair: #4A5340;
  --sod-primair-licht: #7C8A6B;
  --sod-accent: #A8B394;
  --sod-tekst: #33372C;
  --sod-tekst-zacht: #5F6553;
  --sod-bg: #F7F5EF;
  --sod-bg-zacht: #EFEDE3;
  --sod-lijn: #D8D5C6;
  --sod-hero-bg: var(--sod-bg);
  --sod-hero-tekst: var(--sod-tekst);
  --sod-kop-font: "Cormorant Garamond", Georgia, serif;
  --sod-script-font: "Great Vibes", cursive;
  --sod-body-font: "Inter", system-ui, sans-serif;
  --sod-caps-font: "Marcellus", Georgia, serif;
  --sod-radius: 14px;
  /* Vlakken (kaarten, invoer) en de tekst op een gevulde knop. Standaard wit;
     een donkere stijl zet ze anders. */
  --sod-vlak: #fff;
  --sod-knop-tekst: #fff;
}

/* 1. Hand Drawn: creme, sierlijk handschrift, illustratie centraal, botanische takken. */
body.sod-thema-handdrawn {
  --sod-primair: #4A5340; --sod-primair-licht: #7C8A6B; --sod-accent: #A8B394;
  --sod-bg: #F8F6F0; --sod-bg-zacht: #F1EFE5; --sod-lijn: #D9D6C7;
}

/* 2. Sterrennacht: diep nachtblauw met goud, een sterrenhemel en een maan-
   rond portret. Voor een avond- of winterbruiloft. */
body.sod-thema-nacht {
  --sod-primair: #D9B97A; --sod-primair-licht: #EAD5A8; --sod-accent: #B8955A;
  --sod-tekst: #ECE6D9; --sod-tekst-zacht: #B9B4A8;
  --sod-bg: #0E1726; --sod-bg-zacht: #142037; --sod-lijn: #33405C;
  --sod-hero-bg: #0B1220; --sod-hero-tekst: #ECE6D9;
  --sod-vlak: #16233A; --sod-knop-tekst: #0E1726;
  --sod-kop-font: "Cormorant Garamond", Georgia, serif;
  --sod-caps-font: "Cinzel", Georgia, serif;
  --sod-script-font: "Cormorant Garamond", Georgia, serif;
  --sod-body-font: "Inter", system-ui, sans-serif;
  color-scheme: dark;
}

/* 3. Redactie: een tijdschrift. Reusachtige namen, genummerde hoofdstukken,
   zwart op gebroken wit met één rode steunkleur. */
body.sod-thema-redactie {
  --sod-primair: #151413; --sod-primair-licht: #55514B; --sod-accent: #C8452C;
  --sod-tekst: #151413; --sod-tekst-zacht: #57524B;
  --sod-bg: #F2EFE8; --sod-bg-zacht: #E7E2D7; --sod-lijn: #CCC5B7;
  --sod-hero-bg: #F2EFE8; --sod-vlak: #FAF8F3;
  --sod-kop-font: "Bodoni Moda", Didot, Georgia, serif;
  --sod-caps-font: "Inter", system-ui, sans-serif;
  --sod-script-font: "Bodoni Moda", Didot, Georgia, serif;
  --sod-body-font: "Inter", system-ui, sans-serif;
  --sod-radius: 0px;
}

/* 4. Mediterraan: terracotta en olijf, boogvensters, een zon en tegels. */
body.sod-thema-zomer {
  --sod-primair: #B5532A; --sod-primair-licht: #D98A5F; --sod-accent: #6F7D4A;
  --sod-tekst: #4A2E22; --sod-tekst-zacht: #765546;
  --sod-bg: #F7EEE2; --sod-bg-zacht: #F0DFC8; --sod-lijn: #E2CAAA;
  --sod-hero-bg: #F3E4CF; --sod-vlak: #FFF9F1;
  --sod-kop-font: "DM Serif Display", Georgia, serif;
  --sod-caps-font: "Jost", system-ui, sans-serif;
  --sod-script-font: "DM Serif Display", Georgia, serif;
  --sod-body-font: "Jost", system-ui, sans-serif;
  --sod-radius: 18px;
}

/* 5. Seventies: een regenboog die opkomt als de zon, dikke retroletters,
   golvende randen en harde schaduwen. */
body.sod-thema-groovy {
  --sod-primair: #D9542B; --sod-primair-licht: #F08A4B; --sod-accent: #F2B33D;
  --sod-tekst: #4B2A1E; --sod-tekst-zacht: #7B5040;
  --sod-bg: #FFF1DE; --sod-bg-zacht: #FFE3C4; --sod-lijn: #EFC596;
  --sod-hero-bg: #FFF1DE; --sod-vlak: #FFFAF2; --sod-knop-tekst: #FFF8EE;
  --sod-kop-font: "Shrikhand", Georgia, serif;
  --sod-caps-font: "Outfit", system-ui, sans-serif;
  --sod-script-font: "Shrikhand", Georgia, serif;
  --sod-body-font: "Outfit", system-ui, sans-serif;
  --sod-radius: 26px;
  --g-bruin: #4B2A1E; --g-roze: #E98FA6; --g-paars: #9A6BB0;
}

/* 6. Bloesem: pastel, zwevende kleurvlekken en kaarten van matglas. */
body.sod-thema-bloesem {
  --sod-primair: #8C5A78; --sod-primair-licht: #C394B0; --sod-accent: #F3C6C9;
  --sod-tekst: #4A3A47; --sod-tekst-zacht: #786774;
  --sod-bg: #FBF6F4; --sod-bg-zacht: #F7EDF0; --sod-lijn: #EAD3DC;
  --sod-hero-bg: #FBF6F4; --sod-vlak: rgba(255, 255, 255, .62);
  --sod-kop-font: "Playfair Display", Georgia, serif;
  --sod-caps-font: "Italiana", Georgia, serif;
  --sod-script-font: "Playfair Display", Georgia, serif;
  --sod-body-font: "Jost", system-ui, sans-serif;
  --sod-radius: 24px;
}

/* ============================ Basis ============================ */
body.sod-trouwsite {
  background: var(--sod-bg);
  color: var(--sod-tekst);
  font-family: var(--sod-body-font);
  font-size: 17px;
  line-height: 1.75;
  margin: 0;
}
.sod-trouwsite h1, .sod-trouwsite h2, .sod-trouwsite h3 {
  font-family: var(--sod-kop-font);
  font-weight: 500;
  line-height: 1.15;
  margin: 0 0 .5em;
}
.sod-trouwsite h2 { font-size: clamp(30px, 4.5vw, 46px); color: var(--sod-primair); }
.sod-trouwsite h3 { font-size: 23px; color: var(--sod-primair); }
.sod-trouwsite a { color: var(--sod-primair); }
.sod-trouwsite img { max-width: 100%; height: auto; }

.sod-sectie { padding: 76px 20px; max-width: 1120px; margin-left: auto; margin-right: auto; }
.sod-sectie.sod-vol { max-width: none; }
.sod-sectie.sod-zacht { background: var(--sod-bg-zacht); max-width: none; }
.sod-sectie.sod-zacht > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
/* Lichte band: zet een sectie af tegen de achtergrondkleur van de pagina,
   zodat opeenvolgende blokken duidelijk uit elkaar vallen. */
.sod-sectie.sod-licht { background: color-mix(in srgb, #fff 62%, var(--sod-bg)); max-width: none; }
.sod-sectie.sod-licht > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
/* Accentband: de volle secundaire kleur van het bruidspaar. Voor een blok dat
   los moet staan van de rest, zoals de praktische gegevens onderaan. */
.sod-sectie.sod-accent { background: var(--sod-accent); max-width: none; }
.sod-sectie.sod-accent > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
/* Getinte band: iets voller, voor een enkel accentblok tussendoor. */
.sod-sectie.sod-getint { background: color-mix(in srgb, var(--sod-accent) 26%, var(--sod-bg)); max-width: none; }
.sod-sectie.sod-getint > * { max-width: 1120px; margin-left: auto; margin-right: auto; }
.sod-centreer { text-align: center; }
.sod-smal { max-width: 720px; margin-left: auto; margin-right: auto; }
.sod-subkop { text-transform: uppercase; letter-spacing: .3em; font-size: 12px; font-weight: 500; color: var(--sod-primair); font-family: var(--sod-body-font); }
.sod-plaats { text-transform: uppercase; letter-spacing: .28em; font-size: 12px; color: var(--sod-tekst-zacht); margin: -6px 0 0; }
.sod-zachttekst { color: var(--sod-tekst-zacht); }

/* Scheidingsteken tussen twee blokken: een klein hartje op de achtergrond
   getekend, zodat het altijd dezelfde vorm heeft (geen emoji per apparaat). */
.sod-trouwsite hr.sod-scheiding {
  border: 0; height: 20px; width: 100%; margin: 40px 0 34px; padding: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 20.2C6.6 15.9 1 12.1 1 7.2 1 3.8 3.6 1.4 6.7 1.4c2.1 0 4.1 1.1 5.3 2.9 1.2-1.8 3.2-2.9 5.3-2.9 3.1 0 5.7 2.4 5.7 5.8 0 4.9-5.6 8.7-11 13z' fill='%23AEBE9A'/%3E%3C/svg%3E") center center / auto 18px no-repeat;
}
/* Scheidingsteken met dunne lijnen ernaast, voor een zwaardere overgang. */
.sod-trouwsite hr.sod-scheiding.is-style-wide,
.sod-trouwsite hr.sod-lijn-scheiding {
  height: 22px; max-width: 340px; margin: 0 auto;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 20.2C6.6 15.9 1 12.1 1 7.2 1 3.8 3.6 1.4 6.7 1.4c2.1 0 4.1 1.1 5.3 2.9 1.2-1.8 3.2-2.9 5.3-2.9 3.1 0 5.7 2.4 5.7 5.8 0 4.9-5.6 8.7-11 13z' fill='%23AEBE9A'/%3E%3C/svg%3E") center center / auto 18px no-repeat,
    linear-gradient(to right, transparent, var(--sod-lijn) 22%, var(--sod-lijn) 78%, transparent) center center / 100% 1px no-repeat;
}

/* Rij met vier hoogtepunten van de dag. De iconen komen uit de CSS, dus in
   de editor staan er alleen gewone tekstregels die iedereen kan aanpassen. */
.sod-hoogtepunten {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px;
  max-width: 900px; margin: 40px auto 0;
}
.sod-hoogtepunt {
  margin: 0; text-align: center; font-size: 14px; line-height: 1.5;
  color: var(--sod-primair); font-family: var(--sod-body-font);
}
.sod-hoogtepunt::before {
  content: ""; display: block; width: 42px; height: 42px; margin: 0 auto 12px;
  background-position: center; background-size: contain; background-repeat: no-repeat;
}
.sod-hoogtepunt:nth-child(1)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36V20'/%3E%3Cpath d='M20 25l-6-5M20 21l6-5'/%3E%3Cpath d='M20 24c-6.6 0-11.5-4.4-11.5-10S13.4 5 20 5s11.5 3.4 11.5 9-4.9 10-11.5 10z'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(2)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 25.5c-5.2 0-9.4-4.6-9.4-10.3S14.8 4.9 20 4.9s9.4 4.6 9.4 10.3-4.2 10.3-9.4 10.3z'/%3E%3Cpath d='M17.6 25.2l2.4 3 2.4-3'/%3E%3Cpath d='M20 28.2c0 3.2-2.8 3.2-2.8 5.4s2.8 2.2 2.8 4.4'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(3)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='8.5'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3Cpath d='M5.5 6v6M8.2 6v6M5.5 12h2.7M6.9 12v22'/%3E%3Cpath d='M32.8 6c2 2.4 2 7.6 0 10v18'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(4)::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 33.5C12.6 27.2 5.6 22.2 5.6 15.6c0-4.5 3.5-7.8 7.7-7.8 2.7 0 5.2 1.4 6.7 3.7 1.5-2.3 4-3.7 6.7-3.7 4.2 0 7.7 3.3 7.7 7.8 0 6.6-7 11.6-14.4 17.9z'/%3E%3C/svg%3E"); }
@media (max-width: 700px) {
  .sod-hoogtepunten { grid-template-columns: repeat(2, 1fr); gap: 30px 16px; }
}

.sod-trouwsite .wp-block-button__link {
  background: var(--sod-primair); color: var(--sod-knop-tekst); border-radius: 4px;
  padding: 15px 36px; font-family: var(--sod-body-font); font-size: 12px;
  font-weight: 500; letter-spacing: .18em; text-transform: uppercase; text-decoration: none;
}
.sod-trouwsite .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent; color: var(--sod-primair); border: 1px solid var(--sod-primair);
}

/* Navigatie */
.sod-nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--sod-bg) 92%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid color-mix(in srgb, var(--sod-lijn) 60%, transparent);
  padding: 16px 20px; margin: 0;
}
/* Drie kolommen (leeg | naam | links): de naam blijft zo altijd precies gecentreerd,
   ook als er door de fase maar een of twee menulinks overblijven. */
.sod-nav-binnen { max-width: 1120px; margin: 0 auto; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
.sod-nav-titel { grid-column: 2; text-align: center; font-family: var(--sod-kop-font); font-size: 21px; color: var(--sod-primair); margin: 0; white-space: nowrap; letter-spacing: .02em; }
.sod-nav-links { grid-column: 3; margin: 0; display: flex; justify-content: flex-end; gap: 26px; flex-wrap: wrap; }
.sod-nav-links a { text-transform: uppercase; letter-spacing: .18em; font-size: 11px; color: var(--sod-tekst-zacht); text-decoration: none; }
.sod-nav-links a:hover { color: var(--sod-primair); }
/* Op smalle schermen onder elkaar, allebei gecentreerd. */
@media (max-width: 700px) {
  .sod-nav-binnen { grid-template-columns: 1fr; gap: 10px; }
  .sod-nav-titel, .sod-nav-links { grid-column: 1; justify-content: center; }
}

/* Hero (basis: foto met tekst eroverheen) */
.sod-hero { position: relative; min-height: 90vh; display: flex; padding: 0; margin: 0; overflow: hidden; background: var(--sod-hero-bg); }
.sod-hero .sod-hero-img { position: absolute; inset: 0; margin: 0; z-index: 0; }
.sod-hero .sod-hero-img img { width: 100%; height: 100%; object-fit: cover; }
.sod-hero::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(to bottom, rgba(0,0,0,.15), rgba(0,0,0,.45)); }
.sod-hero-inhoud { position: relative; z-index: 2; margin: auto; text-align: center; color: #fff; padding: 48px 20px; max-width: 900px; }
.sod-hero-inhoud .sod-subkop { color: inherit; opacity: .92; }
.sod-hero-inhoud h1 { color: inherit; font-size: clamp(42px, 7vw, 78px); margin: .18em 0; }
.sod-hero-inhoud .sod-datum { font-family: var(--sod-kop-font); font-size: 22px; opacity: .95; }
.sod-hero-inhoud .wp-block-buttons { justify-content: center; margin-top: 30px; }

.sod-countdown { display: flex; justify-content: center; gap: clamp(24px, 6vw, 64px); margin: 34px 0 8px; }
.sod-countdown b { display: block; font-family: var(--sod-kop-font); font-weight: 500; font-size: clamp(34px, 5vw, 54px); }
.sod-countdown span { display: block; text-transform: uppercase; letter-spacing: .22em; font-size: 10.5px; opacity: .85; }

/* Bruidspaar */
.sod-paar { display: grid; grid-template-columns: repeat(2, minmax(200px, 320px)); gap: clamp(20px, 5vw, 48px); justify-content: center; margin-top: 34px; }
@media (max-width: 560px) { .sod-paar { grid-template-columns: 1fr; justify-items: center; } .sod-paar > * { max-width: 320px; } }
.sod-paar-kaart figure { margin: 0 0 14px; overflow: hidden; border-radius: var(--sod-radius); }
.sod-paar-kaart img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; display: block; }
.sod-paar-kaart h3 { margin: 0; font-size: 25px; }
.sod-paar-kaart p { margin: 2px 0 0; text-transform: uppercase; letter-spacing: .2em; font-size: 11px; color: var(--sod-tekst-zacht); }

/* Programma */
.sod-tijdlijn { position: relative; max-width: 760px; margin: 0 auto; }
.sod-tijdlijn::before { content: ""; position: absolute; top: 0; bottom: 0; left: 18px; width: 1px; background: var(--sod-lijn); }
.sod-tl-item { position: relative; padding: 0 0 40px 56px; margin: 0; }
.sod-tl-item::before { content: ""; position: absolute; left: 10px; top: 6px; width: 17px; height: 17px; border-radius: 50%; background: var(--sod-bg); border: 1px solid var(--sod-primair); }
.sod-tl-item .sod-tl-tijd { font-family: var(--sod-kop-font); font-size: 20px; color: var(--sod-tekst-zacht); opacity: .6; margin: 0 0 2px; }
.sod-tl-item h3 { margin: 0 0 4px; }
.sod-tl-item p { margin: 0; color: var(--sod-tekst-zacht); }
@media (min-width: 782px) {
  .sod-tijdlijn::before { left: 50%; }
  .sod-tl-item { width: 50%; padding: 0 48px 48px 0; text-align: right; }
  .sod-tl-item::before { left: auto; right: -9px; }
  .sod-tl-item:nth-child(even) { margin-left: 50%; padding: 0 0 48px 48px; text-align: left; }
  .sod-tl-item:nth-child(even)::before { right: auto; left: -8px; }
}

.sod-locatie-foto img { border-radius: var(--sod-radius); box-shadow: 0 18px 40px rgba(0,0,0,.10); }

/* Dresscode */
.sod-kleuren { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; margin: 36px 0; }
.sod-kleur { text-align: center; }
.sod-kleur .sod-bol { width: 74px; height: 74px; border-radius: 50%; margin: 0 auto 8px; box-shadow: inset 0 2px 6px rgba(0,0,0,.15); }
.sod-kleur p { margin: 0; text-transform: uppercase; letter-spacing: .14em; font-size: 11px; color: var(--sod-tekst-zacht); }
.sod-notitie { display: inline-block; padding: 14px 24px; border: 1px solid color-mix(in srgb, var(--sod-primair) 25%, transparent); border-radius: 6px; background: color-mix(in srgb, var(--sod-primair) 5%, transparent); color: var(--sod-primair); font-style: italic; }

/* Info-kaarten */
.sod-kaarten { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.sod-kaart { background: var(--sod-bg-zacht); border-radius: var(--sod-radius); padding: 28px; border: 1px solid color-mix(in srgb, var(--sod-lijn) 45%, transparent); }
.sod-kaart .sod-icoon { font-size: 28px; margin: 0 0 10px; }
.sod-kaart h3 { margin: 0 0 6px; }
.sod-kaart p { margin: 0; color: var(--sod-tekst-zacht); font-size: 15.5px; }
.sod-zacht .sod-kaart { background: var(--sod-bg); }

/* Galerij */
.sod-galerij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.sod-galerij figure { margin: 0; border-radius: var(--sod-radius); overflow: hidden; }
.sod-galerij img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .5s; }
.sod-galerij figure:hover img { transform: scale(1.04); }
@media (max-width: 781px) { .sod-galerij { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .sod-galerij { grid-template-columns: 1fr; } }

/* RSVP */
.sod-rsvp-kaart {
  max-width: 680px; margin: 0 auto; background: color-mix(in srgb, var(--sod-bg) 60%, var(--sod-vlak));
  border-radius: var(--sod-radius); padding: clamp(28px, 5vw, 52px);
  border: 1px solid var(--sod-lijn);
}
.sod-rsvp-kaart h2 { text-align: center; letter-spacing: .12em; }
.sod-rsvp-intro { text-align: center; text-transform: uppercase; letter-spacing: .2em; font-size: 11.5px; color: var(--sod-tekst-zacht); margin-bottom: 30px; }
#rsvp-gate p { text-align: center; color: var(--sod-tekst-zacht); }
.sod-code-rij { display: flex; gap: 14px; justify-content: center; align-items: center; flex-wrap: wrap; }
#rsvp-code { text-transform: uppercase; letter-spacing: .3em; text-align: center; width: 220px; border: 1px solid var(--sod-lijn); background: var(--sod-vlak); padding: 12px 6px; font-size: 15px; font-family: var(--sod-body-font); border-radius: 4px; }
#rsvp-code:focus { outline: none; border-color: var(--sod-primair); }
.sod-knop { background: var(--sod-primair); color: var(--sod-knop-tekst); border: none; border-radius: 4px; padding: 13px 32px; font-size: 12px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; font-family: var(--sod-body-font); }
.sod-knop:hover { opacity: .9; }
.sod-knop-vol { width: 100%; padding: 16px; margin-top: 10px; }
#rsvp-greeting { text-align: center; font-family: var(--sod-kop-font); font-size: 25px; color: var(--sod-primair); }
.sod-veld { margin-bottom: 20px; }
.sod-veld label { display: block; text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 500; color: var(--sod-tekst-zacht); margin-bottom: 6px; }
.sod-veld input, .sod-veld select, .sod-veld textarea { width: 100%; border: none; border-bottom: 1px solid var(--sod-lijn); background: transparent; padding: 10px 2px; font-size: 15px; font-family: var(--sod-body-font); color: var(--sod-tekst); box-sizing: border-box; }
.sod-veld input:focus, .sod-veld select:focus, .sod-veld textarea:focus { outline: none; border-bottom-color: var(--sod-primair); }
.sod-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 560px) { .sod-veld-rij { grid-template-columns: 1fr; } }
/* Eén blok per gast in het huishouden */
.sod-gast {
  border: 1px solid var(--sod-lijn); border-radius: 10px;
  padding: 18px 20px; margin-bottom: 16px; text-align: left;
}
.sod-gast-kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.sod-gast-naam { font-family: var(--sod-kop-font); font-size: 22px; color: var(--sod-primair); }
.sod-gast-type { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--sod-tekst-zacht); }
.sod-keuze { display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.sod-keuze label {
  flex: 1; min-width: 150px; cursor: pointer;
  border: 1px solid var(--sod-lijn); border-radius: 8px; padding: 11px 14px;
  display: flex; align-items: center; gap: 9px; font-size: 15px; background: var(--sod-vlak);
}
.sod-keuze label:hover { border-color: var(--sod-primair-licht); }
.sod-keuze input { accent-color: var(--sod-primair); }
.sod-keuze input:checked + span { font-weight: 600; color: var(--sod-primair); }
.sod-keuze label:has(input:checked) { border-color: var(--sod-primair); background: color-mix(in srgb, var(--sod-primair) 6%, #fff); }
.sod-gast-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 620px) { .sod-gast-velden { grid-template-columns: 1fr; } }
.sod-gast-velden .sod-veld { margin-bottom: 0; }
.sod-veld-vink { grid-column: 1 / -1; }
.sod-veld-vink label { text-transform: none; letter-spacing: normal; font-size: 14px; font-weight: 400; color: var(--sod-tekst); display: flex; align-items: center; gap: 8px; }
.sod-veld-vink input { width: auto; accent-color: var(--sod-primair); }

#rsvp-status { text-align: center; margin-top: 14px; }
.sod-fout { color: #A63A3A; }
.sod-ok { color: var(--sod-primair); }

/* De code van het bruidspaar is geen fout maar een grapje: dus geen rood. */
#rsvp-gate-error.sod-knipoog {
  color: var(--sod-primair);
  background: color-mix(in srgb, var(--sod-accent) 32%, transparent);
  border-radius: 14px;
  padding: 13px 18px;
  max-width: 32rem;
  margin: 12px auto 0;
  line-height: 1.5;
}
.hidden { display: none !important; }

/* Footer */
.sod-footer { text-align: center; padding: 58px 20px 42px; border-top: 1px solid color-mix(in srgb, var(--sod-lijn) 55%, transparent); margin-top: 40px; }
.sod-footer .sod-namen { font-family: var(--sod-kop-font); font-size: 25px; color: var(--sod-primair); margin: 0 0 6px; }
.sod-footer p { margin: 0; font-size: 13px; color: var(--sod-tekst-zacht); }
.sod-footer .sod-klein { font-size: 12px; opacity: .7; margin-top: 14px; }

/* ==================== Stijl 1: Hand Drawn ==================== */
body.sod-thema-handdrawn .sod-hero {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: auto; padding: 64px 20px 48px; background: var(--sod-bg);
}
body.sod-thema-handdrawn .sod-hero::after { display: none; }

/* Botanische takken links en rechts, in code getekend: geen upload nodig. */
body.sod-thema-handdrawn .sod-hero {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 440'%3E%3Cpath d='M138 440C112 372 130 300 104 232C84 180 92 108 116 30' fill='none' stroke='%23AEBE9A' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23BCCAA8'%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(130 404) rotate(-32)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(126 386) rotate(212)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(119 352) rotate(-30)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(114 322) rotate(214)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(108 286) rotate(-28)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(104 254) rotate(215)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(101 218) rotate(-26)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(99 184) rotate(216)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(101 150) rotate(-24)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(105 116) rotate(218)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(110 82) rotate(-22)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(115 48) rotate(220)'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 440'%3E%3Cg transform='translate(200 0) scale(-1 1)'%3E%3Cpath d='M138 440C112 372 130 300 104 232C84 180 92 108 116 30' fill='none' stroke='%23AEBE9A' stroke-width='2' stroke-linecap='round'/%3E%3Cg fill='%23BCCAA8'%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(130 404) rotate(-32)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(126 386) rotate(212)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(119 352) rotate(-30)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(114 322) rotate(214)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(108 286) rotate(-28)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(104 254) rotate(215)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(101 218) rotate(-26)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(99 184) rotate(216)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(101 150) rotate(-24)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(105 116) rotate(218)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(110 82) rotate(-22)'/%3E%3Cpath d='M0 0C9-8 26-10 37 0C26 10 9 8 0 0Z' transform='translate(115 48) rotate(220)'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: left bottom, right bottom;
  background-size: clamp(110px, 15vw, 210px) auto, clamp(110px, 15vw, 210px) auto;
}
@media (max-width: 700px) {
  body.sod-thema-handdrawn .sod-hero { background-size: 88px auto, 88px auto; }
}

/* De onderdelen los in de kolom zetten, zodat de illustratie tussen de namen
   en de datum kan staan (net als op een save-the-date-kaart). */
body.sod-thema-handdrawn .sod-hero { text-align: center; }
body.sod-thema-handdrawn .sod-hero-inhoud { display: contents; color: var(--sod-tekst); }
body.sod-thema-handdrawn .sod-hero .sod-subkop        { order: 1; }
body.sod-thema-handdrawn .sod-hero h1                 { order: 2; }
body.sod-thema-handdrawn .sod-hero .sod-hero-img      { order: 3; }
body.sod-thema-handdrawn .sod-hero .sod-datum         { order: 4; }
body.sod-thema-handdrawn .sod-hero .sod-uitnodiging   { order: 5; }
body.sod-thema-handdrawn .sod-hero .sod-countdown     { order: 6; }
body.sod-thema-handdrawn .sod-hero .wp-block-buttons  { order: 7; }

body.sod-thema-handdrawn .sod-hero .sod-hero-img {
  position: relative; inset: auto;
  width: min(600px, 88vw); margin: 2px auto 6px;
}
body.sod-thema-handdrawn .sod-hero .sod-hero-img img { height: auto; mix-blend-mode: multiply; }

/* SAVE THE DATE */
body.sod-thema-handdrawn .sod-hero-inhoud .sod-subkop {
  color: var(--sod-primair); letter-spacing: .34em; font-size: clamp(12px, 1.5vw, 15px);
  font-family: var(--sod-caps-font); font-weight: 400;
}
/* De namen, groot en sierlijk */
body.sod-thema-handdrawn .sod-hero-inhoud h1 {
  font-family: var(--sod-script-font); font-weight: 400; color: var(--sod-primair);
  font-size: clamp(56px, 11vw, 132px); line-height: 1.02; margin: .12em 0 .1em;
}
/* De datum, groot en gespatieerd */
body.sod-thema-handdrawn .sod-hero-inhoud .sod-datum {
  font-family: var(--sod-kop-font); color: var(--sod-primair); font-style: normal;
  font-size: clamp(30px, 5.5vw, 62px); letter-spacing: .12em; margin: 2px 0 0;
}
/* "Jij bent uitgenodigd!" onder de datum */
.sod-uitnodiging {
  font-family: var(--sod-kop-font); font-style: italic;
  font-size: clamp(19px, 2.4vw, 26px); color: var(--sod-tekst-zacht);
  margin: 6px 0 0; letter-spacing: .02em;
}
body.sod-thema-handdrawn .sod-uitnodiging { color: var(--sod-primair); margin-top: 10px; }

/* ==================== Spelletjes ==================== */
.sod-spel { max-width: 560px; margin: 0 auto; }
.sod-spel-uitleg { margin: 0 0 14px; color: var(--sod-tekst-zacht); font-size: 15px; }
.sod-spel-aanwezig {
  margin: 0 0 18px; font-size: 13px; letter-spacing: .06em;
  color: var(--sod-primair); min-height: 1.4em;
}

/* Keuzebollen boven de spellen, met een tekening van het spel erin */
.sod-spel-keuze {
  display: flex; gap: 22px; margin: 0 auto 26px; justify-content: center; flex-wrap: wrap;
}
.sod-spel-tab {
  all: unset; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 9px;
  font-family: var(--sod-body-font); font-size: 10px; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--sod-tekst-zacht);
}
.sod-spel-bol {
  display: flex; align-items: center; justify-content: center;
  width: 78px; height: 78px; border-radius: 50%; background: var(--sod-vlak);
  border: 2px solid var(--sod-lijn);
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.sod-spel-bol svg { width: 46px; height: 46px; display: block; }
.sod-spel-tab:hover .sod-spel-bol { border-color: color-mix(in srgb, var(--sod-primair) 50%, var(--sod-lijn)); }
.sod-spel-tab.is-actief { color: var(--sod-primair); }
.sod-spel-tab.is-actief .sod-spel-bol {
  border-color: var(--sod-primair);
  background: color-mix(in srgb, var(--sod-primair) 7%, #fff);
  transform: translateY(-2px);
}
.sod-spel-tab:focus-visible .sod-spel-bol { outline: 2px solid var(--sod-primair); outline-offset: 3px; }
@media (max-width: 420px) {
  .sod-spel-keuze { gap: 14px; }
  .sod-spel-bol { width: 66px; height: 66px; }
  .sod-spel-bol svg { width: 38px; height: 38px; }
  .sod-spel-tab { font-size: 9px; letter-spacing: .1em; }
}

/* Kiezen met welk gezicht je springt */
.sod-spel-gezichten { margin-bottom: 16px; }
.sod-gezicht {
  all: unset; cursor: pointer; display: inline-flex; flex-direction: column; align-items: center;
  gap: 6px; padding: 6px 10px; border-radius: 10px;
}
.sod-gezicht img, .sod-gezicht-leeg {
  display: block; width: 54px; height: 54px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--sod-lijn); background: color-mix(in srgb, var(--sod-accent) 30%, #fff);
}
.sod-gezicht.is-actief img, .sod-gezicht.is-actief .sod-gezicht-leeg { border-color: var(--sod-primair); }
.sod-gezicht-naam {
  font-size: 10px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sod-tekst-zacht); font-family: var(--sod-body-font);
}
.sod-gezicht.is-actief .sod-gezicht-naam { color: var(--sod-primair); }
.sod-gezicht:focus-visible { outline: 2px solid var(--sod-primair); outline-offset: 2px; }

/* Speelveld van de twee arcadespellen */
.sod-spel-doek { position: relative; display: flex; justify-content: center; }
.sod-spel-doek canvas {
  width: 100%; max-width: 320px; height: auto; display: block;
  border: 1px solid var(--sod-lijn); border-radius: 10px; background: #fff;
}
/* Startknop midden op het speelveld, zodat hij altijd in beeld is als het
   speelveld in beeld is. */
.sod-doek-start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 2; padding: 16px 38px; font-size: 13px;
  box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .45);
}
.sod-doek-start[hidden] { display: none; }
.sod-spel-balk {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  flex-wrap: wrap; margin-bottom: 18px;
}
.sod-spel-meter {
  font-size: 11px; text-transform: uppercase; letter-spacing: .18em;
  color: var(--sod-tekst-zacht); font-family: var(--sod-body-font);
}
.sod-spel-meter b { display: block; font-size: 21px; letter-spacing: .04em; color: var(--sod-primair); font-weight: 500; }
.sod-knop-licht {
  background: transparent; color: var(--sod-primair);
  border: 1px solid var(--sod-primair); padding: 9px 20px; font-size: 11px;
}

.sod-spel-bord { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sod-kaart {
  all: unset; display: block; box-sizing: border-box; cursor: pointer;
  width: 100%; aspect-ratio: 1 / 1; perspective: 600px;
}
.sod-kaart:focus-visible { outline: 2px solid var(--sod-primair); outline-offset: 3px; border-radius: 8px; }
.sod-kaart-binnen {
  position: relative; display: block; width: 100%; height: 100%;
  transition: transform .38s ease; transform-style: preserve-3d;
}
.sod-kaart.is-open .sod-kaart-binnen,
.sod-kaart.is-gevonden .sod-kaart-binnen { transform: rotateY(180deg); }
.sod-kaart-achter, .sod-kaart-voor {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; backface-visibility: hidden; border: 1px solid var(--sod-lijn);
}
/* Achterkant: het botanische ruitje van de site */
.sod-kaart-achter {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cpath d='M20 30C14 24 9 21 9 16.5 9 13.4 11.4 11 14.3 11c2 0 3.9 1 5.7 2.9 1.8-1.9 3.7-2.9 5.7-2.9 2.9 0 5.3 2.4 5.3 5.5C31 21 26 24 20 30z' fill='%23C6D3B4'/%3E%3C/svg%3E") center / 44% no-repeat,
    color-mix(in srgb, var(--sod-accent) 30%, #fff);
}
.sod-kaart-voor { transform: rotateY(180deg); background: #fff; }
.sod-kaart-voor svg { width: 62%; height: 62%; }
.sod-kaart.is-gevonden { cursor: default; }
.sod-kaart.is-gevonden .sod-kaart-voor {
  background: color-mix(in srgb, var(--sod-accent) 22%, #fff);
  border-color: color-mix(in srgb, var(--sod-primair) 35%, transparent);
}
@media (prefers-reduced-motion: reduce) {
  .sod-kaart-binnen { transition: none; }
}

.sod-spel-klaar { margin-top: 26px; }
.sod-spel-klaar-kop { margin: 0 0 14px; font-family: var(--sod-kop-font); font-size: 22px; color: var(--sod-primair); }
.sod-spel-label { display: block; font-size: 12px; color: var(--sod-tekst-zacht); margin-bottom: 8px; }
.sod-spel-rij { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.sod-spel-rij input {
  border: 1px solid var(--sod-lijn); border-radius: 4px; background: var(--sod-vlak);
  padding: 11px 14px; font-size: 15px; font-family: var(--sod-body-font);
  color: var(--sod-tekst); width: 190px; box-sizing: border-box;
}
.sod-spel-fout { color: #A63A3A; font-size: 14px; margin: 10px 0 0; }

.sod-spel-lijst { margin-top: 30px; text-align: left; max-width: 380px; margin-left: auto; margin-right: auto; }
.sod-spel-lijst-kop {
  margin: 0 0 10px; text-align: center; text-transform: uppercase;
  letter-spacing: .22em; font-size: 11px; color: var(--sod-tekst-zacht);
}
.sod-spel-lijst ol { margin: 0; padding: 0; list-style: none; counter-reset: sod-plek; }
.sod-spel-lijst li {
  counter-increment: sod-plek; display: flex; justify-content: space-between;
  gap: 12px; padding: 9px 0; border-bottom: 1px solid color-mix(in srgb, var(--sod-lijn) 55%, transparent);
  font-size: 14px;
}
.sod-spel-lijst li::before {
  content: counter(sod-plek) "."; color: var(--sod-tekst-zacht); margin-right: 8px; min-width: 18px;
}
.sod-score-naam { flex: 1; color: var(--sod-primair); }
.sod-score-tijd { color: var(--sod-tekst-zacht); white-space: nowrap; }

@media (max-width: 420px) {
  .sod-spel-bord { gap: 7px; }
  .sod-kaart-voor svg { width: 70%; height: 70%; }
}

/* Bannerband: een smalle, getinte strook met één regel, als adempauze
   tussen twee grote blokken. */
.sod-sectie.sod-banner { padding: 52px 20px; }
.sod-banner-tekst {
  font-family: var(--sod-kop-font); font-style: italic;
  font-size: clamp(21px, 2.8vw, 31px); color: var(--sod-primair);
  margin: 0 auto; max-width: 780px; line-height: 1.4;
}
.sod-banner-bron {
  margin: 14px 0 0; font-family: var(--sod-script-font);
  font-size: clamp(24px, 3vw, 34px); color: var(--sod-primair); opacity: .85;
}

/* De getekende impressie van de locatie */
.sod-locatie-tekening { margin: 26px auto 0; width: min(520px, 88vw); }
.sod-locatie-tekening img { width: 100%; height: auto; display: block; }
/* Adres, foto en knoppen: pas zichtbaar vanaf fase 2 */
.sod-locatie-details { margin-top: 46px; text-align: left; }
.sod-locatie-details .wp-block-buttons { margin-top: 22px; }

body.sod-thema-handdrawn .sod-countdown { margin: 22px 0 4px; }
body.sod-thema-handdrawn .sod-countdown b { color: var(--sod-primair); font-size: clamp(26px, 3.4vw, 38px); }
body.sod-thema-handdrawn .sod-countdown span { color: var(--sod-tekst-zacht); }

/* RSVP: het belangrijkste blok van de pagina, dus een witte kaart die
   duidelijk oplicht tegen de crème band. Geen ornamenten, alleen contrast. */
body.sod-thema-handdrawn #rsvp-sectie { padding-top: 20px; }
body.sod-thema-handdrawn .sod-rsvp-kaart {
  max-width: 780px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--sod-primair) 22%, transparent);
  border-radius: 3px; padding: clamp(30px, 4.5vw, 48px) clamp(20px, 5vw, 60px);
}
body.sod-thema-handdrawn .sod-rsvp-kaart h2 {
  font-family: var(--sod-caps-font); font-weight: 400; text-transform: uppercase;
  letter-spacing: .34em; font-size: clamp(24px, 3.2vw, 34px); margin-bottom: 18px;
}
/* Invoer en knop groter, zodat het duidelijk is wat er van je verwacht wordt. */
body.sod-thema-handdrawn #rsvp-code { padding: 15px 8px; font-size: 17px; width: 250px; }
body.sod-thema-handdrawn #rsvp-code-btn { padding: 16px 34px; font-size: 13px; }
/* Deze sectie blijft bewust kaal: geen takken, geen blaadje onder de kop. */
body.sod-thema-handdrawn #rsvp-gate > p {
  font-size: 15px; color: var(--sod-tekst-zacht); max-width: 620px; margin: 0 auto 22px;
}
.sod-rsvp-noot {
  margin: 16px 0 0; font-size: 12px; color: var(--sod-tekst-zacht);
  font-style: italic; text-align: center;
}
body.sod-thema-handdrawn #rsvp-code { background: #fff; border-color: var(--sod-lijn); border-radius: 2px; letter-spacing: .18em; }
body.sod-thema-handdrawn .sod-knop { border-radius: 2px; letter-spacing: .22em; }

/* Overige koppen in dezelfde rustige kapitalen */
body.sod-thema-handdrawn h2 {
  font-family: var(--sod-caps-font); font-weight: 400; text-transform: uppercase;
  letter-spacing: .18em; font-size: clamp(22px, 3vw, 32px);
}
body.sod-thema-handdrawn h3 { font-family: var(--sod-kop-font); letter-spacing: .04em; }
body.sod-thema-handdrawn .sod-nav { background: color-mix(in srgb, var(--sod-bg) 94%, transparent); }
body.sod-thema-handdrawn .sod-nav-titel { font-family: var(--sod-script-font); font-size: 26px; }

/* ==================== Gedeeld door de vijf nieuwe stijlen ====================
   Hand Drawn doet hier niet aan mee. */
/* De icoontjes van de hoogtepunten als masker: zo krijgen ze de kleur van de stijl. */
body.sod-thema-nacht .sod-hoogtepunt::before,
body.sod-thema-redactie .sod-hoogtepunt::before,
body.sod-thema-zomer .sod-hoogtepunt::before,
body.sod-thema-groovy .sod-hoogtepunt::before,
body.sod-thema-bloesem .sod-hoogtepunt::before {
  background: var(--sod-primair) !important;
  -webkit-mask: var(--sod-hp-icoon) center / contain no-repeat; mask: var(--sod-hp-icoon) center / contain no-repeat;
}
.sod-hoogtepunt:nth-child(1) { --sod-hp-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 36V20'/%3E%3Cpath d='M20 25l-6-5M20 21l6-5'/%3E%3Cpath d='M20 24c-6.6 0-11.5-4.4-11.5-10S13.4 5 20 5s11.5 3.4 11.5 9-4.9 10-11.5 10z'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(2) { --sod-hp-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 25.5c-5.2 0-9.4-4.6-9.4-10.3S14.8 4.9 20 4.9s9.4 4.6 9.4 10.3-4.2 10.3-9.4 10.3z'/%3E%3Cpath d='M17.6 25.2l2.4 3 2.4-3'/%3E%3Cpath d='M20 28.2c0 3.2-2.8 3.2-2.8 5.4s2.8 2.2 2.8 4.4'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(3) { --sod-hp-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='20' cy='20' r='8.5'/%3E%3Ccircle cx='20' cy='20' r='5'/%3E%3Cpath d='M5.5 6v6M8.2 6v6M5.5 12h2.7M6.9 12v22'/%3E%3Cpath d='M32.8 6c2 2.4 2 7.6 0 10v18'/%3E%3C/svg%3E"); }
.sod-hoogtepunt:nth-child(4) { --sod-hp-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%239CB086' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 33.5C12.6 27.2 5.6 22.2 5.6 15.6c0-4.5 3.5-7.8 7.7-7.8 2.7 0 5.2 1.4 6.7 3.7 1.5-2.3 4-3.7 6.7-3.7 4.2 0 7.7 3.3 7.7 7.8 0 6.6-7 11.6-14.4 17.9z'/%3E%3C/svg%3E"); }
/* De spelicoontjes zijn groen getekend; in de nieuwe stijlen in hun eigen kleur. */
body.sod-thema-nacht .sod-spel-bol svg [stroke],
body.sod-thema-redactie .sod-spel-bol svg [stroke],
body.sod-thema-zomer .sod-spel-bol svg [stroke],
body.sod-thema-groovy .sod-spel-bol svg [stroke],
body.sod-thema-bloesem .sod-spel-bol svg [stroke] { stroke: var(--sod-primair); }
body.sod-thema-nacht .sod-spel-bol svg [fill="#C6D3B4"],
body.sod-thema-redactie .sod-spel-bol svg [fill="#C6D3B4"],
body.sod-thema-zomer .sod-spel-bol svg [fill="#C6D3B4"],
body.sod-thema-groovy .sod-spel-bol svg [fill="#C6D3B4"],
body.sod-thema-bloesem .sod-spel-bol svg [fill="#C6D3B4"] { fill: color-mix(in srgb, var(--sod-accent) 45%, transparent); }
/* Lange namen mogen netjes afbreken in plaats van uit beeld te lopen. */
body.sod-thema-nacht .sod-hero h1,
body.sod-thema-redactie .sod-hero h1,
body.sod-thema-zomer .sod-hero h1,
body.sod-thema-groovy .sod-hero h1,
body.sod-thema-bloesem .sod-hero h1 { text-wrap: balance; overflow-wrap: anywhere; hyphens: manual; }
body.sod-thema-nacht h2,
body.sod-thema-redactie h2,
body.sod-thema-zomer h2,
body.sod-thema-groovy h2,
body.sod-thema-bloesem h2 { text-wrap: balance; }
body.sod-thema-nacht .sod-hero::after,
body.sod-thema-redactie .sod-hero::after,
body.sod-thema-zomer .sod-hero::after,
body.sod-thema-groovy .sod-hero::after,
body.sod-thema-bloesem .sod-hero::after { display: none; }
body.sod-thema-nacht .sod-hero .sod-hero-img,
body.sod-thema-redactie .sod-hero .sod-hero-img,
body.sod-thema-zomer .sod-hero .sod-hero-img,
body.sod-thema-groovy .sod-hero .sod-hero-img,
body.sod-thema-bloesem .sod-hero .sod-hero-img { position: relative; inset: auto; }
body.sod-thema-nacht .sod-hero .sod-hero-img img,
body.sod-thema-redactie .sod-hero .sod-hero-img img,
body.sod-thema-zomer .sod-hero .sod-hero-img img,
body.sod-thema-groovy .sod-hero .sod-hero-img img,
body.sod-thema-bloesem .sod-hero .sod-hero-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
body.sod-thema-nacht .sod-hero-inhoud,
body.sod-thema-redactie .sod-hero-inhoud,
body.sod-thema-zomer .sod-hero-inhoud,
body.sod-thema-groovy .sod-hero-inhoud,
body.sod-thema-bloesem .sod-hero-inhoud { color: var(--sod-tekst); }

/* ==================== Stijl 2: Sterrennacht ==================== */
body.sod-thema-nacht { background: var(--sod-bg); }
body.sod-thema-nacht .sod-nav { background: color-mix(in srgb, #0B1220 86%, transparent); border-bottom-color: var(--sod-lijn); }
body.sod-thema-nacht .sod-nav-titel { font-family: var(--sod-caps-font); color: var(--sod-primair); font-size: 17px; letter-spacing: .22em; text-transform: uppercase; }
body.sod-thema-nacht .sod-nav-links a { color: var(--sod-tekst-zacht); }
body.sod-thema-nacht .sod-nav-links a:hover { color: var(--sod-primair); }

body.sod-thema-nacht .sod-hero {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: min(100vh, 980px); padding: 96px 24px 88px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='0.0' cy='294.6' r='0.63' fill='%23FFFFFF' opacity='0.48'/%3E%3Ccircle cx='233.4' cy='170.5' r='0.66' fill='%23FFFFFF' opacity='0.80'/%3E%3Ccircle cx='241.6' cy='173.7' r='0.95' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='261.4' cy='77.4' r='0.70' fill='%23FFFFFF' opacity='0.77'/%3E%3Ccircle cx='223.4' cy='17.2' r='0.95' fill='%23FFFFFF' opacity='0.63'/%3E%3Ccircle cx='295.2' cy='258.4' r='0.50' fill='%23FFFFFF' opacity='0.66'/%3E%3Ccircle cx='295.4' cy='220.3' r='0.92' fill='%23FFFFFF' opacity='0.70'/%3E%3Ccircle cx='291.8' cy='290.7' r='0.70' fill='%23FFFFFF' opacity='0.55'/%3E%3Ccircle cx='267.9' cy='106.3' r='0.52' fill='%23FFFFFF' opacity='0.53'/%3E%3Ccircle cx='137.1' cy='94.4' r='1.15' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='233.4' cy='280.9' r='0.45' fill='%23FFFFFF' opacity='0.51'/%3E%3Ccircle cx='179.4' cy='162.8' r='0.74' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='290.9' cy='17.6' r='0.69' fill='%23FFFFFF' opacity='0.56'/%3E%3Ccircle cx='212.6' cy='295.8' r='0.81' fill='%23FFFFFF' opacity='0.45'/%3E%3Ccircle cx='129.8' cy='90.8' r='0.69' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='106.4' cy='170.1' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='290.1' cy='146.5' r='1.09' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='203.0' cy='165.2' r='0.80' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='300.7' cy='127.0' r='0.97' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='187.8' cy='112.2' r='0.66' fill='%23FFFFFF' opacity='0.58'/%3E%3Ccircle cx='254.3' cy='280.8' r='0.49' fill='%23FFFFFF' opacity='0.84'/%3E%3Ccircle cx='24.9' cy='130.2' r='0.52' fill='%23FFFFFF' opacity='0.40'/%3E%3Ccircle cx='318.8' cy='70.4' r='0.91' fill='%23FFFFFF' opacity='0.44'/%3E%3Ccircle cx='146.3' cy='189.7' r='0.51' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='283.1' cy='285.0' r='1.11' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='243.6' cy='88.1' r='0.41' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='24.3' cy='0.5' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='237.2' cy='156.6' r='0.95' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='282.3' cy='75.3' r='0.70' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='37.9' cy='156.6' r='0.40' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='203.8' cy='295.1' r='0.42' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='60.2' cy='310.0' r='0.85' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='85.2' cy='71.3' r='0.57' fill='%23FFFFFF' opacity='0.69'/%3E%3Ccircle cx='16.8' cy='246.2' r='0.96' fill='%23FFFFFF' opacity='0.78'/%3E%3Ccircle cx='159.4' cy='10.5' r='0.49' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='41.8' cy='220.1' r='1.11' fill='%23FFFFFF' opacity='0.37'/%3E%3Ccircle cx='282.6' cy='275.6' r='1.19' fill='%23FFFFFF' opacity='0.92'/%3E%3Ccircle cx='244.8' cy='134.3' r='0.60' fill='%23FFFFFF' opacity='0.79'/%3E%3Ccircle cx='282.3' cy='127.5' r='0.59' fill='%23FFFFFF' opacity='0.59'/%3E%3Ccircle cx='283.8' cy='178.8' r='0.68' fill='%23FFFFFF' opacity='0.72'/%3E%3Ccircle cx='235.2' cy='107.2' r='0.98' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='63.6' cy='99.7' r='1.19' fill='%23FFFFFF' opacity='0.95'/%3E%3Ccircle cx='202.4' cy='279.1' r='1.13' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='206.5' cy='43.3' r='0.80' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='246.8' cy='302.6' r='0.79' fill='%23FFFFFF' opacity='0.46'/%3E%3Ccircle cx='142.9' cy='53.2' r='0.93' fill='%23FFFFFF' opacity='0.66'/%3E%3C/svg%3E") 0 0 / 320px 320px,
    radial-gradient(ellipse 70% 55% at 50% 0%, #243660 0%, transparent 72%),
    radial-gradient(ellipse 60% 40% at 50% 100%, #1B1838 0%, transparent 70%),
    linear-gradient(#0A111E, #0F1A2E);
}
/* Tweede laag sterren die zacht twinkelt, en een gouden lijst rondom. */
body.sod-thema-nacht .sod-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='179.7' cy='162.2' r='1.73' fill='%23E9CF97' opacity='0.57'/%3E%3Ccircle cx='240.3' cy='8.3' r='1.23' fill='%23E9CF97' opacity='0.68'/%3E%3Ccircle cx='64.9' cy='231.3' r='1.22' fill='%23E9CF97' opacity='0.49'/%3E%3Ccircle cx='211.1' cy='137.3' r='0.98' fill='%23E9CF97' opacity='0.81'/%3E%3Ccircle cx='263.3' cy='292.9' r='1.90' fill='%23E9CF97' opacity='0.76'/%3E%3Ccircle cx='306.8' cy='8.1' r='1.74' fill='%23E9CF97' opacity='0.71'/%3E%3Ccircle cx='231.7' cy='287.4' r='0.94' fill='%23E9CF97' opacity='0.43'/%3E%3Ccircle cx='25.7' cy='34.6' r='0.99' fill='%23E9CF97' opacity='0.36'/%3E%3Ccircle cx='193.6' cy='302.6' r='1.11' fill='%23E9CF97' opacity='0.43'/%3E%3Ccircle cx='64.7' cy='216.0' r='1.17' fill='%23E9CF97' opacity='0.62'/%3E%3Ccircle cx='318.1' cy='135.2' r='1.64' fill='%23E9CF97' opacity='0.81'/%3E%3Ccircle cx='127.0' cy='133.3' r='0.97' fill='%23E9CF97' opacity='0.49'/%3E%3C/svg%3E") 40px 60px / 320px 320px;
  animation: sod-twinkel 4.5s ease-in-out infinite alternate;
}
body.sod-thema-nacht .sod-hero::after {
  display: block; content: ""; position: absolute; inset: clamp(12px, 2.4vw, 28px); z-index: 1; pointer-events: none;
  background: none; border: 1px solid color-mix(in srgb, var(--sod-primair) 45%, transparent);
  outline: 1px solid color-mix(in srgb, var(--sod-primair) 18%, transparent); outline-offset: 6px;
}
@keyframes sod-twinkel { from { opacity: .35; } to { opacity: 1; } }
body.sod-thema-nacht .sod-hero .sod-hero-img {
  order: 1; z-index: 2; width: min(300px, 64vw); aspect-ratio: 1 / 1; margin: 0 auto 6px;
  border-radius: 50%; overflow: hidden; background: #F3ECDD;
  box-shadow: 0 0 0 1px var(--sod-primair), 0 0 0 12px color-mix(in srgb, var(--sod-primair) 9%, transparent), 0 0 90px 10px color-mix(in srgb, var(--sod-primair) 26%, transparent);
}
body.sod-thema-nacht .sod-hero-inhoud { order: 2; margin: 0; padding: 34px 0 0; max-width: 980px; }
body.sod-thema-nacht .sod-hero-inhoud .sod-subkop {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  font-family: var(--sod-caps-font); color: var(--sod-primair); letter-spacing: .5em; font-size: 12.5px; opacity: 1;
}
body.sod-thema-nacht .sod-hero-inhoud .sod-subkop::before,
body.sod-thema-nacht .sod-hero-inhoud .sod-subkop::after { content: ""; width: 54px; height: 1px; background: currentColor; opacity: .7; }
body.sod-thema-nacht .sod-hero-inhoud h1 {
  font-family: var(--sod-caps-font); font-weight: 400; text-transform: uppercase; letter-spacing: .07em;
  font-size: clamp(38px, 7.2vw, 92px); line-height: 1.08; margin: .22em 0 .26em;
  background: linear-gradient(180deg, #F7E8C4 0%, #D9B97A 48%, #A67F45 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sod-thema-nacht .sod-hero-inhoud .sod-datum { font-family: var(--sod-kop-font); font-style: italic; font-size: clamp(22px, 2.6vw, 30px); letter-spacing: .18em; color: var(--sod-tekst); }
body.sod-thema-nacht .sod-uitnodiging { color: var(--sod-primair-licht); }
body.sod-thema-nacht .sod-countdown { gap: 0; margin-top: 30px; }
body.sod-thema-nacht .sod-countdown > div { padding: 0 clamp(18px, 4vw, 40px); border-left: 1px solid var(--sod-lijn); }
body.sod-thema-nacht .sod-countdown > div:first-child { border-left: 0; }
body.sod-thema-nacht .sod-countdown b { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-tekst); }
body.sod-thema-nacht .sod-countdown span { color: var(--sod-primair); }

body.sod-thema-nacht .wp-block-button__link { border-radius: 0; background: linear-gradient(180deg, #E6CB91, #C9A463); color: var(--sod-knop-tekst); }
body.sod-thema-nacht .wp-block-button__link:hover { background: #F1DCA9; }
body.sod-thema-nacht .sod-hero .wp-block-button + .wp-block-button .wp-block-button__link,
body.sod-thema-nacht .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--sod-primair); border: 1px solid var(--sod-primair); }
body.sod-thema-nacht .sod-knop { border-radius: 0; background: linear-gradient(180deg, #E6CB91, #C9A463); }

body.sod-thema-nacht h2 { font-family: var(--sod-caps-font); font-weight: 400; text-transform: uppercase; letter-spacing: .16em; font-size: clamp(23px, 3.3vw, 36px); color: var(--sod-primair); }
body.sod-thema-nacht .sod-sectie h2::after { content: ""; display: block; width: 14px; height: 14px; margin: 16px auto 0; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7 15 11.2 24 12C15 12.8 12.8 17 12 24C11.2 17 9 12.8 0 12C9 11.2 11.2 7 12 0Z' fill='%23D9B97A'/%3E%3C/svg%3E") center / contain no-repeat; }
body.sod-thema-nacht h3 { color: var(--sod-primair-licht); }
body.sod-thema-nacht .sod-subkop { color: var(--sod-primair); font-family: var(--sod-caps-font); letter-spacing: .36em; }
body.sod-thema-nacht .sod-sectie.sod-licht { background: #111C2F; }
body.sod-thema-nacht .sod-sectie.sod-zacht { background: #142037; }
body.sod-thema-nacht .sod-sectie.sod-accent { background: #182640; }
body.sod-thema-nacht .sod-sectie.sod-getint { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='0.0' cy='294.6' r='0.63' fill='%23FFFFFF' opacity='0.48'/%3E%3Ccircle cx='233.4' cy='170.5' r='0.66' fill='%23FFFFFF' opacity='0.80'/%3E%3Ccircle cx='241.6' cy='173.7' r='0.95' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='261.4' cy='77.4' r='0.70' fill='%23FFFFFF' opacity='0.77'/%3E%3Ccircle cx='223.4' cy='17.2' r='0.95' fill='%23FFFFFF' opacity='0.63'/%3E%3Ccircle cx='295.2' cy='258.4' r='0.50' fill='%23FFFFFF' opacity='0.66'/%3E%3Ccircle cx='295.4' cy='220.3' r='0.92' fill='%23FFFFFF' opacity='0.70'/%3E%3Ccircle cx='291.8' cy='290.7' r='0.70' fill='%23FFFFFF' opacity='0.55'/%3E%3Ccircle cx='267.9' cy='106.3' r='0.52' fill='%23FFFFFF' opacity='0.53'/%3E%3Ccircle cx='137.1' cy='94.4' r='1.15' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='233.4' cy='280.9' r='0.45' fill='%23FFFFFF' opacity='0.51'/%3E%3Ccircle cx='179.4' cy='162.8' r='0.74' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='290.9' cy='17.6' r='0.69' fill='%23FFFFFF' opacity='0.56'/%3E%3Ccircle cx='212.6' cy='295.8' r='0.81' fill='%23FFFFFF' opacity='0.45'/%3E%3Ccircle cx='129.8' cy='90.8' r='0.69' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='106.4' cy='170.1' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='290.1' cy='146.5' r='1.09' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='203.0' cy='165.2' r='0.80' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='300.7' cy='127.0' r='0.97' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='187.8' cy='112.2' r='0.66' fill='%23FFFFFF' opacity='0.58'/%3E%3Ccircle cx='254.3' cy='280.8' r='0.49' fill='%23FFFFFF' opacity='0.84'/%3E%3Ccircle cx='24.9' cy='130.2' r='0.52' fill='%23FFFFFF' opacity='0.40'/%3E%3Ccircle cx='318.8' cy='70.4' r='0.91' fill='%23FFFFFF' opacity='0.44'/%3E%3Ccircle cx='146.3' cy='189.7' r='0.51' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='283.1' cy='285.0' r='1.11' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='243.6' cy='88.1' r='0.41' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='24.3' cy='0.5' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='237.2' cy='156.6' r='0.95' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='282.3' cy='75.3' r='0.70' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='37.9' cy='156.6' r='0.40' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='203.8' cy='295.1' r='0.42' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='60.2' cy='310.0' r='0.85' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='85.2' cy='71.3' r='0.57' fill='%23FFFFFF' opacity='0.69'/%3E%3Ccircle cx='16.8' cy='246.2' r='0.96' fill='%23FFFFFF' opacity='0.78'/%3E%3Ccircle cx='159.4' cy='10.5' r='0.49' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='41.8' cy='220.1' r='1.11' fill='%23FFFFFF' opacity='0.37'/%3E%3Ccircle cx='282.6' cy='275.6' r='1.19' fill='%23FFFFFF' opacity='0.92'/%3E%3Ccircle cx='244.8' cy='134.3' r='0.60' fill='%23FFFFFF' opacity='0.79'/%3E%3Ccircle cx='282.3' cy='127.5' r='0.59' fill='%23FFFFFF' opacity='0.59'/%3E%3Ccircle cx='283.8' cy='178.8' r='0.68' fill='%23FFFFFF' opacity='0.72'/%3E%3Ccircle cx='235.2' cy='107.2' r='0.98' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='63.6' cy='99.7' r='1.19' fill='%23FFFFFF' opacity='0.95'/%3E%3Ccircle cx='202.4' cy='279.1' r='1.13' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='206.5' cy='43.3' r='0.80' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='246.8' cy='302.6' r='0.79' fill='%23FFFFFF' opacity='0.46'/%3E%3Ccircle cx='142.9' cy='53.2' r='0.93' fill='%23FFFFFF' opacity='0.66'/%3E%3C/svg%3E") 0 0 / 320px 320px, linear-gradient(120deg, #182447, #2A2148); }
body.sod-thema-nacht hr.sod-scheiding { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7 15 11.2 24 12C15 12.8 12.8 17 12 24C11.2 17 9 12.8 0 12C9 11.2 11.2 7 12 0Z' fill='%23D9B97A'/%3E%3C/svg%3E") center / auto 16px no-repeat; }
body.sod-thema-nacht hr.sod-scheiding.is-style-wide, body.sod-thema-nacht hr.sod-lijn-scheiding {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0C12.8 7 15 11.2 24 12C15 12.8 12.8 17 12 24C11.2 17 9 12.8 0 12C9 11.2 11.2 7 12 0Z' fill='%23D9B97A'/%3E%3C/svg%3E") center / auto 16px no-repeat, linear-gradient(to right, transparent, var(--sod-primair) 25%, var(--sod-primair) 75%, transparent) center / 100% 1px no-repeat;
}
body.sod-thema-nacht .sod-banner-tekst { color: var(--sod-tekst); }
body.sod-thema-nacht .sod-banner-bron { font-family: var(--sod-caps-font); font-size: 15px; letter-spacing: .3em; text-transform: uppercase; color: var(--sod-primair); }

body.sod-thema-nacht .sod-snel { background: var(--sod-vlak); border-color: var(--sod-lijn); }
body.sod-thema-nacht .sod-snel-tegel { border-color: var(--sod-lijn); }
body.sod-thema-nacht .sod-snel-naam { color: var(--sod-primair); }
body.sod-thema-nacht .sod-snel-icoon { color: var(--sod-primair); }

body.sod-thema-nacht .sod-paar-kaart figure { border-radius: 200px 200px 6px 6px; padding: 7px; border: 1px solid color-mix(in srgb, var(--sod-primair) 55%, transparent); }
body.sod-thema-nacht .sod-paar-kaart img { border-radius: 194px 194px 3px 3px; }
body.sod-thema-nacht .sod-paar-kaart h3 { font-family: var(--sod-kop-font); font-style: italic; font-size: 30px; }

body.sod-thema-nacht .sod-tijdlijn::before { background: linear-gradient(transparent, var(--sod-primair) 8%, var(--sod-primair) 92%, transparent); opacity: .6; }
body.sod-thema-nacht .sod-tl-item::before { background: var(--sod-primair); border-color: var(--sod-primair); box-shadow: 0 0 0 5px color-mix(in srgb, var(--sod-primair) 18%, transparent), 0 0 18px var(--sod-primair); width: 11px; height: 11px; top: 9px; }
@media (min-width: 782px) {
  body.sod-thema-nacht .sod-tl-item::before { right: -6px; }
  body.sod-thema-nacht .sod-tl-item:nth-child(even)::before { left: -5px; }
}
body.sod-thema-nacht .sod-tl-item .sod-tl-tijd { font-family: var(--sod-caps-font); color: var(--sod-primair); opacity: 1; font-size: 16px; letter-spacing: .14em; }

body.sod-thema-nacht .sod-locatie-tekening { background: #F3ECDD; border-radius: 6px; padding: 16px; box-shadow: 0 0 0 1px var(--sod-primair), 0 30px 60px -30px #000; }
body.sod-thema-nacht .sod-locatie-foto img { border-radius: 4px; box-shadow: 0 0 0 1px var(--sod-primair), 0 30px 60px -30px #000; }
body.sod-thema-nacht .sod-kaarten .sod-kaart { background: var(--sod-vlak); border: 1px solid var(--sod-lijn); border-top: 2px solid var(--sod-primair); border-radius: 4px; }
body.sod-thema-nacht .sod-kaarten .sod-kaart h3 { color: var(--sod-primair); }
body.sod-thema-nacht .sod-galerij figure { border-radius: 4px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--sod-primair) 40%, transparent); }
body.sod-thema-nacht .sod-notitie { color: var(--sod-primair-licht); border-color: var(--sod-lijn); background: var(--sod-vlak); }

body.sod-thema-nacht .sod-rsvp-kaart {
  background: var(--sod-vlak); border: 1px solid color-mix(in srgb, var(--sod-primair) 50%, transparent); border-radius: 2px;
  outline: 1px solid color-mix(in srgb, var(--sod-primair) 18%, transparent); outline-offset: 7px;
}
body.sod-thema-nacht .sod-rsvp-kaart h2::after { display: none; }
body.sod-thema-nacht #rsvp-code { border-radius: 0; color: var(--sod-tekst); }
body.sod-thema-nacht .sod-veld input, body.sod-thema-nacht .sod-veld select, body.sod-thema-nacht .sod-veld textarea { color: var(--sod-tekst); }
body.sod-thema-nacht .sod-veld select option { background: var(--sod-vlak); }
body.sod-thema-nacht .sod-gast { background: color-mix(in srgb, var(--sod-bg) 50%, transparent); }
body.sod-thema-nacht .sod-praktisch { border-color: var(--sod-lijn); }
body.sod-thema-nacht .sod-pk-kaart { border-color: var(--sod-lijn) !important; }
body.sod-thema-nacht .sod-spel-doek canvas { border-color: var(--sod-primair); }
body.sod-thema-nacht .sod-footer { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 320'%3E%3Ccircle cx='0.0' cy='294.6' r='0.63' fill='%23FFFFFF' opacity='0.48'/%3E%3Ccircle cx='233.4' cy='170.5' r='0.66' fill='%23FFFFFF' opacity='0.80'/%3E%3Ccircle cx='241.6' cy='173.7' r='0.95' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='261.4' cy='77.4' r='0.70' fill='%23FFFFFF' opacity='0.77'/%3E%3Ccircle cx='223.4' cy='17.2' r='0.95' fill='%23FFFFFF' opacity='0.63'/%3E%3Ccircle cx='295.2' cy='258.4' r='0.50' fill='%23FFFFFF' opacity='0.66'/%3E%3Ccircle cx='295.4' cy='220.3' r='0.92' fill='%23FFFFFF' opacity='0.70'/%3E%3Ccircle cx='291.8' cy='290.7' r='0.70' fill='%23FFFFFF' opacity='0.55'/%3E%3Ccircle cx='267.9' cy='106.3' r='0.52' fill='%23FFFFFF' opacity='0.53'/%3E%3Ccircle cx='137.1' cy='94.4' r='1.15' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='233.4' cy='280.9' r='0.45' fill='%23FFFFFF' opacity='0.51'/%3E%3Ccircle cx='179.4' cy='162.8' r='0.74' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='290.9' cy='17.6' r='0.69' fill='%23FFFFFF' opacity='0.56'/%3E%3Ccircle cx='212.6' cy='295.8' r='0.81' fill='%23FFFFFF' opacity='0.45'/%3E%3Ccircle cx='129.8' cy='90.8' r='0.69' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='106.4' cy='170.1' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='290.1' cy='146.5' r='1.09' fill='%23FFFFFF' opacity='0.73'/%3E%3Ccircle cx='203.0' cy='165.2' r='0.80' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='300.7' cy='127.0' r='0.97' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='187.8' cy='112.2' r='0.66' fill='%23FFFFFF' opacity='0.58'/%3E%3Ccircle cx='254.3' cy='280.8' r='0.49' fill='%23FFFFFF' opacity='0.84'/%3E%3Ccircle cx='24.9' cy='130.2' r='0.52' fill='%23FFFFFF' opacity='0.40'/%3E%3Ccircle cx='318.8' cy='70.4' r='0.91' fill='%23FFFFFF' opacity='0.44'/%3E%3Ccircle cx='146.3' cy='189.7' r='0.51' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='283.1' cy='285.0' r='1.11' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='243.6' cy='88.1' r='0.41' fill='%23FFFFFF' opacity='0.50'/%3E%3Ccircle cx='24.3' cy='0.5' r='0.89' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='237.2' cy='156.6' r='0.95' fill='%23FFFFFF' opacity='0.49'/%3E%3Ccircle cx='282.3' cy='75.3' r='0.70' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='37.9' cy='156.6' r='0.40' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='203.8' cy='295.1' r='0.42' fill='%23FFFFFF' opacity='0.89'/%3E%3Ccircle cx='60.2' cy='310.0' r='0.85' fill='%23FFFFFF' opacity='0.76'/%3E%3Ccircle cx='85.2' cy='71.3' r='0.57' fill='%23FFFFFF' opacity='0.69'/%3E%3Ccircle cx='16.8' cy='246.2' r='0.96' fill='%23FFFFFF' opacity='0.78'/%3E%3Ccircle cx='159.4' cy='10.5' r='0.49' fill='%23FFFFFF' opacity='0.90'/%3E%3Ccircle cx='41.8' cy='220.1' r='1.11' fill='%23FFFFFF' opacity='0.37'/%3E%3Ccircle cx='282.6' cy='275.6' r='1.19' fill='%23FFFFFF' opacity='0.92'/%3E%3Ccircle cx='244.8' cy='134.3' r='0.60' fill='%23FFFFFF' opacity='0.79'/%3E%3Ccircle cx='282.3' cy='127.5' r='0.59' fill='%23FFFFFF' opacity='0.59'/%3E%3Ccircle cx='283.8' cy='178.8' r='0.68' fill='%23FFFFFF' opacity='0.72'/%3E%3Ccircle cx='235.2' cy='107.2' r='0.98' fill='%23FFFFFF' opacity='0.60'/%3E%3Ccircle cx='63.6' cy='99.7' r='1.19' fill='%23FFFFFF' opacity='0.95'/%3E%3Ccircle cx='202.4' cy='279.1' r='1.13' fill='%23FFFFFF' opacity='0.47'/%3E%3Ccircle cx='206.5' cy='43.3' r='0.80' fill='%23FFFFFF' opacity='0.68'/%3E%3Ccircle cx='246.8' cy='302.6' r='0.79' fill='%23FFFFFF' opacity='0.46'/%3E%3Ccircle cx='142.9' cy='53.2' r='0.93' fill='%23FFFFFF' opacity='0.66'/%3E%3C/svg%3E") 0 0 / 320px 320px, #0A111E; border-top-color: var(--sod-lijn); margin-top: 0; }
body.sod-thema-nacht .sod-footer .sod-namen { font-family: var(--sod-caps-font); letter-spacing: .14em; text-transform: uppercase; font-size: 22px; }

/* ==================== Stijl 3: Redactie ==================== */
body.sod-thema-redactie { counter-reset: sod-hoofdstuk; }
body.sod-thema-redactie .sod-nav { background: color-mix(in srgb, var(--sod-bg) 94%, transparent); border-bottom: 1px solid var(--sod-tekst); }
body.sod-thema-redactie .sod-nav-titel { font-family: var(--sod-kop-font); font-style: italic; font-size: 22px; color: var(--sod-tekst); }
body.sod-thema-redactie .sod-nav-links a { color: var(--sod-tekst); font-weight: 500; }
body.sod-thema-redactie .sod-nav-links a:hover { color: var(--sod-accent); }

/* De hero is een voorpagina: een kopbalk, namen over de hele breedte, en
   daaronder de foto met de gegevens ernaast. */
body.sod-thema-redactie .sod-hero {
  display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: clamp(24px, 4vw, 64px);
  align-items: start; min-height: auto; max-width: 1400px; margin: 0 auto;
  padding: 26px clamp(20px, 5vw, 72px) 76px; background: var(--sod-bg); text-align: left;
}
body.sod-thema-redactie .sod-hero-inhoud { display: contents; }
body.sod-thema-redactie .sod-hero-inhoud > * { margin: 0; text-align: left; }
body.sod-thema-redactie .sod-hero .sod-subkop {
  grid-column: 1 / -1; grid-row: 1; padding: 11px 0; border-top: 7px solid var(--sod-tekst); border-bottom: 1px solid var(--sod-tekst);
  font-family: var(--sod-caps-font); font-weight: 600; letter-spacing: .32em; font-size: 12px; color: var(--sod-accent); opacity: 1;
}
body.sod-thema-redactie .sod-hero .sod-datum {
  grid-column: 2; grid-row: 1; justify-self: end; align-self: end; padding: 11px 0;
  font-family: var(--sod-caps-font); font-weight: 600; font-size: 12px; letter-spacing: .32em; color: var(--sod-tekst); opacity: 1;
}
body.sod-thema-redactie .sod-hero h1 {
  grid-column: 1 / -1; grid-row: 2; font-family: var(--sod-kop-font); font-weight: 400; font-style: italic; color: var(--sod-tekst);
  font-size: clamp(58px, 12.5vw, 210px); line-height: .9; letter-spacing: -.035em; margin: 30px 0 34px;
}
body.sod-thema-redactie .sod-hero .sod-hero-img { grid-column: 1; grid-row: 3 / span 4; aspect-ratio: 4 / 3; background: var(--sod-vlak); }
body.sod-thema-redactie .sod-hero .sod-hero-img img { filter: grayscale(.2) contrast(1.04); }
body.sod-thema-redactie .sod-hero .sod-uitnodiging {
  grid-column: 2; grid-row: 3; border-top: 1px solid var(--sod-tekst); padding-top: 16px;
  font-family: var(--sod-kop-font); font-style: italic; font-size: clamp(26px, 2.8vw, 38px); line-height: 1.15; color: var(--sod-tekst);
}
body.sod-thema-redactie .sod-hero .sod-countdown { grid-column: 2; grid-row: 4; justify-content: flex-start; gap: 0; margin: 26px 0 0; border-top: 1px solid var(--sod-tekst); padding-top: 18px; }
body.sod-thema-redactie .sod-countdown > div { padding-right: 26px; }
body.sod-thema-redactie .sod-countdown b { font-family: var(--sod-kop-font); font-weight: 400; font-size: clamp(42px, 5vw, 68px); line-height: 1; color: var(--sod-tekst); }
body.sod-thema-redactie .sod-countdown span { color: var(--sod-accent); font-weight: 600; letter-spacing: .24em; }
body.sod-thema-redactie .sod-hero .wp-block-buttons { grid-column: 2; grid-row: 5; justify-content: flex-start; margin-top: 30px; }
@media (max-width: 860px) {
  body.sod-thema-redactie .sod-hero { grid-template-columns: 1fr; }
  body.sod-thema-redactie .sod-hero > *, body.sod-thema-redactie .sod-hero-inhoud > * { grid-column: 1 !important; grid-row: auto !important; }
  body.sod-thema-redactie .sod-hero .sod-subkop { order: 1; }
  body.sod-thema-redactie .sod-hero .sod-datum { order: 2; justify-self: start; padding-top: 6px; }
  body.sod-thema-redactie .sod-hero h1 { order: 3; margin: 18px 0 22px; }
  body.sod-thema-redactie .sod-hero .sod-hero-img { order: 4; }
  body.sod-thema-redactie .sod-hero .sod-uitnodiging { order: 5; margin-top: 22px; }
  body.sod-thema-redactie .sod-hero .sod-countdown { order: 6; }
  body.sod-thema-redactie .sod-hero .wp-block-buttons { order: 7; }
}

body.sod-thema-redactie .wp-block-button__link, body.sod-thema-redactie .sod-knop { border-radius: 0; background: var(--sod-tekst); letter-spacing: .2em; }
body.sod-thema-redactie .wp-block-button__link:hover, body.sod-thema-redactie .sod-knop:hover { background: var(--sod-accent); opacity: 1; }
body.sod-thema-redactie .sod-hero .wp-block-button + .wp-block-button .wp-block-button__link,
body.sod-thema-redactie .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--sod-tekst); border: 1px solid var(--sod-tekst); }

/* Elk hoofdstuk krijgt een nummer in rood boven de kop. */
body.sod-thema-redactie h2 { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-tekst); font-size: clamp(38px, 5.6vw, 74px); line-height: 1; letter-spacing: -.02em; }
body.sod-thema-redactie .sod-sectie > h2::before {
  counter-increment: sod-hoofdstuk; content: counter(sod-hoofdstuk, decimal-leading-zero);
  display: block; margin-bottom: 14px; font-family: var(--sod-caps-font); font-size: 12px; font-weight: 600; letter-spacing: .3em; color: var(--sod-accent);
}
body.sod-thema-redactie h3 { font-family: var(--sod-kop-font); font-style: italic; font-weight: 400; color: var(--sod-tekst); }
body.sod-thema-redactie .sod-subkop { font-family: var(--sod-caps-font); font-weight: 600; color: var(--sod-accent); letter-spacing: .3em; }
body.sod-thema-redactie .sod-zachttekst { color: var(--sod-tekst-zacht); }
body.sod-thema-redactie .sod-sectie.sod-licht { background: var(--sod-vlak); }
body.sod-thema-redactie .sod-sectie.sod-zacht { background: var(--sod-bg-zacht); }
/* Een getint blok wordt een zwart katern met lichte letters. */
body.sod-thema-redactie .sod-sectie.sod-getint, body.sod-thema-redactie .sod-sectie.sod-accent {
  background: #151413; --sod-primair: #F2EFE8; --sod-tekst: #F2EFE8; --sod-tekst-zacht: #B8B1A5; --sod-lijn: #3A3733; --sod-knop-tekst: #151413;
}
body.sod-thema-redactie .sod-banner-tekst { font-family: var(--sod-kop-font); font-style: italic; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.12; max-width: 1000px; color: var(--sod-tekst); }
body.sod-thema-redactie .sod-banner-tekst::before { content: "\201C"; display: block; font-size: 1.8em; line-height: .6; color: var(--sod-accent); margin-bottom: 4px; }
body.sod-thema-redactie .sod-banner-bron { font-family: var(--sod-caps-font); font-size: 12px; font-weight: 600; letter-spacing: .32em; text-transform: uppercase; color: var(--sod-tekst-zacht); }
body.sod-thema-redactie hr.sod-scheiding, body.sod-thema-redactie hr.sod-scheiding.is-style-wide, body.sod-thema-redactie hr.sod-lijn-scheiding {
  max-width: 1120px; height: 7px; margin: 48px auto; background: linear-gradient(var(--sod-tekst), var(--sod-tekst)) top / 100% 3px no-repeat, linear-gradient(var(--sod-tekst), var(--sod-tekst)) bottom / 100% 1px no-repeat;
}

body.sod-thema-redactie .sod-snel { background: transparent; border: 0; border-top: 1px solid var(--sod-tekst); border-bottom: 1px solid var(--sod-tekst); }
body.sod-thema-redactie .sod-snel-tegel { border-left-color: var(--sod-tekst); align-items: flex-start; text-align: left; }
body.sod-thema-redactie .sod-snel-naam { font-family: var(--sod-kop-font); font-style: italic; font-size: 26px; color: var(--sod-tekst); }
body.sod-thema-redactie .sod-snel-naam::after { left: 0; transform: none; background: var(--sod-accent); }
body.sod-thema-redactie .sod-snel-icoon { color: var(--sod-accent); }

body.sod-thema-redactie .sod-paar-kaart figure { border-radius: 0; }
body.sod-thema-redactie .sod-paar-kaart img { filter: grayscale(1) contrast(1.08); transition: filter .5s; }
body.sod-thema-redactie .sod-paar-kaart:hover img { filter: none; }
body.sod-thema-redactie .sod-paar-kaart h3 { font-size: 34px; margin-top: 4px; }

/* Het programma als lijst in een krant: tijd links, de rest ernaast, lijnen ertussen. */
body.sod-thema-redactie .sod-tijdlijn { max-width: 880px; border-top: 3px solid var(--sod-tekst); }
body.sod-thema-redactie .sod-tijdlijn::before, body.sod-thema-redactie .sod-tl-item::before { display: none; }
body.sod-thema-redactie .sod-tl-item, body.sod-thema-redactie .sod-tl-item:nth-child(even) {
  width: auto; margin: 0; padding: 20px 0; text-align: left; border-bottom: 1px solid var(--sod-tekst);
  display: grid; grid-template-columns: minmax(110px, 180px) 1fr; column-gap: 24px; align-items: baseline;
}
body.sod-thema-redactie .sod-tl-item > * { grid-column: 2; }
body.sod-thema-redactie .sod-tl-item .sod-tl-tijd { grid-column: 1; grid-row: 1 / span 2; font-family: var(--sod-kop-font); font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--sod-accent); opacity: 1; }
body.sod-thema-redactie .sod-tl-item h3 { font-size: 28px; }

body.sod-thema-redactie .sod-kaarten .sod-kaart { background: transparent; border: 0; border-top: 3px solid var(--sod-tekst); border-radius: 0; padding: 20px 0 0; }
body.sod-thema-redactie .sod-galerij { grid-auto-flow: dense; }
body.sod-thema-redactie .sod-galerij figure { border-radius: 0; }
body.sod-thema-redactie .sod-galerij figure:first-child { grid-column: span 2; grid-row: span 2; }
body.sod-thema-redactie .sod-locatie-foto img { border-radius: 0; box-shadow: none; }
body.sod-thema-redactie .sod-locatie-tekening img { mix-blend-mode: multiply; }
body.sod-thema-redactie .sod-kleur .sod-bol { border-radius: 0; box-shadow: none; outline: 1px solid var(--sod-tekst); outline-offset: 4px; }
body.sod-thema-redactie .sod-notitie { border-radius: 0; border-color: var(--sod-tekst); background: transparent; color: var(--sod-tekst); }

body.sod-thema-redactie .sod-rsvp-kaart { background: var(--sod-vlak); border: 2px solid var(--sod-tekst); border-radius: 0; box-shadow: 10px 10px 0 var(--sod-accent); }
body.sod-thema-redactie .sod-rsvp-kaart h2::before { display: none; }
body.sod-thema-redactie #rsvp-code, body.sod-thema-redactie .sod-keuze label, body.sod-thema-redactie .sod-gast { border-radius: 0; }
body.sod-thema-redactie .sod-praktisch { border-color: var(--sod-tekst); }
body.sod-thema-redactie .sod-pk-kaart h3::after { background: var(--sod-accent); }
body.sod-thema-redactie .sod-spel-bol { border-radius: 0; }
body.sod-thema-redactie .sod-footer { border-top: 7px solid var(--sod-tekst); }
body.sod-thema-redactie .sod-footer .sod-namen { font-family: var(--sod-kop-font); font-style: italic; font-size: clamp(40px, 6vw, 80px); letter-spacing: -.02em; line-height: 1; margin-bottom: 14px; color: var(--sod-tekst); }

/* ==================== Stijl 4: Mediterraan ==================== */
body.sod-thema-zomer .sod-nav { background: color-mix(in srgb, var(--sod-bg) 92%, transparent); }
body.sod-thema-zomer .sod-nav-titel { font-family: var(--sod-kop-font); font-style: italic; font-size: 25px; color: var(--sod-primair); }
body.sod-thema-zomer .sod-nav-links a { color: var(--sod-tekst); }

/* Tekst links, de foto in een boogvenster rechts met een zon erachter, en een
   rand tegels langs de onderkant. */
body.sod-thema-zomer .sod-hero {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); align-items: center;
  gap: clamp(28px, 5vw, 84px); min-height: auto; text-align: left;
  padding: clamp(56px, 8vw, 100px) clamp(20px, 6vw, 96px) clamp(90px, 10vw, 130px);
  background: radial-gradient(circle at 86% 24%, #F6C27E 0, #F2B26C 11%, transparent 11.2%), var(--sod-hero-bg);
}
body.sod-thema-zomer .sod-hero::after {
  display: block; content: ""; position: absolute; inset: auto 0 0 0; height: 30px; z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23FBF3E8'/%3E%3Cpath d='M0 0h13A13 13 0 0 1 0 13z' fill='%23B5532A'/%3E%3Cpath d='M48 0h-13A13 13 0 0 0 48 13z' fill='%23B5532A'/%3E%3Cpath d='M0 48h13A13 13 0 0 0 0 35z' fill='%23B5532A'/%3E%3Cpath d='M48 48h-13A13 13 0 0 1 48 35z' fill='%23B5532A'/%3E%3Cpath d='M24 11L37 24L24 37L11 24Z' fill='%236F7D4A'/%3E%3Ccircle cx='24' cy='24' r='4.5' fill='%23F2C48D'/%3E%3C/svg%3E") 0 0 / 30px 30px repeat-x;
}
body.sod-thema-zomer .sod-hero .sod-hero-img {
  order: 2; z-index: 2; justify-self: center; width: min(100%, 440px); aspect-ratio: 4 / 5;
  border-radius: 999px 999px 0 0; overflow: hidden; background: var(--sod-vlak);
  outline: 2px solid var(--sod-primair); outline-offset: 12px;
}
body.sod-thema-zomer .sod-hero-inhoud { order: 1; margin: 0; padding: 0; text-align: left; max-width: 640px; }
body.sod-thema-zomer .sod-hero-inhoud .sod-subkop { font-family: var(--sod-caps-font); color: var(--sod-primair); letter-spacing: .42em; font-weight: 500; opacity: 1; }
body.sod-thema-zomer .sod-hero-inhoud h1 { font-family: var(--sod-kop-font); font-weight: 400; color: #8E3B1C; font-size: clamp(50px, 7.4vw, 112px); line-height: .96; margin: .16em 0 .3em; }
body.sod-thema-zomer .sod-hero-inhoud .sod-datum {
  display: inline-block; font-family: var(--sod-caps-font); font-weight: 500; font-size: clamp(15px, 1.6vw, 19px); letter-spacing: .34em;
  color: var(--sod-accent); border-top: 1px solid currentColor; border-bottom: 1px solid currentColor; padding: 9px 4px; opacity: 1;
}
body.sod-thema-zomer .sod-uitnodiging { font-family: var(--sod-kop-font); font-style: italic; color: var(--sod-tekst-zacht); margin-top: 18px; }
body.sod-thema-zomer .sod-hero .sod-countdown { justify-content: flex-start; gap: 12px; }
body.sod-thema-zomer .sod-countdown > div { background: var(--sod-vlak); border-radius: 999px 999px 12px 12px; padding: 20px 14px 12px; min-width: 84px; text-align: center; box-shadow: 0 14px 30px -22px #8E3B1C; }
body.sod-thema-zomer .sod-countdown b { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); font-size: clamp(30px, 3.4vw, 42px); }
body.sod-thema-zomer .sod-countdown span { color: var(--sod-tekst-zacht); }
body.sod-thema-zomer .sod-hero .wp-block-buttons { justify-content: flex-start; }
@media (max-width: 860px) {
  body.sod-thema-zomer .sod-hero { grid-template-columns: 1fr; text-align: center; background: radial-gradient(circle at 50% 27%, #F6C27E 0, #F2B26C 21%, transparent 21.3%), var(--sod-hero-bg); }
  body.sod-thema-zomer .sod-hero .sod-hero-img { order: 1; width: min(300px, 74vw); }
  body.sod-thema-zomer .sod-hero-inhoud { order: 2; text-align: center; margin: 0 auto; }
  body.sod-thema-zomer .sod-hero .sod-countdown, body.sod-thema-zomer .sod-hero .wp-block-buttons { justify-content: center; }
}

body.sod-thema-zomer .wp-block-button__link, body.sod-thema-zomer .sod-knop { border-radius: 999px; letter-spacing: .16em; }
body.sod-thema-zomer .sod-hero .wp-block-button + .wp-block-button .wp-block-button__link,
body.sod-thema-zomer .wp-block-button.is-style-outline .wp-block-button__link { background: transparent; color: var(--sod-accent); border: 1.5px solid var(--sod-accent); }

body.sod-thema-zomer { --z-kop: #8E3B1C; }
body.sod-thema-zomer h2 { font-family: var(--sod-kop-font); font-weight: 400; color: var(--z-kop); font-size: clamp(34px, 5vw, 58px); }
body.sod-thema-zomer .sod-sectie > h2::before { content: ""; display: block; width: 38px; height: 38px; margin: 0 auto 12px; background: var(--sod-primair); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23B5532A' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M20 4v5M20 31v5M4 20h5M31 20h5M8.7 8.7l3.5 3.5M27.8 27.8l3.5 3.5M8.7 31.3l3.5-3.5M27.8 12.2l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40' fill='none' stroke='%23B5532A' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='20' cy='20' r='7'/%3E%3Cpath d='M20 4v5M20 31v5M4 20h5M31 20h5M8.7 8.7l3.5 3.5M27.8 27.8l3.5 3.5M8.7 31.3l3.5-3.5M27.8 12.2l3.5-3.5'/%3E%3C/svg%3E") center / contain no-repeat; }
body.sod-thema-zomer .sod-sectie:not(.sod-centreer) > h2::before { margin-left: 0; }
body.sod-thema-zomer .sod-sectie > h2.has-text-align-center::before { margin-left: auto; }
body.sod-thema-zomer h3 { font-family: var(--sod-kop-font); color: var(--sod-primair); }
body.sod-thema-zomer .sod-subkop { font-family: var(--sod-caps-font); color: var(--sod-accent); font-weight: 500; }
body.sod-thema-zomer .sod-sectie.sod-licht { background: #FCF5EC; }
body.sod-thema-zomer .sod-sectie.sod-zacht { background: var(--sod-bg-zacht); }
/* Een getint blok wordt terracotta met crème letters. */
body.sod-thema-zomer .sod-sectie.sod-getint, body.sod-thema-zomer .sod-sectie.sod-accent {
  background: #B5532A; --z-kop: #FFF3E3; --sod-primair: #FFF3E3; --sod-tekst: #FFF3E3; --sod-tekst-zacht: #F6D9BF; --sod-lijn: #D07A51; --sod-knop-tekst: #B5532A;
}
body.sod-thema-zomer .sod-banner-tekst { font-family: var(--sod-kop-font); font-style: normal; color: var(--sod-tekst); }
body.sod-thema-zomer .sod-banner-bron { font-family: var(--sod-kop-font); font-style: italic; color: #F6C27E; opacity: 1; }
body.sod-thema-zomer hr.sod-scheiding, body.sod-thema-zomer hr.sod-scheiding.is-style-wide, body.sod-thema-zomer hr.sod-lijn-scheiding {
  max-width: 150px; height: 30px; margin: 44px auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23FBF3E8'/%3E%3Cpath d='M0 0h13A13 13 0 0 1 0 13z' fill='%23B5532A'/%3E%3Cpath d='M48 0h-13A13 13 0 0 0 48 13z' fill='%23B5532A'/%3E%3Cpath d='M0 48h13A13 13 0 0 0 0 35z' fill='%23B5532A'/%3E%3Cpath d='M48 48h-13A13 13 0 0 1 48 35z' fill='%23B5532A'/%3E%3Cpath d='M24 11L37 24L24 37L11 24Z' fill='%236F7D4A'/%3E%3Ccircle cx='24' cy='24' r='4.5' fill='%23F2C48D'/%3E%3C/svg%3E") center / 30px 30px repeat-x;
}

body.sod-thema-zomer .sod-snel { background: var(--sod-vlak); border-color: var(--sod-lijn); border-radius: 22px; overflow: hidden; }
body.sod-thema-zomer .sod-snel-tegel { border-color: var(--sod-lijn); }
body.sod-thema-zomer .sod-snel-naam { font-family: var(--sod-kop-font); color: var(--sod-primair); font-size: 22px; }
body.sod-thema-zomer .sod-snel-icoon { color: var(--sod-accent); }

body.sod-thema-zomer .sod-paar-kaart figure { border-radius: 999px 999px 14px 14px; outline: 1.5px solid var(--sod-primair); outline-offset: 8px; margin-bottom: 26px; }
body.sod-thema-zomer .sod-paar-kaart h3 { font-size: 32px; color: var(--z-kop); }
body.sod-thema-zomer .sod-tijdlijn::before { background: repeating-linear-gradient(var(--sod-primair) 0 6px, transparent 6px 12px); width: 2px; }
body.sod-thema-zomer .sod-tl-item::before { background: radial-gradient(circle, #F2B26C 0 45%, var(--sod-vlak) 46%); border: 2px solid var(--sod-primair); width: 20px; height: 20px; top: 4px; }
@media (min-width: 782px) {
  body.sod-thema-zomer .sod-tl-item::before { right: -11px; }
  body.sod-thema-zomer .sod-tl-item:nth-child(even)::before { left: -11px; }
}
body.sod-thema-zomer .sod-tl-item .sod-tl-tijd { font-family: var(--sod-caps-font); font-weight: 500; color: var(--sod-accent); opacity: 1; letter-spacing: .2em; font-size: 15px; }
body.sod-thema-zomer .sod-locatie-tekening img { mix-blend-mode: multiply; }
body.sod-thema-zomer .sod-locatie-foto img { border-radius: 999px 999px 18px 18px; aspect-ratio: 4 / 5; object-fit: cover; }
body.sod-thema-zomer .sod-kaarten .sod-kaart { background: var(--sod-vlak); border: 1px solid var(--sod-lijn); border-radius: 140px 140px 18px 18px; padding: 52px 26px 30px; text-align: center; }
body.sod-thema-zomer .sod-galerij figure { border-radius: 999px 999px 14px 14px; aspect-ratio: 3 / 4; }
body.sod-thema-zomer .sod-rsvp-kaart { background: var(--sod-vlak); border: 1px solid var(--sod-lijn); border-radius: 320px 320px 26px 26px; padding-top: clamp(64px, 8vw, 96px); }
body.sod-thema-zomer #rsvp-code, body.sod-thema-zomer .sod-keuze label { border-radius: 999px; }
body.sod-thema-zomer .sod-gast { border-radius: 18px; background: color-mix(in srgb, var(--sod-bg) 55%, transparent); }
body.sod-thema-zomer .sod-praktisch { border-radius: 22px; overflow: hidden; }
body.sod-thema-zomer .sod-pk-kaart h3::after { background: var(--sod-primair); }
body.sod-thema-zomer .sod-footer { position: relative; background: var(--sod-bg-zacht); border-top: 0; margin-top: 0; padding-top: 86px; }
body.sod-thema-zomer .sod-footer::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 30px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48'%3E%3Crect width='48' height='48' fill='%23FBF3E8'/%3E%3Cpath d='M0 0h13A13 13 0 0 1 0 13z' fill='%23B5532A'/%3E%3Cpath d='M48 0h-13A13 13 0 0 0 48 13z' fill='%23B5532A'/%3E%3Cpath d='M0 48h13A13 13 0 0 0 0 35z' fill='%23B5532A'/%3E%3Cpath d='M48 48h-13A13 13 0 0 1 48 35z' fill='%23B5532A'/%3E%3Cpath d='M24 11L37 24L24 37L11 24Z' fill='%236F7D4A'/%3E%3Ccircle cx='24' cy='24' r='4.5' fill='%23F2C48D'/%3E%3C/svg%3E") 0 0 / 30px 30px repeat-x; }
body.sod-thema-zomer .sod-footer .sod-namen { font-family: var(--sod-kop-font); font-size: 34px; color: var(--z-kop); }

/* ==================== Stijl 5: Seventies ==================== */
body.sod-thema-groovy .sod-nav { background: color-mix(in srgb, var(--sod-bg) 92%, transparent); border-bottom: 2px solid var(--g-bruin); }
body.sod-thema-groovy .sod-nav-titel { font-family: var(--sod-kop-font); color: var(--sod-primair); font-size: 24px; letter-spacing: 0; }
body.sod-thema-groovy .sod-nav-links a { color: var(--g-bruin); font-weight: 600; }

/* De zon komt op: regenboogbanen vanaf de onderkant, de foto in het midden. */
body.sod-thema-groovy .sod-hero {
  --g-s: 1;
  flex-direction: column; align-items: center; justify-content: flex-start; text-align: center;
  min-height: auto; padding: clamp(48px, 7vw, 84px) 20px 0; background: var(--sod-hero-bg);
}
body.sod-thema-groovy .sod-hero::before {
  content: ""; position: absolute; left: 50%; bottom: 0; z-index: 0; transform: translateX(-50%);
  width: calc(1040px * var(--g-s)); height: calc(520px * var(--g-s));
  background: radial-gradient(circle at 50% 100%,
    transparent 0 calc(232px * var(--g-s)),
    #F2B33D calc(232px * var(--g-s)) calc(290px * var(--g-s)),
    #F08A4B calc(290px * var(--g-s)) calc(348px * var(--g-s)),
    #D9542B calc(348px * var(--g-s)) calc(406px * var(--g-s)),
    #E98FA6 calc(406px * var(--g-s)) calc(464px * var(--g-s)),
    #9A6BB0 calc(464px * var(--g-s)) calc(520px * var(--g-s)),
    transparent calc(520px * var(--g-s)));
}
body.sod-thema-groovy .sod-hero-inhoud { display: contents; }
body.sod-thema-groovy .sod-hero .sod-subkop        { order: 1; }
body.sod-thema-groovy .sod-hero h1                 { order: 2; }
body.sod-thema-groovy .sod-hero .sod-datum         { order: 3; }
body.sod-thema-groovy .sod-hero .sod-uitnodiging   { order: 4; }
body.sod-thema-groovy .sod-hero .sod-countdown     { order: 5; }
body.sod-thema-groovy .sod-hero .wp-block-buttons  { order: 6; }
body.sod-thema-groovy .sod-hero .sod-hero-img      { order: 7; }
body.sod-thema-groovy .sod-hero > *, body.sod-thema-groovy .sod-hero-inhoud > * { position: relative; z-index: 2; }
body.sod-thema-groovy .sod-hero .sod-subkop { display: flex; align-items: center; gap: 12px; font-family: var(--sod-caps-font); font-weight: 700; letter-spacing: .32em; color: var(--g-bruin); opacity: 1; }
body.sod-thema-groovy .sod-hero .sod-subkop::before, body.sod-thema-groovy .sod-hero .sod-subkop::after { content: ""; width: 22px; height: 22px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(288 20 20)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23F2B33D'/%3E%3C/svg%3E") center / contain no-repeat; }
body.sod-thema-groovy .sod-hero h1 {
  font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); line-height: 1.02;
  font-size: clamp(50px, 9vw, 124px); margin: .12em 0 .2em; max-width: 1100px;
  text-shadow: 3px 3px 0 #F2B33D, 6px 6px 0 #E98FA6;
}
body.sod-thema-groovy .sod-hero .sod-datum {
  display: inline-block; margin: 6px 0 0; padding: 7px 24px; border-radius: 999px; transform: rotate(-2.5deg);
  background: #F2B33D; color: var(--g-bruin); border: 2px solid var(--g-bruin); box-shadow: 4px 4px 0 var(--g-bruin);
  font-family: var(--sod-caps-font); font-weight: 700; font-size: clamp(17px, 2vw, 23px); letter-spacing: .14em;
}
body.sod-thema-groovy .sod-uitnodiging { font-family: var(--sod-caps-font); font-style: normal; font-weight: 500; color: var(--g-bruin); margin-top: 22px; }
body.sod-thema-groovy .sod-countdown { gap: 14px; }
body.sod-thema-groovy .sod-countdown > div {
  width: 92px; height: 92px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--sod-vlak); border: 2px solid var(--g-bruin); box-shadow: 4px 4px 0 var(--g-bruin);
}
body.sod-thema-groovy .sod-countdown > div:nth-child(2) { transform: translateY(-8px); }
body.sod-thema-groovy .sod-countdown b { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); font-size: 30px; line-height: 1.1; }
body.sod-thema-groovy .sod-countdown span { color: var(--g-bruin); font-weight: 600; font-size: 9.5px; letter-spacing: .14em; }
body.sod-thema-groovy .sod-hero .sod-hero-img {
  width: calc(210px * var(--g-s)); aspect-ratio: 3 / 4; margin-top: calc(250px * var(--g-s) + 24px); border-radius: 999px 999px 0 0; overflow: hidden;
  border: 3px solid var(--g-bruin); border-bottom: 0; background: var(--sod-vlak);
}
@media (max-width: 900px) { body.sod-thema-groovy .sod-hero { --g-s: .78; } }
@media (max-width: 560px) { body.sod-thema-groovy .sod-hero { --g-s: .56; } body.sod-thema-groovy .sod-countdown > div { width: 78px; height: 78px; } }

body.sod-thema-groovy .wp-block-button__link, body.sod-thema-groovy .sod-knop {
  border-radius: 999px; border: 2px solid var(--g-bruin); box-shadow: 4px 4px 0 var(--g-bruin);
  font-weight: 700; letter-spacing: .12em; transition: transform .15s ease, box-shadow .15s ease;
}
body.sod-thema-groovy .wp-block-button__link:hover, body.sod-thema-groovy .sod-knop:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 var(--g-bruin); opacity: 1; }
body.sod-thema-groovy .sod-hero .wp-block-button + .wp-block-button .wp-block-button__link,
body.sod-thema-groovy .wp-block-button.is-style-outline .wp-block-button__link { background: #F2B33D; color: var(--g-bruin); }

body.sod-thema-groovy h2 { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); font-size: clamp(32px, 4.6vw, 54px); text-shadow: 2px 2px 0 #F2B33D; }
body.sod-thema-groovy h3 { font-family: var(--sod-caps-font); font-weight: 700; color: var(--g-bruin); }
body.sod-thema-groovy .sod-subkop { font-family: var(--sod-caps-font); font-weight: 700; color: var(--g-bruin); }
/* Gekleurde banden krijgen een golvende boven- en onderrand. */
body.sod-thema-groovy .sod-sectie:is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent) { position: relative; padding-top: 104px; padding-bottom: 104px; }
body.sod-thema-groovy .sod-sectie:is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent)::before,
body.sod-thema-groovy .sod-sectie:is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent)::after {
  content: ""; position: absolute; left: 0; right: 0; height: 26px; background: var(--sod-bg); max-width: none;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V12Q105 24 90 12T60 12T30 12T0 12Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0H120V12Q105 24 90 12T60 12T30 12T0 12Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x;
}
body.sod-thema-groovy .sod-sectie:is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent)::before { top: -1px; }
body.sod-thema-groovy .sod-sectie:is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent)::after {
  bottom: -1px; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24H120V12Q105 0 90 12T60 12T30 12T0 12Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 24' preserveAspectRatio='none'%3E%3Cpath d='M0 24H120V12Q105 0 90 12T60 12T30 12T0 12Z' fill='%23000'/%3E%3C/svg%3E") 0 0 / 120px 26px repeat-x;
}
body.sod-thema-groovy .sod-sectie.sod-licht { background: #FFE7C9; }
body.sod-thema-groovy .sod-sectie.sod-zacht { background: #FFD9B0; }
body.sod-thema-groovy .sod-sectie.sod-getint, body.sod-thema-groovy .sod-sectie.sod-accent {
  background: #D9542B; --sod-primair: #FFF1DE; --sod-tekst: #FFF1DE; --sod-tekst-zacht: #FFD9C2; --sod-lijn: #F08A4B; --sod-knop-tekst: #D9542B;
}
body.sod-thema-groovy .sod-getint h2, body.sod-thema-groovy .sod-accent h2 { text-shadow: 2px 2px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-banner-tekst { font-family: var(--sod-caps-font); font-style: normal; font-weight: 600; color: var(--sod-tekst); }
body.sod-thema-groovy .sod-banner-bron { font-family: var(--sod-kop-font); color: #F2B33D; text-shadow: 2px 2px 0 var(--g-bruin); opacity: 1; }
body.sod-thema-groovy hr.sod-scheiding, body.sod-thema-groovy hr.sod-scheiding.is-style-wide, body.sod-thema-groovy hr.sod-lijn-scheiding {
  max-width: 120px; height: 28px; margin: 44px auto; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F08A4B' transform='rotate(288 20 20)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23F2B33D'/%3E%3C/svg%3E") 0 center / 28px 28px repeat-x; background-size: 28px; background-repeat: space;
}

body.sod-thema-groovy .sod-snel { background: var(--sod-vlak); border: 2px solid var(--g-bruin); border-radius: 26px; overflow: hidden; box-shadow: 6px 6px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-snel-tegel { border-left: 2px solid var(--g-bruin); }
body.sod-thema-groovy .sod-snel-tegel:first-child { border-left: 0; }
body.sod-thema-groovy .sod-snel-tegel:nth-child(1) { background: #FFE2C2; } body.sod-thema-groovy .sod-snel-tegel:nth-child(2) { background: #FCD3DB; }
body.sod-thema-groovy .sod-snel-tegel:nth-child(3) { background: #FFE9B8; } body.sod-thema-groovy .sod-snel-tegel:nth-child(4) { background: #EADCF1; }
body.sod-thema-groovy .sod-snel-naam { font-family: var(--sod-kop-font); color: var(--sod-primair); }
body.sod-thema-groovy .sod-snel-icoon { color: var(--g-bruin); }
@media (max-width: 760px) {
  body.sod-thema-groovy .sod-snel-tegel:nth-child(odd) { border-left: 0; }
  body.sod-thema-groovy .sod-snel-tegel:nth-child(n+3) { border-top: 2px solid var(--g-bruin); }
}

body.sod-thema-groovy .sod-paar-kaart figure { border-radius: 999px; border: 3px solid var(--g-bruin); box-shadow: 6px 6px 0 #F2B33D; }
body.sod-thema-groovy .sod-paar-kaart:nth-child(2) figure { box-shadow: 6px 6px 0 #E98FA6; }
body.sod-thema-groovy .sod-paar-kaart h3 { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); font-size: 30px; }
body.sod-thema-groovy .sod-tijdlijn::before { background: none; border-left: 3px dotted var(--g-bruin); width: 0; }
body.sod-thema-groovy .sod-tl-item::before { width: 22px; height: 22px; top: 3px; border: 2px solid var(--g-bruin); background: #F2B33D; }
body.sod-thema-groovy .sod-tl-item:nth-child(3n+2)::before { background: #E98FA6; }
body.sod-thema-groovy .sod-tl-item:nth-child(3n)::before { background: #F08A4B; }
@media (min-width: 782px) {
  body.sod-thema-groovy .sod-tl-item::before { right: -12px; }
  body.sod-thema-groovy .sod-tl-item:nth-child(even)::before { left: -11px; }
}
body.sod-thema-groovy .sod-tl-item .sod-tl-tijd { font-family: var(--sod-kop-font); color: var(--sod-primair); opacity: 1; font-size: 24px; }
body.sod-thema-groovy .sod-locatie-tekening img { mix-blend-mode: multiply; }
body.sod-thema-groovy .sod-locatie-foto img { border-radius: 26px; border: 3px solid var(--g-bruin); box-shadow: 8px 8px 0 #F2B33D; }
body.sod-thema-groovy .sod-kaarten .sod-kaart { background: var(--sod-vlak); border: 2px solid var(--g-bruin); border-radius: 26px; box-shadow: 5px 5px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-kaarten .sod-kaart:nth-child(odd) { transform: rotate(-.8deg); }
body.sod-thema-groovy .sod-kaarten .sod-kaart:nth-child(even) { transform: rotate(.8deg); }
body.sod-thema-groovy .sod-galerij figure { border-radius: 26px; border: 3px solid var(--g-bruin); }
body.sod-thema-groovy .sod-galerij figure:nth-child(odd) { transform: rotate(-1.2deg); }
body.sod-thema-groovy .sod-galerij figure:nth-child(even) { transform: rotate(1.2deg); }
body.sod-thema-groovy .sod-kleur .sod-bol { border: 2px solid var(--g-bruin); box-shadow: 3px 3px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-notitie { border: 2px solid var(--g-bruin); border-radius: 999px; background: var(--sod-vlak); color: var(--g-bruin); font-style: normal; font-weight: 500; }
body.sod-thema-groovy .sod-rsvp-kaart { background: var(--sod-vlak); border: 3px solid var(--g-bruin); border-radius: 34px; box-shadow: 9px 9px 0 var(--g-bruin); }
body.sod-thema-groovy #rsvp-code, body.sod-thema-groovy .sod-keuze label { border-radius: 999px; border: 2px solid var(--g-bruin); }
body.sod-thema-groovy .sod-gast { border: 2px solid var(--g-bruin); border-radius: 22px; }
body.sod-thema-groovy .sod-veld input, body.sod-thema-groovy .sod-veld select, body.sod-thema-groovy .sod-veld textarea { border-bottom: 2px solid var(--g-bruin); }
body.sod-thema-groovy .sod-praktisch { border: 2px solid var(--g-bruin); border-radius: 26px; overflow: hidden; box-shadow: 6px 6px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-pk-kaart h3 { font-weight: 700; }
body.sod-thema-groovy .sod-pk-kaart h3::after { background: var(--sod-primair); height: 3px; border-radius: 3px; }
body.sod-thema-groovy .sod-spel-bol { border: 2px solid var(--g-bruin); box-shadow: 3px 3px 0 var(--g-bruin); }
body.sod-thema-groovy .sod-spel-doek canvas { border: 2px solid var(--g-bruin); border-radius: 18px; }
body.sod-thema-groovy .sod-footer { position: relative; border-top: 0; margin-top: 0; padding-top: 74px; }
body.sod-thema-groovy .sod-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 24px;
  background: linear-gradient(#F2B33D 0 20%, #F08A4B 20% 40%, #D9542B 40% 60%, #E98FA6 60% 80%, #9A6BB0 80%);
}
body.sod-thema-groovy .sod-footer .sod-namen { font-family: var(--sod-kop-font); font-size: 34px; color: var(--sod-primair); text-shadow: 2px 2px 0 #F2B33D; }

/* ==================== Stijl 6: Bloesem ==================== */
body.sod-thema-bloesem {
  background:
    radial-gradient(60vw 60vw at -10% 10%, #FDE2DA 0, transparent 60%),
    radial-gradient(50vw 50vw at 110% 40%, #E6DDF6 0, transparent 60%),
    radial-gradient(60vw 50vw at 30% 110%, #D9F0E6 0, transparent 60%),
    var(--sod-bg);
  background-attachment: fixed;
}
body.sod-thema-bloesem .sod-nav { background: rgba(255, 255, 255, .5); backdrop-filter: blur(14px) saturate(1.3); border-bottom-color: rgba(255, 255, 255, .8); }
body.sod-thema-bloesem .sod-nav-titel { font-family: var(--sod-kop-font); font-style: italic; color: var(--sod-primair); }
body.sod-thema-bloesem .sod-nav-links a { color: var(--sod-tekst-zacht); }

/* Kleurvlekken die traag rondzweven, een zachte vorm voor de foto en de
   tekst op een kaart van matglas die er half overheen valt. */
body.sod-thema-bloesem .sod-hero {
  flex-direction: row; align-items: center; justify-content: center; gap: 0;
  min-height: min(96vh, 900px); padding: 80px clamp(20px, 5vw, 64px); background: transparent; isolation: isolate;
}
body.sod-thema-bloesem .sod-hero::before,
body.sod-thema-bloesem .sod-hero::after {
  display: block; content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(60px); opacity: .85; pointer-events: none;
  animation: sod-zweef 18s ease-in-out infinite alternate;
}
body.sod-thema-bloesem .sod-hero::before { width: 46vw; height: 46vw; left: -8vw; top: -10vw; background: radial-gradient(circle, #FFC9B9, #F9B4C8 55%, transparent 70%); }
body.sod-thema-bloesem .sod-hero::after { inset: auto -6vw -12vw auto; width: 50vw; height: 50vw; background: radial-gradient(circle, #D8C8F4, #BFE3D6 55%, transparent 70%); animation-delay: -9s; }
@keyframes sod-zweef { from { transform: translate(0, 0) scale(1); } to { transform: translate(6vw, 4vw) scale(1.12); } }
body.sod-thema-bloesem .sod-hero .sod-hero-img {
  flex: 0 0 auto; width: min(420px, 40vw); aspect-ratio: 1 / 1.08; z-index: 1;
  border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; overflow: hidden; background: rgba(255, 255, 255, .7);
  box-shadow: 0 40px 80px -40px rgba(140, 90, 120, .55);
  animation: sod-vorm 16s ease-in-out infinite alternate;
}
@keyframes sod-vorm { to { border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%; } }
body.sod-thema-bloesem .sod-hero-inhoud {
  z-index: 2; margin: 0 0 0 -70px; padding: clamp(30px, 4vw, 52px) clamp(24px, 4vw, 56px); max-width: 600px;
  background: rgba(255, 255, 255, .5); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border: 1px solid rgba(255, 255, 255, .85); border-radius: 32px; box-shadow: 0 30px 70px -40px rgba(140, 90, 120, .6);
}
body.sod-thema-bloesem .sod-hero-inhoud .sod-subkop { font-family: var(--sod-caps-font); color: var(--sod-primair); letter-spacing: .42em; font-size: 14px; opacity: 1; }
body.sod-thema-bloesem .sod-hero-inhoud h1 {
  font-family: var(--sod-kop-font); font-style: italic; font-weight: 400; font-size: clamp(46px, 6.4vw, 92px); line-height: 1.02; margin: .14em 0 .24em;
  background: linear-gradient(120deg, #8C5A78 10%, #D07C95 60%, #E9A27F 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
body.sod-thema-bloesem .sod-hero-inhoud .sod-datum { font-family: var(--sod-caps-font); font-size: clamp(20px, 2.4vw, 28px); letter-spacing: .26em; color: var(--sod-tekst); }
body.sod-thema-bloesem .sod-uitnodiging { font-family: var(--sod-kop-font); color: var(--sod-tekst-zacht); }
body.sod-thema-bloesem .sod-countdown { gap: 10px; }
body.sod-thema-bloesem .sod-countdown > div { background: rgba(255, 255, 255, .6); border: 1px solid rgba(255, 255, 255, .9); border-radius: 20px; padding: 12px 16px 10px; min-width: 76px; }
body.sod-thema-bloesem .sod-countdown b { font-family: var(--sod-kop-font); font-weight: 400; color: var(--sod-primair); font-size: clamp(28px, 3.2vw, 40px); }
body.sod-thema-bloesem .sod-countdown span { color: var(--sod-tekst-zacht); }
@media (max-width: 860px) {
  body.sod-thema-bloesem .sod-hero { flex-direction: column; padding-top: 56px; }
  body.sod-thema-bloesem .sod-hero .sod-hero-img { width: min(300px, 72vw); }
  body.sod-thema-bloesem .sod-hero-inhoud { margin: -54px 0 0; }
}
@media (prefers-reduced-motion: reduce) {
  body.sod-thema-bloesem .sod-hero::before, body.sod-thema-bloesem .sod-hero::after, body.sod-thema-bloesem .sod-hero .sod-hero-img,
  body.sod-thema-nacht .sod-hero::before { animation: none; }
}

body.sod-thema-bloesem .wp-block-button__link, body.sod-thema-bloesem .sod-knop {
  border-radius: 999px; background: linear-gradient(135deg, #A9688F, #E197A6); letter-spacing: .14em;
  box-shadow: 0 12px 28px -12px rgba(169, 104, 143, .8);
}
body.sod-thema-bloesem .sod-hero .wp-block-button + .wp-block-button .wp-block-button__link,
body.sod-thema-bloesem .wp-block-button.is-style-outline .wp-block-button__link { background: rgba(255, 255, 255, .7); color: var(--sod-primair); border: 1px solid #fff; box-shadow: none; }

body.sod-thema-bloesem h2 { font-family: var(--sod-caps-font); font-weight: 400; text-transform: uppercase; letter-spacing: .2em; color: var(--sod-primair); font-size: clamp(26px, 3.8vw, 42px); }
body.sod-thema-bloesem .sod-sectie > h2::after { content: ""; display: block; width: 64px; height: 3px; border-radius: 3px; margin: 18px auto 0; background: linear-gradient(90deg, #C394B0, #F3C6C9, #BFE3D6); }
body.sod-thema-bloesem h3 { font-family: var(--sod-kop-font); font-style: italic; color: var(--sod-primair); }
body.sod-thema-bloesem .sod-subkop { font-family: var(--sod-caps-font); color: var(--sod-primair); font-size: 14px; }
body.sod-thema-bloesem .sod-sectie.sod-licht { background: rgba(255, 255, 255, .45); }
body.sod-thema-bloesem .sod-sectie.sod-zacht { background: rgba(247, 237, 240, .7); }
body.sod-thema-bloesem .sod-sectie.sod-getint, body.sod-thema-bloesem .sod-sectie.sod-accent { background: linear-gradient(120deg, #FBE0DE, #EBDDF6 55%, #DDF1E8); }
body.sod-thema-bloesem .sod-banner-tekst { font-family: var(--sod-kop-font); color: var(--sod-tekst); }
body.sod-thema-bloesem .sod-banner-bron { font-family: var(--sod-kop-font); font-style: italic; color: var(--sod-primair); }
body.sod-thema-bloesem hr.sod-scheiding { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(288 20 20)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23B07A9A'/%3E%3C/svg%3E") center / auto 22px no-repeat; height: 24px; }
body.sod-thema-bloesem hr.sod-scheiding.is-style-wide, body.sod-thema-bloesem hr.sod-lijn-scheiding {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(0 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(72 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(144 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(216 20 20)'/%3E%3Cellipse cx='20' cy='10' rx='5.5' ry='9' fill='%23F3C6C9' transform='rotate(288 20 20)'/%3E%3Ccircle cx='20' cy='20' r='5' fill='%23B07A9A'/%3E%3C/svg%3E") center / auto 22px no-repeat, linear-gradient(to right, transparent, #E7C3D2 25%, #E7C3D2 75%, transparent) center / 100% 1px no-repeat;
}

/* Matglas voor alle kaarten en vlakken. */
body.sod-thema-bloesem .sod-snel,
body.sod-thema-bloesem .sod-kaarten .sod-kaart,
body.sod-thema-bloesem .sod-rsvp-kaart,
body.sod-thema-bloesem .sod-praktisch,
body.sod-thema-bloesem .sod-gast {
  background: rgba(255, 255, 255, .55); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .9); border-radius: 24px; box-shadow: 0 24px 60px -36px rgba(140, 90, 120, .55);
}
body.sod-thema-bloesem .sod-snel, body.sod-thema-bloesem .sod-praktisch { overflow: hidden; }
body.sod-thema-bloesem .sod-snel-tegel, body.sod-thema-bloesem .sod-pk-kaart { border-color: rgba(140, 90, 120, .14) !important; }
body.sod-thema-bloesem .sod-snel-naam { font-family: var(--sod-kop-font); font-style: italic; color: var(--sod-primair); }
body.sod-thema-bloesem .sod-rsvp-kaart { border-radius: 32px; }
body.sod-thema-bloesem #rsvp-code, body.sod-thema-bloesem .sod-veld input, body.sod-thema-bloesem .sod-veld select, body.sod-thema-bloesem .sod-veld textarea {
  background: rgba(255, 255, 255, .7); border: 1px solid var(--sod-lijn); border-radius: 14px; padding: 12px 14px;
}
body.sod-thema-bloesem .sod-keuze label { border-radius: 999px; background: rgba(255, 255, 255, .7); }

body.sod-thema-bloesem .sod-paar-kaart figure { border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; box-shadow: 0 30px 60px -36px rgba(140, 90, 120, .6); }
body.sod-thema-bloesem .sod-paar-kaart:nth-child(2) figure { border-radius: 44% 56% 46% 54% / 56% 44% 56% 44%; }
body.sod-thema-bloesem .sod-paar-kaart img { aspect-ratio: 1 / 1.1; }
body.sod-thema-bloesem .sod-paar-kaart h3 { font-size: 30px; }
body.sod-thema-bloesem .sod-tijdlijn::before { width: 3px; border-radius: 3px; background: linear-gradient(#F3C6C9, #C394B0, #BFE3D6); }
body.sod-thema-bloesem .sod-tl-item::before { border: 0; width: 16px; height: 16px; background: linear-gradient(135deg, #C394B0, #F3C6C9); box-shadow: 0 0 0 6px rgba(255, 255, 255, .8), 0 6px 16px rgba(140, 90, 120, .4); }
@media (min-width: 782px) {
  body.sod-thema-bloesem .sod-tl-item::before { right: -7px; }
  body.sod-thema-bloesem .sod-tl-item:nth-child(even)::before { left: -6px; }
}
body.sod-thema-bloesem .sod-tl-item .sod-tl-tijd { font-family: var(--sod-caps-font); color: var(--sod-primair); opacity: 1; letter-spacing: .14em; }
body.sod-thema-bloesem .sod-locatie-tekening img { mix-blend-mode: multiply; }
body.sod-thema-bloesem .sod-locatie-foto img { border-radius: 28px; box-shadow: 0 30px 60px -34px rgba(140, 90, 120, .6); }
body.sod-thema-bloesem .sod-galerij figure { border-radius: 24px; }
body.sod-thema-bloesem .sod-galerij figure:nth-child(3n+2) { transform: translateY(24px); }
body.sod-thema-bloesem .sod-notitie { border-radius: 999px; background: rgba(255, 255, 255, .6); border-color: #fff; }
body.sod-thema-bloesem .sod-pk-kaart h3::after { background: linear-gradient(90deg, #C394B0, #F3C6C9); height: 2px; }
body.sod-thema-bloesem .sod-spel-doek canvas { border-radius: 18px; }
body.sod-thema-bloesem .sod-footer { background: linear-gradient(120deg, rgba(251, 224, 222, .7), rgba(235, 221, 246, .7)); border-top-color: rgba(255, 255, 255, .9); margin-top: 0; }
body.sod-thema-bloesem .sod-footer .sod-namen { font-family: var(--sod-kop-font); font-style: italic; font-size: 32px; }

/* ==================== Ons verhaal als brief ====================
   De welkomstsectie (#onze-dag, of een sectie met .sod-brief) ligt als een
   brief tussen de rest: een vel papier, iets scheef, met een plakbandje en een
   postzegel. Aanhef en handtekening in handschrift. Alles blijft gewone tekst
   uit het portaal; de brief zelf komt uit de CSS. In elke stijl. */
.sod-trouwsite :is(#onze-dag, .sod-brief) {
  --brief-papier: #FFFCF5;
  position: relative; box-sizing: border-box;
  width: calc(100% - 32px); max-width: 680px; margin: 30px auto 70px;
  padding: clamp(40px, 6vw, 66px) clamp(26px, 6vw, 70px) clamp(32px, 5vw, 50px);
  text-align: left; color: var(--sod-tekst);
  background: linear-gradient(160deg, #fff 0%, var(--brief-papier) 55%, color-mix(in srgb, var(--brief-papier) 90%, #E9DCC4) 100%);
  border: 1px solid color-mix(in srgb, #8A7350 16%, transparent); border-radius: 2px;
  box-shadow: 0 1px 2px rgba(70, 52, 25, .08), 0 22px 44px -26px rgba(70, 52, 25, .45), 8px 9px 0 -2px color-mix(in srgb, var(--brief-papier) 82%, #D8C7A6);
  transform: rotate(-.7deg);
}
/* Plakbandje bovenaan */
.sod-trouwsite :is(#onze-dag, .sod-brief)::before {
  content: ""; position: absolute; top: -13px; left: 50%; width: 128px; height: 28px;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in srgb, var(--sod-accent) 62%, rgba(255, 255, 255, .5));
  box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}
/* Postzegel met een hartje in de hoek */
.sod-trouwsite :is(#onze-dag, .sod-brief)::after {
  content: ""; position: absolute; top: 20px; right: 22px; width: 54px; height: 64px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 20.2C6.6 15.9 1 12.1 1 7.2 1 3.8 3.6 1.4 6.7 1.4c2.1 0 4.1 1.1 5.3 2.9 1.2-1.8 3.2-2.9 5.3-2.9 3.1 0 5.7 2.4 5.7 5.8 0 4.9-5.6 8.7-11 13z' fill='%23D9867C'/%3E%3C/svg%3E") center / 26px no-repeat, color-mix(in srgb, var(--sod-accent) 22%, #fff);
  border: 4px solid #fff; outline: 2px dashed color-mix(in srgb, var(--sod-accent) 70%, #fff); outline-offset: -1px;
  box-shadow: 0 2px 6px rgba(70, 52, 25, .18); transform: rotate(7deg);
}
.sod-trouwsite :is(#onze-dag, .sod-brief) > * { max-width: none; margin-left: 0; margin-right: 0; text-align: left; }
.sod-trouwsite :is(#onze-dag, .sod-brief) h2 {
  font-family: var(--sod-script-font); font-weight: 400; font-style: normal; text-transform: none; letter-spacing: 0;
  font-size: clamp(38px, 5.4vw, 56px); line-height: 1.1; color: var(--sod-primair);
  text-shadow: none; background: none; padding-right: 74px; margin: 0 0 .45em;
}
.sod-trouwsite :is(#onze-dag, .sod-brief) h2::before,
.sod-trouwsite :is(#onze-dag, .sod-brief) h2::after { display: none; }
.sod-trouwsite :is(#onze-dag, .sod-brief) p { color: var(--sod-tekst); font-size: 17.5px; line-height: 1.8; }
.sod-trouwsite :is(#onze-dag, .sod-brief) p em { color: var(--sod-tekst-zacht); }
/* De handtekening */
.sod-trouwsite :is(#onze-dag, .sod-brief) .sod-subkop {
  margin-top: 22px; text-align: right; font-family: var(--sod-script-font); font-weight: 400;
  font-size: clamp(30px, 4vw, 40px); letter-spacing: 0; text-transform: none; color: var(--sod-primair);
}
@media (max-width: 600px) {
  .sod-trouwsite :is(#onze-dag, .sod-brief) { transform: none; margin-top: 20px; }
  .sod-trouwsite :is(#onze-dag, .sod-brief)::after { width: 44px; height: 52px; top: 16px; right: 16px; background-size: 20px, auto; }
  .sod-trouwsite :is(#onze-dag, .sod-brief) h2 { padding-right: 56px; }
}
/* Donkere stijl: de brief blijft papier, dus de inkt wordt donker. */
body.sod-thema-nacht :is(#onze-dag, .sod-brief) {
  --brief-papier: #F4ECDA; --sod-primair: #22314F; --sod-tekst: #2B2F3A; --sod-tekst-zacht: #4B5160; --sod-accent: #C9A463;
}
body.sod-thema-redactie :is(#onze-dag, .sod-brief) { --brief-papier: #FBF9F4; }
body.sod-thema-redactie :is(#onze-dag, .sod-brief) h2 { font-style: italic; }
body.sod-thema-groovy :is(#onze-dag, .sod-brief) { border: 2px solid var(--g-bruin); box-shadow: 7px 7px 0 var(--g-bruin); border-radius: 6px; }
body.sod-thema-bloesem :is(#onze-dag, .sod-brief) h2 { font-style: italic; }

/* ==================== Fases ==================== */
body.sod-in-fase-0 .sod-nav-links { display: none; }
body.sod-in-fase-2 .sod-rsvp-kaart,
body.sod-in-fase-3 .sod-rsvp-kaart,
body.sod-in-fase-4 .sod-rsvp-kaart {
  max-width: 520px; padding: clamp(22px, 3vw, 32px);
}
body.sod-in-fase-2 .sod-rsvp-kaart h2,
body.sod-in-fase-3 .sod-rsvp-kaart h2,
body.sod-in-fase-4 .sod-rsvp-kaart h2 { font-size: clamp(22px, 3vw, 28px); }
body.sod-in-fase-2 #rsvp-sectie,
body.sod-in-fase-3 #rsvp-sectie,
body.sod-in-fase-4 #rsvp-sectie { padding-top: 34px; padding-bottom: 34px; }

/* ==================== Editor ==================== */
.editor-styles-wrapper .sod-sectie { padding: 40px 12px; }
.editor-styles-wrapper [class*="sod-fase-"] { position: relative; }
.editor-styles-wrapper .sod-fase-1::before { content: "Zichtbaar vanaf fase 1 (RSVP)"; }
.editor-styles-wrapper .sod-fase-2::before { content: "Zichtbaar vanaf fase 2 (Informatie)"; }
.editor-styles-wrapper .sod-fase-3::before { content: "Zichtbaar vanaf fase 3 (Bruiloft)"; }
.editor-styles-wrapper .sod-fase-4::before { content: "Zichtbaar vanaf fase 4 (After)"; }
.editor-styles-wrapper .sod-fase-1::before,
.editor-styles-wrapper .sod-fase-2::before,
.editor-styles-wrapper .sod-fase-3::before,
.editor-styles-wrapper .sod-fase-4::before {
  position: absolute; top: 4px; right: 8px; z-index: 5;
  background: #1e1e1e; color: #fff; font-family: system-ui, sans-serif;
  font-size: 11px; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; opacity: .75;
}

/* ============ Snelmenu onder de hero ============
   Bewust geen kaartjes met randjes: dat leest als een standaard blokkenraster.
   In plaats daarvan een rij zoals op een uitnodiging, met dunne haarlijnen
   ertussen en een streepje dat bij hover onder de naam vandaan komt. */
.sod-snel-sectie { padding-top: 30px; padding-bottom: 30px; }
.sod-snel {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 900px; margin: 0 auto;
  /* Rondom dicht, anders lopen de bovenste en onderste lijn aan weerszijden
     zomaar dood en oogt de rij open. Wit vlak, net als het paneel onderaan. */
  background: var(--sod-vlak);
  border: 1px solid var(--sod-lijn);
}
.sod-snel-tegel {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 26px 14px 24px; text-align: center; text-decoration: none;
  color: var(--sod-tekst); position: relative;
  border-left: 1px solid var(--sod-lijn);
  transition: background .2s ease;
}
.sod-snel-tegel:first-child { border-left: 0; }
.sod-snel-tegel:hover { background: color-mix(in srgb, var(--sod-primair) 4%, transparent); }

.sod-snel-icoon {
  line-height: 0; color: color-mix(in srgb, var(--sod-primair) 55%, transparent);
  transition: color .2s ease, transform .2s ease;
}
.sod-snel-icoon svg { display: block; width: 26px; height: 26px; }
.sod-snel-tegel:hover .sod-snel-icoon {
  color: var(--sod-primair); transform: translateY(-2px);
}

.sod-snel-naam {
  font-family: var(--sod-kop-font, inherit); font-size: 20px; line-height: 1.2;
  color: var(--sod-primair); position: relative; padding-bottom: 7px;
}
/* Het streepje groeit vanuit het midden, net als de lijntjes bij de koppen. */
.sod-snel-naam::after {
  content: ""; position: absolute; left: 50%; bottom: 0;
  width: 0; height: 1px; background: var(--sod-primair);
  transform: translateX(-50%); transition: width .25s ease;
}
.sod-snel-tegel:hover .sod-snel-naam::after { width: 28px; }

.sod-snel-uitleg {
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sod-tekst-zacht); line-height: 1.5; max-width: 15em;
}

@media (max-width: 760px) {
  .sod-snel { grid-template-columns: 1fr 1fr; }
  .sod-snel-tegel { padding: 20px 10px 18px; }
  .sod-snel-tegel:nth-child(odd) { border-left: 0; }
  .sod-snel-tegel:nth-child(n+3) { border-top: 1px solid var(--sod-lijn); }
  .sod-snel-naam { font-size: 17px; }
  .sod-snel-uitleg { font-size: 10.5px; letter-spacing: .08em; }
}

/* ============ Praktische gegevens ============
   Zelfde taal als het snelmenu: kolommen met haarlijnen in plaats van
   omkaderde blokjes, zodat de twee secties bij elkaar horen. */
.sod-praktisch {
  display: grid; grid-template-columns: repeat(4, 1fr);
  max-width: 1010px; margin: 36px auto 0; text-align: left;
  /* Wit paneel met een dun kader eromheen: het blok komt los van de
     paginakleur te staan zonder dat er een schaduw aan te pas komt. */
  background: var(--sod-vlak);
  border: 1px solid var(--sod-lijn);
}
.sod-pk-kaart {
  display: flex; flex-direction: column;
  padding: 34px 26px 32px; border-left: 1px solid var(--sod-lijn);
}
.sod-pk-kaart:first-child { border-left: 0; }

.sod-pk-icoon {
  display: block; line-height: 0; margin-bottom: 12px;
  color: color-mix(in srgb, var(--sod-primair) 55%, transparent);
}
.sod-pk-kaart h3 {
  margin: 0 0 14px; padding-bottom: 11px; position: relative;
  font-family: var(--sod-caps-font, inherit); font-weight: 400;
  font-size: 12.5px; text-transform: uppercase; letter-spacing: .16em;
  line-height: 1.5; color: var(--sod-primair);
}
/* Kort streepje onder de kop, zoals op drukwerk. */
.sod-pk-kaart h3::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 26px; height: 1px; background: var(--sod-accent);
}

.sod-pk-kaart p { margin: 0 0 7px; font-size: 14px; line-height: 1.6; }
.sod-pk-adres { color: var(--sod-tekst-zacht); }
.sod-pk-naam {
  font-family: var(--sod-kop-font, inherit); font-size: 21px !important;
  line-height: 1.25; color: var(--sod-primair); margin-bottom: 2px !important;
}
.sod-pk-rol {
  font-size: 11px !important; text-transform: uppercase; letter-spacing: .14em;
  color: var(--sod-tekst-zacht); margin-bottom: 13px !important;
}
.sod-pk-tekst { color: var(--sod-tekst-zacht); margin-bottom: 13px !important; }
.sod-pk-regel { display: flex; align-items: center; gap: 9px; }
.sod-pk-regel a { display: flex; align-items: center; gap: 9px; color: var(--sod-primair); text-decoration: none; }
.sod-pk-regel a:hover { text-decoration: underline; }
.sod-pk-icoon-klein {
  display: inline-flex; flex: none;
  color: color-mix(in srgb, var(--sod-primair) 55%, transparent);
}
/* line-height 0, anders zet de regelhoogte van de alinea nog witruimte onder
   de knop en zweeft hij boven de onderkant van de kolom. */
/* Specifieker dan ".sod-pk-kaart p", anders wint die van margin-top: auto en
   blijft de knop halverwege hangen. line-height 0 haalt de witruimte eronder weg. */
.sod-pk-kaart .sod-pk-knoprij {
  margin-top: auto; margin-bottom: 0; padding-top: 12px; line-height: 0;
}
.sod-knop-klein {
  display: inline-flex; align-items: center; justify-content: center;
  /* border-box, anders komt de padding bovenop min-height en wordt hij 60px. */
  box-sizing: border-box; min-height: 44px; padding: 8px 16px; font-size: 12px;
  letter-spacing: .08em; line-height: 1.35;
}

/* Het programma zit nog achter matglas: je ziet dat er iets is, niet wat. */
.sod-slot { position: relative; margin-top: 2px; min-height: 112px; }
.sod-slot-vaag {
  display: flex; flex-direction: column; gap: 11px;
  filter: blur(4.5px); opacity: .45; padding: 6px 0;
}
.sod-slot-vaag span {
  display: block; height: 8px; border-radius: 4px;
  background: color-mix(in srgb, var(--sod-primair) 40%, transparent);
}
.sod-slot-vaag span:nth-child(1) { width: 72%; }
.sod-slot-vaag span:nth-child(2) { width: 90%; }
.sod-slot-vaag span:nth-child(3) { width: 63%; }
.sod-slot-vaag span:nth-child(4) { width: 84%; }
.sod-slot-vaag span:nth-child(5) { width: 55%; }
.sod-slot-op {
  position: absolute; inset: 0; display: flex;
  flex-direction: column; align-items: center; justify-content: center; gap: 7px;
}
.sod-slot-icoon { display: block; line-height: 0; color: color-mix(in srgb, var(--sod-primair) 60%, transparent); }
.sod-slot-op p {
  margin: 0 !important; font-size: 11px !important; text-align: center;
  text-transform: uppercase; letter-spacing: .13em; color: var(--sod-primair);
}
.sod-pk-zacht { color: var(--sod-tekst-zacht); font-size: 13px !important; line-height: 1.5; }

/* Onder de 900px worden vier kolommen te smal: twee naast elkaar, daarna één. */
@media (max-width: 900px) {
  .sod-praktisch { grid-template-columns: 1fr 1fr; }
  .sod-pk-kaart:nth-child(odd) { border-left: 0; }
  .sod-pk-kaart:nth-child(n+3) { border-top: 1px solid var(--sod-lijn); }
}
@media (max-width: 560px) {
  .sod-praktisch { grid-template-columns: 1fr; }
  .sod-pk-kaart { border-left: 0; padding: 26px 22px; }
  .sod-pk-kaart + .sod-pk-kaart { border-top: 1px solid var(--sod-lijn); }
}

/* Twee gekleurde banden onder elkaar: WordPress zet er zijn blokafstand
   tussen (1,2rem), en daar schijnt de paginakleur als een streep doorheen.
   Sluit ze op elkaar aan; welke secties naast elkaar staan verschilt per fase,
   dus dit moet met de +-selector en niet met een vaste regel per sectie. */
.sod-trouwsite :is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent) + :is(.sod-licht, .sod-getint, .sod-zacht, .sod-accent) {
  margin-top: 0;
}

/* .sod-trouwsite a is specifieker dan .sod-knop, dus een knop die een link is
   kreeg de gewone linkkleur en viel weg tegen zijn eigen achtergrond. */
.sod-trouwsite a.sod-knop { color: var(--sod-knop-tekst); text-decoration: none; }
.sod-trouwsite a.sod-knop-licht { color: var(--sod-primair); }

/* Een e-mailadres dat het bruidspaar verplicht heeft gesteld. */
.sod-nodig {
  font-size: 10px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--sod-primair); opacity: .7; margin-left: 6px;
}
.sod-veld input.sod-email.is-nodig {
  border-bottom-color: #A63A3A;
  background: color-mix(in srgb, #A63A3A 6%, transparent);
}

/* ==================== Minigolf (spel 4) ====================
   Alles hieronder hangt onder .sod-golf-*, zodat de andere drie spellen en de
   gedeelde spelstijlen hierboven ongemoeid blijven. */
/* Tijdens het richten mag de pagina niet meeschuiven en mag er niets
   geselecteerd worden. Alleen op dit doek, niet op de rest van de site. */
.sod-golf-doek canvas {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent; cursor: pointer;
}
.sod-golf-doek { -webkit-user-select: none; user-select: none; }

/* Uitleg, tussenstand en scorekaart liggen als kaartje op de baan. */
.sod-golf-scherm {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; padding: 16px;
  background: color-mix(in srgb, var(--sod-bg) 82%, transparent);
  border-radius: 10px;
}
.sod-golf-scherm[hidden] { display: none; }
.sod-golf-kaart {
  /* De site rekent met content-box, dus zonder deze regel komen padding en
     rand bovenop de 100% en steekt de kaart onder het doek uit. */
  box-sizing: border-box;
  width: 100%; max-width: 268px; max-height: 100%;
  display: flex; flex-direction: column; min-height: 0;
  background: var(--sod-vlak); border: 1px solid var(--sod-lijn); border-radius: 12px;
  padding: 18px 16px; text-align: center;
  box-shadow: 0 10px 26px -14px rgba(0, 0, 0, .4);
}
/* De scorekaart van negen holes is langer dan het doek. Alleen de inhoud
   schuift dan; de knop blijft onderaan staan, anders scrolt niemand ernaartoe. */
.sod-golf-schuif { flex: 1 1 auto; overflow-y: auto; min-height: 0; }
.sod-golf-kop {
  margin: 0 0 6px; font-family: var(--sod-kop-font);
  font-size: 25px; line-height: 1.15; color: var(--sod-primair);
}
.sod-golf-regel { margin: 0 0 4px; font-size: 14px; color: var(--sod-tekst); }
.sod-golf-zacht { margin: 0 0 14px; font-size: 12.5px; color: var(--sod-tekst-zacht); line-height: 1.5; }
.sod-golf-kaart > .sod-knop { width: 100%; margin-top: 12px; flex: 0 0 auto; }

/* Scorekaart na de negende hole */
.sod-golf-tabel { width: 100%; border-collapse: collapse; margin: 2px 0 10px; font-size: 12.5px; }
.sod-golf-tabel th {
  font-family: var(--sod-body-font); font-weight: 500; font-size: 10px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--sod-tekst-zacht);
  padding-bottom: 5px; text-align: right;
}
.sod-golf-tabel th:first-child { text-align: left; }
.sod-golf-tabel td { padding: 2px 0; text-align: right; color: var(--sod-tekst); }
.sod-golf-tabel td:first-child { text-align: left; color: var(--sod-tekst-zacht); }
.sod-golf-tabel tfoot td {
  border-top: 1px solid var(--sod-lijn); padding-top: 7px;
  font-weight: 500; color: var(--sod-primair);
}
.sod-golf-onder { color: var(--sod-primair); }
.sod-golf-boven { color: #A67C52; }

.sod-golf-beste, .sod-race-beste {
  margin: 14px 0 0; text-align: center;
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--sod-tekst-zacht);
}
.sod-golf-beste[hidden], .sod-race-beste[hidden] { display: none; }

@media (max-width: 380px) {
  .sod-golf-kaart { padding: 16px 14px; }
  .sod-golf-kop { font-size: 22px; }
}

/* ==================== De trouwauto (spel 5) ====================
   Gas en remmen is tikken of vasthouden op een helft van het doek; de pagina mag dan
   niet meeschuiven en er mag niets geselecteerd raken. */
.sod-rit-doek canvas {
  touch-action: none; -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.sod-rit-doek { -webkit-user-select: none; user-select: none; }

/* Parcourskeuze van de trouwauto: drie knoppen, de gekozen is gevuld. */
.sod-rit-keuze { display: flex; gap: 8px; justify-content: center; margin: 0 0 16px; flex-wrap: wrap; }
.sod-rit-knop {
  all: unset; cursor: pointer; box-sizing: border-box;
  padding: 9px 18px; border: 1px solid var(--sod-lijn); border-radius: 999px; background: var(--sod-vlak);
  font-family: var(--sod-body-font); font-size: 11px; font-weight: 500; letter-spacing: .16em;
  text-transform: uppercase; color: var(--sod-tekst-zacht);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.sod-rit-knop:hover { border-color: var(--sod-primair); color: var(--sod-primair); }
.sod-rit-knop.is-actief { background: var(--sod-primair); border-color: var(--sod-primair); color: var(--sod-knop-tekst); }
.sod-rit-knop:focus-visible { outline: 2px solid var(--sod-primair); outline-offset: 2px; }

/* Spelkeuze op een telefoon: alle vijf de spellen naast elkaar in plaats van
   vier plus één eronder. Vijf gelijke kolommen, kleinere bollen, en de namen
   mogen over twee regels (HOOG / SPRINGEN). */
@media (max-width: 600px) {
  .sod-spel-keuze { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .sod-spel-tab {
    min-width: 0; justify-content: flex-start; gap: 7px; text-align: center;
    font-size: 8.5px; letter-spacing: .04em; line-height: 1.3;
  }
  .sod-spel-bol { width: min(58px, 100%); height: auto; aspect-ratio: 1 / 1; box-sizing: border-box; }
  .sod-spel-bol svg { width: 64%; height: 64%; }
}
@media (max-width: 350px) { .sod-spel-tab { font-size: 8px; letter-spacing: .02em; } }

/* Menu bovenin: de namen gecentreerd, met de links in een rij eronder. Met
   Spelletjes en Praktische info erbij past het niet meer naast de namen, en
   dan viel de laatste link met veel lucht een regel lager. Geldt voor elke
   stijl en elk scherm. */
.sod-nav { padding: 14px 20px 12px; }
.sod-nav-binnen { grid-template-columns: 1fr; gap: 6px; }
.sod-nav-titel, .sod-nav-links { grid-column: 1; justify-content: center; }
.sod-nav-links { column-gap: 28px; row-gap: 4px; line-height: 1.6; }
@media (max-width: 480px) { .sod-nav-links { column-gap: 18px; } }

/* Wat de gekoppelde trouwlocatie deelt (foto's, route en parkeren, plattegrond),
   onderaan het locatieblok. Gebruikt de gewone galerij, kaarten en knoppen, dus
   het neemt vanzelf de stijl van de site over. */
.sod-loc-deel { margin-top: 46px; text-align: left; }
.sod-loc-deel > * + * { margin-top: 26px; }
.sod-loc-fotos figure { aspect-ratio: 4 / 3; }
.sod-loc-fotos a { display: block; height: 100%; }
.sod-loc-deel .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* De slotzin onder de brief komt uit het portaal; leeg laten haalt hem weg. */
.sod-trouwsite p.sod-brief-slot { font-style: italic; }
.sod-trouwsite p.sod-brief-slot:empty { display: none; }
.sod-trouwsite :is(#onze-dag, .sod-brief) p.sod-brief-slot { color: var(--sod-tekst-zacht); }

/* Een eigen foto van het bruidspaar in de kop of bij de locatie: geen
   mengmodus zoals bij de tekening, wel afgeronde hoeken. */
.sod-trouwsite .sod-eigen-foto img { mix-blend-mode: normal !important; border-radius: var(--sod-radius); }