/*
 * HAVN Coaching & Advies – ontwerp
 * Rustig, neutraal en modern.
 */

:root {
	--linnen: #F3F0EA;
	--zand: #E6E0D6;
	--klei: #D3CABD;
	--taupe: #8D857A;
	--inkt: #2A2826;
	--serif: "Instrument Serif", Georgia, serif;
	--sans: "Hanken Grotesk", system-ui, -apple-system, sans-serif;
	--rand: 40px;
	--zijkant: max(var(--rand), calc((100% - 1240px) / 2));
}

html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
h1 em, h2 em, h3 em, .citaat em { color: var(--taupe); }

/* Geen automatische ruimte tussen de grote secties */
.wp-site-blocks > *,
.havn-main,
.wp-block-post-content > * { margin-block: 0; }

/* Groepen met een raster of lijst: geen extra marges op de onderdelen */
.raster > *,
.rijen > *,
.tarieven-lijst > *,
.onderdelen > * { margin-block: 0; }
.hero-tekst .link-pijl { margin-top: 32px; }

/* ---------- Koptekst ---------- */
header.wp-block-template-part {
	position: sticky;
	top: var(--wp-admin--admin-bar--height, 0);
	z-index: 50;
	background: var(--linnen);
}
.havn-kop { min-height: 84px; padding-inline: var(--zijkant); align-items: center; }
.logo { font-family: var(--serif); font-size: 30px; line-height: 1; margin: 0; }
.havn-menu { font-size: 15px; font-weight: 400; }
.havn-menu .wp-block-navigation__container { gap: 40px; align-items: center; }
.havn-menu .wp-block-navigation-item__content:hover { color: var(--taupe); }
.havn-menu .knop .wp-block-navigation-item__content {
	background: var(--inkt);
	color: var(--linnen);
	padding: 11px 22px;
}
.havn-menu .knop .wp-block-navigation-item__content:hover { background: #4a4642; color: var(--linnen); }
.havn-menu .wp-block-navigation__responsive-container-open,
.havn-menu .wp-block-navigation__responsive-container-close {
	font-family: var(--sans);
	font-size: 14px;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.havn-menu .wp-block-navigation__responsive-container.is-menu-open {
	background: var(--linnen);
	color: var(--inkt);
	padding: 28px 24px;
}
.havn-menu .is-menu-open .wp-block-navigation__container { gap: 22px; font-size: 22px; }
.havn-menu .is-menu-open .knop .wp-block-navigation-item__content { font-size: 16px; }

/* ---------- Secties ---------- */
.sectie { padding: 140px var(--zijkant); }
.sectie.zand { background: var(--zand); }
.sectie.geen-boven { padding-top: 0; }
.sectie.kop { padding-top: 56px; padding-bottom: 96px; }
.sectie.hero { padding-top: 56px; padding-bottom: 120px; }
.sectie.midden { text-align: center; padding-top: 160px; }
.midden .wp-block-buttons { justify-content: center; }

/* ---------- Tekststijlen ---------- */
.klein {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 400;
	color: var(--taupe);
}
.kruimel { font-size: 13px; color: var(--taupe); }
.kruimel a:hover { color: var(--inkt); }
.intro { font-size: 20px; max-width: 620px; }
.intro a { border-bottom: 1px solid var(--inkt); }
.link-pijl a {
	display: inline-block;
	font-size: 15px;
	font-weight: 400;
	border-bottom: 1px solid var(--inkt);
	padding-bottom: 3px;
	transition: padding .25s;
}
.link-pijl a:hover { padding-right: 6px; }
.noot { color: var(--taupe); font-size: 14.5px; max-width: 640px; }

.wp-block-post-content h1 {
	font-size: clamp(48px, 7.5vw, 104px);
	max-width: 14ch;
	margin-block: 22px 32px;
}
.wp-block-post-content h1.groot {
	font-size: clamp(52px, 9vw, 128px);
	max-width: 11ch;
	margin-block: 22px 56px;
}
.sectie h2 { font-size: clamp(40px, 5.5vw, 72px); }
.sectie h2.groot { font-size: clamp(48px, 8vw, 112px); margin-block: 22px 40px; }
.sectie h3 { font-size: clamp(28px, 3vw, 36px); }

/* ---------- Rasters ---------- */
.twee { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; align-items: start; }
.sectie-kop { align-items: end; gap: 56px; margin-bottom: 72px !important; }
.sectie-kop > p { max-width: 420px; justify-self: end; }
.over-grid { align-items: center; }

/* Hero */
.hero-onder { display: grid; grid-template-columns: 1fr 1.5fr; gap: 56px; align-items: end; }
.hero-tekst .intro { font-size: 18px; max-width: 400px; }
.waarden {
	display: flex;
	justify-content: space-between;
	margin-top: 64px !important;
	padding-top: 22px;
	border-top: 1px solid var(--klei);
}
.waarden p {
	font-size: 12px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--taupe);
	font-weight: 400;
}

/* Foto's */
.foto { margin: 0; position: relative; overflow: hidden; background: var(--klei); }
.foto img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.foto.liggend { aspect-ratio: 4 / 3; }
.foto.liggend img { object-position: 50% 18%; }
.foto.staand { aspect-ratio: 4 / 5; }

/* Lijst met streepjes */
.streep { list-style: none; padding: 0; margin: 8px 0 28px; }
.streep li {
	position: relative;
	padding: 18px 0 18px 28px;
	border-top: 1px solid var(--klei);
}
.streep li:last-child { border-bottom: 1px solid var(--klei); }
.streep li::before { content: "—"; position: absolute; left: 0; color: var(--taupe); }

/* Aanbod-rijen */
.rij {
	position: relative;
	display: grid;
	grid-template-columns: 80px 1.1fr 1.4fr 40px;
	gap: 32px;
	align-items: baseline;
	padding: 40px 0;
	border-top: 1px solid var(--klei);
	transition: padding .3s;
}
.rij:last-child { border-bottom: 1px solid var(--klei); }
.rij:hover { padding-left: 12px; }
.rij .nr, .onderdeel .nr, .stap .nr { font-size: 13px; letter-spacing: .1em; color: var(--taupe); }
.rij h3 { font-size: clamp(30px, 3.4vw, 44px); margin: 0; }
.rij h3 a::after { content: ""; position: absolute; inset: 0; }
.rij .sub {
	font-size: 12px;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--taupe);
	margin-top: 10px;
}
.rij-tekst { color: var(--taupe); font-size: 16px; }
.rij .pijl { font-size: 22px; justify-self: end; transition: transform .3s; }
.rij:hover .pijl { transform: translateX(6px); }

/* Over mij */
.over-grid h2 { margin-block: 18px 8px; }
.rol { color: var(--taupe); font-size: 15px; margin-bottom: 32px !important; }
.spec {
	padding-top: 20px;
	border-top: 1px solid var(--klei);
	color: var(--taupe);
	font-size: 15px;
	margin-block: 36px 40px !important;
	max-width: 480px;
}

/* Werkwijze */
.stappen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.stap { padding-top: 24px; border-top: 1px solid var(--inkt); }
.stap h3 { font-size: 32px; margin-block: 14px 12px; }
.stap p:last-child { color: var(--taupe); font-size: 16px; }

/* Tarieven */
.tarief {
	display: grid;
	grid-template-columns: 1.2fr 1fr auto;
	gap: 32px;
	align-items: baseline;
	padding: 30px 0;
	border-top: 1px solid var(--klei);
}
.tarieven-lijst > .tarief:last-child { border-bottom: 1px solid var(--klei); }
.tarief h3 { font-size: 32px; margin: 0; }
.tarief .info { color: var(--taupe); font-size: 16px; }
.tarief .bedrag { font-family: var(--serif); font-size: 36px; }
.tarieven-lijst + .noot { margin-top: 32px; }

/* Contactblok op de homepagina */
.contact-info {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	max-width: 640px;
	margin: 72px auto 0 !important;
	text-align: left;
}
.contact-info > div { padding: 22px 24px 0 0; border-top: 1px solid var(--klei); }
.contact-info > div > * { margin: 0; }
.contact-info .klein { margin-bottom: 6px; }

/* ---------- Binnenpagina's ---------- */
.inhoud-grid { display: grid; grid-template-columns: 260px 1fr; gap: 96px; align-items: start; }
.zijbalk {
	position: sticky;
	top: 120px;
	padding-top: 22px;
	border-top: 1px solid var(--inkt);
	font-size: 15px;
}
.zij-lijst { list-style: none; padding: 0; margin: 14px 0 36px; display: grid; gap: 10px; }
.zij-lijst a:hover { color: var(--taupe); }

.tekst { max-width: 680px; }
.tekst > h2, .faq-groep > h2 { font-size: clamp(32px, 3.6vw, 46px); margin-block: 72px 20px; }
.tekst > h2:first-child { margin-top: 0; }
.tekst > h3 { font-size: 24px; margin-block: 32px 10px; }
.tekst ol { padding-left: 20px; }
.tekst ol li { margin-bottom: 8px; }
.tekst a:not(.wp-block-button__link) { border-bottom: 1px solid var(--klei); }
.tekst .link-pijl a { border-bottom-color: var(--inkt); }

.onderdelen { margin-block: 12px 28px !important; }
.onderdeel {
	display: grid;
	grid-template-columns: 56px 1fr;
	column-gap: 0;
	padding: 26px 0;
	border-top: 1px solid var(--klei);
}
.onderdeel:last-child { border-bottom: 1px solid var(--klei); }
.onderdeel .nr { grid-row: 1 / 3; padding-top: 8px; }
.onderdeel h3 { font-size: 26px; margin: 0 0 6px; }
.onderdeel p:last-child { color: var(--taupe); }

.citaat {
	background: var(--zand);
	padding: 44px 48px;
	margin-block: 56px !important;
	font-family: var(--serif);
	font-size: clamp(24px, 2.6vw, 32px);
	line-height: 1.3;
}
.bijgewerkt {
	font-size: 14px;
	color: var(--taupe);
	margin-top: 48px !important;
	padding-top: 20px;
	border-top: 1px solid var(--klei);
}

/* Veelgestelde vragen */
.faq-groep { margin-bottom: 64px !important; }
.faq-groep > h2:first-child { margin-top: 0; }
.faq-groep .wp-block-details { border-top: 1px solid var(--klei); margin: 0; }
.faq-groep .wp-block-details:last-child { border-bottom: 1px solid var(--klei); }
.wp-block-details summary {
	list-style: none;
	cursor: pointer;
	position: relative;
	padding: 22px 40px 22px 0;
	font-size: 18px;
	font-weight: 400;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 4px;
	top: 18px;
	font-size: 24px;
	font-weight: 300;
	color: var(--taupe);
	transition: transform .25s;
}
.wp-block-details[open] summary::after { transform: rotate(45deg); }
.wp-block-details summary:hover { color: var(--taupe); }
.wp-block-details > p { color: var(--taupe); padding-right: 40px; margin-bottom: 24px; }

/* Contactformulier */
.formulier { display: grid; grid-template-columns: 1fr 1fr; gap: 28px 32px; max-width: 720px; }
.veld { display: grid; gap: 8px; }
.veld.breed, .akkoord, .formulier-knop { grid-column: 1 / -1; }
.veld label { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--taupe); }
.veld input, .veld textarea {
	font: inherit;
	font-weight: 300;
	color: var(--inkt);
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--klei);
	border-radius: 0;
	padding: 10px 0;
	outline: none;
	transition: border-color .2s;
}
.veld input:focus, .veld textarea:focus { border-color: var(--inkt); }
.veld textarea { min-height: 140px; resize: vertical; }
.akkoord { display: flex; gap: 12px; font-size: 15px; color: var(--taupe); align-items: flex-start; }
.akkoord input { margin-top: 6px; accent-color: var(--inkt); }
.akkoord a { border-bottom: 1px solid var(--klei); }
.formulier-knop button {
	border: 0;
	cursor: pointer;
	background: var(--inkt);
	color: var(--linnen);
	font: inherit;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: .06em;
	padding: 15px 30px;
}
.formulier-knop button:hover { background: #4a4642; }
.formulier-melding { background: var(--zand); padding: 24px 28px; max-width: 720px; }
.formulier-melding.fout { border-left: 3px solid var(--inkt); }
.havn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Voettekst ---------- */
.voet { background: var(--zand); padding: 72px var(--zijkant) 40px; font-size: 15px; color: var(--taupe); }
.voet-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; margin-bottom: 56px !important; }
.voet-grid > div > * { margin-block: 0 12px; }
.voet .logo { color: var(--inkt); }
.voet .klein { color: var(--inkt); margin-bottom: 16px; }
.voet-lijst { list-style: none; padding: 0; display: grid; gap: 8px; }
.voet a:hover { color: var(--inkt); }
.voet-onder {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	padding-top: 24px;
	border-top: 1px solid var(--klei);
	font-size: 13px;
}

/* ---------- Tablet en mobiel ---------- */
@media (max-width: 900px) {
	:root { --rand: 24px; }
	body { font-size: 16px; }
	.sectie { padding-block: 88px; }
	.sectie.geen-boven { padding-top: 0; }
	.sectie.kop { padding-top: 32px; padding-bottom: 64px; }
	.sectie.hero { padding-top: 32px; padding-bottom: 80px; }
	.sectie.midden { padding-top: 100px; }
	.twee, .hero-onder, .inhoud-grid { grid-template-columns: 1fr; gap: 36px; }
	.sectie-kop > p { justify-self: start; }
	.over-grid .foto { max-width: 420px; width: 100%; }
	.waarden { margin-top: 40px !important; }
	.rij { grid-template-columns: 44px 1fr 24px; gap: 8px 16px; padding: 28px 0; }
	.rij .rij-tekst { grid-column: 2 / 3; }
	.rij .pijl { grid-row: 1; grid-column: 3; }
	.stappen { grid-template-columns: 1fr; gap: 36px; }
	.tarief { grid-template-columns: 1fr auto; gap: 4px 16px; }
	.tarief .info { grid-column: 1 / 2; grid-row: 2; }
	.tarief .bedrag { grid-row: 1 / 3; grid-column: 2; align-self: center; }
	.contact-info { grid-template-columns: 1fr; gap: 20px; margin-top: 56px !important; }
	.zijbalk { position: static; }
	.formulier { grid-template-columns: 1fr; }
	.citaat { padding: 32px 24px; }
	.voet-grid { grid-template-columns: 1fr 1fr; gap: 36px; }
	.voet-grid > div:first-child { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
	:root { --rand: 16px; }
	.waarden p { font-size: 11px; letter-spacing: .12em; }
}