/* Vloeiend naar een anker springen. Verving de plugin Page scroll to id, die
   hier alleen daarvoor draaide. De header is sticky maar verdwijnt bij naar
   beneden scrollen, dus er is geen hoogtecorrectie nodig. */
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

/* Met zacht scrollen (Lenis, assets/js/zacht-scrollen.js): zolang Lenis zelf
   uitrolt, zou scroll-behavior: smooth daarmee botsen. Ankerlinks blijven
   daarbuiten gewoon vloeiend springen. */
html.lenis.lenis-smooth { scroll-behavior: auto; }

/* Geen doorveren op computers (trackpad, Magic Mouse): anders verschijnt boven
   en onder de lichte paginakleur, ook onder de donkere footer. Telefoons en
   tablets houden het doorveren. */
@media (hover: hover) and (pointer: fine) {
	:root, body { overscroll-behavior-y: none; }
}

/* Telefoons veren wel door. Wat daarbij boven of onder de pagina verschijnt, is
   de achtergrond van <html>: licht bovenaan, en in de onderste helft van de
   pagina de footerkleur (klasse lh-onderaan uit header-scroll.js), zodat er
   onder de footer geen lichte strook te zien is. Body heeft een eigen
   achtergrond, dus binnen de pagina verandert er niets. */
html { background-color: #f8fafb; }
html.lh-onderaan { background-color: var(--wp--preset--color--contrast, #001722); }

/* Een pagina is zelden een heel aantal pixels hoog; zonder deze schaduw kan er
   onder de footer een lichte haarlijn verschijnen. */
footer.wp-block-template-part { box-shadow: 0 2px 0 var(--wp--preset--color--contrast, #001722); }

/* Typografie: lopende tekst zonder los woord op de laatste regel (koppen staan
   via de globale stijlen al op pretty). Bewust geen automatisch afbreken met
   streepjes: Safari negeert de minimale woordlengte en breekt dan ook
   "vrou-welijke" af. Alleen een woord dat echt niet past (een lange samenstelling,
   e-mailadres of webadres), mag doorlopen op de volgende regel in plaats van
   buiten beeld te vallen. "anywhere" in plaats van "break-word": dan krimpt ook
   een kolom of kaart mee in plaats van door het woord opgerekt te worden. */
p, li, figcaption { text-wrap: pretty; }
h1, h2, h3, h4, p, li, .wp-block-button__link { overflow-wrap: anywhere; }

/* Kaarten op mobiel (deelnemers, bestuur, aanbevelingen), op één plek. Gangbaar
   op telefoons: 12-16px binnenruimte bij twee kaarten naast elkaar, 16-20px bij
   één kaart over de breedte, 12px tussen kaarten. De plugins lezen deze waarden
   tot 700px breed; daarboven gelden de instellingen in het blok. */
:root {
	--lh-kaart-binnen-mobiel: 14px;
	--lh-kaart-binnen-mobiel-breed: 20px;
	--lh-kaart-tussen-mobiel: 12px;
}

/* Geen grijze tikvlakken op telefoons; toetsenbordfocus staat in focus.css. */
html { -webkit-tap-highlight-color: transparent; }

/* Las Hotellas - basisopmaak: achtergrond, knoppen en formulier. */
body {
	background-color: #f8fafb;
	background-image: radial-gradient(135% 110% at 0% -6%, #dbe9f2 0%, #e6eef3 32%, #f0f5f8 58%, #f8fafb 84%);
	/* Vaste hoogte, zodat het verloop niet meerekt als de pagina langer wordt
	   (bijvoorbeeld bij "Toon meer" op de agenda). 5000px is ongeveer een
	   gemiddelde pagina; daaronder loopt de effen achtergrondkleur door. */
	background-size: 100% 5000px;
	background-attachment: scroll;
	background-repeat: no-repeat;
}

/* Keep one continuous backdrop behind every page rather than a separate hero effect. */
.wp-site-blocks {
	min-height: 100vh;
	background: transparent;
}

/* The navigation remains a clean white surface. */
.wp-site-blocks > header,
.wp-site-blocks > header > .wp-block-group {
	background-color: #fff;
}

/* One consistent hover state for every Gutenberg button variation. */
.wp-block-button .wp-block-button__link {
	transition: background-color 380ms cubic-bezier(.4, 0, .2, 1), border-color 380ms cubic-bezier(.4, 0, .2, 1), color 380ms cubic-bezier(.4, 0, .2, 1), box-shadow 380ms cubic-bezier(.4, 0, .2, 1);
}

/* Gevulde knoppen krijgen een onzichtbare rand van 1px, zodat ze even groot zijn
   als omlijnde knoppen. */
.wp-block-button:not(.is-style-outline) .wp-block-button__link {
	border: 1px solid transparent;
}

/* Bij hover vult de knop zich; de rand kleurt mee naar dezelfde eindkleur,
   zodat hij in de vulling opgaat in plaats van als eigen ring achter te blijven.
   Alleen op apparaten met een muis: op een telefoon blijft :hover na een tik
   hangen, waardoor bijvoorbeeld een carrouselpijl donker bleef staan. Telefoons
   krijgen in plaats daarvan het indrukken hieronder (Micro-interacties). */
@media (hover: hover) {
	.wp-block-button .wp-block-button__link:hover {
		background-color: var(--wp--preset--color--contrast, #001722) !important;
		border-color: var(--wp--preset--color--contrast, #001722) !important;
		color: var(--wp--preset--color--base, #fff) !important;
		box-shadow: 0 4px 12px rgba(0, 23, 34, .08);
	}
}

/* Icons inherit the same white hover colour as the button label. */
.wp-block-button .wp-block-button__link:hover :is(svg, svg *) {
	fill: currentColor;
}

/* Formulieropmaak (Fluent Forms). Geldt voor elk formulier, ongeacht het ID.
   De standaardopmaak van Fluent Forms staat uit (functions.php); alles hier. */
.fluentform {
	--lh-form-ink: var(--wp--preset--color--contrast, #001722);
	--lh-form-base: var(--wp--preset--color--base, #fff);
	--lh-form-error: #b42318;
}

/* Ruimte boven/onder als padding: marge zou op mobiel (vlak zonder padding)
   buiten het witte vlak vallen. Hoger dan WordPress' "eerste kind"-regel. */
.wp-site-blocks .wp-block-group > .fluentform {
	margin-block: 0;
	padding-block: 24px;
}

.fluentform .frm-fluent-form .ff-el-group {
	margin: 0;
	padding: 15px 0;
}

.fluentform .frm-fluent-form .ff-el-input--label {
	display: block;
	margin: 0 0 15px;
	padding: 0;
	line-height: 19px;
}

.fluentform .frm-fluent-form .ff-el-input--label label {
	display: block;
	margin: 0;
	color: rgba(0, 0, 0, .85);
	font-size: 16px;
	font-weight: 600;
	line-height: 19px;
}

.fluentform .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	content: " *";
	margin-left: 0;
	color: var(--lh-form-error);
	font-weight: 400;
}

.fluentform .frm-fluent-form .ff-el-form-control {
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: none;
	height: 43px;
	margin: 0;
	padding: 0 14px;
	border: 1px solid color-mix(in srgb, var(--lh-form-ink) 22%, transparent);
	border-radius: 6px;
	background-color: var(--lh-form-base);
	color: var(--lh-form-ink);
	font-family: inherit;
	font-size: 16px;
	line-height: 1;
	box-shadow: none;
	transition: border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
}

.fluentform .frm-fluent-form textarea.ff-el-form-control {
	height: 120px;
	min-height: 0;
	padding: 14px;
	line-height: 1.3;
	resize: vertical;
}

.fluentform .frm-fluent-form .ff-el-form-control::placeholder {
	color: rgba(0, 0, 0, .7);
	opacity: .5;
}

/* Een veld krijgt bij toetsenbordfocus een eigen markering: de rand in het
   huisblauw met een zachte ring eromheen. De algemene focuslijn uit focus.css
   zetten we hier uit, anders komt die er als tweede ring omheen te liggen. */
.fluentform .frm-fluent-form .ff-el-form-control:focus-visible {
	border-color: var(--wp--preset--color--accent-1, #0074a9);
	outline: 0 !important;
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1, #0074a9) 25%, transparent) !important;
}

.fluentform .frm-fluent-form .ff-el-is-error .ff-el-form-control {
	border-color: var(--lh-form-error);
}

.fluentform .frm-fluent-form .ff-el-is-error .text-danger,
.fluentform .ff-errors-in-stack .error {
	margin-top: 8px;
	color: var(--lh-form-error);
	font-size: var(--wp--preset--font-size--small, .875rem);
}

.fluentform .frm-fluent-form .ff_submit_btn_wrapper {
	margin: 10px 0 0;
	padding: 0;
}

/* Bevestiging na verzenden: functioneel groen (zoals foutmeldingen functioneel
   rood zijn), ronding 6px zoals alle vlakken, tekst in de inktkleur. Het vinkje
   staat in de eerste regel, zodat de tekst eronder gewoon links begint. */
.fluentform {
	--lh-form-success: #1e7a46;
}
.fluentform .ff-message-success {
	box-sizing: border-box;
	margin: 0 auto 24px;
	padding: 20px 24px;
	border: 1px solid color-mix(in srgb, var(--lh-form-success) 22%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--lh-form-success) 8%, #fff);
	color: var(--wp--preset--color--contrast, #001722);
	box-shadow: none;
	overflow-wrap: break-word;
}

.fluentform .ff-message-success p:first-child::before {
	content: "";
	display: inline-block;
	width: .95em;
	height: .95em;
	margin-right: .35em;
	vertical-align: -.1em;
	background-color: var(--lh-form-success);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.5l5 5L20 6%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Cpath d=%27M4 12.5l5 5L20 6%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%273%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Foutmeldingen in dezelfde vorm, functioneel rood: de algemene melding onder de
   knop (bijvoorbeeld "Verdachte activiteit") als vlak met een sluitkruisje, en de
   meldingen per veld als rode regel met hetzelfde kleine icoon ervoor. */
.fluentform .ff-errors-in-stack {
	margin-top: 16px;
}
.fluentform .ff-errors-in-stack .error {
	position: relative;
	box-sizing: border-box;
	margin: 0 0 8px;
	padding: 14px 44px 14px 18px;
	border: 1px solid color-mix(in srgb, var(--lh-form-error) 25%, transparent);
	border-radius: 6px;
	background: color-mix(in srgb, var(--lh-form-error) 7%, #fff);
	color: var(--wp--preset--color--contrast, #001722);
	font-size: var(--wp--preset--font-size--small, .875rem);
	line-height: 1.5;
}
.fluentform .ff-errors-in-stack .error .error-clear {
	position: absolute;
	top: 50%;
	right: 14px;
	transform: translateY(-50%);
	color: var(--lh-form-error);
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
}
.fluentform .ff-errors-in-stack .error::before,
.fluentform .frm-fluent-form .ff-el-is-error .text-danger::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .4em;
	vertical-align: -.15em;
	background-color: var(--lh-form-error);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27/%3E%3Cpath d=%27M12 7v6.5%27 stroke=%27%23000%27 stroke-width=%272.2%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2712%27 cy=%2717%27 r=%271.3%27/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 viewBox=%270 0 24 24%27%3E%3Ccircle cx=%2712%27 cy=%2712%27 r=%279.5%27 fill=%27none%27 stroke=%27%23000%27 stroke-width=%272%27/%3E%3Cpath d=%27M12 7v6.5%27 stroke=%27%23000%27 stroke-width=%272.2%27 stroke-linecap=%27round%27/%3E%3Ccircle cx=%2712%27 cy=%2717%27 r=%271.3%27/%3E%3C/svg%3E") center / contain no-repeat;
}

.fluentform .ff-message-success p {
	margin: 0;
}

.fluentform .ff-message-success p + p {
	margin-top: 6px;
}

/* Subtle, tactile styling for the native Gutenberg Accordion block. */
.wp-block-accordion {
	--lh-accordion-duration: 540ms;
	--lh-accordion-ease: cubic-bezier(.4, 0, .2, 1);
}

.wp-block-accordion-item {
	transform-origin: top center;
	transition: background-color 280ms ease, border-color 280ms ease, box-shadow 360ms var(--lh-accordion-ease);
}

.wp-block-accordion-item.is-open {
	border-color: var(--wp--preset--color--accent, currentColor);
	box-shadow: 0 14px 34px rgba(25, 31, 34, .055);
}

/* De onderstreping bij aanwijzen vloeit in (kleur van doorzichtig naar tekstkleur)
   in plaats van aan te springen. */
.wp-block-accordion-heading__toggle {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: .15em;
	transition: color 220ms ease, text-decoration-color 220ms ease;
}

.wp-block-accordion-heading__toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, currentColor);
	outline-offset: 4px;
}

.wp-block-accordion-heading__toggle-icon {
	display: inline-block;
	transform-origin: center;
	transition: color 220ms ease;
}

/* Keep the site's native chevron open/close state; only smooth its transition. */
/* Het pijltje draait in hetzelfde tempo en dezelfde curve als het paneel opent. */
.wp-block-accordion.tw-icon-arrow .wp-block-accordion-heading__toggle-icon {
	position: relative;
	top: -2px;
	transition: transform var(--lh-accordion-duration) var(--lh-accordion-ease);
}

.wp-block-accordion.tw-icon-arrow .wp-block-accordion-heading__toggle-icon svg {
	transition: transform var(--lh-accordion-duration) var(--lh-accordion-ease);
}

.wp-block-accordion-panel {
	will-change: height, opacity;
}

.wp-block-accordion-item.lh-accordion-is-animating .wp-block-accordion-panel {
	overflow: hidden;
	pointer-events: none;
}

@media (hover: hover) {
	/* Alleen een onderstreping bij aanwijzen; de kleur blijft staan. */
	.wp-block-accordion-heading__toggle:hover {
		text-decoration-color: currentColor;
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-accordion-item,
	.wp-block-accordion-heading__toggle,
	.wp-block-accordion-heading__toggle-icon {
		transition-duration: .01ms !important;
	}
}
/* De verzendknop draagt de Gutenberg-knopklassen (in te stellen in Fluent
   Forms: Verzendknop -> CSS-klasse); zo volgt hij Stijlen -> Knoppen via
   lashotellas_form_button_css() in functions.php. */
.fluentform .ff-btn-submit.wp-block-button__link.wp-element-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: auto !important;
	min-height: 0;
	margin: 0;
	border: 0 !important;
	box-shadow: none;
	transition: background-color 380ms cubic-bezier(.4, 0, .2, 1), color 380ms cubic-bezier(.4, 0, .2, 1), box-shadow 380ms cubic-bezier(.4, 0, .2, 1);
}

.fluentform .ff-btn-submit.wp-block-button__link.wp-element-button:is(:hover, :focus-visible) {
	background-color: var(--wp--preset--color--contrast, #001722) !important;
	color: var(--wp--preset--color--base, #fff) !important;
	box-shadow: 0 4px 12px rgba(0, 23, 34, .08);
	opacity: 1;
}

/* Hetzelfde pijl-icoon (Material Symbols "arrow_forward") als de andere knoppen. */
.fluentform .ff-btn-submit.wp-block-button__link.wp-element-button::after {
	content: '';
	flex: 0 0 auto;
	width: 1.25em;
	height: 1.25em;
	margin-left: .5em;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M686-450H160v-60h526L438-758l42-42 320 320-320 320-42-42 248-248Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Behoud toetsenbordfocus zonder kaders na muisklik. */
:where(a, button, input, select, textarea, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none !important;
  box-shadow: none !important;
}
/* Houd browser-autofill vlak en passend bij het formulier. */
.fluentform :is(input, textarea, select):-webkit-autofill {
  -webkit-text-fill-color: var(--lh-form-ink) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--lh-form-base) inset !important;
  box-shadow: 0 0 0 1000px var(--lh-form-base) inset !important;
}

/* ---------------------------------------------------------------------------
   Cookiebanner (Complianz) in de huisstijl van Las Hotellas.
   Complianz laadt zijn eigen banner-CSS na het thema. De regels hieronder zijn
   daarom vanaf de container-id geschreven, zodat ze winnen op volgorde zonder
   dat er !important aan te pas komt.
   --------------------------------------------------------------------------- */

/* Het zwevende Complianz-tabje blijft verborgen; de footerlink
   "Cookie-instellingen" opent de banner opnieuw. */
#cmplz-manage-consent .cmplz-manage-consent {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	--cmplz_hyperlink_color: var(--wp--preset--color--accent-1, #0074a9);
	--lh-banner-line: var(--wp--preset--color--accent-6, #e8ebed66);
	font-family: var(--wp--preset--font-family--poppins), Poppins, sans-serif;
	box-shadow: 0 24px 60px -28px rgba(0, 23, 34, .38), 0 4px 12px rgba(0, 23, 34, .08);
	animation-duration: .28s;
}

#cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in {
	animation-duration: .2s;
}

/* Titel links uitgelijnd en als kop. Het lege logo-vak van Complianz vervalt. */
#cmplz-cookiebanner-container .cmplz-header {
	grid-template-columns: 1fr auto;
	margin-bottom: 2px;
}

#cmplz-cookiebanner-container .cmplz-logo {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-title {
	grid-column-start: 1;
	justify-self: start;
	margin: 0;
	font-family: inherit;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--wp--preset--color--contrast, #001722);
}

/* Sluitknop: vol in de tekstkleur, zonder hovereffect. */
#cmplz-cookiebanner-container .cmplz-close,
#cmplz-cookiebanner-container .cmplz-close:hover {
	grid-column-start: 2;
	color: var(--wp--preset--color--contrast, #001722);
	font-size: 20px;
	line-height: 20px;
	text-decoration: none;
	transition: none;
}

/* Een gewoon kruisje (het sluit-icoon van WordPress zelf) in plaats van het
   icoon dat Complianz met JavaScript plaatst. */
#cmplz-cookiebanner-container .cmplz-close svg {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-close::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	margin: 0;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5l14 14M19 5L5 19' fill='none' stroke='%23000' stroke-width='2.25' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* Nooit een kader om de sluitknop, ook niet als Complianz hem bij het openen
   de focus geeft. Het kruis is altijd donkerblauw, ook met focus. */
#cmplz-cookiebanner-container .cmplz-close:focus,
#cmplz-cookiebanner-container .cmplz-close:focus-visible {
	outline: 0 !important;
	box-shadow: none !important;
	color: var(--wp--preset--color--contrast, #001722);
}


/* Lopende tekst met dezelfde regelafstand als de site. */
#cmplz-cookiebanner-container .cmplz-message {
	line-height: 1.6;
	color: var(--wp--preset--color--contrast, #001722);
}

#cmplz-cookiebanner-container .cmplz-message a,
#cmplz-cookiebanner-container .cmplz-links .cmplz-link {
	color: var(--wp--preset--color--accent-1, #0074a9);
	text-underline-offset: .18em;
	transition: color .25s ease;
}

#cmplz-cookiebanner-container .cmplz-message a:hover,
#cmplz-cookiebanner-container .cmplz-links .cmplz-link:hover {
	color: var(--wp--preset--color--contrast, #001722);
}

/* Categorieregels: rustige tint uit het palet in plaats van neutraal grijs. */
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category {
	background-color: var(--lh-banner-line);
	border-radius: 6px;
}

#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-category-title {
	font-weight: 600;
	font-size: .9375rem;
	color: var(--wp--preset--color--contrast, #001722);
}

#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-description {
	font-size: .875rem;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast, #001722);
}

/* "Altijd actief" stond op groen; dat hoort niet bij het palet. */
#cmplz-cookiebanner-container .cmplz-categories .cmplz-category .cmplz-category-header .cmplz-always-active {
	color: var(--wp--preset--color--accent-1, #0074a9);
	font-weight: 600;
	font-size: .75rem;
	letter-spacing: .02em;
}

/* Geen haarlijnen: de ruimte komt uit de rasterafstand van de banner. */
#cmplz-cookiebanner-container .cmplz-divider {
	display: none;
}

/* Categorieën (na "Instellingen"): dezelfde 16px boven en onder als de rest
   van de banner, 10px ertussen. Een raster in plaats van marges per categorie,
   anders houdt de laatste zichtbare categorie zijn marge (de verborgen
   categorieën staan erachter). Alleen in de zichtbare toestand (cmplz-fade-in). */
#cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in {
	display: grid;
	gap: 10px;
	margin-top: 16px;
}

#cmplz-cookiebanner-container .cmplz-categories .cmplz-category {
	margin: 0;
}

/* Onder de knoppen staat het vak met documentlinks. Complianz verbergt die
   links zelf (ze staan al in de berichttekst), maar laat het lege vak staan;
   als rasteronderdeel levert dat een extra regel ruimte onder de knoppen.
   Haal dit weg zodra de documentlinks in de banner wel getoond worden. */
#cmplz-cookiebanner-container .cmplz-documents {
	display: none;
}

#cmplz-cookiebanner-container .cmplz-cookiebanner {
	padding: 24px;
	grid-gap: 16px;
}

/* Knoppen: één maat voor alle vier, ook voor knoppen die Complianz als link
   uitvoert (die kregen geen padding). Dezelfde overgang en hoverstijl als
   elke Gutenberg-knop. */
#cmplz-cookiebanner-container .cmplz-buttons {
	gap: 10px;
	flex-wrap: nowrap;
	margin: 0;
}

/* Padding, ronding en typografie komen uit Stijlen -> Knoppen, via
   lashotellas_form_button_css() in functions.php. */
#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn,
#cmplz-cookiebanner-container .cmplz-buttons a.cmplz-btn {
	flex: 0 1 auto;
	width: auto;
	min-height: 0;
	font-size: var(--wp--preset--font-size--small, .875rem);
	border-width: 1px;
	border-style: solid;
	font-family: inherit;
	font-weight: 500;
	letter-spacing: 0;
	transition: background-color .38s cubic-bezier(.4, 0, .2, 1),
		border-color .38s cubic-bezier(.4, 0, .2, 1),
		color .38s cubic-bezier(.4, 0, .2, 1),
		box-shadow .38s cubic-bezier(.4, 0, .2, 1);
}

#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:hover {
	background-color: var(--wp--preset--color--contrast, #001722);
	border-color: var(--wp--preset--color--contrast, #001722);
	color: var(--wp--preset--color--base, #fff);
	box-shadow: 0 4px 12px rgba(0, 23, 34, .08);
}

/* Mobiel: compacte balk onderaan in plaats van een half scherm. Accepteren en
   weigeren staan naast elkaar, even groot en in dezelfde kleur (AP: weigeren
   moet net zo makkelijk zijn als accepteren; de kleuren staan in Complianz).
   Instellingen blijft op de eerste laag, als tekstlink eronder. De links naar
   cookiebeleid en privacyverklaring staan in de tekst. */
@media (max-width: 767px) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner {
		padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
		grid-gap: 10px;
	}
	#cmplz-cookiebanner-container .cmplz-title {
		font-size: var(--wp--preset--font-size--medium, 1rem);
	}
	#cmplz-cookiebanner-container .cmplz-message {
		font-size: var(--wp--preset--font-size--small, .875rem);
		line-height: 1.5;
	}
	#cmplz-cookiebanner-container .cmplz-buttons {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
	}
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
		width: 100%;
		padding-inline: 10px;
		white-space: nowrap;
	}
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences,
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-save-preferences {
		grid-column: 1 / -1;
	}
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn.cmplz-view-preferences {
		padding-block: 4px;
		background: none;
		border-color: transparent;
		color: var(--wp--preset--color--contrast, #001722);
		text-decoration: underline;
		text-underline-offset: 3px;
		box-shadow: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	#cmplz-cookiebanner-container .cmplz-cookiebanner,
	#cmplz-cookiebanner-container .cmplz-categories.cmplz-fade-in {
		animation: none;
	}
}

/* Blokstijl "Parallax" op het Cover-blok (functions.php): de foto is boven en
   onder --lh-parallax-uitslag groter dan het kader en schuift daarbinnen mee,
   met de voortgang (-1 tot 1) uit assets/js/parallax.js. Zonder script of met
   "minder beweging" staat hij stil in het midden. */
.wp-block-cover.is-style-lh-parallax {
	--lh-parallax-uitslag: 40px;
	overflow: hidden;
}

.wp-block-cover.is-style-lh-parallax .wp-block-cover__image-background {
	top: calc(-1 * var(--lh-parallax-uitslag));
	bottom: auto;
	height: calc(100% + 2 * var(--lh-parallax-uitslag));
	transform: translate3d(0, calc(var(--lh-parallax-voortgang, 0) * -1 * var(--lh-parallax-uitslag)), 0);
	will-change: transform;
}

/* Gekantelde telefoon: de minimale hoogte uit de editor (840px) is daar ruim twee
   schermen. Dan één schermhoogte; is de tekst langer, dan groeit het kader mee. */
@media (orientation: landscape) and (max-height: 500px) {
	.wp-block-cover.is-style-lh-parallax {
		min-height: 100svh !important;
	}
}

/* Navigatiebalk: verdwijnt bij naar beneden scrollen, komt terug bij omhoog scrollen.
   De klasse lh-header-verborgen zet assets/js/header-scroll.js. */
.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0px);
	z-index: 100;
	transition: transform 350ms cubic-bezier(.4, 0, .2, 1), box-shadow 350ms cubic-bezier(.4, 0, .2, 1);
}

.wp-site-blocks > header.wp-block-template-part.lh-header-los {
	box-shadow: 0 4px 12px rgba(0, 23, 34, .06);
}

.wp-site-blocks > header.wp-block-template-part.lh-header-verborgen {
	transform: translateY(calc(-100% - var(--wp-admin--admin-bar--height, 0px)));
	box-shadow: none;
}

@media (max-width: 1023px) {
	.wp-site-blocks > header.wp-block-template-part {
		z-index: 100001;
	}
}

/* Tot 600px scrollt de WordPress-beheerbalk mee (position: absolute), terwijl
   --wp-admin--admin-bar--height 46px blijft; zonder dit plakt de balk 46px te laag. */
@media (max-width: 600px) {
	.wp-site-blocks > header.wp-block-template-part {
		top: 0;
	}

	.wp-site-blocks > header.wp-block-template-part.lh-header-verborgen {
		transform: translateY(-100%);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks > header.wp-block-template-part {
		transition: none;
	}
}

/* Alle foto's in de pagina-inhoud faden op dezelfde manier zacht in zodra ze
   binnen zijn (beeld-infaden.js); logo's in header, menu en footer niet, en ook
   niet wat bij het openen al in beeld staat (WordPress laadt dat zonder "lazy"):
   dat verschijnt meteen, voor de snelheid (Google telt anders pas na het infaden).
   Alleen met JavaScript (klasse lh-js); bij "minder beweging" zonder overgang. */
.lh-js main img[loading="lazy"]:not(.lh-geladen):not(.lh-carousel img) {
	opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
	.lh-js main img {
		transition: opacity .6s cubic-bezier(.65, 0, .35, 1);
	}
}

/* Footer-reveal (zoals Continuüm Invest). De pagina-inhoud (<main>) ligt met een
   rechte onderrand en een zachte schaduw óver de footer (bewust geen ronde hoeken:
   die passen niet bij de strakke, volle breedte van de secties). Op desktop
   staat de footer stil (sticky) en komt hij eronder tevoorschijn; op mobiel en
   tablet scrolt hij gewoon mee. De inhoud
   krijgt dezelfde achtergrond als body, anders schijnt de footer erdoorheen. */
.wp-site-blocks > main {
	position: relative;
	z-index: 1;
	margin-bottom: 0 !important;
	background-color: #f8fafb;
	background-image: radial-gradient(135% 110% at 0% -6%, #dbe9f2 0%, #e6eef3 32%, #f0f5f8 58%, #f8fafb 84%);
	background-size: 100% 5000px;
	background-repeat: no-repeat;
}
/* De schaduw die de pagina op de footer werpt. Een box-shadow in de huisstijlkleur
   valt weg tegen het donkerblauw van de footer; daarom een eigen strook in zwart
   onder de onderrand, met een zacht uitlopend verloop (geen harde knik). Hij hangt
   aan <main>, dus schuift mee over de stilstaande footer. */
.wp-site-blocks > main::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	height: var(--lh-reveal-schaduw, 40px);
	pointer-events: none;
	background: linear-gradient(to bottom,
		rgba(0, 0, 0, .55) 0%,
		rgba(0, 0, 0, .38) 12%,
		rgba(0, 0, 0, .2) 32%,
		rgba(0, 0, 0, .08) 58%,
		rgba(0, 0, 0, .02) 82%,
		rgba(0, 0, 0, 0) 100%);
}
.wp-site-blocks > footer.wp-block-template-part {
	position: relative;
	z-index: 0;
	margin-top: 0 !important;
}
@media (min-width: 1024px) {
	.wp-site-blocks > main {
		--lh-reveal-schaduw: 96px;
	}
	.wp-site-blocks > footer.wp-block-template-part {
		position: sticky;
		bottom: 0;
	}
	.wp-site-blocks > footer.wp-block-template-part > .wp-block-group {
		/* Tegen haperen van de stilstaande footer in Safari. */
		transform: translateZ(0);
		backface-visibility: hidden;
	}
}

/* Footerlinks (navigatie, e-mail, juridische links): standaard zonder
   onderstreping, bij hover en toetsenbordfocus wel. Gutenberg kent geen
   hoverstijl per blok, daarom hier. */
footer.wp-block-template-part a {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: transparent;
	text-underline-offset: .2em;
	transition: text-decoration-color var(--lh-snel) var(--lh-ease), opacity var(--lh-snel) var(--lh-ease);
}
footer.wp-block-template-part a:hover,
footer.wp-block-template-part a:focus-visible {
	text-decoration-color: currentColor;
}

/* Ankerlinks (zoals "Sluit je aan" -> #formulier): een sectie begint met zijn
   eigen ruimte boven (Sectie: 70). Zonder correctie landt de tekst daardoor
   een flink stuk onder de bovenrand en lijkt de sprong niet ver genoeg. Nu komt
   de eerste tekst op 24px van de bovenrand; de header is bij omlaag scrollen
   dan al weggeschoven. */
.is-style-sectie[id] {
	scroll-margin-top: calc(24px - var(--wp--preset--spacing--70));
}

/* ---------------------------------------------------------------------------
   Micro-interacties: één tempo en één curve voor de hele site.
   --lh-snel voor kleur en onderstreping, --lh-rustig voor beweging.
   --------------------------------------------------------------------------- */
:root {
	--lh-ease: cubic-bezier(.4, 0, .2, 1);
	--lh-snel: 220ms;
	--lh-rustig: 380ms;
}

/* Links in lopende tekst: de onderstreping staat er altijd (herkenbaar als link),
   half doorzichtig, en kleurt bij aanwijzen vloeiend vol mee. */
main :where(p, li, figcaption, td) a:where(:not(.wp-element-button)) {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: color-mix(in srgb, currentColor 35%, transparent);
	transition: color var(--lh-snel) var(--lh-ease), text-decoration-color var(--lh-snel) var(--lh-ease);
}
main :where(p, li, figcaption, td) a:where(:not(.wp-element-button)):is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

/* Desktopmenu (Twentig "onderstrepen bij hover"): de lijn vloeit in in plaats
   van aan te springen. Dezelfde offset als Twentig, dus niets verspringt. */
.wp-block-navigation.tw-nav-hover-underline > ul.wp-block-navigation__container li a,
.wp-block-navigation.tw-nav-hover-underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container li a {
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-thickness: 1px;
	text-underline-offset: auto;
	text-decoration-color: transparent;
	transition: text-decoration-color var(--lh-snel) var(--lh-ease), color var(--lh-snel) var(--lh-ease);
}
.wp-block-navigation.tw-nav-hover-underline > ul.wp-block-navigation__container li a:is(:hover, :focus-visible),
.wp-block-navigation.tw-nav-hover-underline .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-container-content > ul.wp-block-navigation__container li a:is(:hover, :focus-visible) {
	text-decoration-color: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
	/* Pijl in een knop schuift bij aanwijzen een paar pixels mee in zijn richting:
	   de knop "wil" ergens heen. */
	.wp-block-button__link svg,
	.fluentform .ff-btn-submit.wp-block-button__link::after {
		transition: transform var(--lh-rustig) var(--lh-ease), fill var(--lh-rustig) var(--lh-ease);
	}
	@media (hover: hover) {
		.has-icon__arrow-right .wp-block-button__link:hover svg,
		.fluentform .ff-btn-submit.wp-block-button__link:hover::after { transform: translateX(4px); }
		.has-icon__arrow-down .wp-block-button__link:hover svg { transform: translateY(3px); }
		.has-icon__chevron-right .wp-block-button__link:hover svg { transform: translateX(2px); }
		.has-icon__chevron-left .wp-block-button__link:hover svg { transform: translateX(-2px); }
	}

	/* Indrukken: de knop veert heel licht in. Vooral op telefoons, waar geen
	   hover is, voelt een tik daardoor als een echte druk op de knop. */
	.wp-block-button .wp-block-button__link,
	.fluentform .ff-btn-submit.wp-block-button__link.wp-element-button,
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn {
		transition-property: background-color, border-color, color, box-shadow, transform;
		transition-duration: var(--lh-rustig), var(--lh-rustig), var(--lh-rustig), var(--lh-rustig), 160ms;
		transition-timing-function: var(--lh-ease);
	}
	.wp-block-button .wp-block-button__link:active,
	.fluentform .ff-btn-submit.wp-block-button__link.wp-element-button:active,
	#cmplz-cookiebanner-container .cmplz-buttons .cmplz-btn:active {
		transform: scale(.97) !important;
	}
}

/* Footer op tablet (600-1023px): vier smalle kolommen naast elkaar braken het
   e-mailadres en de straatnaam midden in het woord af. Hier: logo en tagline over
   de volle breedte, daaronder Navigatie en Contact naast elkaar; de lege
   tussenkolom (alleen ruimte op desktop) vervalt. */
@media (min-width: 600px) and (max-width: 1023px) {
	footer.wp-block-template-part .wp-block-columns {
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: var(--wp--preset--spacing--50) var(--wp--preset--spacing--60);
	}
	footer.wp-block-template-part .wp-block-columns > .wp-block-column {
		flex-basis: auto !important;
		margin: 0 !important;
		padding-bottom: 0 !important;
	}
	footer.wp-block-template-part .wp-block-columns > .wp-block-column:first-child {
		grid-column: 1 / -1;
	}
	footer.wp-block-template-part .wp-block-columns > .wp-block-column:not(:has(*)) {
		display: none;
	}
}

/* Knoplabels breken niet af zolang er ruimte is ("Alle / deelnemers" naast een
   kop op tablet): knop en knoppengroep krimpen niet, de kop ernaast wijkt uit.
   Is een label breder dan het hele vak (een lange tekst op een telefoon), dan
   loopt het netjes over twee regels door in plaats van buiten beeld te vallen. */
.wp-block-buttons,
.wp-block-buttons > .wp-block-button {
	flex-shrink: 0;
	max-width: 100%;
}
.wp-block-button__link {
	text-wrap: balance;
}

/* Footer op desktop: de lege kolom naast het logo geeft lucht op brede schermen
   (30%, zoals in de editor). Op smallere desktops krimpt die ruimte vloeiend mee
   (vanaf 1024px nul, op ~1600px weer de volle 30%); Navigatie en Contact
   schuiven dan op. */
@media (min-width: 1024px) {
	footer.wp-block-template-part .wp-block-columns > .wp-block-column:not(:has(*)) {
		flex-basis: clamp(0px, calc((100vw - 1024px) * .7), 30%) !important;
	}
	footer.wp-block-template-part .wp-block-columns > .wp-block-column:has(> .wp-block-heading) {
		flex-grow: 1;
	}
}

/* ---------------------------------------------------------------------------
   Mobiel: tikdoelen van ±44px zonder dat er iets verschuift. Een onzichtbare
   zone (::after) rond kleine links en knoppen; de opmaak blijft gelijk.
   --------------------------------------------------------------------------- */
footer.wp-block-template-part .wp-block-navigation-item__content,
footer.wp-block-template-part .wp-block-group p > a,
.wp-block-breadcrumbs a,
nav[aria-label="Kruimelpad"] a {
	position: relative;
}
footer.wp-block-template-part .wp-block-navigation-item__content::after,
footer.wp-block-template-part .wp-block-group p > a::after,
.wp-block-breadcrumbs a::after,
nav[aria-label="Kruimelpad"] a::after {
	content: "";
	position: absolute;
	inset: -10px -6px;
}
.wp-block-navigation__responsive-container-open::after {
	content: "";
	position: absolute;
	inset: -6px;
}

/* Koppen gebalanceerd over de regels: geen los woord op de laatste regel
   (zoals "u?" in de privacyverklaring). Iets specifieker dan de globale
   stijl (text-wrap: pretty), anders wint die. */
body :is(h2, h3, h4) {
	text-wrap: balance;
}

/* Ronde sociale iconen (footer, menu): tikzone van 44px rond het rondje van 36px. */
.wp-block-social-links.is-style-lh-omlijnd .wp-social-link { position: relative; }
.wp-block-social-links.is-style-lh-omlijnd .wp-social-link a::after {
	content: "";
	position: absolute;
	inset: -4px;
}