/*
Theme Name: Meltom Schildersgroep
Theme URI: https://meltomschildersgroep.nl
Author: Meltom Schildersgroep
Description: Bloktheme voor Meltom Schildersgroep. Kleuren, letters en ruimtes staan in theme.json; de secties zijn patronen van gewone WordPress-blokken. Geen paginabouwer en geen plug-ins.
Version: 1.45.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: meltom
*/

/* ============================================================
   Kleuren, letters en ruimtes komen uit theme.json en zijn hier
   beschikbaar als var(--wp--preset--...). Hieronder staan ze onder
   kortere namen, zodat de rest van dit bestand leesbaar blijft en
   dicht bij het oorspronkelijke ontwerp.
   ============================================================ */

:root {
	--merk:        var(--wp--preset--color--merk);
	--merk-deep:   var(--wp--preset--color--merk-deep);
	--merk-soft:   var(--wp--preset--color--merk-soft);
	--blush:       var(--wp--preset--color--blush);
	--blush-deep:  var(--wp--preset--color--blush-deep);
	--blush-pale:  var(--wp--preset--color--blush-pale);
	--cream:       var(--wp--preset--color--cream);
	--surface:     var(--wp--preset--color--surface);
	--ink:         var(--wp--preset--color--ink);
	--muted:       var(--wp--preset--color--muted);
	--line:        var(--wp--preset--color--line);
	--sw-dark:     var(--wp--preset--color--sw-dark);
	--sw-light:    var(--wp--preset--color--sw-light);

	--kop:  var(--wp--preset--font-family--kop);
	--sans: var(--wp--preset--font-family--tekst);

	--shadow-card: 0 1px 2px rgba(46, 39, 56, .04), 0 8px 24px rgba(46, 39, 56, .06);
	--shadow-lift: 0 2px 4px rgba(46, 39, 56, .06), 0 16px 40px rgba(46, 39, 56, .10);
}

body {
	-webkit-font-smoothing: antialiased;
}

/* ============================================================
   Terugkerende kleine onderdelen
   ============================================================ */

/* Bovenregel boven een kop: klein, gespatieerd, in de merkkleur */
.eyebrow {
	font-size: .75rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--merk);
	display: block;
	margin-bottom: 12px;
}

/* Inleidende alinea onder een kop */
.lead {
	font-size: var(--wp--preset--font-size--lead);
	color: var(--muted);
	max-width: 62ch;
}

/* Wat nog ingevuld moet worden. Bewust zichtbaar met een stippellijn, zodat
   het niet per ongeluk blijft staan als de site publiek gaat. */
.invullen {
	border-bottom: 2px dotted var(--blush-deep);
}

/* ============================================================
   Knoppen — pilvorm, zoals op de Spraywork-site
   ============================================================ */

.wp-block-button__link,
.btn {
	display: inline-flex;
	align-items: center;
	gap: .6em;
	padding: .85em 1.6em;
	border-radius: 999px;
	font-family: var(--sans);
	font-size: .95rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
.wp-block-button__link:hover,
.btn:hover { transform: translateY(-1px); }
.wp-block-button__link:focus-visible,
.btn:focus-visible { outline: 2px solid var(--merk); outline-offset: 3px; }

/* Hoofdknop: marineblauw met witte tekst */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--merk);
	color: #FFFFFF;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: var(--merk-deep);
	color: #FFFFFF;
}

/* Tweede knop: alleen een rand */
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	border-color: var(--line);
	color: var(--ink);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: var(--merk);
	color: var(--merk);
}

/* Op een donkere ondergrond draaien beide knoppen om */
.op-donker .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--blush);
	color: var(--merk-deep);
}
.op-donker .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover {
	background: #FFFFFF;
	color: var(--merk-deep);
}
.op-donker .wp-block-button.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, .35);
	color: #FFFFFF;
}
.op-donker .wp-block-button.is-style-outline .wp-block-button__link:hover {
	border-color: #FFFFFF;
	color: #FFFFFF;
}

/* ============================================================
   Kopbalk
   Zelfde gebroken wit als de pagina; alleen een haarlijn scheidt
   de balk van de inhoud eronder.
   ============================================================ */

.site-header {
	position: sticky;
	top: env(safe-area-inset-top, 0px);
	z-index: 50;
	background: color-mix(in srgb, var(--cream) 90%, transparent);
	backdrop-filter: blur(12px);
	border-bottom: 1px solid var(--line);
}

.site-header .wp-block-group.is-layout-flex {
	min-height: 84px;
	align-items: center;
}

/* Het logo komt uit het thema, niet uit de mediabibliotheek: zo staat het
   merk op elke pagina gelijk en kan het niet per ongeluk vervangen worden. */
.site-logo img,
.wp-block-site-logo img {
	height: 46px;
	width: auto;
	display: block;
}

/* Het menu is een vaste lijst in de kopbalk en geen bewerkbaar WordPress-menu.
   Vier items die op elke pagina gelijk zijn; de pagina waar je bent krijgt
   aria-current, zodat het streepje eronder komt en een schermlezer het ook
   meldt. Zo erft elke nieuwe pagina hetzelfde menu, zonder dat er per pagina
   iets ingesteld hoeft te worden. */
.site-nav ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
}
.site-nav a {
	text-decoration: none;
	font-size: .95rem;
	color: var(--muted);
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: color .18s ease, border-color .18s ease;
}
.site-nav a:hover,
.site-nav a[aria-current="page"] {
	color: var(--ink);
	border-bottom-color: var(--merk);
}

/* Op een smal scherm is er geen ruimte voor vier items naast het logo en de
   knop. Het menu verhuist dan naar een eigen regel eronder. */
@media (max-width: 860px) {
	.site-header > .wp-block-group { flex-wrap: wrap; }
	.site-nav { order: 3; width: 100%; }
	.site-nav ul {
		gap: 20px;
		flex-wrap: wrap;
		padding-bottom: 10px;
	}
}

@media (max-width: 940px) {
	.site-header .wp-block-group.is-layout-flex { min-height: 70px; }
	.site-logo img, .wp-block-site-logo img { height: 38px; }
}

/* ============================================================
   Rasters
   WordPress geeft elk blok na het eerste een marge bovenaan. In een
   normale kolom klopt dat, maar in een raster duwt het de tweede en
   derde kaart omlaag en staat een rij niet meer op één lijn. Binnen
   onze eigen rasters zetten we die marge daarom terug op nul; de
   tussenruimte komt van gap.
   ============================================================ */

.diensten > *,
.sectoren > *,
.projecten > *,
.stappen > *,
.uren > *,
.takken > *,
.refs > *,
.aanbod > *,
.technieken > *,
.gegevens-kolommen > *,
.slotbalk-binnen > *,
.methode > * {
	margin-block-start: 0;
}

/* ============================================================
   Secties
   ============================================================ */

/* Dezelfde ademruimte als in het ontwerp: 64 px op een smal scherm,
   oplopend tot 116 px op een breed scherm. De spacing-maat uit theme.json
   gaf 96 boven en 84 onder, en dat maakte het ritme onrustiger dan bedoeld. */
.sectie {
	padding-block: clamp(64px, 9vw, 116px);
}

/* Een sectie op wit, met een haarlijn boven en onder */
.sectie--wit {
	background: var(--surface);
	border-block: 1px solid var(--line);
}

/* Een sectie op het lichte oudroze. Grijze tekst haalt daarop maar 3,9 op 1
   aan contrast, dus de tekst gaat mee naar een warme donkere tint die 6,1
   haalt. */
.sectie--oudroze {
	background: var(--blush-pale);
	border-block: 1px solid color-mix(in srgb, #5E5348 18%, transparent);
}
.sectie--oudroze .lead,
.sectie--oudroze p { color: #5E5348; }

/* Een sectie in marineblauw */
.sectie--blauw {
	background: var(--merk-deep);
	color: #FFFFFF;
}
.sectie--blauw p { color: rgba(255, 255, 255, .75); }
.sectie--blauw .eyebrow { color: color-mix(in srgb, var(--blush) 70%, transparent); }

/* ============================================================
   Afstand tussen blokken
   Het ontwerp zet alle marges op nul en bepaalt elke afstand zelf. WordPress
   legt daar zijn eigen vaste blokafstand overheen, tussen elk blok en zijn
   buur. Die twee stapelen op elkaar, en dat maakte elke kaart en elke sectie
   hoger dan in het ontwerp.

   Vandaar dezelfde nulstelling als in het ontwerp. Alles wat daarna nog
   ruimte heeft, krijgt die van een regel die uit het ontwerp komt.
   ============================================================ */

.sectie > *,
.wp-block-group > *,
.wp-block-column > *,
.wp-block-columns > * {
	margin-block-start: 0;
}

main :where(h1, h2, h3, h4, p, ul, ol, figure) {
	margin-block: 0;
}

/* De alinea's in een lopend tekstblok houden wel lucht: daar leest het als
   tekst en niet als opsomming. */
main :where(.tekstblok, .vragen, .antwoord, .citaat, .kolom-tekst) p + p {
	margin-top: 16px;
}

/* Maten uit het ontwerp voor de kaarten en lijsten. */
.dienst h3 { margin-bottom: 6px; }
.sector h3 { margin-bottom: 10px; }
.stap h3 { margin-bottom: 8px; }
.tak h3 { margin-bottom: 10px; }
.project h3 { margin-bottom: 8px; }
.cijfer-label { margin-top: 6px; }
.wp-block-buttons { gap: 12px; }

/* Een blok met een maximale breedte wordt door WordPress vanzelf
   gecentreerd. Dat zorgde ervoor dat de sectiekop ingesprongen stond ten
   opzichte van de kaarten eronder.

   De oplossing is niet de marge weghalen — dan schiet het blok juist naar de
   buitenrand — maar het blok de volle inhoudsbreedte geven en alleen de
   tekst er binnenin smal houden. Precies zoals in het ontwerp: het kader
   loopt mee met de kaarten, de regels breken rond de 62 tekens.

   Een vaste maat in rem en niet 62ch: ch rekent mee met de lettergrootte,
   dus een kop van 65 px zou veel breder uitpakken dan de lopende tekst.

   De maat is gemeten aan het ontwerp: 62ch komt daar op 675,6 px uit. */
.sectie-kop {
	margin-bottom: clamp(32px, 4vw, 52px);
}
.sectie-kop > * {
	max-width: 42.25rem !important;
	margin-inline: 0 auto !important;
}
.sectie-kop > h1,
.sectie-kop > h2,
.sectie-kop > h3 {
	margin-block: 12px 16px;
}

.vragen > *,
.tekstblok > * {
	max-width: 50rem !important;
	margin-inline: 0 auto !important;
}
.formulier { max-width: 760px !important; margin-inline: 0 auto !important; }

/* Contactpagina: formulier links, nummers en adressen rechts. Onder de
   860 px vallen ze onder elkaar, formulier eerst. */
.contact-raster {
	display: grid;
	grid-template-columns: 1.15fr .85fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
@media (max-width: 860px) {
	.contact-raster { grid-template-columns: 1fr; }
}
.contact-raster .formulier { max-width: none !important; }
/* De koppen in de kolommen zijn kleiner dan een sectiekop: ze staan naast
   elkaar en zouden anders met de paginatitel gaan concurreren. */
.contact-raster h2 { font-size: clamp(1.5rem, 2.4vw, 1.9rem); }
.contact-raster .formulier h2 { margin-bottom: 8px; }
.contact-raster .gegevens h2 { margin-bottom: 20px; }
.contact-raster .formulier > p {
	color: var(--muted);
	font-size: .95rem;
	margin-bottom: 26px;
}

.contact-raster .frm-fluent-form fieldset {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 18px;
	border: 0;
	margin: 0;
	padding: 0;
}
.contact-raster .frm-fluent-form .ff-el-group { grid-column: 1 / -1; }
.contact-raster .frm-fluent-form .ff-el-group:nth-of-type(-n+4) { grid-column: auto; }

@media (max-width: 620px) {
	.contact-raster .frm-fluent-form fieldset { grid-template-columns: 1fr; }
	.contact-raster .frm-fluent-form .ff-el-group:nth-of-type(-n+4) { grid-column: 1 / -1; }
}

/* ============================================================
   Diensten
   De druppel uit het beeldmerk doet dienst als opsommingsteken, zodat de
   lijst van het merk is zonder dat er iconen bij hoeven. De kolommen
   vouwen vanzelf terug naar één kolom op een smal scherm.
   ============================================================ */

.diensten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
	column-gap: clamp(32px, 4vw, 72px);
}
.dienst {
	display: flex;
	gap: 18px;
	padding-block: 26px;
	border-top: 1px solid var(--line);
}
.dienst-druppel {
	width: 18px;
	height: 12px;
	flex-shrink: 0;
	margin-top: 9px;
}
.dienst-druppel path { fill: var(--blush-deep); }
.dienst h3 { font-size: 1.12rem; margin-bottom: 6px; }
.dienst p { font-size: .93rem; color: var(--muted); }

/* Doorverwijzing onder een sectie; zonder dit linkt de homepage alleen via
   het menu naar de onderliggende pagina. */
.sectie-actie { margin-top: clamp(28px, 3.5vw, 44px); }

/* ============================================================
   De twee takken
   Twee druppels van een halve pagina, elkaars spiegelbeeld: in het logo
   wijst de bovenste vorm naar rechtsboven en de onderste naar linksonder.
   Samen herhalen de twee blokken die compositie.

   De ronde hoeken happen in de inhoud, dus de zijden met een grote straal
   krijgen extra ruimte. Zonder dat loopt de kop tegen de bocht aan.
   ============================================================ */

.takken {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(20px, 3vw, 32px);
}

.tak {
	display: flex;
	flex-direction: column;
	padding: clamp(38px, 4.4vw, 58px) clamp(32px, 3.6vw, 48px);
	min-height: 100%;
}

/* Rond linksboven en rechtsonder. */
.tak--groep {
	background: var(--merk-deep);
	color: var(--blush);
	border-radius: clamp(72px, 9vw, 120px) 10px clamp(72px, 9vw, 120px) 10px;
	padding-left: clamp(40px, 4.6vw, 62px);
}
.tak--groep .eyebrow { color: color-mix(in srgb, var(--blush) 62%, transparent); }
.tak--groep p { color: color-mix(in srgb, var(--blush) 82%, transparent); }
.tak-merkteken { width: 30px; height: 40px; margin-top: auto; }
.tak-merkteken path { fill: color-mix(in srgb, var(--blush) 42%, transparent); }

/* Gespiegeld: rond rechtsboven en linksonder. Staat in de huisstijl van
   Spraywork en niet die van Meltom, met hun eigen logo in de eigen kleur,
   zodat de bezoeker ziet waar hij terechtkomt voordat hij klikt. */
.tak--spraywork {
	background: var(--sw-light);
	color: var(--sw-dark);
	border: 1px solid rgba(44, 2, 6, .12);
	border-radius: 10px clamp(72px, 9vw, 120px) 10px clamp(72px, 9vw, 120px);
	padding-right: clamp(40px, 4.6vw, 62px);
}
.tak--spraywork .tak-rol { opacity: .55; }
.tak--spraywork p { color: var(--sw-dark); opacity: .8; }

.tak .eyebrow { display: block; margin-bottom: 12px; }
.tak-rol {
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	margin-bottom: 18px;
}
.tak h2 { font-size: clamp(1.6rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.tak h3 { font-size: clamp(1.3rem, 2vw, 1.62rem); margin-bottom: 14px; }
.tak p { margin-bottom: 20px; max-width: 46ch; }

.tak-lijst {
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: .95rem;
}
.tak-lijst li { display: flex; gap: 10px; align-items: baseline; }
/* Het vinkje komt uit de tekstkleur van Spraywork zelf. Het goud dat eerder
   in het ontwerp stond, komt in het brandbook niet voor. */
.tak-lijst li::before {
	content: "✓";
	color: color-mix(in srgb, var(--sw-dark) 55%, transparent);
}

.sw-logo {
	width: 168px;
	height: auto;
	display: block;
	margin-bottom: 12px;
}
.tak-slogan {
	font-size: .82rem;
	letter-spacing: .05em;
	opacity: .65;
	margin-bottom: 22px;
}

/* De knop in het Spraywork-blok draagt hun bordeaux, niet het marineblauw. */
.wp-block-button.knop-spraywork:not(.is-style-outline) .wp-block-button__link {
	background: var(--sw-dark);
	color: var(--sw-light);
}

.tak .wp-block-buttons { margin-top: auto; }

/* Op smalle schermen staan de blokken onder elkaar en zijn ze veel korter;
   een grote straal vreet dan te veel van de inhoud op. */
@media (max-width: 800px) {
	.takken { grid-template-columns: 1fr; }
	.tak--groep { border-radius: 56px 8px 56px 8px; }
	.tak--spraywork { border-radius: 8px 56px 8px 56px; }
}

/* ============================================================
   Sectoren
   ============================================================ */

.sectoren {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.sector {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: 20px 3px 20px 3px;
	padding: 28px 26px;
	box-shadow: var(--shadow-card);
	transition: box-shadow .2s ease, transform .2s ease;
}
.sector:hover {
	box-shadow: var(--shadow-lift);
	transform: translateY(-2px);
}
.sector h3 { font-size: 1.18rem; margin-bottom: 8px; }
.sector p { font-size: .93rem; color: var(--muted); }

/* Eén sector heeft een eigen pagina; daar staat een link onderin. */
.sector-meer {
	margin-top: 12px;
	font-size: .84rem;
	font-weight: 600;
}
.sector-meer a { color: var(--merk); text-decoration: none; }
.sector-meer a:hover { text-decoration: underline; }

/* ============================================================
   Kop van een onderliggende pagina
   Zelfde opbouw als de hero van de homepage, maar zonder beeld: op een
   dienstenpagina telt de tekst, niet nog een plaatje.
   ============================================================ */

.pagina-hero { padding-block: clamp(56px, 8vw, 100px) clamp(12px, 3vw, 32px); }
/* ============================================================
   De linkerlijn
   Alles in een sectie begint op dezelfde lijn: het begin van de
   inhoudskolom. WordPress centreert daarentegen elk blok dat smaller is dan
   die kolom, en doet dat met !important. Daardoor stond bijvoorbeeld de
   vragenlijst op "Over ons" ingesprongen ten opzichte van de kop erboven.

   De linkermarge is hier precies de afstand van de sectierand tot het begin
   van de kolom. Vult een blok de hele kolom, dan verandert er niets; is het
   smaller, dan schuift het naar de linkerlijn. Past de kolom niet meer op
   het scherm, dan is de afstand nul.
   ============================================================ */

.sectie > * {
	margin-left: max(0px, (100% - var(--wp--style--global--content-size)) / 2) !important;
	margin-right: auto !important;
}

/* Het citaat staat in het ontwerp wel midden op de pagina. */
.sectie--citaat > * {
	margin-inline: auto !important;
}

/* Net als bij de sectiekop: WordPress centreert een blok met een maximale
   breedte, met !important. Zonder deze regel staat het bovenkopje links en
   de titel eronder in het midden.

   Het moet op .pagina-kop en niet op .pagina-hero zelf: de sectie loopt van
   rand tot rand, dus links uitlijnen daarbinnen zet de tekst tegen de
   schermrand. Het kader .pagina-kop staat wel op de inhoudsbreedte, dus
   links daarbinnen is precies waar de blokken eronder ook beginnen. */
.pagina-kop > *,
.pagina-hero .wp-block-column > * {
	margin-inline: 0 auto !important;
}
.pagina-hero h1 { margin-bottom: 22px; max-width: 18ch; }
.pagina-hero .lead { max-width: 62ch; margin-bottom: 32px; }

/* De contactpagina opent met het formulier eronder, dus daar loopt de kop
   zonder witruimte door — net als in het ontwerp. */
.pagina-hero--contact { padding-block: clamp(48px, 7vw, 84px) 0; }
.pagina-hero--contact h1 { margin-bottom: 20px; }

/* ============================================================
   Formulieren
   Fluent Forms levert zijn eigen, vlakke opmaak mee. Deze regels trekken
   de velden naar de huisstijl: dezelfde letters, dezelfde randkleur en
   dezelfde focusring als de rest van de site, zodat het formulier niet
   leest als een ingeplakt blok.
   ============================================================ */

.formulier {
	background: var(--surface);
	border: 1px solid var(--line);
	border-radius: clamp(40px, 5vw, 64px) 10px clamp(40px, 5vw, 64px) 10px;
	padding: clamp(30px, 3.6vw, 48px);
	box-shadow: var(--shadow-card);
}

.formulier .ff-el-group { margin-bottom: 18px; }

.formulier .ff-el-input--label label {
	display: block;
	font-size: .84rem;
	font-weight: 600;
	letter-spacing: .02em;
	margin-bottom: 6px;
	color: var(--ink);
}

.formulier input[type="text"],
.formulier input[type="email"],
.formulier input[type="tel"],
.formulier input[type="number"],
.formulier select,
.formulier textarea {
	width: 100%;
	font: inherit;
	font-size: .97rem;
	color: var(--ink);
	background: var(--cream);
	border: 1px solid var(--line);
	border-radius: 12px;
	padding: .7em .9em;
	transition: border-color .18s ease, box-shadow .18s ease;
}
.formulier textarea { min-height: 130px; resize: vertical; }

.formulier input:focus,
.formulier select:focus,
.formulier textarea:focus {
	outline: none;
	border-color: var(--merk);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--merk) 18%, transparent);
}

.formulier .ff-el-help-message {
	font-size: .82rem;
	color: var(--muted);
	margin-top: 6px;
}

/* De sterretjes bij verplichte velden mogen niet schreeuwen. */
.formulier .ff-el-is-required.asterisk-right label:after,
.formulier .ff-el-is-required.asterisk-left label:before {
	color: var(--blush-deep);
}

.formulier .ff-btn-submit {
	font: inherit;
	font-weight: 600;
	font-size: .95rem;
	background: var(--merk);
	color: #FFFFFF;
	border: none;
	border-radius: 999px;
	padding: .85em 1.6em;
	cursor: pointer;
	transition: background .18s ease, transform .18s ease;
}
.formulier .ff-btn-submit:hover {
	background: var(--merk-deep);
	transform: translateY(-1px);
}

.formulier .ff-message-success {
	background: var(--blush-pale);
	border: 1px solid var(--blush-deep);
	border-radius: 12px;
	padding: 16px 18px;
	color: #5E5348;
}

/* ============================================================
   Contactgegevens
   ============================================================ */

.gegevens h2 { margin-bottom: 20px; }
.gegevens-kolommen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0 clamp(28px, 4vw, 64px);
}
.gegroep {
	padding-block: 20px;
	border-top: 1px solid var(--line);
}
.gegroep h3 {
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	font-family: var(--sans);
	font-weight: 600;
	color: var(--muted);
	margin-bottom: 8px;
}
.gegroep a { text-decoration: none; }
.gegroep a:hover { color: var(--merk); }
.gegroep p {
	font-size: .97rem;
	line-height: 1.55;
}
.gegroep p + p { margin-top: 4px; }
.gegroep .zacht { color: var(--muted); font-size: .9rem; }

/* ============================================================
   Lopende tekst
   Voor pagina's die vooral tekst zijn, zoals de privacyverklaring. Een
   regellengte van ongeveer 70 tekens leest het prettigst; breder wordt het
   zoeken naar het begin van de volgende regel.
   ============================================================ */

.tekstblok {
	max-width: 70ch;
	margin-bottom: clamp(28px, 3.5vw, 44px);
}
.tekstblok h2 {
	font-size: clamp(1.25rem, 2vw, 1.55rem);
	margin-bottom: 12px;
}
.tekstblok p { margin-bottom: 14px; }
.tekstblok a { color: var(--merk); }

/* ============================================================
   Het aanbod op de dienstenpagina
   Kaarten met een beeldvlak erboven. Zolang er geen foto's zijn, staat het
   vlak er als kleurvlak met de druppelhoek: de vorm klopt dan al.
   ============================================================ */

.aanbod {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(20px, 2.6vw, 32px);
}
.aanbod-beeld {
	aspect-ratio: 4 / 3;
	border-radius: 24px 3px 24px 3px;
	background: linear-gradient(145deg, var(--merk-soft), var(--merk-deep));
	position: relative;
	overflow: hidden;
	margin-bottom: 14px;
}
.aanbod-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px);
}
.aanbod-kaart h3 { font-size: 1.15rem; margin-bottom: 6px; }
.aanbod-kaart p { font-size: .93rem; color: var(--muted); }

/* ============================================================
   De drie technieken
   Tekst links, de drie genummerde technieken rechts. Onder elkaar op een
   smal scherm, want naast elkaar wordt de tekst dan te smal.
   ============================================================ */

.methode {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(32px, 5vw, 72px);
	align-items: start;
}
.methode-tekst p { color: var(--muted); margin-bottom: 16px; max-width: 46ch; }
.methode-tekst h2 { margin-bottom: 16px; }
.technieken { display: flex; flex-direction: column; gap: 22px; }
.techniek {
	display: flex;
	gap: 18px;
	padding-top: 20px;
	border-top: 1px solid var(--line);
}
.techniek-nummer {
	font-family: var(--kop);
	font-size: 1.5rem;
	color: var(--blush-deep);
	line-height: 1;
	flex-shrink: 0;
	font-variant-numeric: tabular-nums;
}
.techniek h3 { font-size: 1.1rem; margin-bottom: 6px; }
.techniek p { font-size: .93rem; color: var(--muted); }

@media (max-width: 860px) {
	.methode { grid-template-columns: 1fr; }
}

/* ============================================================
   Een dag op een verdieping
   ============================================================ */

.uren {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: clamp(20px, 3vw, 36px);
}
.uur {
	padding-top: 24px;
	border-top: 2px solid var(--blush-deep);
}
.uur-tijd {
	font-family: var(--kop);
	font-size: 1.15rem;
	color: var(--merk);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.uur h3 { font-size: 1.05rem; margin-bottom: 7px; }
.uur p { font-size: .93rem; }

/* ============================================================
   Beeld op de hotelpagina
   Een brede onderbreking tussen twee tekstblokken, en een klein beeld
   boven elke ruimtekaart. De even kaarten krijgen de gespiegelde hoek en
   het oudroze vlak, zodat de rij niet als een raster van dezelfde blokjes
   leest.
   ============================================================ */

.beeld-breed {
	aspect-ratio: 21 / 9;
	border-radius: 120px 12px 120px 12px;
	margin-top: clamp(36px, 5vw, 64px);
	box-shadow: var(--shadow-lift);
	position: relative;
}

.ruimte-beeld {
	aspect-ratio: 16 / 10;
	border-radius: 12px 3px 12px 3px;
	margin-bottom: 16px;
}
.sector:nth-child(even) .ruimte-beeld {
	border-radius: 3px 12px 3px 12px;
	background: linear-gradient(145deg, var(--blush), var(--blush-deep));
}
.sector:nth-child(even) .ruimte-beeld::after {
	background: repeating-linear-gradient(118deg, rgba(44, 39, 56, .06) 0 2px, transparent 2px 15px);
}

/* Het bijschrift in een leeg beeldvlak mag wat meer ruimte innemen dan
   dat op een foto: het is uitleg, geen onderschrift. */
.beeld-breed .beeld-bijschrift,
.pagina-hero--beeld .hero-beeld .beeld-bijschrift { max-width: 42ch; }

/* ============================================================
   De rekensom op de hotelpagina
   Een hotelier denkt in kamernachten en niet in vierkante meters. De tabel
   zet de twee manieren naast elkaar in zijn eigen eenheid; de kolom met
   onze cijfers staat in de merkkleur zodat het verschil meteen opvalt.
   ============================================================ */

.som-venster {
	overflow-x: auto;
	border: 1px solid var(--line);
	border-radius: 20px 3px 20px 3px;
	background: var(--surface);
}
.som-tabel {
	width: 100%;
	border-collapse: collapse;
	font-size: .93rem;
}
.som-tabel th,
.som-tabel td {
	text-align: left;
	padding: 14px 16px;
	border-bottom: 1px solid var(--line);
	vertical-align: top;
}
.som-tabel tbody tr:last-child th,
.som-tabel tbody tr:last-child td { border-bottom: none; }
.som-tabel thead th {
	font-size: .74rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
}
.som-tabel tbody th { font-weight: 500; }
.som-tabel .kolom-ons {
	color: var(--merk);
	font-weight: 600;
}
.som-noot {
	font-size: .84rem;
	color: var(--muted);
	margin-top: 12px;
}

/* De grens van wat we wel en niet doen. Dat hoort niet weggemoffeld te
   worden onderaan; het staat daarom in een eigen kader. */
.grens {
	margin-top: clamp(24px, 3vw, 36px);
	padding: 20px 22px;
	border-left: 3px solid var(--blush-deep);
	background: var(--surface);
	font-size: .95rem;
	color: var(--muted);
	max-width: 72ch;
}

/* ============================================================
   Veelgestelde vragen
   Een <details> per vraag: open en dicht zonder javascript, en een
   schermlezer meldt vanzelf of het antwoord open staat. Het plusje rechts
   wordt een minnetje doordat het bovenste streepje wegdraait.
   ============================================================ */

.vragen { max-width: 62rem; }
.vraag { border-top: 1px solid var(--line); }
.vraag:last-of-type { border-bottom: 1px solid var(--line); }
.vraag summary {
	list-style: none;
	cursor: pointer;
	padding-block: 22px;
	padding-right: 40px;
	position: relative;
	font-family: var(--kop);
	font-size: clamp(1.1rem, 1.7vw, 1.3rem);
	line-height: 1.3;
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary:focus-visible { outline: 2px solid var(--merk); outline-offset: 4px; }
.vraag summary::before,
.vraag summary::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 15px;
	height: 2px;
	background: var(--merk);
	transition: transform .2s ease;
}
.vraag summary::after { transform: rotate(90deg); }
.vraag[open] summary::after { transform: rotate(0deg); }
.vraag-antwoord {
	padding-bottom: 24px;
	padding-right: 40px;
	max-width: 68ch;
	color: var(--muted);
	font-size: .97rem;
}
.vraag-antwoord p + p { margin-top: 14px; }

/* ============================================================
   Referenties
   De vakken staan er met een stippellijn omheen zolang ze leeg zijn: dan
   is het duidelijk dat hier nog iets komt en het geen ontwerp is.
   ============================================================ */

.refs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: clamp(16px, 2vw, 24px);
}
.ref {
	border: 1px dashed var(--line);
	border-radius: 20px 3px 20px 3px;
	padding: 28px 26px;
	min-height: 170px;
}
.ref-teken {
	font-family: var(--kop);
	font-size: 2rem;
	color: var(--blush-deep);
	line-height: 1;
	margin-bottom: 10px;
}
.ref p { font-size: .92rem; color: var(--muted); }

/* ============================================================
   Citaat
   Een brede band in oudroze, midden op de pagina. Zolang er geen echte
   uitspraak is, staat hier een invulplek; een verzonnen referentie hoort
   niet op een zakelijke site.
   ============================================================ */

.sectie--citaat {
	background: var(--blush);
	color: var(--merk-deep);
}
.citaat-binnen {
	max-width: 880px;
	margin-inline: auto;
	text-align: center;
}
.citaat {
	margin: 0 0 22px;
	font-family: var(--kop);
	font-size: clamp(1.4rem, 3vw, 2.05rem);
	line-height: 1.35;
	text-wrap: balance;
	color: var(--merk-deep);
}
.citaat-bron {
	font-size: .93rem;
	opacity: .75;
	color: var(--merk-deep);
}

/* ============================================================
   Werkwijze
   Een echte volgorde, dus genummerd. De lijn boven elke stap loopt door
   over de vier kolommen heen en leest daardoor als een tijdlijn.
   ============================================================ */

.stappen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(20px, 3vw, 36px);
}
.stap {
	padding-top: 26px;
	border-top: 2px solid var(--blush-deep);
}
.stap-nummer {
	font-family: var(--kop);
	font-size: 1rem;
	color: var(--merk);
	font-variant-numeric: tabular-nums;
	margin-bottom: 8px;
}
.stap h3 { font-size: 1.12rem; margin-bottom: 7px; }
.stap p { font-size: .93rem; color: var(--muted); }

/* ============================================================
   Projecten
   De beeldvlakken zijn leeg tot er foto's zijn. Ze hebben wel al de
   druppelhoek en de merkkleur, zodat de vorm klopt voordat de inhoud er is.
   ============================================================ */

.projecten {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
	gap: clamp(18px, 2.4vw, 28px);
}
.project-beeld {
	aspect-ratio: 4 / 3;
	border-radius: 24px 3px 24px 3px;
	background: linear-gradient(145deg, var(--merk-soft), var(--merk-deep));
	position: relative;
	overflow: hidden;
	margin-bottom: 16px;
}
.project-beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, rgba(255, 255, 255, .05) 0 2px, transparent 2px 15px);
}
.project-soort {
	font-size: .74rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--merk);
	font-weight: 600;
}
.project h3 { font-size: 1.2rem; margin-block: 6px 5px; }
.project p { font-size: .92rem; color: var(--muted); }

/* ============================================================
   Slotbalk
   De laatste zet voor de footer. Twee wegen naast elkaar: aanvragen voor
   wie het rustig bekijkt, bellen voor wie liever meteen iemand spreekt.
   ============================================================ */

.slotbalk-binnen {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}
.slotbalk h2 { max-width: 20ch; margin-bottom: 12px; }
.slotbalk p { max-width: 44ch; }
.slotbalk-knoppen { flex-shrink: 0; }

/* Op donkerblauw draait de knopkleur om: oudroze vlak met blauwe letters. */
.wp-block-button.knop-licht:not(.is-style-outline) .wp-block-button__link {
	background: var(--blush);
	color: var(--merk-deep);
}
.wp-block-button.knop-licht:not(.is-style-outline) .wp-block-button__link:hover {
	background: #FFFFFF;
	color: var(--merk-deep);
}
.wp-block-button.knop-omlijnd-licht.is-style-outline .wp-block-button__link {
	border-color: rgba(255, 255, 255, .35);
	color: #FFFFFF;
}
.wp-block-button.knop-omlijnd-licht.is-style-outline .wp-block-button__link:hover {
	border-color: #FFFFFF;
	background: rgba(255, 255, 255, .1);
	color: #FFFFFF;
}

/* ============================================================
   De druppelvorm uit het beeldmerk
   Keert terug als hoekafronding op blokken en beeldvlakken. De twee
   varianten zijn elkaars spiegelbeeld, net als de twee vormen in het
   logo. De zijden met een grote straal krijgen extra binnenruimte,
   anders loopt de tekst tegen de bocht aan.
   ============================================================ */

.druppel {
	border-radius: clamp(72px, 9vw, 120px) 10px clamp(72px, 9vw, 120px) 10px;
	padding: clamp(38px, 4.4vw, 58px) clamp(32px, 3.6vw, 48px);
	padding-left: clamp(40px, 4.6vw, 62px);
}
.druppel--gespiegeld {
	border-radius: 10px clamp(72px, 9vw, 120px) 10px clamp(72px, 9vw, 120px);
	padding-left: clamp(32px, 3.6vw, 48px);
	padding-right: clamp(40px, 4.6vw, 62px);
}

/* Kleinere varianten voor kaarten en beeldvlakken */
.druppel--klein { border-radius: 24px 3px 24px 3px; }
.druppel--klein.druppel--gespiegeld { border-radius: 3px 24px 3px 24px; }

@media (max-width: 800px) {
	.druppel { border-radius: 56px 8px 56px 8px; }
	.druppel--gespiegeld { border-radius: 8px 56px 8px 56px; }
}

/* ============================================================
   Beeldvlakken
   Zolang er geen foto's zijn staat hier een kleurvlak met dezelfde
   schuine arcering als in het ontwerp. Zodra er een afbeelding in het
   blok staat verdwijnt het vanzelf achter de foto.
   ============================================================ */

.beeld {
	position: relative;
	overflow: hidden;
	background: linear-gradient(150deg, var(--merk) 0%, var(--merk-deep) 100%);
}
.beeld::after {
	content: "";
	position: absolute;
	inset: 0;
	background: repeating-linear-gradient(118deg, rgba(255,255,255,.055) 0 2px, transparent 2px 13px);
	pointer-events: none;
}
.beeld--oudroze {
	background: linear-gradient(145deg, var(--blush), var(--blush-deep));
}
.beeld--oudroze::after {
	background: repeating-linear-gradient(118deg, rgba(44,39,56,.06) 0 2px, transparent 2px 15px);
}

.beeld img,
.wp-block-image.beeld img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ============================================================
   Hero
   ============================================================ */

.sectie--hero {
	padding-block: clamp(56px, 8vw, 96px) 0;
}

/* Ook hier bepaalt het ontwerp de afstanden zelf: onder het bovenkopje
   niets, onder de titel 22 px, onder de inleiding 32. */
.hero-kolommen h1 { margin-bottom: 22px; }
.hero-kolommen .lead { margin-bottom: 32px; }

/* Beeldmasker met de schuine snede uit het beeldmerk. Zolang er geen foto
   in staat, vult het kleurvlak de vorm; zodra Tom er een foto in zet, dekt
   die het vlak af. */
.hero-beeld {
	aspect-ratio: 4 / 5;
	border-radius: 200px 24px 200px 24px;
	overflow: hidden;
	box-shadow: var(--shadow-lift);
	position: relative;
}
/* De ronding loopt van linksboven naar rechtsonder, net als op de homepage.
   Gespiegeld stond de grote ronding linksonder, en dan begint de foto daar
   pas tweehonderd pixels verderop terwijl het onderschrift eronder bij de
   rand van het kader begint. Dat las als een uitlijnfout. */
.hero-beeld--gespiegeld {
	border-radius: 200px 24px 200px 24px;
}

.hero-beeld .wp-block-image,
.hero-beeld figure { margin: 0; height: 100%; }
.hero-beeld img { width: 100%; height: 100%; object-fit: cover; }

.beeld-bijschrift {
	position: absolute;
	left: 28px;
	right: 28px;
	bottom: 26px;
	z-index: 2;
	color: #FFFFFF;
}
.beeld-bijschrift p { margin: 0; color: #FFFFFF; }

.beeld-bijschrift strong {
	display: block;
	font-family: var(--kop);
	font-size: 1.3rem;
	font-weight: 500;
}
.beeld-bijschrift p + p { font-size: .85rem; opacity: .8; }

/* Cijferbalk onder de hero */
.hero-cijfers {
	margin-top: clamp(48px, 7vw, 84px);
	border-top: 1px solid var(--line);
	padding-top: 28px;
}
.hero-cijfers .cijfer {
	font-family: var(--kop);
	font-size: clamp(1.9rem, 3vw, 2.5rem);
	font-weight: 500;
	color: var(--merk);
	font-variant-numeric: tabular-nums;
	margin: 0;
}
.hero-cijfers .cijfer-label {
	font-size: .88rem;
	color: var(--muted);
	max-width: 26ch;
	margin: 0;
}

@media (max-width: 860px) {
	.hero-beeld { aspect-ratio: 16 / 11; border-radius: 120px 20px 120px 20px; }
}

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding-block: clamp(44px, 6vw, 72px) 28px;
	position: relative;
	overflow: hidden;
}

/* Alleen het beeldmerk als watermerk, zonder het woordmerk, en helemaal
   binnen de footer. Liep de vorm de rand uit, dan knipte de footer hem af
   en bleven er twee losse vlekken over die niet meer als het merk lezen.
   Hij loopt bewust achter de contactkolom door: dat is wat een watermerk
   doet. Op 8 procent dekking blijft de tekst erboven gewoon leesbaar. */
.footer-watermerk {
	position: absolute;
	right: clamp(24px, 5vw, 88px);
	bottom: clamp(40px, 6vw, 74px);
	width: clamp(150px, 17vw, 250px);
	height: auto;
	opacity: .08;
	pointer-events: none;
	z-index: 0;
}
.footer-watermerk path { fill: var(--merk); }
.site-footer > .wp-block-group { position: relative; z-index: 1; }

.site-footer h2,
.site-footer h3,
.site-footer h4 {
	font-family: var(--sans);
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--muted);
	font-weight: 600;
	margin-bottom: 14px;
}
.site-footer p,
.site-footer li { font-size: .94rem; color: var(--muted); }

/* De footerkolommen zijn linklijsten, geen opsommingen. Zonder bolletjes
   lezen ze als navigatie, wat ze ook zijn. */
.site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.site-footer li + li { margin-top: .3rem; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--merk); }
.site-footer address { font-style: normal; line-height: 1.5; }

.footer-onderregel {
	margin-top: 44px;
	padding-top: 22px;
	border-top: 1px solid var(--line);
	font-size: .86rem;
	color: var(--muted);
}

/* ============================================================
   Bewegingsvoorkeur
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.wp-block-button__link:hover, .btn:hover { transform: none; }
}