/*
 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.4.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 — homepage layout + Theme Builder overrides.
   Shared body styles are scoped to the homepage body wrapper to avoid
   bleeding into Theme Builder header/footer blocks. */

html {
	scroll-snap-type: y proximity;
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* Divi runtime inflates spacing at every level (section 60px, row 40px, column 30px).
   Override all to match Astro wireframe which uses padding/margin on children only. */
body.home .et-l--post .et_pb_section {
	gap: 0 !important;
	padding: 64px 5% !important;
}

/* Match Divi header row width (1080px) so body content aligns visually with nav.
   Astro uses 1000px for grids but the Divi header sets the visual reference. */
body.home .et-l--post .et_pb_section > .et_pb_row {
	column-gap: 24px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 1080px !important;
	row-gap: 0 !important;
}

/* Astro: .section-intro { margin: 0 auto 40px } — 40px between heading/intro row
   and content rows. Sections with 2+ content rows (e.g. #herkenbaar 2x2 pain items,
   #ervaringen 2x2 testimonials) need 24px between content rows to match the
   wireframe grid gap. Split: first-row→content = 40px, content→content = 24px. */
body.home .et-l--post .et_pb_section > .et_pb_row:first-child:not(:last-child) {
	margin-bottom: 40px !important;
}
body.home .et-l--post .et_pb_section > .et_pb_row:not(:first-child):not(:last-child) {
	margin-bottom: 24px !important;
}

/* Divi columns default to flex-grow:0 — override so cards fill the row evenly
   like Astro's 1fr grid columns. Also zero Divi's 30px column gap. */
body.home .et-l--post .et_pb_section > .et_pb_row > .et_pb_column {
	flex: 1 1 0% !important;
	gap: 0 !important;
}

/* GLOBAL DIVI RESET: Divi adds padding-bottom:10px to all .et_pb_module_header
   and tight 1:1 line-heights on headings. Reset both — spacing is controlled by
   margin-bottom on the parent heading module, not padding on the header text. */
body.home .et-l--post .et_pb_module_header {
	line-height: 1.3 !important;
	padding-bottom: 0 !important;
}

body.home .et-l--post .et_pb_section > .et_pb_row:not(:first-child) > .et_pb_column {
	display: flex;
}

body.home .et-l--post .et_pb_section > .et_pb_row:not(:first-child) > .et_pb_column > .et_pb_group {
	flex: 1;
}

/* Divi emits runtime section background rules; !important keeps the section
   context classes authoritative once the DB patch adds them to post 31. */
body.home .et-l--post .et_pb_section.section-light {
	background-color: var(--white) !important;
}

body.home .et-l--post .et_pb_section.section-charcoal {
	background-color: #262626 !important;
}

body.home .et-l--post .et_pb_section.bg-primary {
	background-color: #1F9189 !important;
}

/* Divi applies heading font weight, color, and alignment on
   .et_pb_module_header in deferred CSS. Section headings must target that
   element directly to stay consistent across modules. */
body.home .et-l--post .et_pb_section.section-light > .et_pb_row:first-child .et_pb_heading .et_pb_module_header,
body.home .et-l--post .et_pb_section.section-charcoal > .et_pb_row:first-child .et_pb_heading .et_pb_module_header,
body.home .et-l--post .et_pb_section.bg-primary > .et_pb_row:first-child .et_pb_heading .et_pb_module_header,
body.home .et-l--post #coaching-aanbod > .et_pb_row:first-child .et_pb_heading .et_pb_module_header {
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem) !important;
	font-weight: 700 !important;
	margin-bottom: 12px !important; /* Astro: .section h2 { margin-bottom: 12px } */
	text-align: center !important;
}

body.home .et-l--post .et_pb_section.section-light > .et_pb_row:first-child .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
}

body.home .et-l--post .et_pb_section.section-charcoal > .et_pb_row:first-child .et_pb_heading .et_pb_module_header,
body.home .et-l--post .et_pb_section.bg-primary > .et_pb_row:first-child .et_pb_heading .et_pb_module_header,
body.home .et-l--post #coaching-aanbod > .et_pb_row:first-child .et_pb_heading .et_pb_module_header {
	color: #ffffff !important;
}

/* Astro: .section-intro { max-width: 600px; margin: 0 auto 40px }
   Constrain intro text width for readability — long centered lines are hard to scan. */
body.home .et-l--post .section-intro {
	margin-left: auto !important;
	margin-right: auto !important;
	max-width: 600px !important;
}

/* Divi writes color and text alignment directly on inner paragraphs, so the
   intro copy must target .et_pb_text_inner p instead of the outer module. */
body.home .et-l--post .et_pb_section.section-light .section-intro .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	font-size: var(--text-m) !important;
	line-height: 1.6 !important;
	text-align: center !important;
}

body.home .et-l--post .et_pb_section.section-charcoal .section-intro .et_pb_text_inner p,
body.home .et-l--post #coaching-aanbod .section-intro .et_pb_text_inner p {
	color: var(--primary-350) !important;
	font-size: var(--text-m) !important;
	line-height: 1.6 !important;
	text-align: center !important;
}

body.home .et-l--post .et_pb_section.bg-primary > .et_pb_row:first-child .et_pb_text .et_pb_text_inner p {
	color: rgba(255, 255, 255, 0.8) !important;
	font-size: var(--text-m) !important;
	text-align: center !important;
}

/* Astro: .cta-section h2 { margin-bottom: 12px }, .cta-section p { margin-bottom: 32px }
   bg-primary sections have all modules in one column — need explicit vertical rhythm
   since column gap is 0 (global reset). */
body.home .et-l--post .et_pb_section.bg-primary .et_pb_heading {
	margin-bottom: 12px !important;
}
body.home .et-l--post .et_pb_section.bg-primary .et_pb_text {
	margin-bottom: 32px !important;
}

/* Partnerships label-to-logos gap is tighter (16px) than the standard 40px
   heading-to-content gap — !important overrides the generic first-child rule. */
body.home .et-l--post .partnerships-section > .et_pb_row:first-child {
	margin-bottom: 16px !important;
}

body.home .et-l--post .partnerships-section .partnerships-label,
body.home .et-l--post .partnerships-section .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	text-align: center !important;
}

/* Wireframe: compact glass-card logo cards (~300px wide, 200px tall), centered
   in the row with 24px gap. Divi columns default to 50% width — override to
   auto-sized cards constrained to 300px, matching the wireframe layout. */
body.home .et-l--post .partnerships-section > .et_pb_row:last-child {
	justify-content: center !important;
	column-gap: 24px !important;
}
body.home .et-l--post .partnerships-section > .et_pb_row:last-child > .et_pb_column {
	align-items: center;
	background: rgba(255, 255, 255, 0.85);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: var(--radius-md);
	box-shadow: 0 20px 20px rgba(0, 0, 0, 0.03);
	display: flex;
	flex-basis: auto !important;
	justify-content: center;
	max-width: 300px !important;
	min-height: 200px !important;
	padding: 24px !important;
	width: auto !important;
}

body.home .et-l--post .partnerships-section .et_pb_image_wrap img {
	display: block;
	height: 150px !important;
	max-width: 100%;
	object-fit: contain;
	width: auto !important;
}

/* Hero remains unique: the background assets, overlay card position, and
   responsive logo sizing are specific to this section only. */
body.home .et-l--post #hero.et_pb_section {
	background-color: var(--neutral-900) !important;
	min-height: 90vh !important;
	padding: 80px 5% !important;
	justify-content: center !important;
}

body.home .et-l--post #hero .et_pb_row {
	max-width: 100% !important;
	width: 100% !important;
}

body.home .et-l--post #hero .et_pb_column {
	padding: 0 !important;
}

body.home .et-l--post .hero-card {
	background: transparent !important;
	gap: 0 !important;
	margin-left: auto !important;
	min-width: 300px !important;
	width: 40% !important;
}

body.home .et-l--post #hero .et_pb_image_wrap img {
	height: auto !important;
	max-width: 327px !important;
	width: 20vw !important;
}

body.home .et-l--post #hero .et_pb_image {
	margin-bottom: 60px !important;
}

body.home .et-l--post #hero .et_pb_heading {
	margin-bottom: 12px !important;
}

body.home .et-l--post .hero-card .et_pb_heading h1 {
	font-weight: 700 !important;
	line-height: 1.2 !important;
	padding-bottom: 0 !important;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.3);
}

body.home .et-l--post .hero-subtitle {
	margin-bottom: 24px !important;
}

body.home .et-l--post .hero-subtitle .et_pb_text_inner p {
	color: rgba(255, 255, 255, 0.85) !important;
	font-size: 12px !important;
	line-height: 1.5 !important;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

/* F1 change request: hide "Binnenkort beschikbaar" section. Content preserved
   in DB for future reactivation (newsletter/gids section). */
body.home .et-l--post #contact-form.et_pb_section {
	display: none !important;
}

body.home .et-l--post .quote-text {
	color: #ffffff !important;
	display: block;
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: clamp(1.5rem, 1.2rem + 1vw, 2.2rem) !important;
	font-style: italic;
	line-height: 1.4;
	margin-left: auto;
	margin-right: auto;
	max-width: 600px;
	text-align: center !important;
}

/* These two layouts are genuinely unique: they are the only homepage sections
   that mix left-aligned copy with a separate image column. */
body.home .et-l--post #waarom-nu .et_pb_row,
body.home .et-l--post #over-iris .et_pb_row {
	align-items: center;
}

body.home .et-l--post #waarom-nu .et_pb_heading .et_pb_module_header {
	color: #ffffff !important;
	font-size: clamp(1.4rem, 1.2rem + 1vw, 2.2rem) !important;
	font-weight: 700 !important;
	text-align: left !important;
}

body.home .et-l--post #waarom-nu .et_pb_text .et_pb_text_inner p {
	color: var(--primary-350) !important;
	font-size: var(--text-m) !important;
	line-height: 1.6;
	text-align: left !important;
}

body.home .et-l--post #waarom-nu .et_pb_column:last-child .et_pb_image_wrap {
	border-radius: 12px;
	display: block;
	height: 280px;
	overflow: hidden;
}

body.home .et-l--post #waarom-nu .et_pb_column:last-child .et_pb_image_wrap img,
body.home .et-l--post #over-iris .et_pb_column:first-child .et_pb_image_wrap img {
	display: block;
	height: 100% !important;
	object-fit: cover !important;
	width: 100% !important;
}

body.home .et-l--post #over-iris .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: clamp(1.875rem, 1.6rem + 0.7vw, 2.25rem) !important;
	font-weight: 700 !important;
	text-align: left !important;
}

body.home .et-l--post #over-iris .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	font-size: 16px !important;
	line-height: 1.6;
	margin-bottom: 12px;
	text-align: left !important;
}

body.home .et-l--post #over-iris .et_pb_column:first-child .et_pb_image_wrap {
	border-radius: var(--radius-md);
	display: block;
	height: 320px;
	overflow: hidden;
}

/* The Divi homepage uses .et-l--post, not .et-l--body. These section
   min-heights preserve the original vertical rhythm that disappeared when the
   helper classes from the Astro build were collapsed away. */
body.home .et-l--post #herkenbaar.et_pb_section,
body.home .et-l--post #aanpak.et_pb_section,
body.home .et-l--post #uitdagingen.et_pb_section,
body.home .et-l--post #coaching-aanbod.et_pb_section,
body.home .et-l--post #werkwijze.et_pb_section,
body.home .et-l--post #ervaringen.et_pb_section {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 90vh !important;
}

body.home .et-l--post #waarom-nu.et_pb_section,
body.home .et-l--post #over-iris.et_pb_section {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 70vh !important;
}
/* #contact-form removed from this group — hidden via F1 (display: none above) */

body.home .et-l--post #quote.et_pb_section,
body.home .et-l--post #contact.et_pb_section {
	display: flex !important;
	flex-direction: column !important;
	justify-content: center !important;
	min-height: 50vh !important;
}

/* Header rules stay isolated on Theme Builder selectors. These are copied
   from the working fixes so the homepage rewrite cannot break them. */
.et-l--header {
	position: sticky !important;
	top: 0 !important;
	z-index: 1000 !important;
}

/* Logo was flush to section edges (0 padding). 10px gives breathing room
   without inflating the nav beyond ~96px total. */
.et-l--header .et_pb_section {
	padding-top: 10px !important;
	padding-bottom: 10px !important;
}

.et-l--header .et_pb_menu__logo,
.et-l--header .et_pb_menu__logo-wrap {
	min-width: 170px !important;
	width: 170px !important;
}

.et-l--header .et_pb_menu__logo-wrap {
	flex-shrink: 0 !important;
}

.et-l--header .et_pb_menu__logo img {
	height: auto !important;
	width: 100% !important;
}

.et-l--header .et_pb_column {
	align-items: center !important;
	justify-content: space-between !important;
}

.et-l--header .et_pb_menu {
	flex: 1 !important;
}

.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;
	border: none !important;
	border-radius: 8px !important;
	color: #ffffff !important;
	font-family: var(--font-heading), Outfit, sans-serif !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.5 !important;
	padding: 10px 20px !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;
}

.et-l--header .et_pb_button::after {
	display: none !important;
}

.et-l--header .et_pb_menu__wrap {
	justify-content: flex-end !important;
}

.et-l--header .et_pb_menu__menu {
	flex-basis: 0% !important;
	flex-grow: 1 !important;
	flex-shrink: 1 !important;
	justify-content: flex-end !important;
}

.et-l--header .et_pb_menu .et-menu-nav {
	margin-left: auto !important;
}

.et-l--header .et_pb_menu__menu > nav > ul {
	justify-content: flex-end !important;
}

/* Footer rules stay isolated on Theme Builder selectors for the same reason:
   body cleanup should not mutate footer colors, menu behavior, or grid widths. */
footer.et-l--footer .et_pb_section_0_tb_footer {
	background-color: #1a1a1a !important;
	padding-bottom: 24px !important;
	padding-top: 48px !important;
}

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;
}

footer.et-l--footer h4,
footer.et-l--footer .et_pb_module_header {
	color: #ffffff !important;
}

footer.et-l--footer a {
	color: #999999 !important;
	text-decoration: none;
	transition: color 200ms ease;
}

footer.et-l--footer a:hover {
	color: #cccccc !important;
}

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: transparent !important;
	background-color: transparent !important;
}

footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu {
	align-items: flex-start !important;
	border-bottom: none !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
}

footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu > li {
	display: block !important;
	margin-right: 0 !important;
	width: 100% !important;
}

footer.et-l--footer .et_pb_group_0_tb_footer {
	align-items: center !important;
	border-top: 1px solid #333333 !important;
	column-gap: 0.5rem !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	padding-top: 24px !important;
}

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 {
	color: #999999 !important;
	font-size: 0.75rem !important;
}

footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:first-child {
	flex-basis: 40% !important;
	max-width: 40% !important;
	width: 40% !important;
}

footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(2),
footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(3),
footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(4) {
	flex-basis: 20% !important;
	max-width: 20% !important;
	width: 20% !important;
}

footer.et-l--footer .et_pb_menu .et_mobile_nav_menu,
footer.et-l--footer .et_pb_menu .et_mobile_menu {
	display: none !important;
}

footer.et-l--footer .et_pb_menu .et_pb_menu__wrap {
	display: flex !important;
	justify-content: flex-start !important;
}

footer.et-l--footer .et_pb_menu .et_pb_menu__menu {
	display: block !important;
}

footer.et-l--footer .et_pb_menu .et-menu-nav {
	display: flex !important;
}

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-menu-nav ul.et-menu > li,
footer.et-l--footer .et_pb_menu .et-menu-nav ul.et-menu > li a {
	text-align: left !important;
}

@media (max-width: 980px) {
	body.home .et-l--post #hero.et_pb_section {
		background-image: url('/wp-content/uploads/ilv/iris-hero-mobile.jpg') !important;
		background-position: center 30% !important;
		padding: 40px 5% 48px !important;
		justify-content: flex-end !important;
	}

	body.home .et-l--post .hero-card {
		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;
		margin-right: auto !important;
		min-width: 0 !important;
		padding: 24px !important;
		width: calc(100% - 8vw) !important;
	}

	/* Reduce logo-to-heading gap on mobile (60px desktop → 24px). The compact
	   glass card doesn't need the same breathing room as the desktop layout. */
	body.home .et-l--post #hero .et_pb_image {
		margin-bottom: 24px !important;
	}

	/* Center the hero logo within the glass card on mobile (Astro: margin auto).
	   The image is display:inline inside a block wrap — text-align centers it. */
	body.home .et-l--post #hero .et_pb_image_wrap {
		text-align: center;
	}

	body.home .et-l--post #hero .et_pb_image_wrap img {
		max-width: 240px !important;
		width: 50vw !important;
	}

	body.home .et-l--post #hero .btn-row,
	body.home .et-l--post .et_pb_section.bg-primary .btn-row,
	body.home .et-l--post .et_pb_section.section-charcoal .btn-row {
		align-items: center !important;
		flex-direction: column !important;
		justify-content: center !important;
	}

	.et-l--header .et_pb_button_module_wrapper {
		display: none !important;
	}

	.et-l--header .et_pb_section {
		padding-bottom: 12px !important;
	}

	footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:first-child,
	footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(2),
	footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(3),
	footer.et-l--footer .et_pb_row_1_tb_footer > .et_pb_column:nth-child(4) {
		flex-basis: 47% !important;
		max-width: 47% !important;
		width: 47% !important;
	}
}

@media (max-width: 767px) {
	/* Global row-gap reset (0 !important) must be overridden at mobile so stacked
	   cards have breathing room. Without !important this rule loses to the global. */
	body.home .et-l--post .et_pb_section > .et_pb_row {
		flex-wrap: wrap;
		row-gap: 24px !important;
	}

	/* Divi's generated phone column classes keep 50/33/25% widths unless the
	   exact phone helpers are overridden on the real page wrapper. */
	body.home .et-l--post .et_pb_section > .et_pb_row > .et_flex_column_12_24_phone,
	body.home .et-l--post .et_pb_section > .et_pb_row > .et_flex_column_8_24_phone,
	body.home .et-l--post .et_pb_section > .et_pb_row > .et_flex_column_6_24_phone {
		flex-basis: 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.home .et-l--post .partnerships-section > .et_pb_row:last-child {
		flex-wrap: wrap !important;
		row-gap: 24px !important;
	}
	body.home .et-l--post .partnerships-section > .et_pb_row:last-child > .et_pb_column {
		flex-basis: 100% !important;
		max-width: 100% !important;
		width: 100% !important;
	}

	body.home .et-l--post #hero .et_pb_image_wrap img {
		max-width: 260px !important;
		width: 55vw !important;
	}

	body.home .et-l--post .hero-card .et_pb_heading h1,
	body.home .et-l--post .hero-subtitle .et_pb_text_inner p {
		text-align: center !important;
	}

	body.home .et-l--post .quote-text {
		font-size: var(--text-m) !important;
		line-height: 1.5;
		padding: 0 8px;
	}

	.et-l--header .et_pb_section {
		padding-bottom: 16px !important;
	}
}