/*
 Theme Name:   Divi Child
 Theme URI:    https://parametre.art
 Description:  Child theme for Divi 5
 Author:       parametre.art
 Author URI:   https://parametre.art
 Template:     Divi
 Version:      1.1.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  divi-child
*/

/* ILV Coaching & Advies — Global / Layout Styles
   Page-level layout, navigation, sections, hero, footer.
   Ported from Astro global.css. */

/* ─── Scroll snap ─── */
html {
	scroll-snap-type: y proximity;
}
.hero,
.section,
.quote-section,
.cta-section {
	scroll-snap-align: start;
	scroll-margin-top: 73px;
}

/* ─── Navigation ─── */
.nav {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 5%;
	background: var(--white);
	border-bottom: 1px solid var(--neutral-200);
	position: sticky;
	top: 0;
	z-index: 100;
}
.nav-logo {
	display: flex;
	align-items: center;
}
.nav-logo img {
	height: 40px;
	width: auto;
}
.nav-links {
	display: flex;
	gap: 24px;
	list-style: none;
}
.nav-links a {
	font-family: var(--font-body);
	font-size: 14px;
	color: var(--neutral-700);
	text-decoration: none;
}
.nav-links a:hover {
	color: var(--primary-550);
}

/* Hamburger */
.hamburger-btn {
	display: none;
	background: none;
	border: none;
	font-size: 28px;
	color: var(--primary-600);
	cursor: pointer;
	padding: 8px;
	line-height: 1;
}
.hamburger-btn:hover {
	color: var(--primary-500);
}

/* Mobile navigation */
@media (max-width: 767px) {
	.hamburger-btn {
		display: block;
	}
	.nav-links {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: var(--white);
		flex-direction: column;
		gap: 0;
		padding: 0;
		box-shadow: var(--shadow-lg);
		border-bottom: 1px solid var(--neutral-200);
		max-height: 0;
		overflow: hidden;
		transition: max-height 0.3s ease-in-out;
	}
	.nav-links.active {
		display: flex;
		max-height: 500px;
	}
	.nav-links li {
		border-bottom: 1px solid var(--neutral-100);
	}
	.nav-links li:last-child {
		border-bottom: none;
	}
	.nav-links a {
		display: block;
		padding: 16px 5%;
		font-size: 16px;
	}
	.nav-links .nav-cta {
		margin: 12px 5%;
		text-align: center;
		border-radius: var(--radius-md);
	}
}

/* Mobile menu overlay */
.menu-overlay {
	display: none;
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 99;
	opacity: 0;
	transition: opacity 0.3s ease-in-out;
}
.menu-overlay.active {
	display: block;
	opacity: 1;
}

/* ─── Hero ─── */
.hero {
	background-image: url('/ilv/iris-hero-2.jpg');
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	min-height: 90vh;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 80px 5%;
}
.hero-content {
	width: 40%;
	text-align: left;
}
.hero-logo {
	width: 20vw;
	height: auto;
	display: block;
	margin-bottom: 60px;
}
.hero h1 {
	font-family: var(--font-heading);
	font-size: calc(var(--text-3xl) * 0.6);
	font-weight: 700;
	color: #fff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
	margin: 0 0 12px;
	line-height: 1.2;
}
.hero p {
	font-size: calc(var(--text-m) * 0.6);
	color: rgba(255, 255, 255, 0.85);
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	margin: 0 0 24px;
}

@media (max-width: 767px) {
	.hero {
		background-image: url('/ilv/iris-hero-mobile.jpg');
		align-items: flex-end;
		justify-content: center;
		padding: 40px 5% 48px;
	}
	.hero-content {
		width: calc(100% - 8vw);
		text-align: center;
		margin-right: 0;
		background: rgba(0, 0, 0, 0.35);
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		border: 1px solid rgba(255, 255, 255, 0.15);
		border-radius: var(--radius-lg);
		padding: 24px;
	}
	.hero-buttons {
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}
	.hero-logo {
		margin-left: auto;
		margin-right: auto;
	}
}
@media (min-width: 612px) and (max-width: 767px) {
	.hero {
		background-position: center 30%;
	}
}

/* ─── Sections ─── */
.section {
	padding: 64px 5%;
}
.section-light {
	background: var(--white);
}
.section-dark {
	background: var(--neutral-900);
	color: var(--white);
}
.section-charcoal {
	background: #262626;
	color: var(--white);
}
.section-charcoal > h2 {
	color: var(--white);
}
.section-charcoal > .section-intro,
.section-charcoal > p {
	color: var(--primary-350);
}

/* Section size variants */
.section-full {
	min-height: 90vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.section-mid {
	min-height: 70vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}
.section-half {
	min-height: 50vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Spacing variant for section intro */
.section-intro-wide {
	margin-bottom: clamp(40px, 8vw, 80px);
}
.section h2 {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	text-align: center;
	margin-bottom: 12px;
}
.section > p,
.section-intro {
	font-size: var(--text-m);
	color: var(--neutral-600);
	text-align: center;
	max-width: 600px;
	margin: 0 auto 40px;
}
.section-dark > .section-intro,
.section-dark > p {
	color: var(--neutral-300);
}

/* Werkwijze inner wrapper */
.werkwijze-inner {
	width: 100%;
}
.werkwijze-inner > .section-intro {
	margin-bottom: clamp(40px, 8vw, 80px);
}

/* Aanpak section — wider intro variant */
.section-charcoal > .section-intro.section-intro-wide {
	max-width: 1000px;
}

/* ─── Two-column content layouts ─── */
.consequence-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	max-width: 1000px;
	margin: 0 auto;
	align-items: center;
}
.consequence-layout h2 {
	text-align: left;
}
.consequence-layout p {
	text-align: left;
	color: var(--primary-350);
	font-size: var(--text-m);
}
.consequence-image {
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 280px;
}
.consequence-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
@media (max-width: 767px) {
	.consequence-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

.about-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 48px;
	max-width: 1000px;
	margin: 0 auto;
	align-items: center;
}
.about-layout h2 {
	text-align: left;
}
.about-image {
	border-radius: var(--radius-md);
	overflow: hidden;
	height: 320px;
}
.about-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.about-text p {
	text-align: left;
	color: var(--neutral-600);
	margin-bottom: 12px;
}
@media (max-width: 767px) {
	.about-layout {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

/* ─── Quote section ─── */
.quote-section {
	padding: 48px 5%;
	text-align: center;
	background: var(--white);
	border-top: 1px solid var(--neutral-200);
	border-bottom: 1px solid var(--neutral-200);
}
.quote-section.section-charcoal {
	background: #262626;
	border: none;
	min-height: 50vh;
	display: flex;
	align-items: center;
	justify-content: center;
}
.quote-section.section-charcoal .quote-text {
	color: var(--white);
}
.quote-text {
	font-family: var(--font-heading);
	font-size: var(--text-xl);
	font-weight: 600;
	font-style: italic;
	color: var(--neutral-700);
	max-width: 600px;
	margin: 0 auto;
}

/* ─── Partnerships ─── */
.partnerships-section {
	padding: 40px 5%;
}
.partnerships-label {
	margin-bottom: 20px;
	font-size: var(--text-m);
	font-weight: 500;
	color: var(--accent-550);
	text-align: center;
}
.partnerships-row {
	display: flex;
	gap: 24px;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}
.partnership-logo {
	padding: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.partnership-logo img {
	height: 150px;
	width: auto;
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Partnerships section (#partnerships) — logo strip ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: white bg (section-light), "Samenwerking met" label centred
   in coral (accent-550), two partner logos side by side at 150px height.
   Divi renders images stretched to fill 50% column width — need to
   constrain height and centre the image within its column. */

/* ─── Logo height: constrain to 150px, auto width — match wireframe ─── */
/* Without this, Divi image modules fill the column width (435px → 261px tall).
   Target the img element directly inside the section; !important required
   because Divi's deferred CSS sets width:100% on img elements. */
#partnerships img {
	height: 150px !important;
	width: auto !important;
	max-width: 100%;
}

/* ─── Logo column: centre the constrained image horizontally ─── */
/* Divi column is a flex container. The image module wrapper defaults to
   align-self:stretch. Set text-align:center on the column so the image
   wraps a centred inline-block, and auto margins on the module itself. */
#partnerships .et_pb_column {
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ─── Label row: centre the "Samenwerking met" text — already handled by
   .partnerships-label { text-align: center } but reinforce for Divi p. ─── */
#partnerships .et_pb_text_inner p {
	text-align: center !important;
	color: var(--accent-550) !important;
	font-size: var(--text-m) !important;
	font-weight: 500 !important;
}

/* ─── Mobile: logos stack if viewport too narrow ─── */
@media (max-width: 767px) {
	#partnerships .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#partnerships .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Theme Builder Header (post 90) — layout + CTA button fixes ───
   ═══════════════════════════════════════════════════════════════════════

   The header uses a single column (flex row) with a Divi menu module on the
   left and a button module on the right. The column must distribute space so
   the menu (logo + nav) is left-aligned and the button is right-aligned.
   Strategy: flex the column, keep menu flex-growing to fill available space,
   button stays at its natural size on the right.

   CTA button: Divi resolves the $variable(gcid-primary-color) reference as
   transparent on the Theme Builder header context — the global color variable
   doesn't fire in this scope. Override directly with the teal value #4ECDC4. */

/* ─── Header sticky: pin to top on scroll ─── */
/* Divi's sticky module should generate position:sticky via its deferred CSS,
   but for Theme Builder layouts the sticky CSS is not enqueued in Divi 5.
   Override directly on the .et-l--header wrapper.
   z-index:1000 ensures it renders above all page sections on scroll. */
.et-l--header {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
}

/* ─── Logo: force 140px width ─── */
/* The .et_pb_menu__logo div is a flex item inside .et_pb_menu__logo-wrap (flex container,
   140px wide). It collapses to ~110px because it sizes to the SVG's natural rendered width.
   width:140px !important is set but the flex algorithm can override width via flex-basis.
   min-width prevents flex shrink from reducing below 140px.
   The img then fills 100% of the 140px container. */
.et-l--header .et_pb_menu__logo {
	width: 140px !important;
	min-width: 140px !important;
}
.et-l--header .et_pb_menu__logo img {
	width: 100% !important;
	height: auto !important;
}

/* ─── Column: flex row, align items center ─── */
/* The single column in the header row is already flex (Divi default).
   justify-content:space-between pushes menu to the left and button to the right. */
.et-l--header .et_pb_column {
	justify-content: space-between !important;
	align-items: center !important;
}

/* ─── Menu module: flex-grow so it fills available space before the button ─── */
/* Without flex-grow, the menu collapses to its content width and the button
   doesn't push to the far right. flex:1 makes it fill the remaining space. */
.et-l--header .et_pb_menu {
	flex: 1 !important;
}

/* ─── CTA button: coral nav-cta — accent-550, smaller padding than btn ─── */
/* The nav-cta class is injected on the button module wrapper via JSON attributes.
   Wireframe values: bg accent-550, padding 12px 20px, font-size 14px.
   FALLBACK: nav-cta class injection did not fire in Divi 5 Theme Builder context —
   using .et_pb_button_module_wrapper directly as scope (header only has one button). */
.et-l--header .nav-cta .et_pb_button,
.et-l--header .nav-cta.et_pb_button_module_wrapper .et_pb_button,
.et-l--header .et_pb_button_module_wrapper .et_pb_button {
	background-color: #e14947 !important;
	color: #ffffff !important;
	border-color: #e14947 !important;
	border-radius: 8px !important;
	padding: 12px 20px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	font-family: var(--font-heading), Outfit, sans-serif !important;
	white-space: nowrap;
}
.et-l--header .nav-cta .et_pb_button:hover,
.et-l--header .nav-cta.et_pb_button_module_wrapper .et_pb_button:hover,
.et-l--header .et_pb_button_module_wrapper .et_pb_button:hover {
	background-color: #ff6b6b !important;
	border-color: #ff6b6b !important;
	color: #ffffff !important;
}
/* Remove Divi's default arrow icon on header CTA */
.et-l--header .et_pb_button::after {
	display: none !important;
}

/* ─── Nav links right-aligned within menu module ─── */
/* Wireframe: logo left, nav links right. The menu module's internal flex
   container (.et_pb_menu__menu) needs justify-content:flex-end to push nav
   links to the right. margin-left:auto on the nav element achieves the same
   via the flex spacer pattern. */
.et-l--header .et_pb_menu__menu {
	justify-content: flex-end !important;
}
.et-l--header .et_pb_menu .et-menu-nav {
	margin-left: auto !important;
}

/* ─── Mobile: hide CTA button, show only logo + hamburger ─── */
/* On mobile, the Divi menu module collapses nav links into the hamburger.
   The separate button module has no mobile-hide option in the JSON, so it
   overflows the header row next to the hamburger. Hide it below 981px
   (Divi's tablet breakpoint) — the CTA lives in the mobile menu instead. */
@media (max-width: 980px) {
	.et-l--header .et_pb_button_module_wrapper {
		display: none !important;
	}
}

/* ─── CTA section ─── */
.cta-section {
	background: var(--primary-600);
	padding: 64px 5%;
	text-align: center;
}
.cta-section h2 {
	color: var(--white);
	margin-bottom: 12px;
}
.cta-section p {
	color: var(--primary-300);
	margin-bottom: 32px;
}
.cta-section .hero-buttons {
	justify-content: center;
}

/* ─── Footer ─── */
.footer {
	background: var(--neutral-900);
	color: var(--neutral-400);
	padding: 48px 5% 24px;
}
.footer-grid {
	display: grid;
	grid-template-columns: 2fr 1fr 1fr 1fr;
	gap: 32px;
	max-width: 1000px;
	margin: 0 auto 32px;
}
@media (max-width: 767px) {
	.footer-grid {
		grid-template-columns: 1fr 1fr;
	}
}
.footer-brand {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 18px;
	color: var(--white);
	margin-bottom: 8px;
}
.footer-desc {
	font-size: var(--text-s);
	line-height: 1.6;
}
.footer h4 {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 14px;
	color: var(--white);
	margin-bottom: 12px;
}
.footer ul {
	list-style: none;
}
.footer li {
	margin-bottom: 8px;
}
.footer a {
	color: var(--neutral-400);
	text-decoration: none;
	font-size: var(--text-s);
}
.footer a:hover {
	color: var(--primary-450);
}
.footer-bottom {
	text-align: center;
	padding-top: 24px;
	border-top: 1px solid var(--neutral-800);
	font-size: var(--text-xs);
}
.footer-credit {
	color: var(--primary-450);
	text-decoration: none;
}

/* ─── Hero section (Divi overrides) ─── */

/* All breakpoints: enforce full height, dark fallback if image edges show */
#hero.et_pb_section {
	min-height: 90vh !important;
	background-color: var(--neutral-900) !important;
}

/* Desktop: full padding, vertically centered */
#hero.et_pb_section {
	padding: 80px 5% !important;
	justify-content: center !important;
}

/* Row: remove Divi's 1080px cap so 40% = 40% of viewport */
#hero .et_pb_row {
	max-width: 100% !important;
	width: 100% !important;
}

/* Column: no side padding (section handles it) */
#hero .et_pb_column {
	padding: 0 !important;
}

/* ─── Hero card ─── */

/* Desktop: transparent, right-aligned, 40% width */
.hero-card {
	background: transparent !important;
	width: 40% !important;
	min-width: 300px !important;
	margin-left: auto !important;
}

/* Tablet + mobile: full layout switch */
@media (max-width: 980px) {
	#hero.et_pb_section {
		padding: 40px 5% 48px !important;
		justify-content: flex-end !important;
		background-image: url('/wp-content/uploads/ilv/iris-hero-mobile.jpg') !important;
		background-position: center 30% !important;
	}

	.hero-card {
		width: calc(100% - 8vw) !important;
		min-width: unset !important;
		margin-left: auto !important;
		margin-right: auto !important;
		text-align: center !important;
		background: rgba(0, 0, 0, 0.35) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		border-radius: var(--radius-lg) !important;
		padding: 24px !important;
	}

	/* Buttons: stack on mobile */
	.btn-row {
		flex-direction: column !important;
		align-items: center !important;
	}

	/* Logo: center — wrap needs text-align for the constrained img */
	.hero-card .et_pb_image_wrap {
		display: block !important;
		text-align: center !important;
	}
	.hero-card .et_pb_image_wrap img {
		width: 40vw !important;
		max-width: 200px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		display: block !important;
	}

	/* H1 + subtitle: center text */
	.hero-card .et_pb_heading h1,
	.hero-subtitle,
	.hero-subtitle p {
		text-align: center !important;
	}
}

/* ─── Hero logo size fix ─── */
/* The Divi image module stretches to fill the card width without an explicit size.
   Target the img directly to match wireframe: ~20vw, matching the Astro .hero-logo rule. */
#hero .et_pb_image_wrap img {
	width: 20vw !important;
	max-width: 327px !important;
	height: auto !important;
}

/* ─── Hero card spacing: match wireframe exactly ─── */
/* Remove Divi's default flex gap so we control spacing via margins only */
.hero-card {
	gap: 0 !important;
}

/* Logo → heading: 60px gap (wireframe) */
#hero .et_pb_image {
	margin-bottom: 60px !important;
}

/* Heading → subtitle: 12px gap (wireframe) */
#hero .et_pb_heading {
	margin-bottom: 12px !important;
}

/* Remove extra padding Divi adds to h1 inside heading module */
.hero-card .et_pb_heading h1 {
	padding-bottom: 0 !important;
}

/* Subtitle → buttons: 24px gap (wireframe) */
#hero .hero-subtitle {
	margin-bottom: 24px !important;
}

/* H1: weight + shadow from Astro wireframe */
.hero-card .et_pb_heading h1 {
	font-weight: 700 !important;
	line-height: 1.2 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

/* Subtitle: white text on dark bg, 12px to match wireframe (calc(var(--text-m)*0.6)) */
.hero-subtitle,
.hero-subtitle p {
	color: rgba(255, 255, 255, 0.85) !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	font-size: 12px !important;
	line-height: 1.5 !important;
}

/* Button row: horizontal flex, overrides Divi group column default */
.btn-row {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

/* Mobile: dark frosted overlay for readability + button centering */
@media (max-width: 980px) {
	.hero-card {
		max-width: 100%;
		margin-left: 0;
		background: rgba(0, 0, 0, 0.35) !important;
		backdrop-filter: blur(10px) !important;
		-webkit-backdrop-filter: blur(10px) !important;
		border: 1px solid rgba(255, 255, 255, 0.15) !important;
		border-radius: var(--radius-lg) !important;
		padding: 24px !important;
	}

	/* Buttons: stack + center (must be after .btn-row base rule to win) */
	.btn-row {
		flex-direction: column !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* ─── Pain Points section heading: centered + bold to match wireframe ─── */
/* Divi renders h2 inside .et_pb_heading_container — the .section h2 rule in Astro
   doesn't apply here because Divi uses et_pb_section, not .section. */
#herkenbaar .et_pb_heading .et_pb_module_header {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Pain Points cards: stretch to equal height within each row ─── */
/* Each column in the pain points grid is a flex container (flex-direction: column).
   The group element (which carries .pain-item.glass-card) defaults to flex-grow: 0,
   so shorter-content cards don't fill the full column height set by the tallest sibling.
   flex: 1 makes each card grow to fill its column, giving equal heights per row. */
#herkenbaar .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Pain Points gap: match wireframe 24px gap ─── */
/* Divi section is flex-direction:column with gap:60px between rows (Divi default).
   Card rows use column-gap:5.5% (~59px) between the two card columns.
   Wireframe (.grid-2col) uses gap:24px for both axes. Override both here. */
#herkenbaar.et_pb_section {
	gap: 24px;
}
#herkenbaar .et_pb_row {
	column-gap: 24px;
}

/* ─── Pain Points: stack to single column on mobile ─── */
/* Divi generates .et_flex_column_12_24_phone { width: calc(50% - ...) } at max-width:767px,
   which locks the pain point cards at 50% width even on phone. Override that rule scoped
   to #herkenbaar so the cards go full-width and wrap naturally. Also reset the row gap so
   stacked cards have the same 24px vertical spacing as the wireframe. */
@media (max-width: 767px) {
	#herkenbaar .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#herkenbaar .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Aanpak section (#aanpak) — "Jouw succes, mijn missie" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe uses .section-charcoal (#262626 bg) with a .grid-2col (24px gap,
   2 columns, centered). Divi renders .et_pb_section with .et_pb_row flex rows
   using its default 5.5% column-gap (~56px) and 60px row-gap between sections.
   These overrides replicate the wireframe layout precisely. */

/* ─── Section padding: match wireframe 64px top/bottom ─── */
/* Divi's generated inline style sets padding to 80px. Override with specificity. */
#aanpak.et_pb_section {
	padding-top: 64px !important;
	padding-bottom: 64px !important;
}

/* ─── Section row gap: 24px between heading row and card rows ─── */
/* Divi section is flex-direction:column; default gap is 60px between rows.
   Wireframe spacing between intro text and grid is ~24px. */
#aanpak.et_pb_section {
	gap: 24px;
}

/* ─── Section h2 heading: centered, large, white ─── */
/* Divi's .et_pb_heading_container doesn't inherit .section h2 centering because
   Divi uses et_pb_section, not .section. Scope to the first row (heading row only)
   via the full-width column class .et_flex_column_24_24. */
#aanpak .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
	color: #ffffff;
}

/* Divi-specific: cannot be solved via CSS classes because the Astro wireframe wraps
   h3+p in a .feature-card-body div (padding: 20px). Divi has no such wrapper — heading
   and text modules are direct flex children of the .feature-card group. Adding padding
   to the group itself would bleed into the card image. These rules apply padding only
   to the heading and text modules, replicating the .feature-card-body pattern. */
#aanpak .feature-card .et_pb_heading {
	padding: 0 20px;
}
#aanpak .feature-card .et_pb_text {
	padding: 0 20px 20px;
}

/* Divi-specific: cannot be solved via CSS classes because .feature-card-body h3 rules
   in components.css target .feature-card-body h3, which doesn't exist in Divi's output.
   Divi renders .et_pb_module_header inside .et_pb_heading_container. !important required
   because Divi's deferred CSS sets color and font-size with high specificity. */
#aanpak .feature-card .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: 18px !important;
	text-align: left !important;
	font-weight: 600;
}

/* Divi-specific: cannot be solved via CSS classes because the global .section-intro rule
   targets the module DIV element, not the .et_pb_text_inner p inside it. The p gets
   no inherited color override (Divi's deferred CSS resets it), so text-align and color
   must be set directly on the p. Color is var(--primary-350) (teal) because #aanpak has
   a dark charcoal background — the global .section-intro { color: var(--neutral-600) }
   rule gives gray, which is wrong on dark bg. The .section-charcoal > .section-intro
   override in style.css uses a direct-child (>) selector that cannot reach through
   Divi's intermediate row/column wrapper elements. */
#aanpak .et_flex_column_24_24 .et_pb_text .et_pb_text_inner p {
	color: var(--primary-350);
	text-align: center;
}

/* Divi-specific: cannot be solved via CSS classes because .feature-card-body p in
   components.css targets .feature-card-body p, which doesn't exist in Divi's output.
   The intro text rule above (et_flex_column_24_24 scoped) does not reach card columns,
   but Divi may still apply inherited or deferred colors to .et_pb_text_inner p. */
#aanpak .feature-card .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-700);
	text-align: left;
	font-size: var(--text-s);
	line-height: 1.5;
}

/* ─── Card column gap: 24px to match wireframe ─── */
/* Divi uses column-gap: 5.5% (~56px at 1024px). Wireframe grid uses gap: 24px. */
#aanpak .et_pb_row {
	column-gap: 24px;
}

/* ─── Equal card heights: flex-grow so shorter cards fill column ─── */
/* Same pattern used in #herkenbaar for pain-item cards. */
#aanpak .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Mobile: stack cards to single column ─── */
/* Divi locks columns at 50% (et_flex_column_12_24_phone) at max-width:767px.
   Stack to 1-col and restore vertical spacing. */
@media (max-width: 767px) {
	#aanpak .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#aanpak .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Uitdagingen section (#uitdagingen) — "Challenges" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: centered h2 (34px/700), centered intro paragraph, 3-column
   grid of glass challenge cards, 24px gap between cards, white section bg.
   Divi renders h2 left-aligned at 26px/500 with 5.5% column-gap. */

/* ─── Section heading: centered, bold, large — match wireframe ─── */
/* Divi's heading module renders .et_pb_module_header inside .et_pb_heading_container.
   The default Divi weight is 500 and alignment is left. !important required because
   Divi's deferred CSS sets text-align:start on all .et_pb_text_N modules globally,
   and its base reset cascades through the DOM. Without !important, specificity alone
   does not win. */
#uitdagingen .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
	line-height: 1.5 !important;
	color: var(--neutral-900);
}

/* Divi-specific: cannot be solved via CSS classes because the global .section-intro
   rule targets the module DIV, not the .et_pb_text_inner p inside it. Divi's deferred
   CSS sets text-align:start directly on the p, which overrides inheritance from the div.
   !important is required — Divi's deferred CSS wins the specificity battle without it
   (confirmed by DevTools cascade: only this rule matches the p; removing it leaves the
   p with browser default left-alignment). Color is explicit on the p for the same reason:
   global .section-intro sets neutral-600 on the div, but Divi may reset the p color. */
#uitdagingen .et_flex_column_24_24 .et_pb_text .et_pb_text_inner p {
	text-align: center !important;
	color: var(--neutral-600);
}

/* ─── Section row gap: tighten heading row → card row spacing ─── */
/* Divi section is flex-direction:column with default 60px gap between rows.
   Wireframe has ~24px between intro text and card grid.
   !important required — Divi generates inline gap on the section element. */
#uitdagingen.et_pb_section {
	gap: 24px !important;
}

/* ─── Card column gap: 24px to match wireframe ─── */
/* Divi uses column-gap: 5.5% (~56px at 1024px). Wireframe grid uses gap: 24px.
   !important required — Divi sets column-gap inline or via high-specificity rules. */
#uitdagingen .et_pb_row {
	column-gap: 24px !important;
}

/* ─── Equal card heights: flex-grow so shorter cards fill column ─── */
/* Cards have varying text lengths. flex:1 makes each card group grow to fill
   its column height, giving equal heights across the row. */
#uitdagingen .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Card padding: ensure text has breathing room ─── */
/* .challenge-card in components.css sets padding:24px on .et_pb_group.
   Divi may override with 0 on inner modules — no extra override needed
   since the group padding is applied via the class. */

/* ─── Mobile: stack challenge cards to single column ─── */
/* Divi generates et_flex_column_8_24_phone (8/24 = 33%) at max-width:767px.
   Override to 100% width so cards stack vertically on phone. */
@media (max-width: 767px) {
	#uitdagingen .et_pb_row .et_flex_column_8_24_phone {
		width: 100% !important;
	}
	#uitdagingen .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── GLOBAL: Section min-heights ───
   ═══════════════════════════════════════════════════════════════════════

   The wireframe applies min-height via .section-full (90vh), .section-mid (70vh),
   and .section-half (50vh) helper classes. Those classes are not present on Divi
   sections (which use .et_pb_section instead of .section), so the min-height
   rules in the class-based block above never fire.

   Fix: apply min-height directly per section ID on the .et_pb_section element.
   !important is required because Divi generates inline styles and high-specificity
   deferred CSS that would otherwise win without it.

   Reference heights from wireframe design (global.css section size variants):
     section-full  → 90vh  (#herkenbaar, #aanpak, #uitdagingen, #coaching-aanbod, #werkwijze, #ervaringen)
     section-mid   → 70vh  (#waarom-nu, #over-iris, #nieuwsbrief)
     section-half  → 50vh  (#quote div, #contact)
     #hero is already handled above (90vh via its dedicated block)
     #faq, #partnerships → no min-height (default / content-driven) */

/* 90vh sections */
#herkenbaar.et_pb_section,
#aanpak.et_pb_section,
#uitdagingen.et_pb_section,
#coaching-aanbod.et_pb_section,
#werkwijze.et_pb_section,
#ervaringen.et_pb_section {
	min-height: 90vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* 70vh sections */
#waarom-nu.et_pb_section,
#over-iris.et_pb_section,
#nieuwsbrief.et_pb_section {
	min-height: 70vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* 50vh sections */
#contact.et_pb_section {
	min-height: 50vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* Quote block: rendered as a div.et_pb_section in Divi, not a <section>.
   The generator now sets element_id="quote" so #quote is stable.
   .et_pb_section_8 is kept as a fallback in case the id is absent. */
#quote.et_pb_section,
.et_pb_section_8 {
	min-height: 50vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Quote section (#quote) — "Echt succes is weten wie je bent" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: charcoal bg (#262626), white centred italic quote text at
   ~28px (clamp text-xl). No heading — the quote IS the content.
   Divi overrides color and text-align on the <p> element directly via
   deferred CSS, so both must be set with !important on the p itself.

   Selector rationale: both #quote (stable) and .et_pb_section_8 (fallback)
   are included so the rule survives page regeneration. */

#quote .et_pb_text_inner p,
.et_pb_section_8 .et_pb_text_inner p {
	color: #ffffff !important;
	text-align: center !important;
	/* font-style: italic already applied via <em> wrapper in generator */
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
	/* Browser default line-height ~1.2 is too tight for a 2-line italic heading font.
	   1.4 gives comfortable reading without excessive spacing. */
	line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Coaching aanbod / Pricing section (#coaching-aanbod) ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: dark charcoal bg, centered h2 (white), centered intro text
   (teal / primary-350), 3 pricing cards in a row with 24px gap.
   Each card has a teal header band (card name), white body, price, feature
   list with ✓ checkmarks, and a full-width CTA button.
   Featured card has a 2px teal border. All cards equal height. */

/* ─── Section heading: centered, bold, large — match wireframe ─── */
/* Divi renders h2 left-aligned (text-align:start). The global .section h2
   rule doesn't reach et_pb_section. !important needed: Divi deferred CSS wins. */
#coaching-aanbod .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Intro text: teal color on dark bg, centered ─── */
/* The global .section-charcoal > .section-intro rule uses a direct-child (>)
   selector that cannot penetrate Divi's row/column wrappers. Must scope to
   the section ID and target the actual p element inside .et_pb_text_inner.
   Color: var(--primary-350) ≈ rgb(166,220,216) — measured from wireframe. */
#coaching-aanbod .et_flex_column_24_24 .et_pb_text .et_pb_text_inner p {
	color: var(--primary-350);
	text-align: center;
}

/* ─── Section row gap: tighten heading → cards row spacing ─── */
/* Divi section flex-direction:column defaults to 60px gap between rows.
   Match wireframe ~24px between intro and card grid. */
#coaching-aanbod.et_pb_section {
	gap: 24px;
}

/* ─── Card column gap: 24px between the 3 card columns ─── */
/* Divi uses column-gap: 5.5% (~56px at 1024px). Wireframe uses gap: 24px. */
#coaching-aanbod .et_pb_row {
	column-gap: 24px;
}

/* ─── Equal card heights: flex-grow so shorter cards fill column ─── */
/* Cards have varying content lengths. flex:1 on the group makes each card
   grow to fill its column, giving equal heights across the row. */
#coaching-aanbod .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Pricing card: white bg, rounded corners, shadow, flex column ─── */
/* .pricing-card class is applied via the generator. Divi group renders as
   flex container but doesn't inherit the components.css rules because those
   apply to the Astro wireframe DOM, not Divi. Replicate them here. */
#coaching-aanbod .pricing-card {
	background: var(--white);
	color: var(--neutral-900);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	overflow: hidden;
	text-align: center;
	display: flex !important; /* Divi group already flex; reinforce */
	flex-direction: column !important;
	row-gap: 0 !important; /* Reset generator row-gap; spacing via padding below */
}

/* ─── Featured card: teal border ─── */
#coaching-aanbod .pricing-card.featured {
	border: 2px solid var(--primary-500);
}

/* ─── Card heading → teal header band ─── */
/* Divi renders the card name as .et_pb_heading inside the group. Simulate
   the .pricing-header band: teal background, white text, centered, padded.
   !important on color: Divi sets h3 color=WHITE inline via generated CSS. */
#coaching-aanbod .pricing-card .et_pb_heading {
	background: var(--primary-500);
	padding: 16px !important;
}
#coaching-aanbod .pricing-card .et_pb_heading .et_pb_module_header {
	color: var(--white) !important;
	font-family: var(--font-heading);
	font-weight: 600;
	text-align: center !important;
	font-size: 1rem !important;
	margin: 0;
	padding: 0 !important;
}

/* ─── Featured card: slightly darker teal header ─── */
#coaching-aanbod .pricing-card.featured .et_pb_heading {
	background: var(--primary-550);
}

/* ─── Card body: price text + feature list + button area ─── */
/* All modules after the heading need a padded body context.
   Target .et_pb_text (price/period) and .et_pb_icon_list with padding. */
#coaching-aanbod .pricing-card .et_pb_text {
	padding: 24px 24px 0 !important;
}

/* ─── Price text ─── */
/* text-align: center !important required: Divi's deferred CSS sets text-align:start
   directly on <p> elements inside .et_pb_text_inner, overriding card-level inheritance.
   The .pricing-card { text-align: center } rule is not enough to reach through Divi's
   module wrappers — must target the p directly. */
#coaching-aanbod .pricing-card .pricing-price {
	font-family: var(--font-heading);
	font-size: var(--text-2xl);
	font-weight: 700;
	color: var(--neutral-900);
	margin: 0 0 4px;
	text-align: center !important;
}
#coaching-aanbod .pricing-card .pricing-period {
	font-size: var(--text-s);
	color: var(--neutral-500);
	margin: 0 0 20px;
	text-align: center !important;
}

/* ─── Feature list: left-aligned, checkmark icons ─── */
/* Divi icon-list renders span.et-pb-icon with the ETmodules font glyph.
   &#x39; in ETmodules = chevron arrow ("»"), not a checkmark.
   Strategy: hide the Divi icon span; add CSS ::before checkmark (U+2713)
   via .et_pb_icon_list_text::before, matching wireframe .pricing-features li::before.
   No generator change needed — purely a CSS override. */
#coaching-aanbod .pricing-card .et_pb_icon_list {
	padding: 0 24px 24px !important;
	text-align: left;
}
#coaching-aanbod .pricing-card .et_pb_icon_list_item {
	border-bottom: 1px solid var(--neutral-100);
	padding: 6px 0 6px 20px !important;
	position: relative;
	align-items: flex-start !important;
}
/* Hide Divi's icon glyph */
#coaching-aanbod .pricing-card .et-pb-icon {
	display: none !important;
}
/* Inject CSS checkmark */
#coaching-aanbod .pricing-card .et_pb_icon_list_text::before {
	content: '\2713'; /* ✓ */
	color: var(--primary-500);
	font-weight: 600;
	position: absolute;
	left: 0;
	top: 6px;
	font-family: var(--font-body);
}
#coaching-aanbod .pricing-card .et_pb_icon_list_text {
	font-size: var(--text-s);
	color: var(--neutral-700);
	line-height: 1.5;
}

/* ─── CTA button: full-width, pushed to bottom ─── */
/* .btn-full sets width:100% in components.css. Divi button module needs the
   outer wrapper to fill width too. push button to bottom via margin-top:auto
   on the button module element. */
#coaching-aanbod .pricing-card .et_pb_button_module_wrapper {
	margin-top: auto;
	padding: 0 24px 24px !important;
	width: 100%;
	box-sizing: border-box;
}
#coaching-aanbod .pricing-card .et_pb_button {
	width: 100%;
	box-sizing: border-box;
	text-align: center;
}

/* ─── Mobile: stack pricing cards to single column ─── */
/* Divi generates et_flex_column_8_24_phone (8/24 = 33%) at max-width:767px.
   Override to 100% so cards stack vertically on phone. */
@media (max-width: 767px) {
	#coaching-aanbod .et_pb_row .et_flex_column_8_24_phone {
		width: 100% !important;
	}
	#coaching-aanbod .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Werkwijze section (#werkwijze) — "Van twijfel naar actie" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: white bg (section-light), centered h2, centered intro text,
   4 step cards in a row with 24px gap. Each card: large accent-550 step number
   (h2), step title (h3), body paragraph. Equal heights per row.
   Divi renders with 5.5% column-gap (~56px) and h2 left-aligned at 26px/500. */

/* ─── Section heading: centered, bold, large — match wireframe ─── */
/* Divi renders h2 left-aligned (text-align:start) at 26px/500.
   The global .section h2 rule doesn't reach et_pb_section. */
#werkwijze .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Intro text: centered, neutral-600 color ─── */
/* Divi's deferred CSS sets text-align:start on the p element inside
   .et_pb_text_inner, overriding inheritance from the div.section-intro.
   Must target the p directly; !important required to beat Divi's deferred CSS. */
#werkwijze .et_flex_column_24_24 .et_pb_text .et_pb_text_inner p {
	text-align: center !important;
	color: var(--neutral-600);
}

/* ─── Section row gap: tighten heading → card row spacing ─── */
/* Divi section flex-direction:column defaults to 60px gap between rows.
   Match wireframe ~24px between intro and card grid. */
#werkwijze.et_pb_section {
	gap: 24px;
}

/* ─── Card column gap: 24px to match wireframe ─── */
/* Divi uses column-gap: 5.5% (~56px at 1024px). Wireframe uses gap: 24px. */
#werkwijze .et_pb_row {
	column-gap: 24px;
}

/* ─── Step number: accent-550 colour (override Divi's deferred inline colour) ─── */
/* The step-card h2 carries class et_pb_module_header, not step-number.
   components.css .step-number rule doesn't apply because the class is missing.
   Divi's deferred CSS sets heading colour to --accent-500 (#ff6b6b) via inline
   or high-specificity rules. Override here to accent-550 (#e14947) to match
   the wireframe. !important required — Divi's generated CSS wins without it. */
#werkwijze .step-card .et_pb_heading .et_pb_module_header {
	color: var(--accent-550) !important;
	font-size: 70px !important;
	font-weight: 700 !important;
	line-height: 1 !important;
	margin-bottom: 12px !important;
}

/* ─── Step title (h3): font family, size, weight, dark colour ─── */
/* Divi renders h3 as .et_pb_module_header inside a second .et_pb_heading module.
   The step-number rule above uses !important on color for all .et_pb_heading inside
   step-card — this rule must also use !important to override that cascade for the h3.
   The adjacent sibling selector (.et_pb_heading + .et_pb_heading) correctly targets
   only the second heading (title), not the first (step number). */
#werkwijze .step-card .et_pb_heading + .et_pb_heading .et_pb_module_header {
	font-family: var(--font-heading);
	font-size: 16px !important;
	font-weight: 600;
	color: var(--neutral-900) !important;
	text-align: center;
}

/* ─── Step body text: centered, neutral-600 colour ─── */
/* Divi's deferred CSS sets text-align:start on p inside .et_pb_text_inner.
   Must target the p directly; !important required to beat Divi's deferred rule. */
#werkwijze .step-card .et_pb_text .et_pb_text_inner p {
	text-align: center !important;
	color: var(--neutral-600) !important;
	font-size: var(--text-s);
	line-height: 1.5;
}

/* ─── Equal card heights: flex-grow so shorter cards fill column ─── */
/* Cards have varying text lengths. flex:1 makes each card group grow to fill
   its column height, giving equal heights across the row. */
#werkwijze .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Card padding: center content within glass-card ─── */
/* The .step class in components.css sets padding:24px and text-align:center.
   Divi group doesn't inherit those because they target .step not .et_pb_group. */
#werkwijze .step-card {
	text-align: center;
	padding: 24px;
}

/* ─── Mobile: stack step cards to single column ─── */
/* Divi generates et_flex_column_6_24_phone (6/24 = 25%) at max-width:767px,
   locking cards at 25% width on phone. Override to 100% and add vertical
   spacing so stacked cards match wireframe single-column layout. */
@media (max-width: 767px) {
	#werkwijze .et_pb_row .et_flex_column_6_24_phone {
		width: 100% !important;
	}
	#werkwijze .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── FAQ section (#faq) — "Twijfel je nog?" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: white bg (section-light), centered h2, centered intro text
   (neutral-600), single-column faq-list (max-width 700px, centered),
   4 faq-items stacked with border-bottom dividers, no glass-card styling.
   Divi renders with a 2-row layout: header row + items row. */

/* ─── Section heading: centered, bold, large — match wireframe ─── */
/* Divi renders h2 left-aligned. Must target .et_pb_module_header directly. */
#faq .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Intro text: centered, neutral-600 ─── */
/* Divi's deferred CSS sets text-align:start on p inside .et_pb_text_inner.
   Must target p directly; !important required to beat Divi's deferred rule. */
#faq .et_flex_column_24_24 .et_pb_text .et_pb_text_inner p {
	text-align: center !important;
	color: var(--neutral-600);
}

/* ─── Section row gap: tighten heading → items row spacing ─── */
/* Divi section flex-direction:column defaults to 60px gap between rows.
   Match wireframe ~24px between intro and faq list. */
#faq.et_pb_section {
	gap: 24px;
}

/* ─── FAQ list container: max-width 700px, centered ─── */
/* The items row's column acts as the faq-list container.
   Constrain it to 700px (wireframe .faq-list) and center it. */
#faq .et_pb_row .et_pb_column {
	max-width: 700px !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

/* ─── FAQ item groups: divider + padding, no card styling ─── */
/* .faq-item groups match wireframe .faq-item: border-bottom divider, 16px 0 padding.
   No glass-card background — items are transparent on white section bg. */
#faq .faq-item {
	border-bottom: 1px solid var(--neutral-200);
	padding: 16px 0 !important;
	background: transparent !important;
	border-radius: 0 !important;
	box-shadow: none !important;
}

/* ─── FAQ question (h3): 16px, weight 600, dark color ─── */
/* Divi's deferred CSS sets h3 color and size via inline rules.
   !important required to override Divi's generated specificity. */
#faq .faq-item .et_pb_heading .et_pb_module_header {
	font-family: var(--font-heading);
	font-size: 16px !important;
	font-weight: 600 !important;
	color: var(--neutral-900) !important;
	text-align: left !important;
	margin-bottom: 0;
}

/* ─── FAQ answer (p): text-s, neutral-600, margin-top 8px ─── */
/* Divi's deferred CSS sets text-align:start on p. Must target p directly.
   !important on color: Divi may cascade a different inherited color without it. */
#faq .faq-item .et_pb_text .et_pb_text_inner p {
	font-size: var(--text-s) !important;
	color: var(--neutral-600) !important;
	text-align: left !important;
	line-height: 1.6;
	margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Ervaringen section (#ervaringen) — "Dit zeggen anderen" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: white bg (section-light), centered h2 (34px/700), 2×2 grid
   of testimonial cards with 24px gap. Each card: glass-card + testimonial-card
   classes, coral quote marks via ::before/::after (from components.css),
   italic quote text, right-aligned bold author. No section-intro paragraph.
   Divi renders with 5.5% column-gap (~56px) and 60px gap between rows.
   components.css .testimonial-card padding/bg/color rules apply correctly
   via the class — only layout and heading overrides needed here. */

/* ─── Section heading: centered, bold, large — match wireframe ─── */
/* Divi renders h2 left-aligned at 26px/500. The global .section h2 rule
   doesn't reach et_pb_section. !important required to beat Divi's deferred CSS. */
#ervaringen .et_flex_column_24_24 .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Section row gap: 24px between heading row and card rows ─── */
/* Divi section flex-direction:column defaults to 60px gap between rows.
   Wireframe ~24px between heading and first card row, and between the two
   card rows. !important required — Divi may generate inline gap on the section. */
#ervaringen.et_pb_section {
	gap: 24px !important;
}

/* ─── Card column gap: 24px to match wireframe ─── */
/* Divi uses column-gap: 5.5% (~56px at 1024px). Wireframe uses gap: 24px. */
#ervaringen .et_pb_row {
	column-gap: 24px;
}

/* ─── Equal card heights: flex-grow so shorter cards fill column ─── */
/* Cards have varying text lengths. flex:1 makes each card group grow to fill
   its column, giving equal heights per row (same pattern as #herkenbaar). */
#ervaringen .et_pb_column > .et_pb_group {
	flex: 1;
}

/* ─── Mobile: stack testimonial cards to single column ─── */
/* Divi generates et_flex_column_12_24_phone (12/24 = 50%) at max-width:767px,
   locking cards at 50% width on phone. Override to 100% so cards stack
   vertically. Same pattern as #herkenbaar. */
@media (max-width: 767px) {
	#ervaringen .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#ervaringen .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Waarom nu section (#waarom-nu) — "Wat er gebeurt als je blijft doorploeteren" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: dark bg (#1A1A1A), two-column layout (heading+text left, image right),
   heading h2 left-aligned (34px/700/white), body paragraph left-aligned teal
   (rgb(166,220,216) / --primary-350), ~19px font-size.
   Divi renders heading at 26px/500 and body text grey (neutral-700) at 14px. */

/* ─── Section heading: bold, large — match wireframe ─── */
/* Divi renders h2 at 26px/500 left-aligned. The global .section h2 rule doesn't
   reach et_pb_section. !important required: Divi deferred CSS wins without it. */
#waarom-nu .et_pb_heading .et_pb_module_header {
	font-weight: 700 !important;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem) !important;
	color: #ffffff !important;
	text-align: left !important;
}

/* ─── Body text: teal colour, correct size — match wireframe ─── */
/* Divi renders the paragraph at 14px in neutral-700 grey. The section has a dark bg
   so text should be teal (primary-350). Divi's deferred CSS sets color on the p
   element directly (not the div), so we must target .et_pb_text_inner p.
   !important required: Divi deferred CSS wins the specificity battle without it. */
#waarom-nu .et_pb_text .et_pb_text_inner p {
	color: var(--primary-350) !important;
	font-size: var(--text-m) !important;
	text-align: left !important;
	line-height: 1.6;
}

/* ─── Two-column row: vertically centre text and image columns ─── */
/* Wireframe .consequence-layout uses align-items: center so the text column
   and image column are midpoint-aligned. Divi .et_pb_row is the flex container.
   Default align-items is stretch; override to center. */
#waarom-nu .et_pb_row {
	align-items: center;
}

/* ─── Image wrap: rounded corners, fixed height, overflow hidden ─── */
/* Wireframe .consequence-image sets border-radius: 12px (--radius-md), height: 280px,
   overflow: hidden. Divi image module renders .et_pb_image_wrap as the direct wrapper
   around the img. Target the last-child column to scope to image column only.
   border-radius: 12px used directly — Divi child theme style.css context may not have
   --radius-md variable loaded at cascade time. */
#waarom-nu .et_pb_column:last-child .et_pb_image_wrap {
	border-radius: 12px;
	overflow: hidden;
	height: 280px;
	display: block;
}

/* ─── Image: fill wrap dimensions with object-fit cover ─── */
/* Wireframe .consequence-image img sets width/height 100% + object-fit: cover.
   Divi's deferred CSS sets width:100% on img but not height. Must set height: 100%
   and object-fit: cover explicitly; !important required because Divi may override
   height via its generated inline or high-specificity deferred rules. */
#waarom-nu .et_pb_column:last-child .et_pb_image_wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* ─── Mobile: stack text column above image column ─── */
/* Wireframe .consequence-layout stacks to 1 column at max-width:767px.
   Divi generates et_flex_column_12_24_phone (50%) locking both columns at
   half-width. Override to 100% so they stack vertically on phone. */
@media (max-width: 767px) {
	#waarom-nu .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#waarom-nu .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Nieuwsbrief section (#nieuwsbrief) — email optin form ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: charcoal bg (#262626), centered h2 (white), centered intro text
   (teal / primary-350), email optin form visible, section-mid (70vh).
   Generator sets bg_color=CHARCOAL inline (no css_class), so class-based rules
   like .section-charcoal > .section-intro cannot reach through Divi's wrappers.
   Must scope all overrides to #nieuwsbrief directly. */

/* ─── Section heading: centered, white — match wireframe ─── */
/* Divi renders h2 left-aligned (text-align:start) at default weight.
   !important required: Divi deferred CSS sets text-align:start on the header. */
#nieuwsbrief .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
	color: #ffffff !important;
}

/* ─── Intro text: teal color, centered — match wireframe ─── */
/* Divi's deferred CSS sets text-align:start and a grey color directly on the p
   element inside .et_pb_text_inner, overriding inheritance from the div.section-intro.
   The global .section-charcoal > .section-intro uses a direct-child (>) selector
   that cannot penetrate Divi's row/column wrappers.
   Color: var(--primary-350) = rgb(166,220,216) — confirmed from wireframe measurement.
   !important on both: Divi deferred CSS wins specificity without it. */
#nieuwsbrief .et_pb_text.section-intro .et_pb_text_inner p,
#nieuwsbrief .section-intro .et_pb_text_inner p {
	color: var(--primary-350) !important;
	text-align: center !important;
}

/* ─── Signup module: remove Divi's default teal bg ─── */
/* DOM confirmed: et_pb_signup renders with bg_layout=dark → Divi applies background-color
   #4ECDC4 (teal) on the module wrapper even when no email provider is configured and the
   form is empty. This creates an ugly teal box on the charcoal section bg. Set transparent
   so the charcoal bg shows through. When the provider IS configured and a form renders,
   the form CSS below applies the correct styling. */
#nieuwsbrief .et_pb_signup {
	background-color: transparent !important;
	padding: 0 !important;
}

/* === NIEUWSBRIEF email form (when provider is configured) === */
/* Divi et_pb_signup renders .et_pb_newsletter_form as the flex row container,
   .et_pb_newsletter_fields wraps the email input, and .et_pb_newsletter_button_wrap
   wraps the submit button. These rules replicate the wireframe newsletter-form layout:
   inline flex row, rounded input with semi-transparent white border on dark bg, teal button.
   DOM confirmed from DevTools inspection (empty now — provider not set up locally). */
#nieuwsbrief .et_pb_newsletter_form {
	display: flex !important;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto;
	align-items: center;
}
#nieuwsbrief .et_pb_newsletter_fields {
	flex: 1;
}
#nieuwsbrief .et_pb_newsletter_fields input[type="email"],
#nieuwsbrief .et_pb_newsletter_fields input[name="et_pb_signup_email"] {
	width: 100% !important;
	padding: 12px 16px;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: 8px;
	background: rgba(255, 255, 255, 0.1);
	color: #ffffff;
	font-size: 15px;
	box-sizing: border-box;
}
#nieuwsbrief .et_pb_newsletter_fields input::placeholder {
	color: rgba(255, 255, 255, 0.5);
}
#nieuwsbrief .et_pb_newsletter_button_wrap,
#nieuwsbrief .et_pb_button_wrapper {
	flex-shrink: 0;
}
#nieuwsbrief .et_pb_newsletter_button_wrap .et_pb_button,
#nieuwsbrief .et_pb_button_wrapper .et_pb_button {
	background: var(--primary-500) !important;
	color: #ffffff !important;
	border: none !important;
	border-radius: 8px !important;
	padding: 12px 24px !important;
	font-weight: 600 !important;
	font-family: var(--font-heading) !important;
	font-size: 15px !important;
	cursor: pointer;
	white-space: nowrap;
}
/* Remove Divi's default arrow icon on newsletter button */
#nieuwsbrief .et_pb_newsletter_button_wrap .et_pb_button::after {
	display: none !important;
}
/* Mobile: stack input above button on narrow screens */
@media (max-width: 540px) {
	#nieuwsbrief .et_pb_newsletter_form {
		flex-direction: column;
	}
	#nieuwsbrief .et_pb_newsletter_fields,
	#nieuwsbrief .et_pb_newsletter_button_wrap {
		width: 100%;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Contact form section (#contact-form) — teal CTA with form + buttons ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: teal bg (primary-600 = #1F9189), centered white heading,
   centered white/light text, contact form visible, btn-row with 2 buttons
   (btn-primary = white bg + teal text, btn-outline = transparent + white border/text).
   Generator sets bg_color=PRIMARY_600 but Divi groups section_12 with white
   sections in its deferred CSS and omits the background-color rule.
   Must override with !important scoped to #contact-form. */

/* ─── Background: teal primary-600 ─── */
#contact-form.et_pb_section {
	background-color: #1F9189 !important;
	min-height: 50vh !important;
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
}

/* ─── Heading: white, centered ─── */
/* Divi renders h2 left-aligned at 26px/500. Generator sets color=WHITE inline
   but Divi's deferred CSS overrides it. Must target .et_pb_module_header directly.
   !important required: Divi deferred CSS wins specificity without it. */
#contact-form .et_pb_heading .et_pb_module_header {
	color: #ffffff !important;
	text-align: center !important;
	font-weight: 700;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem);
}

/* ─── Intro text: white, centered ─── */
/* Divi's deferred CSS sets text-align:start and a dark color directly on the p
   element inside .et_pb_text_inner, overriding inheritance from the div.section-intro.
   !important on both: Divi deferred CSS wins without it. */
#contact-form .et_pb_text .et_pb_text_inner p {
	color: #ffffff !important;
	text-align: center !important;
}

/* ─── Contact form submit button: btn-primary style on dark/teal bg ─── */
/* DOM confirmed: submit button is BUTTON.et_pb_button.et_pb_contact_submit with
   computed background rgba(0,0,0,0) — transparent — on the teal section bg.
   Previous rule only set border-color + color; missing background, border-radius,
   padding, font-weight. Now styled to match btn-primary: teal bg, white text, 8px radius.
   Hover: slightly lighter teal (primary-550) to indicate interactivity. */
#contact-form .et_pb_contact_submit {
	background: var(--primary-500) !important;
	color: #ffffff !important;
	border: 2px solid transparent !important;
	border-radius: 8px !important;
	padding: 14px 32px !important;
	font-family: var(--font-heading) !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	cursor: pointer;
}
#contact-form .et_pb_contact_submit:hover {
	background: var(--primary-550) !important;
	color: #ffffff !important;
}

/* ─── Buttons: btn-primary (white bg + teal text) on teal bg ─── */
/* On .bg-primary sections, components.css sets btn-primary to white bg + teal text.
   Divi doesn't have .bg-primary on the section element, so the class-based rule
   in components.css doesn't fire. Must replicate it here scoped to #contact-form.
   Arrow icon: remove Divi's default ::after arrow that appears on et_pb_button. */
#contact-form .btn-primary.et_pb_button {
	background-color: #ffffff !important;
	color: #1F9189 !important;
	border-color: #ffffff !important;
}
#contact-form .btn-primary.et_pb_button:hover {
	background-color: var(--primary-400) !important;
	color: #ffffff !important;
	border-color: var(--primary-400) !important;
}

/* ─── Buttons: btn-outline (transparent + white border/text) on teal bg ─── */
/* components.css .bg-primary .btn-outline: white border + white text. */
#contact-form .btn-outline.et_pb_button {
	background-color: transparent !important;
	color: #ffffff !important;
	border-color: #ffffff !important;
}
#contact-form .btn-outline.et_pb_button:hover {
	background-color: var(--primary-400) !important;
	border-color: var(--primary-400) !important;
	color: #ffffff !important;
}

/* ─── Remove Divi's default arrow icon on all buttons in this section ─── */
#contact-form .et_pb_button::after {
	display: none !important;
}

/* ─── Button row: horizontal flex, centered ─── */
/* .btn-row is already set to flex-direction:row in the global rule above.
   Center it within the teal section. */
#contact-form .btn-row {
	justify-content: center !important;
}

/* ─── Mobile: stack buttons ─── */
@media (max-width: 980px) {
	#contact-form .btn-row {
		flex-direction: column !important;
		align-items: center !important;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Over Iris section (#over-iris) — 2-column bio layout ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: white bg (section-light), 2-column layout (image LEFT, text RIGHT),
   image at 320px height (object-fit: cover), h2 left-aligned (34px/700),
   3 bio paragraphs at 16px / neutral-600 (#666666 = rgb(102,102,102)) / left-aligned.
   Divi renders h2 at 26px and bio text at 14px in neutral-700 (#4d4d4d).

   Fix strategy:
   - h2: override font-size and weight to match wireframe clamp size
   - bio paragraphs: override color to neutral-600, font-size to 16px, text-align left
   - image: constrain column image height to 320px with object-fit cover
   - mobile: columns already stack (Divi's default); image column first = above text */

/* ─── H2 heading: bold, larger to match wireframe ~34px ─── */
/* Divi renders .et_pb_module_header at 26px/500. The wireframe h2 inside
   .about-layout is text-2xl = clamp(1.875rem, 1.6rem + 0.7vw, 2.25rem) / 700.
   !important required: Divi deferred CSS sets font-size/weight with high specificity. */
#over-iris .et_pb_heading .et_pb_module_header {
	font-size: clamp(1.875rem, 1.6rem + 0.7vw, 2.25rem) !important;
	font-weight: 700 !important;
	text-align: left !important;
	color: var(--neutral-900) !important;
}

/* ─── Bio paragraphs: neutral-600 color, 16px size, left-aligned ─── */
/* Divi's deferred CSS sets color to neutral-700 (#4d4d4d) and text-align:start
   directly on p elements, overriding inheritance. Must target .et_pb_text_inner p
   directly; !important required to beat Divi's generated specificity.
   neutral-600 = #666666 = rgb(102,102,102) — exact wireframe value confirmed. */
#over-iris .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	font-size: 16px !important;
	text-align: left !important;
	line-height: 1.6;
	margin-bottom: 12px;
}

/* ─── Image: constrain to 320px height, cover fill — match wireframe ─── */
/* Divi image module renders img at natural aspect ratio scaled to column width.
   Wireframe .about-image sets height: 320px with object-fit: cover.
   Scope to the first column (image column) to avoid affecting text column. */
#over-iris .et_pb_column:first-child .et_pb_image_wrap {
	display: block;
	height: 320px;
	overflow: hidden;
	border-radius: var(--radius-md);
}
#over-iris .et_pb_column:first-child .et_pb_image_wrap img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block;
}

/* ─── Row: vertically centre both columns — match wireframe align-items:center ─── */
/* Wireframe .about-layout sets align-items:center so the image column and text column
   are vertically centred relative to each other. Divi .et_pb_row defaults to
   align-items:stretch, making the shorter column grow to match the taller one.
   No !important needed — Divi does not set align-items inline on rows. */
#over-iris .et_pb_row {
	align-items: center;
}

/* ─── Mobile: stack columns, image above text ─── */
/* Divi generates et_flex_column_12_24_phone (50%) at max-width:767px.
   Override to 100% so image and text stack vertically.
   Image column (first) naturally appears above text column — no reorder needed. */
@media (max-width: 767px) {
	#over-iris .et_pb_row .et_flex_column_12_24_phone {
		width: 100% !important;
	}
	#over-iris .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px;
	}
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Final CTA section (#contact) — "Klaar voor een goed gesprek?" ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: .cta-section with text-align:center, white h2, teal-tinted
   paragraph (primary-300 or rgba(255,255,255,0.8)), centered button row.
   Divi heading modules do not inherit text-align from the section without
   !important — must target .et_pb_module_header directly. */

/* ─── Heading: white, centred ─── */
/* Divi renders .et_pb_module_header left-aligned by default. The wireframe
   .cta-section { text-align: center } applies to the Astro wrapper, which
   has no Divi equivalent. !important required: Divi deferred CSS sets
   text-align:start on heading elements with high specificity. */
#contact .et_pb_heading .et_pb_module_header {
	text-align: center !important;
	color: #ffffff !important;
}

/* ─── Intro paragraph: light teal/white, centred ─── */
/* Wireframe .cta-section p { color: var(--primary-300) }. Divi's deferred CSS
   sets text-align:start directly on the p element; must target it explicitly.
   Using rgba(255,255,255,0.8) as a safe fallback if --primary-300 is undefined. */
#contact .et_pb_text_inner p {
	text-align: center;
	color: rgba(255, 255, 255, 0.8);
}

/* ─── Button row: horizontal flex, centred ─── */
/* .btn-row base rule sets flex-direction:row. Ensure it is centred within
   the teal CTA section. Flex + justify-content:center matches wireframe. */
#contact .btn-row {
	justify-content: center;
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

/* ═══════════════════════════════════════════════════════════════════════
   ─── Global Footer (Theme Builder, post 115) ───
   ═══════════════════════════════════════════════════════════════════════

   Wireframe: near-black bg (#1a1a1a = neutral-900), grey text (#999 = neutral-400),
   grey links (not teal), white h4 headings, 4-column grid (2fr 1fr 1fr 1fr).
   Copyright row centered at bottom with border-top divider. */

/* ─── Background: near-black #1a1a1a ─── */
footer.et-l--footer .et_pb_section_0_tb_footer {
	background-color: #1a1a1a !important;
}

/* ─── Top padding ─── */
footer.et-l--footer .et_pb_section_0_tb_footer {
	padding-top: 48px !important;
	padding-bottom: 24px !important;
}

/* ─── Default text color: grey ─── */
footer.et-l--footer,
footer.et-l--footer p,
footer.et-l--footer li,
footer.et-l--footer .et_pb_text_inner {
	color: #999999 !important;
	font-size: 0.85rem;
}

/* ─── Headings: white ─── */
footer.et-l--footer h4,
footer.et-l--footer .et_pb_module_header {
	color: #ffffff !important;
}

/* ─── Links: grey (neutral-400), NOT teal ─── */
footer.et-l--footer a {
	color: #999999 !important;
	text-decoration: none;
	transition: color 200ms ease;
}
footer.et-l--footer a:hover {
	color: #cccccc !important;
}

/* ─── Credit link (OOAK.solutions): slightly highlighted ─── */
/* In wireframe, credit link is same grey as other links */

/* ─── Footer nav: force vertical list layout ─── */
footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu {
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	align-items: flex-start !important;
}
footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu > li {
	display: block !important;
	width: 100% !important;
	margin-right: 0 !important;
}

/* ─── Footer menu: remove white background ─── */
footer.et-l--footer .et_pb_menu,
footer.et-l--footer .et_pb_menu .et-menu-nav,
footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu,
footer.et-l--footer .et_pb_menu .et_pb_menu_inner_container {
	background-color: transparent !important;
	background: transparent !important;
}

/* ─── Copyright row: horizontal inline layout, centered ─── */
footer.et-l--footer .et_pb_group_0_tb_footer {
	flex-direction: row !important;
	flex-wrap: wrap !important;
	align-items: center !important;
	justify-content: center !important;
	column-gap: 0.5rem !important;
	padding-top: 24px !important;
	border-top: 1px solid #333333 !important;
}

/* ─── Copyright text size ─── */
footer.et-l--footer .et_pb_group_0_tb_footer .et_pb_text_inner,
footer.et-l--footer .et_pb_group_0_tb_footer .et_pb_text_inner p {
	font-size: 0.75rem !important;
	color: #999999 !important;
}