/*
Theme Name: Juup's
Theme URI: https://juups.eu
Author: Noveu Solutions
Author URI: https://noveu.eu
Description: Lichte blokthema voor Juup's (fietstrailers, Scootwagens en het inklapsysteem). Eigen lettertypen in het thema (Young Serif en Fira Sans), geen externe aanroepen, geen paginabouwer en geen tracking.
Version: 1.3.0
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: juups
*/

/* ==========================================================================
   Basis
   Kleuren, lettertypen en maten komen uit theme.json; hier staat alleen wat daar niet in past.
   De koppen staan in Young Serif (alleen Regular, dus nooit vet), de rest in Fira Sans.
   Kleuren: espresso en koffie (donkerbruin), crème en diep crème (de lichte vlakken) en goud (het logo en de oproepen).
   ========================================================================== */

:root {
	--j-espresso: var(--wp--preset--color--espresso);
	--j-koffie: var(--wp--preset--color--koffie);
	--j-goud: var(--wp--preset--color--goud);
	--j-amber: var(--wp--preset--color--amber);
	--j-brons: var(--wp--preset--color--brons);
	--j-steen: var(--wp--preset--color--steen);
	--j-creme: var(--wp--preset--color--creme);
	--j-creme-diep: var(--wp--preset--color--creme-diep);
	--j-lijn: var(--wp--preset--color--lijn);
	--j-serif: var(--wp--preset--font-family--young-serif);
	--j-sans: var(--wp--preset--font-family--fira-sans);
	--j-breed: var(--wp--style--global--wide-size, 76rem);
	--j-rand: var(--wp--preset--spacing--50);
	--j-ruimte: var(--wp--preset--spacing--60);
	--j-ruimte-groot: var(--wp--preset--spacing--70);
	--j-straal: 3px;
	/* Telefoon-icoon voor in het menu (het pad van "call" uit Material Icons), als masker zodat het de kleur van de tekst volgt */
	--j-telefoon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.62 10.79c1.44 2.83 3.76 5.14 6.59 6.59l2.2-2.2c.27-.27.67-.36 1.02-.24 1.12.37 2.33.57 3.57.57.55 0 1 .45 1 1V20c0 .55-.45 1-1 1-9.39 0-17-7.61-17-17 0-.55.45-1 1-1h3.5c.55 0 1 .45 1 1 0 1.25.2 2.45.57 3.57.11.35.03.74-.25 1.02l-2.2 2.2z'/%3E%3C/svg%3E");
	accent-color: var(--j-amber);
}

html { scroll-padding-top: 6rem; }
body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; overflow-x: clip; }
.wp-site-blocks > * { margin-block: 0; }
.wp-site-blocks > main { flex: 1 0 auto; }
strong, b { font-weight: 600; }
:where(h1, h2, h3, h4) { text-wrap: balance; font-synthesis: none; }
p { text-wrap: pretty; }
a { text-underline-offset: 0.2em; text-decoration-thickness: 0.08em; }
::selection { background: var(--j-goud); color: var(--j-espresso); }
input, textarea, select { caret-color: var(--j-brons); }

/* De focusrand is donker op de lichte vlakken en goud op de donkere */
:focus-visible { outline: 3px solid var(--j-espresso); outline-offset: 3px; }
.juups-header :focus-visible,
.juups-hero :focus-visible,
.juups-paginakop :focus-visible,
.juups-footer :focus-visible,
.juups-band--espresso :focus-visible,
.juups-band--koffie :focus-visible,
.juups-split--espresso :focus-visible,
.juups-split--koffie :focus-visible,
.juups-actiebalk :focus-visible { outline-color: var(--j-goud); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

.juups-lead { font-size: 1.2rem; line-height: 1.55; color: var(--j-steen); }
.wp-block-image figcaption.wp-element-caption { margin: 0.7rem 0 0; font-size: 0.92rem; line-height: 1.45; text-align: left; color: var(--j-steen); }
.juups-noot { max-width: 44rem; margin: 1.5rem 0 0; font-size: 0.95rem; color: var(--j-steen); }
.juups-meer { margin: 1.75rem 0 0; font-weight: 600; }
.juups-nw { white-space: nowrap; }

/* Knoppen: de eerste keus is goud met donkere tekst, de tweede keus (outline) een onderstreepte tekst */
.wp-block-buttons { align-items: center; gap: 0.25rem 1.25rem; }
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button {
	padding: 0.9rem 0.15rem;
	border: 0;
	background: none;
	color: var(--j-espresso);
	text-decoration: underline;
	text-decoration-thickness: 0.08em;
	text-underline-offset: 0.25em;
}
.wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button:hover { background: none; text-decoration-thickness: 0.17em; }

/* ==========================================================================
   Kop en menu: donker, met het goud van het logo
   ========================================================================== */

.juups-header {
	position: sticky;
	top: 0;
	z-index: 40;
	background: var(--j-espresso);
	color: #fff;
}
.admin-bar .juups-header { top: var(--wp-admin--admin-bar--height, 0px); }

.juups-header__rij {
	box-sizing: border-box;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	width: 100%;
	max-width: calc(var(--j-breed) + 2 * var(--j-rand));
	min-height: 4.75rem;
	margin-inline: auto;
	padding: 0.5rem var(--j-rand);
}
@media (min-width: 782px) { .juups-header__rij { min-height: 5.25rem; } }
.juups-merk { display: block; flex: none; line-height: 0; }
.juups-merk img { display: block; width: auto; height: 3.4rem; }
@media (min-width: 782px) { .juups-merk img { height: 4.25rem; } }

.juups-nav { font-size: 0.98rem; font-weight: 600; color: #fff; }
.juups-nav .wp-block-navigation-item__content {
	display: block;
	padding: 0.6rem 0.1rem;
	color: #fff;
	text-decoration: none;
}
.juups-nav .wp-block-navigation-item:not(.juups-nav-cta) > .wp-block-navigation-item__content:hover,
.juups-nav .current-menu-item:not(.juups-nav-cta) > .wp-block-navigation-item__content {
	text-decoration: underline;
	text-decoration-color: var(--j-goud);
	text-decoration-thickness: 3px;
	text-underline-offset: 0.45rem;
}
.juups-nav .juups-nav-cta > .wp-block-navigation-item__content {
	padding: 0.65rem 1.3rem;
	border-radius: var(--j-straal);
	background: var(--j-goud);
	color: var(--j-espresso);
	transition: background-color 0.2s ease, color 0.2s ease;
}
.juups-nav .juups-nav-cta > .wp-block-navigation-item__content:hover,
.juups-nav .juups-nav-cta.current-menu-item > .wp-block-navigation-item__content { background: #fff; color: var(--j-espresso); }
.juups-nav .juups-nav-cta > .wp-block-navigation-item__content:focus-visible { outline-color: #fff; }

/* Tablet: het menu past net, dus iets compacter */
@media (min-width: 600px) and (max-width: 899px) {
	.juups-nav { font-size: 0.9rem; }
	.juups-nav .wp-block-navigation__container { gap: 1rem; }
	.juups-nav .juups-nav-cta > .wp-block-navigation-item__content { padding: 0.55rem 1rem; }
}

/* Menuknop: alleen op mobiel (WordPress verbergt hem zelf vanaf 600px; dit is het vangnet) */
.juups-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 2.9rem;
	height: 2.9rem;
	padding: 0;
	border: 1.5px solid rgb(255 255 255 / 0.3);
	border-radius: var(--j-straal);
	color: #fff;
	transition: border-color 0.2s ease, background-color 0.2s ease;
}
.juups-nav .wp-block-navigation__responsive-container-open:hover { border-color: var(--j-goud); background: rgb(255 255 255 / 0.06); }
.juups-nav .wp-block-navigation__responsive-container-open svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
@media (min-width: 600px) {
	.juups-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: none; }
}

/* Mobiel menu (overlay): de onderdelen in het lettertype van de koppen */
.juups-nav .wp-block-navigation__responsive-container.is-menu-open { padding: 1.25rem var(--j-rand) 2rem; }
.juups-nav .is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: 0.25rem; }
.juups-nav .is-menu-open .wp-block-navigation-item__content { padding: 0.45rem 0; font-family: var(--j-serif); font-size: 2rem; font-weight: 400; color: #fff; }
.juups-nav .is-menu-open .juups-nav-cta > .wp-block-navigation-item__content { margin-top: 1rem; padding: 0.8rem 1.6rem; font-family: var(--j-sans); font-size: 1.15rem; font-weight: 600; background: var(--j-goud); color: var(--j-espresso); }
.juups-nav .is-menu-open .juups-nav-tel > .wp-block-navigation-item__content { margin-top: 0.75rem; font-family: var(--j-sans); font-size: 1.3rem; font-weight: 600; }

/* Telefoonnummer in het menu: klikbaar, met een gouden icoon. In de kop alleen waar het past, op een telefoon in het uitklapmenu. */
.juups-nav .juups-nav-tel > .wp-block-navigation-item__content { white-space: nowrap; font-variant-numeric: tabular-nums; }
.juups-nav .juups-nav-tel > .wp-block-navigation-item__content::before {
	content: "";
	display: inline-block;
	width: 1.05em;
	height: 1.05em;
	margin-right: 0.45rem;
	vertical-align: -0.17em;
	background: var(--j-goud);
	-webkit-mask: var(--j-telefoon) center / contain no-repeat;
	mask: var(--j-telefoon) center / contain no-repeat;
}
@media (min-width: 600px) and (max-width: 959px) { .juups-nav .juups-nav-tel { display: none; } }
.juups-footernav .juups-nav-tel { display: none; }

/* ==========================================================================
   De onderdelen van een pagina zijn vlakken over de volle breedte, die elkaar afwisselen in kleur: donkerbruin, crème en goud.
   Een vlak heeft zijn eigen ruimte boven en onder, dus tussen de vlakken zit nooit een marge.
   ========================================================================== */

.juups-voorpagina > *, .juups-inhoud > * { margin-block: 0 !important; }

.wp-block-group.juups-band { padding: var(--j-ruimte-groot) var(--j-rand); }
.juups-band > .alignwide { margin-block: 0 !important; }
.juups-band--espresso, .juups-band--koffie { color: #fff; }
.juups-band--espresso h2, .juups-band--espresso h3, .juups-band--espresso h4,
.juups-band--koffie h2, .juups-band--koffie h3, .juups-band--koffie h4 { color: #fff; }
.juups-band--espresso .juups-lead, .juups-band--koffie .juups-lead { color: rgb(255 255 255 / 0.86); }
.juups-band--espresso .juups-noot, .juups-band--koffie .juups-noot { color: rgb(255 255 255 / 0.78); }
.juups-band--espresso a:not(.wp-block-button__link), .juups-band--koffie a:not(.wp-block-button__link) { color: var(--j-goud); }
.juups-band--espresso a:not(.wp-block-button__link):hover, .juups-band--koffie a:not(.wp-block-button__link):hover { color: #fff; }
.juups-band--espresso .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.juups-band--koffie .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { color: #fff; }
.juups-band--espresso .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.juups-band--koffie .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.juups-split--espresso .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover,
.juups-split--koffie .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--j-espresso); }
.juups-band--espresso { background: var(--j-espresso); }
.juups-band--koffie { background: var(--j-koffie); }
.juups-band--creme { background: var(--j-creme); }
.juups-band--creme-diep { background: var(--j-creme-diep); }

.juups-sectiekop { max-width: 42rem; margin: 0 0 clamp(1.75rem, 3vw, 2.75rem); }
.juups-sectiekop > * { margin: 0; }
.juups-sectiekop .juups-lead { margin-top: 0.85rem; }

/* ==========================================================================
   Voorpagina: de hero met een grote foto
   ========================================================================== */

.wp-block-columns.juups-hero {
	gap: 0 !important;
	align-items: stretch;
	min-height: min(80vh, 44rem);
	margin-block: 0;
	background: var(--j-espresso);
	color: #fff;
}
/* De tekst begint op dezelfde lijn als het logo en de brede blokken */
.wp-block-columns.juups-hero > .juups-hero__tekst {
	box-sizing: border-box;
	padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 4rem) clamp(2.5rem, 6vw, 5.5rem) max(var(--j-rand), calc((100vw - var(--j-breed)) / 2));
}
.juups-hero h1 {
	margin: 0 0 1.25rem;
	font-size: clamp(2.25rem, 1.6vw + 1.9rem, 4.25rem);
	line-height: 1.04;
	color: #fff;
}
/* De kop in twee regels: het product groot, de rest eronder in goud (het blijft één zin voor zoekmachines en schermlezers) */
.juups-hero h1 .juups-hero__sub {
	display: block;
	margin-top: 0.6rem;
	font-size: 0.5em;
	line-height: 1.2;
	letter-spacing: 0;
	color: var(--j-goud);
}
.juups-hero .juups-lead { max-width: 30rem; margin: 0 0 1.75rem; color: rgb(255 255 255 / 0.88); }
.juups-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--j-espresso); }
.juups-hero .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { color: #fff; }

.juups-hero__foto { position: relative; min-height: 20rem; padding: 0; overflow: hidden; }
.juups-hero__foto .wp-block-image { margin: 0; }
.juups-hero__foto .wp-block-image img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 60% 50%;
}

/* ==========================================================================
   Foto en tekst naast elkaar: de foto loopt tot de rand van het scherm, de tekst staat op een gekleurd vlak.
   De tekst begint of eindigt op dezelfde lijn als het logo en de brede blokken.
   ========================================================================== */

.wp-block-columns.juups-split { gap: 0 !important; align-items: stretch; margin-block: 0; }
.wp-block-columns.juups-split--creme { background: var(--j-creme); }
.wp-block-columns.juups-split--creme-diep { background: var(--j-creme-diep); }
.wp-block-columns.juups-split--koffie { background: var(--j-koffie); color: #fff; }
.wp-block-columns.juups-split--espresso { background: var(--j-espresso); color: #fff; }
.juups-split--koffie h2, .juups-split--espresso h2 { color: #fff; }
.juups-split--koffie .juups-lead, .juups-split--espresso .juups-lead { color: rgb(255 255 255 / 0.86); }
.juups-split--koffie .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button,
.juups-split--espresso .wp-block-button.is-style-outline > .wp-block-button__link.wp-element-button { color: #fff; }
.juups-split--koffie a:not(.wp-block-button__link), .juups-split--espresso a:not(.wp-block-button__link) { color: var(--j-goud); }

.juups-split__foto { position: relative; min-height: 18rem; padding: 0; overflow: hidden; }
.juups-split__foto .wp-block-image { margin: 0; }
.juups-split__foto .wp-block-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.juups-split__foto .juups-foto-verhuur-scootwagen img { object-position: 50% 58%; }
.juups-split__foto figcaption.wp-element-caption {
	position: absolute;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	max-width: min(30rem, 100%);
	margin: 0;
	padding: 0.9rem 1.4rem;
	background: var(--j-espresso);
	color: #fff;
	font-size: 0.92rem;
	line-height: 1.45;
}

.juups-split__tekst { box-sizing: border-box; padding: clamp(2.5rem, 6vw, 4.5rem) var(--j-rand); }
.juups-split__tekst > * { max-width: 34rem; margin-block: 0 !important; }
.juups-split__tekst > * + * { margin-top: 1.1rem !important; }
.juups-split__tekst > .wp-block-buttons { margin-top: 1.75rem !important; }
.juups-split__tekst > h2 + p { margin-top: 1.1rem !important; }
@media (min-width: 782px) {
	.juups-split__tekst { padding: clamp(3rem, 6vw, 6rem) max(var(--j-rand), calc((100vw - var(--j-breed)) / 2)) clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem); }
	.wp-block-columns.juups-split--om { flex-direction: row-reverse; }
	.juups-split--om .juups-split__tekst { padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 5rem) clamp(3rem, 6vw, 6rem) max(var(--j-rand), calc((100vw - var(--j-breed)) / 2)); }
	.juups-split__foto { min-height: 26rem; }
}

/* ==========================================================================
   Gewone pagina's: een donkere paginakop met een foto aan de rechterkant (de foto komt uit het thema, per pagina)
   ========================================================================== */

.juups-paginakop {
	position: relative;
	margin-block: 0 !important;
	padding: clamp(2.75rem, 6vw, 5rem) var(--j-rand);
	background: var(--j-espresso);
	color: #fff;
}
.juups-paginakop .wp-block-post-title { margin: 0; font-size: clamp(2.6rem, 3.4vw + 1rem, 4.5rem); line-height: 1.04; color: #fff; }
.juups-paginakop .wp-block-post-excerpt { margin: 1.1rem 0 0; }
.juups-paginakop .wp-block-post-excerpt__excerpt { margin: 0; font-size: 1.25rem; line-height: 1.5; color: rgb(255 255 255 / 0.86); }

.pagina-verkoop, .pagina-het-inklapsysteem, .pagina-verhuur, .pagina-over-ons { --j-kopfoto: none; }
.pagina-verkoop { --j-kopfoto: url("assets/import/inklapsysteem-driewieler.jpg"); --j-kopfoto-positie: 30% 55%; }
.pagina-het-inklapsysteem { --j-kopfoto: url("assets/import/tegel-inklapsysteem.jpg"); --j-kopfoto-positie: 50% 50%; }
.pagina-verhuur { --j-kopfoto: url("assets/import/tegel-verkoop.jpg"); --j-kopfoto-positie: 50% 62%; }
.pagina-over-ons { --j-kopfoto: url("assets/import/extra-bovenaanzicht.jpg"); --j-kopfoto-positie: 50% 50%; }
.pagina-verkoop .juups-paginakop, .pagina-het-inklapsysteem .juups-paginakop, .pagina-verhuur .juups-paginakop, .pagina-over-ons .juups-paginakop { padding-top: calc(11rem + 2.25rem); }
.pagina-verkoop .juups-paginakop::after,
.pagina-het-inklapsysteem .juups-paginakop::after,
.pagina-verhuur .juups-paginakop::after,
.pagina-over-ons .juups-paginakop::after {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 11rem;
	background: var(--j-kopfoto) var(--j-kopfoto-positie, center) / cover no-repeat;
}
@media (min-width: 900px) {
	.pagina-verkoop .juups-paginakop, .pagina-het-inklapsysteem .juups-paginakop, .pagina-verhuur .juups-paginakop, .pagina-over-ons .juups-paginakop {
		padding-top: clamp(3rem, 6vw, 5rem);
		min-height: 21rem;
	}
	.pagina-verkoop .juups-paginakop::after,
	.pagina-het-inklapsysteem .juups-paginakop::after,
	.pagina-verhuur .juups-paginakop::after,
	.pagina-over-ons .juups-paginakop::after { inset: 0 0 0 auto; width: 40%; height: auto; }
	.pagina-verkoop .juups-paginakop .wp-block-post-title, .pagina-het-inklapsysteem .juups-paginakop .wp-block-post-title,
	.pagina-verhuur .juups-paginakop .wp-block-post-title, .pagina-over-ons .juups-paginakop .wp-block-post-title,
	.pagina-verkoop .juups-paginakop .wp-block-post-excerpt, .pagina-het-inklapsysteem .juups-paginakop .wp-block-post-excerpt,
	.pagina-verhuur .juups-paginakop .wp-block-post-excerpt, .pagina-over-ons .juups-paginakop .wp-block-post-excerpt { max-width: min(36rem, calc(60% - 2rem)); }
}

.juups-smal > * { max-width: 44rem; }

/* ==========================================================================
   Onze trailers: kaarten met een echte foto, de naam, de vanafprijs en een knop voor een offerte
   ========================================================================== */

.wp-block-group.juups-keuze__raster {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1rem, 2vw, 1.75rem);
}
@media (max-width: 1099px) { .wp-block-group.juups-keuze__raster { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .wp-block-group.juups-keuze__raster { grid-template-columns: minmax(0, 1fr); } }
.juups-keuze__raster > * { margin: 0; }
.wp-block-group.juups-keuze__item {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var(--j-straal);
	background: var(--j-creme);
	color: var(--j-espresso);
}
.juups-band--creme .juups-keuze__item, .juups-band--creme-diep .juups-keuze__item { background: #fff; }
.juups-keuze__item > * { margin: 0; }
.juups-keuze__item .wp-block-image { aspect-ratio: 4 / 3; overflow: hidden; background: inherit; }
.juups-keuze__item .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
/* Onder elkaar (een kolom) krijgen de twee witte productfoto's, die 3:2 zijn, een 3:2 vlak in plaats van een hoger vlak met veel leegte */
@media (max-width: 599px) { .juups-keuze__item .wp-block-image.juups-foto-wit { aspect-ratio: 3 / 2; } }
.juups-keuze__item h3, .juups-keuze__item p { padding-inline: 1.25rem; }
.juups-band .juups-keuze__item h3 { margin-top: 1.1rem; font-size: clamp(1.4rem, 0.7vw + 1.15rem, 1.7rem); color: var(--j-espresso); }
.juups-band .juups-keuze__item h3 a, .juups-band .juups-keuze__item h3 a:hover { color: var(--j-espresso); }
.juups-keuze__item h3 a { text-decoration: none; }
.juups-keuze__item h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.juups-keuze__item:hover h3 a { text-decoration: underline; text-decoration-thickness: 0.07em; text-underline-offset: 0.18em; }
.juups-keuze__item h3 a:focus-visible { outline: none; }
.juups-keuze__item:has(h3 a:focus-visible) { outline: 3px solid var(--j-goud); outline-offset: 4px; }
.juups-keuze__item p.juups-keuze__prijs { margin-top: 0.2rem; font-family: var(--j-serif); font-size: 1.3rem; color: var(--j-brons); }
.juups-keuze__item p.juups-keuze__feiten { margin-top: 0.35rem; font-size: 0.95rem; line-height: 1.45; color: var(--j-steen); }
/* De knop ligt boven de gestrekte link van de naam, zodat hij zelf klikbaar blijft */
.juups-keuze__item .wp-block-buttons.juups-keuze__knop { position: relative; z-index: 2; margin-top: auto; padding: 1.1rem 1.25rem 1.35rem; }
.wp-block-group.juups-keuze__item .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--j-espresso); color: #fff; }
.wp-block-group.juups-keuze__item .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--j-goud); color: var(--j-espresso); }

/* De twee foto's met witte achtergrond (Trailer2Bike en Trailer4Bike) staan in een 4:3 vlak. De witte achtergrond valt tegen het vlak
   weg (multiply). De zoom is per foto gemeten: Trailer2Bike staat zonder zoom klein in het beeld, Trailer4Bike loopt zonder marge
   tot aan de rand en wordt daarom juist in zijn geheel getoond. */
.juups-foto-wit img { mix-blend-mode: multiply; }
.juups-keuze__item .wp-block-image.juups-foto-wit img,
.juups-kaart__foto .wp-block-image.juups-foto-wit img { height: 100%; object-fit: cover; }
.wp-block-image.juups-foto-wit.juups-foto-trailer2bike img { transform: scale(1.25); transform-origin: 84% 97.5%; }
.wp-block-image.juups-foto-wit.juups-foto-trailer4bike img { object-fit: contain; transform: scale(1.08); transform-origin: 84% 50%; }

/* ==========================================================================
   Het inklapsysteem in detail: drie close-ups met uitleg
   ========================================================================== */

.wp-block-group.juups-detail__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem); }
@media (max-width: 781px) { .wp-block-group.juups-detail__raster { grid-template-columns: minmax(0, 1fr); } }
.juups-detail__raster > .wp-block-image { margin: 0; }
.juups-detail__raster img { display: block; width: 100%; }
.juups-detail__raster figcaption.wp-element-caption { margin-top: 1rem; font-size: 1rem; line-height: 1.55; color: var(--j-steen); }
.juups-detail__raster figcaption strong { display: block; margin-bottom: 0.25rem; font-family: var(--j-serif); font-size: 1.4rem; font-weight: 400; line-height: 1.2; color: var(--j-espresso); }

/* ==========================================================================
   Een trailer op de pagina Verkoop: grote foto naast naam, prijs en specificaties
   ========================================================================== */

/* Na een klik op een trailer (of op een anker in het overzicht) schuift het vlak een stuk onder de vaste kop; de inhoud begint dan met ruimte onder de kop */
.juups-kaartband { scroll-margin-top: -2.25rem; }
.wp-block-columns.juups-kaart { align-items: flex-start; gap: clamp(1.5rem, 4vw, 4rem) !important; margin: 0; }
.juups-kaart__foto .wp-block-image { margin: 0; overflow: hidden; }
.juups-kaart__foto .wp-block-image img { display: block; width: 100%; }
.juups-kaart__foto .wp-block-image.juups-foto-wit { aspect-ratio: 4 / 3; }
@media (min-width: 782px) {
	.juups-kaart__foto { position: sticky; top: 7rem; }
	.wp-block-columns.juups-kaart--om { flex-direction: row-reverse; }
}
.juups-kaart h2 { margin: 0; font-size: clamp(2rem, 2vw + 1.3rem, 2.9rem); }
.juups-prijs { margin: 0.5rem 0 0; color: var(--j-steen); }
.juups-prijs strong { margin-right: 0.35rem; font-family: var(--j-serif); font-size: clamp(1.6rem, 1vw + 1.3rem, 2rem); font-weight: 400; color: var(--j-brons); }
.juups-kenmerk { margin: 0.9rem 0 0; }
.juups-kaart .wp-block-buttons.juups-kaart__knoppen { margin: 1.25rem 0 0; }
/* Wat standaard wordt meegeleverd: een wit vlak onder foto en tekst, de kop links en de lijst in twee kolommen rechts. Zo blijven de foto en
   de tekst naast elkaar even hoog en blijft er geen leegte onder de foto. */
.wp-block-group.juups-kaart__standaard { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.75rem 3rem; padding: 1.5rem clamp(1.25rem, 3vw, 2.25rem); border-radius: var(--j-straal); background: #fff; color: var(--j-espresso); }
/* Boven het vlak staat ruimte tussen de kolommen en dit vlak; .juups-band > .alignwide zet alle marges op 0 met !important, vandaar de zwaardere selector */
.juups-kaartband > .wp-block-group.juups-kaart__standaard { margin-block: clamp(1.5rem, 3vw, 2.5rem) 0 !important; }
@media (min-width: 782px) { .wp-block-group.juups-kaart__standaard { grid-template-columns: minmax(0, 0.7fr) minmax(0, 2fr); align-items: start; } }
.wp-block-group.juups-kaart__standaard > * { margin: 0; }
.juups-kopje { font-size: 1.3rem; }
.wp-block-list.juups-standaard { margin: 0; padding-left: 1.2rem; columns: 2 15rem; column-gap: 3rem; }
.juups-standaard li { margin: 0 0 0.4rem; padding-left: 0.2rem; break-inside: avoid; }
.juups-standaard li:last-child { margin-bottom: 0; }
.juups-standaard li::marker { color: var(--j-brons); }

/* Specificaties en openingstijden: een tabel met alleen dunne scheidingen; bij een trailer op een wit vlak */
.wp-block-table.juups-specs { margin: 1.5rem 0 0; }
.juups-specs table { width: 100%; margin: 0; table-layout: auto; border-collapse: collapse; font-size: 1rem; }
.juups-specs td { padding: 0.6rem 0; border: 0; border-top: 1px solid var(--j-lijn); vertical-align: baseline; }
.juups-specs tr:last-child td { border-bottom: 1px solid var(--j-lijn); }
.juups-specs td:first-child { width: 55%; color: var(--j-steen); }
.juups-specs td:last-child { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
.juups-kaart .wp-block-table.juups-specs { padding: 0.35rem 1.25rem; border-radius: var(--j-straal); background: #fff; }
.juups-kaart .juups-specs td { border-color: var(--j-creme-diep); }
.juups-kaart .juups-specs tr:first-child td { border-top: 0; }
.juups-kaart .juups-specs tr:last-child td { border-bottom: 0; }
.juups-toelichting { font-size: 0.85rem; font-weight: 400; white-space: nowrap; color: var(--j-steen); }
@media (max-width: 359px) {
	.juups-toelichting { white-space: normal; }
}
@media (max-width: 599px) { .juups-toelichting { display: block; } }

/* Optielijst met codes, op een donker vlak */
.juups-optiesband h2 { margin-bottom: 1.5rem; }
.juups-opties-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); }
.juups-opties-grid > * { margin: 0; }
@media (max-width: 781px) { .juups-opties-grid { grid-template-columns: 1fr; } }
.juups-opties-grid h3 { margin: 0 0 0.75rem; font-size: 1.35rem; }
.wp-block-list.juups-opties { margin: 0; padding: 0; list-style: none; }
.juups-opties li {
	display: grid;
	grid-template-columns: 7.5rem 1fr;
	gap: 0.25rem 1rem;
	align-items: baseline;
	margin: 0;
	padding: 0.85rem 0;
	border-top: 1px solid rgb(255 255 255 / 0.2);
}
.juups-opties li:last-child { border-bottom: 1px solid rgb(255 255 255 / 0.2); }
.juups-opties code { padding: 0; background: none; color: var(--j-goud); font: inherit; font-weight: 600; }

/* Extra foto's: twee grote en drie kleinere naast en onder elkaar */
.juups-extra h2 { margin-bottom: 1.5rem; }
.wp-block-group.juups-mozaiek { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-rows: clamp(11rem, 22vw, 19rem); gap: 0.75rem; }
.juups-mozaiek > .wp-block-image { grid-column: span 2; margin: 0; }
.juups-mozaiek > .wp-block-image:nth-child(-n + 2) { grid-column: span 3; }
.juups-mozaiek .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 699px) {
	.wp-block-group.juups-mozaiek { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(8rem, 38vw, 13rem); }
	.juups-mozaiek > .wp-block-image, .juups-mozaiek > .wp-block-image:nth-child(-n + 2) { grid-column: span 1; }
	.juups-mozaiek > .wp-block-image:first-child { grid-column: span 2; }
}
.juups-extra > p { max-width: 44rem; margin-top: 1.5rem; }

/* ==========================================================================
   Zo koopt u uw trailer: genummerde stappen naast de kop (de volgorde is hier echt)
   ========================================================================== */

.wp-block-group.juups-koopt {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.juups-koopt > * { margin: 0; }
@media (max-width: 899px) { .wp-block-group.juups-koopt { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .wp-block-group.juups-koopt__kop { position: sticky; top: 7rem; } }
.juups-koopt__kop > * { margin: 0; }
.juups-koopt__kop .juups-sectiekop { margin-bottom: 1.5rem; }
.juups-koopt__kop p { margin-top: 1rem; }
.juups-koopt__kop .wp-block-buttons { margin-top: 1rem; }

.wp-block-list.juups-stappenlijst { margin: 0; padding: 0; list-style: none; counter-reset: stap; }
.juups-stappenlijst li {
	display: grid;
	grid-template-columns: 3.75rem minmax(0, 1fr);
	column-gap: 1rem;
	align-content: start;
	margin: 0;
	padding: 1.5rem 0;
	counter-increment: stap;
	border-top: 1px solid var(--j-lijn);
}
.juups-stappenlijst li:last-child { border-bottom: 1px solid var(--j-lijn); }
.juups-band--creme-diep .juups-stappenlijst li { border-color: #cdbd9d; }
.juups-stappenlijst li::before {
	content: counter(stap);
	grid-row: 1 / span 2;
	font-family: var(--j-serif);
	font-size: 3rem;
	line-height: 0.95;
	color: var(--j-brons);
}
.juups-stappenlijst strong { grid-column: 2; font-size: 1.2rem; font-weight: 600; line-height: 1.3; }
.juups-stappenlijst span { grid-column: 2; margin-top: 0.3rem; color: var(--j-steen); }

/* Dezelfde lijst, kleiner: wat er na een aanvraag gebeurt */
.wp-block-group.juups-daarna { margin-top: clamp(2rem, 4vw, 3rem); }
.juups-daarna > * { margin: 0; }
.juups-daarna h3 { margin-bottom: 0.9rem; font-size: 1.4rem; }
.juups-stappenlijst--klein li { grid-template-columns: 2.25rem minmax(0, 1fr); padding: 0.95rem 0; }
.juups-stappenlijst--klein li::before { font-size: 1.6rem; }
.juups-stappenlijst--klein strong { font-size: 1.05rem; }
.juups-stappenlijst--klein span { font-size: 0.97rem; }

/* ==========================================================================
   Veelgestelde vragen: links de kop met een oproep, rechts de vragen die open en dicht klappen
   ========================================================================== */

.wp-block-group.juups-vragen {
	display: grid;
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.35fr);
	gap: clamp(2rem, 5vw, 5rem);
	align-items: start;
}
.juups-vragen > * { margin: 0; }
@media (max-width: 899px) { .wp-block-group.juups-vragen { grid-template-columns: 1fr; } }
@media (min-width: 900px) { .wp-block-group.juups-vragen__kop { position: sticky; top: 7rem; } }
.juups-vragen__kop .juups-sectiekop { margin-bottom: 1.25rem; }
.juups-vragen__lijst > * { margin: 0 0 0.6rem; }
.wp-block-details.juups-vraag { margin: 0; padding: 0 1.25rem; border-radius: var(--j-straal); background: #fff; }
.juups-vraag summary {
	position: relative;
	display: block;
	padding: 1.2rem 3.25rem 1.2rem 0;
	list-style: none;
	cursor: pointer;
	font-size: 1.12rem;
	font-weight: 600;
	line-height: 1.3;
}
.juups-vraag summary::-webkit-details-marker { display: none; }
.juups-vraag summary::marker { content: ""; }
.juups-vraag summary::after {
	content: "+";
	position: absolute;
	top: 50%;
	right: 0;
	display: grid;
	place-items: center;
	width: 2.2rem;
	height: 2.2rem;
	margin-top: -1.1rem;
	font-family: var(--j-serif);
	font-size: 1.8rem;
	font-weight: 400;
	line-height: 1;
	color: var(--j-brons);
	transition: transform 0.2s ease;
}
.juups-vraag[open] summary::after { transform: rotate(45deg); }
.juups-vraag summary:focus-visible { outline: 3px solid var(--j-espresso); outline-offset: 2px; }
.juups-vraag > :not(summary) { margin: 0 0 1.3rem; padding-right: 3.25rem; color: var(--j-steen); }

/* ==========================================================================
   Oproep: een gouden vlak over de volle breedte, links de kop, rechts een zin en de knoppen
   ========================================================================== */

.wp-block-group.juups-cta {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	column-gap: clamp(2rem, 6vw, 6rem);
	align-items: center;
	padding: var(--j-ruimte-groot) max(var(--j-rand), calc((100vw - var(--j-breed)) / 2));
	background: var(--j-goud);
	color: var(--j-espresso);
}
.wp-block-group.juups-cta > * { max-width: none; margin: 0; }
.juups-cta h2 { grid-row: 1 / span 2; font-size: clamp(2rem, 2.2vw + 1.2rem, 3.1rem); line-height: 1.1; color: var(--j-espresso); }
.juups-cta p { align-self: end; font-size: 1.15rem; }
.juups-cta .wp-block-buttons { align-self: start; margin-top: 1.1rem; }
.juups-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--j-espresso); color: #fff; }
.juups-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: #fff; color: var(--j-espresso); }
@media (max-width: 781px) {
	.wp-block-group.juups-cta { grid-template-columns: 1fr; }
	.wp-block-group.juups-cta > h2 { grid-row: auto; margin-bottom: 1rem; }
}

/* ==========================================================================
   Contact en over ons
   ========================================================================== */

.wp-block-columns.juups-contact { align-items: flex-start; gap: clamp(2rem, 5vw, 5rem) !important; margin: 0; }
.juups-contactkolom > * { margin: 0; }
.wp-block-group.juups-info > * { margin: 0; }
.wp-block-group.juups-info > h3 { margin: 1.75rem 0 0.25rem; font-family: var(--j-sans); font-size: 0.97rem; font-weight: 600; letter-spacing: 0; color: var(--j-steen); }
.wp-block-group.juups-info > h3:first-child { margin-top: 0; }
.juups-info a { color: var(--j-espresso); }
.juups-info a:hover { color: var(--j-brons); }
.juups-info a[href^="tel:"] { display: inline-block; margin-top: 0.2rem; font-family: var(--j-serif); font-size: clamp(1.7rem, 1vw + 1.4rem, 2.1rem); line-height: 1.2; text-decoration: none; }
.juups-info a[href^="tel:"]:hover { text-decoration: underline; }
.juups-info .wp-block-table.juups-specs { margin-top: 0.4rem; }
.juups-info .juups-specs td:first-child { width: auto; }
.juups-info .juups-specs td:last-child { padding-left: 1rem; white-space: nowrap; }

.juups-formulier { padding: clamp(1.5rem, 3vw, 2.5rem); border-radius: var(--j-straal); background: #fff; }
.juups-formulier > h2 { margin: 0 0 1.5rem; }
.juups-formulier .wpforms-container { margin: 0; }
.juups-formulier .wpforms-field { padding: 0 0 1.1rem !important; }
.juups-formulier .wpforms-field-label { margin-bottom: 0.35rem !important; font-size: 0.97rem !important; font-weight: 600 !important; color: var(--j-espresso) !important; }
.juups-formulier .wpforms-field-sublabel { display: none !important; }
.juups-formulier input[type="text"],
.juups-formulier input[type="email"],
.juups-formulier input[type="tel"],
.juups-formulier textarea {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	min-height: 3rem;
	padding: 0.8rem 1rem !important;
	border: 1.5px solid #8a7d68 !important;
	border-radius: var(--j-straal) !important;
	background: #fff;
	color: var(--j-espresso);
	font: inherit;
}
.juups-formulier textarea { min-height: 9rem; }
.juups-formulier select {
	box-sizing: border-box;
	width: 100% !important;
	max-width: 100% !important;
	height: 3rem !important;
	min-height: 3rem !important;
	padding: 0 2.75rem 0 1rem !important;
	border: 1.5px solid #8a7d68 !important;
	border-radius: var(--j-straal) !important;
	background-color: #fff !important;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231E1810' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round' d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
	background-repeat: no-repeat !important;
	background-position: right 1rem center !important;
	background-size: 1rem !important;
	color: var(--j-espresso);
	font: inherit;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.juups-formulier input:focus, .juups-formulier textarea:focus, .juups-formulier select:focus { border-color: var(--j-espresso) !important; box-shadow: 0 0 0 3px rgb(249 195 73 / 0.65) !important; outline: none; }
.juups-formulier button.wpforms-submit {
	padding: 0.95rem 1.75rem !important;
	border: 0 !important;
	border-radius: var(--j-straal) !important;
	background: var(--j-goud) !important;
	color: var(--j-espresso) !important;
	font: inherit;
	font-weight: 600 !important;
	cursor: pointer;
}
.juups-formulier button.wpforms-submit:hover { background: var(--j-espresso) !important; color: #fff !important; }

/* Het contactblok onder Over ons, op een donker vlak */
.wp-block-group.juups-contactblok { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem clamp(3rem, 8vw, 7rem); }
@media (min-width: 782px) { .wp-block-group.juups-contactblok { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: center; } }
.wp-block-group.juups-contactblok > .wp-block-group { margin: 0; }
.juups-contactblok h3, .juups-contactblok p { margin: 0; }
.juups-contactblok .juups-lead { font-family: var(--j-serif); font-size: clamp(1.5rem, 1vw + 1.2rem, 2rem); line-height: 1.25; color: #fff; }
.juups-contactblok .juups-contactblok__gegevens p { margin-top: 0.4rem; }
.juups-contactblok a[href^="tel:"] { font-family: var(--j-serif); font-size: 1.6rem; text-decoration: none; }
.juups-contactblok .wp-block-buttons { margin: 1.5rem 0 0; }

/* ==========================================================================
   Voet
   ========================================================================== */

.juups-footer { margin-block: 0 !important; padding: var(--j-ruimte-groot) 0 var(--wp--preset--spacing--50); background: var(--j-espresso); color: #fff; }
.juups-footer__inner { box-sizing: border-box; width: 100%; max-width: calc(var(--j-breed) + 2 * var(--j-rand)); margin-inline: auto; padding-inline: var(--j-rand); }
.juups-footer a { color: #fff; text-decoration: none; }
.juups-footer a:hover { color: var(--j-goud); text-decoration: underline; }
.juups-footer__grid { display: grid; grid-template-columns: 1.5fr 0.9fr 1fr 1.2fr; gap: clamp(2rem, 4vw, 3.5rem); }
.juups-footer__grid > * { margin: 0; }
@media (max-width: 999px) { .juups-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 599px) { .juups-footer__grid { grid-template-columns: 1fr; } }
.juups-footer .juups-merk img { height: 5.25rem; }
.juups-footer__tekst { max-width: 24rem; margin-top: 1rem; color: rgb(255 255 255 / 0.8); }
.juups-footer p.juups-footer__tekst { margin-top: 1rem; }
.juups-footer h2.juups-footer__kop { margin: 0 0 1rem; font-size: 1.3rem; font-weight: 400; letter-spacing: 0; color: var(--j-goud); }
.juups-footernav .wp-block-navigation__container { gap: 0.5rem; }
.juups-footernav .wp-block-navigation-item__content { padding: 0.15rem 0; }
.juups-footer p { margin: 0 0 0.75rem; }
.juups-footer__onder {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin-top: 3rem;
	padding-top: 1.5rem;
	border-top: 1px solid rgb(255 255 255 / 0.16);
	font-size: 0.9rem;
	color: rgb(255 255 255 / 0.78);
}
.juups-footer__onder p { margin: 0; }
.juups-footer .wp-block-social-links { margin: 0; }
.juups-footer .juups-footer__knop { margin-top: 1.5rem; }
.juups-footer .wp-block-button .wp-block-button__link { background: var(--j-goud); color: var(--j-espresso); text-decoration: none; }
.juups-footer .wp-block-button .wp-block-button__link:hover { background: #fff; color: var(--j-espresso); text-decoration: none; }
.wp-block-list.juups-footer__lijst { margin: 0; padding: 0; list-style: none; }
.juups-footer__lijst li { margin: 0 0 0.5rem; padding: 0.15rem 0; }
/* De vermelding van de maker van de site: een gewone link (geen nofollow), zodat de verwijzing meetelt */
.juups-footer .juups-footer__credit a { color: var(--j-goud); }
.juups-footer .juups-footer__credit a:hover { color: #fff; text-decoration: underline; }

/* Vaste balk onderaan op een telefoon (waar het menu achter de knop zit): bellen of een offerte aanvragen */
.juups-actiebalk { display: none; }
@media (max-width: 599px) {
	.juups-actiebalk {
		position: fixed;
		inset: auto 0 0 0;
		z-index: 30;
		display: flex;
		gap: 0.6rem;
		padding: 0.65rem var(--j-rand) calc(0.65rem + env(safe-area-inset-bottom, 0px));
		background: rgb(30 24 16 / 0.97);
		border-top: 1px solid rgb(255 255 255 / 0.12);
	}
	.juups-actiebalk a { flex: 1; padding: 0.8rem 0.75rem; border-radius: var(--j-straal); font-weight: 600; text-align: center; text-decoration: none; }
	.juups-actiebalk__bel { border: 1.5px solid rgb(255 255 255 / 0.6); color: #fff; }
	.juups-actiebalk__offerte { border: 1.5px solid var(--j-goud); background: var(--j-goud); color: var(--j-espresso); }
	.juups-footer { padding-bottom: 6.5rem; }
	/* Op de pagina met het formulier zelf is de balk overbodig en ligt hij over het veld waarin getypt wordt */
	body:has(.juups-formulier) .juups-actiebalk { display: none; }
	body:has(.juups-formulier) .juups-footer { padding-bottom: var(--wp--preset--spacing--50); }
}

/* 404 */
.juups-404 { padding-block: var(--j-ruimte-groot); text-align: left; }
.juups-404 h1 { margin: 0 0 1rem; font-size: clamp(2.4rem, 3vw + 1rem, 4rem); }
.juups-404 .juups-lead { max-width: 36rem; }