/*
Theme Name: Lotte Ruesink 2026
Theme URI: https://lotteruesink.nl
Author: Mull2media
Author URI: https://mull2media.nl
Description: Blokthema voor Lotte Ruesink Photography, opgezet vanuit het Lovable-ontwerp. Geen page-builder: alle content staat als blokken in de database, zodat die zowel in de editor als via de REST-API (Claude-koppeling) bewerkbaar is.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: lotteruesink-2026
*/

/* Opmaak hoort in theme.json. Hier staat alleen wat daar niet in kan.
   De waarden komen uit src/styles.css van het Lovable-ontwerp. */

html,
body {
	overflow-x: clip;
}

/* ---------------------------------------------------------------
   Labeltje boven een kop. In het ontwerp .eyebrow
   --------------------------------------------------------------- */
.is-style-eyebrow {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.76rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.24em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
}

/* Handschrift-accent. In het ontwerp .font-script */
.is-style-handschrift {
	font-family: var(--wp--preset--font-family--sacramento);
	font-size: clamp(1.9rem, 3vw, 2.4rem);
	line-height: 1.25;
	color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Tekstlink met onderlijn. In het ontwerp .text-link
   Het ontwerp gebruikt deze in plaats van gevulde knoppen op de
   hero en onder de secties.
   --------------------------------------------------------------- */
.is-style-tekstlink a,
a.is-style-tekstlink {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--terracotta);
	border-bottom: 1px solid currentColor;
	padding-bottom: 0.35rem;
	transition: color 200ms ease, border-color 200ms ease;
}

.is-style-tekstlink a:hover,
a.is-style-tekstlink:hover {
	color: var(--wp--preset--color--bruin);
}

/* Lichte variant, voor gebruik op een donkere foto. */
.is-style-tekstlink-licht a,
a.is-style-tekstlink-licht {
	display: inline-block;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.78rem;
	font-weight: 500;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	text-decoration: none;
	color: #fffdfa;
	border-bottom: 1px solid rgba(255, 253, 250, 0.6);
	padding-bottom: 0.35rem;
	transition: border-color 200ms ease;
}

.is-style-tekstlink-licht a:hover,
a.is-style-tekstlink-licht:hover {
	border-bottom-color: #fffdfa;
}

/* ---------------------------------------------------------------
   Kaart met zachte rand en schaduw. In het ontwerp .editorial-card
   --------------------------------------------------------------- */
.is-style-kaart {
	border: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--kaart);
	border-radius: 2rem;
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

/* ---------------------------------------------------------------
   Tekstblok links in de sectie in plaats van gecentreerd. Het ontwerp
   zet zulke koppen in een max-w-3xl zonder mx-auto; WordPress geeft elk
   kind van een constrained groep margin-inline:auto. Die regel staat in
   een :where() en heeft dus specificiteit 0 - een enkele klasse wint.
   --------------------------------------------------------------- */
.lr-links > * {
	margin-left: 0;
	margin-right: auto;
}

/* ---------------------------------------------------------------
   Tekst onder een kaarttitel. Het ontwerp houdt die smal (max-w-sm,
   384px) zodat hij in twee korte regels breekt; zonder maximum loopt
   hij over de volle kolombreedte en breekt hij heel anders af. Op
   verzoek van Rick op 380px. Een alinea kan zelf geen maximumbreedte
   zetten in de editor, vandaar deze klasse.
   --------------------------------------------------------------- */
.lr-kaarttekst {
	max-width: 380px;
	margin-inline: auto;
}

/* ---------------------------------------------------------------
   Navigatie in de header en de footerkolommen
   --------------------------------------------------------------- */
.wp-block-navigation {
	--wp--style--block-gap: 1.6rem;
}

.wp-block-navigation .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.72rem;
	font-weight: 500;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bruin-zacht);
	text-decoration: none;
}

.wp-block-navigation .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--terracotta);
}

/* ---------------------------------------------------------------
   Hero: de tekst staat op een donkere foto. Het ontwerp gebruikt
   een gradient die onderin zwaarder is dan bovenin, zodat het
   gezicht in de foto zichtbaar blijft.
   --------------------------------------------------------------- */
.lr-hero .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(37, 30, 27, 0.08), rgba(35, 29, 26, 0.72)) !important;
	opacity: 1 !important;
}

.lr-hero {
	min-height: 110svh;
}

@media (max-width: 781px) {
	.lr-hero {
		min-height: 92svh;
	}
}

/* Quote-banden over een foto: hetzelfde principe, iets lichter. */
.lr-band .wp-block-cover__background {
	background: linear-gradient(180deg, rgba(37, 30, 27, 0.35), rgba(35, 29, 26, 0.55)) !important;
	opacity: 1 !important;
}

/* ---------------------------------------------------------------
   Instagram-strook: zes vierkanten, volle breedte, minimale kier
   --------------------------------------------------------------- */
.lr-instagram .wp-block-columns {
	gap: 4px;
}

.lr-instagram figure,
.lr-instagram img {
	margin: 0;
	border-radius: 0 !important;
}

.lr-instagram img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	width: 100%;
	height: 100%;
	display: block;
}

/* Hover zoals in het ontwerp: de foto zoomt rustig in, er trekt een terracotta
   waas overheen en het Instagram-teken verschijnt in het midden. In het ontwerp
   doet Tailwind dit met group-hover op een React-component; hier is de strook
   opgebouwd uit gewone afbeeldingsblokken, dus gaat het via de link eromheen.
   Het teken is hetzelfde lucide-icoon, als data-URI zodat er geen extra
   verzoek bijkomt. */
.lr-instagram figure.wp-block-image a {
	position: relative;
	display: block;
	overflow: hidden;
}

.lr-instagram figure.wp-block-image img {
	transition: transform 0.7s ease;
}

.lr-instagram figure.wp-block-image a::after {
	content: "";
	position: absolute;
	inset: 0;
	background-color: rgba(176, 96, 60, 0); /* terracotta #b0603c */
	background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23fdf7ef' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='20' x='2' y='2' rx='5' ry='5'/><path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z'/><line x1='17.5' x2='17.51' y1='6.5' y2='6.5'/></svg>");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 1.75rem;
	opacity: 0;
	transition: opacity 0.3s ease, background-color 0.3s ease;
}

.lr-instagram figure.wp-block-image a:hover img,
.lr-instagram figure.wp-block-image a:focus-visible img {
	transform: scale(1.05);
}

.lr-instagram figure.wp-block-image a:hover::after,
.lr-instagram figure.wp-block-image a:focus-visible::after {
	background-color: rgba(176, 96, 60, 0.3);
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
	.lr-instagram figure.wp-block-image img,
	.lr-instagram figure.wp-block-image a::after {
		transition: none;
	}

	.lr-instagram figure.wp-block-image a:hover img {
		transform: none;
	}
}

/* Onder 782px stapelt WordPress kolommen met `flex-basis: 100% !important`.
   Dat is met een flex-regel niet te verslaan, dus wordt het blok hier een
   grid: flex-basis geldt alleen voor flex-items en raakt een grid-item niet.
   Zo blijven de zes vierkanten in twee rijen van drie staan, zoals in het
   ontwerp. Geldt op elke pagina - de strook staat in de footer. */
@media (max-width: 781px) {
	.lr-instagram .wp-block-columns {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
	}

	.lr-instagram .wp-block-columns > .wp-block-column {
		width: auto;
		min-width: 0; /* anders duwen brede beelden het raster uit elkaar */
	}
}

/* ---------------------------------------------------------------
   Kleine correcties
   --------------------------------------------------------------- */
.wp-block-image img {
	display: block;
}

/* De footerkolommen gebruiken kleine lijstjes zonder opsomtekens. */
.lr-footer ul {
	list-style: none;
	padding-left: 0;
	margin: 0;
}

.lr-footer li {
	margin-bottom: 0.5rem;
}

/* ---------------------------------------------------------------
   Reviews: in het ontwerp een horizontaal scrollende kaartenrij,
   geen raster. Kaart 292 x 182 px, quote in Cormorant en afgekapt
   op vier regels. Met scroll-snap in plaats van JavaScript.
   --------------------------------------------------------------- */
.lr-reviews .wp-block-columns {
	display: flex;
	flex-wrap: nowrap !important;
	gap: 16px;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-padding-left: 0;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--wp--preset--color--rand) transparent;
}

.lr-reviews .wp-block-column.lr-quote-card {
	flex: 0 0 292px !important;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	min-height: 182px;
	padding: 20px;
	border-radius: 2rem;
	border: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--kaart);
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

.lr-quote-label {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.6rem;
	line-height: 1.4;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--wp--preset--color--terracotta);
	margin: 0;
}

.lr-quote-text {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 0.875rem;
	line-height: 1.65;
	color: var(--wp--preset--color--bruin);
	margin: 0.5rem 0 0;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.lr-quote-naam {
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.6rem;
	line-height: 1.4;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--bruin-zacht);
	margin: auto 0 0;
	padding-top: 0.75rem;
}

/* ---------------------------------------------------------------
   Regelafstanden zoals in het ontwerp. Tailwind koppelt die aan de
   tekstgrootte (leading-7 bij text-sm, leading-8 bij text-base);
   theme.json kan dat niet per maat, dus hier.
   --------------------------------------------------------------- */
.has-klein-font-size {
	line-height: 2;      /* 14px -> 28px, leading-7 */
}

.has-basis-font-size {
	line-height: 2;      /* 16px -> 32px, leading-8 */
}

.has-groot-font-size {
	line-height: 1.78;   /* 18px -> 32px */
}

/* De carousel-kaart mag niet meegroeien met de kolomverdeling van
   WordPress; het ontwerp gebruikt een vaste kaartbreedte. */
.lr-reviews .wp-block-columns > .wp-block-column.lr-quote-card {
	flex: 0 0 292px !important;
	max-width: 292px;
	--wp--style--block-gap: 0;
}

.lr-quote-card > * {
	margin-block-start: 0;
}

/* De kaart rekent zijn breedte inclusief padding, anders wordt hij
   breder dan de 292px die het ontwerp aanhoudt. */
.lr-reviews .wp-block-column.lr-quote-card {
	box-sizing: border-box;
}

/* ---------------------------------------------------------------
   Fotoproducten: in het ontwerp is elke kolom een kaart met het
   beeld strak bovenin (vaste hoogte 288px) en 28px tekstpadding.
   --------------------------------------------------------------- */
.lr-producten .wp-block-columns > .wp-block-column {
	background: var(--wp--preset--color--kaart);
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 2rem;
	overflow: hidden;
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
}

.lr-producten .wp-block-column > figure {
	margin: 0;
}

.lr-producten .wp-block-column figure img {
	display: block;
	width: 100%;
	height: 288px;
	object-fit: cover;
	border-radius: 0;
	aspect-ratio: auto;
}

.lr-producten .wp-block-column > :not(figure) {
	padding-inline: 28px;
}

.lr-producten .wp-block-column > h3 {
	margin-top: 28px;
}

.lr-producten .wp-block-column > p:last-child {
	padding-bottom: 28px;
	margin-top: 12px;
}

/* ---------------------------------------------------------------
   Header-uitlijning, 1-op-1 uit het Lovable-ontwerp (21-08-2026).
   Bron: .section-shell + de headerklassen van heartfelt-captures-co.
   Kern: het menu staat LINKS tegen het logo aan en groeit mee
   (flex:1), de acties rechts krimpen niet. Alle selectors zijn
   dubbel geklasseerd, anders wint WP's eigen layout-CSS uit de
   <head> op bronvolgorde.
   --------------------------------------------------------------- */
.lr-header .lr-headerbalk {
	gap: 2rem;            /* ontwerp: gap-8 */
}

.lr-header .lr-logo {
	flex-shrink: 0;       /* ontwerp: shrink-0 */
	margin-left: -0.5rem; /* ontwerp: -ml-2 */
}

/* Kleurfilter uit het ontwerp. Het logo-PNG is zwart met transparantie;
   deze keten zet dat om naar #4b3827, praktisch de merkkleur `bruin`
   (#4a352f) - dus niet naar terracotta. Op de <img> en niet op de
   wrapper, zodat de focus-outline van de logolink onvertind blijft.
   Alleen de header: het footerlogo heeft geen .lr-logo en blijft zwart. */
.lr-header .lr-logo img {
	filter: invert(20%) sepia(22%) saturate(900%) hue-rotate(345deg) brightness(92%) contrast(88%);
}

.lr-header .lr-hoofdnav {
	flex: 1 1 0%;                        /* ontwerp: flex-1 */
	justify-content: flex-start;         /* ontwerp: justify-start */
	padding-left: 0;                     /* afwijking van het ontwerp (pl-4 / xl:pl-8), op verzoek */
}

/* Afstand tussen de menu-items: 20px (ontwerp had 0.5rem, 1.25rem vanaf
   1280px). Let op: `--wp--style--block-gap` op het nav-element helpt hier
   niet. WordPress zet met `:root :where(.is-layout-flex){gap:...}` een
   gap van 1.5rem rechtstreeks op de menulijst, en die wint van de
   variabele. Daarom hier op de lijst zelf. */
.lr-header .lr-hoofdnav .wp-block-navigation__container {
	gap: 20px;
}

.lr-header .lr-header-acties {
	flex-shrink: 0;       /* ontwerp: shrink-0 */
	gap: 0.75rem;         /* ontwerp: gap-3 */
}

.lr-header .lr-header-acties .wp-block-social-links {
	gap: 0.5rem;          /* ontwerp: gap-2 */
}

@media (min-width: 1024px) {
	.lr-header .lr-headerbalk {
		gap: 3rem;    /* ontwerp: lg:gap-12 */
	}
}


/* Het ontwerp klapt het menu pas bij 1024px in, WordPress standaard
   al bij 600px. Daartussen stond de balk anders uitgelijnd. */
@media (max-width: 1023.98px) {
	.lr-header .lr-hoofdnav .wp-block-navigation__responsive-container:not(.is-menu-open) {
		display: none;
	}

	/* Op mobiel bevat .lr-hoofdnav alleen nog de hamburger; die hoort rechts.
	   De balkregel bovenin zet flex-start voor het bureaublad. */
	.lr-header .lr-hoofdnav {
		justify-content: flex-end;
	}

	.lr-header .lr-hoofdnav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.lr-header .lr-header-acties .wp-block-social-links {
		display: none; /* ontwerp: het icoonrijtje zit in hidden lg:flex */
	}
}

/* ---------------------------------------------------------------
   Mobiel menu in de stijl van het ontwerp (lr-mobiel-menu, 01-09-2026).

   De openknop is 1-op-1 over te nemen: het ontwerp heeft
   `h-11 w-11 rounded-full border border-border/60 bg-background/70`
   met bij hover een terracotta vlak.

   Het paneel zelf staat NIET in de statische export - dat is een
   Radix-dialoog die React in een portal rendert. Dit is dus een eigen
   paneel in dezelfde vormtaal, boven op WordPress' eigen overlay, zodat
   het menu bewerkbaar blijft in de editor.

   Specificiteit: core's overlayregels komen uit de <head> ná deze
   stylesheet, dus alles hier is minstens viervoudig geklasseerd.
   --------------------------------------------------------------- */
@media (max-width: 1023.98px) {
	/* de hamburgerknop */
	.lr-header .lr-hoofdnav.wp-block-navigation .wp-block-navigation__responsive-container-open {
		width: 2.75rem;
		height: 2.75rem;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--wp--preset--color--rand);
		border-radius: 9999px;
		background-color: var(--wp--preset--color--creme);
		color: var(--wp--preset--color--bruin);
		transition: background-color 0.2s, color 0.2s;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .wp-block-navigation__responsive-container-open:hover {
		background-color: var(--wp--preset--color--terracotta);
		color: var(--wp--preset--color--wit);
	}

	/* het geopende paneel */
	.lr-header .lr-hoofdnav.wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open {
		padding: 1.25rem 1.5rem 12rem; /* onderruimte voor het vaste onderblok */
		background-color: var(--wp--preset--color--creme);
		color: var(--wp--preset--color--bruin);
	}

	/* kop "Menu" linksboven, zoals in het ontwerp. Via CSS, want in het
	   navigatieblok past geen los tekstblok. */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content::before {
		content: "Menu";
		display: block;
		width: 100%;
		font-family: var(--wp--preset--font-family--cormorant);
		font-size: 1.35rem;
		line-height: 2.25rem; /* even hoog als de sluitknop, dan lijnen ze uit */
		color: var(--wp--preset--color--bruin);
		padding: 0 0 0.75rem;
		margin-bottom: 0.75rem;
		border-bottom: 1px solid var(--wp--preset--color--rand);
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 0;
		right: 0;
		left: auto;
		width: 2.25rem;
		height: 2.25rem;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border: 1px solid var(--wp--preset--color--rand);
		border-radius: 9999px;
		color: var(--wp--preset--color--bruin);
	}

	/* lr-mobielpaneel: de links staan in het ontwerp LINKS en in gewone
	   schrijfwijze - niet in kapitalen zoals de balk. */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__container {
		gap: 0;
		align-items: stretch;
		text-align: left;
		width: 100%;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-item {
		width: 100%;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content {
		display: block;
		width: 100%;
		font-family: var(--wp--preset--font-family--manrope);
		font-size: 0.95rem;
		font-weight: 400;
		letter-spacing: 0.01em;
		text-transform: none;
		color: var(--wp--preset--color--bruin);
		padding: 0.7rem 1rem;
		border-radius: 0.75rem;
	}

	/* de pagina waar je bent: zacht vlak met terracotta tekst */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-item__content[aria-current="page"] {
		background-color: var(--wp--preset--color--zand);
		color: var(--wp--preset--color--terracotta);
	}

	/* de subitems onder "Aanbod" iets ingesprongen */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		padding-left: 2rem;
		color: var(--wp--preset--color--bruin-zacht);
	}

	/* het paneel zelf: uitgelijnd aan de bovenkant, niet gecentreerd */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__responsive-container-content {
		align-items: flex-start;
		justify-content: flex-start;
		padding-top: 0;
		width: 100%;
	}

	/* lr-uitklap: "Aanbod" klapt in het paneel dicht en open in plaats van
	   altijd uitgeklapt te staan. Core zet het submenu daar open met een regel
	   van zes klassen; vandaar hieronder drie keer dezelfde klasse. */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: none;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container.wp-block-navigation__submenu-container.wp-block-navigation__submenu-container {
		display: block;
		position: static;
		width: 100%;
		min-width: 0;
		border: 0;
		background: transparent;
		box-shadow: none;
		padding: 0;
		transform: none;
		opacity: 1;
		visibility: visible;
		height: auto;
		overflow: visible;
	}

	/* de pijl blijft zichtbaar en draait mee, zodat te zien is dat het klapt */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle {
		display: inline-flex;
		padding: 0.7rem 1rem;
		color: var(--wp--preset--color--bruin-zacht);
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle[aria-expanded="true"] svg {
		transform: rotate(180deg);
	}

	/* het uitklapicoon moet zichtbaar zijn, anders zie je niet dat Aanbod
	   openklapt. Core verstopt de pijl in het overlay. */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-submenu__toggle svg {
		display: inline-block;
		width: 1em;
		height: 1em;
		fill: currentColor;
		transition: transform 0.2s;
	}

	/* de knop naast het label zetten in plaats van eronder */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-item.has-child {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		width: 100%;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .wp-block-navigation-item.has-child > .wp-block-navigation-item__content {
		flex: 1 1 auto;
		width: auto;
	}

	/* ---- onderste blok: knop, icoontjes, contactgegevens ---- */
	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .lr-menuknop {
		width: 100%;
		margin-top: 1.5rem;
		padding: 1.5rem 1rem 0;
		border-top: 1px solid var(--wp--preset--color--rand);
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .lr-menuknop .wp-block-button {
		width: 100%;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .lr-menuknop .wp-block-button__link {
		display: block;
		width: 100%;
		text-align: center;
		padding-block: 0.9rem;
		border-radius: 9999px;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .lr-menusocials {
		gap: 1rem;
		padding: 1.25rem 1rem 0.75rem;
		justify-content: flex-start;
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .is-menu-open .lr-menucontact .wp-block-navigation-item__content {
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--wp--preset--color--bruin-zacht);
		padding: 0.15rem 1rem;
	}
}

/* Boven 1024px is de bureaubladbalk leidend. Zonder deze regel verschijnen de
   knop, de icoontjes en de contactregels ook in de balk - die staan daar al in
   .lr-header-acties. */
@media (min-width: 1024px) {
	.lr-header .lr-hoofdnav.wp-block-navigation .lr-alleen-mobiel {
		display: none;
	}
}

@media (max-width: 639.98px) {
	.lr-header {
		padding-top: 0.5rem;    /* ontwerp: py-2, boven 640px py-3 */
		padding-bottom: 0.5rem;
	}

	.lr-header .lr-header-acties .wp-block-buttons {
		display: none; /* ontwerp: de knop verschijnt pas vanaf sm */
	}
}

/* ---------------------------------------------------------------
   Uitklapmenu onder "Aanbod" (31-08-2026). Overgenomen uit
   .nav-dropdown-panel / .nav-dropdown-link van het ontwerp.

   Alleen vanaf 1024px: daaronder klapt de header in het mobiele
   overlaymenu en stuurt WordPress het submenu met eigen regels van
   viervoudige specificiteit. Daar niet tussen komen.

   Specificiteit: core's basisregel is (0,3,0) en zijn hover-regel
   (0,5,0), allebei uit de <head> en dus NA deze stylesheet. Daarom
   staan .lr-hoofdnav en .wp-block-navigation hier samen op de <ul>
   geketend, en heeft alles wat de hover-regel ook zet (min-width)
   een eigen selector die aan (0,6,0) komt.
   --------------------------------------------------------------- */
@media (min-width: 1024px) {
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
		left: 50%;                    /* ontwerp: left-1/2 -translate-x-1/2 */
		transform: translateX(-50%);
		margin-top: 0.6rem;           /* ontwerp: mt-[.6rem] */
		padding: 1rem 0.5rem;         /* ontwerp: py-4 px-2 */
		background-color: var(--wp--preset--color--creme);
		border: 1px solid var(--wp--preset--color--rand);
		border-radius: 1rem;          /* ontwerp: rounded-2xl */
		box-shadow: 0 20px 60px -26px var(--wp--preset--color--espresso); /* ontwerp: --shadow-soft */
	}

	/* De 0.6rem tussenruimte hoort visueel bij het paneel maar valt
	   buiten het <li>. Zonder dit bruggetje verlaat de muis onderweg
	   naar het paneel het <li>, en sluit core's pointerleave het menu
	   meteen weer. Core gebruikt dezelfde truc voor genestelde
	   submenu's. */
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child .wp-block-navigation__submenu-container::before {
		content: "";
		position: absolute;
		left: 0;
		right: 0;
		top: -0.6rem;
		height: 0.6rem;
		background: transparent;
	}

	/* min-width zet core zelf in zijn hover- en aria-expanded-regels,
	   dus hier per openingsvorm overschrijven in plaats van op het
	   paneel zelf: anders wint de 200px van core. */
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		min-width: 16rem;             /* ontwerp: min-w-64 */
	}

	.lr-header .lr-hoofdnav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		justify-content: center;      /* ontwerp: text-center */
		text-align: center;           /* nodig zodra een label afbreekt: justify-content
		                                 centreert alleen het tekstblok als geheel, niet de
		                                 regels erbinnen. Raakt Jullie eerste jaar samen. */
		padding: 0.6rem 1rem;
		font-size: 0.74rem;           /* ontwerp: .74rem, iets groter dan de balk zelf */
		letter-spacing: 0.2em;        /* ontwerp: .2em, de balk heeft .18em */
		border-radius: 0.5rem;
		transition: color 0.18s, background-color 0.18s;
	}

	/* Kleur en hover-kleur komen al uit de algemene navigatieregel
	   bovenin dit bestand (bruin-zacht -> terracotta); hier alleen het
	   vlak eronder. */
	.lr-header .lr-hoofdnav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item > .wp-block-navigation-item__content:hover {
		background-color: var(--wp--preset--color--zand);
	}
}

/* WordPress geeft elk direct kind van .wp-site-blocks een
   margin-block-start van 1.5rem, dus ook <main>. Dat gaf een kier
   van 24px tussen de header en de hero. In het ontwerp sluit de
   inhoud strak op de header aan. */
main {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Citaatband met bewegend beeld (lr-band). In het ontwerp is dit
   .parallax-section-video: een mp4 die stil, herhalend en zonder
   knoppen speelt, met een still als poster. Het coverblok van WP
   kent geen poster-attribuut, dus die still staat hier als
   achtergrond onder de video. Pad is root-relatief, zodat het bij
   livegang blijft werken.
   --------------------------------------------------------------- */
.lr-band {
	background-color: #180f0e;
	background-image: url(/wp-content/uploads/2026/07/lotte-maternity-sunset.jpg);
	background-position: center;
	background-size: cover;
}

/* ---------------------------------------------------------------
   Onderdelen uit het ontwerp die op meerdere sitepagina's terugkomen.
   Bewust hier en niet als inline-opmaak per blok, zodat de waarden
   op één plek staan en Lotte ze niet per ongeluk wegklikt.
   --------------------------------------------------------------- */

/* Videokader: het ontwerp zet de bedrijfsfilm in een 16:9-kader met
   ronde hoeken en een zachte schaduw (.aspect-video rounded-[2rem]). */
.lr-videokader {
	max-width: 1152px;
	margin: var(--wp--preset--spacing--l) auto 0;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 2rem;
	background: var(--wp--preset--color--zand);
	box-shadow: 0 20px 60px -26px rgba(58, 44, 38, 0.35);
	outline: 1px solid rgba(176, 96, 60, 0.1);
	outline-offset: -1px;
}

.lr-videokader iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Haarlijntje dat in het ontwerp naar beide kanten uitvloeit. */
.lr-streep {
	width: 6rem;
	height: 1px;
	margin-left: auto;
	margin-right: auto;
	border: 0;
	background: linear-gradient(90deg, transparent, rgba(176, 96, 60, 0.4), transparent);
}

/* Beeld met ronde hoeken en dezelfde zachte schaduw als het ontwerp. */
.lr-beeld-rond img {
	border-radius: 2rem;
	box-shadow: 0 20px 60px -26px rgba(58, 44, 38, 0.35);
}

/* Videokader binnen een kolom heeft de losse bovenmarge niet nodig. */
.wp-block-column > .lr-videokader {
	margin-top: 0;
}

/* ---------------------------------------------------------------
   Aanvraagformulier op /contact/. Dit is het mailto-formulier uit
   het concept, in een wp:html-blok: WordPress-core kent geen
   formulierblok. Vervangen vóór livegang, zie de open punten.
   --------------------------------------------------------------- */
.lr-contactformulier {
	border: 1px solid var(--wp--preset--color--rand);
	background: var(--wp--preset--color--kaart);
	border-radius: 2rem;
	box-shadow: 0 18px 40px -28px rgba(58, 44, 38, 0.22);
	padding: 1.75rem;
}

.lr-formulier-raster {
	display: grid;
	gap: 1rem;
	/* Het raster is een div en kreeg dus niet de 1.25rem die elke <p> in het
	   formulier onder zich heeft. Daardoor plakte "Wat wil je doen?" direct
	   tegen de rij Telefoon/Trouwdatum aan (gat van 0px, elders 20px). */
	margin-bottom: 1.25rem;
}

/* De laatste regel houdt anders zijn eigen 1.25rem bovenop de padding van
   de kaart: 52px onderin tegen 32px bovenin. */
.lr-contactformulier > *:last-child {
	margin-bottom: 0;
}

@media (min-width: 640px) {
	.lr-formulier-raster {
		grid-template-columns: 1fr 1fr;
	}

	.lr-contactformulier {
		padding: 2rem;
	}
}

.lr-contactformulier p {
	margin: 0 0 1.25rem;
}

.lr-formulier-raster p {
	margin: 0;
}

/* De twee velden naast elkaar moeten op dezelfde hoogte beginnen, ook als
   het ene label over twee regels valt ("Trouwdatum of uitgerekende datum
   (optioneel)") en het andere niet. Elk veld is een flexkolom waarin het
   label meegroeit; het invoerveld zakt daardoor naar de onderkant en lijnt
   uit met dat ernaast. Werkt omdat de rasterrij beide vakken even hoog
   maakt (align-items: stretch, de standaard). */
.lr-formulier-raster p {
	display: flex;
	flex-direction: column;
}

.lr-formulier-raster label {
	flex: 1 0 auto;
}

.lr-contactformulier label {
	display: block;
	margin-bottom: 0.375rem;
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--wp--preset--color--bruin);
}

.lr-contactformulier label span {
	color: var(--wp--preset--color--bruin-zacht);
	font-weight: 400;
}

.lr-contactformulier input,
.lr-contactformulier select,
.lr-contactformulier textarea {
	width: 100%;
	/* Zonder border-box telt WordPress de padding (2 x 1rem) en de rand bij
	   de 100% op: de velden werden 546px in een kaart van 512px en liepen
	   dus over de rand en over elkaar heen. select en button erven
	   border-box al van de browser, input en textarea niet. */
	box-sizing: border-box;
	padding: 0.75rem 1rem;
	border: 1px solid var(--wp--preset--color--rand);
	border-radius: 1rem;
	background: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	color: var(--wp--preset--color--bruin);
	transition: border-color 0.2s, box-shadow 0.2s;
}

.lr-contactformulier input:focus,
.lr-contactformulier select:focus,
.lr-contactformulier textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--terracotta);
	box-shadow: 0 0 0 2px rgba(176, 96, 60, 0.2);
}

.lr-contactformulier button {
	width: 100%;
	padding: 0.875rem 1.5rem;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--terracotta);
	color: var(--wp--preset--color--wit);
	font-family: var(--wp--preset--font-family--manrope);
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	box-shadow: 0 20px 60px -26px rgba(58, 44, 38, 0.35);
	transition: opacity 0.2s;
}

.lr-contactformulier button:hover {
	opacity: 0.9;
}

.lr-formulier-noot {
	text-align: center;
	font-size: 0.75rem;
	color: var(--wp--preset--color--bruin-zacht);
}

.lr-contactlijst {
	list-style: none;
	padding-left: 0;
	margin: 0 0 1rem;
}

.lr-contactlijst li {
	margin-bottom: 0.5rem;
}

/* Hero met drie beelden naast elkaar (/reviews/). Het ontwerp legt daar
   een verloop overheen met de titel erop. De kolommen vormen de
   achtergrondlaag, de kop staat erboven. */
.lr-hero-triptiek {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 70svh;
	padding: var(--wp--preset--spacing--sectie) 1.5rem;
	overflow: hidden;
}

.lr-hero-triptiek > .wp-block-columns {
	position: absolute;
	inset: 0;
	gap: 0;
	margin: 0;
}

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

.lr-hero-triptiek::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(37, 29, 26, 0.35), rgba(37, 29, 26, 0.55));
}

.lr-hero-triptiek > .wp-block-heading {
	position: relative;
	z-index: 1;
	max-width: 48rem;
}

@media (min-width: 640px) {
	.lr-hero-triptiek {
		min-height: 85svh;
	}
}

/* Reviewkaarten in kolommen die per kaart mogen afbreken, zoals het
   ontwerp (columns-1 / sm:columns-2 / lg:columns-3). */
.lr-reviewraster {
	columns: 1;
	column-gap: 1.5rem;
}

.lr-reviewraster > .lr-review {
	break-inside: avoid;
	margin-bottom: 1.5rem;
}

@media (min-width: 640px) {
	.lr-reviewraster {
		columns: 2;
	}
}

@media (min-width: 1024px) {
	.lr-reviewraster {
		columns: 3;
	}
}

/* Opsommingen met vinkjes uit het ontwerp (voordelen, inbegrepen). */
.lr-voordelen {
	list-style: none;
	padding-left: 0;
}

.lr-voordelen li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
}

.lr-voordelen li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.7em;
	width: 0.5rem;
	height: 0.5rem;
	border-radius: 50%;
	background: var(--wp--preset--color--terracotta);
	opacity: 0.5;
}

/* Tariefregels: dunne scheidingslijn tussen de rijen. */
.lr-tariefrij + .lr-tariefrij {
	border-top: 1px solid var(--wp--preset--color--rand);
}

/* Uitklapbare vragen. */
.lr-vraag {
	border-bottom: 1px solid var(--wp--preset--color--rand);
	padding: 0.25rem 0;
}

.lr-vraag summary {
	cursor: pointer;
	padding: 1rem 0;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.125rem;
	color: var(--wp--preset--color--bruin);
	list-style: none;
}

.lr-vraag summary::-webkit-details-marker {
	display: none;
}

.lr-vraag summary::after {
	content: "+";
	float: right;
	color: var(--wp--preset--color--terracotta);
	font-family: var(--wp--preset--font-family--manrope);
}

.lr-vraag[open] summary::after {
	content: "\2013";
}

.lr-vraag p {
	padding-bottom: 1rem;
}

/* Blokcitaat met streep links, zoals het ontwerp. */
.lr-blokcitaat {
	max-width: 42rem;
	margin-left: auto;
	margin-right: auto;
	padding-left: 1.5rem;
	border-left: 2px solid rgba(176, 96, 60, 0.4);
	text-align: left;
	font-style: normal;
}

.lr-blokcitaat p {
	line-height: 1.5;
	color: var(--wp--preset--color--bruin);
}

/* De bedrijfsnaam in de footer staat in het ontwerp in de gewone
   tekstkleur, de regels eronder in de zachte bijkleur. */
.lr-footer-naam {
	color: var(--wp--preset--color--bruin);
}

/* In het ontwerp zijn de LINKS in de contactkolom kapitalen met ruime
   letterafstand (dezelfde .nav-link als de andere footerkolommen), terwijl
   de bedrijfsnaam en het adres gewoon doorlopen. */
.lr-footer p a {
	text-transform: uppercase;
	letter-spacing: 0.18em;
	text-decoration: none;
	color: var(--wp--preset--color--bruin-zacht);
}

.lr-footer p a:hover {
	color: var(--wp--preset--color--terracotta);
}

/* Iets meer lucht tussen de contactregels, zoals de space-y-2 in het ontwerp. */
.lr-footer .wp-block-column p {
	line-height: 2;
}

/* ---------------------------------------------------------------
   Onderste blok van het mobiele menupaneel (01-09-2026): knop,
   social-icoontjes en contactgegevens, zoals in het ontwerp.

   Het staat NAAST het navigatieblok in de header, niet erin: blokken
   binnen core/navigation veranderen hoe de <ul> rendert en dat brak
   eerder de bureaubladbalk.

   Core zet bij het openen van het overlay zelf `has-modal-open` op
   <html> (zie html.has-modal-open{overflow:hidden} in de blokstijlen).
   Dat is hier het signaal. Buiten die toestand, en boven 1024px, staat
   het blok volledig uit.
   --------------------------------------------------------------- */
.lr-menu-extra {
	display: none;
}

@media (max-width: 1023.98px) {
	html.has-modal-open .lr-menu-extra {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 100001; /* het overlay van core zit op 100000 */
		background-color: var(--wp--preset--color--creme);
		border-top: 1px solid var(--wp--preset--color--rand);
		padding: 1.25rem 1.5rem 1.5rem;
	}

	html.has-modal-open .lr-menu-extra .wp-block-button,
	html.has-modal-open .lr-menu-extra .wp-block-button__link {
		width: 100%;
		text-align: center;
	}

	html.has-modal-open .lr-menu-extra .wp-block-button__link {
		padding-block: 0.9rem;
		border-radius: 9999px;
	}

	html.has-modal-open .lr-menu-extra .wp-block-social-links {
		gap: 1rem;
		margin-top: 1.25rem;
		justify-content: flex-start;
	}

	html.has-modal-open .lr-menu-extra .lr-menucontact {
		margin: 0.35rem 0 0;
		font-size: 0.7rem;
		letter-spacing: 0.14em;
		text-transform: uppercase;
	}

	html.has-modal-open .lr-menu-extra .lr-menucontact a {
		color: var(--wp--preset--color--bruin-zacht);
		text-decoration: none;
	}
}

/* ---------------------------------------------------------------
   Blogbericht (templates/single.html, 11-09-2026)
   De berichten komen van de oude site; tekst op leesbreedte (768px),
   de fotokolommen breed (1216px) en strak tegen elkaar, zoals de
   twee fotokolommen op de oude site.
   --------------------------------------------------------------- */
.lr-bericht-hero .lr-bericht-titel {
	font-size: clamp(2.1rem, 5vw, 3.5rem);
	line-height: 1.1;
	text-wrap: balance;
	margin-top: var(--wp--preset--spacing--xs);
}

.lr-bericht-hero .lr-bericht-label {
	color: var(--wp--preset--color--wit);
}

.lr-bericht-hero .lr-bericht-datum {
	font-size: var(--wp--preset--font-size--klein);
	letter-spacing: 0.08em;
	opacity: 0.85;
	margin-top: var(--wp--preset--spacing--s);
}

.lr-bericht .lr-bericht-intro .wp-block-post-excerpt__excerpt {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.35rem, 2.4vw, 1.65rem);
	font-style: italic;
	line-height: 1.45;
	text-align: center;
	color: var(--wp--preset--color--bruin);
	margin: 0 0 var(--wp--preset--spacing--l);
}

.lr-bericht .wp-block-post-content {
	line-height: 1.8;
}

.lr-bericht .wp-block-post-content h2 {
	font-size: clamp(1.75rem, 3.2vw, 2.4rem);
	margin-top: var(--wp--preset--spacing--l);
}

.lr-bericht .wp-block-post-content h3 {
	font-size: clamp(1.35rem, 2.4vw, 1.6rem);
	margin-top: var(--wp--preset--spacing--m);
}

.lr-bericht .wp-block-post-content a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.18em;
}

.lr-bericht .wp-block-post-content .wp-block-columns.alignwide {
	gap: 0.5rem;
	margin-block: var(--wp--preset--spacing--l);
}

.lr-bericht .wp-block-post-content .wp-block-column > .wp-block-image {
	margin: 0 0 0.5rem;
}

.lr-bericht .wp-block-post-content .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
}

.lr-bericht .wp-block-post-content .wp-block-image.alignwide {
	margin-block: var(--wp--preset--spacing--m);
}

.lr-bericht .lr-bericht-terug {
	font-size: var(--wp--preset--font-size--label);
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.lr-bericht .wp-block-post-content > h2:first-child {
	margin-top: 0;
}