/*
Theme Name: Burn-out Coach Deventer
Theme URI: https://burnoutcoachdeventer.nl
Author: Sven & Claude
Description: Maatwerk blokthema voor de praktijk van Rick Quentin, burn-out coach in Deventer. Kalm, snel en licht: mistgroene tinten, één warme actiekleur, wandelpad als leidmotief.
Version: 1.0.2
Requires at least: 6.7
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: bcd
*/

/* ---------- Basis ---------- */

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

/* Geen kieren tussen kop, inhoud en voet: secties bepalen zelf hun ademruimte */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

::selection {
	background: #e7eee5;
	color: #1f3933;
}

:where(a:focus-visible, button:focus-visible, .wp-element-button:focus-visible) {
	outline: 2px solid #a05e1b;
	outline-offset: 3px;
	border-radius: 4px;
}

/* Rustige overgangen — en helemaal geen beweging voor wie dat wil */
a,
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition: none !important;
		animation: none !important;
		scroll-behavior: auto !important;
	}
}

/* ---------- Kop en navigatie ---------- */

.bcd-header {
	border-bottom: 1px solid #e0e8de;
	background: #f2f5f0;
}

.bcd-header .wp-block-site-title a {
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
	letter-spacing: -0.01em;
	color: #1f3933;
	text-decoration: none;
}

.bcd-header .wp-block-navigation a {
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	text-decoration: none;
}

.bcd-header .wp-block-navigation a:hover {
	color: #a05e1b;
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* ---------- Knoppen ---------- */

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: #1f3933;
	border: 2px solid #1f3933;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #1f3933;
	color: #ffffff;
}

/* Op donkere vlakken */
.has-dennen-background-color .wp-block-button.is-style-outline .wp-block-button__link {
	color: #f2f5f0;
	border-color: #7a9484;
}

.has-dennen-background-color .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: #f2f5f0;
	color: #1f3933;
	border-color: #f2f5f0;
}

/* ---------- Links op donkere vlakken altijd zichtbaar ---------- */

.has-dennen-background-color a:not(.wp-block-button__link) {
	color: #f2f5f0;
	text-decoration: underline;
	text-decoration-color: #7a9484;
	text-underline-offset: 4px;
}

.has-dennen-background-color a:not(.wp-block-button__link):hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}

/* ---------- Eyebrow (kleine aanduiding boven een kop) ---------- */

.bcd-eyebrow {
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 0.875rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: #56705f;
}

/* ---------- Herken je dit? — checklist ---------- */

.bcd-herkenlijst {
	list-style: none;
	padding-left: 0;
}

.bcd-herkenlijst li {
	position: relative;
	padding-left: 2.6rem;
	margin-bottom: 1rem;
}

.bcd-herkenlijst li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.12em;
	width: 1.65rem;
	height: 1.65rem;
	border-radius: 50%;
	background: #dbe6d8 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%231f3933' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-7'/%3E%3C/svg%3E") center / 0.95rem no-repeat;
}

/* ---------- Het wandelpad — werkwijze-stappen ---------- */

.bcd-stappen {
	counter-reset: stap;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.bcd-stap {
	position: relative;
	padding: 0 0 2.75rem 4.5rem;
	counter-increment: stap;
}

.bcd-stap:last-child {
	padding-bottom: 0;
}

/* Het stapnummer als markering op het pad */
.bcd-stap::before {
	content: counter(stap);
	position: absolute;
	left: 0;
	top: -0.2rem;
	width: 3rem;
	height: 3rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #1f3933;
	color: #f2f5f0;
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 700;
	font-size: 1.2rem;
}

/* Voetstappen: het gestippelde pad tussen de markeringen */
.bcd-stap:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(1.5rem - 1px);
	top: 3.2rem;
	bottom: 0.35rem;
	border-left: 2px dotted #7a9484;
}

.bcd-stap h3 {
	margin-top: 0;
	margin-bottom: 0.4rem;
}

.bcd-stap p {
	margin-top: 0;
}

/* ---------- Kaarten en rustvlakken ---------- */

.bcd-kaart {
	background: #ffffff;
	border: 1px solid #e0e8de;
	border-radius: 14px;
}

.bcd-foto img {
	border-radius: 14px;
	height: auto;
}

.bcd-foto-rond img {
	border-radius: 50%;
	height: auto;
	border: 6px solid #e7eee5;
}

.bcd-fotoplaceholder {
	background: linear-gradient(160deg, #e7eee5 0%, #cfdccb 100%);
	border-radius: 14px;
	min-height: 320px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #56705f;
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

/* ---------- Vertrouwensregel onder de hero ---------- */

.bcd-trustregel {
	color: #56705f;
	font-size: 0.9375rem;
}

.bcd-trustregel .sep {
	margin: 0 0.5em;
	color: #7a9484;
}

/* ---------- Voettekst ---------- */

.bcd-footer a {
	color: #f2f5f0;
	text-decoration-color: #7a9484;
	text-underline-offset: 4px;
}

.bcd-footer a:hover {
	color: #ffffff;
	text-decoration-color: #ffffff;
}

.bcd-footer .bcd-kleineletters {
	color: #a9bcae;
	font-size: 0.875rem;
}

/* ---------- Video's: klik-om-af-te-spelen (geen YouTube-trackers vóór de klik) ---------- */

.bcd-video {
	position: relative;
	aspect-ratio: 16 / 9;
	border-radius: 14px;
	overflow: hidden;
	background: #1f3933;
}

.bcd-video iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.bcd-video__play {
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	margin: 0;
	border: 0;
	background: none;
	cursor: pointer;
}

.bcd-video__play img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.35s ease, opacity 0.35s ease;
}

.bcd-video__play:hover img,
.bcd-video__play:focus-visible img {
	transform: scale(1.04);
	opacity: 0.9;
}

.bcd-video__icoon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	background: #a05e1b;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 18px rgba(31, 57, 51, 0.35);
	transition: background-color 0.25s ease;
}

.bcd-video__play:hover .bcd-video__icoon,
.bcd-video__play:focus-visible .bcd-video__icoon {
	background: #1f3933;
}

.bcd-video__icoon::after {
	content: "";
	display: block;
	margin-left: 4px;
	border-style: solid;
	border-width: 11px 0 11px 18px;
	border-color: transparent transparent transparent #ffffff;
}

.bcd-videotitel {
	margin-top: 0.6rem;
	font-family: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', sans-serif;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.35;
	color: #1f3933;
}

/* ---------- Leesbaarheid ---------- */

/* Nooit muurbrede tekstregels: alinea's blijven op leesbreedte, ook in brede secties */
.bcd-prose p {
	max-width: 42rem;
}