/*
Theme Name: Jo-Photography
Theme URI: https://github.com/Zeta-Acosta/Jo-Photography
Author: Jo-Photography
Description: Custom block theme for Jo-Photography, storytelling photographer in Leuven. Tokens live in theme.json; this file holds the layout rules for the shared patterns.
Version: 0.2.0
Requires at least: 6.7
Tested up to: 6.9
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: jo-photography
*/
/* ------------------------------------------------------------------
Base
------------------------------------------------------------------ */
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img { max-width: 100%; height: auto; }
button { font: inherit; line-height: normal; }
input, textarea, select, .jo-button, .wp-block-button__link { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
/* Text roles (the four type roles from brand/tokens.css). The design sets no
line-height on most minis (normal); the few 1.7 ones are scoped below. */
.jo-mini {
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
line-height: normal;
color: var(--wp--preset--color--gold);
}
.jo-mini a { color: var(--wp--preset--color--gold); }
.jo-mini.is-size-sm { font-size: var(--wp--preset--font-size--mini-sm); }
.jo-mini.is-size-lg { font-size: var(--wp--preset--font-size--mini-lg); }
.jo-mini.is-color-charcoal { color: var(--wp--preset--color--charcoal); }
.jo-mini.is-color-sage { color: var(--wp--preset--color--sage); }
.jo-sub {
font-family: var(--wp--preset--font-family--body);
font-weight: var(--wp--custom--weight--sub);
font-size: var(--wp--preset--font-size--sub);
letter-spacing: var(--wp--custom--track--sub);
line-height: var(--wp--custom--line-height--sub);
color: var(--wp--preset--color--charcoal);
}
.jo-sub.is-size-sm { font-size: var(--wp--preset--font-size--sub-sm); }
.jo-title {
font-family: var(--wp--preset--font-family--title);
font-weight: var(--wp--custom--weight--title);
line-height: var(--wp--custom--line-height--title);
letter-spacing: 0;
text-wrap: pretty;
}
.jo-body,
.jo-body p { color: var(--wp--custom--color--text-soft); }
/* Re-declared so .02em is computed at the smaller size, not inherited from 17px. */
.jo-body.is-size-sm { font-size: var(--wp--preset--font-size--body-sm); letter-spacing: var(--wp--custom--track--body); }
.jo-stack { display: flex; flex-direction: column; gap: 18px; }
.jo-stack--center { align-items: center; text-align: center; }
.jo-measure { max-width: 58ch; }
/* Buttons: outlined, mono, uppercase; hover fills gold. */
.jo-button,
.wp-block-button__link {
display: inline-block;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
line-height: normal;
text-decoration: none;
border: 1px solid var(--wp--preset--color--gold);
border-radius: 0;
background: transparent;
color: var(--wp--preset--color--charcoal);
padding: 15px 30px;
cursor: pointer;
transition: background var(--wp--custom--transition), color var(--wp--custom--transition);
}
.jo-button:hover,
.wp-block-button__link:hover { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--charcoal); }
.is-on-dark .jo-button,
.is-on-dark .wp-block-button__link { color: var(--wp--preset--color--white); }
.is-on-dark .jo-button:hover,
.is-on-dark .wp-block-button__link:hover { color: var(--wp--preset--color--charcoal); }
/* Text link with a gold underline. */
.jo-link {
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
line-height: normal;
color: var(--wp--preset--color--charcoal);
text-decoration: none;
border-bottom: 1px solid var(--wp--preset--color--gold);
padding-bottom: 5px;
transition: color var(--wp--custom--transition);
}
.jo-link:hover { color: var(--wp--preset--color--gold); }
/* A paragraph that only wraps a text link takes the link's box (in the design the link is the flex item). */
p:has(> a.jo-link:only-child) { display: flex; }
p.has-text-align-center:has(> a.jo-link:only-child) { justify-content: center; }
/* Section wrapper: the recurring clamp() paddings. */
.jo-section {
padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80);
}
.jo-section--flush-bottom { padding-bottom: 0; }
.jo-section > .jo-container,
.jo-container { max-width: 1240px; margin: 0 auto; }
.jo-container--narrow,
.jo-container.jo-container--narrow { max-width: 900px; }
.jo-container--mid,
.jo-container.jo-container--mid { max-width: 1080px; }
/* Dark surfaces. */
.is-on-dark,
.is-on-dark .jo-sub,
.is-on-dark .jo-title,
.is-on-dark h1, .is-on-dark h2, .is-on-dark h3 { color: var(--wp--preset--color--white); }
.is-on-dark .jo-body,
.is-on-dark .jo-body p,
.is-on-dark p { color: var(--wp--custom--color--text-on-dark-soft); }
.is-on-dark .jo-mini { color: var(--wp--custom--color--gold-on-green); }
/* Framed photo (F-04): a 1px gold frame 14px outside the image. */
.jo-frame { position: relative; margin: var(--wp--custom--frame-offset); }
.jo-frame img { display: block; width: 100%; object-fit: cover; }
.jo-frame::after {
content: "";
position: absolute;
inset: calc(-1 * var(--wp--custom--frame-offset));
border: 1px solid var(--wp--preset--color--gold);
pointer-events: none;
}
/* Two-column media/text grid used by Blok 2, Blok 4 and Inspireren. */
.jo-split {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: clamp(36px, 5vw, 80px);
align-items: center;
}
.jo-split--mid { max-width: 1080px; margin: 0 auto; gap: clamp(36px, 5vw, 72px); }
.jo-split--mid > * { min-width: 0; }
@media (max-width: 420px) { .jo-split { grid-template-columns: 1fr; } }
/* Photo pair (Blok 1). */
.jo-photo-pair {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: clamp(20px, 2.4vw, 34px);
}
.jo-photo-pair img { display: block; width: 100%; height: clamp(320px, 44vw, 540px); object-fit: cover; }
/* Line list (Blok 2 "Wat ik vastleg"). */
.jo-line-list { list-style: none; margin: 0; padding: 0; }
.jo-line-list li {
border-top: 1px solid var(--wp--custom--color--line);
padding: 22px 0;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini-lg);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
color: var(--wp--preset--color--charcoal);
}
.jo-line-list li:last-child { border-bottom: 1px solid var(--wp--custom--color--line); }
/* Dash list (Blok 4 and package bullets). */
.jo-dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.jo-dash-list li { display: flex; gap: 14px; color: var(--wp--custom--color--text-soft); }
.jo-dash-list li::before { content: "\2013"; color: var(--wp--preset--color--gold); flex: none; }
/* ------------------------------------------------------------------
Header
------------------------------------------------------------------ */
.jo-header {
background: var(--wp--preset--color--surface-dark);
position: relative;
z-index: 60;
}
.jo-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: 12px;
padding: clamp(6px, 0.9vw, 12px) clamp(16px, 3vw, 40px);
}
.jo-header__logo { display: block; justify-self: center; }
.jo-header__logo img,
.jo-header__logo .custom-logo { height: clamp(48px, 6.4vw, 74px); width: auto; display: block; }
.jo-header__wordmark {
font-family: var(--wp--preset--font-family--title);
font-weight: var(--wp--custom--weight--title);
font-size: clamp(22px, 2.4vw, 30px);
color: var(--wp--preset--color--white);
text-decoration: none;
white-space: nowrap;
}
.jo-header__nav { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 34px); }
.jo-header__nav--left { justify-content: flex-end; padding-right: clamp(10px, 2.4vw, 36px); }
.jo-header__nav--right { justify-content: flex-start; padding-left: clamp(10px, 2.4vw, 36px); }
.jo-nav__link,
.jo-header .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--body);
font-weight: var(--wp--custom--weight--nav);
font-size: 13px;
letter-spacing: var(--wp--custom--track--caps);
text-transform: uppercase;
line-height: normal;
text-decoration: none;
padding-bottom: 5px;
white-space: nowrap;
color: var(--wp--preset--color--sage);
border-bottom: 1px solid transparent;
transition: color var(--wp--custom--transition);
}
.jo-nav__link:hover,
.jo-header .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold); }
.jo-nav__link.is-active,
.jo-header .current-menu-item > .wp-block-navigation-item__content,
.jo-header .current-menu-ancestor > .wp-block-navigation-item__content {
color: var(--wp--preset--color--gold);
border-bottom-color: rgba(255, 255, 255, .55);
}
/* Submenu "Wat ik doe": a link whose panel opens on hover and keyboard focus (aria-expanded). */
.jo-submenu { position: relative; display: flex; }
.jo-submenu__toggle[aria-expanded="true"] { color: var(--wp--preset--color--gold); }
.jo-submenu__panel {
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
padding-top: 14px;
z-index: 100;
}
.jo-submenu__panel[hidden] { display: none; }
.jo-submenu__list {
list-style: none;
margin: 0;
padding: 14px 0;
background: var(--wp--preset--color--charcoal);
border: 1px solid var(--wp--custom--color--gold-soft);
min-width: 300px;
}
.jo-submenu__list a {
display: flex;
align-items: center;
gap: 10px;
padding: 9px 30px;
font-family: var(--wp--preset--font-family--body);
font-size: 12px;
letter-spacing: var(--wp--custom--track--caps);
text-transform: uppercase;
color: var(--wp--preset--color--sage);
text-decoration: none;
transition: color var(--wp--custom--transition);
}
.jo-submenu__list a:hover,
.jo-submenu__list a:focus-visible { color: var(--wp--preset--color--gold); }
.jo-submenu__list .jo-submenu__rule { height: 1px; background: var(--wp--custom--color--gold-soft); margin: 12px 30px; }
.jo-lang { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.jo-lang__rule { width: 1px; height: 13px; background: rgba(255, 255, 255, .28); display: block; }
.jo-lang a {
font-family: var(--wp--preset--font-family--body);
font-weight: 400;
font-size: 13px;
letter-spacing: var(--wp--custom--track--caps);
text-transform: uppercase;
line-height: normal;
text-decoration: none;
color: rgba(255, 255, 255, .34);
transition: color var(--wp--custom--transition);
}
.jo-lang a.is-active { color: var(--wp--preset--color--white); font-weight: 600; }
.jo-lang a:hover { color: var(--wp--preset--color--gold); }
/* Mobile header. */
.jo-header__mobile { display: none; }
.jo-burger,
.jo-menu-close {
appearance: none;
background: transparent;
border: 0;
padding: 0;
width: 48px;
height: 48px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 7px;
cursor: pointer;
flex: 0 0 auto;
color: var(--wp--preset--color--gold);
}
.jo-burger span { display: block; width: 26px; height: 1px; background: var(--wp--preset--color--gold); }
.jo-menu-close { font-family: var(--wp--preset--font-family--body); font-size: 26px; line-height: 1; font-weight: 300; }
.jo-menu {
position: fixed;
inset: 0;
background: var(--wp--preset--color--charcoal);
z-index: 400;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.jo-menu[hidden] { display: none; }
.jo-menu__bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px 10px 20px;
border-bottom: 1px solid rgba(195, 166, 133, .22);
}
.jo-menu__nav { display: flex; flex-direction: column; padding: 12px 20px 40px; }
.jo-menu__nav .jo-nav__link { font-size: 14px; padding: 15px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); }
.jo-menu__nav .jo-mini { padding: 18px 0 8px; font-size: var(--wp--preset--font-size--mini-sm); }
.jo-menu__offer {
font-family: var(--wp--preset--font-family--title);
font-size: 19px;
line-height: normal;
text-decoration: none;
padding: 12px 0;
color: var(--wp--preset--color--white);
border-bottom: 1px solid rgba(255, 255, 255, .08);
display: flex;
align-items: center;
gap: 10px;
}
.jo-menu__offer.is-gold { color: var(--wp--preset--color--gold); }
.jo-menu__spacer { height: 22px; }
.jo-menu__meta { display: flex; align-items: center; gap: 18px; padding-top: 30px; }
.jo-menu__meta a { font-size: 13px; letter-spacing: .03em; line-height: normal; color: var(--wp--preset--color--sage); text-decoration: none; }
.jo-menu__lang { padding-top: 14px; }
body.jo-menu-open { overflow: hidden; }
/* The header is a stacking context: lift it above the WhatsApp button (300) while the menu is open. */
body.jo-menu-open .jo-header { z-index: 500; }
@media (max-width: 899px) {
.jo-header__inner { display: none; }
.jo-header__mobile {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 16px 10px 20px;
}
.jo-header__mobile .jo-header__logo img,
.jo-header__mobile .custom-logo { height: 52px; }
}
/* ------------------------------------------------------------------
Photo banner = core/cover block with the class jo-photo-banner.
The cover's ![]()
gets a CSS-only parallax (no scroll listener).
------------------------------------------------------------------ */
.wp-block-cover.jo-photo-banner {
position: relative;
overflow: hidden;
background: var(--wp--preset--color--green-dark);
min-height: clamp(440px, 62vh, 660px);
padding: 0;
}
.wp-block-cover.jo-photo-banner.is-hero { min-height: clamp(460px, 72vh, 720px); }
.wp-block-cover.jo-photo-banner.is-quote { min-height: clamp(420px, 58vh, 620px); }
.wp-block-cover.jo-photo-banner.is-cta { min-height: clamp(380px, 52vh, 540px); }
/* Cadeaubon page closing quote (Cadeaubon.dc.html h); the overlay stays the base .46. */
.wp-block-cover.jo-photo-banner.is-cadeaubon { min-height: clamp(380px, 56vh, 560px); }
.wp-block-cover.jo-photo-banner .wp-block-cover__image-background,
.wp-block-cover.jo-photo-banner .wp-block-cover__video-background {
top: -12%;
height: 124%;
bottom: auto;
}
.wp-block-cover.jo-photo-banner .wp-block-cover__background { opacity: .46; }
.wp-block-cover.jo-photo-banner.is-quote .wp-block-cover__background { opacity: .52; }
.wp-block-cover.jo-photo-banner.is-cta .wp-block-cover__background { opacity: .44; }
.wp-block-cover.jo-photo-banner.has-no-image .wp-block-cover__background { opacity: .35; }
.wp-block-cover.jo-photo-banner .wp-block-cover__inner-container {
width: 100%;
max-width: 900px;
padding: var(--wp--preset--spacing--70) clamp(24px, 5vw, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.wp-block-cover.jo-photo-banner.is-align-left .wp-block-cover__inner-container { max-width: 1240px; align-items: flex-start; text-align: left; }
/* A left-aligned banner puts its text at the bottom (PhotoBanner.dc.html outerAlign). */
.wp-block-cover.jo-photo-banner.is-align-left { align-items: flex-end; }
.wp-block-cover.jo-photo-banner .wp-block-cover__inner-container > * { margin: 0; }
.wp-block-cover.jo-photo-banner .jo-mini { color: var(--wp--preset--color--gold); line-height: 1.7; }
.wp-block-cover.jo-photo-banner h1,
.wp-block-cover.jo-photo-banner h2,
.wp-block-cover.jo-photo-banner .jo-title { color: var(--wp--preset--color--white); }
.wp-block-cover.jo-photo-banner .jo-photo-banner__quote {
font-family: var(--wp--preset--font-family--title);
font-size: clamp(26px, 3.4vw, 48px);
line-height: 1.25;
letter-spacing: 0;
color: var(--wp--preset--color--white);
max-width: 26ch;
text-wrap: pretty;
}
.wp-block-cover.jo-photo-banner p:not(.jo-mini):not(.jo-photo-banner__quote) { color: rgba(255, 255, 255, .86); max-width: 56ch; }
.wp-block-cover.jo-photo-banner .wp-block-buttons { margin-top: 10px; }
.wp-block-cover.jo-photo-banner .wp-block-button__link { color: var(--wp--preset--color--white); }
.wp-block-cover.jo-photo-banner .wp-block-button__link:hover { color: var(--wp--preset--color--charcoal); }
@keyframes jo-parallax {
from { transform: translate3d(0, -9%, 0); }
to { transform: translate3d(0, 9%, 0); }
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.wp-block-cover.jo-photo-banner .wp-block-cover__image-background {
animation: jo-parallax linear both;
animation-timeline: view();
}
}
}
/* An image block without a photo yet shows a labelled grey box. */
.wp-block-image.jo-slot:not(:has(img[src])) {
display: flex;
align-items: center;
justify-content: center;
min-height: clamp(280px, 40vw, 520px);
background: #ECEAE6;
color: var(--wp--preset--color--sage);
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini-sm);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
text-align: center;
padding: 24px;
margin: 0;
}
.wp-block-image.jo-slot:not(:has(img[src]))::before { content: attr(data-label) "Foto aan te leveren"; }
.wp-block-image.jo-slot.is-portrait:not(:has(img[src])) { aspect-ratio: 4 / 5; min-height: 0; }
.wp-block-image.jo-slot.is-square:not(:has(img[src])) { aspect-ratio: 1 / 1; min-height: 0; }
.wp-block-image.jo-slot.is-tall:not(:has(img[src])) { aspect-ratio: 3 / 4; min-height: 0; }
.wp-block-image img { display: block; width: 100%; object-fit: cover; }
.wp-block-image.is-portrait img { aspect-ratio: 4 / 5; }
.wp-block-image.is-square img { aspect-ratio: 1 / 1; }
.wp-block-image.is-tall img { aspect-ratio: 3 / 4; }
/* Verhaal hero (group version used by single-verhaal.html). */
.jo-photo-banner.is-hero:not(.wp-block-cover) { position: relative; overflow: hidden; background: var(--wp--preset--color--green-dark); min-height: clamp(460px, 72vh, 720px); display: flex; align-items: center; justify-content: center; }
.jo-photo-banner__media { position: absolute; top: -12%; left: 0; right: 0; height: 124%; }
.jo-photo-banner__media .wp-block-post-featured-image, .jo-photo-banner__media figure { width: 100%; height: 100%; margin: 0; }
.jo-photo-banner__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jo-photo-banner__overlay { position: absolute; inset: 0; background: rgba(17, 24, 6, .46); pointer-events: none; }
.jo-photo-banner__content { position: relative; width: 100%; max-width: 900px; padding: var(--wp--preset--spacing--70) clamp(24px, 5vw, 48px); display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.jo-photo-banner__content h1 { color: var(--wp--preset--color--white); margin: 0; }
.jo-photo-banner__content .wp-block-post-terms, .jo-photo-banner__content .wp-block-post-terms a { color: var(--wp--preset--color--gold); text-decoration: none; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.jo-photo-banner__media { animation: jo-parallax linear both; animation-timeline: view(); }
}
}
/* Grey placeholder for photos that Joke still has to supply. */
.jo-photo-placeholder {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background: var(--wp--custom--color--green-dark-soft);
color: var(--wp--custom--color--gold-on-green);
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini-sm);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
text-align: center;
padding: 24px;
min-height: 200px;
}
.jo-photo-placeholder.is-light { background: #ECEAE6; color: var(--wp--preset--color--sage); }
/* ------------------------------------------------------------------
Tekstbanner
------------------------------------------------------------------ */
.jo-tekst-banner { background: var(--wp--preset--color--green-dark); }
.jo-tekst-banner.is-light { background: var(--wp--preset--color--surface-light); }
.jo-tekst-banner__inner {
box-sizing: content-box; /* 900px of text, as the design; WordPress gives groups border-box */
max-width: 900px;
margin: 0 auto;
padding: var(--wp--preset--spacing--70) clamp(24px, 5vw, 48px);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
text-align: center;
}
.jo-tekst-banner .jo-mini { color: var(--wp--custom--color--gold-on-green); line-height: 1.7; }
.jo-tekst-banner.is-light .jo-mini { color: var(--wp--preset--color--gold); }
.jo-tekst-banner h1, .jo-tekst-banner h2, .jo-tekst-banner .jo-title, .jo-tekst-banner .jo-sub { color: var(--wp--preset--color--white); margin: 0; }
/* Even lines, never one word alone on the last: the 24-33 px subtitle under a page title. */
.jo-tekst-banner .jo-sub { text-wrap: balance; }
.jo-tekst-banner.is-light h1, .jo-tekst-banner.is-light h2, .jo-tekst-banner.is-light .jo-title, .jo-tekst-banner.is-light .jo-sub { color: var(--wp--preset--color--charcoal); }
.jo-tekst-banner p { margin: 0; max-width: 58ch; color: var(--wp--custom--color--text-on-dark-soft); }
.jo-tekst-banner.is-light p { color: var(--wp--custom--color--text-soft); }
.jo-tekst-banner .jo-button { margin-top: 10px; color: var(--wp--preset--color--white); }
.jo-tekst-banner.is-light .jo-button { color: var(--wp--preset--color--charcoal); }
.jo-tekst-banner .jo-button:hover { color: var(--wp--preset--color--charcoal); }
/* ------------------------------------------------------------------
Pakketten
------------------------------------------------------------------ */
.jo-pakketten .jo-container > .jo-stack.jo-stack--center { gap: 14px; }
.jo-pakketten__tabs {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: clamp(18px, 3vw, 40px);
margin: clamp(38px, 4.4vw, 58px) 0 0;
padding: 0;
list-style: none;
}
.jo-pakketten__tab {
appearance: none;
background: transparent;
border: 0;
border-bottom: 2px solid transparent;
padding: 0 0 7px;
font-family: var(--wp--preset--font-family--title);
font-size: clamp(19px, 1.8vw, 25px);
line-height: 1.2;
white-space: nowrap;
color: rgba(58, 56, 51, .42);
cursor: pointer;
transition: color var(--wp--custom--transition);
}
.jo-pakketten__tab:hover { color: var(--wp--preset--color--charcoal); }
.jo-pakketten__tab[aria-selected="true"] { color: var(--wp--preset--color--charcoal); border-bottom-color: var(--wp--preset--color--gold); }
.jo-pakketten__grid {
display: grid;
/* min(100%, …): under 360 px one card is as wide as the screen instead of 320 px (the design's 320 px
made the offer pages scroll sideways on a 320 px phone). */
grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
gap: clamp(34px, 4.5vw, 72px);
margin-top: clamp(38px, 4.4vw, 60px);
align-items: start;
}
.jo-pakketten__panel[hidden] { display: none; }
/* Text only ("fotos": false): one centred column, the note below the package. */
.jo-pakketten__grid.is-text-only { grid-template-columns: minmax(0, 1fr); max-width: 760px; margin-inline: auto; }
.jo-pakketten__grid.is-text-only .jo-pakketten__media { order: 2; }
.jo-pakketten__photo { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--charcoal); }
.jo-pakketten__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.jo-pakketten__photo .jo-photo-placeholder { height: 100%; }
.jo-pakketten__media { display: flex; flex-direction: column; gap: 26px; }
.jo-pakketten__note { display: flex; flex-direction: column; gap: 14px; }
.jo-pakketten__note .jo-mini { line-height: 1.7; }
.jo-pakketten__note p { max-width: 52ch; }
.jo-pakketten__body { display: flex; flex-direction: column; gap: 20px; }
.jo-pakketten__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.jo-pakketten__head > div { display: flex; flex-direction: column; gap: 10px; }
.jo-pakketten__name { font-size: clamp(28px, 3vw, 40px); color: var(--wp--preset--color--charcoal); margin: 0; }
.jo-pakketten__price {
flex: none;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini);
letter-spacing: var(--wp--custom--track--mini);
line-height: normal;
color: var(--wp--preset--color--sage);
padding-top: 6px;
}
.jo-pakketten__blurb { max-width: 50ch; min-height: 3.4em; margin: 0; }
.jo-pakketten__bullets { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; min-height: 270px; border-bottom: 1px solid var(--wp--custom--color--line); }
.jo-pakketten__bullets li {
display: flex;
gap: 14px;
padding: 15px 0;
border-top: 1px solid var(--wp--custom--color--line);
font-size: var(--wp--preset--font-size--body-sm);
letter-spacing: var(--wp--custom--track--body);
line-height: 1.55;
color: var(--wp--custom--color--text-soft);
}
.jo-pakketten__bullets li::before { content: "\2013"; color: var(--wp--preset--color--gold); flex: none; }
.jo-pakketten__actions { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 30px); flex-wrap: wrap; margin-top: 4px; }
.jo-pakketten__actions .jo-button { padding: 16px 32px; }
.jo-pakketten__next {
appearance: none;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
color: var(--wp--preset--color--sage);
transition: color var(--wp--custom--transition);
}
.jo-pakketten__next:hover { color: var(--wp--preset--color--gold); }
/* ------------------------------------------------------------------
Stappen
------------------------------------------------------------------ */
.jo-stappen__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
gap: clamp(30px, 3.6vw, 54px);
margin-top: clamp(44px, 5vw, 68px);
}
.jo-stap { display: flex; flex-direction: column; gap: 12px; border-top: 1px solid var(--wp--custom--color--line); padding-top: 20px; }
.jo-stappen .jo-stack--center { gap: 14px; }
/* p.jo-stap__n beats `.jo-stap p` below; the number sets no line-height in the design. */
.jo-stap p.jo-stap__n { font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini-lg); letter-spacing: var(--wp--custom--track--mini); line-height: normal; color: var(--wp--preset--color--gold); }
/* Mini tracking re-declared: `.jo-stap p` below would otherwise set the body tracking on the step title. */
.jo-stap .jo-mini { color: var(--wp--preset--color--charcoal); letter-spacing: var(--wp--custom--track--mini); }
/* .02em re-declared so it is computed at 15 px (0.3 px), not inherited from 17 px. */
.jo-stap p { margin: 0; font-size: var(--wp--preset--font-size--body-sm); letter-spacing: var(--wp--custom--track--body); color: var(--wp--custom--color--text-soft); }
/* ------------------------------------------------------------------
FAQ-blok (details/summary, keyboard native)
------------------------------------------------------------------ */
.jo-faq { background: var(--wp--preset--color--green-dark); }
.jo-faq__inner { max-width: 900px; margin: 0 auto; padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 48px); }
.jo-faq__inner > .jo-stack--center { gap: 14px; }
.jo-faq__list { margin-top: clamp(38px, 4.4vw, 56px); border-top: 1px solid rgba(195, 166, 133, .32); }
.jo-faq__item { border-bottom: 1px solid rgba(195, 166, 133, .32); }
.jo-faq__item summary {
display: flex;
justify-content: space-between;
align-items: center;
gap: 20px;
padding: 22px 2px;
cursor: pointer;
list-style: none;
color: var(--wp--preset--color--white);
font-size: var(--wp--preset--font-size--body);
line-height: 1.45;
transition: color var(--wp--custom--transition);
}
.jo-faq__item summary::-webkit-details-marker { display: none; }
.jo-faq__item summary:hover { color: var(--wp--custom--color--gold-on-green); }
.jo-faq__item summary::after { content: "+"; flex: none; font-family: var(--wp--preset--font-family--mini); font-size: 20px; line-height: normal; color: var(--wp--custom--color--gold-on-green); }
.jo-faq__item[open] summary::after { content: "\2212"; }
.jo-faq__item .jo-faq__answer,
.jo-faq__item > p { margin: 0; padding: 0 2px 24px; max-width: 64ch; font-size: var(--wp--preset--font-size--body-sm); color: rgba(255, 255, 255, .82); }
.jo-faq__answer p { margin: 0 0 12px; padding: 0; font-size: inherit; color: inherit; }
.jo-faq__answer p:last-child { margin-bottom: 0; }
.jo-faq__zin { margin: clamp(24px, 3vw, 34px) auto 0; max-width: 56ch; text-align: center; }
.jo-faq__cta { display: flex; justify-content: center; margin-top: clamp(30px, 3.4vw, 42px); }
/* ------------------------------------------------------------------
Reviews
------------------------------------------------------------------ */
.wp-block-cover.jo-reviews {
position: relative;
overflow: hidden;
background: var(--wp--preset--color--green-dark);
min-height: clamp(520px, 68vh, 720px);
padding: 0;
}
.wp-block-cover.jo-reviews .wp-block-cover__image-background { top: -12%; height: 124%; bottom: auto; }
.wp-block-cover.jo-reviews .wp-block-cover__background { opacity: .42; }
.wp-block-cover.jo-reviews .wp-block-cover__inner-container { width: 100%; max-width: 1180px; padding: clamp(64px, 8vw, 110px) clamp(24px, 5vw, 56px); text-align: left; }
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.wp-block-cover.jo-reviews .wp-block-cover__image-background { animation: jo-parallax linear both; animation-timeline: view(); }
}
}
.jo-reviews__inner { position: relative; width: 100%; }
/* Label, quote and name white, not the design's gold-on-green (Max, 01/10/2026): gold read too faint on
light photos. The light variant below sets its own colours. */
.jo-reviews .jo-mini { color: var(--wp--preset--color--white); margin: 0 0 26px; }
.jo-reviews__quote {
font-family: var(--wp--preset--font-family--title);
font-size: clamp(26px, 3.6vw, 50px);
line-height: 1.25;
letter-spacing: 0;
color: var(--wp--preset--color--white);
max-width: 24ch;
text-wrap: pretty;
min-height: 3.6em;
margin: 0;
}
.jo-reviews__quote p { margin: 0; color: inherit; }
.jo-reviews__name { display: flex; justify-content: flex-end; margin-top: clamp(20px, 3vw, 44px); }
.jo-reviews__name .jo-mini { margin: 0; }
.jo-reviews__item[hidden] { display: none; }
.jo-reviews__controls { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-top: clamp(26px, 3vw, 40px); }
.jo-reviews__nav { display: flex; align-items: center; gap: 18px; }
.jo-reviews__arrow {
appearance: none;
background: transparent;
cursor: pointer;
font-family: var(--wp--preset--font-family--mini);
font-size: 18px;
color: rgba(255, 255, 255, .7);
border: 1px solid rgba(255, 255, 255, .28);
padding: 10px 16px;
transition: border-color var(--wp--custom--transition), color var(--wp--custom--transition);
}
.jo-reviews__arrow:hover { color: var(--wp--preset--color--gold); border-color: var(--wp--preset--color--gold); }
.jo-reviews__counter { font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini-sm); letter-spacing: var(--wp--custom--track--mini); line-height: normal; color: rgba(255, 255, 255, .6); }
.jo-reviews .jo-button { color: var(--wp--preset--color--white); }
.jo-reviews .jo-button:hover { color: var(--wp--preset--color--charcoal); }
/* The light variant (stijl "licht", the home page): Home.dc.html's inline reviews, value
for value. No photo: it sits between the dark "Giving back" band and the partner logos. */
.jo-reviews.is-light { padding: clamp(72px, 9vw, 120px) clamp(20px, 5vw, 48px); }
.jo-reviews.is-light .jo-reviews__inner { max-width: 860px; margin: 0 auto; text-align: center; }
.jo-reviews.is-light .jo-reviews__mark { font-family: var(--wp--preset--font-family--title); font-size: 90px; line-height: .5; height: 44px; color: var(--wp--preset--color--gold); }
.jo-reviews.is-light .jo-mini { color: var(--wp--preset--color--sage); margin: 0 0 26px; }
.jo-reviews.is-light .jo-reviews__item { margin: 0; }
.jo-reviews.is-light .jo-reviews__name .jo-mini { margin: 0; }
.jo-reviews.is-light .jo-reviews__row { display: flex; align-items: center; gap: clamp(16px, 4vw, 40px); }
.jo-reviews.is-light .jo-reviews__items { flex: 1; min-height: 150px; }
.jo-reviews.is-light .jo-reviews__quote { font-size: clamp(20px, 2.3vw, 27px); line-height: 1.45; color: var(--wp--preset--color--charcoal); max-width: none; min-height: 0; text-wrap: wrap; }
.jo-reviews.is-light .jo-reviews__name { justify-content: center; margin-top: 20px; }
.jo-reviews.is-light .jo-reviews__arrow { flex: none; border: 0; padding: 0; font-family: var(--wp--preset--font-family--title); font-size: 30px; line-height: normal; color: var(--wp--preset--color--gold); }
.jo-reviews.is-light .jo-reviews__arrow:hover { color: var(--wp--preset--color--charcoal); }
.jo-reviews.is-light .jo-reviews__arrow[hidden] { display: none; }
/* One plain line, as the design's div around the link (not the flex row p:has(> a.jo-link) gets). */
.jo-reviews.is-light .jo-reviews__google { display: block; margin: 30px 0 0; font-size: 16px; line-height: normal; }
/* ------------------------------------------------------------------
Marquee (CSS only; one loop takes the design's 38 s)
------------------------------------------------------------------ */
.jo-marquee { background: var(--wp--preset--color--green-dark); overflow: hidden; padding: 18px 0; }
.jo-marquee__track { display: flex; width: max-content; animation: jo-marquee var(--jo-marquee-duration, 38s) linear infinite; }
.jo-marquee__group { display: flex; flex: none; }
.jo-marquee__item {
display: flex;
align-items: center;
gap: 28px;
padding-right: 28px;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini-lg);
letter-spacing: var(--wp--custom--track--mini);
text-transform: uppercase;
line-height: normal;
color: var(--wp--custom--color--gold-on-green);
white-space: nowrap;
}
.jo-marquee__item::after { content: "\00B7"; color: rgba(195, 166, 133, .55); }
@keyframes jo-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
/* Less motion: one static group that wraps, so every word stays visible (decision B13). */
@media (prefers-reduced-motion: reduce) {
.jo-marquee__track { animation: none; width: auto; }
.jo-marquee__group { flex: 1 1 100%; flex-wrap: wrap; justify-content: center; row-gap: 10px; padding-inline: clamp(20px, 5vw, 48px); }
.jo-marquee__item { white-space: normal; text-align: center; }
.jo-marquee__group + .jo-marquee__group { display: none; }
}
/* ------------------------------------------------------------------
Inspireren (brochure form)
------------------------------------------------------------------ */
.jo-inspireren__form { display: flex; flex-direction: column; gap: 16px; max-width: 460px; }
.jo-inspireren__row { display: flex; flex-wrap: wrap; }
.jo-inspireren__row input[type="email"] {
flex: 1 1 200px;
min-width: 0;
padding: 15px 16px;
border: 1px solid rgba(26, 26, 26, .25);
border-right: none;
font-family: var(--wp--preset--font-family--body);
font-size: 14px;
letter-spacing: var(--wp--custom--track--body);
line-height: normal;
color: var(--wp--preset--color--charcoal);
background: var(--wp--preset--color--white);
outline: none;
}
.jo-inspireren__row input[type="email"]:focus { border-color: var(--wp--preset--color--gold); }
.jo-inspireren__row .jo-button {
flex: 0 0 auto;
padding: 15px 24px;
background: var(--wp--preset--color--gold);
font-size: var(--wp--preset--font-size--mini-sm);
white-space: nowrap;
}
.jo-inspireren__row .jo-button:hover { opacity: .85; }
.jo-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--wp--preset--font-size--body-sm); letter-spacing: var(--wp--custom--track--body); line-height: 1.55; color: var(--wp--custom--color--text-soft); }
.jo-check input { margin: 3px 0 0; width: 15px; height: 15px; accent-color: var(--wp--preset--color--gold); flex: none; }
.jo-form-hint { font-size: 13px; line-height: 1.5; letter-spacing: var(--wp--custom--track--body); color: var(--wp--preset--color--sage); }
.jo-inspireren__form .jo-form-hint { line-height: 1.6; }
/* ------------------------------------------------------------------
Footer
------------------------------------------------------------------ */
.jo-cadeaubon {
border-top: 1px solid rgba(26, 26, 26, .08);
background: var(--wp--preset--color--surface-light);
padding: clamp(56px, 7vw, 84px) 24px;
display: flex;
flex-direction: column;
align-items: center;
gap: 16px;
text-align: center;
}
.jo-cadeaubon p { max-width: 46ch; margin: 0; }
.jo-cadeaubon .jo-link { margin-top: 6px; }
/* Footer.dc.html has 28–44 px here, which read too tight under the closing photo banner on every page.
Now the section padding (spacing 70, 64–120 px), the white every section gets under a full-bleed
banner. A text page (privacybeleid, voorwaarden) that ends the page drops its own bottom padding, so
it isn't doubled; with a block after it, :last-child no longer matches and it keeps it. */
.jo-footer-gap { background: var(--wp--preset--color--surface-light); height: var(--wp--preset--spacing--70); }
.jo-tekstpagina:last-child { padding-bottom: 0; }
.jo-instagram { background: var(--wp--preset--color--surface-light); padding: 0 clamp(16px, 4vw, 48px) clamp(56px, 7vw, 84px); text-align: center; line-height: normal; }
.jo-instagram .jo-mini { color: var(--wp--preset--color--sage); margin-bottom: 14px; }
.jo-instagram__handle { display: inline-block; margin-bottom: 34px; font-size: var(--wp--preset--font-size--mini-lg); text-transform: none; padding-bottom: 6px; }
/* Under 360 px the 17 px handle (322 px without its arrow) is wider than the screen and made every page
scroll sideways on a 320 px phone, the design too: there it shrinks to fit between the 16 px gutters. */
@media (max-width: 359px) { .jo-instagram__handle { font-size: calc((100vw - 32px) / 22); } }
.jo-instagram__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; max-width: 1280px; margin: 0 auto; }
.jo-instagram__grid a { position: relative; display: block; min-width: 0; }
.jo-instagram__grid img, .jo-instagram__grid .jo-photo-placeholder { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; min-height: 0; overflow: hidden; box-sizing: border-box; font-size: 12px; }
.jo-instagram__grid .jo-photo-placeholder { padding: 12px; }
.jo-header__mobile .jo-header__logo img { height: 52px; }
.jo-instagram__grid a::after { content: ""; position: absolute; inset: 0; background: rgba(26, 26, 26, .35); opacity: 0; transition: opacity var(--wp--custom--transition); }
.jo-instagram__grid a:hover::after { opacity: 1; }
/* Video tile: a permanent tint with a play icon instead of the hover layer (Footer.dc.html). */
.jo-instagram__play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(26, 26, 26, .18); transition: background var(--wp--custom--transition); z-index: 1; }
.jo-instagram__grid a:hover .jo-instagram__play { background: rgba(26, 26, 26, .4); }
.jo-instagram__grid a:has(.jo-instagram__play)::after { display: none; }
.jo-instagram__multi { position: absolute; top: 12px; right: 12px; display: flex; }
.jo-footer { background: var(--wp--preset--color--surface-dark); padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 48px) 0; line-height: normal; }
.jo-footer__top { max-width: 1280px; margin: 0 auto; display: flex; align-items: flex-end; flex-wrap: wrap; }
.jo-footer__cols { flex: 1 1 620px; min-width: 300px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: clamp(26px, 3vw, 48px); }
.jo-footer__col { display: flex; flex-direction: column; gap: 9px; }
.jo-footer__col .jo-mini { margin-bottom: 8px; }
.jo-footer__col a,
.jo-footer__col .wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--body);
font-size: 13px;
letter-spacing: var(--wp--custom--track--nav);
text-transform: uppercase;
color: var(--wp--preset--color--sage);
text-decoration: none;
width: fit-content;
transition: color var(--wp--custom--transition);
}
.jo-footer__col a:hover,
.jo-footer__col .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--gold); }
.jo-footer__col .wp-block-navigation { gap: 9px; }
.jo-footer__col .wp-block-navigation .wp-block-navigation__container { display: flex; flex-direction: column; gap: 9px; }
.jo-footer__rule { height: 1px; background: rgba(195, 166, 133, .28); margin: 7px 0; width: 70%; }
.jo-footer__col .is-plain { text-transform: none; letter-spacing: .03em; }
.jo-footer__col .is-white { color: var(--wp--preset--color--white); padding-bottom: 2px; }
.jo-footer__col .jo-social { display: flex; align-items: center; gap: 9px; }
.jo-footer__col .jo-social svg { width: 16px; height: 16px; display: block; fill: var(--wp--preset--color--gold); }
/* The first social link sits 6px further below the address (Footer.dc.html:89). */
.jo-footer__col address + .jo-social { margin-top: 6px; }
.jo-footer__col address { font-style: normal; font-size: 13px; letter-spacing: .03em; color: var(--wp--preset--color--sage); }
.jo-footer__logo { width: clamp(190px, 21vw, 290px); display: block; margin-left: clamp(-34px, -2vw, -12px); margin-bottom: -6px; flex: 0 0 auto; }
.jo-footer__logo img, .jo-footer__logo .custom-logo { width: 100%; height: auto; display: block; }
.jo-footer__logo .jo-header__wordmark { font-size: clamp(26px, 2.6vw, 34px); }
/* "Storytelling Photographer · Leuven" under Jo–Photography (Joke, 11/10/2026). It never fits one
line in a column; balance breaks it as STORYTELLING / PHOTOGRAPHER · LEUVEN, and the no-break
space in the pattern keeps the dot with Leuven. */
.jo-footer__col .jo-footer__tagline {
font-family: var(--wp--preset--font-family--mini);
font-size: 11px;
letter-spacing: var(--wp--custom--track--nav);
line-height: 1.5;
text-transform: uppercase;
text-wrap: balance;
color: var(--wp--preset--color--sage);
margin: -4px 0 4px;
}
/* The big logo (Joke, 11/10/2026): from 1320 px it is 380 px wide beside Contact and the screen edge
cuts 15% off its right side; from 1680 px, where that edge lies far from the content, it is whole,
120 px past the content edge, so it stays next to Contact. Below 1320 px four columns and a big logo
don't fit side by side, and the in-flow .jo-footer__logo stays as it was.
It sits inside the Contact column so "PHOTOGRAPHY" can share the baseline of that column's last
line, wherever the column's content ends. assets/logo-white.png is 640 × 453 with that word's
baseline on row 347.5, i.e. .1648 × the logo's width above its bottom; a 15% cut clips the
circle, not the word. --descent is the last line's baseline above the column's bottom.
The columns keep 250 px free on the right, enough for 4 columns of menu without wrapping
"Zwangerschap & Newborn"; with more columns Contact moves to a second row and this breaks. */
.jo-footer__logo-bleed { display: none; }
@media (min-width: 1320px) {
.jo-footer.has-bleed-logo { overflow-x: clip; container-type: inline-size; }
.has-bleed-logo .jo-footer__top { padding-right: 250px; box-sizing: border-box; }
.has-bleed-logo .jo-footer__top > .jo-footer__logo { display: none; }
.has-bleed-logo #contact { position: relative; align-self: start; }
.jo-footer__logo-bleed {
--w: min(380px, 28vw);
/* The footer's 48 px padding plus the margin beside the 1280 px content (100cqw: the footer's content box). */
--gutter: calc(48px + max(0px, (100cqw - 1280px) / 2));
--over: calc(var(--gutter) + .15 * var(--w));
--descent: 3px;
display: block;
position: absolute;
width: var(--w);
right: calc(-250px - var(--over));
bottom: calc(var(--descent) - .1648 * var(--w));
}
.jo-footer__logo-bleed img { width: 100%; height: auto; display: block; }
}
@media (min-width: 1680px) {
.jo-footer__logo-bleed { --over: 120px; }
}
.jo-footer__newsletter {
max-width: 1280px;
margin: clamp(38px, 4vw, 56px) auto 0;
border-top: 1px solid var(--wp--custom--color--line-on-dark);
padding-top: clamp(30px, 3.5vw, 44px);
display: flex;
flex-wrap: wrap;
gap: clamp(20px, 3vw, 44px);
align-items: flex-start;
}
.jo-footer__newsletter-text { flex: 1 1 300px; min-width: 260px; display: flex; flex-direction: column; gap: 8px; }
.jo-footer__newsletter-text p { margin: 0; max-width: 44ch; font-size: var(--wp--preset--font-size--body-sm); letter-spacing: var(--wp--custom--track--body); line-height: var(--wp--custom--line-height--body); color: var(--wp--custom--color--white-70); }
.jo-footer__form { flex: 1 1 420px; min-width: 280px; display: flex; flex-wrap: wrap; gap: 10px; align-items: stretch; }
.jo-footer__form input {
flex: 1 1 130px;
min-width: 120px;
background: transparent;
border: 1px solid rgba(255, 255, 255, .2);
color: var(--wp--preset--color--white);
font-family: var(--wp--preset--font-family--body);
font-size: 13px;
letter-spacing: var(--wp--custom--track--body);
line-height: normal;
padding: 12px 14px;
box-sizing: content-box; /* as the design: the button wraps at 1024 */
width: auto;
outline: none;
}
.jo-footer__form input[type="email"] { flex: 1 1 170px; min-width: 150px; }
.jo-footer__form input:focus { border-color: var(--wp--preset--color--gold); }
.jo-footer__form .jo-button { flex: 0 0 auto; color: var(--wp--preset--color--gold); font-size: var(--wp--preset--font-size--mini-sm); padding: 12px 20px; }
.jo-footer__form .jo-button:hover { color: var(--wp--preset--color--charcoal); }
.jo-footer__bottom {
border-top: 1px solid var(--wp--custom--color--line-on-dark);
margin-top: clamp(30px, 3.5vw, 44px);
padding: 20px 0 22px;
text-align: center;
font-family: var(--wp--preset--font-family--mini);
font-size: var(--wp--preset--font-size--mini-sm);
letter-spacing: .08em;
color: var(--wp--preset--color--sage);
}
.jo-footer__bottom p { margin: 0; color: inherit; }
.jo-whatsapp {
position: fixed;
right: 26px;
bottom: calc(26px + var(--jo-consent-h, 0px));
width: 54px;
height: 54px;
background: var(--wp--custom--color--wa-green);
display: flex;
align-items: center;
justify-content: center;
z-index: 300;
transition: opacity var(--wp--custom--transition);
}
.jo-whatsapp:hover { opacity: .86; }
.jo-whatsapp svg { width: 26px; height: 26px; fill: var(--wp--preset--color--white); }
/* A story's first screen ends with "← Terug naar alle verhalen" (full width on a phone),
under a hero of clamp(460px, 72vh, 720px): lift the button above it (STATUS decision 10).
28vh - 118px keeps it about 20px clear of the button from 640 to 930px of screen height. */
body.single-verhaal .jo-whatsapp { bottom: calc(max(26px, 28vh - 118px) + var(--jo-consent-h, 0px)); }
/* Cookie banner for Google Analytics (assets/js/consent.js), only when a Measurement ID is
set. Above the WhatsApp button, which moves up while it shows; under the open mobile menu
(the header is 500 then). Accepteren and Weigeren look the same on purpose. */
.jo-consent {
position: fixed;
left: 0;
right: 0;
bottom: 0;
z-index: 350;
background: var(--wp--preset--color--green-dark);
color: var(--wp--preset--color--white);
border-top: 1px solid var(--wp--custom--color--line-on-dark);
padding: 20px var(--wp--preset--spacing--80) calc(20px + env(safe-area-inset-bottom, 0px));
}
.jo-consent:focus { outline: none; }
.jo-consent:focus-visible { outline: 2px solid var(--wp--preset--color--gold); outline-offset: -4px; }
.jo-consent__inner { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 40px; }
.jo-consent__text { flex: 1 1 420px; margin: 0; }
.jo-consent__title { margin: 0 0 6px; color: var(--wp--custom--color--gold-on-green); }
.jo-consent__text p { margin: 0; font-size: var(--wp--preset--font-size--body-sm); line-height: 1.6; color: var(--wp--preset--color--white); }
.jo-consent__text a { color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 3px; }
/* Two equal columns: neither choice is bigger than the other, whatever its word. */
.jo-consent__actions { display: grid; grid-template-columns: repeat(2, minmax(150px, 1fr)); gap: 12px; }
.jo-consent .jo-button { text-align: center; color: var(--wp--preset--color--white); }
.jo-consent .jo-button:hover, .jo-consent .jo-button:focus-visible { color: var(--wp--preset--color--charcoal); background: var(--wp--preset--color--gold); }
@media (max-width: 560px) {
.jo-consent { padding-top: 16px; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); }
.jo-consent__actions { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.jo-consent .jo-button { padding: 14px 12px; }
}
.jo-footer__cookies {
margin-top: 8px;
padding: 4px 2px;
background: none;
border: 0;
font: inherit;
letter-spacing: inherit;
color: inherit;
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.jo-footer__cookies:hover { color: var(--wp--preset--color--gold); }
/* The banner exists only on the website, never in the editor canvas; hide it there anyway. */
.editor-styles-wrapper .jo-consent { display: none; }
/* ------------------------------------------------------------------
Verhalen (archive and single)
------------------------------------------------------------------ */
/* Verhalen archive (jo/verhalen block): tabs on a light band, one section per category, 4:5 tiles with a hover overlay. */
.jo-verhalen__tabs { background: var(--wp--preset--color--surface-light); padding: clamp(44px, 5.5vw, 76px) var(--wp--preset--spacing--80) clamp(28px, 3.5vw, 48px); display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(18px, 3vw, 44px); }
.jo-verhalen__tab { font-family: var(--wp--preset--font-family--title); font-weight: var(--wp--custom--weight--title); font-size: clamp(19px, 1.8vw, 25px); line-height: 1.2; letter-spacing: 0; text-decoration: none; padding-bottom: 7px; white-space: nowrap; color: rgba(58, 56, 51, .42); border-bottom: 2px solid transparent; transition: color var(--wp--custom--transition); }
.jo-verhalen__tab:hover { color: var(--wp--preset--color--charcoal); }
.jo-verhalen__tab.is-active { color: var(--wp--preset--color--charcoal); border-bottom-color: var(--wp--preset--color--gold); }
.jo-verhalen__section { padding: clamp(40px, 5vw, 72px) var(--wp--preset--spacing--80) clamp(48px, 6vw, 88px); scroll-margin-top: 110px; }
.jo-verhalen__section .jo-stack--center { gap: 14px; }
.jo-verhalen__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(14px, 1.8vw, 24px); margin-top: clamp(30px, 3.6vw, 50px); }
.jo-verhalen__tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--wp--preset--color--green-dark); text-decoration: none; color: var(--wp--preset--color--white); }
.jo-verhalen__tile img, .jo-verhalen__tile .jo-photo-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.jo-verhalen__overlay { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 10px; padding: 28px 24px; text-align: center; background: linear-gradient(180deg, rgba(17, 24, 6, 0) 40%, rgba(17, 24, 6, .72) 100%); opacity: 0; transition: opacity var(--wp--custom--transition); }
.jo-verhalen__tile:hover .jo-verhalen__overlay, .jo-verhalen__tile:focus-visible .jo-verhalen__overlay { opacity: 1; }
@media (hover: none) { .jo-verhalen__overlay { opacity: 1; } }
.jo-verhalen__overlay .jo-mini { color: var(--wp--custom--color--gold-on-green); }
.jo-verhalen__cat { font-family: var(--wp--preset--font-family--title); font-weight: var(--wp--custom--weight--title); font-size: clamp(24px, 2.2vw, 32px); line-height: 1.15; letter-spacing: 0; }
.jo-verhalen__cta { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 32px; text-align: center; }
.jo-verhalen__cta .jo-mini { color: var(--wp--custom--color--gold-on-green); }
.jo-verhalen__cta-title { font-size: var(--wp--preset--font-size--title-lg); color: var(--wp--preset--color--white); }
.jo-verhalen__cta .jo-button { margin-top: 8px; color: var(--wp--preset--color--white); }
.jo-verhalen__tile.is-cta:hover .jo-button { background: var(--wp--preset--color--gold); color: var(--wp--preset--color--charcoal); }
.jo-verhalen__empty { text-align: center; padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--80); }
/* Albums off (JO_STORY_ALBUMS): the stories' photos as one flat grid, whole photos in
columns, no links (like the old site's gallery). */
.jo-verhalen.is-flat { padding: 0 var(--wp--preset--spacing--80); }
.jo-verhalen__flat { columns: 3 280px; column-gap: clamp(10px, 1.4vw, 18px); padding-top: clamp(40px, 5vw, 72px); padding-bottom: clamp(48px, 6vw, 88px); }
.jo-verhalen__flat img { display: block; width: 100%; height: auto; margin: 0 0 clamp(10px, 1.4vw, 18px); break-inside: avoid; }
@media (max-width: 700px) { .jo-verhalen__flat { columns: 2; } }
/* Single Verhaal. Core's gallery CSS uses :not(#individual-image) for specificity, so we do too. */
.jo-verhaal__bar-wrap { padding: clamp(28px, 3.5vw, 44px) var(--wp--preset--spacing--80) 0; }
.jo-verhaal__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; border-bottom: 1px solid var(--wp--custom--color--line); padding-bottom: clamp(22px, 2.6vw, 32px); }
.jo-verhaal__bar-title { font-family: var(--wp--preset--font-family--mini); font-weight: 400; font-size: var(--wp--preset--font-size--mini-lg); letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--gold); margin: 0; }
.jo-verhaal__back .wp-block-button__link { padding: 13px 24px; }
/* Intro and gallery use the smaller story padding (Verhaal.dc.html Intro, Galerij); 0,2,0 so it wins over .jo-section and its modifiers. */
.jo-section.jo-verhaal__intro-wrap { padding-top: clamp(48px, 6vw, 88px); }
.jo-section.jo-verhaal__gallery-wrap { padding-top: clamp(48px, 6vw, 88px); padding-bottom: clamp(48px, 6vw, 88px); }
.jo-verhaal__intro { max-width: 660px; margin: 0 auto; text-align: center; gap: 16px; }
.jo-verhaal__intro .jo-body { text-wrap: pretty; }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(12px, 1.8vw, 24px); --wp--style--gallery-gap-default: clamp(12px, 1.8vw, 24px); }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { width: auto; margin: 0; display: block; overflow: hidden; background: var(--wp--preset--color--green-dark); }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+1),
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+2) { grid-column: span 3; aspect-ratio: 4 / 5; }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+3) { grid-column: span 6; aspect-ratio: 3 / 2; }
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+4),
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+5),
.jo-verhaal__gallery .wp-block-gallery.has-nested-images figure.wp-block-image:nth-child(6n+6) { grid-column: span 2; aspect-ratio: 3 / 4; }
.jo-verhaal__nav { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: center; border-top: 1px solid var(--wp--custom--color--line); padding-top: clamp(28px, 3.5vw, 44px); }
.jo-verhaal__nav .wp-block-post-navigation-link { display: flex; flex-direction: column; gap: 8px; font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini-sm); line-height: normal; letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--gold); }
.jo-verhaal__nav .jo-verhaal__next { text-align: right; align-items: flex-end; grid-column: 3; }
.jo-verhaal__nav .jo-verhaal__prev { grid-column: 1; }
.jo-verhaal__nav .jo-verhaal__all { grid-column: 2; }
/* A story without a previous or next one keeps that column's width, as the design's invisible link
does (Verhaal.dc.html:73,78, opacity 0), so a long "Alle " wraps the same way on a phone.
visibility: hidden keeps the placeholder out of sight and out of the accessibility tree. */
.jo-verhaal__nav .jo-verhaal__prev:not(:has(a))::before { content: "\2190 Vorige verhaal"; visibility: hidden; }
.jo-verhaal__nav .jo-verhaal__next:not(:has(a))::before { content: "Volgende verhaal \2192"; visibility: hidden; }
.jo-verhaal__nav .wp-block-post-navigation-link a { font-family: var(--wp--preset--font-family--title); font-weight: var(--wp--custom--weight--title); font-size: clamp(18px, 1.6vw, 24px); line-height: normal; letter-spacing: 0; text-transform: none; color: var(--wp--preset--color--charcoal); text-decoration: none; }
.jo-verhaal__nav .wp-block-post-navigation-link a:hover { color: var(--wp--preset--color--gold); }
/* text-align: left as the design's plain link, where a long category name wraps at phone width (core centres button text).
word-break: normal undoes core's break-word, which split "BRANDING" and "LIFESTYLE" mid-word under 360 px. */
.jo-verhaal__all .wp-block-button__link { border: 0; padding: 0; font-size: var(--wp--preset--font-size--mini-sm); text-align: left; word-break: normal; color: rgba(58, 56, 51, .6); background: transparent; }
.jo-verhaal__all .wp-block-button__link:hover { color: var(--wp--preset--color--charcoal); background: transparent; }
/* Editor-only helpers. */
.editor-styles-wrapper .jo-photo-banner { min-height: 320px; }
/* Blok 4 collage: tall image left, portrait + square right. */
.jo-collage { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(14px, 2vw, 26px); align-items: start; }
/* 0,3,0 so the lift survives the flow-layout first-child margin reset. */
.jo-collage > .jo-collage__a.wp-block-image { margin-block-start: clamp(0px, 5vw, 64px); }
.jo-collage__col { display: flex; flex-direction: column; gap: clamp(14px, 2vw, 26px); }
/* Full column width; the margin makes the square overhang its column, as designed.
An empty slot stays inside the margin, like the design's (Boudoir.dc.html:79). */
.jo-collage__c { width: 100%; margin-left: clamp(0px, 3vw, 34px); }
.jo-collage__c:has(img[src*="/assets/img/slot-"]) { width: auto; }
.jo-photo-pair .wp-block-image.jo-slot img { height: clamp(320px, 44vw, 540px); }
.jo-section--flush-top { padding-top: 0; }
/* Flush-top counts on the block above for its white. Straight under a dark text banner there is none:
the FAQ questions, while the Huwelijksgids block between them is off, sat against the hero. */
.jo-tekst-banner:not(.is-light) + .jo-section--flush-top { padding-top: var(--wp--preset--spacing--70); }
/* Aanbodpagina: spacing details from Huwelijk.dc.html (B2 comparison). */
.jo-blok-2.is-lines .jo-split > .jo-stack { gap: 0; }
.jo-blok-2.is-lines .jo-split > .jo-stack > .jo-mini { margin-bottom: 24px; }
.jo-blok-2.is-lines .jo-split > .jo-stack > .jo-body { margin-top: 26px; }
/* Blok 1 (Familie.dc.html): part gap, photo pair -> text gap, and a 660 px text column. */
.jo-blok-1 > .jo-container { gap: var(--wp--preset--spacing--60); }
.jo-blok-1 > .jo-container > .jo-stack { gap: var(--wp--preset--spacing--50); }
.jo-blok-1 .jo-stack--center.jo-container--narrow { max-width: 660px; margin-inline: auto; gap: 16px; }
/* Blok 2 and Blok 4 paragraphs use a 46ch measure. */
.jo-blok-2 .jo-measure,
.jo-blok-4 .jo-measure { max-width: 46ch; }
.jo-blok-4 { padding-top: clamp(40px, 6vw, 90px); }
.jo-blok-4.is-triptych > .jo-container.jo-stack { gap: var(--wp--preset--spacing--50); }
/* The dash list sits 4 px lower than the stack gap (Huwelijk.dc.html:84). */
.jo-blok-4 .wp-block-list.is-style-dashes { margin-top: 4px; }
.jo-blok-4 .jo-blok-4__quote { line-height: 1.2; margin: 0; }
.jo-blok-4 .jo-blok-4__quote.is-centered { max-width: 760px; margin: 0 auto; }
.jo-blok-4 .jo-stack > .jo-mini.is-color-sage { line-height: 1.7; }
.jo-blok-4 .jo-mini.is-color-sage a { color: var(--wp--preset--color--gold); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--gold); }
.jo-collage.is-mirrored .jo-collage__c { margin-left: 0; margin-right: clamp(0px, 3vw, 34px); }
.jo-triptych { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: clamp(14px, 2vw, 26px); }
.jo-triptych.is-lift-middle { align-items: end; }
.jo-triptych.is-lift-middle > :nth-child(2) { margin-bottom: clamp(0px, 4vw, 56px); }
.jo-triptych.is-lift-sides { align-items: start; }
.jo-triptych.is-lift-sides > :nth-child(odd) { margin-top: clamp(0px, 4vw, 56px); }
.wp-block-image.jo-slot.is-landscape:not(:has(img[src])) { aspect-ratio: 5 / 4; min-height: 0; }
.wp-block-image.jo-slot.is-wide:not(:has(img[src])) { aspect-ratio: 4 / 3; min-height: 0; }
.wp-block-image.is-landscape img { aspect-ratio: 5 / 4; }
.wp-block-image.is-wide img { aspect-ratio: 4 / 3; }
.jo-slot img { width: 100%; object-fit: cover; }
/* ------------------------------------------------------------------
Shared helpers added in B4
------------------------------------------------------------------ */
.jo-mini.is-white { color: var(--wp--preset--color--white); }
.jo-mini.is-normal-case { text-transform: none; }
.jo-stack.is-tight { gap: 14px; }
.jo-container.jo-container--wide { max-width: 1320px; }
.jo-quote-sage { font-family: var(--wp--preset--font-family--title); font-size: 19px; line-height: var(--wp--custom--line-height--body); letter-spacing: 0; color: var(--wp--preset--color--sage); max-width: 44ch; margin: 0; }
.jo-signoff { display: flex; flex-direction: column; gap: 8px; margin-top: 6px; }
.jo-signoff p { margin: 0; line-height: normal; }
/* Crossfading slideshow: a core/gallery with the class jo-slides. Figures
stack on top of each other; theme.js switches .is-active (autoplay on the
hero, on hover/focus of the tabs in the "Wat ik doe" block, arrows on
Over mij). Without JS the first photo shows. */
.jo-slides.wp-block-gallery.has-nested-images { position: relative; display: block; overflow: hidden; background: var(--wp--preset--color--charcoal); }
.jo-slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; transition: opacity 1.2s ease; }
.jo-slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child,
.jo-slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image).is-active { opacity: 1; }
.jo-slides.has-js.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):first-child:not(.is-active) { opacity: 0; }
.jo-slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) img { width: 100%; height: 100%; object-fit: cover; }
.jo-slides__counter { font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini-sm); letter-spacing: var(--wp--custom--track--mini); line-height: normal; color: rgba(255, 255, 255, .72); }
.jo-slides__nav { display: flex; justify-content: flex-end; align-items: center; gap: 22px; margin-top: 28px; }
.jo-slides__nav .jo-slides__counter { color: var(--wp--preset--color--gold); }
.jo-slides__arrow { background: none; border: 0; cursor: pointer; font-family: var(--wp--preset--font-family--mini); font-size: 20px; color: var(--wp--preset--color--charcoal); padding: 8px 12px; transition: color var(--wp--custom--transition); }
.jo-slides__arrow:hover { color: var(--wp--preset--color--gold); }
@media (prefers-reduced-motion: reduce) { .jo-slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { transition: none; } }
/* ------------------------------------------------------------------
Home
------------------------------------------------------------------ */
.jo-home-hero { position: relative; height: clamp(560px, 86vh, 900px); background: var(--wp--preset--color--charcoal); overflow: hidden; }
.jo-home-hero .jo-slides.wp-block-gallery.has-nested-images { position: absolute; inset: 0; margin: 0; }
.jo-home-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(17, 24, 6, .80) 0%, rgba(17, 24, 6, .22) 52%, rgba(17, 24, 6, .38) 100%); pointer-events: none; }
.jo-home-hero__content { position: absolute; z-index: 1; left: clamp(20px, 5vw, 72px); right: clamp(20px, 5vw, 72px); bottom: clamp(44px, 7vh, 96px); display: flex; flex-direction: column; gap: 24px; }
.jo-home-hero__content > * { margin: 0; }
.jo-home-hero__content .jo-mini { font-weight: 500; }
.jo-home-hero__content h1 { color: var(--wp--preset--color--white); max-width: 13ch; text-wrap: pretty; }
.jo-home-hero__links { display: flex; gap: clamp(20px, 3vw, 40px); align-items: center; flex-wrap: wrap; margin-top: 4px; }
.jo-home-hero__links .jo-link { color: var(--wp--preset--color--white); padding-bottom: 6px; }
.jo-home-hero__links .jo-link:hover { color: var(--wp--preset--color--gold); }
.jo-home-hero__anchor { font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini); letter-spacing: var(--wp--custom--track--mini); line-height: normal; text-transform: uppercase; color: rgba(255, 255, 255, .66); text-decoration: none; transition: color var(--wp--custom--transition); }
.jo-home-hero__anchor:hover { color: var(--wp--preset--color--gold); }
.jo-home-aanbod { padding: clamp(72px, 9vw, 130px) var(--wp--preset--spacing--80); scroll-margin-top: 90px; }
/* 1320px: the outer edges of the Recente verhalen cards (.jo-container--wide), shared with Hallo. */
.jo-home-aanbod .jo-container { max-width: 1320px; }
.jo-home-aanbod .jo-container.jo-stack { gap: clamp(44px, 5vw, 72px); }
.jo-home-aanbod__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: clamp(40px, 5vw, 72px); }
.jo-home-aanbod__col { gap: 22px; }
/* Side by side (from 756px, where the grid above fits two 320px columns and the 40px gap inside
5vw padding), both columns share one set of rows, so each text starts level however the tabs
wrap. A subgrid takes its row gutters from the grid, hence row-gap 22px there. span 4: the
column's four blocks (photos, label, tabs, text); a fifth would land on the text's row. */
@media (min-width: 756px) {
.jo-home-aanbod__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 22px; }
.jo-home-aanbod__col { display: grid; grid-template-rows: subgrid; grid-row: span 4; }
.jo-home-aanbod__tabs { align-self: start; }
}
.jo-home-aanbod__images.wp-block-gallery.has-nested-images { aspect-ratio: 3 / 4; }
.jo-home-aanbod__images.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { transition: opacity .5s ease, visibility .5s; }
/* Every photo links to its tab's page; a hidden photo (opacity 0) must not catch the click or the focus. */
.jo-home-aanbod__images.has-js.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):not(.is-active),
.jo-home-aanbod__images:not(.has-js).wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image):not(:first-child) { visibility: hidden; }
.jo-home-aanbod__tabs { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 22px; align-items: baseline; }
/* display:block: the tab is its own box as in the design (a flex item), so the 's 1.7 line box does not add height. */
.jo-home-aanbod__tabs a { display: block; font-family: var(--wp--preset--font-family--title); font-weight: 400; letter-spacing: 0; font-size: clamp(17px, 1.5vw, 21px); line-height: 1.2; text-decoration: none; padding-bottom: 5px; color: rgba(58, 56, 51, .42); border-bottom: 1px solid transparent; transition: color var(--wp--custom--transition); }
.jo-home-aanbod__tabs a:hover, .jo-home-aanbod__tabs a:focus-visible { color: var(--wp--preset--color--charcoal); }
.jo-home-aanbod__tabs li:first-child a, .jo-home-aanbod__tabs.has-js a.is-active { color: var(--wp--preset--color--charcoal); border-bottom-color: var(--wp--preset--color--gold); }
.jo-home-aanbod__tabs.has-js li:first-child a:not(.is-active) { color: rgba(58, 56, 51, .42); border-bottom-color: transparent; }
.jo-home-aanbod__tabs.has-js li:first-child a:not(.is-active):hover { color: var(--wp--preset--color--charcoal); }
.jo-home-hallo { padding-bottom: clamp(72px, 9vw, 130px); }
/* The width and gap of the aanbod grid above (.jo-home-aanbod .jo-container, __grid), so the text
and the photo's gold frame line up with its two columns of photos, and the outer edges with the
Recente verhalen cards below, at every width. */
.jo-home-hallo .jo-split--mid { max-width: 1320px; gap: clamp(40px, 5vw, 72px); grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.jo-home-hallo .jo-split > .jo-stack { gap: 20px; }
.jo-home-hallo .jo-split > .jo-stack > p:last-child { margin-top: 8px; }
.jo-home-spotlights { padding-bottom: clamp(72px, 9vw, 130px); }
.jo-home-spotlights .jo-container.jo-stack { gap: 0; }
.jo-home-spotlights .jo-cards { margin-top: clamp(44px, 5vw, 68px); }
.jo-home-spotlights .wp-block-buttons { margin-top: clamp(40px, 5vw, 60px); }
.jo-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: clamp(26px, 3vw, 44px); }
.jo-card { position: relative; display: flex; flex-direction: column; gap: 14px; }
.jo-card p { margin: 0; }
.jo-card .jo-mini a { text-decoration: none; color: inherit; }
/* One link for the whole card (photo, label and text), as the design's card-wide . */
.jo-card .jo-mini a::after { content: ""; position: absolute; inset: 0; }
.wp-block-cover.jo-photo-banner.is-giving { min-height: clamp(520px, 72vh, 760px); }
.wp-block-cover.jo-photo-banner.is-giving .wp-block-cover__background { opacity: .56; }
.wp-block-cover.jo-photo-banner.is-giving .wp-block-cover__inner-container { max-width: 760px; gap: 20px; }
/* Static full-bleed photo: the design's Giving back has no parallax. */
.wp-block-cover.jo-photo-banner.is-giving .wp-block-cover__image-background { object-position: center 22%; top: 0; height: 100%; animation: none; }
.wp-block-cover.jo-photo-banner.is-giving p:not(.jo-mini):not(.jo-photo-banner__quote) { color: rgba(255, 255, 255, .84); }
.wp-block-cover.jo-photo-banner.is-giving .wp-block-buttons { margin-top: 8px; }
.jo-collabs { padding-top: 0; padding-bottom: clamp(72px, 9vw, 120px); }
.jo-collabs .jo-mini { margin: 0; }
.jo-collabs .jo-stack { gap: 36px; }
/* Wider than the design's 1080 as headroom: eight logos with 64 px gaps need 1072 px on one line. The row
is centred, so nothing visibly moves. */
.jo-collabs > .jo-container { max-width: 1240px; }
.jo-collabs__row { --jo-collabs-gap: clamp(32px, 5vw, 64px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: var(--jo-collabs-gap); }
/* Eight logos: one line from 1180 px, then 4 + 4, then 2 + 3 + 3 with 24 px gaps under 600 px (zoom .85
under 360 px). ::before and ::after are full-width breaks placed by order; their height is the gap
between lines, so row-gap is 0. Only figures count, not the editor's + button; any other number of logos
wraps freely, so recount the splits then. */
.jo-collabs__row::before, .jo-collabs__row::after { content: ""; display: none; flex-basis: 100%; height: var(--jo-collabs-gap); }
@media (max-width: 1179px) {
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type) { row-gap: 0; }
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type)::before { display: block; order: 1; }
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type) > :nth-child(n + 5) { order: 2; }
}
@media (max-width: 599px) {
.jo-collabs__row { --jo-collabs-gap: 24px; }
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type)::after { display: block; order: 3; }
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type) > :nth-child(n + 3) { order: 2; }
.jo-collabs__row:has(> figure:nth-of-type(8):last-of-type) > :nth-child(n + 6) { order: 4; }
}
@media (max-width: 359px) { .jo-collabs__row { zoom: .85; } }
.jo-collabs__row .wp-block-image { --jo-logo-h: 36px; margin: 0; }
.jo-collabs__row .wp-block-image.is-h20 { --jo-logo-h: 20px; }
.jo-collabs__row .wp-block-image.is-h30 { --jo-logo-h: 30px; }
.jo-collabs__row .wp-block-image.is-h44 { --jo-logo-h: 44px; }
.jo-collabs__row .wp-block-image img { width: auto; height: var(--jo-logo-h); filter: grayscale(1); opacity: .55; object-fit: contain; }
/* The editor puts style="height: auto" on every image, which showed the logos at file size there. */
.editor-styles-wrapper .jo-collabs__row .wp-block-image img { height: var(--jo-logo-h) !important; }
/* ------------------------------------------------------------------
Over mij
------------------------------------------------------------------ */
.wp-block-cover.jo-photo-banner.is-tall { min-height: clamp(480px, 78vh, 760px); }
.jo-split.is-top { align-items: start; gap: clamp(40px, 5vw, 88px); }
/* Weetjes: mini -> title 12 px, title -> list 28 px (Over.dc.html:40-41); the stack itself has no gap. */
.jo-over-weetjes .jo-split > .jo-stack { gap: 0; }
.jo-over-weetjes__title { margin: 12px 0 28px; }
.jo-over-reeks { margin: 14px 14px 0 clamp(40px, 4vw, 56px); }
.jo-over-reeks__frame { margin: 0; }
.jo-over-reeks__slides.wp-block-gallery.has-nested-images { aspect-ratio: 4 / 5; background: var(--wp--preset--color--green-dark); }
.jo-over-reeks__slides.wp-block-gallery.has-nested-images figure.wp-block-image:not(#individual-image) { transition: opacity .8s ease; }
/* Round, not the design's white square (Max, 01/10/2026): the logo brings its own white disc, so the
padding is a white ring and the corners show the frame line and the photo. At 70% of the design's
size, offsets and padding included (Max, 01/10/2026), so it sits on the frame corner the same way. */
.jo-over-reeks__badge { position: absolute; top: -42px; left: -43px; width: clamp(77px, 8.4vw, 105px); aspect-ratio: 1; background: var(--wp--preset--color--white); border-radius: 50%; padding: 6px; margin: 0; z-index: 1; }
.jo-over-reeks__badge img { width: 100%; height: 100%; object-fit: cover; }
.wp-block-image.is-round img { border-radius: 50%; }
.jo-band { background: var(--wp--preset--color--green-dark); padding: clamp(64px, 8vw, 110px) var(--wp--preset--spacing--80); text-align: center; overflow: hidden; margin-top: var(--wp--preset--spacing--70); }
/* 0,2,0 so the band colours win over .is-on-dark h2 / p. */
.jo-band .jo-band__word { margin: 0; font-family: var(--wp--preset--font-family--title); font-weight: var(--wp--custom--weight--title); font-size: clamp(44px, 9.4vw, 150px); text-transform: uppercase; letter-spacing: .04em; color: var(--wp--custom--color--gold-on-green); line-height: 1; white-space: nowrap; }
.jo-band .jo-band__items { margin: 26px 0 0; font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini); letter-spacing: var(--wp--custom--track--mini); line-height: normal; text-transform: uppercase; color: rgba(255, 255, 255, .78); display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 22px; }
.jo-band__dot { color: var(--wp--custom--color--gold-on-green); }
/* Only lines between the tiles, no frame around them. Each tile draws a 1px ring in the 1px gap
and overflow: hidden cuts the ring off at the outer edge. That holds however the tiles wrap:
uprights three across, rules when stacked, and no grey block in the empty cell of a 2 + 1 row. */
.jo-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 1px; overflow: hidden; }
.jo-tile { box-shadow: 0 0 0 1px var(--wp--custom--color--line); padding: clamp(28px, 4vw, 52px) clamp(22px, 3vw, 40px); display: flex; flex-direction: column; gap: 14px; }
.jo-tile > * { margin: 0; }
.jo-tile > .jo-body { margin-top: 4px; }
.jo-section > .jo-container.jo-over-match { margin-top: var(--wp--preset--spacing--70); max-width: 760px; gap: 16px; }
/* 0,3,0 beats the list style's own margin: 0 (printed after this file). */
.jo-over-match .wp-block-list.is-style-checks { margin-top: 20px; }
.jo-over-match__cta { display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; margin: 20px 0 0; }
.jo-over-match__cta .jo-title { font-size: var(--wp--preset--font-size--sub); line-height: 1.2; color: var(--wp--preset--color--charcoal); }
.jo-link.is-strong { font-size: var(--wp--preset--font-size--mini-lg); border-bottom-width: 2px; padding-bottom: 4px; }
.jo-link.is-white { color: var(--wp--preset--color--white); }
.jo-link.is-white:hover { color: var(--wp--preset--color--gold); }
.wp-block-cover.jo-photo-banner.jo-over-quote { min-height: clamp(440px, 66vh, 680px); }
.wp-block-cover.jo-photo-banner.jo-over-quote .wp-block-cover__background { opacity: .5; }
.wp-block-cover.jo-photo-banner.jo-over-quote .wp-block-cover__image-background { object-position: center 30%; }
/* Media column: the design gap plus the 14 px frame margin around the video slot (Over.dc.html:126-131). */
.jo-over-video__media { gap: calc(clamp(16px, 2vw, 24px) + 14px); }
/* 0,2,1 and later than .wp-block-image.is-wide img (4:3). */
.wp-block-image.jo-over-video__slot img { aspect-ratio: 16 / 9; }
/* Text column: 16 px gap, 50ch measure, sign-off gap 6 / margin 8 (the shared .jo-signoff is right for home). */
.jo-over-video .jo-split > .jo-stack:last-child { gap: 16px; }
.jo-over-video .jo-measure { max-width: 50ch; }
.jo-over-video .jo-signoff { gap: 6px; margin-top: 8px; }
.wp-block-video.is-style-framed { position: relative; margin: var(--wp--custom--frame-offset); }
.wp-block-video.is-style-framed::after { content: ""; position: absolute; inset: calc(-1 * var(--wp--custom--frame-offset)); border: 1px solid var(--wp--preset--color--gold); pointer-events: none; }
.wp-block-video video { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--wp--preset--color--green-dark); }
/* 4:3 only for the Over mij video photo and the Verder tiles; other landscape images stay 5:4. */
.jo-over-video__media .wp-block-image.is-landscape img,
.jo-project .wp-block-image.is-landscape img { aspect-ratio: 4 / 3; }
/* ------------------------------------------------------------------
FAQ page (light variant of the FAQ block)
------------------------------------------------------------------ */
.jo-faq.is-light { background: transparent; }
.jo-faq.is-light .jo-faq__inner { padding: 0; }
.jo-faq.is-light .jo-faq__list { border-top-color: rgba(195, 166, 133, .45); }
.jo-faq.is-light .jo-faq__item { border-bottom-color: rgba(195, 166, 133, .45); }
.jo-faq.is-light .jo-faq__item summary { color: var(--wp--preset--color--charcoal); font-weight: 500; }
.jo-faq.is-light .jo-faq__item summary:hover { color: var(--wp--preset--color--gold); }
.jo-faq.is-light .jo-faq__item summary::after { color: var(--wp--preset--color--gold); }
.jo-faq.is-light .jo-faq__item .jo-faq__answer { color: var(--wp--custom--color--text-soft); font-size: var(--wp--preset--font-size--body); padding-bottom: 26px; }
.jo-faq.is-light .jo-faq__answer a { color: var(--wp--preset--color--charcoal); text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 4px; }
.jo-faq.is-light .jo-sub { color: var(--wp--preset--color--charcoal); }
.jo-faq.is-light .jo-mini { color: var(--wp--preset--color--gold); }
.jo-faq-pagina__slot { gap: 18px; }
.jo-faq-pagina__slot p { margin: 0; }
.jo-faq-pagina { padding-bottom: clamp(64px, 8vw, 110px); }
.jo-faq-pagina .jo-faq__inner { max-width: 860px; }
.jo-faq-pagina .jo-faq__list { margin-top: clamp(36px, 4.4vw, 56px); }
/* The per-offer blocks keep the container's blockGap margin (spacing|60); no flex gap on top of it. */
.jo-faq-pagina .jo-container.jo-stack { gap: 0; }
/* 0,3,0 beats the generated wp-container "> * + *" margin. */
.jo-faq-pagina .jo-container > .jo-faq-pagina__slot { margin-block-start: clamp(44px, 5vw, 64px); }
.jo-faq-pagina__slot .jo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0 6px; }
.jo-body-lg { font-size: var(--wp--preset--font-size--body-lg); color: var(--wp--preset--color--charcoal); max-width: 40ch; }
/* ------------------------------------------------------------------
Verder dan het beeld
------------------------------------------------------------------ */
/* Static photo under a charcoal gradient (VerderDanHetBeeld.dc.html:27-29); !important beats core's .has-green-dark-background-color. */
.wp-block-cover.jo-photo-banner.is-verder { min-height: clamp(420px, 58vh, 640px); background: var(--wp--preset--color--charcoal); }
.wp-block-cover.jo-photo-banner.is-verder .wp-block-cover__image-background { top: 0; height: 100%; animation: none; }
.wp-block-cover.jo-photo-banner.is-verder .wp-block-cover__background { background: linear-gradient(rgba(26, 26, 26, .30), rgba(26, 26, 26, .55)) !important; opacity: 1; }
.wp-block-cover.jo-photo-banner.is-verder .jo-photo-banner__quote { font-style: italic; font-size: clamp(15px, 1.6vw, 19px); line-height: 1.6; max-width: 560px; color: var(--wp--custom--color--white-70); }
.jo-verder { padding-top: clamp(72px, 9vw, 120px); padding-bottom: 0; }
/* Intro -> project tiles (the design's grid section padding-top). */
.jo-verder > .jo-container.jo-stack { gap: clamp(48px, 6vw, 72px); }
.jo-verder__intro { font-family: var(--wp--preset--font-family--title); font-size: 18px; line-height: var(--wp--custom--line-height--body); letter-spacing: 0; color: var(--wp--preset--color--charcoal); max-width: 680px; margin: 0 auto; }
.jo-projecten { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: clamp(20px, 3vw, 32px); max-width: 1080px; margin: 0 auto; width: 100%; }
.jo-project { position: relative; }
.jo-project .wp-block-image { margin: 0; }
.jo-project__overlay { position: absolute; inset: 0; margin: 0; }
.jo-project__overlay a { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 0 16px; text-decoration: none; background: rgba(26, 26, 26, 0); opacity: 0; transition: opacity var(--wp--custom--transition), background var(--wp--custom--transition); }
.jo-project__overlay a:hover, .jo-project__overlay a:focus-visible { opacity: 1; background: rgba(26, 26, 26, .45); }
.jo-project__mini { font-family: var(--wp--preset--font-family--mini); font-size: 10px; letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--gold); }
.jo-project__title { font-family: var(--wp--preset--font-family--title); font-size: 22px; color: var(--wp--preset--color--white); text-transform: uppercase; letter-spacing: .04em; text-shadow: 0 1px 10px rgba(0, 0, 0, .4); }
.jo-quote-band { background: var(--wp--preset--color--charcoal); margin-top: clamp(72px, 9vw, 120px); padding: clamp(72px, 9vw, 110px) 24px; }
/* 0,2,0 so the quote stays white over .is-on-dark p. */
.jo-quote-band .jo-quote-band__quote { font-family: var(--wp--preset--font-family--title); font-style: italic; font-size: clamp(20px, 2.3vw, 27px); line-height: 1.5; letter-spacing: 0; color: var(--wp--preset--color--white); margin: 0; }
.jo-quote-band p { margin: 0; }
.jo-quote-band > .jo-stack { gap: 26px; }
.jo-quote-band .jo-link { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 0 6px; }
/* ------------------------------------------------------------------
Cadeaubon page
------------------------------------------------------------------ */
/* 0,3,0: the block style's own `.wp-block-list.is-style-numbered { margin: 0 }` is 0,2,0. */
.jo-cadeaubon-hoe .wp-block-list.is-style-numbered { margin-top: 8px; }
.jo-cadeaubon-hoe .jo-stack > p:last-child { margin-top: 10px; }
.jo-cadeaubon-hoe .jo-link { padding-bottom: 6px; }
.jo-cadeaubon-hoe .jo-split--mid { gap: clamp(40px, 5vw, 80px); }
.jo-cadeaubon-koop { scroll-margin-top: 90px; max-width: none; }
.jo-cadeaubon-koop .jo-container--narrow { max-width: 760px; gap: clamp(32px, 4vw, 48px); }
/* The constrained layout centres the cover's children; a left-aligned banner keeps them at the left edge. */
.wp-block-cover.jo-photo-banner.is-align-left .wp-block-cover__inner-container > * { margin-left: 0 !important; margin-right: 0 !important; max-width: 760px; }
/* The quote keeps its 26ch measure there too (PhotoBanner.dc.html). */
.wp-block-cover.jo-photo-banner.is-align-left .wp-block-cover__inner-container > .jo-photo-banner__quote { max-width: 26ch; }
/* ------------------------------------------------------------------
Forms (jo/formulier and the footer / Inspireren forms)
------------------------------------------------------------------ */
.jo-form__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jo-form { position: relative; }
.jo-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 22px 18px; }
.jo-form__field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.jo-form__field.is-full { grid-column: 1 / -1; }
.jo-form__label { font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini-sm); letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--gold); line-height: 1.5; }
/* Generic field rules kept at (0,1,0) / (0,2,0) with :where(), so the footer and Huwelijksgids rules win. */
.jo-form :where(input:not([type="checkbox"]):not([type="radio"]), select, textarea) {
width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid rgba(26, 26, 26, .22); border-radius: 0;
font-family: var(--wp--preset--font-family--body); font-size: 16px; letter-spacing: var(--wp--custom--track--body); line-height: normal;
color: var(--wp--preset--color--charcoal); background: var(--wp--preset--color--white); outline: none;
}
.jo-form select { appearance: auto; }
.jo-form textarea { resize: vertical; line-height: 1.55; }
/* :focus-within also covers the date picker button inside a date input (the input itself does not match :focus there). */
.jo-form :where(input, select, textarea):focus-within { border-color: var(--wp--preset--color--charcoal); }
.jo-form .has-error :where(input, select, textarea) { border-color: var(--wp--preset--color--charcoal); }
.jo-form__error { font-family: var(--wp--preset--font-family--mini); font-size: 13px; letter-spacing: .06em; line-height: normal; color: var(--wp--preset--color--charcoal); }
.jo-form__error.is-form { font-family: var(--wp--preset--font-family--body); font-size: var(--wp--preset--font-size--body-sm); letter-spacing: var(--wp--custom--track--body); }
.jo-form__checks { display: flex; flex-direction: column; gap: 12px; margin-top: 28px; }
.jo-form__checks .jo-check.has-error span { color: var(--wp--preset--color--charcoal); font-weight: 500; }
.jo-form__actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin-top: 26px; }
.jo-form__submit { background: none; border: 0; border-bottom: 1px solid var(--wp--preset--color--gold); min-height: 44px; padding: 12px 0 8px; cursor: pointer; font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini); letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--charcoal); transition: color var(--wp--custom--transition); }
.jo-form__submit:hover { color: var(--wp--preset--color--gold); }
.jo-form > .jo-form-hint { margin-top: 16px; }
.jo-inspireren__form > .jo-form-hint { margin-top: 0; }
/* Contact card: checkboxes, button row and note on the design's 22 px grid rhythm (Contact.dc.html). */
.jo-contact-card .jo-form__checks { gap: 22px; }
.jo-contact-card .jo-form__checks .jo-check { gap: 12px; }
.jo-contact-card .jo-form__actions { margin-top: 32px; }
.jo-contact-card .jo-form > .jo-form-hint { margin-top: 22px; }
.jo-form__chips { display: flex; flex-wrap: wrap; gap: 10px; }
.jo-chip { position: relative; cursor: pointer; }
.jo-chip input { position: absolute; opacity: 0; width: 0; height: 0; }
.jo-chip span { display: inline-flex; align-items: center; min-height: 44px; box-sizing: border-box; padding: 0 18px; border: 1px solid rgba(26, 26, 26, .22); font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini); letter-spacing: var(--wp--custom--track--mini); line-height: normal; color: var(--wp--preset--color--charcoal); background: var(--wp--preset--color--white); transition: all var(--wp--custom--transition); }
.jo-chip:hover span { border-color: var(--wp--preset--color--gold); }
.jo-chip input:checked + span { background: var(--wp--preset--color--charcoal); color: var(--wp--preset--color--white); border-color: var(--wp--preset--color--charcoal); }
.jo-chip input:focus-visible + span { outline: 2px solid var(--wp--preset--color--gold); outline-offset: 3px; }
/* No margin of its own: the field's 12 px gap puts it 12 px below the chips (Cadeaubon.dc.html:74). */
.jo-form__other { display: none; align-items: center; gap: 10px; max-width: 240px; font-family: var(--wp--preset--font-family--mini); }
.jo-form__field:has(input[value="ander"]:checked) .jo-form__other { display: flex; }
/* Euro sign at body size and a 46 px input with its own 12 px padding and no tracking (Cadeaubon.dc.html:75-76). */
.jo-form__other span { font-size: var(--wp--preset--font-size--body); letter-spacing: normal; line-height: normal; }
.jo-form__other input { padding: 12px 14px; letter-spacing: normal; }
.jo-form__radios { display: flex; flex-direction: column; gap: 10px; }
.jo-form__radios .jo-check { gap: 12px; }
.jo-form__radios .jo-check input { width: 13px; height: 13px; margin-top: 4px; }
.jo-form--cadeaubon span.jo-form__label { line-height: normal; }
.jo-form--cadeaubon .jo-form__field:has(.jo-form__chips),
.jo-form--cadeaubon .jo-form__field:has(.jo-form__radios) { gap: 12px; }
/* Grid gap 22 + 8 = the design's 30 px between groups. */
.jo-form--cadeaubon .jo-form__field:has(.jo-form__chips) { margin-bottom: 8px; }
.jo-form--cadeaubon .jo-form__field:has(.jo-form__radios) { margin-top: 8px; }
.jo-form--cadeaubon .jo-form__actions { margin-top: 30px; padding-top: 10px; border-top: 1px solid rgba(26, 26, 26, .1); }
/* The longer payment note stays beside the button and wraps under it on a phone. */
.jo-form--cadeaubon .jo-form__actions > .jo-form-hint { flex: 1 1 16em; }
/* Form-level error below the button row, on the form's 30 px rhythm (Cadeaubon.dc.html:119). */
.jo-form--cadeaubon > .jo-form__error.is-form { margin-top: 30px; }
.jo-check.is-disabled { cursor: not-allowed; opacity: .55; }
/* Online ordering switched off (JO_GIFT_CARD): the fields in a disabled fieldset, and in the
button's place a line to e-mail or WhatsApp. */
.jo-form__fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.jo-form__fieldset:disabled { opacity: .55; }
.jo-form__fieldset:disabled :where(input, select, textarea, label) { cursor: not-allowed; }
.jo-form__fieldset:disabled .jo-chip:hover span { border-color: rgba(26, 26, 26, .22); }
.jo-form__closed { margin: 0; flex: 1 1 16em; font-size: var(--wp--preset--font-size--body); line-height: 1.55; letter-spacing: var(--wp--custom--track--body); color: var(--wp--preset--color--charcoal); }
.jo-form__closed a { white-space: nowrap; color: inherit; text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 4px; transition: color var(--wp--custom--transition); }
.jo-form__closed a:hover { color: var(--wp--preset--color--gold); }
/* The live site without JO_SHOW_DEMOS: no form, the same line with what to tell her, centred in the card. */
.jo-gift-order { text-align: center; }
.jo-gift-order p { margin: 0 auto; max-width: 52ch; }
.jo-gift-order p + p { margin-top: 12px; }
.jo-gift-order .jo-form__terms { margin-top: 26px; }
.jo-form__soon { font-family: var(--wp--preset--font-family--mini); font-style: normal; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--wp--preset--color--gold); }
.jo-form__sent { border: 1px solid var(--wp--preset--color--gold); padding: clamp(26px, 3.5vw, 44px); display: flex; flex-direction: column; gap: 12px; }
.jo-form__sent.is-centered { text-align: center; align-items: center; }
.jo-form__sent.is-inline { padding: 22px 26px; max-width: 460px; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--charcoal); }
.jo-form__sent p { margin: 0; max-width: 50ch; }
.jo-form__sent .jo-link { margin-top: 8px; width: fit-content; }
.jo-link.is-small { font-size: var(--wp--preset--font-size--mini-sm); color: var(--wp--preset--color--sage); padding-bottom: 4px; }
.jo-link.is-small:hover { color: var(--wp--preset--color--charcoal); }
.jo-footer__form.is-sent { align-items: center; min-height: 46px; font-size: var(--wp--preset--font-size--body-sm); color: var(--wp--preset--color--gold); }
.jo-footer__form .jo-form__error { flex: 1 1 100%; color: var(--wp--preset--color--gold); }
/* Contact page */
.jo-contact-intro { padding: clamp(64px, 8vw, 110px) var(--wp--preset--spacing--80); }
.jo-contact-intro__inner { max-width: 640px; margin: 0 auto; gap: 26px; }
.jo-contact-intro p { margin: 0; }
.jo-contact-intro a { color: var(--wp--preset--color--charcoal); text-decoration: none; border-bottom: 1px solid var(--wp--preset--color--gold); padding-bottom: 2px; transition: color var(--wp--custom--transition); }
.jo-contact-intro a:hover { color: var(--wp--preset--color--gold); }
.wp-block-cover.jo-contact-bg { padding: clamp(40px, 6vw, 96px) clamp(16px, 4vw, 48px); scroll-margin-top: 90px; min-height: 0; align-items: flex-start; }
/* Design overlay rgba(17,24,6,.28) = green-dark at .28 (Contact.dc.html:49). Core's
`.wp-block-cover .wp-block-cover__background.has-background-dim.has-background-dim-30` (0,4,0)
sets .3, so the rule names the overlay colour class too (0,5,0). */
.wp-block-cover.jo-contact-bg .wp-block-cover__background,
.wp-block-cover.jo-contact-bg .wp-block-cover__background.has-background-dim.has-green-dark-background-color { opacity: .28; }
.wp-block-cover.jo-contact-bg .wp-block-cover__inner-container { width: 100%; max-width: calc(1180px + 2 * clamp(20px, 4vw, 64px)); }
.wp-block-cover.jo-contact-bg .wp-block-cover__inner-container > * { max-width: none; margin-left: 0 !important; margin-right: 0 !important; }
.jo-form-card { background: var(--wp--preset--color--white); border: 1px solid var(--wp--preset--color--gold); padding: clamp(24px, 4vw, 52px); }
.jo-contact-card { position: relative; overflow: hidden; border: 0; padding: clamp(28px, 4.5vw, 64px) clamp(20px, 4vw, 64px) clamp(200px, 19vw, 260px); }
/* Joke's mark, whole and centred in the room below the form (Max, 30/09: the design's half-cut watermark read as a mistake). */
.jo-contact-card__mark { position: absolute; left: 50%; bottom: clamp(32px, 4vw, 52px); width: clamp(120px, 12vw, 160px); height: auto; transform: translateX(-50%); opacity: .16; pointer-events: none; }
.jo-contact-card__grid { position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: clamp(40px, 5vw, 80px); align-items: start; }
.jo-contact-card__main { display: flex; flex-direction: column; gap: 28px; min-width: 0; }
.jo-form-tabs { display: flex; gap: 28px; flex-wrap: wrap; border-bottom: 1px solid rgba(26, 26, 26, .1); }
.jo-form-tabs__tab { box-sizing: content-box; display: inline-flex; align-items: center; background: none; border: 0; border-bottom: 1px solid transparent; margin-bottom: -1px; padding: 0 0 12px; min-height: 44px; cursor: pointer; font-family: var(--wp--preset--font-family--mini); font-size: var(--wp--preset--font-size--mini); letter-spacing: var(--wp--custom--track--mini); text-transform: uppercase; color: var(--wp--preset--color--sage); transition: color var(--wp--custom--transition); }
.jo-form-tabs__tab:hover { color: var(--wp--preset--color--charcoal); }
.jo-form-tabs__tab[aria-selected="true"] { color: var(--wp--preset--color--charcoal); border-bottom-color: var(--wp--preset--color--charcoal); }
.jo-contact-card__aside { display: flex; flex-direction: column; gap: 36px; padding-top: clamp(0px, 2vw, 44px); }
.jo-contact-card__block { display: flex; flex-direction: column; gap: 16px; }
.jo-contact-card__block.is-rule { border-top: 1px solid rgba(26, 26, 26, .1); padding-top: 28px; gap: 14px; }
.jo-contact-card__block p { margin: 0; }
.jo-contact-card__block .jo-body { max-width: 34ch; }
.jo-contact-card__block .jo-link { width: fit-content; padding-bottom: 6px; }
.jo-contact-card__title { font-size: var(--wp--preset--font-size--title-lg); color: var(--wp--preset--color--gold); }
.jo-contact-card.is-mode-contact [data-mode="trouw"], .jo-contact-card.is-mode-trouw [data-mode="contact"] { display: none; }
/* ------------------------------------------------------------------
Text pages (algemene voorwaarden, privacybeleid)
------------------------------------------------------------------ */
/* break-word: a long word or address wraps instead of widening a phone screen. */
.jo-prose { max-width: 760px; display: flex; flex-direction: column; gap: 16px; overflow-wrap: break-word; }
.jo-prose h2 { margin: 28px 0 4px; }
.jo-prose h2:first-child { margin-top: 0; }
.jo-prose p { margin: 0; }
.jo-prose a { color: var(--wp--preset--color--charcoal); text-decoration: underline; text-decoration-color: var(--wp--preset--color--gold); text-underline-offset: 4px; }
.jo-prose .is-style-dashes { margin: 4px 0; }