/* =========================================================================
 * Hello Jolien — Design system
 *
 * Token-driven (CSS custom properties). The 6 brand placeholders are defined
 * here so non-Elementor pages (Gutenberg) inherit them too. Phase-6 brand
 * swap = edit these 6 lines + Elementor Globals; everything cascades.
 * ========================================================================= */

:root {
	/* Jolien brand — warm pastel rose (per brief: roze, niet too girly, professioneel) */
	--jolien-primary:   #7A4858;  /* deep dusty rose-mauve — anchor for headings + primary buttons */
	--jolien-secondary: #F2DDD3;  /* pastel peach-cream — sand sections */
	--jolien-accent:    #D88A85;  /* warm dusty coral — CTAs + highlights */
	--jolien-ink:       #2D1F26;  /* warm deep ink with plum undertone */
	--jolien-surface:   #FFFFFF;
	--jolien-muted:     #FAEDE7;  /* pale blush — soft section background */

	/* Derived tints / shades */
	--jolien-primary-dark:   #5C3242;
	--jolien-primary-tint:   #E8CDD3;
	--jolien-accent-dark:    #B66964;
	--jolien-accent-tint:    #F4D2CF;
	--jolien-ink-soft:       #4A3540;
	--jolien-ink-mute:       #7B6873;
	--jolien-border:         #EBD6CE;

	/* Type stack — Nunito for UI (rounded, warm), Lora for display headings (warm calligraphic serif) */
	--jolien-font-sans:    "Nunito", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--jolien-font-display: "Lora", Georgia, "Times New Roman", serif;

	/* Type scale (1.250 perfect fourth, fluid via clamp) */
	--jolien-fs-xs:   clamp(0.78rem, 0.76rem + 0.1vw, 0.85rem);
	--jolien-fs-sm:   clamp(0.88rem, 0.85rem + 0.15vw, 0.95rem);
	--jolien-fs-base: clamp(1rem, 0.97rem + 0.2vw, 1.0625rem);
	--jolien-fs-md:   clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
	--jolien-fs-lg:   clamp(1.4rem, 1.25rem + 0.7vw, 1.65rem);
	--jolien-fs-xl:   clamp(1.85rem, 1.55rem + 1.4vw, 2.4rem);
	--jolien-fs-2xl:  clamp(2.4rem, 1.9rem + 2.4vw, 3.4rem);
	--jolien-fs-3xl:  clamp(3rem, 2.3rem + 3.4vw, 4.6rem);

	/* Spacing scale */
	--jolien-space-1:  0.25rem;
	--jolien-space-2:  0.5rem;
	--jolien-space-3:  0.75rem;
	--jolien-space-4:  1rem;
	--jolien-space-5:  1.5rem;
	--jolien-space-6:  2rem;
	--jolien-space-8:  3rem;
	--jolien-space-10: 4rem;
	--jolien-space-12: 6rem;
	--jolien-space-16: 8rem;

	/* Radii + shadows */
	--jolien-radius-sm:  6px;
	--jolien-radius-md:  12px;
	--jolien-radius-lg:  20px;
	--jolien-radius-pill: 999px;
	--jolien-shadow-sm: 0 1px 2px rgba(26,26,26,0.04), 0 1px 3px rgba(26,26,26,0.06);
	--jolien-shadow-md: 0 4px 12px rgba(26,26,26,0.06), 0 2px 6px rgba(26,26,26,0.04);
	--jolien-shadow-lg: 0 12px 32px rgba(26,26,26,0.10), 0 6px 16px rgba(26,26,26,0.06);

	/* Transitions */
	--jolien-easing: cubic-bezier(0.22, 1, 0.36, 1);
	--jolien-dur:    220ms;
}

/* =========================================================================
 * Softening — organic shapes to break up the rectangular rhythm.
 * This whole block is one self-contained experiment. To revert:
 *   git revert HEAD            (if it's still the latest commit)
 *   or remove this block + commit.
 * ========================================================================= */

/* Soft curve transitions between sections — applied to every WordPress page
 * (body.page includes the home + all marketing pages). Each top-level
 * Elementor section gets a subtle bottom curve. The next section is pulled
 * up via negative margin, and z-index is stacked so each section overlays
 * the section after it — meaning the curve-clipped corners reveal the
 * *next section's* bg rather than the body bg. Each section keeps its own
 * colour; nothing blends. */
body.page .elementor[data-elementor-type="wp-page"] > .e-con {
	position: relative;
}
body.page .elementor[data-elementor-type="wp-page"] > .e-con:not(:last-of-type) {
	border-bottom-left-radius:  50% 16px;
	border-bottom-right-radius: 50% 16px;
}
body.page .elementor[data-elementor-type="wp-page"] > .e-con + .e-con {
	margin-top: -16px;
}
/* Stack ladder — first section highest, each subsequent one lower so the
 * next section's bg fills the curve clip of the section above. Enumerated
 * up to 12 to cover every page (Over and Visie each have 6 sections).
 *
 * IMPORTANT: scope to the wp-page Elementor wrapper only. The header and
 * footer are also rendered inside `.elementor > .e-con` (Theme Builder
 * templates), and without this scope the header would inherit z-index: 12
 * and lose the stacking fight against page content. */
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(1)  { z-index: 12; }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(2)  { z-index: 11; }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(3)  { z-index: 10; }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(4)  { z-index: 9;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(5)  { z-index: 8;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(6)  { z-index: 7;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(7)  { z-index: 6;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(8)  { z-index: 5;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(9)  { z-index: 4;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(10) { z-index: 3;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(11) { z-index: 2;  }
body.page .elementor[data-elementor-type="wp-page"] > .e-con:nth-of-type(12) { z-index: 1;  }

/* Hero gets the curve regardless of page (carries on Aanbod / Tarieven too). */
.jolien-hero {
	border-bottom-left-radius:  50% 16px;
	border-bottom-right-radius: 50% 16px;
}

/* The default placeholder photo tile (Home → about-preview) becomes a soft
 * organic shape rather than a perfect rounded square. Doesn't affect
 * portrait/sport/pijler variants which keep their own shapes. */
.elementor-element.jolien-photo-tile:not(.jolien-photo-portrait):not(.jolien-photo-sport):not(.jolien-photo-pijler):not(.jolien-photo-real) {
	aspect-ratio: 1 / 1;
	border-radius: 62% 38% 58% 42% / 48% 56% 44% 52%;
	transition: border-radius 1.4s var(--jolien-easing);
}
/* Animate the blob shape on hover so it feels alive. */
.elementor-element.jolien-photo-tile:not(.jolien-photo-portrait):not(.jolien-photo-sport):not(.jolien-photo-pijler):not(.jolien-photo-real):hover {
	border-radius: 42% 58% 38% 62% / 56% 44% 56% 44%;
}

/* All cards: more pronounced rounding. */
.jolien-card.elementor-element {
	border-radius: 20px;
}

/* Soft floating blob accents in muted / sand / primary sections.
 *
 * `overflow: clip` (not `hidden`!) so descendants with `position: sticky`
 * still work — `overflow: hidden` on an ancestor clips sticky inside it
 * even when there's sliding room. `clip` gives us the visual blob mask
 * without creating that sticky-killing containing block. */
.jolien-section-muted,
.jolien-section-sand {
	position: relative;
	overflow: clip;
	z-index: 0;
}
.jolien-section-muted::before {
	content: "";
	position: absolute;
	width: 32vw;
	height: 32vw;
	top: -10vw;
	right: -8vw;
	background: radial-gradient(circle at center, var(--jolien-accent-tint) 0%, transparent 65%);
	opacity: 0.55;
	pointer-events: none;
	z-index: -1;
}
.jolien-section-sand::after {
	content: "";
	position: absolute;
	width: 38vw;
	height: 38vw;
	bottom: -15vw;
	left: -12vw;
	background: radial-gradient(circle at center, var(--jolien-primary-tint) 0%, transparent 70%);
	opacity: 0.6;
	pointer-events: none;
	z-index: -1;
}

/* CTA band gets a soft offset glow behind it too. */
.jolien-cta-band {
	position: relative;
	overflow: hidden;
	z-index: 0;
}
.jolien-cta-band::before {
	content: "";
	position: absolute;
	width: 50vw;
	height: 50vw;
	top: -25vw;
	left: -10vw;
	background: radial-gradient(circle at center, rgba(255,255,255,0.18) 0%, transparent 60%);
	pointer-events: none;
	z-index: -1;
}

/* --- subtle ambient animations ------------------------------------------- */

@keyframes jolien-drift-1 {
	0%, 100% { transform: translate(0, 0)    scale(1);    }
	50%      { transform: translate(2%, -2%) scale(1.06); }
}
@keyframes jolien-drift-2 {
	0%, 100% { transform: translate(0, 0)     scale(1);    }
	50%      { transform: translate(-3%, 2%)  scale(1.05); }
}
@keyframes jolien-pulse-glow {
	0%, 100% { opacity: 0.42; }
	50%      { opacity: 0.62; }
}
@keyframes jolien-bob {
	0%, 100% { transform: translate(-50%, 0);    opacity: 0.7; }
	50%      { transform: translate(-50%, 6px);  opacity: 1;   }
}

@media (prefers-reduced-motion: no-preference) {
	.jolien-section-muted::before { animation: jolien-drift-1 14s ease-in-out infinite; }
	.jolien-section-sand::after   { animation: jolien-drift-2 18s ease-in-out infinite; }
	.jolien-cta-band::before      { animation: jolien-pulse-glow 9s ease-in-out infinite; }

	/* The hero's coral glow lives in the bg-image, so we animate it via a
	 * pseudo-element overlay tuned to match the original radial-gradient. */
	.jolien-hero {
		position: relative;
		overflow: hidden;
		isolation: isolate;
	}
	.jolien-hero > * { position: relative; z-index: 1; }
	.jolien-hero::after {
		content: "";
		position: absolute;
		inset: 0;
		background: radial-gradient(ellipse 70% 80% at 88% 65%, rgba(216, 138, 133, 0.55) 0%, transparent 70%);
		pointer-events: none;
		z-index: 0;
		animation: jolien-pulse-glow 10s ease-in-out infinite;
	}
	/* The hero's own background gradient still draws, so let it carry only
	 * the base mauve; the animated overlay paints the glow. */
	.jolien-hero {
		background: var(--jolien-primary) !important;
	}
}

/* Real clickable scroll cue at the bottom of the hero (replaces the old
 * ::before pseudo, which couldn't receive clicks). Smooth-scroll is handled
 * by `scroll-behavior: smooth` on <html> + the JS hash handler in jolien.js.
 *
 * The cue widget's Elementor wrapper would otherwise be the offsetParent
 * (an empty 0-height row inside the hero flex column), so position:absolute
 * on the cue would resolve to the wrapper, not the hero — leaving the cue
 * mid-section. Override the wrapper to position:static so the cue's
 * absolute positioning escapes up to the hero. */
/* The hero uses content_width: boxed, which gives it an `.e-con-inner` flex
 * child that Elementor sets to position:relative. That becomes the
 * offsetParent for the absolutely-positioned cue, pinning it to the inner
 * box's bottom instead of the hero's. Override both the inner box and the
 * cue-widget wrapper to position:static so the cue resolves to .jolien-hero. */
.jolien-hero > .e-con-inner,
.jolien-hero .jolien-hero-cue-wrap,
.jolien-hero .jolien-hero-cue-wrap .elementor-widget-container {
	position: static !important;
}
.jolien-hero-scroll-cue {
	position: absolute;
	left: 50%;
	bottom: 12px;
	transform: translateX(-50%);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;       /* ≥40×40 touch target */
	border-radius: 50%;
	color: #fff;
	opacity: 0.7;
	text-decoration: none;
	background: transparent;
	transition: opacity var(--jolien-dur) var(--jolien-easing),
	            background var(--jolien-dur) var(--jolien-easing);
	z-index: 2;
}
.jolien-hero-scroll-cue svg {
	width: 22px;
	height: 22px;
	display: block;
}
.jolien-hero-scroll-cue:hover,
.jolien-hero-scroll-cue:focus-visible {
	opacity: 1;
	color: #fff;
	background: rgba(255,255,255,0.10);
}
.jolien-hero-scroll-cue:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 3px;
}
@media (prefers-reduced-motion: no-preference) {
	.jolien-hero-scroll-cue { animation: jolien-bob 2.6s ease-in-out infinite; }
}

/* =========================================================================
 * Motion — smooth-scroll for in-page anchor links + scroll-triggered reveals.
 * All wrapped in prefers-reduced-motion so we don't ambush vestibular users.
 * ========================================================================= */

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

/* Progressive enhancement gate — only hide reveal targets once JS has marked
 * the document ready. Without JS (or before it runs) content is fully visible:
 * no permanently-hidden text.
 *
 * Tuned subtle (was 28 px / 0.7 s / scale + slide-side variants — felt busy
 * on Visie). Now a small fade + 10 px lift, 350 ms. No directional slide-side
 * variants, no number scale. Same animation everywhere keeps it calm. */
html.jolien-js .jolien-reveal {
	opacity: 0;
	transform: translateY(10px);
	transition:
		opacity   0.35s var(--jolien-easing) var(--jolien-reveal-delay, 0ms),
		transform 0.35s var(--jolien-easing) var(--jolien-reveal-delay, 0ms);
	will-change: opacity, transform;
}
html.jolien-js .jolien-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	html.jolien-js .jolien-reveal,
	html.jolien-js .jolien-reveal.is-visible {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* Slide-in-from-side variants — kept as aliases for back-compat, but now use
 * the same neutral vertical lift as the rest. No more left/right drift. */
html.jolien-js .jolien-reveal.jolien-reveal-left,
html.jolien-js .jolien-reveal.jolien-reveal-right { transform: translateY(10px); }
html.jolien-js .jolien-reveal-left.is-visible,
html.jolien-js .jolien-reveal-right.is-visible    { transform: translateY(0); }

/* Pijler number — same gentle lift as the rest, no scale-in. */
html.jolien-js .jolien-pijler-number.jolien-reveal {
	transform: translateY(10px);
}
html.jolien-js .jolien-pijler-number.jolien-reveal.is-visible {
	transform: translateY(0);
}

/* =========================================================================
 * Base typography
 * ========================================================================= */

body {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-base);
	line-height: 1.65;
	color: var(--jolien-ink);
	background: var(--jolien-surface);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6,
.elementor-heading-title {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--jolien-ink);
	margin-block: 0 var(--jolien-space-4);
}

h1, .elementor-heading-title.elementor-size-xxl,
h1.wp-block-heading { font-size: var(--jolien-fs-2xl); letter-spacing: -0.025em; }
h2, h2.wp-block-heading { font-size: var(--jolien-fs-xl); }
h3, h3.wp-block-heading { font-size: var(--jolien-fs-lg); }
h4, h4.wp-block-heading { font-size: var(--jolien-fs-md); }

p { margin-block: 0 var(--jolien-space-4); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--jolien-primary);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
	transition: color var(--jolien-dur) var(--jolien-easing);
}
a:hover { color: var(--jolien-accent); }

strong { font-weight: 600; color: var(--jolien-ink); }

/* =========================================================================
 * Content container width + section spacing
 * ========================================================================= */

.entry-content,
.page .entry-content,
.elementor-section-wrap > .elementor-section,
.elementor-section-wrap > .elementor-element {
	max-width: 100%;
}

/* Gutenberg page content: nice readable measure */
.entry-content > * {
	max-width: 68ch;
	margin-left: auto;
	margin-right: auto;
}
.entry-content > .wp-block-table,
.entry-content > .wp-block-buttons {
	max-width: 68ch;
}

/* Block content vertical rhythm */
.entry-content > * + * { margin-top: var(--jolien-space-5); }
.entry-content > h2 { margin-top: var(--jolien-space-10); }
.entry-content > h3 { margin-top: var(--jolien-space-6); }

/* Push Gutenberg pages away from the header */
body.page main > article,
body.single-post main > article {
	padding-block: var(--jolien-space-10) var(--jolien-space-12);
}

/* =========================================================================
 * Buttons (Gutenberg + Elementor)
 * ========================================================================= */

.wp-block-button__link,
.wp-element-button {
	font-family: var(--jolien-font-sans);
	font-weight: 600;
	font-size: var(--jolien-fs-sm);
	letter-spacing: 0.01em;
	padding: 0.85em 1.6em;
	border-radius: var(--jolien-radius-pill);
	background: var(--jolien-primary);
	color: #fff;
	text-decoration: none;
	border: 1px solid var(--jolien-primary);
	transition: background var(--jolien-dur) var(--jolien-easing),
	            border-color var(--jolien-dur) var(--jolien-easing),
	            transform var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing);
}
.wp-block-button__link:hover,
.wp-element-button:hover {
	background: var(--jolien-accent);
	border-color: var(--jolien-accent);
	color: #fff;
	transform: translateY(-2px);
	box-shadow: var(--jolien-shadow-md);
}

.wp-block-buttons.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--jolien-primary);
}
.wp-block-buttons.is-style-outline .wp-block-button__link:hover {
	background: var(--jolien-primary);
	color: #fff;
}

/* =========================================================================
 * Tables (Gutenberg)
 * ========================================================================= */

.wp-block-table {
	margin-block: var(--jolien-space-6);
	overflow-x: auto;
}
.wp-block-table table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid var(--jolien-border);
	border-radius: var(--jolien-radius-md);
	overflow: hidden;
	font-size: var(--jolien-fs-sm);
}
.wp-block-table td,
.wp-block-table th {
	padding: var(--jolien-space-3) var(--jolien-space-4);
	border-bottom: 1px solid var(--jolien-border);
	text-align: left;
}
.wp-block-table tr:last-child td { border-bottom: 0; }
.wp-block-table tr:nth-child(odd) td { background: var(--jolien-muted); }
.wp-block-table tr:first-child td { background: var(--jolien-primary); color: #fff; font-weight: 600; }

/* =========================================================================
 * Placeholder note (used by seed-pages)
 * ========================================================================= */

.jolien-placeholder-note {
	border-left: 3px solid var(--jolien-accent);
	padding: var(--jolien-space-3) var(--jolien-space-4);
	background: var(--jolien-accent-tint);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-primary-dark);
	border-radius: var(--jolien-radius-sm);
	margin-block: var(--jolien-space-4);
}

/* =========================================================================
 * Hello Elementor entry-title (legacy belt-and-braces — page filter handles
 * the `page` post type server-side; this catches edge cases).
 * ========================================================================= */

body.page .entry-header .entry-title { display: none; }

/* =========================================================================
 * Site header (Theme Builder template "Header — Jolien")
 * ========================================================================= */

.jolien-site-header {
	border-bottom: 1px solid var(--jolien-border);
	backdrop-filter: saturate(180%) blur(8px);
	-webkit-backdrop-filter: saturate(180%) blur(8px);
	position: sticky !important;
	top: 0;
	/* Sit well above the page stacking ladder (max z-index: 12) so the
	 * sticky header + its absolute-positioned dropdown menu render on top
	 * of every page section. */
	z-index: 1000 !important;
}
.jolien-site-header .elementor-nav-menu a {
	font-family: var(--jolien-font-sans);
	font-weight: 500;
	font-size: var(--jolien-fs-sm);
	letter-spacing: 0.005em;
	text-decoration: none;
	padding-block: var(--jolien-space-3);
}

/* Brand wordmark in the header — text fallback until a real logo
 * lands. Two-line lockup: name in display serif, role in small caps
 * underneath. Whole block is the home link. */
.jolien-brand {
	display: inline-flex;
	flex-direction: column;
	gap: 2px;
	text-decoration: none;
	line-height: 1.05;
	color: var(--jolien-ink);
	transition: color var(--jolien-dur) var(--jolien-easing);
}
.jolien-brand:hover,
.jolien-brand:focus-visible {
	color: var(--jolien-primary);
}
.jolien-brand__name {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.15rem, 1.6vw, 1.4rem);
	letter-spacing: -0.01em;
}
.jolien-brand__role {
	font-family: var(--jolien-font-sans);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jolien-accent-dark);
}
/* Mobile: drop the role line to save horizontal space next to the burger. */
@media (max-width: 480px) {
	.jolien-brand__role { display: none; }
	.jolien-brand__name { font-size: 1.05rem; }
}

/* =========================================================================
 * Site footer — richer brand block, social icons, top curve, decorative blob
 * ========================================================================= */

.jolien-site-footer {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}
/* Curve up into the section above — like .jolien-section-* curves but
 * inverted (rises out of the footer's top edge instead of clipping in). */
.jolien-site-footer::before {
	content: "";
	position: absolute;
	top: -28px;
	left: -2%;
	right: -2%;
	height: 56px;
	background: var(--jolien-secondary);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	z-index: 0;
}
/* Soft decorative glow blob in a corner. */
.jolien-site-footer::after {
	content: "";
	position: absolute;
	width: 38vw;
	height: 38vw;
	bottom: -22vw;
	right: -10vw;
	background: radial-gradient(circle at center, var(--jolien-accent-tint) 0%, transparent 65%);
	opacity: 0.45;
	pointer-events: none;
	z-index: 0;
}
.jolien-site-footer > * { position: relative; z-index: 1; }

.jolien-site-footer h1, .jolien-site-footer h2, .jolien-site-footer h3,
.jolien-site-footer h4, .jolien-site-footer h5, .jolien-site-footer h6,
.jolien-site-footer p {
	color: var(--jolien-primary-dark);
}

/* Footer brand block — big Lora wordmark + tagline + social icons. */
.jolien-footer-brand {
	display: flex;
	flex-direction: column;
	gap: var(--jolien-space-3);
}
.jolien-footer-wordmark {
	font-family: var(--jolien-font-display) !important;
	font-weight: 600 !important;
	font-size: clamp(1.7rem, 2.6vw, 2.2rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.015em !important;
	color: var(--jolien-primary) !important;
	margin: 0 !important;
}
.jolien-footer-tagline {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-primary-dark);
	max-width: 36ch;
	margin: 0;
	opacity: 0.85;
	line-height: 1.55;
}
.jolien-footer-socials {
	display: flex;
	gap: 10px;
	margin-top: var(--jolien-space-2);
}
.jolien-footer-socials a {
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--jolien-primary);
	background: rgba(255,255,255,0.6);
	border-radius: 50%;
	transition: background var(--jolien-dur) var(--jolien-easing),
	            color var(--jolien-dur) var(--jolien-easing),
	            transform var(--jolien-dur) var(--jolien-easing);
	text-decoration: none;
}
.jolien-footer-socials a:hover {
	background: var(--jolien-accent);
	color: #fff;
	transform: translateY(-2px);
}
.jolien-footer-socials svg {
	width: 18px;
	height: 18px;
}

/* Footer menu link hover */
.jolien-site-footer .elementor-nav-menu a {
	transition: color var(--jolien-dur) var(--jolien-easing) !important;
}
.jolien-site-footer .elementor-nav-menu a:hover {
	color: var(--jolien-accent) !important;
}

/* Footer-bottom row: copyright (left) + small inline legal links (right).
 * Replaces the old Juridisch column — legal pages are required to be present
 * but don't deserve a third of the footer width. */
.jolien-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	justify-content: space-between;
	align-items: center;
	font-size: 13px;
	color: var(--jolien-primary-dark);
	opacity: 0.85;
}
.jolien-footer-copy {
	margin: 0;
}
.jolien-footer-legal {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	padding: 0;
	margin: 0;
}
.jolien-footer-legal li + li::before {
	content: "·";
	margin: 0 10px;
	opacity: 0.5;
}
.jolien-footer-legal a {
	color: var(--jolien-primary-dark);
	text-decoration: none;
	transition: color var(--jolien-dur) var(--jolien-easing);
}
.jolien-footer-legal a:hover {
	color: var(--jolien-accent);
}
/* Footer-bottom right-group: lang switcher + legal links sit together,
 * separated by a thin vertical divider. */
.jolien-footer-bottom__right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.jolien-footer-bottom__right .jolien-lang-switcher {
	border-right: 1px solid currentColor;
	padding-right: 16px;
	opacity: 0.9;
}
@media (max-width: 600px) {
	.jolien-footer-bottom { justify-content: flex-start; }
	.jolien-footer-bottom__right .jolien-lang-switcher {
		border-right: 0;
		padding-right: 0;
	}
}

/* =========================================================================
 * Language switcher — small inline list, used in header + footer. Active
 * language is dark + non-clickable styled; others fade-in on hover. The
 * shortcode renders `<ul class="jolien-lang-switcher">` with `.is-active`
 * on the current language's `<li>`.
 * ========================================================================= */

.jolien-lang-switcher {
	list-style: none;
	margin: 0;
	padding: 0;
	display: inline-flex;
	gap: 2px;
	font-family: var(--jolien-font-sans);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
}
.jolien-lang-item a {
	display: inline-block;
	padding: 3px 7px;
	color: inherit;
	text-decoration: none;
	border-radius: var(--jolien-radius-pill);
	transition: background var(--jolien-dur) var(--jolien-easing),
	            color var(--jolien-dur) var(--jolien-easing);
}
.jolien-lang-item a:hover {
	background: rgba(216, 138, 133, 0.15);
	color: var(--jolien-accent-dark);
}
.jolien-lang-item.is-active a {
	background: var(--jolien-muted);
	color: var(--jolien-accent-dark);
}
.jolien-lang-item.is-active a:hover {
	background: var(--jolien-muted);
}

/* Header switcher — sits between nav and CTA. Extra compact so the
 * full inline nav still fits next to it on desktop. Hidden on phone
 * (≤480) since the burger drawer carries it instead. */
.jolien-site-header .jolien-lang-switcher {
	font-size: 10px;
	letter-spacing: 0.02em;
}
.jolien-site-header .jolien-lang-item a {
	padding: 2px 5px;
}
@media (max-width: 480px) {
	.jolien-site-header .elementor-widget-html:has(.jolien-lang-switcher) {
		display: none;
	}
}

/* =========================================================================
 * Header nav — keep the link height stable on hover. Elementor's pointer-
 * underline is replaced with an inset box-shadow so the visual underline
 * lives *inside* the link box and never changes its height.
 * ========================================================================= */

.jolien-site-header .elementor-nav-menu li,
.jolien-site-header .elementor-nav-menu a.elementor-item {
	line-height: 1.1 !important;
}
.jolien-site-header .elementor-nav-menu a.elementor-item {
	padding-block: 14px !important;
	box-shadow: inset 0 -2px 0 transparent;
	transition:
		color var(--jolien-dur) var(--jolien-easing),
		box-shadow var(--jolien-dur) var(--jolien-easing) !important;
}
/* Kill Elementor's pointer pseudo-elements so they can't shift the box. */
.jolien-site-header .elementor-nav-menu a.elementor-item::before,
.jolien-site-header .elementor-nav-menu a.elementor-item::after {
	display: none !important;
	content: none !important;
}
.jolien-site-header .elementor-nav-menu a.elementor-item:hover,
.jolien-site-header .elementor-nav-menu a.elementor-item:focus-visible,
.jolien-site-header .elementor-nav-menu .current-menu-item > a.elementor-item,
.jolien-site-header .elementor-nav-menu .current-page-ancestor > a.elementor-item {
	box-shadow: inset 0 -2px 0 var(--jolien-accent);
	color: var(--jolien-primary) !important;
}

/* Header "Maak een afspraak" CTA button — Elementor's hover_color setting
 * loses the cascade to Elementor's own per-element button color rule. Force
 * the hover text colour with a sufficiently specific selector so the white
 * label stays visible on the accent (coral) hover background. */
.jolien-site-header .elementor-widget-button .elementor-button,
.jolien-site-header .elementor-widget-button .elementor-button:link,
.jolien-site-header .elementor-widget-button .elementor-button:visited {
	color: #fff !important;
}
.jolien-site-header .elementor-widget-button .elementor-button:hover,
.jolien-site-header .elementor-widget-button .elementor-button:focus,
.jolien-site-header .elementor-widget-button .elementor-button:focus-visible,
.jolien-site-header .elementor-widget-button .elementor-button:active {
	color: #fff !important;
	background-color: var(--jolien-accent) !important;
}
.jolien-site-header .elementor-widget-button .elementor-button:hover .elementor-button-text,
.jolien-site-header .elementor-widget-button .elementor-button:focus .elementor-button-text,
.jolien-site-header .elementor-widget-button .elementor-button:focus-visible .elementor-button-text {
	color: #fff !important;
}

/* =========================================================================
 * Reusable section utilities — referenced from Elementor "CSS Classes"
 * ========================================================================= */

/* Hero — full-bleed dark primary with a soft accent glow baked into the bg.
 * No bounding child element: the glow is a radial-gradient layered directly
 * over the primary color, so the "circle" stays a circle and fades out
 * smoothly into the surrounding mauve. */
.jolien-hero {
	background:
		radial-gradient(ellipse 70% 80% at 88% 65%, rgba(216, 138, 133, 0.55) 0%, rgba(216, 138, 133, 0) 70%),
		var(--jolien-primary);
	color: var(--jolien-secondary);
	position: relative;
	overflow: hidden;
}
.jolien-hero .elementor-heading-title {
	color: #fff !important;
	font-size: var(--jolien-fs-3xl) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.03em;
}
.jolien-hero .elementor-widget-text-editor {
	color: var(--jolien-secondary) !important;
	font-size: var(--jolien-fs-md) !important;
	max-width: 56ch;
}
.jolien-hero .elementor-widget-text-editor p {
	color: var(--jolien-secondary);
}

/* Eyebrow label */
.jolien-eyebrow .elementor-heading-title {
	font-family: var(--jolien-font-sans) !important;
	font-size: var(--jolien-fs-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.18em !important;
	text-transform: uppercase !important;
	color: var(--jolien-accent) !important;
}

/* Section: cream / sand alternations */
.jolien-section-muted    { background: var(--jolien-muted); }
.jolien-section-sand     { background: var(--jolien-secondary); }
.jolien-section-primary  { background: var(--jolien-primary); color: var(--jolien-secondary); }
.jolien-section-primary .elementor-heading-title { color: #fff; }
.jolien-section-primary p { color: var(--jolien-secondary); }

/* Service / value card */
.jolien-card.elementor-element {
	background: var(--jolien-surface);
	border: 1px solid var(--jolien-border);
	border-radius: var(--jolien-radius-md);
	padding: var(--jolien-space-6) !important;
	transition: transform var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing),
	            border-color var(--jolien-dur) var(--jolien-easing);
	height: 100%;
}
.jolien-card.elementor-element:hover {
	transform: translateY(-4px);
	box-shadow: var(--jolien-shadow-lg);
	border-color: var(--jolien-primary-tint);
}
.jolien-card .elementor-icon {
	color: var(--jolien-accent) !important;
	margin-bottom: var(--jolien-space-3);
}

/* CTA band — terracotta full-bleed */
.jolien-cta-band {
	background: var(--jolien-accent);
	color: #fff;
	text-align: center;
}
.jolien-cta-band .elementor-heading-title {
	color: #fff !important;
	font-size: var(--jolien-fs-2xl) !important;
	max-width: 22ch;
	margin-inline: auto;
}
.jolien-cta-band p { color: rgba(255,255,255,0.92); }
.jolien-cta-band .elementor-button {
	background: #fff !important;
	color: var(--jolien-accent) !important;
}
.jolien-cta-band .elementor-button:hover {
	background: var(--jolien-ink) !important;
	color: #fff !important;
}

/* Mini value rows — Home "Mijn aanpak" 2-pane layout. Horizontal mini-cards
 * (icon left, title+text right). Denser than the full card-grid, but with
 * enough gap between rows to read as separate items. */
.jolien-value-rows {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.jolien-value-row {
	display: grid;
	grid-template-columns: 56px 1fr;
	gap: var(--jolien-space-4);
	align-items: flex-start;
	padding: var(--jolien-space-4) var(--jolien-space-5);
	background: var(--jolien-surface);
	border: 1px solid var(--jolien-border);
	border-radius: 20px;
	transition: transform var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing),
	            border-color var(--jolien-dur) var(--jolien-easing);
}
.jolien-value-row:hover {
	transform: translateY(-2px);
	box-shadow: var(--jolien-shadow-md);
	border-color: var(--jolien-primary-tint);
}
.jolien-value-icon {
	width: 56px;
	height: 56px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jolien-accent-tint);
	color: var(--jolien-accent);
	border-radius: 50%;
}
.jolien-value-icon svg {
	width: 26px;
	height: 26px;
}
.jolien-value-body h3 {
	font-family: var(--jolien-font-display);
	font-size: var(--jolien-fs-md);
	font-weight: 600;
	color: var(--jolien-ink);
	margin: 0 0 var(--jolien-space-1);
	line-height: 1.2;
}
.jolien-value-body p {
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-soft);
	margin: 0;
	line-height: 1.55;
}

/* Photo tile placeholder — used wherever a real photo of Jolien will land.
 * Selector includes .elementor-element so we beat Elementor's per-page
 * container CSS (which is .elementor-NNN .elementor-element.elementor-element-XXX,
 * specificity 0,3,0). Variants change aspect, gradient, and caption. */
.elementor-element.jolien-photo-tile {
	background: linear-gradient(135deg, var(--jolien-primary-tint) 0%, var(--jolien-muted) 100%);
	border-radius: var(--jolien-radius-lg);
	min-height: 380px;
	display: flex !important;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}
.elementor-element.jolien-photo-tile::after {
	content: "Foto van Jolien komt hier";
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-primary);
	font-style: italic;
	opacity: 0.7;
	text-align: center;
	padding: 0 var(--jolien-space-4);
}

/* Portrait variant — taller, for the Over hero. */
.elementor-element.jolien-photo-tile.jolien-photo-portrait {
	min-height: 480px;
	aspect-ratio: 4 / 5;
	background: linear-gradient(160deg, var(--jolien-primary-tint) 0%, var(--jolien-secondary) 100%);
}
.elementor-element.jolien-photo-tile.jolien-photo-portrait::after {
	content: "Portret van Jolien komt hier";
}

/* Sport variant — real action photo of Jolien (Ironman finisher). Photo
 * source is 3:4 portrait, so tile aspect is 1:1 to keep the crop minimal.
 * background-position keeps her face out of the top cut and her feet
 * (anchor of the running stride) out of the bottom cut. */
.elementor-element.jolien-photo-tile.jolien-photo-sport {
	min-height: 380px;
	aspect-ratio: 1 / 1;
	background-image: url("../img/over/sport.jpg");
	background-size: cover;
	background-position: center 30%;
	background-repeat: no-repeat;
}
.elementor-element.jolien-photo-tile.jolien-photo-sport::after {
	content: "";
}

/* Real photo tile — used wherever an actual image of Jolien is in place.
 * Drops the placeholder caption + lets the photo's own aspect dictate. */
.elementor-element.jolien-photo-real {
	border-radius: var(--jolien-radius-lg);
	overflow: hidden;
	aspect-ratio: 1 / 1;
	min-height: 0;
}
.elementor-element.jolien-photo-real::after { display: none; }

/* =========================================================================
 * Tarieven — price card styling
 * ========================================================================= */

/* The duration label that sits between title and price. */
.jolien-price-card .jolien-price-duration .elementor-heading-title {
	font-family: var(--jolien-font-sans) !important;
	font-style: normal !important;
	font-size: var(--jolien-fs-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.12em !important;
	text-transform: uppercase !important;
	color: var(--jolien-ink-mute) !important;
}

/* The price itself — large italic Lora display number. */
.jolien-price-card .jolien-price .elementor-heading-title {
	font-family: var(--jolien-font-display) !important;
	font-weight: 600 !important;
	font-style: normal !important;
	font-size: clamp(2.4rem, 4vw, 3rem) !important;
	line-height: 1 !important;
	color: var(--jolien-primary) !important;
	letter-spacing: -0.02em;
}
.jolien-price-card .jolien-price-suffix .elementor-heading-title {
	font-family: var(--jolien-font-sans) !important;
	font-size: var(--jolien-fs-sm) !important;
	font-weight: 500 !important;
	color: var(--jolien-ink-mute) !important;
}

/* Hairline divider between header and features. */
.jolien-price-divider {
	height: 1px;
	background: var(--jolien-border);
	width: 100%;
	margin-block: var(--jolien-space-3);
}

/* Feature list under the price — icon-list style overrides. */
.jolien-price-card .elementor-widget-icon-list .elementor-icon-list-text {
	font-size: var(--jolien-fs-sm) !important;
	color: var(--jolien-ink) !important;
}

/* Highlighted price card frame. The "Meest gekozen" pill itself is rendered
 * as a real HTML widget inside the card (Elementor's .e-con::before is
 * reserved for its background-overlay system, so a pseudo-element badge
 * gets resized to fill the container). */
.jolien-price-card.jolien-price-featured {
	border: 2px solid var(--jolien-accent) !important;
	position: relative;
	box-shadow: var(--jolien-shadow-lg);
}
.jolien-price-badge {
	display: inline-block;
	background: var(--jolien-accent);
	color: #fff;
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: var(--jolien-radius-pill);
	white-space: nowrap;
	margin: -28px auto 8px;  /* pulls itself up over the card border */
	position: relative;
	z-index: 1;
}

/* Terugbetaling info strip. */
.jolien-info-strip {
	border: 1px solid var(--jolien-border);
	background: var(--jolien-muted);
	border-radius: var(--jolien-radius-md);
}

/* =========================================================================
 * Tariff card — single unified card for the Tarieven page.
 *
 * Sits on a muted-blush section bg so the white card pops. Has a coral→
 * mauve top accent stripe, a deeper layered shadow, a "transparante
 * tarieven" stamp in the rate header, and consult-icons per row in the
 * pricing table.
 * ========================================================================= */

.jolien-tariff-card {
	position: relative;
	max-width: 820px;
	margin: 0 auto;
	background: var(--jolien-surface);
	border-radius: var(--jolien-radius-lg);
	box-shadow:
		0 24px 56px -16px rgba(45, 31, 38, 0.18),
		0 4px 16px rgba(45, 31, 38, 0.06);
	padding: clamp(2rem, 4vw, 3rem);
	display: flex;
	flex-direction: column;
	gap: var(--jolien-space-5);
	overflow: hidden;
}
/* Coral → mauve top accent stripe, glued to the card's top edge. */
.jolien-tariff-card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 5px;
	background: linear-gradient(90deg, var(--jolien-accent) 0%, var(--jolien-primary) 100%);
}

/* Editorial price list — no table chrome, no headers. Each item is a
 * flex row: small circular icon · name + duration chip + meta sub-line ·
 * elegant price on the right. Items separated by a faint hairline. */
.jolien-tariff-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}
.jolien-tariff-item {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: var(--jolien-space-4) var(--jolien-space-5);
	padding: var(--jolien-space-5) 0;
	border-bottom: 1px solid var(--jolien-border);
	transition: background var(--jolien-dur) var(--jolien-easing);
}
.jolien-tariff-item:first-child { padding-top: var(--jolien-space-3); }
.jolien-tariff-item:last-child  { border-bottom: 0; padding-bottom: var(--jolien-space-3); }

.jolien-tariff-item__icon {
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jolien-muted);
	color: var(--jolien-accent);
	border-radius: 50%;
}
.jolien-tariff-item__icon svg { width: 20px; height: 20px; }

.jolien-tariff-item__body { min-width: 0; }
.jolien-tariff-item__name {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.1rem, 1.7vw, 1.35rem);
	color: var(--jolien-ink);
	line-height: 1.2;
	margin: 0 0 6px;
	letter-spacing: -0.01em;
}
.jolien-tariff-item__meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}
.jolien-tariff-item__chip {
	display: inline-flex;
	align-items: center;
	padding: 3px 10px;
	background: rgba(216, 138, 133, 0.12);
	color: var(--jolien-accent-dark);
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-weight: 600;
	letter-spacing: 0.02em;
	border-radius: var(--jolien-radius-pill);
	white-space: nowrap;
}
.jolien-tariff-item__sub {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-mute);
	line-height: 1.4;
}
.jolien-tariff-item__price {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.6rem, 2.6vw, 2.1rem);
	color: var(--jolien-primary);
	line-height: 1;
	letter-spacing: -0.02em;
	white-space: nowrap;
	text-align: right;
}
/* "Op maat" / "Op aanvraag" — those are words, not prices, so they
 * should read smaller and less heroic than a real €-figure. */
.jolien-tariff-item:nth-child(n+3) .jolien-tariff-item__price {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-md);
	font-weight: 500;
	color: var(--jolien-ink-mute);
	font-style: italic;
}

/* Fine-print line — the BTW + validity note that used to live in the
 * headline. Tiny, centered, sits directly under the list. */
.jolien-tariff-fineprint {
	margin: 0;
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	color: var(--jolien-ink-mute);
	text-align: center;
	letter-spacing: 0.02em;
}

/* Inline praktische-info block — small, low-visual-weight, sits between
 * the list and the footer CTA. */
.jolien-tariff-notes {
	background: var(--jolien-muted);
	border-radius: var(--jolien-radius-md);
	padding: var(--jolien-space-4) var(--jolien-space-5);
}
.jolien-tariff-notes ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jolien-space-2);
}
.jolien-tariff-notes li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-primary-dark);
	line-height: 1.5;
}
.jolien-tariff-notes svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--jolien-accent);
	margin-top: 1px;
}

.jolien-tariff-foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--jolien-space-5);
	padding-top: var(--jolien-space-4);
	border-top: 1px solid var(--jolien-border);
}
.jolien-tariff-cta {
	display: inline-flex;
	align-items: center;
	padding: 0.85em 1.8em;
	background: var(--jolien-primary);
	color: #fff !important;
	font-family: var(--jolien-font-sans);
	font-weight: 600;
	font-size: var(--jolien-fs-sm);
	border-radius: var(--jolien-radius-pill);
	text-decoration: none;
	transition: background var(--jolien-dur) var(--jolien-easing),
	            transform var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing);
}
.jolien-tariff-cta:hover {
	background: var(--jolien-accent);
	transform: translateY(-2px);
	box-shadow: var(--jolien-shadow-md);
}
.jolien-tariff-link {
	color: var(--jolien-primary-dark);
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	font-weight: 500;
	text-decoration: none;
	transition: color var(--jolien-dur) var(--jolien-easing), gap var(--jolien-dur) var(--jolien-easing);
}
.jolien-tariff-link:hover { color: var(--jolien-accent); }

@media (max-width: 600px) {
	.jolien-tariff-card { padding: var(--jolien-space-6); }
	.jolien-tariff-item {
		grid-template-columns: auto 1fr;
		gap: var(--jolien-space-3);
		padding: var(--jolien-space-4) 0;
	}
	.jolien-tariff-item__body { min-width: 0; }
	.jolien-tariff-item__price {
		grid-column: 2;
		text-align: left;
		font-size: 1.75rem;
		margin-top: 4px;
	}
	.jolien-tariff-item:nth-child(n+3) .jolien-tariff-item__price {
		font-size: var(--jolien-fs-md);
	}
}

/* =========================================================================
 * Aanbod — "Voor wie" audience section
 *
 * Sits between the hero and the service blocks. Four audience tiles in a
 * 2×2 grid on desktop, single column on mobile. Each tile: small accented
 * icon, display-serif title, body copy. SEO-tuned copy intentionally
 * mentions athlete sub-types (triathletes, runners, hybrid training,
 * HIIT, functional fitness) without brand names.
 * ========================================================================= */

.jolien-audience {
	max-width: 1120px;
	margin: 0 auto;
}
.jolien-audience__intro {
	max-width: 680px;
	margin: 0 auto var(--jolien-space-6);
	text-align: center;
}
.jolien-audience__eyebrow {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--jolien-primary-dark);
	margin: 0 0 var(--jolien-space-2);
}
.jolien-audience__heading {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.7rem, 3vw, 2.4rem);
	color: var(--jolien-ink);
	letter-spacing: -0.01em;
	line-height: 1.15;
	margin: 0 0 var(--jolien-space-3);
}
.jolien-audience__lead {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-md);
	color: var(--jolien-ink-mute);
	line-height: 1.6;
	margin: 0;
}

.jolien-audience__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: var(--jolien-space-5);
}
.jolien-audience__item {
	background: var(--jolien-surface);
	border-radius: var(--jolien-radius-md);
	padding: var(--jolien-space-5);
	box-shadow: 0 4px 16px -4px rgba(45, 31, 38, 0.08);
	transition: transform var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing);
}
.jolien-audience__item:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px -4px rgba(45, 31, 38, 0.12);
}
.jolien-audience__icon {
	width: 44px;
	height: 44px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--jolien-muted);
	color: var(--jolien-accent);
	border-radius: 50%;
	margin-bottom: var(--jolien-space-3);
}
.jolien-audience__icon svg { width: 22px; height: 22px; }
.jolien-audience__title {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.05rem, 1.6vw, 1.25rem);
	color: var(--jolien-ink);
	letter-spacing: -0.005em;
	line-height: 1.25;
	margin: 0 0 var(--jolien-space-2);
}
.jolien-audience__body {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-primary-dark);
	line-height: 1.6;
	margin: 0;
}
@media (max-width: 720px) {
	.jolien-audience__grid {
		grid-template-columns: 1fr;
	}
}

/* =========================================================================
 * Aanbod — editorial service blocks (one big article per service)
 *
 * Layout: oversized italic number on top-left, big serif title under it,
 * a row of chip-style meta below the title, then four short editorial
 * sub-blocks (Wat / Voor wie / Hoe / Achteraf) in a 2-column grid on the
 * right, and an inline arrow CTA at the bottom.
 *
 * The whole service is one `<article>`; the reversed flag mirrors lede ↔
 * body left-right on desktop, mobile always stacks.
 * ========================================================================= */

.jolien-service {
	display: grid;
	grid-template-columns: minmax(0, 36%) 1fr;
	gap: clamp(2rem, 5vw, 4rem);
	align-items: start;
	padding-block: var(--jolien-space-3);
	scroll-margin-top: 96px;
}
.jolien-service--reversed {
	grid-template-columns: 1fr minmax(0, 36%);
}
/* No explicit grid-column / grid-row on the items here: the seed renders
 * body-then-lede in DOM for reversed sections, and auto-placement does the
 * rest. Explicit placement breaks `position: sticky` inside a grid cell. */

.jolien-service__lede {
	position: sticky;
	top: 96px; /* sticks while you read through the long body */
}
.jolien-service__number {
	font-family: var(--jolien-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: clamp(4rem, 7vw, 6.5rem);
	line-height: 0.9;
	color: var(--jolien-accent-dark);
	letter-spacing: -0.04em;
	margin-bottom: var(--jolien-space-3);
	opacity: 0.85;
}
.jolien-service__title {
	font-family: var(--jolien-font-display);
	font-weight: 600;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
	color: var(--jolien-ink);
	letter-spacing: -0.015em;
	margin: 0 0 var(--jolien-space-3);
	max-width: 12ch;
}
.jolien-service__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 8px;
}
/* Chip: surface bg + soft border. Works on white AND on muted/blush sections
 * (the previous muted-bg chip became invisible on muted-section backgrounds). */
.jolien-service-chip {
	display: inline-block;
	padding: 4px 12px;
	background: var(--jolien-surface);
	border: 1px solid var(--jolien-border);
	color: var(--jolien-primary-dark);
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-weight: 600;
	border-radius: var(--jolien-radius-pill);
	letter-spacing: 0.02em;
}

.jolien-service__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--jolien-space-6) var(--jolien-space-8);
}
.jolien-service__block { min-width: 0; }
/* H4 label color: was accent-dark (≈3.96:1 on muted blush — fails AA for
 * small text). Switched to primary, which passes 7:1 on both white and
 * muted sections, and stays consistent with the brand anchor. */
.jolien-service__block h4 {
	font-family: var(--jolien-font-sans) !important;
	font-size: var(--jolien-fs-xs) !important;
	font-weight: 700 !important;
	letter-spacing: 0.14em !important;
	text-transform: uppercase !important;
	color: var(--jolien-primary) !important;
	margin: 0 0 var(--jolien-space-2) !important;
}
.jolien-service__block p {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-base);
	color: var(--jolien-ink);
	line-height: 1.65;
	margin: 0;
}
.jolien-service__cta {
	grid-column: 1 / -1;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: var(--jolien-space-3);
	padding-top: var(--jolien-space-4);
	border-top: 1px solid var(--jolien-border);
	color: var(--jolien-primary);
	font-family: var(--jolien-font-sans);
	font-weight: 600;
	font-size: var(--jolien-fs-md);
	text-decoration: none;
	transition: color var(--jolien-dur) var(--jolien-easing),
	            gap var(--jolien-dur) var(--jolien-easing);
}
.jolien-service__cta:hover {
	color: var(--jolien-accent);
	gap: 14px;
}

/* Tablet + mobile: stack to single column. Lede always above body — DOM
 * order is body-then-lede for reversed services on desktop (needed so the
 * sticky positioning works), so we use `order` to bring the lede first
 * regardless of DOM order on mobile. */
@media (max-width: 900px) {
	.jolien-service,
	.jolien-service--reversed {
		grid-template-columns: 1fr;
	}
	.jolien-service__lede { position: static; order: -1; }
	.jolien-service__body { order: 0; }
}
@media (max-width: 600px) {
	.jolien-service__body { grid-template-columns: 1fr; }
}

/* =========================================================================
 * Visie — editorial manifesto layout
 * ========================================================================= */

/* Oversized numbered pijler — italic Lora, accent color, anchor of each
 * principle section. Sits beside its content + a themed photo tile. */
.jolien-pijler-number .elementor-heading-title {
	font-family: var(--jolien-font-display) !important;
	font-style: italic !important;
	font-weight: 500 !important;
	font-size: clamp(6rem, 10vw, 11rem) !important;
	line-height: 0.85 !important;
	/* Was --jolien-accent — failed 3:1 contrast on every section background.
	 * --jolien-accent-dark (#B66964) keeps the warm-coral voice while
	 * passing AA-large on white (4.0:1), muted (3.5:1), and sand (3.2:1). */
	color: var(--jolien-accent-dark) !important;
	letter-spacing: -0.04em;
	margin: 0 !important;
}
.jolien-pijler-body .elementor-heading-title {
	font-size: var(--jolien-fs-xl) !important;
}

/* Pijler-specific photo tiles — themed photo + gradient + caption per pijler.
 * All ride on the .elementor-element.jolien-photo-tile base for radius/aspect.
 * Background-image set per-variant below points to AI-generated brand photos
 * in assets/img/visie/ (4:3, ~1400px wide, optimized JPG ~300 KB each). */
.elementor-element.jolien-photo-pijler {
	min-height: 280px;
	aspect-ratio: 4 / 3;
	border-radius: var(--jolien-radius-lg);
	overflow: hidden;
	position: relative;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
.elementor-element.jolien-photo-pijler::after {
	content: attr(data-caption);
	position: absolute;
	inset: auto var(--jolien-space-4) var(--jolien-space-4) var(--jolien-space-4);
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-style: italic;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255,255,255,0.85);
	text-align: left;
	z-index: 1;
}
.elementor-element.jolien-photo-pijler::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, transparent 55%, rgba(45,31,38,0.45) 100%);
	pointer-events: none;
}

/* Per-pijler photo theme — real brand photos + captions. */
.elementor-element.jolien-photo-pijler-01 {
	background-image: url("../img/visie/pijler-01.jpg");
}
.elementor-element.jolien-photo-pijler-01::after { content: "Onderzoek & inzichten"; }

.elementor-element.jolien-photo-pijler-02 {
	background-image: url("../img/visie/pijler-02.jpg");
}
.elementor-element.jolien-photo-pijler-02::after { content: "Eén-op-één begeleiding"; }

.elementor-element.jolien-photo-pijler-03 {
	background-image: url("../img/visie/pijler-03.jpg");
}
.elementor-element.jolien-photo-pijler-03::after { content: "Voor de lange termijn"; }

/* Hero manifesto statement — extra-large display heading.
 * Excludes the eyebrow's heading so its own .jolien-eyebrow size wins. */
.jolien-manifesto-hero > .elementor-widget-heading > .elementor-widget-container > .elementor-heading-title {
	font-size: clamp(2.6rem, 6vw, 5rem) !important;
	line-height: 1.05 !important;
	letter-spacing: -0.025em;
	max-width: 18ch;
}
.jolien-manifesto-hero .jolien-eyebrow .elementor-heading-title {
	font-size: var(--jolien-fs-xs) !important;
}
.jolien-manifesto-hero p {
	font-size: var(--jolien-fs-md);
	color: var(--jolien-ink-soft);
	max-width: 52ch;
}
.jolien-manifesto-hero .jolien-manifesto-emphasis p {
	font-family: var(--jolien-font-display);
	font-style: italic;
	font-size: var(--jolien-fs-lg);
	/* Was --jolien-accent — at fs-lg (~22px italic, normal weight) it falls
	 * just under both AA-large (3:1) and AA-body (4.5:1). accent-dark keeps
	 * the coral voice and passes both. */
	color: var(--jolien-accent-dark);
	max-width: 44ch;
}

/* =========================================================================
 * Chevron process — interlocking arrow tiles with color progression.
 * Visualises the 4-step traject as a flow that "points forward".
 * Rendered as plain HTML inside an Elementor html widget, so the layout
 * is independent of Elementor's container settings.
 * ========================================================================= */

:root {
	--jolien-chev-notch: 40px;   /* depth of the arrow tip / left notch */
	--jolien-chev-min-h: 168px;  /* tile min height — proportional to notch */
}

.jolien-chevron-row {
	display: flex;
	flex-wrap: nowrap;
	gap: 0;
	width: 100%;
	overflow: visible;
	filter: drop-shadow(0 2px 6px rgba(45, 31, 38, 0.06));
}

.jolien-chevron {
	flex: 1 1 0;
	min-width: 0;                           /* allow flex shrinking */
	min-height: var(--jolien-chev-min-h);
	padding: 1.5rem 2.75rem 1.5rem 4rem;
	margin-left: calc(var(--jolien-chev-notch) * -1);
	clip-path: polygon(
		0 0,
		calc(100% - var(--jolien-chev-notch)) 0,
		100% 50%,
		calc(100% - var(--jolien-chev-notch)) 100%,
		0 100%,
		var(--jolien-chev-notch) 50%
	);
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #fff;
	transition: transform var(--jolien-dur) var(--jolien-easing), filter var(--jolien-dur) var(--jolien-easing);
	position: relative;
}
.jolien-chevron:first-child {
	margin-left: 0;
	padding-left: 1.75rem;
	clip-path: polygon(
		0 0,
		calc(100% - var(--jolien-chev-notch)) 0,
		100% 50%,
		calc(100% - var(--jolien-chev-notch)) 100%,
		0 100%
	);
}
.jolien-chevron:last-child {
	padding-right: 1.75rem;
	clip-path: polygon(
		0 0,
		100% 0,
		100% 100%,
		0 100%,
		var(--jolien-chev-notch) 50%
	);
}
.jolien-chevron:hover {
	transform: translateY(-2px);
	filter: brightness(1.04);
}

/* Color progression: soft entry → warming up → active → established. */
.jolien-chevron-1 { background: var(--jolien-secondary);   color: var(--jolien-primary-dark); }
.jolien-chevron-2 { background: var(--jolien-accent-tint); color: var(--jolien-primary-dark); }
.jolien-chevron-3 { background: var(--jolien-accent);      color: #fff; }
.jolien-chevron-4 { background: var(--jolien-primary);     color: #fff; }

.jolien-chevron .num {
	display: block;
	font-family: var(--jolien-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: 1.45rem;
	line-height: 1;
	opacity: 0.65;
}
.jolien-chevron .label {
	display: block;
	font-family: var(--jolien-font-sans);
	font-weight: 700;
	font-size: 1.05rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	margin-top: 0.25rem;
	line-height: 1.15;
}
.jolien-chevron .desc {
	display: block;
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-xs);
	font-weight: 500;
	margin-top: 0.5rem;
	line-height: 1.45;
	opacity: 0.88;
}

/* Mobile: drop the chevrons, stack as a numbered vertical list with the
 * same color progression. flex:1 1 0 from the row would otherwise force
 * equal-height children inside a column flex → content overlap. */
@media (max-width: 767px) {
	.jolien-chevron-row { flex-direction: column; gap: 8px; }
	.jolien-chevron {
		flex: 0 0 auto !important;
		width: 100% !important;
		min-height: 0 !important;
		clip-path: none !important;
		margin-left: 0 !important;
		padding: 1rem 1.25rem !important;
		border-radius: var(--jolien-radius-md);
	}
}
.jolien-photo-tile.jolien-photo-sport::after {
	content: "Foto van Jolien in actie komt hier";
}

/* Pull quote section — large italic Lora quote in primary mauve. */
.jolien-pull-quote-section {
	background: var(--jolien-surface);
}
.jolien-pull-quote-section .elementor-widget-text-editor:first-child p {
	font-family: var(--jolien-font-display);
	font-style: italic;
	font-weight: 500;
	font-size: var(--jolien-fs-2xl);
	line-height: 1.3;
	color: var(--jolien-primary);
	max-width: 22ch;
	text-align: center;
	margin: 0 auto;
	position: relative;
}
.jolien-pull-quote-section .elementor-widget-text-editor:first-child p::before {
	content: "“";
	display: block;
	font-size: var(--jolien-fs-3xl);
	line-height: 1;
	color: var(--jolien-accent);
	margin-bottom: var(--jolien-space-3);
}
.jolien-pull-quote-section .elementor-widget-text-editor + .elementor-widget-text-editor p {
	font-family: var(--jolien-font-sans);
	font-style: normal;
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-mute);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* =========================================================================
 * Elementor Form — match the design system
 * ========================================================================= */

.elementor-form .elementor-field-group > label {
	font-family: var(--jolien-font-sans);
	font-weight: 500;
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-soft);
}
.elementor-form input:not([type="submit"]):not([type="checkbox"]),
.elementor-form textarea,
.elementor-form select {
	border: 1px solid var(--jolien-border) !important;
	background: #fff !important;
	border-radius: var(--jolien-radius-sm) !important;
	padding: 0.7em 0.9em !important;
	font-family: var(--jolien-font-sans) !important;
	font-size: var(--jolien-fs-base) !important;
	transition: border-color var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing);
}
.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus {
	outline: none !important;
	border-color: var(--jolien-primary) !important;
	box-shadow: 0 0 0 3px rgba(122,72,88,0.18) !important;
}
.elementor-form button[type="submit"] {
	font-family: var(--jolien-font-sans) !important;
	font-weight: 600 !important;
	border-radius: var(--jolien-radius-pill) !important;
	padding: 0.85em 1.8em !important;
	transition: transform var(--jolien-dur) var(--jolien-easing),
	            background var(--jolien-dur) var(--jolien-easing),
	            box-shadow var(--jolien-dur) var(--jolien-easing);
}
.elementor-form button[type="submit"]:hover {
	transform: translateY(-2px);
	box-shadow: var(--jolien-shadow-md);
}

/* =========================================================================
 * Single post / archive polish (Theme Builder Single Post + Archive)
 * ========================================================================= */

.jolien-single-post .elementor-widget-post-info {
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-mute);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	font-weight: 600;
}
.jolien-single-post .elementor-page-title {
	max-width: 28ch;
	margin-bottom: var(--jolien-space-6) !important;
}
.jolien-single-post .elementor-widget-theme-post-content {
	max-width: 68ch;
}

.jolien-blog-archive .elementor-post__title a {
	font-family: var(--jolien-font-display);
	color: var(--jolien-ink);
	text-decoration: none;
}
.jolien-blog-archive .elementor-post__title a:hover { color: var(--jolien-primary); }
.jolien-blog-archive .elementor-post__excerpt p { color: var(--jolien-ink-soft); font-size: var(--jolien-fs-sm); }
.jolien-blog-archive .elementor-post__read-more {
	font-family: var(--jolien-font-sans);
	font-weight: 600;
	color: var(--jolien-accent);
	text-decoration: none;
}

/* =========================================================================
 * Page-specific micro-tweaks
 * ========================================================================= */

/* Gutenberg "Aanbod in het kort" service teasers on Home (legacy path while
 * the Elementor rebuild is the primary surface). */
body.home .entry-content h3 { color: var(--jolien-primary); }

/* =========================================================================
 * A11y — global focus-visible ring + screen-reader-only utility.
 * Every interactive element gets a clearly visible ring on keyboard focus.
 * The ring sits *outside* the element (outline-offset) so it doesn't clip
 * inside pills / chevron tiles. Color is the brand accent for visibility
 * on both light + dark backgrounds (passes 3:1 on every section bg).
 * ========================================================================= */

a:focus-visible,
button:focus-visible,
[role="button"]:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible,
.elementor-button:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 2px solid var(--jolien-accent) !important;
	outline-offset: 3px !important;
	border-radius: inherit;
}
/* On the coral CTA band, a coral focus ring would vanish — switch to white. */
.jolien-cta-band a:focus-visible,
.jolien-cta-band button:focus-visible,
.jolien-cta-band .elementor-button:focus-visible {
	outline-color: #fff !important;
}
/* On the mauve hero, also use white. */
.jolien-hero a:focus-visible,
.jolien-hero button:focus-visible,
.jolien-hero .elementor-button:focus-visible {
	outline-color: #fff !important;
}

/* Screen-reader-only helper (used for visually-hidden labels). */
.sr-only {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0, 0, 0, 0) !important;
	white-space: nowrap !important;
	border: 0 !important;
}

/* Footer social icon discs — bump touch target to ≥40×40 (was 38×38). */
.jolien-footer-socials a {
	width: 40px;
	height: 40px;
}

/* =========================================================================
 * Bot-resistant contact details — server HTML has separator-noise that JS
 * hides on hydration. Style targets the hydrated state too so the icons
 * read consistently before/after JS runs.
 * ========================================================================= */

/* Before hydration: dim the "[at]" / "[dot]" separator spans visually so
 * they look intentional rather than broken — they're a fallback for
 * NoScript users + a bot deterrent. */
.jolien-obf-sep {
	color: var(--jolien-ink-mute);
	font-size: 0.85em;
	margin: 0 2px;
}
/* Once JS upgrades the link, the separators are gone (textContent rewrite). */
.jolien-obf-email,
.jolien-obf-tel {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color var(--jolien-dur) var(--jolien-easing);
}
.jolien-obf-email:hover,
.jolien-obf-tel:hover {
	border-bottom-color: currentColor;
}

/* Contact page — icon-list of email / phone / address rendered via HTML
 * widget (couldn't host the obf data-attributes inside Elementor's
 * icon-list widget cleanly). */
.jolien-contact-info {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--jolien-space-3);
}
.jolien-contact-info li {
	display: flex;
	align-items: flex-start;
	gap: var(--jolien-space-3);
	font-family: var(--jolien-font-sans);
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink);
	line-height: 1.5;
}
.jolien-contact-info svg {
	width: 18px;
	height: 18px;
	flex-shrink: 0;
	color: var(--jolien-accent);
	margin-top: 2px;
}

/* Header CTA button — guarantee ≥40px touch target on mobile (Elementor's
 * `size: sm` lands at ~36px on small viewports without this). */
@media (max-width: 1024px) {
	.jolien-site-header .elementor-widget-button .elementor-button {
		min-height: 40px;
	}
}

/* Nav menu items — give them enough vertical area to be a comfortable target
 * (Elementor's default 14px padding already gets us there, but be explicit
 * so future Elementor updates can't silently shrink it). */
.jolien-site-header .elementor-nav-menu a.elementor-item {
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	/* Slimmer horizontal padding so 7 nav items + brand + lang switcher +
	 * CTA all fit comfortably on the same row at 1440px boxed (1140px
	 * inner). Default Elementor padding was ~16px L/R — about 84px too
	 * wide once the switcher landed. */
	padding-left: 11px !important;
	padding-right: 11px !important;
}

/* Burger menu toggle on mobile — Elementor's default is 30-33 px touch
 * target. Bump min size to 44×44 to meet AA. Critical: do NOT force a
 * `display` value here — Elementor toggles `display: none` ↔ `block`
 * across breakpoints, so any `display:inline-flex` here would make the
 * burger render on desktop too (where it would otherwise be hidden). */
.jolien-site-header .elementor-menu-toggle {
	min-width: 44px;
	min-height: 44px;
}

/* Responsive nav breakpoint — at ≥1024 the brand + 7 nav items + CTA all
 * fit on one row. Below that there's not enough room without wrapping
 * the menu onto a second line, so switch to the burger. The dropdown nav
 * is a SIBLING of the main nav (both inside the nav-menu widget wrapper). */
@media (min-width: 1024px) {
	.jolien-site-header .elementor-menu-toggle {
		display: none !important;
	}
	.jolien-site-header .elementor-nav-menu--dropdown {
		display: none !important;
	}
	.jolien-site-header .elementor-nav-menu--main {
		display: block !important;
	}
	.jolien-site-header .elementor-nav-menu--main .elementor-nav-menu {
		display: flex !important;
	}
}
@media (max-width: 1023px) {
	.jolien-site-header .elementor-nav-menu--main {
		display: none !important;
	}
	/* Push the burger widget all the way right so it sits flush against
	 * the CTA, instead of getting stranded in the middle by the header
	 * container's flex `justify-content: space-between`.
	 *
	 * Also force `position: static` so the absolute-positioned dropdown
	 * below doesn't anchor to this narrow widget — it needs to anchor
	 * to the header (.jolien-site-header.e-con is `position: sticky`,
	 * which acts as the positioning context). */
	.jolien-site-header .elementor-widget-nav-menu {
		margin-left: auto !important;
		position: static !important;
	}
	/* Dropdown panel — render as a proper absolute-positioned overlay
	 * BELOW the header. Without this it falls back to inline rendering
	 * inside the flex middle column, which inflates the header height
	 * by the full menu when opened. The header is `position: sticky`
	 * which is enough to anchor the absolute child. */
	.jolien-site-header nav.elementor-nav-menu--dropdown {
		position: absolute !important;
		top: 100% !important;
		left: 0 !important;
		right: 0 !important;
		margin: 0 !important;
		width: auto !important;
		background-color: var(--jolien-surface) !important;
		border-top: 1px solid var(--jolien-border) !important;
		box-shadow: 0 16px 32px -8px rgba(45, 31, 38, 0.14) !important;
		padding: var(--jolien-space-3) 0 !important;
		z-index: 99 !important;
	}
	/* The <ul> inside the dropdown — Elementor sets a default bg on it
	 * sometimes; make sure it's transparent so the panel bg shows through
	 * the gaps between items. */
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-nav-menu {
		background: transparent !important;
		display: block !important;
	}
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-nav-menu > li {
		display: block !important;
		background: transparent !important;
	}
	/* Items inside the dropdown — match the desktop nav voice. `display:
	 * block` is what fixes the whitespace-on-the-right problem: the link
	 * is an <a> (inline by default), so without this its background only
	 * spans the text width and the active-state bg ends mid-row. Block
	 * makes each item a full-width row so hover/active reads as a clean
	 * horizontal bar across the panel. */
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-item {
		display: block !important;
		font-family: var(--jolien-font-sans) !important;
		font-weight: 500 !important;
		font-size: var(--jolien-fs-md) !important;
		color: var(--jolien-ink) !important;
		background: transparent !important;
		border: 0 !important;
		padding: var(--jolien-space-3) var(--jolien-space-6) !important;
		text-align: left;
		transition: color var(--jolien-dur) var(--jolien-easing),
		            background var(--jolien-dur) var(--jolien-easing);
	}
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-item:hover,
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-item:focus-visible {
		color: var(--jolien-accent) !important;
		background: var(--jolien-muted) !important;
	}
	/* Active item — coral text on muted bg. Beats Elementor's ugly default
	 * dark-grey current-menu-item background. */
	.jolien-site-header .elementor-nav-menu--dropdown .current-menu-item > .elementor-item,
	.jolien-site-header .elementor-nav-menu--dropdown .current-menu-ancestor > .elementor-item,
	.jolien-site-header .elementor-nav-menu--dropdown .elementor-item.elementor-item-active {
		color: var(--jolien-accent) !important;
		background: var(--jolien-muted) !important;
		font-weight: 600 !important;
	}
}

/* On the tightest phones (≤480) drop the header CTA — Contact is in the
 * burger menu, so a duplicate CTA crowds the brand. */
@media (max-width: 480px) {
	.jolien-site-header .elementor-widget-button { display: none; }
}

/* Section-glow drift animations already wrapped in
 * `@media (prefers-reduced-motion: no-preference)`. Belt-and-braces: an
 * explicit kill for the bob animation too, in case the body of the
 * keyframe rule overrides a non-animating fallback transform. */
@media (prefers-reduced-motion: reduce) {
	.jolien-hero-scroll-cue {
		animation: none !important;
		transform: translateX(-50%) !important;
		opacity: 0.85 !important;
	}
	.elementor-element.jolien-photo-tile:not(.jolien-photo-portrait):not(.jolien-photo-sport):not(.jolien-photo-pijler):not(.jolien-photo-real) {
		transition: none !important;
	}
}

/* Eyebrow text colour — accent (#D88A85) on any background fails 4.5:1 for
 * small text (eyebrows are 12-13px ALL CAPS, so body-text contrast applies).
 * primary-dark (#5C3242) is the brand "ink-mauve" and reads as the same
 * voice as the brand, while passing 7:1 on every section background.
 * Keep the warm letterspacing/uppercase styling unchanged. */
.jolien-eyebrow .elementor-heading-title {
	color: var(--jolien-primary-dark) !important;
}
/* Hero/primary backgrounds invert the eyebrow to peach for contrast. */
.jolien-hero .jolien-eyebrow .elementor-heading-title,
.jolien-section-primary .jolien-eyebrow .elementor-heading-title {
	color: var(--jolien-secondary) !important;
}

/* Placeholder note — `accent-tint` bg with `primary-dark` text. The default
 * is fine at body sizes; left here as a contrast anchor in case the brand
 * tints shift later. */

/* ── Bodypoint — fysieke consultatielocatie ─────────────────────────────── */
.jolien-bodypoint {
	margin-top: 22px;
	padding: 18px 18px 20px;
	background: var(--jolien-muted);
	border: 1px solid var(--jolien-border);
	border-radius: var(--jolien-radius-md);
}
.jolien-bodypoint__logo {
	display: block;
	width: auto;
	max-width: 160px;
	height: auto;
	margin: 0 0 12px;
}
.jolien-bodypoint__lead {
	margin: 0 0 10px;
	font-size: var(--jolien-fs-sm);
	line-height: 1.45;
	color: var(--jolien-ink);
}
.jolien-bodypoint__lead strong { color: var(--jolien-primary); }
.jolien-bodypoint__meta {
	list-style: none;
	margin: 0 0 12px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.jolien-bodypoint__meta li {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: var(--jolien-fs-sm);
	color: var(--jolien-ink-soft);
}
.jolien-bodypoint__meta svg { flex: 0 0 auto; width: 17px; height: 17px; color: var(--jolien-accent); }
.jolien-bodypoint__link {
	display: inline-block;
	font-size: var(--jolien-fs-sm);
	font-weight: 700;
	color: var(--jolien-primary);
	text-decoration: none;
}
.jolien-bodypoint__link:hover { color: var(--jolien-accent-dark); text-decoration: underline; }

/* Footer — compacte Bodypoint-regel */
.jolien-bodypoint-foot {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.4;
}
.jolien-bodypoint-foot__logo { flex: 0 0 auto; width: auto; max-width: 84px; height: auto; }