/*
Theme Name: Luijtsprekend
Theme URI: https://www.luijtsprekend.nl
Description: Child-thema van Twenty Twenty-Five in de huisstijl van Luijtsprekend.
Author: Luijtsprekend
Template: twentytwentyfive
Version: 1.0.4
Requires at least: 6.7
Text Domain: luijtsprekend
*/

:root {
	--ls-olijf: var(--wp--preset--color--olijf);
	--ls-olijf-donker: var(--wp--preset--color--olijf-donker);
	--ls-salie: var(--wp--preset--color--salie);
	--ls-salie-licht: var(--wp--preset--color--salie-licht);
	--ls-zand: var(--wp--preset--color--zand);
	--ls-perzik: var(--wp--preset--color--perzik);
	--ls-terra: var(--wp--preset--color--terra);
	--ls-terra-donker: var(--wp--preset--color--terra-donker);
	--ls-creme: var(--wp--preset--color--creme);
	--ls-lijn: var(--wp--preset--color--lijn);
	--ls-zacht: var(--wp--preset--color--tekst-zacht);
	--ls-radius: 22px;
	--ls-schaduw: 0 10px 30px -12px rgba(63, 73, 55, .18);
	--ls-sectie: clamp(4rem, 9vw, 7rem);
}

body { -webkit-font-smoothing: antialiased; }
:where(.wp-site-blocks) > * { margin-block-start: 0; }

/* ---------- Algemeen ---------- */
.ls-oogje {
	font-size: .8rem !important;
	letter-spacing: .22em;
	text-transform: lowercase;
	color: var(--ls-terra-donker);
	font-weight: 700;
	margin-bottom: .2rem !important;
}
.ls-lead { font-size: var(--wp--preset--font-size--large); color: var(--ls-zacht); }
.ls-sectie { padding-block: var(--ls-sectie) !important; }
.ls-zand { background: var(--ls-zand); }
.ls-salie { background: var(--ls-salie-licht); }
h1 em, h2 em { color: var(--ls-terra); font-style: italic; }
h1, h2 { text-wrap: balance; }
h1 em { padding-bottom: .05em; }

/* Knoppen */
.wp-block-button.is-style-outline > .wp-block-button__link {
	border: 2px solid var(--ls-olijf);
	color: var(--ls-olijf);
	background: transparent;
	padding: calc(.9em - 2px) calc(1.6em - 2px);
}
.wp-block-button.is-style-outline > .wp-block-button__link:hover { background: var(--ls-olijf); color: #fff; }
.wp-block-button__link { transition: background .2s, color .2s, transform .2s; }
.wp-block-button__link:hover { transform: translateY(-2px); }
.wp-block-button.ls-knop-terra > .wp-block-button__link { background: var(--ls-terra-donker); }
.wp-block-button.ls-knop-terra > .wp-block-button__link:hover { background: #8E4522; }
.wp-block-button.ls-knop-licht > .wp-block-button__link { background: var(--ls-zand); color: var(--ls-olijf); }
.wp-block-button.ls-knop-licht > .wp-block-button__link:hover { background: #fff; }

/* ---------- Header ---------- */
.ls-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(252, 249, 245, .93);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--ls-lijn);
	padding-block: .8rem;
}
.admin-bar .ls-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .ls-header { top: 46px; } }
.ls-header .wp-block-site-logo img { width: clamp(190px, 22vw, 260px); height: auto; }
.ls-header .wp-block-navigation a { padding: .55em 1em; border-radius: 999px; text-decoration: none; transition: background .2s; }
.ls-header .wp-block-navigation .wp-block-navigation-item__content:hover { background: var(--ls-salie-licht); color: var(--ls-olijf); }
.ls-header .wp-block-navigation .current-menu-item > a { background: var(--ls-zand); color: var(--ls-olijf); }
.ls-header .wp-block-navigation .ls-menu-cta > a { background: var(--ls-olijf); color: #fff !important; }
.ls-header .wp-block-navigation .ls-menu-cta > a:hover { background: var(--ls-olijf-donker); }
.ls-header .wp-block-navigation__container { gap: .3rem; }
.ls-header .wp-block-navigation__responsive-container.is-menu-open { background: var(--ls-creme); padding: 1.5rem; }
.ls-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: .6rem; font-size: 1.15rem; }

/* ---------- Hero ---------- */
.ls-hero { padding-block: clamp(3rem, 7vw, 6rem) clamp(4rem, 8vw, 7rem) !important; overflow: hidden; }
.ls-hero h1 { margin-bottom: .4em; }
.ls-hero-beeld { position: relative; aspect-ratio: 1; max-width: 480px; margin-inline: auto; width: 100%; }
.ls-hero-beeld::before, .ls-hero-beeld::after {
	content: "";
	position: absolute;
	z-index: 0;
}
.ls-hero-beeld::before { inset: 4% 10% 18% 0; background: var(--ls-salie); opacity: .55; border-radius: 58% 42% 55% 45% / 50% 55% 45% 50%; }
.ls-hero-beeld::after { inset: 22% 0 0 18%; background: var(--ls-perzik); opacity: .7; border-radius: 45% 55% 40% 60% / 55% 45% 55% 45%; }
.ls-hero-beeld .wp-block-image { position: relative; z-index: 1; width: 84%; margin: 8% auto 0 !important; }
.ls-hero-beeld .wp-block-image img { width: 100%; height: auto; }
@media (max-width: 781px) {
	.ls-hero-kolommen { flex-direction: column-reverse; }
	.ls-hero-beeld { max-width: 300px; }
}

/* ---------- Doelgroepen ---------- */
.ls-doelgroep {
	border-top: 1px solid var(--ls-salie);
	padding-top: 1.6rem !important;
	padding-bottom: .6rem !important;
}
.ls-doelgroep h3 { margin-bottom: .2em; }
.ls-doelgroep p { color: var(--ls-zacht); margin-top: .3rem; }
.ls-doelgroep .ls-meer a { font-weight: 700; text-decoration: none; }
.ls-doelgroep .ls-meer a::after { content: " →"; }

/* ---------- Doelgroep-kaarten (home) ---------- */
.ls-voor-wie-kop { max-width: 680px; margin-inline: auto !important; text-align: center; margin-bottom: 3rem !important; }
.ls-voor-wie-kop .ls-oogje { text-align: center; }
.ls-doelgroep-kaarten { gap: 1.5rem !important; }
.ls-doelgroep-kaart {
	background: #fff;
	border: 1px solid var(--ls-lijn);
	border-radius: var(--ls-radius);
	padding: 2.2rem 2rem !important;
	box-shadow: var(--ls-schaduw);
	height: 100%;
	display: flex;
	flex-direction: column;
}
.ls-doelgroep-kaart::before {
	content: "";
	display: block;
	width: 58px; height: 58px;
	border-radius: 50% 50% 50% 14%;
	margin-bottom: 1.3rem;
	background: var(--ls-zand) var(--ls-icoon) center / 28px no-repeat;
}
.ls-doelgroep-kaart.ls-icoon-hart::before { background-color: var(--ls-perzik); }
.ls-doelgroep-kaart.ls-icoon-chat::before { background-color: var(--ls-salie-licht); }
.ls-icoon-hart { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A4532A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.2 3.4 4.5 7 4.5c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.6 0 6 3.7 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E"); }
.ls-icoon-chat { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355624A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 20.5l1.4-4.9A8 8 0 1 1 21 12z'/%3E%3Cpath d='M9 11h6M9 14h4'/%3E%3C/svg%3E"); }
.ls-icoon-hoed { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2355624A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 8l10-5 10 5-10 5z'/%3E%3Cpath d='M6 10.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-5.5'/%3E%3C/svg%3E"); }
.ls-doelgroep-kaart h3 { margin: 0 0 .4em; }
.ls-doelgroep-kaart p { color: var(--ls-zacht); margin-top: 0; }
.ls-doelgroep-kaart .ls-meer { margin-top: auto !important; padding-top: .6rem; }
.ls-doelgroep-kaart .ls-meer a { font-weight: 700; text-decoration: none; }
.ls-doelgroep-kaart .ls-meer a::after { content: " →"; }

/* ---------- Pijlers (genummerd) ---------- */
.ls-pijlers-kop { margin-bottom: 2.5rem !important; }
.ls-pijlers-kop .ls-lead { max-width: 40rem; }
.ls-pijlers { counter-reset: pijler; gap: 2.5rem !important; }
.ls-pijler { padding-top: 1rem; }
.ls-pijler::before {
	counter-increment: pijler;
	content: "0" counter(pijler);
	display: block;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 4.5rem;
	line-height: 1;
	color: var(--ls-terra);
	opacity: .25;
	margin-bottom: -.6rem;
}
.ls-pijler h3 { font-size: 2rem; margin: 0 0 .5em; }

/* ---------- Aanbod-label met icoon ---------- */
.ls-aanbod-label::before {
	content: "";
	display: block;
	width: 58px; height: 58px;
	border-radius: 50% 50% 50% 14%;
	margin-bottom: 1.3rem;
	background: var(--ls-zand) var(--ls-icoon) center / 28px no-repeat;
}
.ls-aanbod-label.ls-icoon-hart::before { background-color: var(--ls-perzik); }
.ls-aanbod-label.ls-icoon-chat::before { background-color: var(--ls-salie-licht); }
.ls-aanbod-blok .ls-aanbod-label h2 { font-size: 2.1rem; hyphens: manual; }

/* ---------- Drie woorden ---------- */
.ls-drietal {
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: clamp(1.8rem, 4.5vw, 3.2rem) !important;
	color: var(--ls-olijf);
	line-height: 1.15;
}
.ls-drietal .ls-stip, .ls-stip { color: var(--ls-terra); padding-inline: .35em; }
.ls-woord h3 { font-style: italic; color: var(--ls-terra-donker); }
.ls-woord p { color: var(--ls-zacht); }

/* ---------- Citaatband ---------- */
.ls-citaat { text-align: center; padding-block: clamp(3.5rem, 7vw, 5.5rem) !important; background: var(--ls-salie-licht); }
.ls-citaat p, .ls-script {
	font-family: var(--wp--preset--font-family--sacramento);
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	color: var(--ls-olijf);
	line-height: 1.3;
}
.ls-citaat p { margin: 0; }

/* ---------- Foto (organisch) ---------- */
.ls-foto { position: relative; max-width: 480px; width: 100%; margin-inline: auto; }
.ls-foto .ls-portret { margin: 0 !important; }
.ls-foto .ls-portret img {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: 50% 30%;
	border-radius: 46% 54% 40% 60% / 38% 42% 58% 62%;
}
.ls-foto .ls-stempel {
	position: absolute;
	width: 36%;
	right: -4%;
	bottom: 2%;
	margin: 0 !important;
}
.ls-foto .ls-stempel img {
	width: 100%;
	height: auto;
	background: var(--ls-creme);
	border-radius: 50%;
	padding: 10%;
	box-shadow: var(--ls-schaduw);
}
.ls-naam { font-family: var(--wp--preset--font-family--cormorant); font-style: italic; font-size: 1.2rem !important; color: var(--ls-terra-donker); margin-top: -.3rem !important; }

.ls-hartjes { list-style: none; padding-left: 0 !important; }
.ls-hartjes li { position: relative; padding-left: 2rem; margin-bottom: .6rem; }
.ls-hartjes li::before {
	content: "";
	position: absolute; left: 0; top: .45em;
	width: 1.1rem; height: 1.1rem;
	background: var(--ls-terra);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.6-9.5-9.2C1 8.2 3.4 4.5 7 4.5c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.6 0 6 3.7 4.5 7.3C19.5 16.4 12 21 12 21z'/%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='M12 21s-7.5-4.6-9.5-9.2C1 8.2 3.4 4.5 7 4.5c2 0 3.6 1.1 5 3 1.4-1.9 3-3 5-3 3.6 0 6 3.7 4.5 7.3C19.5 16.4 12 21 12 21z'/%3E%3C/svg%3E") center/contain no-repeat;
}

/* ---------- CTA ---------- */
.ls-cta {
	background: var(--ls-olijf);
	color: var(--ls-zand);
	border-radius: 33px;
	padding: clamp(2.5rem, 6vw, 4.5rem) !important;
	position: relative;
	overflow: hidden;
}
.ls-cta::before {
	content: "";
	position: absolute;
	width: 260px; height: 260px;
	right: -70px; bottom: -110px;
	border-radius: 50%;
	background: var(--ls-terra);
	opacity: .35;
	pointer-events: none;
}
.ls-cta h2 { color: #fff; margin-bottom: .2em; }
.ls-cta p { color: var(--ls-zand); margin-top: 0; }
.ls-cta .wp-block-buttons { position: relative; z-index: 1; }

/* ---------- Subpagina-kop ---------- */
.ls-pagina-kop {
	background: var(--ls-zand);
	padding-block: clamp(3.5rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem) !important;
	position: relative;
	overflow: hidden;
}
.ls-pagina-kop > * { position: relative; z-index: 1; }
.ls-pagina-kop::after {
	content: "";
	position: absolute;
	right: -60px; top: -40px;
	width: 380px; height: 260px;
	background: url("assets/img/beeldmerk.png") center/contain no-repeat;
	opacity: .3;
}
@media (max-width: 760px) { .ls-pagina-kop::after { width: 220px; height: 150px; right: -50px; opacity: .2; } }

/* ---------- Aanbod ---------- */
.ls-aanbod-blok { border-top: 1px solid var(--ls-lijn); padding-block: 3rem !important; }
.ls-aanbod-blok:first-child { border-top: 0; padding-top: 0 !important; }
.ls-aanbod-blok h2 { font-size: var(--wp--preset--font-size--x-large); }
.ls-aanbod-blok .ls-intro { color: var(--ls-zacht); }
.ls-kaart, .is-style-ls-kaart {
	background: #fff;
	border: 1px solid var(--ls-lijn);
	border-radius: var(--ls-radius);
	padding: 1.8rem !important;
	box-shadow: var(--ls-schaduw);
	height: 100%;
}
.ls-kaart h3 { font-size: 1.45rem; margin-bottom: .2em; }
.ls-kaart p { color: var(--ls-zacht); font-size: .98rem; }
.ls-kaart .ls-meta { font-size: .82rem !important; font-weight: 700; color: var(--ls-olijf); letter-spacing: .04em; }

/* FAQ */
.wp-block-details { border-bottom: 1px solid var(--ls-lijn); padding-block: 1.1rem; margin: 0 !important; }
.wp-block-details summary {
	cursor: pointer;
	font-family: var(--wp--preset--font-family--cormorant);
	font-size: 1.4rem;
	color: var(--ls-olijf);
	list-style: none;
	display: flex; justify-content: space-between; gap: 1rem;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after { content: "+"; color: var(--ls-terra); font-size: 1.6rem; line-height: 1; transition: transform .2s; }
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details p { color: var(--ls-zacht); }

/* ---------- Contact ---------- */
.ls-contact-rij { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.2rem; }
.ls-contact-rij::before {
	content: "";
	flex: none;
	width: 52px; height: 52px;
	border-radius: 50% 50% 50% 14%;
	background-color: var(--ls-perzik);
	background-image: radial-gradient(circle, transparent 0, transparent 100%);
}
.ls-contact-rij > .wp-block-group { gap: 0; }
.ls-contact-rij p { margin: 0 !important; }
.ls-contact-rij .ls-label { font-size: .82rem !important; color: var(--ls-zacht); line-height: 1.3; }
.ls-contact-rij .ls-waarde { font-size: 1.1rem; font-weight: 600; }
.ls-contact-rij { position: relative; }
.ls-contact-rij::after {
	content: "";
	position: absolute;
	left: 14px; top: 50%;
	width: 24px; height: 24px;
	transform: translateY(-50%);
	background: var(--ls-terra-donker);
	-webkit-mask: var(--ls-icoon) center/contain no-repeat;
	        mask: var(--ls-icoon) center/contain no-repeat;
}
.ls-icoon-mail { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E"); }
.ls-icoon-tel { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 4h4l2 5-2.5 1.5a11 11 0 0 0 5 5L15 13l5 2v4a2 2 0 0 1-2 2A16 16 0 0 1 3 6a2 2 0 0 1 2-2z'/%3E%3C/svg%3E"); }
.ls-icoon-tel::before { background-color: var(--ls-salie-licht) !important; }
.ls-icoon-tel::after { background: var(--ls-olijf) !important; }
.ls-icoon-plek { --ls-icoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11z'/%3E%3Ccircle cx='12' cy='10' r='2.5'/%3E%3C/svg%3E"); }
.ls-icoon-plek::before { background-color: var(--ls-zand) !important; }
.ls-icoon-plek::after { background: var(--ls-olijf) !important; }

/* ---------- Footer ---------- */
.ls-footer { background: var(--ls-olijf); color: var(--ls-zand); }
.ls-footer a { color: var(--ls-zand); text-decoration: none; }
.ls-footer a:hover { color: var(--ls-perzik); }
.ls-footer h3 { color: #fff; font-size: 1.35rem; }
.ls-footer-band { background: var(--ls-salie); text-align: center; padding: 1rem 1.25rem !important; }
.ls-footer-band p {
	font-family: var(--wp--preset--font-family--sacramento);
	font-size: clamp(1.3rem, 2.3vw, 1.9rem);
	color: var(--ls-olijf-donker);
	margin: 0;
	line-height: 1.3;
}
.ls-footer-band .ls-stip { padding-inline: .15em 0; }
@media (min-width: 782px) {
	.ls-footer-band p { white-space: nowrap; max-width: none !important; }
}
.ls-footer-kolommen { padding-block: 4rem 3rem !important; }
.ls-footer-kolommen p { opacity: .9; }
.ls-footer .ls-footer-logo img { width: 120px; background: var(--ls-creme); border-radius: 50%; padding: 10px; }
.ls-footer .wp-block-navigation { gap: .45rem; }
.ls-footer-onder {
	border-top: 1px solid rgba(242, 227, 214, .2);
	padding-block: 1.2rem !important;
	font-size: .85rem;
	opacity: .8;
}
.ls-footer-onder p { margin: 0; }

:focus-visible { outline: 3px solid var(--ls-terra); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; }
}