/*
 * PRO-intermediair — theme stylesheet
 *
 * Houses the bits of CSS that theme.json can't express:
 *   - Header + transparent-header behaviour
 *   - Card hover / shadow transitions
 *   - CSS-only carousel for the references pattern
 *   - Client logo wall layout
 *   - Footer tweaks
 *   - A few utility classes
 *
 * All colours reference theme.json custom properties
 * (var(--wp--preset--color--primary) etc.) so that changing the
 * palette in theme.json automatically updates the CSS.
 */

/* =========================================================
 * 1. Body + baseline
 * ========================================================= */
body {
	background-color: #f5f5f5;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

.wp-site-blocks > main,
.wp-site-blocks > .wp-block-group {
	background-color: #ffffff;
}

/* Cover-image fill rule.
 *
 * WordPress laadt het core/cover stylesheet alleen wanneer er een echt
 * `<!-- wp:cover -->` block op de pagina staat. Onze ACF-blocks
 * (acf/page-hero, acf/hero-links) emitten zelf het wp-block-cover
 * markup — daar triggert die enqueue niet, en valt de <img> terug op
 * z'n natuurlijke breedte (en pakt dus niet de hele cover).
 *
 * Door de regel hier in onze eigen theme CSS te zetten werken alle
 * cover-blocks consistent, ongeacht of ze van core of van een ACF
 * block komen. */
.wp-block-cover__image-background,
.wp-block-cover__video-background {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
	z-index: 0;
	border: none;
	margin: 0;
	padding: 0;
}

/* Cover-block layout (without core/cover stylesheet).
 *
 * The original wp-block-cover stacking model:
 *   z=0  image-background  (full image)
 *   z=1  background span    (color overlay, semi-transparent via dim)
 *   z=2  inner-container    (title/text, fully visible on top)
 *
 * We pin the image to absolute, the overlay to absolute with the
 * has-background-dim-N opacity, and the inner-container to relative
 * z:2 zodat de tekst boven beide ligt. */
.wp-block-cover {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	box-sizing: border-box;
}

.wp-block-cover > .wp-block-cover__background {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-cover > .wp-block-cover__image-background,
.wp-block-cover > .wp-block-cover__video-background {
	z-index: 0;
}

.wp-block-cover .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
	width: 100%;
	color: inherit;
}

/* Dim-opacity rules — WP core levert deze normaal via core/cover
 * stylesheet maar bij ACF-blocks moeten we ze zelf zetten. */
.wp-block-cover .has-background-dim {
	opacity: 0.5;
}

.wp-block-cover .has-background-dim.has-background-dim-0   { opacity: 0;   }
.wp-block-cover .has-background-dim.has-background-dim-10  { opacity: 0.1; }
.wp-block-cover .has-background-dim.has-background-dim-20  { opacity: 0.2; }
.wp-block-cover .has-background-dim.has-background-dim-30  { opacity: 0.3; }
.wp-block-cover .has-background-dim.has-background-dim-40  { opacity: 0.4; }
.wp-block-cover .has-background-dim.has-background-dim-50  { opacity: 0.5; }
.wp-block-cover .has-background-dim.has-background-dim-60  { opacity: 0.6; }
.wp-block-cover .has-background-dim.has-background-dim-70  { opacity: 0.7; }
.wp-block-cover .has-background-dim.has-background-dim-80  { opacity: 0.8; }
.wp-block-cover .has-background-dim.has-background-dim-90  { opacity: 0.9; }
.wp-block-cover .has-background-dim.has-background-dim-100 { opacity: 1;   }

/* Columns flex-layout fallback.
 *
 * Zelfde verhaal als de cover-image regel hierboven: WordPress emit
 * de `is-layout-flex` class en bijbehorend `display:flex` alleen als
 * een echt <!-- wp:columns --> block op de pagina staat. Onze ACF
 * blocks (text-image-row, two-col-text) emitten zelf wp-block-columns
 * markup — zonder deze regel stacken de kolommen verticaal in plaats
 * van naast elkaar te staan. NB: align-items wordt niet expliciet
 * gezet zodat de browser-default `stretch` blijft, waardoor kolommen
 * dezelfde hoogte krijgen (cruciaal voor tekst-naast-foto layouts). */
.wp-block-columns {
	display: flex;
	gap: 2em;
	flex-wrap: wrap;
	box-sizing: border-box;
}

@media (min-width: 782px) {
	.wp-block-columns {
		flex-wrap: nowrap;
	}
}

.wp-block-columns > .wp-block-column {
	flex-grow: 1;
	min-width: 0;
	word-break: break-word;
	overflow-wrap: break-word;
}

@media (max-width: 781px) {
	.wp-block-columns > .wp-block-column {
		flex-basis: 100% !important;
	}
}

/* Onze 2-koloms layouts mogen geen gap tussen tekst- en foto-kolom
 * hebben (foto plakt tegen de tekst — dat is hoe de oorspronkelijke
 * Next.js-layout liep). Override de algemene .wp-block-columns gap
 * voor onze pi-page-columns en pi-narrative wrappers. */
.wp-block-columns.pi-page-columns,
.wp-block-columns.pi-narrative {
	gap: 0;
}

/* Hide the reCAPTCHA badge — we show our own notice in forms. */
.grecaptcha-badge {
	visibility: hidden !important;
}

/* Hide the reCAPTCHA disclosure notice + the unconfigured-fallback warning
 * onder de submit-knop. Let op: Google's reCAPTCHA TOS schrijft voor dat
 * óf de badge óf deze tekst zichtbaar is — verberg je beide, dan ben je
 * formeel out-of-compliance (zelden gehandhaafd, maar weet het). Om de
 * disclosure terug te zetten: verwijder dit blok. Om de badge te tonen
 * i.p.v. de tekst: verwijder de `.grecaptcha-badge` regel hierboven. */
.pi-form__recaptcha-notice,
.pi-form__warning {
	display: none;
}

/* =========================================================
 * 2. Site header
 * ========================================================= */

/* Hoogte van de sticky site-header. Wordt door andere sticky elementen
 * gebruikt (bv. .pi-vac-filter) als offset zodat ze niet onder de
 * header verdwijnen tijdens het scrollen. Op mobiel is hij iets korter
 * door kleinere padding, maar daar zijn de meeste sticky-elementen ook
 * uitgeschakeld. */
:root {
	--pi-header-height: 80px;
}

/* Inner-container utility voor Optie B "Volle breedte met gecentreerde
 * content". Outer wrapper blijft alignfull (achtergrond edge-to-edge),
 * deze inner constrains de heading/grid binnen de wideSize uit
 * theme.json (1200px). Op brede monitors voorkomt dit dat tekst tot
 * de schermrand loopt. */
.pi-block-inner {
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
}

/* Repair .alignwide binnen wp:post-content.
 *
 * Onze page templates zetten `contentSize:"none"` op de wp:post-content
 * block (om alignfull edge-to-edge te laten werken). Side-effect: WP
 * genereert per-instance CSS van de vorm:
 *
 *     .wp-container-core-post-content-is-layout-XXXX > .alignwide {
 *         max-width: none;
 *     }
 *
 * Dit overschrijdt de standaard `.is-layout-constrained > .alignwide`
 * (max-width: wideSize) waardoor blocks met de Wide-uitlijning toch
 * op volle breedte renderen. Deze override herstelt het bedoelde
 * gedrag — alignwide krijgt netjes wideSize (1200px) en wordt
 * gecentreerd. */
.wp-block-post-content > .alignwide {
	max-width: var(--wp--style--global--wide-size, 1200px) !important;
	margin-left: auto !important;
	margin-right: auto !important;
}

.pi-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

.pi-site-header:not(.pi-site-header--transparent) {
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.pi-site-header .wp-block-site-title a {
	color: inherit;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: -0.01em;
}

.pi-site-header .wp-block-navigation .wp-block-navigation-item__content {
	font-weight: 500;
	padding: 0.5rem 0.75rem;
	transition: color 0.15s ease;
}

.pi-site-header:not(.pi-site-header--transparent) .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary);
}

.pi-site-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent);
}

/* --- Submenu dropdowns --- */

/* Caret icon for items that have a submenu */
.pi-site-header .wp-block-navigation-submenu__toggle {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: inherit;
}

/* Dropdown panel */
.pi-site-header .wp-block-navigation__submenu-container {
	background: #ffffff;
	border: 1px solid rgba(15, 25, 65, 0.08);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 25, 65, 0.12);
	padding: 0.5rem 0;
	min-width: 220px;
	z-index: 1000;
}

.pi-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--primary) !important;
	display: block;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
	white-space: nowrap;
}

.pi-site-header .wp-block-navigation__submenu-container .wp-block-navigation-item:hover > .wp-block-navigation-item__content {
	background: rgba(7, 138, 203, 0.08);
	color: var(--wp--preset--color--accent) !important;
}

/* Transparent variant: used on top of the homepage hero. The header
 * sits on top of the cover block without a background, then fades in
 * a solid background when the user scrolls past the hero. Because we
 * can't listen to scroll events in a block theme without JS, we use
 * a simple backdrop-filter so the header always stays readable. */
.pi-site-header--transparent {
	background: linear-gradient(180deg, rgba(15, 25, 65, 0.45) 0%, rgba(15, 25, 65, 0) 100%);
	box-shadow: none;
}

.pi-site-header--transparent .wp-block-site-title a,
.pi-site-header--transparent .wp-block-navigation-item__content {
	color: #ffffff !important;
}

.pi-site-header--transparent .wp-block-navigation-item:hover .wp-block-navigation-item__content {
	color: var(--wp--preset--color--accent) !important;
}

/* Homepage only: the outer <header> template-part is fixed so the
 * hero cover can sit at y=0, the navigation overlays the Maassluis
 * image, and the header stays visible as the user scrolls past the
 * hero. Internal pages use `parts/header.html` which is untouched
 * by this rule (body.home scopes it to the homepage only). */
body.home header.wp-block-template-part {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
}

body.home header.wp-block-template-part .pi-site-header {
	position: static; /* neutralise sticky inside a fixed parent */
}

/* Op interne pagina's: maak het hele <header>-element sticky.
 * De binnenste .pi-site-header heeft `position: sticky` maar zijn
 * containing block (<header>) is precies even hoog als de header
 * zelf — dus er is geen ruimte om "te plakken". Door de sticky
 * naar het buitenste <header> te verplaatsen wordt het body het
 * scroll-anker, wat we willen. Op de homepage gebruiken we
 * `position: fixed` (zie hierboven) zodat de header over de
 * 100vh-cover heen ligt; op subpagina's is sticky genoeg. */
body:not(.home) header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 1000;
}

/* Neutralise the theme.json blockGap that puts vertical space
 * between <header> and <main>. With the header now fixed, the
 * gap becomes a phantom 32px strip above the hero. Only applies
 * on the homepage — internal pages keep the default spacing. */
body.home main.wp-block-group {
	margin-top: 0 !important;
}

/* Smooth cross-fade between the transparent (hero overlay) and
 * scrolled (compact solid navy) states. The `.is-scrolled` class is
 * toggled by assets/js/pi-homepage-header.js which is enqueued only
 * on the homepage via is_front_page() in functions.php. */
.pi-site-header--transparent {
	transition:
		background 0.3s ease,
		box-shadow 0.3s ease,
		padding 0.3s ease;
}

body.home header.wp-block-template-part .pi-site-header--transparent.is-scrolled {
	background: var(--wp--preset--color--secondary);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.25);
	padding-top: var(--wp--preset--spacing--20) !important;
	padding-bottom: var(--wp--preset--spacing--20) !important;
}

/* Site title shrinks slightly in the scrolled state to reinforce
 * the compact look. */
.pi-site-header--transparent .wp-block-site-title a {
	transition: font-size 0.3s ease;
}

.pi-site-header--transparent.is-scrolled .wp-block-site-title a {
	font-size: 1.05rem;
}

/* Prevent "PRO-intermediair" from wrapping mid-word when the flex
 * container squeezes the site-title (visible as "PRO-" / "intermediair"
 * on narrow headers). Kept as a safety net for the fallback site-title
 * that renders when the logo attachment hasn't been seeded yet. */
.pi-site-header .wp-block-site-title,
.pi-site-header .wp-block-site-title a {
	white-space: nowrap;
	flex-shrink: 0;
}

/* Header logo (image variant of the site title).
 * Two variants are emitted by patterns/header-logo-light.php and
 * patterns/header-logo-dark.php — the "light" one on the transparent
 * homepage header, the "dark" one on the subpage solid header. */
.pi-header-logo {
	display: inline-flex;
	align-items: center;
	flex-shrink: 0;
	text-decoration: none;
	line-height: 0;
	transition: transform 0.3s ease;
	/* Keep the logo visible above WP's mobile-nav overlay
	 * (which uses position:fixed; z-index:100000). */
	position: relative;
	z-index: 100001;
}

.pi-header-logo img {
	display: block;
	height: auto;
	max-height: 60px;
	width: auto;
	max-width: 240px;
	object-fit: contain;
}

/* Smaller "dark" variant on subpages — matches Next.js LogoColor 200x60. */
.pi-header-logo--dark img {
	max-height: 56px;
	max-width: 200px;
}

/* Shrink the logo alongside the header when the user scrolls past the
 * threshold on the homepage. Driven by the .is-scrolled class added by
 * assets/js/pi-homepage-header.js. */
.pi-site-header--transparent.is-scrolled .pi-header-logo img {
	max-height: 40px;
}

@media (max-width: 600px) {
	.pi-header-logo img {
		max-height: 44px;
		max-width: 180px;
	}
}

/* "Open posities" pill — matches the Next.js .circle style. */
.pi-header-posities-btn .wp-block-button__link {
	white-space: nowrap;
	font-size: 0.9rem;
}

.pi-header-posities-btn .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--tertiary) !important;
}

/* Prevent the "Uitzendkracht login" button text from wrapping
 * ("Uitzendkrach / t login") when the header flex is tight. */
.pi-header-login-btn .wp-block-button__link {
	white-space: nowrap;
}

/* Mobile menu — leverage WP's overlay menu for the hamburger. Make
 * the button contrast against the header. */
.pi-site-header .wp-block-navigation__responsive-container-open,
.pi-site-header .wp-block-navigation__responsive-container-close {
	color: inherit;
}

.pi-site-header--transparent .wp-block-navigation__responsive-container-open {
	color: #ffffff;
}

/* Mobile overlay: match the original Next.js mobile menu styling
 * (accent blue background, white text, bordered items). The high
 * specificity is intentional — WordPress core sets its own background
 * on the overlay container and we need to win that cascade. */
.pi-site-header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--wp--preset--color--accent) !important;
	padding: 20px;
}

/* Close (X) button inside the overlay */
.pi-site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation__responsive-container-close {
	color: #ffffff;
}

/* Navigation links: full-width, centred, bordered — mirrors the
 * .showMobileMenu .menu a/button rules from the Next.js SCSS. */
.pi-site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content {
	color: #ffffff !important;
	font-size: 1.25rem;
	padding: 0.5rem 1rem;
	display: block;
	width: 100%;
	text-align: center;
	border: 1px solid var(--wp--preset--color--primary);
}

.pi-site-header .wp-block-navigation__responsive-container.is-menu-open
	.wp-block-navigation-item__content:active {
	background-color: var(--wp--preset--color--tertiary);
}

/* =========================================================
 * 2.6  Header navigation — classic WP-menu driven
 * =========================================================
 * Output comes from patterns/header-nav.php → wp_nav_menu()
 * → PiMainNavWalker, which renders our own .pi-main-nav
 * BEM-style markup. Decoupled from core's wp:navigation block
 * so it stays stable across WordPress upgrades. Visually
 * matches the old wp-block-navigation styling (same colours,
 * spacing, hover states, dropdown look). */

.pi-main-nav {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
}

.pi-main-nav__panel {
	display: flex;
	align-items: center;
}

/* Hamburger toggle (hidden on desktop, shown ≤1024px) */
.pi-main-nav__hamburger {
	display: none;
	background: transparent;
	border: 0;
	padding: 0.5rem;
	cursor: pointer;
	color: inherit;
	line-height: 0;
}

.pi-main-nav__hamburger-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: currentColor;
	margin: 5px auto;
	border-radius: 2px;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.screen-reader-text {
	position: absolute !important;
	clip: rect(1px, 1px, 1px, 1px);
	height: 1px;
	width: 1px;
	overflow: hidden;
	white-space: nowrap;
}

/* Top-level list */
.pi-main-nav__list {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	gap: var(--wp--preset--spacing--30);
	list-style: none;
	margin: 0;
	padding: 0;
}

.pi-main-nav__item {
	position: relative;
	margin: 0;
	display: flex;
	align-items: center;
}

/* Top-level link */
.pi-main-nav__link {
	display: inline-block;
	padding: 0.5rem 0.75rem;
	font-weight: 500;
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	transition: color 0.15s ease;
	white-space: nowrap;
}

.pi-site-header:not(.pi-site-header--transparent) .pi-main-nav__link {
	color: var(--wp--preset--color--primary);
}

.pi-main-nav__item:hover > .pi-main-nav__link,
.pi-main-nav__item:focus-within > .pi-main-nav__link,
.pi-main-nav__item--current > .pi-main-nav__link {
	color: var(--wp--preset--color--accent);
}

/* Caret (also a button so keyboard users can open submenus) */
.pi-main-nav__caret {
	background: transparent;
	border: 0;
	padding: 0.25rem;
	margin-left: -0.25rem;
	font-size: 0.75rem;
	cursor: pointer;
	color: inherit;
	line-height: 1;
	display: inline-flex;
	align-items: center;
}

/* Submenu dropdown panel */
.pi-main-nav__submenu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #ffffff;
	border: 1px solid rgba(15, 25, 65, 0.08);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(15, 25, 65, 0.12);
	padding: 0.5rem 0;
	min-width: 240px;
	z-index: 1000;
	list-style: none;
	margin: 0;
}

.pi-main-nav__item--has-submenu:hover > .pi-main-nav__submenu,
.pi-main-nav__item--has-submenu:focus-within > .pi-main-nav__submenu,
.pi-main-nav__item--has-submenu.is-open > .pi-main-nav__submenu {
	display: block;
}

.pi-main-nav__subitem {
	margin: 0;
}

.pi-main-nav__sublink {
	display: block;
	padding: 0.5rem 1.25rem;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.15s ease, color 0.15s ease;
}

.pi-main-nav__sublink:hover,
.pi-main-nav__sublink:focus,
.pi-main-nav__subitem--current > .pi-main-nav__sublink {
	background: rgba(7, 138, 203, 0.08);
	color: var(--wp--preset--color--accent);
}

/* Transparent variant — used on the homepage hero. White text
 * over the cover image until JS adds .is-scrolled, after which
 * the .pi-site-header--transparent.is-scrolled rules below
 * (in the existing transparent-header section) make the bar
 * solid navy and white text remains correct. */
.pi-site-header--transparent .pi-main-nav__link,
.pi-site-header--transparent .pi-main-nav__caret {
	color: #ffffff;
}

.pi-site-header--transparent .pi-main-nav__item:hover > .pi-main-nav__link,
.pi-site-header--transparent .pi-main-nav__item:focus-within > .pi-main-nav__link,
.pi-site-header--transparent .pi-main-nav__item--current > .pi-main-nav__link {
	color: var(--wp--preset--color--accent);
}

.pi-site-header--transparent .pi-main-nav__hamburger {
	color: #ffffff;
}

/* --- Mobile (≤1024px): full-screen overlay --- */
@media (max-width: 1024px) {
	.pi-main-nav__hamburger {
		display: inline-block;
		position: relative;
		z-index: 100002;
	}

	.pi-main-nav__panel {
		display: none;
		position: fixed;
		inset: 0;
		background: var(--wp--preset--color--accent);
		flex-direction: column;
		align-items: stretch;
		padding: 4rem 1.25rem 1.25rem;
		z-index: 100000;
		overflow-y: auto;
	}

	.pi-main-nav.is-open .pi-main-nav__panel {
		display: flex;
	}

	.pi-main-nav__list {
		flex-direction: column;
		align-items: stretch;
		gap: 0.5rem;
		width: 100%;
	}

	.pi-main-nav__item {
		flex-direction: column;
		align-items: stretch;
		width: 100%;
	}

	.pi-main-nav__link,
	.pi-main-nav__sublink {
		color: #ffffff !important;
		text-align: center;
		font-size: 1.1rem;
		padding: 0.75rem 1rem;
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 4px;
		display: block;
		width: 100%;
	}

	.pi-main-nav__sublink {
		font-size: 0.95rem;
		opacity: 0.9;
		border-color: rgba(255, 255, 255, 0.25);
	}

	.pi-main-nav__caret {
		display: none; /* mobile keeps submenus expanded inline */
	}

	.pi-main-nav__submenu {
		display: block;
		position: static;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0.5rem 0 0 1rem;
		min-width: 0;
	}

	/* Hamburger → close (X) when open */
	.pi-main-nav.is-open .pi-main-nav__hamburger {
		position: fixed;
		top: 1rem;
		right: 1rem;
		color: #ffffff;
	}

	.pi-main-nav.is-open .pi-main-nav__hamburger-bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.pi-main-nav.is-open .pi-main-nav__hamburger-bar:nth-child(2) {
		opacity: 0;
	}

	.pi-main-nav.is-open .pi-main-nav__hamburger-bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}

	/* Prevent body scroll while the overlay is open */
	body:has(.pi-main-nav.is-open) {
		overflow: hidden;
	}
}

/* =========================================================
 * 3. Buttons — extend theme.json defaults
 * ========================================================= */
.wp-block-button__link {
	transition: background-color 0.2s ease, color 0.2s ease, transform 0.15s ease;
	letter-spacing: 0.02em;
}

.wp-block-button__link:hover {
	transform: translateY(-1px);
}

.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
	border: 2px solid currentColor;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12);
	color: var(--wp--preset--color--white);
}

.wp-block-button.is-style-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--accent);
	padding-left: 0;
	padding-right: 0;
}

.wp-block-button.is-style-ghost .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary);
	background: transparent;
	text-decoration: underline;
}

/* =========================================================
 * 4. Cards — used by services-grid, team-grid
 * ========================================================= */
.pi-card {
	background: #ffffff;
	border-radius: 8px;
	padding: 1.5rem;
	box-shadow: 0 2px 8px rgba(15, 25, 65, 0.06);
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	height: 100%;
}

.pi-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 12px 28px rgba(15, 25, 65, 0.14);
}

.pi-card h3 {
	margin-top: 0;
}

.pi-card .pi-card__icon {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 1rem;
	font-size: 1.5rem;
}

.pi-card--service {
	border-left: 4px solid var(--wp--preset--color--accent);
}

.pi-card--team {
	text-align: center;
}

.pi-card--team .pi-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 1rem;
	background: var(--wp--preset--color--light);
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	color: var(--wp--preset--color--primary);
	font-weight: 700;
	font-size: 2rem;
}

.pi-card--team .pi-avatar svg,
.pi-card--team .pi-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.pi-card--team .pi-team-role {
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	margin: 0.25rem 0 0.5rem;
}

.pi-card--team .pi-team-links {
	display: flex;
	gap: 0.75rem;
	justify-content: center;
	margin-top: 1rem;
}

.pi-card--team .pi-team-links a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	padding: 0.4rem;
	border-radius: 6px;
	transition: background 0.15s ease;
}

.pi-card--team .pi-team-links a:hover {
	background: var(--wp--preset--color--light);
}

/* =========================================================
 * 5. References — CSS-only horizontal scroll carousel
 *
 * Uses scroll-snap so swiping on mobile / clicking arrows jumps
 * between full quotes. No JavaScript required.
 * ========================================================= */
.pi-references {
	position: relative;
}

.pi-references__track {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	padding: 1.5rem 0.5rem;
	margin: 0 -0.5rem;
	-webkit-overflow-scrolling: touch;
}

.pi-references__track::-webkit-scrollbar {
	height: 6px;
}

.pi-references__track::-webkit-scrollbar-track {
	background: transparent;
}

.pi-references__track::-webkit-scrollbar-thumb {
	background: rgba(15, 25, 65, 0.15);
	border-radius: 3px;
}

.pi-reference {
	flex: 0 0 min(600px, 85vw);
	scroll-snap-align: center;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	border-radius: 12px;
	padding: 2rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	box-shadow: 0 8px 20px rgba(7, 138, 203, 0.2);
}

.pi-reference__quote {
	font-size: 1.125rem;
	line-height: 1.5;
	margin: 0 0 1.5rem;
	font-style: italic;
}

.pi-reference__quote::before {
	content: '\201C';
	font-size: 3rem;
	line-height: 0;
	vertical-align: -0.4em;
	margin-right: 0.2rem;
	opacity: 0.6;
}

.pi-reference__person {
	font-weight: 700;
	margin: 0;
}

.pi-reference__company {
	opacity: 0.85;
	margin: 0;
	font-size: 0.9rem;
}

/* =========================================================
 * 6. Client logos — auto-scroll carousel
 *
 * Plain CSS implementation with `@keyframes`. The pattern PHP
 * renders the logo list twice; the animation translates the track
 * by exactly -50% (= one full list), at which point it jumps back
 * to 0 — the user sees a seamless infinite loop because the second
 * half is visually identical to the first.
 *
 * Duration is set per-site via the `--pi-clients-duration` custom
 * property on the container (4s per logo, min 30s).
 *
 * Pauses on hover so the user can read a specific logo.
 * Respects `prefers-reduced-motion` — animation disabled, logos
 * fall back to a static grid.
 * ========================================================= */
.pi-clients-carousel {
	position: relative;
	overflow: hidden;
	margin: 0 -1rem;
	/* Fade out the edges so logos don't appear to "pop" at the boundaries */
	mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5%,
		#000 95%,
		transparent 100%
	);
	-webkit-mask-image: linear-gradient(
		to right,
		transparent 0,
		#000 5%,
		#000 95%,
		transparent 100%
	);
}

.pi-clients-carousel__track {
	display: flex;
	gap: 1.5rem;
	width: max-content;
	padding: 1rem 0;
	animation: pi-clients-scroll var(--pi-clients-duration, 60s) linear infinite;
}

.pi-clients-carousel:hover .pi-clients-carousel__track {
	animation-play-state: paused;
}

@keyframes pi-clients-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
	.pi-clients-carousel {
		overflow-x: auto;
		mask-image: none;
		-webkit-mask-image: none;
	}
	.pi-clients-carousel__track {
		animation: none;
	}
}

.pi-client {
	flex: 0 0 auto;
	width: 160px;
	height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1rem;
	color: var(--wp--preset--color--primary);
	font-weight: 600;
	font-size: 0.85rem;
	text-align: center;
	line-height: 1.2;
}

.pi-client img,
.pi-client svg {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Hero-leesbaarheid — een subtiele donkere vignette aan de randen om
 * witte tekst beter af te zetten tegen drukke achtergrondfoto's,
 * bovenop de bestaande dim-overlay van het cover-blok. */
.pi-hero-readable .wp-block-cover__inner-container {
	position: relative;
	z-index: 2;
}

.pi-hero-readable::after {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 35%, rgba(0, 0, 0, 0.35) 100%),
		linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, rgba(0, 0, 0, 0.35) 100%);
	pointer-events: none;
	z-index: 1;
}

/* =========================================================
 * 7. Section helpers (ports of .jumbo / .action-bg / bg classes)
 * ========================================================= */
.pi-section {
	padding: clamp(3rem, 6vw, 5rem) 0;
}

.pi-section--tight {
	padding: clamp(2rem, 4vw, 3rem) 0;
}

.pi-section--primary {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

.pi-section--primary h1,
.pi-section--primary h2,
.pi-section--primary h3,
.pi-section--primary h4 {
	color: #ffffff;
}

.pi-section--accent {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
}

.pi-section--accent h1,
.pi-section--accent h2,
.pi-section--accent h3,
.pi-section--accent h4 {
	color: #ffffff;
}

.pi-section--light {
	background: var(--wp--preset--color--light);
}

.pi-section--aliceblue {
	background: aliceblue;
}

/* =========================================================
 * 8. Vacancy archive + single page
 * ========================================================= */
.pi-vacancy-card {
	position: relative;
	padding: 1.5rem;
	border-radius: 8px;
	border: 1px solid rgba(15, 25, 65, 0.08);
	background: #ffffff;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
	cursor: pointer;
}

.pi-vacancy-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 6px 16px rgba(15, 25, 65, 0.1);
}

.pi-vacancy-card__title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 0.5rem;
}

.pi-vacancy-card__title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

/* Stretch the title link over the entire card so the whole card is
 * clickable — "stretched link" pattern, no nested <a> tags needed. */
.pi-vacancy-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}

.pi-vacancy-card__title a:hover {
	color: var(--wp--preset--color--accent);
}

.pi-vacancy-card__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	color: var(--wp--preset--color--gray);
	font-size: 0.9rem;
	margin: 0.5rem 0;
}

.pi-vacancy-card__meta span::before {
	content: '';
	display: inline-block;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: currentColor;
	margin-right: 0.4rem;
	vertical-align: middle;
}

.pi-vacancy-card__meta span:first-child::before {
	display: none;
}

/* Vacancy filter form (archive page) — sticky onder de header */
.pi-vac-filter {
	background: #ffffff;
	border: 1px solid rgba(15, 25, 65, 0.08);
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 2rem;
	box-shadow: 0 2px 10px rgba(15, 25, 65, 0.04);

	/* Sticky: blijft zichtbaar terwijl je door de vacatures scrollt.
	   De offset is `header-hoogte + 1rem` zodat de filter netjes
	   onder de sticky site-header plakt en niet eroverheen schuift. */
	position: sticky;
	top: calc(var(--pi-header-height) + 1rem);
	z-index: 50;
	transition: box-shadow 0.2s ease;
}

/* Wanneer de filter sticky-plakkend is tegen de top, krijgt hij een
   iets zwaardere schaduw om visueel te scheiden van de content
   eronder. We hebben geen JS dus dit werkt alleen via :hover als
   visuele hint. */
.pi-vac-filter:hover {
	box-shadow: 0 4px 16px rgba(15, 25, 65, 0.08);
}

/* Op mobiel stickiness uitschakelen — met een staande telefoon neemt
   de filter te veel schermruimte. Hij scrollt gewoon mee. */
@media (max-width: 640px) {
	.pi-vac-filter {
		position: static;
		top: auto;
	}
}

.pi-vac-filter__row {
	display: grid;
	grid-template-columns: 2fr 1.5fr 1.5fr auto auto;
	gap: 0.75rem;
	align-items: end;
}

@media (max-width: 900px) {
	.pi-vac-filter__row {
		grid-template-columns: 1fr 1fr;
	}
	.pi-vac-filter__submit {
		grid-column: 1 / -1;
	}
}

@media (max-width: 560px) {
	.pi-vac-filter__row {
		grid-template-columns: 1fr;
	}
}

.pi-vac-filter__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.pi-vac-filter__label {
	font-weight: 600;
	font-size: 0.85rem;
	color: var(--wp--preset--color--primary);
}

.pi-vac-filter__field input,
.pi-vac-filter__field select {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid rgba(15, 25, 65, 0.15);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	background: #ffffff;
	box-sizing: border-box;
}

.pi-vac-filter__field input:focus,
.pi-vac-filter__field select:focus {
	outline: 0;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(7, 138, 203, 0.15);
}

.pi-vac-filter__submit {
	padding: 0.75rem 1.5rem;
	cursor: pointer;
	font-size: 1rem;
	white-space: nowrap;
}

.pi-vac-filter__reset {
	align-self: center;
	color: var(--wp--preset--color--gray);
	text-decoration: underline;
	font-size: 0.9rem;
	padding: 0 0.5rem;
}

.pi-vac-filter__reset:hover {
	color: var(--wp--preset--color--primary);
}

.pi-vac-results__summary {
	color: var(--wp--preset--color--gray);
	margin: 0 0 1.5rem;
	font-size: 0.95rem;
}

.pi-vac-results__summary strong {
	color: var(--wp--preset--color--primary);
}

.pi-vac-results .pi-vacancy-card {
	margin-bottom: 1rem;
	position: relative;
}

.pi-vacancy-card__badge {
	position: absolute;
	top: 1rem;
	right: 1rem;
	font-size: 0.75rem;
	padding: 0.15rem 0.6rem;
}

.pi-vacancy-card__excerpt {
	color: var(--wp--preset--color--gray);
	margin: 0.75rem 0 1rem;
	line-height: 1.55;
}

.pi-vacancy-card__cta {
	position: relative;
	z-index: 2;
	display: inline-block;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.pi-vacancy-card__cta:hover {
	color: var(--wp--preset--color--primary);
}

.pi-vacancy-card__sector {
	background: var(--wp--preset--color--light);
	padding: 0.15rem 0.6rem;
	border-radius: 999px;
	font-size: 0.8rem;
	color: var(--wp--preset--color--primary);
}

.pi-vac-pagination {
	display: flex;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 2rem;
}

.pi-vac-pagination .page-numbers {
	padding: 0.5rem 0.9rem;
	border-radius: 6px;
	border: 1px solid rgba(15, 25, 65, 0.1);
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	transition: all 0.15s ease;
}

.pi-vac-pagination .page-numbers:hover {
	background: var(--wp--preset--color--light);
}

.pi-vac-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	border-color: var(--wp--preset--color--accent);
}

/* Breadcrumbs (single vacancy + pages) */
.pi-breadcrumbs {
	margin: 0 0 1.25rem;
	font-size: 0.875rem;
	color: var(--wp--preset--color--gray);
}

.pi-breadcrumbs__list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.pi-breadcrumbs__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.pi-breadcrumbs__item a {
	color: var(--wp--preset--color--gray);
	text-decoration: none;
	transition: color 0.15s ease;
}

.pi-breadcrumbs__item a:hover {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
}

.pi-breadcrumbs__item [aria-current="page"] {
	color: var(--wp--preset--color--primary);
	font-weight: 600;
}

.pi-breadcrumbs__sep {
	color: rgba(15, 25, 65, 0.35);
	user-select: none;
}

/* Single vacancy meta-bar (city, employer, hours, salary) */
.pi-vacancy-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem 1.5rem;
	align-items: center;
	padding: 1rem 1.25rem;
	background: var(--wp--preset--color--light);
	border-radius: 8px;
	font-size: 0.95rem;
	margin: 0 0 1.5rem;
}

.pi-vacancy-meta__badge {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	background: var(--wp--preset--color--gold);
	color: #ffffff;
	padding: 0.25rem 0.75rem;
	border-radius: 999px;
	font-size: 0.85rem;
	font-weight: 600;
}

.pi-vacancy-meta__item {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	color: var(--wp--preset--color--primary);
}

.pi-vacancy-meta__item--employer strong {
	font-size: 1.05rem;
	color: var(--wp--preset--color--primary);
}

/* Single vacancy contact box */
.pi-vacancy-contact {
	margin: 2rem 0;
	padding: 1.5rem 1.75rem;
	background: var(--wp--preset--color--light);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: 8px;
}

.pi-vacancy-contact__title {
	margin: 0 0 1rem;
	font-size: 1.1rem;
	color: var(--wp--preset--color--primary);
}

.pi-vacancy-contact__body {
	display: flex;
	gap: 1.25rem;
	align-items: center;
}

.pi-vacancy-contact__avatar {
	flex: 0 0 auto;
	width: 64px;
	height: 64px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: #ffffff;
	font-weight: 700;
	font-size: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.pi-vacancy-contact__text {
	flex: 1;
}

.pi-vacancy-contact__name {
	margin: 0 0 0.4rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
}

.pi-vacancy-contact__links {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 1rem;
}

.pi-vacancy-contact__links a {
	color: var(--wp--preset--color--accent);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
}

.pi-vacancy-contact__links a:hover {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
}

.pi-vacancy-contact__icon {
	width: 1em;
	height: 1em;
	flex: 0 0 auto;
	fill: currentColor;
}

@media (max-width: 520px) {
	.pi-vacancy-contact__body {
		flex-direction: column;
		text-align: center;
	}
}

/* Expired banner on single vacancy */
.pi-expired-notice {
	background: #fff4e5;
	border: 1px solid #ffd580;
	color: #8a5700;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	margin-bottom: 1.5rem;
	font-weight: 500;
}

/* =========================================================
 * 8b. Vacancy single — body copy rhythm
 *
 * Helloflex levert vacatureteksten als platte HTML: alle
 * sectiekoppen zijn `<p><strong>…</strong></p>` (geen echte
 * h2/h3) en lijsten staan in dezelfde 16px-rhythm als gewone
 * paragrafen. Resultaat: alles plakt visueel aan elkaar.
 *
 * Hieronder: betere line-height, ruimere gaps, en een
 * `:has()`-truc om strong-only paragrafen als section headings
 * te laten lezen (extra top-margin, kleinere bottom-margin,
 * iets groter, primary kleur).
 * ========================================================= */
.single-pi_vacancy .wp-block-post-content {
	font-size: 1rem;
	line-height: 1.65;
}

.single-pi_vacancy .wp-block-post-content > * > :first-child {
	margin-top: 0;
}

.single-pi_vacancy .wp-block-post-content p {
	margin: 0 0 1em;
}

.single-pi_vacancy .wp-block-post-content ul,
.single-pi_vacancy .wp-block-post-content ol {
	margin: 0 0 1.25em;
	padding-left: 1.5rem;
}

.single-pi_vacancy .wp-block-post-content li {
	margin-bottom: 0.35em;
}

.single-pi_vacancy .wp-block-post-content li:last-child {
	margin-bottom: 0;
}

/* Section headings — paragrafen die enkel uit een <strong> bestaan
 * (Helloflex's manier om "Wij bieden:", "Jouw uitdaging:" etc te
 * markeren). */
.single-pi_vacancy .wp-block-post-content p:has(> strong:only-child) {
	margin-top: 2em;
	margin-bottom: 0.5em;
	font-size: 1.15rem;
	color: var(--wp--preset--color--primary);
}

.single-pi_vacancy .wp-block-post-content p:has(> strong:only-child) strong {
	font-weight: 700;
}

/* Hide truly empty paragraphs Helloflex sometimes injects between
 * sections — they create unpredictable gaps. */
.single-pi_vacancy .wp-block-post-content p:empty {
	display: none;
}

/* =========================================================
 * 9. Footer polish
 * ========================================================= */

/* Stable column widths — de footer rendert kolommen via raw HTML
 * (<!-- wp:html -->) ipv een echt <!-- wp:columns -->-blok. WP genereert
 * de regel `.wp-block-column { flex: 1 1 0 }` alleen als er ergens op
 * de pagina een echt columns-blok staat; op pagina's zonder zo'n blok
 * (zoals single vacatures) verviel de regel en klapten de kolommen
 * in tot content-breedte. Daarom zetten we hem hier expliciet. */
.pi-site-footer .wp-block-columns {
	align-items: flex-start;
}

.pi-site-footer .wp-block-column {
	flex: 1 1 0;
	min-width: 0;
}

.pi-site-footer .wp-block-column:first-child {
	flex: 0 1 30%;
}

.pi-site-footer a {
	color: #ffffff;
	text-decoration: none;
	transition: opacity 0.15s ease;
}

.pi-site-footer a:hover {
	opacity: 0.85;
	text-decoration: underline;
}

.pi-site-footer h4 {
	margin-bottom: 0.75rem;
}

/* =========================================================
 * 10. Responsive tweaks
 * ========================================================= */
@media (max-width: 781px) {
	.pi-section {
		padding: clamp(2rem, 8vw, 3rem) 0;
	}

	.pi-reference {
		padding: 1.5rem;
	}

	.pi-reference__quote {
		font-size: 1rem;
	}

	.pi-clients {
		grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
		gap: 1rem;
	}
}

/* =========================================================
 * 11. Forms (contact + application)
 * ========================================================= */
.pi-form {
	max-width: 680px;
	margin: 0 auto;
	padding: 2rem;
	background: #ffffff;
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(15, 25, 65, 0.06);
}

/* Contact pagina: het formulier zit al in een .pi-contact-card met
 * eigen border + shadow — strip de eigen kaart-styling van .pi-form
 * zodat hij vol-breedte in z'n parent past zonder dubbele kaders. */
.pi-contact-card--form .pi-form {
	max-width: none;
	margin: 0;
	padding: 0;
	background: transparent;
	border-radius: 0;
	box-shadow: none;
}

.pi-form__heading {
	margin: 0 0 1.5rem;
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
}

.pi-form__fields {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.pi-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 1rem;
}

.pi-form__grid .pi-form__row:nth-child(2) {
	grid-column: span 1;
}

@media (max-width: 640px) {
	.pi-form__grid {
		grid-template-columns: 1fr;
	}
}

.pi-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
}

.pi-form__row--checkbox {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.5rem;
}

.pi-form__row--checkbox label {
	cursor: pointer;
	font-size: 0.9rem;
	line-height: 1.5;
}

.pi-form__label {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--wp--preset--color--primary);
}

.pi-form__input,
.pi-form__textarea {
	width: 100%;
	padding: 0.7rem 0.9rem;
	border: 1px solid rgba(15, 25, 65, 0.15);
	border-radius: 6px;
	font-family: inherit;
	font-size: 1rem;
	background: #ffffff;
	color: var(--wp--preset--color--dark);
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	box-sizing: border-box;
}

.pi-form__input:focus,
.pi-form__textarea:focus {
	outline: 0;
	border-color: var(--wp--preset--color--accent);
	box-shadow: 0 0 0 3px rgba(7, 138, 203, 0.15);
}

.pi-form__input[type="file"] {
	padding: 0.5rem;
	background: var(--wp--preset--color--light);
	cursor: pointer;
}

.pi-form__textarea {
	resize: vertical;
	min-height: 120px;
}

.pi-form__actions {
	margin-top: 0.5rem;
}

.pi-form__submit {
	width: auto;
	min-width: 200px;
	cursor: pointer;
	font-size: 1rem;
}

.pi-form__submit:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.pi-form__status {
	padding: 0.85rem 1rem;
	border-radius: 6px;
	font-size: 0.95rem;
	line-height: 1.5;
}

.pi-form__status--info {
	background: #e7f5ff;
	color: #0b5ed7;
	border: 1px solid #90caff;
}

.pi-form__status--success {
	background: #e6f9ef;
	color: #0b7a3e;
	border: 1px solid #8de2b5;
}

.pi-form__status--error {
	background: #fff0f0;
	color: #a42020;
	border: 1px solid #f3b7b7;
}

.pi-form__warning {
	margin-top: 1rem;
	padding: 0.75rem 1rem;
	background: #fff8e1;
	border-left: 3px solid #f0b840;
	color: #7a5900;
	font-size: 0.9rem;
}

.pi-form__recaptcha-notice {
	margin-top: 1rem;
	font-size: 0.8rem;
	color: var(--wp--preset--color--gray);
	line-height: 1.5;
}

.pi-form__recaptcha-notice a {
	color: var(--wp--preset--color--accent);
}

/* =========================================================
 * 12. Print stylesheet
 *
 * When a visitor prints a vacancy (Ctrl+P / Cmd+P), strip all
 * interactive UI and show only the content that matters on paper:
 * titel, meta-bar, body, contact, contactpersoon.
 * ========================================================= */
@media print {
	/* Reset global styling */
	body {
		background: #ffffff !important;
		color: #000 !important;
		font-size: 11pt;
		line-height: 1.4;
	}

	/* Hide everything that is not content */
	header.wp-block-template-part,
	footer.wp-block-template-part,
	.pi-site-header,
	.pi-site-footer,
	.pi-review-banner,
	.pi-application-form,
	.pi-contact-form,
	.pi-vac-filter,
	.pi-vac-pagination,
	.pi-breadcrumbs,
	.wp-block-navigation,
	.wp-block-buttons,
	.skip-link,
	.cmplz-cookiebanner,
	#cmplz-cookiebanner-container,
	.complianz-cookiebanner,
	.pi-form__submit,
	.grecaptcha-badge {
		display: none !important;
	}

	/* Main area takes full width, no padding */
	main, .wp-block-group, .wp-site-blocks {
		background: none !important;
		padding: 0 !important;
		margin: 0 !important;
		box-shadow: none !important;
	}

	/* Cover blocks — print the title but drop the image + overlay */
	.wp-block-cover {
		background: none !important;
		min-height: 0 !important;
		padding: 0 !important;
	}
	.wp-block-cover__background,
	.wp-block-cover__image-background {
		display: none !important;
	}
	.wp-block-cover .wp-block-heading,
	.wp-block-cover p {
		color: #000 !important;
		text-shadow: none !important;
	}

	/* Headings */
	h1, h2, h3, h4 {
		color: #000 !important;
		page-break-after: avoid;
	}
	h1 { font-size: 20pt; }
	h2 { font-size: 16pt; }
	h3 { font-size: 13pt; }
	h4 { font-size: 11pt; }

	/* Meta bar — compact, no colored backgrounds */
	.pi-vacancy-meta {
		background: none !important;
		padding: 0.25rem 0 !important;
		border-top: 0.5pt solid #888 !important;
		border-bottom: 0.5pt solid #888 !important;
		border-radius: 0 !important;
		margin: 0.5rem 0 1rem !important;
		font-size: 10pt;
	}
	.pi-vacancy-meta__badge {
		background: none !important;
		color: #000 !important;
		padding: 0 !important;
	}

	/* Contact box — show but without colored background */
	.pi-vacancy-contact {
		background: none !important;
		border: 0.5pt solid #888 !important;
		border-left-width: 0.5pt !important;
		padding: 0.5rem 0.75rem !important;
		margin: 1rem 0 !important;
	}
	.pi-vacancy-contact__avatar {
		background: #eee !important;
		color: #000 !important;
	}

	/* Links — keep legible, show URL after link text */
	a {
		color: #000 !important;
		text-decoration: underline;
	}
	a[href^="http"]:after {
		content: " (" attr(href) ")";
		font-size: 9pt;
		color: #666;
		word-break: break-all;
	}
	/* But not on image/button/internal links */
	a:not([href^="http"]):after,
	a[href^="mailto:"]:after,
	a[href^="tel:"]:after,
	.wp-block-button a:after {
		content: "";
	}

	/* Content lists */
	ul, ol {
		page-break-inside: avoid;
	}
	li {
		page-break-inside: avoid;
	}

	/* Add page header with the site name */
	@page {
		margin: 2cm;
	}

	/* Add a small footer with date printed */
	body::after {
		content: "Geprint vanaf pro-intermediair.nl op " attr(data-print-date);
		display: block;
		margin-top: 2rem;
		padding-top: 0.5rem;
		border-top: 0.25pt solid #888;
		font-size: 9pt;
		color: #666;
	}
}

/* =========================================================
 * 13. Prefers-reduced-motion
 * ========================================================= */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
	}

	.pi-references__track {
		scroll-behavior: auto;
	}

	.pi-hero-links__scroller svg {
		animation: none !important;
	}
}

/* =========================================================
 * 14. Homepage (Next.js parity)
 *
 * Replicates the hand-written Next.js homepage layout from
 * src/app/page.module.scss + src/app/globals.css. Scoped to
 * the .pi-* classes used by the four home-* patterns so the
 * rest of the theme is untouched.
 * ========================================================= */

/* --- 14.1 Hero (100vh, 2x2 link grid) ---
 * Matches src/app/page.module.scss lines 1–95. The grid is absolute-
 * positioned at bottom: 20% to reproduce the Next.js `.content`
 * anchor — flex-based centering put the buttons too high. */
.pi-hero-links {
	min-height: 600px; /* floor; wp:cover inline min-height:100vh wins on taller viewports */
}

.pi-hero-links .wp-block-cover__inner-container {
	position: relative;
	width: 100%;
	/* align-self: stretch overrides the cover block's default
	 * align-items: center so this container fills the entire cover
	 * height (813px at 1440x813 viewport). Without this the
	 * container collapses to height 0 and the `bottom: 20%` on the
	 * absolute grid below resolves against 0 instead of the cover. */
	align-self: stretch;
	padding: 0;
	margin: 0;
}

.pi-hero-links__grid {
	position: absolute;
	bottom: 20%;
	left: 50%;
	transform: translateX(-50%);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: 40px 70px;
	width: calc(100% - 40px);
	max-width: 1000px;
}

.pi-hero-links__btn {
	padding: 14px 38px;
	display: flex;
	justify-content: center;
	font-size: 24px;
	text-decoration: none;
	text-transform: uppercase;
	text-align: center;
	color: var(--wp--preset--color--dark);
	background: var(--wp--preset--color--white);
	border-radius: 0;
	transition: all 0.15s ease;
	cursor: pointer;
}

.pi-hero-links__btn:hover {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.pi-hero-links__btn--see-more {
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--primary);
}

.pi-hero-links__btn--see-more:hover {
	background: var(--wp--preset--color--secondary);
}

.pi-hero-links__scroller {
	position: absolute;
	bottom: 8px;
	left: 50%;
	transform: translateX(-50%);
	background: transparent;
	line-height: 0;
}

.pi-hero-links__scroller svg {
	animation: pi-hero-scroller 2s infinite;
}

.pi-hero-links__scroller:hover svg path {
	fill: var(--wp--preset--color--gold);
}

@keyframes pi-hero-scroller {
	0%, 40% { transform: translateY(0); }
	20% { transform: translateY(8px); }
}

@media (max-width: 1000px) {
	.pi-hero-links__btn {
		font-size: 1.2rem;
	}

	.pi-hero-links__grid {
		gap: 14px;
	}
}

@media (max-width: 500px) {
	.pi-hero-links__grid {
		grid-template-columns: 1fr;
		grid-template-rows: auto;
	}
}

/* --- 14.2 Narrative columns (Wie/Bieden + Waarom/Image) --- */
.pi-narrative,
.pi-why {
	margin: 0 !important;
	gap: 0 !important;
	flex-wrap: nowrap !important;
}

.pi-narrative__col,
.pi-why__col {
	box-sizing: border-box !important;
	padding: 100px !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
}

.pi-narrative__col h3,
.pi-why__col h3 {
	font-size: 2rem;
	margin-bottom: 1rem;
}

.pi-narrative__col--white {
	background: var(--wp--preset--color--white);
}

.pi-narrative__col--navy {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

.pi-narrative__col--navy h3 {
	color: var(--wp--preset--color--white);
}

/* Extra kleur-varianten voor het two-col-text block. Origineel had
 * alleen white + navy maar redactie kan nu kiezen uit green / accent
 * / mint voor de "Werving + Uitzenden" tweedeling op /diensten,
 * /kandidaten en /opdrachtgevers.
 *
 * NB: "green" hier is het zachte mint #d4e7e2 dat de Next.js-versie
 * gebruikte voor `.green-bg` — niet de vibrant Bootstrap-green
 * (#198754) uit het theme.json palette. Klant herkende de vibrant
 * kleur niet als "groen zoals het was" (7 mei 2026). */
.pi-narrative__col--green {
	background: #d4e7e2;
	color: var(--wp--preset--color--primary);
}

.pi-narrative__col--green h3,
.pi-narrative__col--green .pi-narrative__arrow-link a {
	color: var(--wp--preset--color--primary);
}

.pi-narrative__col--accent {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
}

.pi-narrative__col--accent h3,
.pi-narrative__col--accent .pi-narrative__arrow-link a {
	color: var(--wp--preset--color--white);
}

.pi-narrative__col--mint {
	background: #d4e7e2;
	color: var(--wp--preset--color--primary);
}

.pi-narrative__col--mint h3 {
	color: var(--wp--preset--color--primary);
}

.pi-why__col--mint {
	background: #d4e7e2;
	color: var(--wp--preset--color--primary);
}

.pi-why__col--mint h3 {
	color: var(--wp--preset--color--primary);
}

.pi-why__col--image {
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 400px;
	padding: 0 !important;
}

.pi-narrative__arrow-link a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.pi-narrative__col--navy .pi-narrative__arrow-link a {
	color: var(--wp--preset--color--white);
}

.pi-narrative__arrow-link a:hover {
	text-decoration: underline;
}

@media (max-width: 1000px) {
	.pi-narrative,
	.pi-why {
		flex-wrap: wrap !important;
	}

	.pi-narrative__col,
	.pi-why__col {
		padding: 20px !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.pi-why__col--image {
		min-height: 250px;
	}
}

/* --- 14.3 Page columns — shared two-column layout used on subpages
 * (diensten, kandidaten, opdrachtgevers, over). Mirrors the Next.js
 * .columns / .column / .image-bg / .green-bg utility classes.
 *
 * Kolommen splitsen netjes 50/50 net als de homepage-narrative — zonder
 * de expliciete `flex 0 0 50%` zou een lange paragraaf zijn kolom
 * kunnen laten uitzetten en het tekst/foto-paar uit balans trekken. --- */
.pi-page-columns {
	margin: 0 !important;
	gap: 0 !important;
	flex-wrap: nowrap !important;
}

.pi-page-columns__text {
	box-sizing: border-box !important;
	padding: 100px !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
}

.pi-page-columns__text--green {
	background: #d4e7e2;
	color: var(--wp--preset--color--primary);
}

.pi-page-columns__text--accent {
	background: var(--wp--preset--color--accent);
	color: #ffffff;
}

.pi-page-columns__text--blue {
	background: var(--wp--preset--color--primary);
	color: #ffffff;
}

/* Mint achtergrond voor het text-image-row block (gebruikt voor de
 * "Waarom wij doen wat wij doen" sectie op de homepage). Origineel
 * gebruikte de aparte .pi-why__col--mint class; dit is dezelfde kleur
 * binnen het generieke text-image-row block. */
.pi-page-columns__text--mint {
	background: #d4e7e2;
	color: var(--wp--preset--color--primary);
}

.pi-page-columns__image {
	box-sizing: border-box !important;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	min-height: 400px;
	padding: 0 !important;
	flex: 0 0 50% !important;
	max-width: 50% !important;
}

@media (max-width: 1000px) {
	.pi-page-columns {
		flex-wrap: wrap !important;
	}

	.pi-page-columns__text {
		padding: 20px !important;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.pi-page-columns__image {
		min-height: 250px;
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}
}

/* Op smalle schermen tekst boven foto tonen — port van Next.js
 * .reverse-on-mobile op de Opleidingen-rij. */
@media (max-width: 750px) {
	.pi-page-columns--reverse-on-mobile {
		flex-direction: column-reverse !important;
	}
}

/* --- Steps (Hoe wij werken) — walkthrough met genummerde badge,
 * icoon, titel en beschrijving in een verticale stack. Op desktop
 * verbindt een dunne lijn de badges horizontaal zodat de 4 (of 3)
 * stappen visueel samenhangen als een journey. --- */
.pi-steps {
	display: grid;
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 1.5rem;
	position: relative;
	align-items: start;
}

.pi-steps--4 {
	grid-template-columns: repeat(4, 1fr);
}

.pi-steps--3 {
	grid-template-columns: repeat(3, 1fr);
}

/* Verbindingslijn tussen badges — loopt over volle breedte achter de
 * stappen langs. De badges staan absoluut bovenop de kaart en zitten
 * met hun centerlijn precies op de connector. De lijn zelf heeft
 * `z-index: 0` zodat de kaarten (z-index 1) er overheen liggen — dat
 * is het bedoelde gedrag: de lijn is alleen zichtbaar in de gaps
 * tussen de kaarten. Dichter, meer opacity, en een dashed-lijn
 * voor visuele pop in die smalle gap-regio's. */
.pi-steps::before {
	content: '';
	position: absolute;
	top: 24px; /* helft van badge-hoogte (48px) */
	left: 12.5%;
	right: 12.5%;
	height: 0;
	border-top: 2px dashed var(--wp--preset--color--accent);
	opacity: 0.7;
	z-index: 0;
}

.pi-steps--3::before {
	left: 16.66%;
	right: 16.66%;
}

.pi-step {
	position: relative;
	z-index: 1;
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	padding: 3.75rem 1.25rem 1.5rem; /* extra top voor de badge */
	box-shadow: 0 2px 10px rgba(15, 25, 65, 0.06);
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	margin-top: 24px; /* badge poke-out: badge zit boven de kaart, met centerlijn op de connector */
}

.pi-step__num {
	position: absolute;
	top: -24px;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.25rem;
	font-weight: 700;
	box-shadow: 0 4px 12px rgba(7, 138, 203, 0.3);
	border: 4px solid var(--wp--preset--color--white);
	box-sizing: content-box;
	z-index: 2;
}

.pi-step__icon {
	width: 64px;
	height: 64px;
	object-fit: contain;
	margin: 0 0 1rem 0;
}

.pi-step__title {
	margin: 0 0 0.75rem 0;
	font-size: 1.1rem;
	color: var(--wp--preset--color--primary);
}

.pi-step__body {
	margin: 0;
	font-size: 0.92rem;
	line-height: 1.55;
	color: var(--wp--preset--color--dark);
}

@media (max-width: 1000px) {
	.pi-steps,
	.pi-steps--3,
	.pi-steps--4 {
		grid-template-columns: 1fr;
		gap: 2rem;
	}
	.pi-steps::before {
		display: none; /* verticale connector niet nodig — kaarten staan al onder elkaar */
	}
}

/* --- Sector-cards (Vakgebieden) — port van Next.js .cardBlocks /
 * .cardBlock. Drie kaarten naast elkaar met foto bovenin en lijst
 * eronder. --- */
.pi-sectors {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(1rem, 2vw, 1.5rem);
	margin-top: 1.5rem;
}

@media (max-width: 1000px) {
	.pi-sectors {
		grid-template-columns: 1fr;
	}
}

.pi-sector-card {
	background: rgba(255, 255, 255, 0.5);
	border: 1px solid #ebebeb;
	border-radius: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

.pi-sector-card__image {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

.pi-sector-card__list {
	padding: 1.25rem 1.5rem 1.5rem;
}

.pi-sector-card__list h2 {
	font-size: 1.5rem;
	margin: 0 0 0.5rem 0;
	color: var(--wp--preset--color--primary);
}

.pi-sector-card__list ul {
	margin: 0;
	padding-left: 1.25rem;
}

.pi-sector-card__list li {
	margin-bottom: 0.25rem;
}

/* Check-list — port van Next.js mission-list met PrimeIcon `pi-check`.
 * Een groen vinkje voor elk lijstitem, geschikt voor de Over-pagina. */
.pi-check-list {
	list-style: none !important;
	padding-left: 0 !important;
}

.pi-check-list li {
	position: relative;
	padding-left: 1.75rem;
	margin-bottom: 0.5rem;
}

.pi-check-list li::before {
	content: '\2713'; /* check mark */
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--green);
	font-weight: 700;
	font-size: 1.1em;
}

/* --- Team grid (Over-pagina) — port van Next.js TeamCards (.cards /
 * .card). Flex-wrap layout met gap 40px en min-width 350px per kaart,
 * zodat de cards op een breed scherm naast elkaar staan en bij smal
 * window automatisch wrappen — exact zoals de Next.js-versie. --- */
.pi-team-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 40px;
	margin: 1.5rem auto 0;
	/* Parent is `is-layout-constrained` (1000px max). Breekt eruit zodat
	 * 4 kaarten van 350px + 3 gaps van 40px = 1520px naast elkaar passen
	 * op desktop, net als de Next.js .full-column. */
	max-width: var(--wp--style--global--wide-size, 1200px);
	width: 100%;
}

@media (min-width: 1280px) {
	.pi-team-grid {
		max-width: none !important;
		padding: 0 clamp(1.5rem, 4vw, 100px);
		box-sizing: border-box;
	}
}

.pi-team-card {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	background: var(--wp--preset--color--white);
	box-shadow: 0 2px 8px rgba(15, 25, 65, 0.08);
	flex: 1 1 350px;
	min-width: 350px;
	max-width: 100%;
}

.pi-team-card__photo {
	width: 100%;
	height: 530px;
	overflow: hidden;
}

.pi-team-card__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.pi-team-card__photo--initials {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 5rem;
	font-weight: 700;
}

.pi-team-card__caption {
	padding: 1rem 1.25rem 1.5rem;
}

.pi-team-card__name {
	margin: 0 0 0.25rem 0;
	font-size: 1.5rem;
	color: var(--wp--preset--color--primary);
}

.pi-team-card__role {
	margin: 0;
	color: var(--wp--preset--color--gray);
	font-size: 0.95rem;
}

.pi-team-card__overlay {
	position: absolute;
	inset: 0;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 1.5rem 1.5rem 1.25rem;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 0.75rem;
	opacity: 0;
	transition: opacity 0.3s ease;
	overflow-y: auto;
}

.pi-team-card:hover .pi-team-card__overlay,
.pi-team-card:focus-within .pi-team-card__overlay {
	opacity: 1;
}

.pi-team-card__overlay-name {
	margin: 0 0 0.5rem 0;
	font-size: 1.6rem;
	color: var(--wp--preset--color--white);
}

.pi-team-card__story {
	font-size: 0.92rem;
	line-height: 1.4;
}

.pi-team-card__story p {
	margin: 0 0 0.75rem 0;
}

.pi-team-card__story p:last-child {
	margin-bottom: 0;
}

.pi-team-card__icons {
	display: flex;
	gap: 14px;
	margin-top: 0.5rem;
}

.pi-team-card__icons a {
	color: var(--wp--preset--color--white);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	transition: color 0.2s ease;
}

.pi-team-card__icons a:hover {
	color: var(--wp--preset--color--primary);
}

/* Footer social-list — kleine inline glyph naast elke link. SVG erft de
 * link-kleur via `currentColor` zodat hover-states automatisch meebewegen. */
.pi-social-list li a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

.pi-social-icon {
	flex: 0 0 16px;
	display: inline-block;
}

/* --- Contact-pagina — twee kaarten naast elkaar (formulier + kantoor)
 * met witte achtergrond, zachte schaduw en ruimere padding zodat ze
 * loskomen van de pagina. Adres-block heeft inline iconen voor locatie,
 * telefoon, e-mail en openingstijden. --- */
.pi-contact-grid.wp-block-columns {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-top: 0;
}

.pi-contact-card {
	background: var(--wp--preset--color--white);
	border-radius: 12px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	box-shadow: 0 4px 18px rgba(15, 25, 65, 0.06);
	border: 1px solid rgba(15, 25, 65, 0.05);
	display: flex;
	flex-direction: column;
}

.pi-contact-card h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.4rem, 2vw, 1.75rem);
}

.pi-contact-card p {
	color: var(--wp--preset--color--gray);
	margin: 0 0 1rem;
}

.pi-contact-card--office .pi-contact-details + p,
.pi-contact-card .wp-block-social-links {
	color: var(--wp--preset--color--dark);
}

.pi-contact-fallback {
	margin-top: 1.5rem;
}

.pi-contact-fallback__btn {
	display: inline-block;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 0.75rem 1.5rem;
	border-radius: 4px;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.2s ease;
}

.pi-contact-fallback__btn:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
	text-decoration: none;
}

.pi-contact-fallback__hint {
	margin-top: 0.75rem !important;
	font-size: 0.92rem;
	color: var(--wp--preset--color--gray);
}

.pi-contact-details {
	list-style: none !important;
	margin: 1.25rem 0 0 !important;
	padding: 0 !important;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.pi-contact-details__item {
	display: flex;
	align-items: flex-start;
	gap: 0.85rem;
	color: var(--wp--preset--color--dark);
	line-height: 1.4;
}

.pi-contact-details__item strong {
	display: block;
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.15rem;
}

.pi-contact-details__item a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.2s ease, color 0.2s ease;
}

.pi-contact-details__item a:hover {
	color: var(--wp--preset--color--accent);
	border-bottom-color: currentColor;
}

.pi-contact-details__icon {
	flex: 0 0 38px;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: rgba(7, 138, 203, 0.1);
	color: var(--wp--preset--color--accent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.pi-contact-details__icon svg {
	display: block;
}

@media (max-width: 800px) {
	.pi-contact-grid.wp-block-columns {
		flex-wrap: wrap;
	}
	.pi-contact-card {
		flex-basis: 100%;
	}
}

/* Social-links op de contactpagina — anders dan in de footer hebben
 * de links hier zichtbare labels (platform-naam + handle) zodat de
 * blokken duidelijk leesbaar zijn voor wie de iconen niet herkent. */
.pi-contact-socials {
	margin-top: 1.75rem;
}

.pi-contact-socials__title {
	color: var(--wp--preset--color--primary) !important;
	font-weight: 700;
	margin: 0 0 0.75rem !important;
}

.pi-contact-socials__list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 0.65rem;
}

@media (max-width: 480px) {
	.pi-contact-socials__list {
		grid-template-columns: 1fr;
	}
}

.pi-contact-socials__link {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0.85rem;
	border-radius: 8px;
	background: rgba(7, 138, 203, 0.06);
	color: var(--wp--preset--color--primary) !important;
	text-decoration: none;
	border: 1px solid transparent;
	transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
}

.pi-contact-socials__link:hover {
	background: rgba(7, 138, 203, 0.12);
	border-color: rgba(7, 138, 203, 0.3);
	transform: translateY(-1px);
	text-decoration: none;
}

.pi-contact-socials__icon {
	flex: 0 0 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--wp--preset--color--accent);
}

.pi-contact-socials__label {
	display: flex;
	flex-direction: column;
	line-height: 1.2;
	min-width: 0;
}

.pi-contact-socials__name {
	font-weight: 600;
	font-size: 0.95rem;
}

.pi-contact-socials__handle {
	font-size: 0.8rem;
	color: var(--wp--preset--color--gray);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Tekst-spacing binnen content-blokken. theme.json zet blockGap op 0
 * zodat top-level secties tegen elkaar plakken; dit zet de verticale
 * ruimte tussen alinea's, koppen en knoppen weer terug binnen prose
 * containers — zonder de sectie-naden opnieuw open te trekken. */
.wp-block-group.is-layout-constrained > * + *,
.pi-page-columns__text > * + *,
.pi-narrative__col > * + *,
.pi-why__col:not(.pi-why__col--image) > * + * {
	margin-top: 1em;
}

/* --- 14.4 Director quote (Ronald Ruigrok pull-quote) --- */
.pi-director-quote {
	position: relative;
	color: var(--wp--preset--color--white);
}

.pi-director-quote__inner {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	padding: 60px 20px;
	max-width: 1200px;
	margin: 0 auto;
}

.pi-director-quote__inner::before {
	content: '\201C';
	position: absolute;
	top: 0;
	left: 20px;
	font-size: 11rem;
	line-height: 100px;
	color: var(--wp--preset--color--gold);
	font-family: Arial, Helvetica, sans-serif;
	pointer-events: none;
}

.pi-director-quote__author {
	flex-basis: 80%;
	align-self: flex-start;
	padding-top: 40px; /* push below the giant open-quote glyph */
}

.pi-director-quote__text {
	font-size: 1.25rem;
	line-height: 1.4;
	font-style: italic;
	font-weight: 400;
	color: var(--wp--preset--color--white);
	margin: 0 0 1rem 0;
}

.pi-director-quote__contact-link {
	margin: 0;
}

.pi-director-quote__contact-link a {
	color: var(--wp--preset--color--gold);
	text-decoration: none;
	display: inline-flex;
	gap: 6px;
	align-items: center;
	font-weight: 400;
}

.pi-director-quote__contact-link a:hover {
	color: var(--wp--preset--color--white);
	text-decoration: underline;
}

.pi-director-quote__portrait-wrap {
	flex-basis: 20%;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
}

.pi-director-quote__portrait {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	border: 2px solid var(--wp--preset--color--gold);
	object-fit: cover;
	object-position: center top;
}

.pi-director-quote__meta {
	flex-basis: 100%;
	text-align: right;
	align-self: flex-end;
	margin-top: 20px;
}

.pi-director-quote__rule {
	height: 1px;
	max-width: 300px;
	margin: 0 0 0 auto;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--white);
}

.pi-director-quote__name {
	margin: 8px 0 4px 0;
	color: var(--wp--preset--color--white);
}

.pi-director-quote__sub {
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.5;
	margin-top: 0;
}

.pi-director-quote__phone {
	color: var(--wp--preset--color--white);
	text-decoration: none;
	font-weight: bold;
}

.pi-director-quote__phone:hover {
	text-decoration: underline;
}

@media (max-width: 750px) {
	.pi-director-quote__author,
	.pi-director-quote__portrait-wrap {
		flex-basis: 100%;
	}

	.pi-director-quote__inner {
		padding: 40px 20px;
	}

	.pi-director-quote__inner::before {
		left: 40px;
	}
}

/* =========================================================
 * 19. Blog (index.html + single.html)
 *
 * Niet gelinkt vanuit nav of footer — bedoeld voor losse posts
 * waarvan de redactie de URL deelt. De stijl spiegelt de overige
 * archives (400px hero, witte tekst over primary overlay) en geeft
 * de losse berichten een leesbare typografie + een nette card-grid
 * voor /blog/ als de redactie ooit een posts-page koppelt.
 * ========================================================= */

.pi-blog-hero h1.wp-block-heading {
	font-size: clamp(2.25rem, 5vw, 3.5rem);
}

/* Card-grid layout — netjes 3 kolommen op desktop, 2 op tablet, 1 op
 * mobiel. WP genereert al een grid op `is-layout-grid`, dit zorgt
 * voor consistente kaart-styling. */
.pi-blog-card {
	overflow: hidden;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	height: 100%;
	display: flex !important;
	flex-direction: column;
}

.pi-blog-card:hover {
	box-shadow: 0 8px 24px rgba(15, 25, 65, 0.08);
	transform: translateY(-2px);
}

.pi-blog-card .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
}

.pi-blog-card .wp-block-post-featured-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.pi-blog-card:hover .wp-block-post-featured-image img {
	transform: scale(1.03);
}

.pi-blog-card .wp-block-post-title a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}

.pi-blog-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent);
}

.pi-blog-card .wp-block-post-excerpt {
	color: var(--wp--preset--color--gray);
	font-size: 0.95rem;
	line-height: 1.55;
}

.pi-blog-card .wp-block-post-excerpt__more-link {
	display: inline-block;
	margin-top: 0.75rem;
	color: var(--wp--preset--color--accent);
	font-weight: 600;
	text-decoration: none;
}

.pi-blog-card .wp-block-post-excerpt__more-link:hover {
	text-decoration: underline;
}

/* Pagination */
.pi-blog-pagination {
	gap: 0.5rem;
}

.pi-blog-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.25rem;
	height: 2.25rem;
	padding: 0 0.65rem;
	border-radius: 6px;
	color: var(--wp--preset--color--primary);
	background: #ffffff;
	border: 1px solid #e5e7eb;
	text-decoration: none;
	font-weight: 600;
	transition: background 0.15s ease, color 0.15s ease;
}

.pi-blog-pagination .page-numbers:hover,
.pi-blog-pagination .page-numbers.current {
	background: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
	color: #ffffff;
}

/* Single post — hero meta row (datum + auteur over de cover) */
.pi-post-hero__meta {
	margin-top: 1rem;
	color: rgba(255, 255, 255, 0.85);
	font-size: 0.95rem;
}

.pi-post-hero__meta .wp-block-post-date,
.pi-post-hero__meta .wp-block-post-author {
	color: inherit;
}

.pi-post-hero h1.wp-block-post-title {
	font-size: clamp(2rem, 4vw, 3rem);
	margin: 0;
}

/* Single post — body typografie. Zelfde toon als de vacature-content
 * (rustige line-height, koppen met merkkleur) maar dan voor losse
 * paragrafen, koppen, afbeeldingen en quotes uit de block editor. */
.pi-post-content {
	font-size: 1.05rem;
	line-height: 1.7;
}

.pi-post-content > * + * {
	margin-top: 1.25em;
}

.pi-post-content h2,
.pi-post-content h3,
.pi-post-content h4 {
	color: var(--wp--preset--color--primary);
	margin-top: 2em;
	margin-bottom: 0.6em;
	line-height: 1.25;
}

.pi-post-content h2 { font-size: 1.75rem; }
.pi-post-content h3 { font-size: 1.4rem; }
.pi-post-content h4 { font-size: 1.15rem; }

.pi-post-content p {
	margin: 0 0 1em;
}

.pi-post-content a {
	color: var(--wp--preset--color--accent);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

.pi-post-content a:hover {
	color: var(--wp--preset--color--primary);
}

.pi-post-content ul,
.pi-post-content ol {
	padding-left: 1.5rem;
	margin: 0 0 1.25em;
}

.pi-post-content li {
	margin-bottom: 0.4em;
}

.pi-post-content img,
.pi-post-content .wp-block-image img {
	border-radius: 8px;
	max-width: 100%;
	height: auto;
}

.pi-post-content blockquote,
.pi-post-content .wp-block-quote {
	margin: 2em 0;
	padding: 0.5em 0 0.5em 1.25em;
	border-left: 4px solid var(--wp--preset--color--accent);
	font-size: 1.15rem;
	font-style: italic;
	color: var(--wp--preset--color--primary);
}

.pi-post-content code {
	background: #f3f4f6;
	padding: 0.15em 0.35em;
	border-radius: 4px;
	font-size: 0.9em;
}

.pi-post-content pre {
	background: #0f1941;
	color: #f8f9fa;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	overflow-x: auto;
	font-size: 0.9rem;
	line-height: 1.5;
}

.pi-post-content pre code {
	background: transparent;
	padding: 0;
	color: inherit;
}

/* Single post — vorige/volgende navigatie onderaan */
.pi-post-nav .post-navigation-link-previous,
.pi-post-nav .post-navigation-link-next {
	max-width: 48%;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
	line-height: 1.4;
}

.pi-post-nav .post-navigation-link-next {
	text-align: right;
}

.pi-post-nav .post-navigation-link-previous:hover,
.pi-post-nav .post-navigation-link-next:hover {
	color: var(--wp--preset--color--accent);
}

@media (max-width: 768px) {
	.pi-post-nav {
		flex-direction: column;
	}
	.pi-post-nav .post-navigation-link-previous,
	.pi-post-nav .post-navigation-link-next {
		max-width: 100%;
		text-align: left;
	}
}