:root {
	--pf-green-cta: #237e46; /* donkerder groen: wit erop haalt 5,07:1 (WCAG AA) */
	--pf-radius-sm: 10px;
	--pf-radius-md: 16px;
	--pf-radius-lg: 22px;
	--pf-ease: cubic-bezier(.2, .7, .3, 1);
}

/*
Theme Name: Private Fit Blocks
Theme URI: https://www.privatefit.nl/
Author: Ingenious
Author URI: https://www.ingenious.nl/
Description: Blokthema voor Private Fit — privéstudio's voor reformer pilates en fitness in Veenendaal en Groningen. Alle vormgeving in theme.json en patronen, alle inhoud bewerkbaar in de blok-editor.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: private-fit-blocks
*/

/* ---------------------------------------------------------------
   Basis
--------------------------------------------------------------- */
html { scroll-behavior: smooth; }
body {
	overflow-x: hidden;
	background-color: var(--wp--preset--color--white);
	background-repeat: no-repeat;
	background-image:
		radial-gradient(700px 420px at 12% 380px, rgba(45, 158, 89, 0.09), transparent 70%),
		radial-gradient(760px 460px at 90% 1250px, rgba(45, 158, 89, 0.07), transparent 70%),
		radial-gradient(680px 420px at 10% 2150px, rgba(45, 158, 89, 0.06), transparent 70%),
		radial-gradient(760px 460px at 92% 3300px, rgba(45, 158, 89, 0.07), transparent 70%),
		radial-gradient(680px 420px at 8% 4400px, rgba(45, 158, 89, 0.06), transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--wp--preset--color--green);
	outline-offset: 2px;
}

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

/* ---------------------------------------------------------------
   Aankleding: ronde hoeken, kleur en beweging op de kaarten/knoppen.
   Volle-breedte vlakken (hero, vestigingskop, mobiel menu) blijven
   bewust hoekig — dat is de merkstijl; alleen de "kaart"-achtige
   onderdelen krijgen zachtere hoeken en een hover-reactie.
--------------------------------------------------------------- */
.wp-block-button__link {
	transition: transform .22s var(--pf-ease), box-shadow .22s var(--pf-ease), background-color .22s var(--pf-ease);
	padding: 15px 30px;
}
/* WP-core geeft outline-knoppen minder padding dan fill-knoppen (om de
   randbreedte te compenseren), maar niet genoeg — daardoor zijn ze lager.
   Hier gelijk trekken zodat outline- en fill-knoppen naast elkaar exact
   even hoog zijn. */
.wp-block-button.is-style-outline .wp-block-button__link {
	padding: 13px 28px;
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(35, 126, 70, .45);
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .25);
}

/* Inschuifanimatie bij scrollen — reveal.js zet .pf-reveal en later
   .pf-revealed. De verberg-regel geldt alleen als html.pf-js-reveal
   aanwezig is (JS actief), zodat inhoud zonder JS altijd zichtbaar is. */
.pf-reveal {
	transition: opacity .7s var(--pf-ease), transform .7s var(--pf-ease);
}
html.pf-js-reveal .pf-reveal:not(.pf-revealed) {
	opacity: 0;
	transform: translateY(28px);
}

/* Hexagon vormtaal ------------------------------------------------ */
.pf-hex,
.pf-hexmark,
.pf-hexbtn,
.pf-step-num,
.pf-stepbig-num,
.pf-locbar-mark,
.pf-kicker::before {
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Hexagon-merkje voor elk sectiekopje (kicker), op elke pagina ---- */
.pf-kicker { position: relative; padding-left: 22px; box-sizing: border-box; }
.pf-kicker::before {
	content: "";
	position: absolute;
	left: 0; top: 50%;
	transform: translateY(-50%);
	width: 11px; height: 13px;
	background: var(--wp--preset--color--green);
}

/* ---------------------------------------------------------------
   Geen marge tussen header, main en footer
--------------------------------------------------------------- */
.wp-site-blocks > * {
	margin-block-start: 0;
}

/* ---------------------------------------------------------------
   Header
--------------------------------------------------------------- */
.pf-site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}
.pf-site-header .pf-header-inner {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	min-height: 84px;
}
.pf-brand {
	display: flex;
	align-items: center;
	gap: 12px;
	font-weight: 800;
	line-height: .95;
	font-size: 1rem;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white) !important;
	text-decoration: none !important;
}
.pf-brand-logo {
	display: block;
	height: 40px;
	width: auto;
}
.pf-menu-wrap { margin-left: auto !important; }
.pf-menu {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .78rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
}
.pf-menu li { margin: 0; }
.pf-menu a {
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.pf-menu a:hover,
.pf-menu .current-menu-item > a { color: var(--wp--preset--color--green); }

/* Uitklapmenu (dropdown) voor items met submenu, zoals "Studio's" ------ */
.pf-menu .menu-item-has-children { position: relative; }
.pf-menu .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 200px;
	margin: 0;
	padding: 8px 0;
	list-style: none;
	background: var(--wp--preset--color--black-2);
	border-radius: var(--pf-radius-sm);
	box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .5);
	z-index: 40;
}
.pf-menu .menu-item-has-children:hover > .sub-menu,
.pf-menu .menu-item-has-children:focus-within > .sub-menu {
	display: block;
}
/* Items zonder eigen bestemming (href="#"), zoals "Studio's": alleen open na
   een klik, niet al bij hover — de link doet toch niets bij een klik. */
.pf-menu .menu-item-has-children.pf-menu-toggle:hover > .sub-menu {
	display: none;
}
.pf-menu .menu-item-has-children.pf-menu-toggle.is-open > .sub-menu {
	display: block;
}
.pf-menu .sub-menu a {
	display: block;
	padding: 10px 18px;
	white-space: nowrap;
}
.pf-mobile-menu .sub-menu {
	display: block;
	position: static;
	background: none;
	box-shadow: none;
	padding: 0;
}
.pf-mobile-menu .sub-menu a {
	padding-left: calc(var(--wp--preset--spacing--50) + 18px);
	font-size: .85rem;
	opacity: .85;
}
.pf-header-inner > .wp-block-buttons { flex: none; margin-left: 0; }
.pf-burger {
	display: none;
	background: none;
	border: 0;
	color: var(--wp--preset--color--white);
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	padding: 8px;
	/* minimaal 44x44 px aanraakvlak */
	min-width: 44px;
	min-height: 44px;
	align-items: center;
	justify-content: center;
}
.pf-mobile-menu {
	display: none;
	background: var(--wp--preset--color--black-2);
}
.pf-mobile-menu.is-open { display: block; }
.pf-mobile-menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.pf-mobile-menu .pf-menu {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.pf-mobile-menu a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding: 12px var(--wp--preset--spacing--50);
	border-top: 1px solid rgba(255,255,255,.12);
	font-size: .94rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--white);
	text-decoration: none;
}
.pf-mobile-menu .wp-block-buttons { padding: 16px var(--wp--preset--spacing--50) 20px; }

@media (max-width: 981px) {
	.pf-menu-wrap { display: none !important; }
	.pf-header-inner > .wp-block-buttons.pf-header-cta { display: none !important; }
	.pf-header-inner .pf-burger { display: inline-flex !important; align-items: center; justify-content: center; margin-left: auto; }
}

/* ---------------------------------------------------------------
   Hero (homepage)
--------------------------------------------------------------- */
.pf-hero { position: relative; overflow: hidden; }
.pf-hero .pf-hero-copy {
	position: relative;
	z-index: 2;
	max-width: 40rem;
	/* Zelfde linkerkant als de rest van de site */
	margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1200px))) / 2) !important;
	margin-right: auto !important;
}
@media (min-width: 782px) {
	.pf-hero .pf-hero-copy {
		/* Op grotere schermen een beetje extra inspringing */
		margin-left: calc((100% - min(100%, var(--wp--style--global--content-size, 1200px))) / 2 + var(--wp--preset--spacing--70)) !important;
	}
}
.pf-hero h1 { max-width: 19ch; margin-left: 0 !important; }
.pf-hero-sub {
	font-size: clamp(1.05rem, 2vw, 1.3rem);
	font-weight: 700;
	line-height: 1.3;
	margin-block-start: 0.6rem;
}
.pf-hero-trial { font-weight: 600; }
.pf-hero-trial a {
	color: var(--wp--preset--color--green);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.pf-hexwrap {
	position: absolute;
	z-index: 3;
	right: var(--wp--preset--spacing--50);
	bottom: -80px;
	top: auto;
	transform: none;
	display: flex;
	justify-content: flex-end;
}
@media (max-width: 900px) {
	.pf-hexwrap { position: relative; right: auto; top: auto; transform: none; margin-top: var(--wp--preset--spacing--70); justify-content: center; }
}
.pf-hexbtn {
	position: relative;
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white) !important;
	box-sizing: border-box;
	width: 206px;
	height: 232px;
	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	font-weight: 700;
	font-size: 1.3rem;
	line-height: 1.25;
	text-transform: none;
	letter-spacing: normal;
	padding: 0 32px !important;
	text-decoration: none !important;
	border: 0 !important;
	transition: background .2s, transform .3s var(--pf-ease), box-shadow .3s var(--pf-ease);
}
.pf-hexbtn > a {
	padding: 0 !important;
	background: transparent !important;
	text-transform: none !important;
	font-size: inherit !important;
	line-height: inherit !important;
	font-weight: inherit !important;
	height: auto !important;
	width: auto !important;
	flex: none !important;
}
.pf-hexbtn:hover {
	background: var(--wp--preset--color--green-dark);
	color: var(--wp--preset--color--white) !important;
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 20px 32px -16px rgba(0, 0, 0, .5);
}
.pf-hexbtn::after {
	content: "\203A";
	position: absolute;
	left: 50%;
	bottom: 14px;
	transform: translateX(-50%);
	width: 34px;
	height: 38px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1rem;
}
@media (max-width: 900px) {
	.pf-hexbtn { width: 178px; height: 200px; font-size: 1.15rem; }
}
/* Op zeer smalle schermen (320px en smaller) raakt de gecentreerde hexagon de
   zwevende chatknop rechtsonder. Iets kleiner maken houdt ze uit elkaar. */
@media (max-width: 359px) {
	.pf-hexbtn { width: 150px; height: 169px; font-size: 1.05rem; padding: 0 20px !important; }
}

/* ---------------------------------------------------------------
   Locatiebalk
--------------------------------------------------------------- */
.pf-locbar {
	padding-top: var(--wp--preset--spacing--40) !important;
	padding-bottom: var(--wp--preset--spacing--40) !important;
}
.pf-locbar-row {
	justify-content: center;
	gap: 28px;
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	/* De balk zelf blijft staan; alleen de tekst erin schuift optisch naar het midden. */
	transform: translateY(-3px);
}
@media (max-width: 900px) {
	/* Als de balk naar twee regels breekt, elke regel apart centreren geeft
	   een scheve linkerkant (verschillende breedtes) — dan liever links uitgelijnd. */
	.pf-locbar-row { justify-content: flex-start; }
}
.pf-locbar-item { display: flex; align-items: center; gap: 9px; }
.pf-locbar-mark {
	width: 11px;
	height: 13px;
	background: var(--wp--preset--color--green);
	display: block;
	flex: none;
}

/* ---------------------------------------------------------------
   Aankondiging (groen)
--------------------------------------------------------------- */
.pf-announce + * { margin-top: 0; }

/* ---------------------------------------------------------------
   Vestigingskeuze
--------------------------------------------------------------- */
.pf-loccard {
	position: relative;
	background: var(--wp--preset--color--light);
	border-top: 5px solid var(--wp--preset--color--green);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
	display: flex;
	flex-direction: column;
}
/* Knop onderaan de kaart, ongeacht hoeveel regels de tekst erboven inneemt. */
.pf-loccard .wp-block-buttons {
	margin-top: auto !important;
}
/* Vestigingskeuze (geen -side variant): tekst is bij beide kaarten even lang,
   dus hier gewoon een vaste, ruime afstand tot de knop — betrouwbaarder dan
   margin-top:auto, dat hier niet expandeerde en alle extra ruimte onder de
   knop liet vallen in plaats van erboven. */
.pf-loccard:not(.pf-loccard-side) .wp-block-buttons {
	margin-top: var(--wp--preset--spacing--60) !important;
}
.pf-loccard.pf-loccard-dark {
	background: var(--wp--preset--color--black);
	border-top-color: var(--wp--preset--color--green);
}
/* Variant: tekst links, knop aan de zijkant in plaats van eronder (studio's-pagina).
   Elke kaart is hier maar de halve sectiebreedte — pas bij ruime schermen past
   tekst + knop naast elkaar zonder dat "Veenendaal"/"Groningen" gaat afbreken. */
.pf-loccard-side .pf-loccard-body { flex: 1 1 auto; }
@media (min-width: 1100px) {
	.pf-loccard-side {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		gap: var(--wp--preset--spacing--70);
	}
	/* Nooit de volle breedte innemen, anders komt langere tekst (Groningen)
	   te dicht bij de knop terwijl kortere tekst (Veenendaal) veel ruimte overhoudt. */
	.pf-loccard-side .pf-loccard-body { max-width: 62%; }
	/* Tekst begint bij beide kaarten bovenaan, ongeacht of de tekst één of
	   meerdere regels beslaat — anders staat de Veenendaal-tekst (korter)
	   lager/gecentreerd terwijl de Groningen-tekst (langer) bovenaan begint. */
	.pf-loccard-side .wp-block-buttons {
		flex: none;
		align-self: center;
		margin-top: 0 !important;
	}
}
.pf-loccard-tag-inline {
	display: inline-block;
	vertical-align: middle;
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white);
	font-size: .62rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	line-height: 1;
	/* Klein genoeg houden dat dit label niet de regelhoogte van de kop
	   opdrijft — anders staat alles in de Groningen-kaart een paar pixels
	   lager dan in de Veenendaal-kaart. */
	padding: 3px 10px;
	margin-left: 8px;
	transform: translateY(-2px);
}

/* Checklists met hexagon vinkjes --------------------------------- */
ul.pf-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
}
h2 + ul.pf-checks,
h3 + ul.pf-checks {
	margin-top: var(--wp--preset--spacing--50);
}
ul.pf-checks li {
	position: relative;
	padding-left: 42px;
}
ul.pf-checks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 27px;
	height: 31px;
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white);
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .82rem;
	font-weight: 700;
}
.pf-loccard-dark ul.pf-checks li { color: var(--wp--preset--color--white); }

/* ---------------------------------------------------------------
   Vestigingskop (dark hero met kerncijfers en kaart)
--------------------------------------------------------------- */
.pf-vestigingskop,
.pf-page-intro { position: relative; overflow: hidden; }
.pf-vestigingskop .pf-lead,
.pf-page-intro .pf-lead {
	color: rgba(255,255,255,.82);
	font-weight: 600;
	font-size: var(--wp--preset--font-size--medium);
}
.pf-stats { display: grid !important; grid-template-columns: repeat(4, 1fr); align-items: stretch; gap: 12px; }
.pf-stat {
	display: flex;
	flex-direction: column;
	/* flex-start i.p.v. center: anders staan de cijfers op een andere hoogte
	   zodra een label (bv. "Reformer pilates studio") naar meer regels breekt
	   dan de andere, want de kaarten krijgen door align-items:stretch allemaal
	   dezelfde hoogte. */
	justify-content: flex-start;
	border: 2px solid rgba(255,255,255,.22);
	background: rgba(10, 15, 12, .55);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	padding: 13px 19px;
	text-align: center;
}
@media (max-width: 560px) {
	.pf-stats { grid-template-columns: repeat(2, 1fr); }
}
.pf-stat-num {
	display: block;
	font-size: var(--wp--preset--font-size--stat);
	font-weight: 800;
	color: var(--wp--preset--color--white);
	line-height: 1;
}
.pf-stat-label {
	display: block;
	font-size: .67rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: rgba(255,255,255,.62);
}
.pf-mapbox {
	position: relative;
	aspect-ratio: 4/3;
	border: 2px solid rgba(255,255,255,.2);
	overflow: hidden;
	background-color: transparent;
	background-image:
		linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
	background-size: 40px 40px;
}
.pf-mapbox-frame { display: block; width: 100%; height: 100%; border: 0; }
/* Vestigingskop: reserveerknop als hexagon naast de kaart, zoals op de
   homepage — de kaart wordt kleiner om er naast te passen. */
.pf-vskop-side {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--wp--preset--spacing--50);
	width: 100%;
}
.pf-hexwrap-inline { justify-content: center; }
.pf-mapbox-small { width: 78%; }
@media (max-width: 900px) {
	.pf-mapbox-small { width: 100%; }
	/* Op mobiel staat de knop boven de kaart, ook al staat de kaart in de
	   broncode eerst (voor de desktop-volgorde). */
	.pf-hexwrap-inline { order: -1; }
}

/* ---------------------------------------------------------------
   Informatiebalk
--------------------------------------------------------------- */
.pf-infobar { border-top: 1px solid var(--wp--preset--color--line); border-bottom: 1px solid var(--wp--preset--color--line); }
.pf-infobar.wp-block-columns { gap: 1px; background: var(--wp--preset--color--line); }
.pf-infobar > .wp-block-column {
	background: var(--wp--preset--color--white);
	padding: var(--wp--preset--spacing--50) !important;
}
.pf-infobar h4,
.pf-infobar .pf-infobar-label {
	font-size: .7rem;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
	font-weight: 700;
	margin-bottom: 8px;
}
.pf-infobar p { font-weight: 600; font-size: .95rem; }

/* ---------------------------------------------------------------
   Studiokaarten
--------------------------------------------------------------- */
.pf-tile-link {
	display: block;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.pf-tile {
	background: var(--wp--preset--color--light);
	height: 100%;
	display: flex;
	flex-direction: column;
	border-radius: var(--pf-radius-lg);
	overflow: hidden;
}
.pf-tile .pf-tile-body {
	background: var(--wp--preset--color--green);
	padding: var(--wp--preset--spacing--50);
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
	width: 100%;
	max-width: none !important;
	margin: 0 !important;
	border-radius: 0 0 var(--pf-radius-lg) var(--pf-radius-lg);
}
.pf-tile .pf-photo-tile.pf-photo-tile {
	border-radius: var(--pf-radius-lg) var(--pf-radius-lg) 0 0;
}
.pf-tile .pf-tile-body h3 { color: var(--wp--preset--color--white); }
.pf-tile .pf-tile-body p { font-size: .94rem; color: rgba(255, 255, 255, 0.85); }
.pf-tile-price {
	font-weight: 700;
	font-size: .9rem;
	color: var(--wp--preset--color--white);
	margin-top: auto;
}

/* ---------------------------------------------------------------
   Foto-placeholders
--------------------------------------------------------------- */
.pf-photo.wp-block-cover {
	justify-content: center;
	border-radius: var(--pf-radius-lg);
	overflow: hidden;
}
.pf-photo.wp-block-cover .wp-block-cover__background,
.pf-photo.wp-block-cover img {
	transition: transform .5s var(--pf-ease);
}
.pf-photo.wp-block-cover:hover .wp-block-cover__background,
.pf-photo.wp-block-cover:hover img,
.pf-tile-link:hover .pf-photo.wp-block-cover .wp-block-cover__background,
.pf-tile-link:hover .pf-photo.wp-block-cover img {
	transform: scale(1.05);
}
.pf-photo.wp-block-cover .wp-block-cover__inner-container p {
	color: rgba(255,255,255,.6);
	font-size: .74rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	text-align: center;
	padding: 0 20px;
}
.pf-photo-tile { width: 100%; aspect-ratio: 4/3; min-height: 0 !important; }
.pf-photo-split { width: 100%; aspect-ratio: 16/11; min-height: 0 !important; }
.pf-photo-wide { width: 100%; aspect-ratio: 16/9; min-height: 0 !important; }
.pf-photo-phone { margin: 0 auto; height: 100%; display: flex; align-items: center; justify-content: center; }
.pf-photo-phone img { width: auto; height: 100%; max-width: 100%; object-fit: contain; display: block; margin: 0 auto; }
@media (max-width: 781px) { .pf-photo-phone { height: auto; } .pf-photo-phone img { width: 100%; height: auto; } }

/* "Foto links" patroon: als de kolommen op smalle schermen onder elkaar
   komen, moet de tekst eerst komen en de foto eronder. */
@media (max-width: 781px) {
	.pf-col-photo { order: 2; }
}

/* ---------------------------------------------------------------
   Zes redenen / hex-lijst (donker)
--------------------------------------------------------------- */
.pf-hex-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 2px;
	background: rgba(255,255,255,.12);
}
.pf-hex-grid > * {
	background: var(--wp--preset--color--black);
	padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
	display: flex;
	align-items: center;
	margin: 0;
}
.pf-hex-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .pf-hex-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pf-hex-grid { grid-template-columns: 1fr; } }
.pf-hex-item { display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: .96rem; }
.pf-hexmark {
	width: 30px;
	height: 34px;
	background: var(--wp--preset--color--green);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pf-hexmark::before {
	content: "\2713";
	color: var(--wp--preset--color--white);
	font-size: .82rem;
	font-weight: 700;
}

/* ---------------------------------------------------------------
   Stappen
--------------------------------------------------------------- */
.pf-step {
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--pf-radius-md);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
	transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), border-color .25s var(--pf-ease);
}
.pf-step:hover {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 18px 34px -20px rgba(20, 20, 20, .35);
}
.pf-step-num {
	width: 42px; height: 48px;
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white);
	font-weight: 800;
	display: flex; align-items: center; justify-content: center;
	margin-bottom: var(--wp--preset--spacing--40);
}
.pf-stepbig {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: 18px;
	align-items: start;
	padding: var(--wp--preset--spacing--50) 0;
	border-bottom: 1px solid var(--wp--preset--color--line);
}
.pf-stepbig:last-child { border-bottom: 0; }
.pf-stepbig .pf-stepbig-num {
	width: 42px; height: 48px;
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white);
	font-weight: 800; font-size: 1.05rem;
	display: flex; align-items: center; justify-content: center;
}
.pf-stepbig h3 { font-size: .95rem; }
.pf-stepbig p:not(.pf-stepbig-num) { color: var(--wp--preset--color--grey); font-size: .85rem; }

/* ---------------------------------------------------------------
   Tarievenkaarten
--------------------------------------------------------------- */
.pf-pc {
	border: 2px solid var(--wp--preset--color--line);
	border-radius: var(--pf-radius-md);
	padding: var(--wp--preset--spacing--60);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 10px;
	transition: transform .25s var(--pf-ease), box-shadow .25s var(--pf-ease), border-color .25s var(--pf-ease);
}
.pf-pc:hover {
	transform: translateY(-6px);
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 18px 34px -20px rgba(20, 20, 20, .35);
}
.pf-pc.pf-pc-feat {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--black);
}
.pf-pc.pf-pc-feat:hover { border-color: var(--wp--preset--color--green); }
.pf-pc.pf-pc-green {
	background: var(--wp--preset--color--green);
	color: var(--wp--preset--color--white);
	border-color: var(--wp--preset--color--green);
}
.pf-pc.pf-pc-green:hover { border-color: var(--wp--preset--color--black); }
.pf-pc-amt {
	font-size: var(--wp--preset--font-size--price);
	font-weight: 800;
	line-height: 1;
	flex-wrap: wrap !important;
	row-gap: 2px;
	column-gap: 8px;
}
/* Bij een kortingsprijs krijgt de oude, doorgestreepte prijs de volle
   regelbreedte (dwingt een regeleinde af), zodat de nieuwe prijs en
   "/ 4 weken" daarna altijd samen op één regel blijven staan. */
.pf-pc-amt .pf-pc-old { flex-basis: 100%; }
.pf-pc-amt small {
	font-size: .78rem; font-weight: 600;
	color: var(--wp--preset--color--grey);
	text-transform: none; letter-spacing: 0;
}
.pf-pc-feat .pf-pc-amt small,
.pf-pc-green .pf-pc-amt small { color: rgba(255,255,255,.65); }
.pf-pc ul {
	list-style: none; padding: 0; margin: 4px 0 0;
	display: grid; gap: 8px; font-size: .92rem;
}
.pf-pc-green ul.pf-checks li::before {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green);
}
.pf-pc .wp-block-buttons { margin-top: auto; padding-top: 10px; }
.pf-fine { color: var(--wp--preset--color--grey); font-size: .85rem; }
.pf-pc-disabled .wp-block-button__link {
	font: inherit;
	appearance: none;
	background: none;
	cursor: default;
	pointer-events: none;
	border-color: var(--wp--preset--color--line) !important;
	opacity: .75;
}
/* Op een zwarte of groene kaart is de standaard lichtgrijze rand/tekst
   nauwelijks te lezen — hier lichter maken voor voldoende contrast. */
.pf-pc-feat .pf-pc-disabled .wp-block-button__link,
.pf-pc-green .pf-pc-disabled .wp-block-button__link {
	border-color: rgba(255, 255, 255, .4) !important;
	color: rgba(255, 255, 255, .75) !important;
}

/* ---------------------------------------------------------------
   Abonnementskaarten: badges
--------------------------------------------------------------- */
.pf-pc-discount-badge {
	display: inline-block;
	background: #b8551f;
	color: var(--wp--preset--color--white);
	font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
	padding: 4px 10px; border-radius: 999px;
	margin-bottom: 10px;
}
.pf-pc-old {
	display: block;
	font-size: 1rem;
	font-weight: 600;
	color: var(--wp--preset--color--grey);
	text-decoration: line-through;
	line-height: 1;
	margin-bottom: 2px;
}
.pf-pc-feat .pf-pc-old,
.pf-pc-green .pf-pc-old { color: rgba(255,255,255,.65); }
.pf-pc-feat .pf-fine,
.pf-pc-green .pf-fine { color: rgba(255,255,255,.65); }

/* ---------------------------------------------------------------
   Tariefstrip / cta-strip
--------------------------------------------------------------- */
.pf-tariefstrip,
.pf-cta-strip {
	display: flex;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}
.pf-tariefstrip > .wp-block-buttons,
.pf-cta-strip > .wp-block-buttons,
.pf-cta-strip > .pf-cta-strip-form { margin-left: auto; }
.pf-tariefstrip-amt { font-size: 2.2rem; font-weight: 800; line-height: 1; }
.pf-cta-strip-form .pf-form { margin-top: 0; justify-content: flex-start; }
.pf-cta-strip-form .pf-form button {
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--green);
}
.pf-cta-strip-form .pf-form button:hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}
.pf-cta-strip-form .pf-form-notice { width: 100%; }

/* ---------------------------------------------------------------
   FAQ
--------------------------------------------------------------- */
.pf-faq { border-top: 1px solid var(--wp--preset--color--line); }
.pf-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--line);
	padding: 18px 20px;
	margin: 0 -20px;
	border-radius: var(--pf-radius-sm);
	transition: background-color .2s var(--pf-ease);
}
.pf-faq .wp-block-details:hover { background: var(--wp--preset--color--light); }
.pf-faq .wp-block-details summary {
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.pf-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.pf-faq .wp-block-details summary::after {
	content: "+"; color: var(--wp--preset--color--green); font-weight: 800; font-size: 1.2rem; flex: none;
	transition: transform .25s var(--pf-ease);
	display: inline-block;
}
.pf-faq .wp-block-details[open] summary::after { transform: rotate(135deg); }
.pf-faq .wp-block-details p { margin-top: 10px; color: var(--wp--preset--color--grey); font-size: .96rem; }

/* ---------------------------------------------------------------
   Formulieren + afsluiters
--------------------------------------------------------------- */
.pf-endcta {
	text-align: center;
}
.pf-endcta .pf-endcta-inner { max-width: 46rem; margin: 0 auto; }

.pf-form {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
	justify-content: center;
	margin-top: var(--wp--preset--spacing--50);
}
.pf-form.pf-form-inline { justify-content: flex-start; margin-left: auto; margin-top: 0; }
.pf-form input[type="email"],
.pf-form input[type="text"],
.pf-form select,
.pf-form textarea {
	padding: 15px 18px;
	border: 2px solid #dcdcdc;
	border-radius: var(--pf-radius-sm);
	font: inherit;
	font-size: .95rem;
	min-width: 230px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	transition: border-color .2s var(--pf-ease), box-shadow .2s var(--pf-ease);
}
.pf-form input[type="email"]:focus,
.pf-form input[type="text"]:focus,
.pf-form select:focus,
.pf-form textarea:focus {
	outline: none;
	border-color: var(--wp--preset--color--green);
	box-shadow: 0 0 0 4px rgba(45, 158, 89, .18);
}
.pf-form-contact {
	flex-direction: column;
	align-items: stretch;
}
.pf-form-contact input,
.pf-form-contact textarea {
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
}
.pf-form-contact textarea { resize: vertical; }
.pf-form-contact button { align-self: flex-start; }
.pf-form button {
	background: var(--pf-green-cta);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--pf-radius-sm);
	padding: 15px 30px;
	font-weight: 700;
	font-size: .86rem;
	letter-spacing: .09em;
	text-transform: uppercase;
	cursor: pointer;
	transition: transform .22s var(--pf-ease), box-shadow .22s var(--pf-ease), background-color .22s var(--pf-ease);
}
.pf-form button:hover {
	background: var(--wp--preset--color--green-dark);
	transform: translateY(-2px);
	box-shadow: 0 10px 20px -8px rgba(35, 126, 70, .45);
}
.pf-form-hp { position: absolute !important; left: -9999px !important; top: -9999px !important; }
.pf-form-notice {
	border-left: 5px solid var(--wp--preset--color--green);
	border-radius: var(--pf-radius-sm);
	background: var(--wp--preset--color--light);
	color: var(--wp--preset--color--black);
	padding: 14px 20px;
	font-weight: 600;
	font-size: .95rem;
	margin-bottom: var(--wp--preset--spacing--50);
}
.pf-newsband .wp-block-group__inner-container,
.pf-newsband > * { align-items: center; }
.pf-newsband-row { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; }

/* ---------------------------------------------------------------
   Footer
--------------------------------------------------------------- */
.pf-site-footer h4 {
	color: var(--wp--preset--color--white);
	font-size: .72rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}
.pf-site-footer ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 9px;
	font-size: .92rem;
}
.pf-site-footer a { color: rgba(255,255,255,.75); text-decoration: none; }
.pf-site-footer a:hover { color: var(--wp--preset--color--green); }
@media (max-width: 781px) {
	.pf-site-footer .wp-block-columns > .wp-block-column {
		border-top: 1px solid rgba(255,255,255,.12);
		padding-top: 22px;
		margin-top: 22px;
	}
	.pf-site-footer .wp-block-columns > .wp-block-column:first-child {
		border-top: none;
		padding-top: 0;
		margin-top: 0;
	}
}
.pf-footer-bottom {
	border-top: 1px solid rgba(255,255,255,.12);
	padding-top: 20px;
	display: flex;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	font-size: .8rem;
	color: rgba(255,255,255,.6);
}

/* ---------------------------------------------------------------
   404
--------------------------------------------------------------- */
.pf-404 { text-align: center; }

/* ---------------------------------------------------------------
   Editor-only lock hint
--------------------------------------------------------------- */
.pf-locked-note { display: none; }

/* ---------------------------------------------------------------
   Kale tekstpagina's (algemene voorwaarden, privacy)
   Deze pagina's hebben geen eigen opmaakwikkel met padding, zoals
   de ontworpen pagina's wel hebben. Zonder deze regel plakt de
   tekst tegen de schermrand op mobiel.
--------------------------------------------------------------- */
.entry-content.is-layout-flow > :where( h1, h2, h3, h4, h5, h6, p, ul, ol, dl, blockquote, table, pre ) {
	max-width: var(--wp--style--global--content-size, 1200px);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--wp--preset--spacing--50, 24px);
	padding-right: var(--wp--preset--spacing--50, 24px);
}

/* Lange Nederlandse samenstellingen ("gegevensbescherming") passen
   bij grote kopgroottes niet op een smal scherm en duwen de pagina
   zijwaarts. Afbreken in plaats van laten uitsteken — alleen in de
   kale tekstpagina's: site-breed brak dit ook koppen als
   "SPORTSTUDIO" middenin, in ontworpen blokken met een max-width. */
.entry-content.is-layout-flow > :where( h1, h2, h3, h4, h5, h6 ) {
	overflow-wrap: break-word;
}

/* Afbreken op lettergrepen alleen in de kale tekstpagina's en alleen
   op smalle schermen. Niet site-breed: in de ontworpen koppen brak dat
   plaatsnamen ("VEENEN-DAAL") die prima op één regel passen. */
@media (max-width: 560px) {
	.entry-content.is-layout-flow > :where( h1, h2, h3, h4, h5, h6 ) {
		hyphens: auto;
	}
}

/* ---------------------------------------------------------------
   Footer op mobiel: grotere tikvlakken
   De links waren 16–20px hoog; ~44px is de norm voor betrouwbaar
   aantikken. Tekstgrootte blijft gelijk, alleen het raakvlak groeit.
--------------------------------------------------------------- */
@media (max-width: 781px) {
	.pf-site-footer li > a,
	.pf-site-footer p a,
	.pf-footer-bottom a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
	.pf-site-footer ul {
		gap: 0;
	}
	.pf-footer-bottom {
		font-size: .875rem;
	}

	/* Bellen en mailen zijn de belangrijkste acties op mobiel;
	   20px hoog is te weinig om betrouwbaar te raken. */
	main a[href^="tel:"],
	main a[href^="mailto:"] {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}
}

/* ---------------------------------------------------------------
   Chatbubbel vs. mobiel menu
   De bubbel staat op z-index 9999 en lag daardoor over "Hoe werkt
   het?" en "Contact" in het uitgeklapte menu — die waren niet aan
   te tikken. Menu gaat erboven; waar :has() werkt verbergen we de
   bubbel helemaal zolang het menu open is.
--------------------------------------------------------------- */
#pf-mobile-menu.is-open {
	position: relative;
	z-index: 10000;
}
body:has( #pf-mobile-menu.is-open ) #pf-chat-widget {
	display: none;
}