/* --- lokale fonts (AVG: geen Google-CDN) --- */
@font-face { font-family: Roboto; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/roboto-400.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/roboto-600.woff2') format('woff2'); }
@font-face { font-family: Roboto; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/roboto-700.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/opensans-400.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/opensans-600.woff2') format('woff2'); }
@font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('../fonts/opensans-700.woff2') format('woff2'); }

/* ==========================================================================
   State of the AIR — volgens BOUWOPDRACHT-homepage.md (Claude Design aug 2026)
   Eén breekpunt: 1024px. Onder 1024px = tablet én mobiel, zelfde layout.
   Tokens komen uit theme.json; hier alleen compositie en componenten.
   ========================================================================== */

body { text-wrap: pretty; }

/* WordPress zet op rootniveau de blokafstand (1.4rem) als margin-block-start
   tussen header, main en footer. Dat levert een streep witruimte op tussen de
   secties en boven de footer. Binnen de content blijft de blokafstand wel
   staan, want die verzorgt de ruimte tussen alinea's en koppen. */
.wp-site-blocks > * { margin-block-start: 0; }

/* Onze eigen componenten rekenen padding en rand mee in hun breedte en hoogte.
   Zonder dit lopen blokken met height:100% in een raster over hun rij heen,
   omdat de padding er dan bovenop komt. */
[class^="sota-"], [class*=" sota-"] { box-sizing: border-box; }

/* De contentwrapper van 1300px, zoals in het ontwerp. Bewust een eigen div in
   plaats van de constrained layout van WordPress: die centreert élk kind los
   met margin-inline:auto !important, waardoor een smallere kop of intro naar
   het midden schuift terwijl de kaarten eronder links beginnen. Binnen deze
   wrapper is alles gewoon links uitgelijnd. */
.sota-wrap { max-width: 1300px; margin-inline: auto; }
.sota-wrap > h2 { margin: 0 0 14px; }
.sota-wrap > p { margin: 0 0 44px; max-width: 66ch; }

/* --- sectieritme: alle zijpadding hier, zodat één breekpunt volstaat ---
   Boven en onder loopt de ruimte mee met de schermbreedte: 100px op desktop,
   rond de 80px op tablet en 60px op mobiel. Bewust met clamp() en niet met een
   extra media query, want dan zouden we een tweede breekpunt introduceren en
   dat is precies wat we niet wilden. Uitkomst: 390px → 60, 768px → 80,
   vanaf 1150px → 100. */
:root { --sota-ruimte: clamp(60px, calc(39px + 5.3vw), 100px); }
.sota-sectie { padding: var(--sota-ruimte) 70px; }
.sota-sectie--kort { padding: var(--sota-ruimte) 70px; }
.sota-sectie--open { padding: var(--sota-ruimte) 70px 0; }
.sota-sectie--lijnen { border-top: 1px solid var(--wp--preset--color--rand); border-bottom: 1px solid var(--wp--preset--color--rand); }
.sota-hero { padding: var(--sota-ruimte) 70px !important; }

/* --- topbalk en header ---
   Beide op 70px zijpadding, gelijk aan de secties. Met 20px liepen ze onder
   1440px uit de pas met de content eronder: de header begon dan op 20 en de
   tekst op 70. Nu vallen ze op elke breedte samen. */
.sota-topbalk, .sota-header { padding-left: 70px !important; padding-right: 70px !important; }
.sota-topbalk a { color: #fff; text-decoration: none; }
.sota-topbalk .sota-sterren { color: var(--wp--preset--color--ster); letter-spacing: 1px; }
/* Telefoon en mail met dezelfde lucide-icoontjes en kleur als in de footer. */
.sota-topbalk-contact { display: flex; align-items: center; gap: 22px; }
.sota-topbalk-contact a { display: inline-flex; align-items: center; gap: 7px; }
.sota-topbalk-contact a:hover { color: var(--wp--preset--color--accent); }
.sota-topbalk-contact svg { width: 15px; height: 15px; flex: none;
	stroke: var(--wp--preset--color--accent); fill: none; stroke-width: 1.9; }
.sota-header { border-bottom: 1px solid var(--wp--preset--color--lijn); }
/* De CTA zit als extra menu-item in het menu, alleen bedoeld voor het mobiele
   overlaymenu. Boven 1024px staat de knop al los in de header, dus daar weg. */
.sota-header .wp-block-navigation-item.sota-menu-cta { display: none; }

/* --- mobiel menu ---
   De eigen iconen van het navigatieblok zijn vervangen door lucide-symbolen,
   in dezelfde stijl als de rest van de site. Ze staan als data-URI in de CSS,
   want de knoppen worden door WordPress zelf gerenderd. */
.sota-header .wp-block-navigation__responsive-container-open svg,
.sota-header .wp-block-navigation__responsive-container-close svg { display: none; }
.sota-header .wp-block-navigation__responsive-container-open::before,
.sota-header .wp-block-navigation__responsive-container-close::before {
	content: ""; display: block; width: 26px; height: 26px;
	background-position: center; background-repeat: no-repeat; background-size: contain;
}
.sota-header .wp-block-navigation__responsive-container-open::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133585' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h16'/%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='M4 18h16'/%3E%3C/svg%3E");
}
.sota-header .wp-block-navigation__responsive-container-close::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23133585' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M18 6 6 18'/%3E%3Cpath d='m6 6 12 12'/%3E%3C/svg%3E");
}

/* Het overlaymenu: wit vlak in de huisstijl, met bovenin het label "Menu" links
   en het kruisje rechts. Items links uitgelijnd over de volle breedte, en de
   uitklappers in dezelfde opbouw als de kolom op desktop: ingesprongen, met een
   fijne scheidingslijn ertussen. */
.sota-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--wit) !important;
	padding: 0 !important;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative; padding: 0; margin-top: 0;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog::before {
	content: "Menu"; display: flex; align-items: center; height: 68px; padding: 0 20px;
	font: 600 14px/1 Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--gedempt);
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}
/* Knop over de volle hoogte van de balk, zodat het kruisje vanzelf op dezelfde
   hoogte staat als het label ernaast in plaats van op een geschatte afstand. */
.sota-header .wp-block-navigation__responsive-container-close {
	position: absolute; top: 0; right: 10px; height: 68px;
	display: flex; align-items: center; padding: 0 10px;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	width: 100%; box-sizing: border-box;
}
/* WordPress zet 56px padding boven de inhoud om ruimte te maken voor zijn eigen
   sluitknop. Wij hebben een eigen balk met dat kruisje erin, dus die ruimte is
   dubbelop en kan eruit. */
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close,
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	padding: 0 0 40px; gap: 0; align-items: stretch;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%; display: block;
	border-bottom: 1px solid var(--wp--preset--color--lijn);
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item:last-child { border-bottom: 0; }
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: flex; justify-content: flex-start; align-items: center; min-height: 56px;
	width: 100%; box-sizing: border-box; padding: 0 20px; text-align: left;
	color: var(--wp--preset--color--primair) !important;
	font: 600 18px/1.3 Roboto, sans-serif;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--zacht);
	color: var(--wp--preset--color--secundair) !important;
}
/* De uitklappers. Op mobiel staat het paneel niet zwevend maar gewoon in de
   lijst, dus rand en schaduw van desktop moeten hier weg; de onderliggende
   items springen in zodat de hiërarchie zichtbaar blijft. */
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0; box-shadow: none; padding: 0; background: transparent;
	min-width: 0; position: static;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item::before { content: none; }
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	padding: 0 20px 0 36px; min-height: 50px; font-size: 17px; font-weight: 500;
	color: var(--wp--preset--color--tekst) !important;
}
/* De CTA onderaan het menu: oranje knop, geen scheidingslijn. */
.sota-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.sota-menu-cta {
	display: block; border-bottom: 0; margin: 26px 20px 0; width: calc(100% - 40px);
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-menu-cta .wp-block-navigation-item__content {
	background: var(--wp--preset--color--secundair); border-radius: 3px;
	min-height: 54px; font-size: 17px; justify-content: center;
	color: #fff !important;
}
.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-menu-cta .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--secundair-donker); color: #fff !important;
}
.sota-header .wp-block-navigation a { color: var(--wp--preset--color--primair); font: 600 16px/1 Roboto, sans-serif; }
.sota-header .wp-block-navigation a:hover { color: var(--wp--preset--color--secundair); }
.sota-cta .wp-block-button__link { padding: 14px 20px; font-size: 16px; }

/* --- knoppen: drie niveaus --- */
.wp-block-button__link { padding: 17px 26px; border-radius: 3px; }
.is-style-outline .wp-block-button__link {
	background: #fff !important; border: 2px solid var(--wp--preset--color--primair) !important;
	color: var(--wp--preset--color--primair) !important; padding: 15px 24px;
}
.is-style-outline .wp-block-button__link:hover { background: var(--wp--preset--color--primair) !important; color: #fff !important; }
.sota-tekstlink {
	display: inline-block; font: 600 17px/1 Roboto, sans-serif; color: var(--wp--preset--color--primair); text-decoration: none;
	border-bottom: 2px solid var(--wp--preset--color--accent); padding-bottom: 3px;
}
.sota-tekstlink:hover { color: var(--wp--preset--color--secundair); border-color: var(--wp--preset--color--secundair); }
.sota-tekstlink--klein { font-size: 16px; }
/* knopvariant zonder core/button, voor gebruik binnen sota-*-markup */
.sota-knop { display: inline-flex; align-items: center; gap: 10px; background: var(--wp--preset--color--secundair);
	color: #fff !important; font: 600 17px/1 Roboto, sans-serif; padding: 17px 26px; border-radius: 3px;
	text-decoration: none; border: 0; cursor: pointer; box-sizing: border-box; }
.sota-knop:hover { background: var(--wp--preset--color--secundair-donker); }
.sota-knop--klein { font-size: 16px; padding: 15px 22px; }
.sota-knop svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2.2; }

/* --- eyebrow en labels --- */
.sota-eyebrow { font: 600 14px/1 Roboto, sans-serif; letter-spacing: .12em; text-transform: uppercase;
	color: var(--wp--preset--color--accent); margin-bottom: 18px; }
.sota-eyebrow--oranje { color: var(--wp--preset--color--secundair); }
.sota-label { font: 600 13px/1 Roboto, sans-serif; letter-spacing: .08em; text-transform: uppercase;
	color: var(--wp--preset--color--gedempt-2); margin-bottom: 22px; }

/* --- hero (§2.1) --- */
.sota-hero .wp-block-cover__background { background: linear-gradient(100deg, #133585 0%, rgba(19,53,133,.94) 42%, rgba(19,53,133,.62) 100%) !important; opacity: .78 !important; }
/* Marges exact volgens het ontwerp: eyebrow 18 onder, h1 22 onder, alinea 0,
   en 44px lucht tussen het tekstblok en de drie keuzekaarten. */
.sota-hero h1 { color: #fff; margin: 0 0 22px; max-width: 17ch; }
.sota-hero p { color: #F2F7FC; margin: 0; max-width: 88ch; }
.sota-hero .sota-eyebrow { margin: 0 0 18px; }
.sota-hero-tekst { max-width: 940px; padding-bottom: 44px; }
.sota-keuzeraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sota-hero .wp-block-columns { margin-top: 0; }
.sota-keuze { display: flex; align-items: center; gap: 18px; background: #fff;
	border: 1px solid var(--wp--preset--color--rand-kaart); border-radius: 4px;
	border-top: 6px solid var(--wp--preset--color--primair);
	padding: 26px 28px; text-decoration: none; height: 100%; transition: box-shadow .15s, border-color .15s; }
.sota-keuze--accent { border-top-color: var(--wp--preset--color--secundair); }
.sota-keuze--vlak { background: var(--wp--preset--color--accent); }
.sota-keuze:hover { box-shadow: 0 10px 26px rgba(19,53,133,.14); border-color: var(--wp--preset--color--accent); }
.sota-keuze--vlak:hover { background: #96D4EA; box-shadow: none; }
.sota-keuze strong { display: block; font: 600 20px/1.3 Roboto, sans-serif; color: var(--wp--preset--color--primair); }
.sota-keuze span { font: 400 16px/1.4 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt); }
.sota-keuze::after { content: "\203A"; margin-left: auto; font: 600 26px/1 Roboto, sans-serif; color: var(--wp--preset--color--secundair); }
.sota-keuze--vlak::after { color: var(--wp--preset--color--primair); }
.sota-keuze-tekst { display: flex; flex-direction: column; gap: 6px; flex: 1 1 auto; min-width: 0; }
.sota-hero .wp-block-columns { margin-top: 0; }

/* --- feitenbalk (§2.2) --- */
.sota-facts { padding: 24px 70px; border-bottom: 1px solid var(--wp--preset--color--lijn); }
.sota-facts-raster { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 1300px; margin: 0 auto; }
.sota-fact { display: flex; align-items: center; gap: 12px; }
.sota-fact svg { width: 22px; height: 22px; stroke: var(--wp--preset--color--icoon); fill: none; stroke-width: 1.75; flex: none; }
.sota-fact strong { font: 600 22px/1.2 Roboto, sans-serif; color: var(--wp--preset--color--primair); white-space: nowrap; }
.sota-fact span { font: 400 16px/1.4 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt); }

/* --- USP-blokjes (§2.3 en §2.10) --- */
.sota-usp-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.sota-usp { display: flex; align-items: center; gap: 16px; background: var(--wp--preset--color--zacht-blok);
	border: 1px solid var(--wp--preset--color--rand-blok); border-radius: 4px; padding: 24px 28px; height: 100%; }
.sota-usp p { margin: 0; font: 400 17px/1.6 'Open Sans', sans-serif; color: var(--wp--preset--color--tekst); }
.sota-usp strong { font-weight: 700; color: var(--wp--preset--color--primair); }
/* Centreren met flex, niet met line-height: een vinkje heeft zijn optische
   midden niet op de baseline, dus met line-height zakt het scheef in het rondje. */
.sota-usp::before { content: "\2713"; flex: none; width: 20px; height: 20px; border-radius: 50%;
	background: #DCEEF6; color: var(--wp--preset--color--primair); font: 600 11px/1 Roboto, sans-serif;
	display: flex; align-items: center; justify-content: center; }
.sota-usp--icoon::before { content: none; }
.sota-usp--icoon svg { width: 20px; height: 20px; stroke: var(--wp--preset--color--icoon); fill: none; stroke-width: 1.75; flex: none; }
.sota-usp--compact { padding: 18px 22px; gap: 12px; }

/* --- fotostrook (§2.3) --- */
/* Volle schermbreedte, met 10px lucht links, rechts, onder en tussen de foto's.
   Staat daarom in een eigen blok buiten de contentwrapper; zo zijn er geen
   negatieve marges nodig die per breekpunt bijgesteld moeten worden. */
.sota-fotostrook-blok { padding: 60px 10px 10px; }
.sota-fotostrook { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sota-fotostrook img { width: 100%; height: 240px !important; object-fit: cover; display: block; border-radius: 0; }

/* --- datakaarten (§2.4) --- */
.sota-data-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.sota-datakaart { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 4px;
	padding: 28px 30px; display: flex; flex-direction: column; gap: 14px; }
.sota-datakaart--open { border-color: var(--wp--preset--color--accent); }
.sota-datakaart-badges { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0; }
.sota-datakaart-datum { font: 600 21px/1.3 Roboto, sans-serif; color: var(--wp--preset--color--primair); }
.sota-datakaart-plaats { font: 400 17px/1.5 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt); margin-top: 4px; }
.sota-datakaart-extra { font: 400 16px/1.5 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt-2); margin-top: 2px; }
.sota-datakaart a { align-self: flex-start; margin-top: auto; }
.sota-data-acties { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 36px; }
.sota-badge { display: inline-block; font: 600 13px/1 Roboto, sans-serif; letter-spacing: .06em;
	text-transform: uppercase; padding: 7px 11px; border-radius: 3px; }
.sota-badge--module { background: var(--wp--preset--color--accent); color: var(--wp--preset--color--primair); }
.sota-badge--grijs  { background: #EEF1F5; color: var(--wp--preset--color--gedempt-2); }
.sota-badge--open   { background: var(--wp--preset--color--secundair); color: #fff; }
.sota-badge--vol    { background: #EEF1F5; color: var(--wp--preset--color--gedempt-2); }

/* --- agenda-lijst (op de datapagina's, compacte variant) --- */
.sota-kaart { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 4px; padding: 28px 30px; }
.sota-kaart--accent { border-top: 5px solid var(--wp--preset--color--secundair); }
.sota-kaart--blauw  { border-top: 5px solid var(--wp--preset--color--primair); }
.sota-agenda-kaart { display: flex; align-items: center; gap: 16px; background: #fff;
	border: 1px solid var(--wp--preset--color--rand); border-radius: 4px; padding: 22px 24px; margin-bottom: 14px; }
.sota-agenda-kaart--vol { opacity: .65; }
/* Het datumblokje blijft massief blauw, maar een stuk kleiner dan eerst: op
   62px trok het meer aandacht dan de cursusnaam ernaast, terwijl je eerst wilt
   zien wélke module en plaats het is. Wit op #133585 haalt 12,0:1. */
.sota-agenda-datum { flex: none; text-align: center; min-width: 46px;
	background: var(--wp--preset--color--primair); color: #fff; border-radius: 4px; padding: 6px 8px;
	font: 600 11px/1.3 Roboto, sans-serif; text-transform: uppercase; letter-spacing: .04em; }
.sota-agenda-datum strong { display: block; font-size: 18px; letter-spacing: 0; }
.sota-agenda-info { flex: 1; }
.sota-agenda-info h4 { margin: 0 0 3px; font: 600 17px/1.3 Roboto, sans-serif; color: var(--wp--preset--color--primair); }
.sota-agenda-info p { margin: 0; font: 400 15px/1.5 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt); }
.sota-agenda-knop { flex: none; background: var(--wp--preset--color--secundair); color: #fff !important;
	border-radius: 3px; padding: 15px 22px; font: 600 15px/1 Roboto, sans-serif; text-decoration: none; }
.sota-agenda-knop:hover { background: var(--wp--preset--color--secundair-donker); }
.sota-agenda-knop--vol { background: #9AA4B2; pointer-events: none; }

/* --- modulekaarten (§2.5) --- */
.sota-module-raster { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
/* Twee blokken met een scheidingslijn van rand tot rand ertussen. De 60px
   boven en onder die lijn houden hetzelfde ritme als voorheen. */
.sota-blok-voorwie { padding: var(--sota-ruimte) 70px 60px;
	border-bottom: 1px solid var(--wp--preset--color--lijn); }
.sota-blok-modules { padding: 60px 70px var(--sota-ruimte); }
.sota-kaart--module { border: 1px solid var(--wp--preset--color--rand); border-radius: 4px; background: #fff;
	padding: 36px 34px; display: flex; flex-direction: column; height: 100%; }
.sota-kaart--module h2 { font-size: 26px; line-height: 1.3; margin: 0 0 16px; }
.sota-kaart--module p { margin: 0 0 26px; max-width: 48ch; }
.sota-kaart--module .sota-knop, .sota-kaart--module .sota-knop-outline { margin-top: auto; align-self: flex-start; }
.sota-knop-outline { display: inline-block; background: #fff; border: 2px solid var(--wp--preset--color--primair);
	color: var(--wp--preset--color--primair) !important; font: 600 17px/1 Roboto, sans-serif;
	padding: 15px 24px; border-radius: 3px; text-decoration: none; box-sizing: border-box; }
.sota-knop-outline:hover { background: var(--wp--preset--color--primair); color: #fff !important; }

/* --- 1fr/2fr-raster: de rode draad (§2.5–2.11) --- */
.sota-raster { display: flex; gap: 64px; align-items: flex-start; max-width: 1300px; margin: 0 auto; }
.sota-raster--midden { align-items: center; }
.sota-raster > .sota-smal { flex: 0 0 380px; }
.sota-raster > .sota-breed { flex: 1 1 0; min-width: 0; }
.sota-raster > .sota-zij-460 { flex: 0 0 460px; }
.sota-raster > .sota-zij-520 { flex: 0 0 520px; }
/* Een <p> krijgt van de browser 1em bovenmarge. In een tweekolomsrij zakt de
   eerste tekstregel rechts daardoor zo'n 18px onder de kop links. De ruimte
   binnen deze rijen regelen we zelf, dus die standaardmarge gaat eruit. */
.sota-raster h2 { margin: 0 0 14px; }
.sota-raster > * > p:first-child { margin-top: 0; }
.sota-raster h2 + p { margin-top: 0; }
.sota-raster .sota-eyebrow { margin: 0 0 16px; }
/* Een knop na een alinea krijgt wat extra lucht; de standaardmarge van de
   alinea alleen (18px) laat hem tegen de tekst aan plakken. */
.sota-raster .sota-knop, .sota-raster .sota-knop-outline { margin-top: 16px; }

/* --- scorekaarten (§2.6) --- */
/* De twee kaarten vullen samen de hele kolom, even breed als de alinea eronder. */
.sota-scores { display: flex; gap: 20px; margin-bottom: 26px; }
.sota-score { flex: 1 1 0; background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 4px;
	padding: 22px 24px; }
.sota-score strong { display: block; font: 600 44px/1 Roboto, sans-serif; color: var(--wp--preset--color--primair); }
.sota-score .sota-sterren { display: flex; gap: 3px; margin-top: 10px; color: var(--wp--preset--color--ster); }
.sota-score .sota-sterren svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.sota-score span { display: block; font: 400 16px/1.4 'Open Sans', sans-serif; color: var(--wp--preset--color--gedempt); margin-top: 8px; }

/* --- zorggroepsectie (§2.7) --- */
/* Foto van een echte nascholing achter dezelfde overlay als de hero, zodat de
   twee fotosecties op de pagina identiek aanvoelen.
   min-height van core/cover uit, de inhoud bepaalt de hoogte. */
.sota-zorggroepvlak { padding: var(--sota-ruimte) 70px !important; min-height: 0 !important; }
.sota-zorggroepvlak .wp-block-cover__background {
	background: linear-gradient(100deg, #133585 0%, rgba(19,53,133,.94) 42%, rgba(19,53,133,.62) 100%) !important;
	opacity: .78 !important;
}
/* De overlay is gelijk aan de hero, maar deze foto is een binnenruimte met
   felle lampen: precies achter de tekst zat een lichtvlek waardoor het contrast
   naar 3,7:1 zakte. De hero heeft dat niet, want daar is de lucht op die plek
   donkerder. Vandaar dat niet de overlay maar de fóto hier wat wordt getemperd. */
.sota-zorggroepvlak .wp-block-cover__image-background { filter: brightness(.66); }
.sota-donker h2, .sota-donker h3 { color: #fff; }
.sota-donker p { color: #E4EEF7; }
.sota-logokaart { background: #fff; border-radius: 4px; padding: 32px; }
/* De witte logokaart staat ín de donkere sectie, dus de lichte tekstkleur
   hierboven zou het label vrijwel onzichtbaar maken op wit. */
.sota-donker .sota-logokaart p, .sota-donker .sota-logokaart .sota-label {
	color: var(--wp--preset--color--gedempt-2); }
.sota-logoraster { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 18px; align-items: center; }
.sota-logoraster img { width: 100%; height: 52px; object-fit: contain; display: block; }

/* --- locatiechips (§2.8) --- */
.sota-chips-kader { background: var(--wp--preset--color--zacht); border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px; padding: 28px 30px; margin: 26px 0; }
.sota-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.sota-chips li { font: 600 16px/1 Roboto, sans-serif; color: var(--wp--preset--color--primair);
	background: #fff; border: 1px solid var(--wp--preset--color--rand-kaart); border-radius: 20px; padding: 11px 16px; }
.sota-chips li.sota-chip--nieuw { background: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }

/* --- FAQ (§2.9) --- */
/* Twee selectors per regel: .sota-faq is de handgeschreven variant uit het
   homepage-pattern, .wp-block-details is het core-blok dat op de FAQ-pagina
   staat. Die zestien vragen waren semantisch al goed maar hadden nul opmaak.
   Bewust in dezelfde regels en niet als kopie, anders lopen ze uit elkaar. */
.sota-faq details,
.entry-content .wp-block-details { background: #fff; border: 1px solid var(--wp--preset--color--rand); border-radius: 4px; margin-bottom: 12px; }
.sota-faq summary,
.entry-content .wp-block-details > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px;
	padding: 22px 26px; cursor: pointer; font: 600 19px/1.4 Roboto, sans-serif; color: var(--wp--preset--color--primair);
	list-style: none; min-height: 44px; }
.sota-faq summary::-webkit-details-marker,
.entry-content .wp-block-details > summary::-webkit-details-marker { display: none; }
.sota-faq summary::after,
.entry-content .wp-block-details > summary::after { content: "+"; font: 400 24px/1 Roboto, sans-serif; color: var(--wp--preset--color--secundair); flex: none; }
.sota-faq details[open] summary::after,
.entry-content .wp-block-details[open] > summary::after { content: "\2013"; }
.sota-faq details > :not(summary),
.entry-content .wp-block-details > :not(summary) { margin: 0; padding: 0 26px 24px; max-width: 70ch;
	font: 400 17px/1.65 'Open Sans', sans-serif; color: var(--wp--preset--color--tekst); }
/* Eén doorlopende zin met de link erin, in hetzelfde lettertype en dezelfde
   grootte. Als los knopje ernaast liepen de basislijnen niet gelijk. */
.sota-faq-slot { font: 400 18px/1.5 'Open Sans', sans-serif; margin: 26px 0 0; }
.sota-faq-slot a { color: var(--wp--preset--color--primair); font-weight: 700;
	text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px;
	text-decoration-color: var(--wp--preset--color--accent); }
.sota-faq-slot a:hover { color: var(--wp--preset--color--secundair);
	text-decoration-color: var(--wp--preset--color--secundair); }

/* --- wie wij zijn (§2.10) --- */
/* height:auto is nodig omdat WordPress width- en height-attributen op de
   afbeelding zet; met twee vaste maten wordt aspect-ratio genegeerd. */
.sota-teamfoto img { width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover;
	border-radius: 4px; display: block; }
.sota-usp-stapel { display: grid; gap: 14px; margin: 26px 0; }

/* --- contactblok en formulier (§2.11) --- */
.sota-cta-sectie { background: var(--wp--preset--color--accent); }
.sota-cta-sectie h2 { color: var(--wp--preset--color--primair); }
.sota-cta-sectie p { color: #123056; }
/* Rondom 28px. De marge van het label staat expliciet op 0 boven: anders zet
   de browser er 1em bij en oogt de bovenkant ruimer dan de onderkant. */
.sota-contactblok { background: var(--wp--preset--color--primair); border-radius: 4px; padding: 28px; }
.sota-contactblok .sota-label { color: var(--wp--preset--color--accent); letter-spacing: .1em; margin: 0 0 20px; }
.sota-contactrij { display: flex; align-items: center; gap: 14px; padding: 18px 0;
	border-bottom: 1px solid rgba(255,255,255,.16); text-decoration: none; }
/* Alleen de rij direct onder het label verliest zijn bovenpadding. Niet met
   :first-of-type doen: dat telt per elementsoort, en omdat de adresrij een div
   is tussen twee a's, gold die óók als eerste en zakte de scheidingslijn
   erboven tegen de tekst aan. */
.sota-contactblok .sota-label + .sota-contactrij { padding-top: 0; }
.sota-contactrij:last-child { border-bottom: 0; padding-bottom: 0; }
.sota-contactrij:hover { opacity: .85; }
.sota-icoonvlak { flex: none; width: 38px; height: 38px; border-radius: 50%;
	background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; }
.sota-icoonvlak svg { width: 18px; height: 18px; stroke: var(--wp--preset--color--accent); fill: none; stroke-width: 1.9; }
.sota-contactrij em { display: block; font: 400 14px/1.3 'Open Sans', sans-serif;
	color: var(--wp--preset--color--accent); font-style: normal; margin-bottom: 2px; }
.sota-contactrij strong { display: block; font: 600 19px/1.3 Roboto, sans-serif; color: #fff; }
.sota-contactrij strong.klein { font: 600 17px/1.3 Roboto, sans-serif; }
.sota-contactrij strong.adres { font: 400 17px/1.4 'Open Sans', sans-serif; }
.sota-formkaart { background: #fff; border-radius: 4px; padding: 40px 42px; }
.sota-slotregel { display: flex; align-items: center; gap: 8px; font: 400 15px/1.4 'Open Sans', sans-serif;
	color: var(--wp--preset--color--gedempt-2); margin-top: 18px; }
.sota-slotregel svg { width: 15px; height: 15px; stroke: var(--wp--preset--color--icoon); fill: none; stroke-width: 2; flex: none; }

/* --- Gravity Forms in de huisstijl --- */
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"], .gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"], .gform_wrapper select, .gform_wrapper textarea {
	background: #F8FBFD; border: 1px solid var(--wp--preset--color--rand-kaart); border-radius: 3px;
	padding: 14px; font: 400 17px/1.4 'Open Sans', sans-serif; width: 100%; color: var(--wp--preset--color--tekst); }
.gform_wrapper textarea { line-height: 1.5; }
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus {
	outline: none; border-color: var(--wp--preset--color--primair); background: #fff; }
.gform_wrapper .gfield_label { font: 600 15px/1 Roboto, sans-serif; color: var(--wp--preset--color--primair); margin-bottom: 9px; }
.gform_wrapper .gfield_required { color: var(--wp--preset--color--secundair); }
.gform_wrapper .gform_button { background: var(--wp--preset--color--secundair); color: #fff; border: 0;
	border-radius: 3px; padding: 18px 28px; font: 600 17px/1 Roboto, sans-serif; cursor: pointer; }
.gform_wrapper .gform_button:hover { background: var(--wp--preset--color--secundair-donker); }
.gform_wrapper .gform_footer { margin: 0; padding: 0; }
.gform_confirmation_message { background: var(--wp--preset--color--zacht); border: 1px solid var(--wp--preset--color--rand);
	border-left: 4px solid var(--wp--preset--color--secundair); border-radius: 4px; padding: 18px 22px;
	font: 400 17px/1.6 'Open Sans', sans-serif; }
.sota-formkaart .gform_wrapper .gform_fields { gap: 20px; }

/* --- TablePress --- */
.tablepress { border: 1px solid var(--wp--preset--color--rand); }
.tablepress thead th { background: var(--wp--preset--color--primair); color: #fff; font: 600 15px/1.4 Roboto, sans-serif; }
.tablepress tbody tr:nth-child(even) td { background: var(--wp--preset--color--zacht); }
.tablepress td, .tablepress th { border: 1px solid var(--wp--preset--color--rand); padding: 10px 14px; }

/* --- paginakop: kruimelpad + H1 op elke pagina buiten de homepage ---
   Geen foto zoals de hero op de homepage: dat zou op elke pagina dezelfde
   afbeelding zijn en een extra verzoek kosten. Wel dezelfde diagonale verloop-
   richting (100deg), zodat de kop familie is van de hero en niet van een
   willekeurig gekleurd blok. De lichte gloed rechtsboven is puur decoratief. */
.sota-paginahero { min-height: 0 !important; padding: 62px 70px 66px !important; }
/* Exact dezelfde overlay als de hero op de homepage, zodat de twee familie
   zijn. Core geeft het cover-blok standaard min-height 430px mee; dat moet er
   hier af, want deze balk bevat alleen een kruimelpad en een H1. */
.sota-paginahero .wp-block-cover__background { background: linear-gradient(100deg, #133585 0%, rgba(19,53,133,.94) 42%, rgba(19,53,133,.62) 100%) !important; opacity: .78 !important; }
.sota-paginahero h1 { color: #fff; margin: 0; max-width: 900px; }

/* Kruimelpad. De linkkleur is bewust bijna wit: op de foto onder de overlay
   haalde het lichtblauw #C6D8EE maar 4,47:1 en dat is net onder de AA-norm van
   4,5 voor tekst van 14px. Met #E8F1FB is het 5,7:1, gemeten op de echte pixels.
   Het scheidingsteken zit in ::before zodat schermlezers het niet oplezen. */
.sota-kruimelpad { margin: 0 0 14px; }
.sota-kruimelpad ol { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
	list-style: none; margin: 0; padding: 0; }
.sota-kruimelpad li { display: flex; align-items: center; gap: 8px;
	font: 400 14px/1.5 'Open Sans', sans-serif; color: #E8F1FB; }
.sota-kruimelpad li + li::before { content: "\203A"; font: 600 16px/1 Roboto, sans-serif;
	color: rgba(255,255,255,.55); }
.sota-kruimelpad a { color: #E8F1FB; text-decoration: none;
	border-bottom: 1px solid rgba(232,241,251,.4); }
.sota-kruimelpad a:hover { color: #fff; border-bottom-color: #fff; }
.sota-kruimelpad [aria-current] { color: #fff; }

/* ==========================================================================
   CONTENTKOLOM: opmaak voor wat er al in de pagina's staat
   Deze regels raken geen enkele letter content. Ze bestaan omdat er klassen
   in post_content staan waar nooit CSS bij is gemaakt, waardoor die stukken
   terugvielen op de kale browserstandaard. Zie memory.md, opknapronde 21-08.
   ========================================================================== */

/* .sota-vinklijst staat op zes pagina's in de content en had nul regels CSS,
   dus die lijsten toonden grijze bolletjes. Zelfde vinkje als .sota-usp, maar
   als lijst in plaats van als kaart: rustiger in een lopende tekstkolom. */
.entry-content .sota-vinklijst { list-style: none; padding-left: 0; margin: 24px 0; }
.entry-content .sota-vinklijst li { position: relative; padding-left: 32px; margin-bottom: 12px;
	font: 400 17px/1.6 'Open Sans', sans-serif; }
.entry-content .sota-vinklijst li:last-child { margin-bottom: 0; }
.entry-content .sota-vinklijst li::before { content: "\2713"; position: absolute; left: 0; top: 3px;
	width: 20px; height: 20px; border-radius: 50%; background: #DCEEF6;
	color: var(--wp--preset--color--primair); font: 600 11px/1 Roboto, sans-serif;
	display: flex; align-items: center; justify-content: center; }
.entry-content .sota-vinklijst strong { color: var(--wp--preset--color--primair); }

/* Een core/table kreeg niets mee; alleen .tablepress was opgemaakt. De
   tarieventabel is een core/table en is het belangrijkste element van die
   pagina, dus die krijgt hier dezelfde behandeling. */
.entry-content .wp-block-table table { border: 1px solid var(--wp--preset--color--rand);
	border-collapse: collapse; width: 100%; }
.entry-content .wp-block-table thead th { background: var(--wp--preset--color--primair); color: #fff;
	font: 600 15px/1.4 Roboto, sans-serif; text-align: left; }
.entry-content .wp-block-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--zacht); }
.entry-content .wp-block-table td, .entry-content .wp-block-table th {
	border: 1px solid var(--wp--preset--color--rand); padding: 10px 14px; }
/* Een brede tabel mag zelf schuiven, de pagina niet. */
.entry-content .wp-block-table { overflow-x: auto; }

/* Ritme tussen secties. In de tekstkolom bestond geen enkele scheiding: geen
   lijn, geen kleurwissel, geen extra ruimte, waardoor drie secties achter
   elkaar als één muur lazen. Niet op de eerste H2, anders leunt hij tegen de
   paginakop aan. */
.entry-content h2 { margin-top: 52px; padding-top: 30px; border-top: 1px solid var(--wp--preset--color--lijn); }
.entry-content > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Downloadlijst. Eén regel per document met een klein bestandsicoon links en
   het bestandstype rechts, zodat je vóór het klikken ziet wat je krijgt. Het
   icoon staat als data-URI in de CSS omdat bv_sota_icoon() PHP is en dus niet
   werkt in post_content. */
.entry-content .sota-downloadlijst { list-style: none; margin: 26px 0; padding: 0; }
.entry-content .sota-downloadlijst li { display: flex; align-items: center; gap: 12px;
	border-bottom: 1px solid var(--wp--preset--color--lijn); }
.entry-content .sota-downloadlijst li:first-child { border-top: 1px solid var(--wp--preset--color--lijn); }
.entry-content .sota-downloadlijst a { flex: 1 1 auto; display: flex; align-items: center; gap: 14px;
	min-height: 44px; padding: 15px 2px; text-decoration: none;
	font: 600 17px/1.45 Roboto, sans-serif; color: var(--wp--preset--color--primair); }
.entry-content .sota-downloadlijst a::before { content: ""; flex: none; width: 20px; height: 20px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237FA6C9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z'/%3E%3Cpath d='M14 2v4a2 2 0 0 0 2 2h4'/%3E%3Cpath d='M16 13H8'/%3E%3Cpath d='M16 17H8'/%3E%3C/svg%3E") center/contain no-repeat; }
.entry-content .sota-downloadlijst a:hover { color: var(--wp--preset--color--secundair); }
.entry-content .sota-downloadlijst span { flex: none; font: 600 12px/1 Roboto, sans-serif;
	letter-spacing: .06em; text-transform: uppercase; color: var(--wp--preset--color--gedempt-2);
	background: var(--wp--preset--color--zacht); border: 1px solid var(--wp--preset--color--rand-kaart);
	border-radius: 3px; padding: 6px 8px; }

/* Stappenreeks. Voor een opsomming die een volgorde in de tijd is, zoals de vijf
   modules van de basiscursus: eerst de e-learning, dan de bijeenkomst, dan de
   stage. Een vinkje zou daar het verkeerde beloven (afvinken kan pas achteraf);
   een genummerd rondje met een lijn ertussen laat zien dat het een traject is.
   De vetgezette openingszin wordt de stapkop, de rest blijft lopende tekst. */
.entry-content .sota-stappen { list-style: none; margin: 26px 0; padding: 0; counter-reset: stap; }
.entry-content .sota-stappen li { position: relative; counter-increment: stap; padding: 0 0 24px 52px;
	font: 400 17px/1.6 'Open Sans', sans-serif; }
.entry-content .sota-stappen li::before { content: counter(stap); position: absolute; left: 0; top: 0;
	width: 32px; height: 32px; border-radius: 50%; background: var(--wp--preset--color--primair);
	color: #fff; font: 600 15px/1 Roboto, sans-serif;
	display: flex; align-items: center; justify-content: center; }
/* De verbindingslijn loopt van rondje tot rondje, niet voorbij de laatste. */
.entry-content .sota-stappen li::after { content: ""; position: absolute; left: 15px; top: 38px; bottom: 2px;
	width: 2px; background: var(--wp--preset--color--rand-kaart); }
.entry-content .sota-stappen li:last-child { padding-bottom: 0; }
.entry-content .sota-stappen li:last-child::after { content: none; }
.entry-content .sota-stappen strong { display: block; margin-bottom: 3px;
	font: 700 17px/1.4 Roboto, sans-serif; color: var(--wp--preset--color--primair); }

/* .sota-eyebrow is lichtblauw en bedoeld voor een donkere ondergrond. Op de
   zorggroeppagina staat hij op een wítte kaart met de modifier --licht, en die
   modifier bestond niet: het kopje "Zorggroepen die met ons werken" was daar
   dus vrijwel onzichtbaar (accent op wit haalt 1,7:1). Hier krijgt hij de
   gedempte labelkleur, wat op wit 7,3:1 is. */
.sota-eyebrow--licht { color: var(--wp--preset--color--gedempt-2); }

/* Logo's van zorggroepen in een core/gallery. Zonder deze regels bepaalt elk
   logobestand zijn eigen hoogte en staan ze als een rommelige rij door elkaar.
   Zelfde behandeling als .sota-logoraster op de homepage: gelijke hoogte,
   contain, dus geen enkel logo wordt vervormd of uitgerekt. */
.entry-content .sota-kaart .wp-block-gallery.has-nested-images {
	display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 20px; align-items: center; }
/* !important is hier nodig, geen luiheid: core schrijft zijn gallery-regels als
   figure.wp-block-image:not(#individual-image), en dat :not() met een id-selector
   telt mee als id-specificiteit. Daar komt geen klassenselector overheen. Zonder
   deze regels dwingt core object-fit:cover af (het blok staat op is-cropped) en
   dan worden de logo's bijgesneden in plaats van passend geschaald. */
.entry-content .sota-kaart .wp-block-gallery.has-nested-images figure.wp-block-image {
	width: 100% !important; margin: 0 !important; flex: none !important; }
/* flex:none op de afbeelding is de crux. De figure is bij core een kolom-flexbox
   en de img krijgt flex:1 0 0%; dan komt de hoogte uit de flexberekening en doet
   height niets, ook niet met !important. */
.entry-content .sota-kaart .wp-block-gallery.has-nested-images figure.wp-block-image img {
	width: 100% !important; height: 46px !important; flex: none !important;
	object-fit: contain !important; display: block; }

/* Doorverwijzing naar een andere pagina: tekstlink, geen knop. Staan er twee of
   meer onder elkaar, dan schuiven ze dicht tegen elkaar aan zodat ze als één
   rijtje lezen in plaats van als losse zwevende regels. */
.entry-content .sota-verwijzing { margin: 24px 0; }
.entry-content .sota-verwijzing + .sota-verwijzing { margin-top: 10px; }

/* Attentieblok voor een zin die zichzelf als waarschuwing aankondigt (een
   deadline, een sanctie, extra kosten). Bestond nog niet. */
.entry-content .sota-attentie { position: relative; background: #FEF4F0;
	border: 1px solid #F6D2C4; border-left: 4px solid var(--wp--preset--color--secundair);
	border-radius: 4px; padding: 20px 24px; margin: 26px 0; }
.entry-content .sota-attentie > :first-child { margin-top: 0; }
.entry-content .sota-attentie > :last-child { margin-bottom: 0; }
.entry-content .sota-attentie strong { color: var(--wp--preset--color--secundair-donker); }

/* Vangnet. Op de Elementor-pagina's staan FontAwesome-iconen als inline SVG
   zonder breedte of hoogte. Zonder Elementor-CSS rekt zo'n SVG op tot de volle
   kolom: gemeten op 719 bij 958 pixels per icoon op /longfunctie-en-documenten/,
   vijf stuks, waardoor die pagina 5551px hoog werd. Dit is een pleister tot die
   pagina's omgezet zijn, geen eindoplossing. */
.entry-content svg:not([width]):not([viewBox]),
.entry-content .e-font-icon-svg { width: 20px; height: 20px; flex: none;
	fill: var(--wp--preset--color--icoon); vertical-align: -3px; }
/* Elementor-vormdividers (die golfjes onderaan een sectie) zijn puur decoratief
   en werken alleen mét Elementor-CSS. Zonder de plugin worden het lege vlakken
   van 759x74. Verbergen dus, er gaat geen inhoud verloren. */
.entry-content .elementor-shape { display: none; }

/* --- landingspagina's, cursusrondes en zoekpagina --- */
.sota-paginabody { padding: 56px 70px 70px; }
.sota-paginabody > .wp-block-columns { max-width: 1300px; margin-inline: auto; }
.sota-zoekresultaat { margin-bottom: 16px; }
.sota-zoekresultaat h2 { font-size: 21px; margin: 0 0 6px; }
.sota-zoekresultaat p { margin: 0; font-size: 17px; color: var(--wp--preset--color--gedempt); }
.sota-zoekformulier { margin-bottom: 34px; }
.sota-zoekformulier .wp-block-search__input { background: #F8FBFD; border: 1px solid var(--wp--preset--color--rand-kaart);
	border-radius: 3px; padding: 14px; font: 400 17px/1.4 'Open Sans', sans-serif; }
.sota-zoekformulier .wp-block-search__button { background: var(--wp--preset--color--secundair); color: #fff; border: 0;
	border-radius: 3px; padding: 14px 24px; font: 600 17px/1 Roboto, sans-serif; }
.wp-block-query-pagination { margin-top: 30px; }

/* --- zijbalk en footer --- */
.sota-zijbalk .sota-zijbalk-kaart { margin-bottom: 24px; border: 1px solid var(--wp--preset--color--rand); border-radius: 4px; }
/* Eén ritme voor alle zijbalkkaarten: de kop krijgt overal dezelfde lucht
   eronder, en een knop onderin staat los van de tekst erboven. */
.sota-zijbalk-kaart h3 { margin: 0 0 18px; }
.sota-zijbalk-kaart .wp-block-buttons { margin-top: 24px; }
/* Pijltjes komen uit de CSS in plaats van als teken in de tekst: zo staan ze
   netjes buiten de link (dus geen onderstreept pijltje), krijgen ze de oranje
   accentkleur van de rest van de site, en leest een schermlezer ze niet op. */
.sota-zijbalk .sota-footerlijst li { position: relative; padding-left: 17px; }
.sota-zijbalk .sota-footerlijst li::before { content: "\203A"; position: absolute; left: 0; top: 0;
	font: 600 17px/1.5 Roboto, sans-serif; color: var(--wp--preset--color--secundair); }
.sota-zijbalk .sota-footerlijst a { color: var(--wp--preset--color--primair); text-decoration: none;
	border-bottom: 1px solid var(--wp--preset--color--rand-kaart); }
.sota-zijbalk .sota-footerlijst a:hover { color: var(--wp--preset--color--secundair);
	border-bottom-color: var(--wp--preset--color--secundair); }
.sota-zijbalk-contact a { color: var(--wp--preset--color--accent); font-weight: 600; }
/* --- logostrook boven de footer --- */
.sota-logostrook { padding: 44px 70px; border-top: 1px solid var(--wp--preset--color--lijn); }
.sota-logorij { display: grid; grid-template-columns: repeat(6, 1fr); gap: 30px; align-items: center; }
.sota-logorij img { width: 100%; height: 58px; object-fit: contain; display: block; }

/* --- footer --- */
.sota-footer { padding: 64px 70px 0; }
/* Ruime kolomafstand. De linktekst gaat naar 15px zodat de kolommen ondanks de
   grotere tussenruimte breed genoeg blijven om op één regel te passen. */
.sota-footerraster { display: grid; grid-template-columns: 1.25fr 1fr 1fr 1fr 1fr;
	column-gap: 52px; row-gap: 40px; }
.sota-footer h3 { color: #fff; font: 700 17px/1.3 Roboto, sans-serif; letter-spacing: 0; margin: 0 0 18px; }
/* Boven 1024px is de accordeon niet zichtbaar: geen driehoekje, geen klikgedrag. */
.sota-footerblok > summary { list-style: none; cursor: default; }
.sota-footerblok > summary::-webkit-details-marker { display: none; }
.sota-footerblok > summary::after { content: none; }
.sota-footer p { font: 400 16px/1.7 'Open Sans', sans-serif; color: #D8E5F3; margin: 0 0 14px; }
.sota-footer p:last-child { margin-bottom: 0; }
.sota-footer strong { color: #fff; font-weight: 700; }
.sota-footer a { color: #D8E5F3; text-decoration: none; }
.sota-footer a:hover { color: var(--wp--preset--color--accent); text-decoration: underline; }
.sota-footerlijst { list-style: none; padding-left: 0; margin: 0; }
.sota-footerlijst li { margin-bottom: 12px; font: 400 15px/1.5 'Open Sans', sans-serif; }
.sota-footerlijst li:last-child { margin-bottom: 0; }
.sota-footer-cta { display: inline-block; font: 600 16px/1 Roboto, sans-serif; color: #fff !important;
	border-bottom: 2px solid var(--wp--preset--color--accent); padding-bottom: 3px; }
.sota-footer-cta:hover { border-color: var(--wp--preset--color--secundair); text-decoration: none !important; }
.sota-footer-contact a { color: var(--wp--preset--color--accent); }
/* Adres, telefoon en mail met een lucide-icoon ervoor. De template part is
   HTML en kan bv_sota_icoon() niet aanroepen, dus de SVG's staan hier voluit. */
.sota-footerrij { display: flex; align-items: flex-start; gap: 12px; }
.sota-footerrij svg { width: 18px; height: 18px; flex: none; margin-top: 4px;
	stroke: var(--wp--preset--color--accent); fill: none; stroke-width: 1.9; }

.sota-footerbalk { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px 26px;
	margin-top: 48px; padding: 20px 0; border-top: 1px solid rgba(255,255,255,.16); }
.sota-footerbalk p { font-size: 15px; margin: 0; }
.sota-footerbalk-links { display: flex; flex-wrap: wrap; gap: 26px; list-style: none; margin: 0; padding: 0;
	font: 400 15px/1.4 'Open Sans', sans-serif; }
.sota-footerbalk strong { font-weight: 700; }
.sota-credit strong { color: #fff; }
.sota-credit:hover strong { color: var(--wp--preset--color--accent); }

/* --- focus (a11y) --- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primair); outline-offset: 2px; }

/* ==========================================================================
   HET ENE BREEKPUNT: onder 1024px = tablet én mobiel, zelfde layout
   ========================================================================== */
@media (max-width: 1023px) {
	h1 { font-size: 30px !important; line-height: 1.2 !important; }
	h2 { font-size: 24px !important; }
	h3, .sota-kaart--module h2 { font-size: 21px !important; }

	/* alleen de zijkanten smaller; boven en onder regelt --sota-ruimte al */
	.sota-sectie, .sota-sectie--kort { padding: var(--sota-ruimte) 20px; }
	.sota-sectie--open { padding: var(--sota-ruimte) 20px 0; }
	.sota-facts { padding: 24px 20px; }
	.sota-hero { padding: var(--sota-ruimte) 20px !important; }
	/* De zorggroepsectie is een cover-blok en heeft daarom !important nodig,
	   anders wint de eigen padding van core. Zonder deze regel bleef hij op
	   mobiel op 70px staan terwijl de rest op 20px zit. */
	.sota-zorggroepvlak { padding: var(--sota-ruimte) 20px !important; }
	.sota-topbalk, .sota-header { padding-left: 20px !important; padding-right: 20px !important; }
	/* !important omdat dit een cover-blok is, net als .sota-zorggroepvlak */
	.sota-paginahero { padding: 38px 20px 42px !important; }
	.sota-kruimelpad { margin-bottom: 10px; }
	.sota-kruimelpad li { font-size: 13px; }
	/* Bij drie of meer stappen valt de laatste weg: die herhaalt woordelijk de
	   H1 die er direct onder staat en kostte op een smal scherm een hele regel.
	   Bij twee stappen blijft hij staan, anders houd je alleen "Home" over. */
	.sota-kruimelpad li:last-child:nth-child(n+3) { display: none; }
	.sota-paginabody { padding: 36px 20px 40px; }

	.wp-block-columns { flex-wrap: wrap !important; }
	.wp-block-column { flex-basis: 100% !important; }
	.sota-raster { display: block; }
	.sota-raster > .sota-smal, .sota-raster > .sota-breed,
	.sota-raster > .sota-zij-460, .sota-raster > .sota-zij-520 { flex: none; width: 100%; }
	.sota-raster > * + * { margin-top: 30px; }

	.sota-facts-raster { grid-template-columns: repeat(2, 1fr); gap: 18px 14px; }
	.sota-usp-raster, .sota-data-raster, .sota-module-raster { grid-template-columns: 1fr; }

	/* Het vinkje voor de tekst in plaats van in een eigen kolom, en minder
	   padding. Dat geeft de tekst zo'n 60px extra breedte per regel, waardoor
	   de meeste blokken een regel korter worden zonder dat er iets verdwijnt. */
	.sota-usp { display: block; padding: 16px 18px; }
	.sota-usp::before { content: none; }
	.sota-usp p { font-size: 16px; line-height: 1.55; }
	.sota-usp p::before {
		content: "\2713"; display: inline-flex; align-items: center; justify-content: center;
		width: 18px; height: 18px; border-radius: 50%; background: #DCEEF6;
		color: var(--wp--preset--color--primair); font: 600 10px/1 Roboto, sans-serif;
		margin-right: 8px; vertical-align: 1px;
	}
	.sota-usp--icoon p::before { content: none; }
	.sota-usp--icoon { display: flex; }
	.sota-module-raster { gap: 18px; }
	/* Eén kaartpadding op een telefoon voor alle kaartsoorten: 20px aan de
	   zijkanten. Dat scheelt tekstbreedte, wat de knoplabels op één regel houdt
	   en de adressen in de datakaarten minder laat afbreken. */
	.sota-kaart--module { padding: 24px 20px; }
	.sota-datakaart { padding: 22px 20px; }
	.sota-chips-kader, .sota-logokaart, .sota-formkaart, .sota-score { padding: 22px 20px; }
	.sota-faq summary,
	.entry-content .wp-block-details > summary { padding: 18px 20px; font-size: 17px; }
	.sota-faq details > :not(summary),
	.entry-content .wp-block-details > :not(summary) { padding: 0 20px 20px; }
	.sota-contactblok { padding: 22px 20px; }
	.sota-usp--compact { padding: 14px 16px; }
	.sota-keuze { padding: 20px; }
	.sota-blok-voorwie { padding: var(--sota-ruimte) 20px 30px; }
	.sota-blok-modules { padding: 30px 20px var(--sota-ruimte); }
	.sota-scores { flex-wrap: wrap; }

	.sota-fotostrook-blok { padding: 30px 10px 10px; }
	.sota-fotostrook { grid-template-columns: repeat(2, 1fr); }
	/* Vierkant in plaats van een vaste hoogte: de desktopregel staat op
	   !important, dus die moet hier expliciet worden teruggezet. */
	.sota-fotostrook img { height: auto !important; aspect-ratio: 1 / 1; }

	/* Twee kolommen: icoon links, daarnaast het getal met het label eronder.
	   Met flex-wrap belandde het label onder het ícoon in plaats van onder het
	   getal, en dat oogde rommelig. Het label kan nu ook gewoon afbreken, wat
	   nodig is om op 320px binnen beeld te blijven. */
	.sota-fact { display: grid; grid-template-columns: auto 1fr; column-gap: 10px; row-gap: 2px;
		align-items: center; }
	.sota-fact svg { grid-column: 1; grid-row: 1; }
	.sota-fact strong { grid-column: 2; grid-row: 1; font-size: 19px; }
	.sota-fact span { grid-column: 2; grid-row: 2; font-size: 14px; min-width: 0; }

	/* De navigatie van WordPress klapt standaard pas onder 600px in. Dat is een
	   tweede breekpunt dat we niet willen, dus we trekken het hamburgermenu
	   door tot 1024px. */
	.sota-header .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.sota-header .wp-block-navigation__responsive-container.is-menu-open { display: flex; }
	.sota-header .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }

	/* Header op één regel: logo links, hamburger rechts. Zonder nowrap duwt het
	   logo de rest naar een tweede regel en wordt de balk twee keer zo hoog. */
	.sota-header > .wp-block-group { flex-wrap: nowrap; gap: 16px; }
	.sota-header .wp-block-site-logo { flex: 0 0 auto; }
	.sota-header .wp-block-site-logo img { width: 132px; height: auto; }
	.sota-header > .wp-block-group > .wp-block-group { flex: 0 0 auto; margin-left: auto; }
	/* De knop verdwijnt op mobiel; "Voor zorggroepen" staat gewoon in het menu.
	   De hele wp-block-buttons-wikkel moet weg, niet alleen de knop erin: die
	   lege wikkel blijft anders een flex-item en duwt de hamburger 22px naar
	   binnen, waardoor hij niet meer uitlijnt met het logo. */
	.sota-header .wp-block-buttons { display: none; }

	/* Topbalk op mobiel: alleen de beoordeling, gecentreerd. Telefoon en mail
	   staan al in het menu en in de contactsectie, dus die kunnen hier weg. */
	.sota-topbalk .has-klein-font-size { font-size: 13px; white-space: nowrap; }
	.sota-topbalk-contact { display: none; }
	.sota-topbalk > .wp-block-group { flex-wrap: nowrap; justify-content: center; }
	.sota-score strong { font-size: 34px; }

	.wp-block-button, .wp-block-button__link { display: block; width: 100%; text-align: center; }
	/* Kleinere tekst en minder zijpadding, zodat de knoplabels op één regel
	   passen. "Bekijk de opzet, data en tarieven van de basiscursus" is met 51
	   tekens te lang om te passen; die breekt bewust wel af. */
	.sota-knop, .sota-knop-outline { display: flex; justify-content: center; width: 100%;
		text-align: center; font-size: 15px; padding-left: 16px; padding-right: 16px; }
	.sota-data-acties { gap: 18px; }
	.sota-agenda-kaart { flex-wrap: wrap; }
	.sota-agenda-knop { display: block; width: 100%; text-align: center; }
	.sota-keuzeraster { grid-template-columns: 1fr; gap: 12px; }
	.sota-formkaart { padding: 24px 20px; }
	.sota-zijbalk { margin-top: 30px; }
	.sota-teamfoto img { aspect-ratio: 4 / 3; }

	/* Verticaal verloop in plaats van het schuine van desktop, want op een smal
	   scherm valt dat schuine verloop buiten beeld. De foto blijft doorschemeren:
	   dekkend bovenaan waar de tekst staat, lichter naar onderen. */
	.sota-hero .wp-block-cover__background {
		background: linear-gradient(180deg, #133585 0%, rgba(19,53,133,.94) 45%, rgba(19,53,133,.7) 100%) !important;
		opacity: .82 !important; }

	/* Tikdoelen van 44px. De tekstlinks dragen hun onderstreping normaal als
	   border-bottom; die zou met verticale padding van de tekst wegzakken, dus
	   op mobiel wordt het een echte underline met offset. */
	.sota-tekstlink { border-bottom: 0; display: inline-flex; align-items: center; min-height: 44px;
		text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px;
		text-decoration-color: var(--wp--preset--color--accent); }
	.sota-tekstlink:hover { text-decoration-color: var(--wp--preset--color--secundair); }
	.sota-footerlijst li { margin-bottom: 0; }
	.sota-footerlijst li a { display: inline-flex; align-items: center; min-height: 44px; }
	.sota-logostrook { padding: 30px 20px; }
	.sota-logorij { grid-template-columns: repeat(3, 1fr); gap: 24px; }
	.sota-logorij img { height: 38px; }
	.sota-footer { padding: 40px 20px 0; }
	.sota-footerraster { grid-template-columns: 1fr; gap: 0; }

	/* Accordeon: de kop wordt de knop, met een +/− rechts en een scheidingslijn
	   ertussen. Zo blijft de footer op een telefoon kort. */
	.sota-footerblok { border-top: 1px solid rgba(255,255,255,.16); }
	.sota-footerblok > summary { display: flex; align-items: center; justify-content: space-between;
		gap: 16px; min-height: 64px; cursor: pointer; }
	.sota-footerblok > summary h3 { margin: 0; }
	.sota-footerblok > summary::after { content: "+"; font: 400 24px/1 Roboto, sans-serif;
		color: var(--wp--preset--color--accent); }
	.sota-footerblok[open] > summary::after { content: "\2013"; }
	.sota-footerblok > .sota-footerlijst { padding-bottom: 14px; }
	.sota-footerraster > div { padding: 22px 0; }
	/* De contactrijen krijgen binnen de accordeon hun eigen ademruimte. */
	.sota-footer-contact .sota-footerrij:first-of-type { padding-top: 4px; }
	.sota-footer-contact > .sota-footerrij:last-child { padding-bottom: 16px; }
	/* De laatste accordeon sluit af met een lijn, zodat het rijtje niet los
	   eindigt. De onderbalk sluit daar direct op aan; zijn eigen bovenrand kan
	   dan weg, anders staan er twee lijnen onder elkaar. */
	.sota-footerraster > .sota-footerblok:last-of-type {
		border-bottom: 1px solid rgba(255,255,255,.16); }
	.sota-footerbalk { margin-top: 0; border-top: 0; padding: 26px 0 20px;
		justify-content: flex-start; gap: 4px; }
	/* Elke voorwaardenlink op een eigen regel; naast elkaar viel de derde
	   toch al af en dat oogde onregelmatig. */
	.sota-footerbalk-links { flex-direction: column; gap: 0; width: 100%; }
	.sota-footerbalk-links a { display: inline-flex; align-items: center; min-height: 40px; }
	/* De negatieve marge trekt het tikvlak terug naar de schermrand, zodat de
	   hamburger optisch op één lijn staat met het logo aan de andere kant. */
	.wp-block-navigation__responsive-container-open,
	.wp-block-navigation__responsive-container-close { padding: 10px; }
	.sota-header .wp-block-navigation__responsive-container-open { margin-right: -10px; }
}

/* --------------------------------------------------------------------------
   Keuzelijsten even hoog als de andere velden
   Een select rekent padding anders dan een input en kreeg daardoor een lagere
   doos, waardoor hij tussen de andere velden ineengedrukt oogde. Een vaste
   minimumhoogte trekt ze gelijk. Het eigen pijltje van de browser wordt
   vervangen door hetzelfde chevron dat de rest van de site gebruikt, anders
   verschilt dat per besturingssysteem.
   -------------------------------------------------------------------------- */
.gform_wrapper input[type="text"], .gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"], .gform_wrapper input[type="number"],
.gform_wrapper select { min-height: 52px; box-sizing: border-box; }
.gform_wrapper select {
	appearance: none; -webkit-appearance: none;
	padding-right: 42px; line-height: 1.4;
	background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%231B3A6B%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 16px; }

/* Het telefoonveld met landkeuze: de twee delen even hoog en de onderschriften
   niet groter dan een hulpregel hoort te zijn. */
.gform_wrapper .ginput_container_phone select,
.gform_wrapper .ginput_container_phone input { min-height: 52px; }
.gform_wrapper .gfield_label_before_complex,
.gform_wrapper .ginput_complex label {
	font: 400 14px/1.4 'Open Sans', sans-serif;
	color: var(--wp--preset--color--gedempt-2); margin-top: 5px; display: block; }

/* Vangnet: een svg zonder eigen afmetingen in de inhoud vult anders de volle
   breedte. Dat gebeurde met achtergebleven Elementor-iconen in een opsomming. */
.entry-content li > svg, .entry-content p > svg {
	width: 1.1em; height: 1.1em; vertical-align: -0.15em; flex: none; }

/* --- sprekerspagina (25-08 aangeleverd door Bert) -------------------------
   Raster van kaartjes met een vierkante portretfoto. De foto's zijn klein
   aangeleverd (178 tot 226px), dus ze worden bewust niet groter getoond dan
   108px; opblazen levert alleen zachte randen op. auto-fill zodat er geen
   tweede breekpunt nodig is. */
.sota-sprekers { list-style: none; margin: 32px 0 0; padding: 0; display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.sota-spreker { display: flex; gap: 14px; align-items: flex-start;
	background: var(--wp--preset--color--wit); border: 1px solid var(--wp--preset--color--rand);
	border-radius: 4px; padding: 16px; }
.sota-spreker-foto { width: 84px; height: 84px; flex: none; border-radius: 4px;
	object-fit: cover; display: block; }
/* Geen foto aangeleverd: initialen in de huisstijlkleur, zodat het raster
   niet uit de pas loopt met een gat. */
.sota-spreker-foto--leeg { display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--zacht); color: var(--wp--preset--color--primair);
	font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .02em; }
.sota-spreker-tekst { min-width: 0; }
.sota-spreker h3 { margin: 0 0 3px; font-size: 17px; line-height: 1.3;
	color: var(--wp--preset--color--primair); }
.sota-spreker-functie { margin: 0 0 10px; font-size: 15px; line-height: 1.5;
	color: var(--wp--preset--color--gedempt); }
.sota-spreker-links { margin: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.sota-spreker-links a { color: var(--wp--preset--color--primair); text-decoration: underline;
	text-underline-offset: 3px; }
.sota-spreker-links a:hover { text-decoration-thickness: 2px; }

@media (max-width: 1023px) {
	/* Tikdoelen van 44px, zelfde afspraak als de rest van het thema. */
	.sota-spreker-links a { display: inline-flex; align-items: center; min-height: 44px; }
	.sota-spreker-foto { width: 72px; height: 72px; }
	.sota-spreker-foto--leeg { font-size: 24px; }
}

/* --- TablePress: eerste kolom -------------------------------------------
   De eerste kolom draagt de labels (MODULE 1, Locatie, Inschrijfgeld) en werd
   door de automatische kolomverdeling zo smal dat die labels over drie regels
   braken. Een ondergrens lost dat op zonder de tabel breder te maken. */
.tablepress td:first-child, .tablepress th:first-child { min-width: 148px; }
@media (max-width: 1023px) {
	.tablepress td:first-child, .tablepress th:first-child { min-width: 112px; }
}

/* Teamleden op Ons team: dezelfde kaart als de sprekers, maar één kolom,
   want deze drie hebben een langere tekst dan een functieregel. */
.sota-team-leden { grid-template-columns: 1fr; margin-bottom: 32px; }
.sota-team-leden .sota-spreker-tekst p:last-child { margin: 8px 0 0; font-size: 16px;
	line-height: 1.65; color: var(--wp--preset--color--tekst); }

/* --- uitklapmenu op desktop (27-08) ---------------------------------------
   Toegevoegd nadat tarieven, veelgestelde vragen en de annuleringsvoorwaarden
   onder de twee cursussen zijn gehangen (verzoek Bert, review 25-08). De
   standaardopmaak van het navigatieblok zet de regels strak op elkaar; hier
   meer lucht en een subtiele scheidingslijn in dezelfde kleur als de rest. */
.sota-header .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--lijn);
	border-radius: 4px;
	box-shadow: 0 12px 30px rgba(19, 53, 133, .11);
	padding: 4px 0;
	min-width: 248px;
}
/* Het lijstitem staat van WordPress uit op display:flex; dan wordt de
   scheidingslijn hieronder een flex-item van 0px en zie je hem niet. */
.sota-header .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	display: block;
}
.sota-header .wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	box-sizing: border-box;
	text-align: left;
	padding: 13px 22px;
	line-height: 1.35;
}
/* Scheidingslijn tussen de items, niet boven de eerste en niet onder de laatste.
   Iets ingesprongen zodat hij de rand van het paneel niet raakt. */
.sota-header .wp-block-navigation__submenu-container > .wp-block-navigation-item + .wp-block-navigation-item::before {
	content: ""; display: block; height: 1px; margin: 0 16px;
	background: var(--wp--preset--color--lijn);
}
.sota-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--zacht);
}

/* --- inklapbare submenu's in het mobiele menu (27-08) ----------------------
   De knop wordt door assets/js/menu.js toegevoegd. Draait dat script niet, dan
   bestaat .sota-inklapbaar niet en blijft alles gewoon open staan. */
.sota-submenu-knop { display: none; }
@media (max-width: 1023px) {
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-inklapbaar { position: relative; }
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-submenu-knop {
		display: flex; align-items: center; justify-content: center;
		position: absolute; top: 0; right: 0; width: 60px; height: 56px;
		padding: 0; margin: 0; border: 0; background: none; cursor: pointer;
		-webkit-appearance: none; appearance: none;
	}
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-submenu-knop svg {
		width: 22px; height: 22px; fill: none;
		stroke: var(--wp--preset--color--primair); stroke-width: 2;
		stroke-linecap: round; stroke-linejoin: round;
		transition: transform .18s ease;
	}
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-inklapbaar.sota-open > .sota-submenu-knop svg {
		transform: rotate(180deg);
	}
	/* Ruimte houden voor de knop, anders loopt een lange kop eronder door. */
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-inklapbaar > .wp-block-navigation-item__content {
		padding-right: 66px;
	}
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-inklapbaar > .wp-block-navigation__submenu-container { display: none; }
	.sota-header .wp-block-navigation__responsive-container.is-menu-open .sota-inklapbaar.sota-open > .wp-block-navigation__submenu-container { display: block; }
}