/* ILV Coaching & Advies — reusable Divi-aware body components.
   Scoped to .et-l--post so homepage component rules cannot bleed into the
   Theme Builder header/footer. */

/* Divi injects ETModules arrow icons (::after content:"5") and hover padding
   shifts into ALL buttons. Suppress globally on body content so no button —
   whether .btn-classed or VB-added — shows the arrow glyph. */
.et-l--post .et_pb_button::after,
.et-l--post .et_pb_button::before,
.et-l--post .et_pb_contact_submit::after,
.et-l--post .et_pb_contact_submit::before {
	content: none !important;
	display: none !important;
}

.et-l--post .btn.et_pb_button,
.et-l--post .et_pb_contact_submit {
	align-items: center;
	border: 2px solid transparent !important;
	border-radius: var(--radius-md) !important;
	cursor: pointer;
	display: inline-flex;
	font-family: var(--font-heading), Outfit, sans-serif !important;
	font-size: 15px !important;
	font-weight: 600 !important;
	justify-content: center;
	line-height: 1.5 !important;
	padding: 14px 32px !important;
	text-decoration: none;
	transition: background-color 0.2s ease-out, border-color 0.2s ease-out, color 0.2s ease-out;
}

.et-l--post .btn.et_pb_button:hover {
	letter-spacing: inherit !important;
}

.et-l--post .btn-primary.et_pb_button,
.et-l--post .section-charcoal .et_pb_contact_submit {
	background: var(--primary-550) !important;
	color: var(--white) !important;
}

.et-l--post .btn-primary.et_pb_button:hover,
.et-l--post .section-charcoal .et_pb_contact_submit:hover {
	background: var(--primary-500) !important;
	color: var(--white) !important;
}

.et-l--post .btn-outline.et_pb_button {
	background: transparent !important;
	border-color: var(--primary-550) !important;
	color: var(--primary-600) !important;
}

.et-l--post .btn-outline.et_pb_button:hover {
	background: var(--primary-300) !important;
	border-color: var(--primary-500) !important;
	color: var(--primary-700) !important;
}

.et-l--post .bg-primary .btn-primary.et_pb_button {
	background: #ffffff !important;
	border-color: #ffffff !important;
	color: #1F9189 !important;
}

.et-l--post .bg-primary .btn-primary.et_pb_button:hover {
	background: var(--primary-400) !important;
	border-color: var(--primary-400) !important;
	color: #ffffff !important;
}

.et-l--post .bg-primary .btn-outline.et_pb_button {
	background: transparent !important;
	border-color: #ffffff !important;
	color: #ffffff !important;
}

.et-l--post .bg-primary .btn-outline.et_pb_button:hover {
	background: var(--primary-400) !important;
	border-color: var(--primary-400) !important;
	color: #ffffff !important;
}

.et-l--post .btn-row {
	display: flex;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	gap: 12px !important;
}

.et-l--post .bg-primary .btn-row,
.et-l--post .section-charcoal .btn-row {
	justify-content: center;
}

.et-l--post .btn-full.et_pb_button {
	width: 100%;
}

/* ─── Contact form submit on teal (bg-primary) sections ─── */
/* Inverts to white bg + teal text, matching btn-primary-on-bg-primary pattern.
   Charcoal context already covered above (.section-charcoal .et_pb_contact_submit). */
.et-l--post .bg-primary .et_pb_contact_submit {
	background: #ffffff !important;
	color: #1F9189 !important;
}
.et-l--post .bg-primary .et_pb_contact_submit:hover {
	background: var(--primary-400) !important;
	color: #ffffff !important;
}

/* ─── Contact form input fields on dark/teal backgrounds ─── */
/* Divi contact form renders input[type="text"], input[type="email"], textarea
   inside .et_pb_contact_form. On dark backgrounds, fields need semi-transparent
   styling with white text for readability. */
.et-l--post .section-charcoal .et_pb_contact_field input,
.et-l--post .section-charcoal .et_pb_contact_field textarea,
.et-l--post .bg-primary .et_pb_contact_field input,
.et-l--post .bg-primary .et_pb_contact_field textarea {
	background: rgba(255, 255, 255, 0.1) !important;
	border: 1px solid rgba(255, 255, 255, 0.4) !important;
	border-radius: var(--radius-md) !important;
	color: #ffffff !important;
	font-family: var(--font-body) !important;
	font-size: 15px !important;
	padding: 12px 16px !important;
}
.et-l--post .section-charcoal .et_pb_contact_field input::placeholder,
.et-l--post .section-charcoal .et_pb_contact_field textarea::placeholder,
.et-l--post .bg-primary .et_pb_contact_field input::placeholder,
.et-l--post .bg-primary .et_pb_contact_field textarea::placeholder {
	color: rgba(255, 255, 255, 0.5) !important;
}

/* Divi sets gap on all card-level groups — override globally.
   Astro uses no gap on cards; spacing comes from child padding/margin.
   Exclude .btn-row which needs its own 12px gap for button spacing. */
.et-l--post .et_pb_group:not(.btn-row) {
	gap: 0 !important;
}

.et-l--post .et_pb_group.glass-card {
	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);
}

.et-l--post .pain-item {
	padding: 48px 40px 32px !important;
	position: relative;
}

.et-l--post .pain-item::before {
	color: var(--accent-550);
	content: '\201C';
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 4.5rem;
	font-style: italic;
	font-weight: 700;
	left: 12px;
	line-height: 1;
	position: absolute;
	top: 8px;
}

.et-l--post .pain-item .pain-header {
	color: var(--neutral-800);
	display: block;
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 18px;
	font-style: italic;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 16px;
	padding-bottom: 12px;
	position: relative;
}

.et-l--post .pain-item .pain-header::after {
	bottom: -40px;
	color: var(--accent-550);
	content: '\201D';
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 4.5rem;
	font-style: italic;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	right: 12px;
}

.et-l--post .pain-item .et_pb_text:last-child .et_pb_text_inner p {
	color: var(--neutral-700) !important;
	font-size: var(--text-s) !important;
	line-height: 1.5;
	text-align: left !important;
}

.et-l--post .feature-card {
	background: var(--white);
	border-radius: var(--radius-md);
	box-shadow: var(--shadow-md);
	color: var(--neutral-900);
	overflow: hidden;
}

.et-l--post .feature-card .et_pb_image_wrap {
	aspect-ratio: 4 / 3;
	background: linear-gradient(135deg, var(--primary-500), var(--primary-450));
	display: block;
	overflow: hidden;
}

.et-l--post .feature-card .et_pb_image_wrap img {
	display: block;
	height: 100%;
	object-fit: cover;
	width: 100%;
}

.et-l--post .feature-card .et_pb_heading {
	padding: 20px 20px 0 !important;
}

.et-l--post .feature-card .et_pb_text {
	padding: 0 20px 20px !important;
}

.et-l--post .feature-card .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.et-l--post .feature-card .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-700) !important;
	font-size: var(--text-s) !important;
	line-height: 1.5;
	text-align: left !important;
}

.et-l--post .challenge-card {
	padding: 24px !important;
}

.et-l--post .challenge-card .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.et-l--post .challenge-card .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-700) !important;
	font-size: var(--text-s) !important;
	line-height: 1.5;
	text-align: left !important;
}

/* Divi sets gap:16px 30px on cards — override so padding on children controls spacing. */
.et-l--post .pricing-card {
	background: var(--white);
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow-md);
	color: var(--neutral-900);
	display: flex;
	flex-direction: column;
	gap: 0 !important;
	overflow: hidden;
	text-align: center;
}

.et-l--post .pricing-card.featured {
	border: 2px solid var(--primary-500);
}

/* Divi adds gap:30px and padding-bottom:10px to headings — zero both
   so the title text is vertically centered in the teal header bar. */
.et-l--post .pricing-card .et_pb_heading {
	align-items: center !important;
	background: var(--primary-500);
	gap: 0 !important;
	margin-bottom: 0 !important;
	padding: 16px !important;
}

.et-l--post .pricing-card .et_pb_heading .et_pb_module_header {
	color: #ffffff !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	padding-bottom: 0 !important;
	text-align: center !important;
}

.et-l--post .pricing-card.featured .et_pb_heading {
	background: var(--primary-550);
}



/* Astro: .pricing-body { padding: 32px 24px } — 32px top for breathing room. */
.et-l--post .pricing-card .et_pb_text {
	padding: 32px 24px 0 !important;
	text-align: center !important;
}

/* Inner paragraphs also need centering (Divi writes text-align on p directly) */
.et-l--post .pricing-card .et_pb_text .et_pb_text_inner p {
	text-align: center !important;
}

/* Divi adds padding-bottom equal to font-size on price paragraphs — kill it. */
.et-l--post .pricing-card .pricing-price {
	color: var(--neutral-900);
	display: block;
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1.2;
	margin-bottom: 4px !important;
	padding-bottom: 0 !important;
}

/* Astro: .pricing-period { margin-bottom: 20px } — space before feature list. */
.et-l--post .pricing-card .pricing-period {
	color: var(--neutral-500);
	display: block;
	font-size: var(--text-xs);
	margin-bottom: 20px;
}

/* Astro: .pricing-features { margin-bottom: auto } — keeps list close to price,
   pushes remaining space below (button auto-sticks to bottom via wrapper). */
.et-l--post .pricing-card .et_pb_icon_list {
	margin-top: 0 !important;
	padding: 0 24px 24px !important;
}

/* Divi default is align-items:center — override to flex-start so tick marks
   align with first line of text on multi-line items (Astro uses list + ::before). */
.et-l--post .pricing-card .et_pb_icon_list_item {
	align-items: flex-start !important;
	border-bottom: 1px solid var(--neutral-100);
	padding: 6px 0 6px 20px;
	position: relative;
}

.et-l--post .pricing-card .et-pb-icon {
	display: none !important;
}

/* Tick aligns with first line of text. The list item has 6px padding-top,
   so top:6px matches the text baseline start. */
.et-l--post .pricing-card .et_pb_icon_list_text::before {
	color: var(--primary-500);
	content: '\2713';
	font-weight: 600;
	left: 0;
	position: absolute;
	top: 6px;
}

.et-l--post .pricing-card .et_pb_icon_list_text {
	color: var(--neutral-700) !important;
	font-size: var(--text-s) !important;
	line-height: 1.4 !important;
	text-align: left !important;
}

.et-l--post .pricing-card .et_pb_button_module_wrapper {
	margin-top: auto !important;
	padding: 0 24px 32px !important;
	width: 100%;
}

.et-l--post .step-card {
	padding: 24px !important;
	text-align: center;
}

.et-l--post .step-card .et_pb_heading:first-child .et_pb_module_header {
	color: var(--accent-550) !important;
	font-size: 70px !important;
	font-weight: 700 !important;
	line-height: 1;
	text-align: center !important;
}

.et-l--post .step-card .et_pb_heading + .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: center !important;
}

.et-l--post .step-card .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	font-size: var(--text-s) !important;
	line-height: 1.5;
	text-align: center !important;
}

.et-l--post .testimonial-card {
	display: flex;
	flex-direction: column;
	padding: 48px 40px 32px !important;
	position: relative;
}

.et-l--post .testimonial-card::before {
	color: var(--accent-550);
	content: '\201C';
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 4.5rem;
	font-style: italic;
	font-weight: 700;
	left: 12px;
	line-height: 1;
	position: absolute;
	top: 8px;
}

.et-l--post .testimonial-card .testimonial-quote {
	color: var(--neutral-700) !important;
	display: block;
	flex: 1;
	font-size: var(--text-s) !important;
	font-style: italic;
	font-weight: 400;
	line-height: 1.5;
}

.et-l--post .testimonial-card .testimonial-quote::after {
	color: var(--accent-550);
	content: '\201D';
	display: block;
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 4.5rem;
	font-weight: 700;
	line-height: 0.6;
	margin-top: 12px;
	text-align: right;
}

.et-l--post .testimonial-card .testimonial-author {
	color: var(--neutral-900) !important;
	display: block;
	font-family: var(--font-heading), Outfit, sans-serif;
	font-size: 14px !important;
	font-weight: 700;
	text-align: right !important;
}

.et-l--post .faq-item {
	background: transparent !important;
	border-bottom: 1px solid var(--neutral-200);
	border-radius: 0 !important;  /* Divi: groups may have default border-radius */
	box-shadow: none !important;
	margin-inline: auto;
	max-width: 700px;
	padding: 16px 0 !important;
	width: 100%;
}

.et-l--post .faq-item .et_pb_heading .et_pb_module_header {
	color: var(--neutral-900) !important;
	font-size: 16px !important;
	font-weight: 600 !important;
	text-align: left !important;
}

.et-l--post .faq-item .et_pb_text .et_pb_text_inner p {
	color: var(--neutral-600) !important;
	font-size: var(--text-s) !important;
	line-height: 1.6;
	margin-top: 8px;
	text-align: left !important;
}

@media (max-width: 767px) {
	.et-l--post .pain-item,
	.et-l--post .testimonial-card {
		padding: 36px 20px 24px !important;
	}

	.et-l--post .pain-item::before,
	.et-l--post .pain-item .pain-header::after,
	.et-l--post .testimonial-card::before,
	.et-l--post .testimonial-card .testimonial-quote::after {
		font-size: 3rem !important;
	}

	.et-l--post .testimonial-card::before {
		left: 6px !important;
		top: 4px !important;
	}
}