/* Unstuck: huisstijl. Poppins, donkergroen op crème, zoals de oude site; structuur van Sundry. */

:root {
	--color-bg: #FDFBF7;
	--color-surface: #FFFFFF;
	--color-subtle: #EDE8DE;
	--color-text: #494B4C;
	--color-heading: #182A44;
	--color-text-soft: #6B6E6F;
	--color-line: #DDD6C8;
	--color-accent: #3A5E4B;
	--color-accent-hover: #2A4E3C;
	--color-on-accent: #FFFFFF;
	--color-dark: #3A5E4B;
	--color-on-dark: #FDFBF7;
	--color-on-dark-soft: #C9D6CD;
	--color-link: #3A5E4B;
	--color-link-hover: #C47C53;
	--color-copper: #C47C53;

	--font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;
	--font-heading: var(--font-body);
	--font-ui: var(--font-body);
	--weight-heading: 600;

	--text-base: 1rem;
	--text-lead: 1.0625rem;
	--h1: clamp(2.4rem, 5vw, 3.6rem);
	--h2: clamp(1.8rem, 3.4vw, 2.6rem);

	--container: 1120px;
	--radius-btn: 10px;
	--radius-img: 14px;

	--card-shadow: 0 1px 2px rgba(24,42,68,.05), 0 10px 24px -12px rgba(24,42,68,.16);
	--card-shadow-hover: 0 1px 2px rgba(24,42,68,.06), 0 18px 36px -14px rgba(24,42,68,.24);
}

h1, h2, h3, h4 { color: var(--color-heading); letter-spacing: -.01em; }
.prose strong { color: var(--color-heading); font-weight: 500; }
.lead { color: var(--color-text); }
.subtitle { font-weight: 500; font-size: 1.05rem; color: var(--color-accent); margin-top: -6px; }

/* Vlakken: "subtiel" is het beige van de oude site; kaarten en formulieren blijven wit */
.bg-subtiel { background: var(--color-subtle); }
.bg-subtiel .form { background: var(--color-surface); }

/* Knoppen: iets ronder en met zachte schaduw; de tweede knop is een witte knop */
.btn { font-size: 1rem; font-weight: 600; padding: 13px 24px; box-shadow: 0 8px 20px -10px rgba(24,42,68,.35); }
.btn-secondary { background: var(--color-surface); border-color: var(--color-surface); color: var(--color-heading); }
.btn-secondary:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-on-accent); }

/* Header */
.site-header { border-bottom-color: transparent; box-shadow: 0 1px 0 rgba(24,42,68,.06); }
.site-header .site-logo { color: #0E1F18; font-size: 1.9rem; font-weight: 700; letter-spacing: -.02em; }
.site-nav a:not(.btn) { color: var(--color-heading); }
.site-nav a:not(.btn):hover, .site-nav .current-menu-item > a, .site-nav .current_page_item > a, .site-nav .current-menu-ancestor > a { color: var(--color-accent); }
/* Ankerlinks in het uitklapmenu horen bij dezelfde pagina: niet allemaal als "huidige pagina" kleuren. */
.site-nav .sub-menu .current-menu-item > a { color: var(--color-text); }

/* Hero: kop van een gewone pagina (foto met de titel in het midden) */
.hero--over .hero-media img { height: clamp(260px, 43vw, 550px); }
.hero--over .hero-media::after { background: rgba(0,0,0,.22); }
.hero--over .hero-body { inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 14px; padding-block: 24px; text-align: center; }
.hero--over .hero-title { font-weight: 700; font-size: clamp(2.5rem, 6vw, 4.2rem); text-shadow: 0 2px 24px rgba(0,0,0,.25); }
.hero--over .hero-text .lead { max-width: 30em; font-size: clamp(1.05rem, 1.8vw, 1.35rem); font-weight: 500; }
.hero--over .hero-text:empty { display: none; }
.hero--over .actions { justify-content: center; }

/* Hero: homepage (lichte foto, donkere tekst links) */
.hero--licht { position: relative; display: flex; align-items: center; min-height: clamp(460px, 47vw, 600px); overflow: hidden; }
.hero--licht .hero-media { position: absolute; inset: 0; }
.hero--licht .hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 100% 33%; }
.hero--licht .hero-body { position: relative; width: 100%; display: grid; grid-template-columns: minmax(0, 580px); gap: 18px; padding-block: 48px; }
.hero--licht .hero-title { font-weight: 700; font-size: clamp(2.8rem, 6vw, 4.2rem); }
.hero--licht .hero-text .lead { font-size: 1rem; color: var(--color-text); }
@media (max-width: 820px) {
	.hero--licht { min-height: 0; }
	.hero--licht .hero-media img { object-position: 68% 40%; }
	.hero--licht .hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to right, rgba(253,251,247,.92) 30%, rgba(253,251,247,.55) 70%, rgba(253,251,247,.2)); }
	.hero--licht .hero-body { padding-block: 56px; }
}

/* Tekst + beeld */
.split-media img { aspect-ratio: 3 / 2; object-fit: cover; box-shadow: var(--card-shadow); }
.split-body h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); margin-top: 1.2em; }
/* Losse tekst zonder beeld: gecentreerde leeskolom, zoals op de oude site */
.block-tekst.width-smal .text-single { justify-items: start; }

/* Kaarten (blok Kaarten en de artikelen): witte kaart */
.block-cards .card, .list-post .card { background: var(--color-surface); border-radius: var(--radius-img); padding: 22px; box-shadow: var(--card-shadow); }
.block-cards .card h3 { font-size: 1.1rem; }
.list-post .card { padding: 14px 14px 20px; gap: 10px; transition: transform .3s ease, box-shadow .3s ease; }
.list-post .card:hover { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); }
.list-post .card-media img { aspect-ratio: 3 / 2; border-radius: 10px; margin-bottom: 4px; }
.list-post .card h3, .list-post .card .meta, .list-post .card .more { padding-inline: 8px; }
.list-post .card h3 { font-size: 1.15rem; line-height: 1.3; }
.list-post .card .more { color: var(--color-accent); font-weight: 500; text-decoration: none; }
.list-post .card:hover .more { text-decoration: underline; }
.block-posts .block-head .lead { flex-basis: 100%; order: 3; }
@media (prefers-reduced-motion: reduce) { .list-post .card { transition: none; } .list-post .card:hover { transform: none; } }

/* Ervaringen */
.exp-list { gap: 24px; }
.exp-card { display: grid; grid-template-rows: auto 1fr auto; gap: 16px; padding: 26px; background: var(--color-surface); border-radius: var(--radius-img); box-shadow: var(--card-shadow); color: inherit; text-decoration: none; transition: transform .3s ease, box-shadow .3s ease; }
.exp-card:hover, .exp-card:focus-visible { transform: translateY(-3px); box-shadow: var(--card-shadow-hover); color: inherit; }
.exp-face { display: grid; place-items: center; width: 84px; height: 84px; border-radius: 50%; border: 2px solid var(--color-accent); overflow: hidden; background: var(--color-bg); font-size: 2rem; font-weight: 700; color: var(--color-accent); }
.exp-face img { width: 100%; height: 100%; object-fit: cover; }
.exp-face--large { width: 160px; height: 160px; font-size: 3.4rem; }
.exp-quote { font-style: italic; font-size: 1rem; line-height: 1.6; }
.exp-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.exp-name { font-weight: 600; color: var(--color-heading); }
.exp-more { font-size: .9rem; font-weight: 500; color: var(--color-accent); }
.exp-card:hover .exp-more { text-decoration: underline; text-underline-offset: 3px; }
.exp-note { margin-top: 24px; font-size: var(--text-small); color: var(--color-text-soft); }
.exp-single-layout { display: grid; grid-template-columns: 200px minmax(0, 42em); gap: var(--gap); align-items: start; }
.exp-single-who { display: grid; justify-items: center; gap: 12px; }
.exp-single-text { margin: 0; font-size: 1.1rem; }
.exp-single-text.prose { border: 0; padding: 0; color: var(--color-text); }
@media (max-width: 700px) { .exp-single-layout { grid-template-columns: 1fr; } .exp-single-who { justify-items: start; } .exp-face--large { width: 110px; height: 110px; } }
@media (prefers-reduced-motion: reduce) { .exp-card { transition: none; } .exp-card:hover { transform: none; } }

/* FAQ en formulier */
.faq summary { font-weight: 500; color: var(--color-heading); }
.form { border-radius: var(--radius-img); box-shadow: var(--card-shadow); }
.form input, .form select, .form textarea { border-radius: 8px; border-color: var(--color-line); padding: 11px 12px; }
.form .optional { font-weight: 400; color: var(--color-text-soft); }

/* Footer: zoals de oude site. Naam en tekst links, adres rechts, donkere strook eronder. */
.site-footer { background: var(--color-accent); color: var(--color-on-dark); font-size: 1rem; font-weight: 500; }
.site-footer a { color: var(--color-on-dark); }
.site-footer-top { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 32px 56px; padding-block: 52px 96px; }
.site-footer .site-logo { font-size: clamp(2.2rem, 4vw, 3rem); font-weight: 600; line-height: 1.1; color: var(--color-subtle); }
.footer-about { gap: 14px; max-width: none; }
.footer-about .prose { max-width: 18em; }
.footer-about .prose > p:first-child { max-width: none; white-space: nowrap; font-size: 1.1rem; }
.site-footer .prose strong, .footer-heading { color: var(--color-subtle); font-weight: 600; }
.footer-heading { font-size: 1.1rem; margin-bottom: 18px; }
.footer-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; font-size: .92rem; font-weight: 600; }
.footer-contact li { display: flex; align-items: center; gap: 9px; line-height: 1.35; }
.footer-contact svg { flex: none; width: 20px; height: 20px; color: var(--color-subtle); }
.site-footer-bottom { display: block; padding: 0; border: 0; background: var(--color-accent-hover); }
.site-footer-bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 24px; padding-block: 12px; }
.footer-links a { color: var(--color-on-dark) !important; font-size: .88rem; font-weight: 400; }
@media (max-width: 700px) {
	.site-footer-top { grid-template-columns: 1fr; padding-block: 36px 40px; }
	.footer-about .prose > p:first-child { white-space: normal; }
}

/* De fotokop sluit direct aan op het volgende blok */
.block-hero:has(.hero--over), .block-hero:has(.hero--licht) { padding-bottom: 0; }

/* Header op telefoon en tablet: logo links, menu-icoon precies in het midden, knop Aanmelden rechts (zoals de oude site). */
.submenu-toggle { display: none; }
.site-header.is-compact .site-header-inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.site-header.is-compact .site-logo { justify-self: start; font-size: clamp(1.5rem, 7vw, 1.9rem); }
.site-header.is-compact .menu-toggle { order: 2; margin: 0; width: 48px; height: 48px; color: var(--color-heading); }
.site-header.is-compact .menu-toggle .burger { width: 32px; height: 22px; }
.site-header.is-compact .menu-toggle .burger span { height: 3px; }
.site-header.is-compact .menu-toggle .burger span:nth-child(2) { top: 9.5px; }
.site-header.is-compact .menu-toggle .burger span:nth-child(3) { top: 19px; }
.site-header.is-compact .menu-toggle[aria-expanded="true"] .burger span:nth-child(1), .site-header.is-compact .menu-toggle[aria-expanded="true"] .burger span:nth-child(3) { top: 9.5px; }
.site-header.is-compact .header-cta-mobile { order: 3; justify-self: end; margin: 0; position: relative; z-index: 91; padding: 11px 18px; font-size: clamp(.9rem, 4vw, 1rem); }
@media (max-width: 360px) { .site-header.is-compact .header-cta-mobile { padding: 9px 12px; } }

/* Geopend menu: licht logo en lichte knop op het donkergroen; de knop staat al bovenin, dus niet nog eens onderaan. */
body.menu-open .site-header .site-logo { color: var(--color-on-dark); }
body.menu-open .header-cta-mobile { background: var(--color-on-dark); border-color: var(--color-on-dark); color: var(--color-accent); box-shadow: none; }
.site-header.is-compact .site-nav .header-cta { display: none; }

/* Mobiel menu: past op één scherm. Hoofditems iets kleiner; submenu's ingeklapt achter een pijltje. */
.site-header.is-compact .site-nav { gap: 20px; padding-top: calc(var(--header-height) + 12px); }
.site-header.is-compact .site-nav > ul { gap: 0; }
.site-header.is-compact .site-nav > ul > li { display: grid; grid-template-columns: 1fr auto; align-items: center; border-bottom: 1px solid rgba(255,255,255,.14); }
.site-header.is-compact .site-nav > ul > li > a:not(.btn) { padding: 13px 0; font-size: clamp(1.25rem, 5.6vw, 1.5rem); }
.site-header.is-compact .submenu-toggle { display: grid; place-items: center; width: 48px; height: 48px; margin-right: -12px; padding: 0; border: 0; background: none; color: var(--color-on-dark); cursor: pointer; }
.site-header.is-compact .submenu-toggle::before { content: ""; width: 10px; height: 10px; margin-top: -5px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease, margin .2s ease; }
.site-header.is-compact .is-open > .submenu-toggle::before { transform: rotate(225deg); margin-top: 5px; }
.site-header.is-compact .site-nav .sub-menu { display: none; grid-column: 1 / -1; margin: 0 0 12px 2px; }
.site-header.is-compact .site-nav .is-open > .sub-menu { display: flex; }
.site-header.is-compact .site-nav .sub-menu a:not(.btn) { font-size: 1.05rem; padding: 7px 0; }
@media (prefers-reduced-motion: reduce) { .site-header.is-compact .submenu-toggle::before { transition: none; } }