/*
Theme Name: ComboPrint Child
Description: Child-thema van Twenty Twenty-Five met de ComboPrint huisstijl (Nunito Sans koppen, Open Sans tekst, eigen kleurenpalet). Beheer via WordPress-blokken; geen page builder.
Author: Hermes voor ComboPrint
Template: twentytwentyfive
Version: 0.5.18
Text Domain: comboprint-child
*/

/* Kleine aanvullingen op Twenty Twenty-Five, huisstijl ComboPrint */

/* Lokaal gehoste huisstijlfonts (Nunito Sans + Open Sans, variabel) —
   geen beroep meer op Google Fonts, dus geen externe partij. */
@font-face {
	font-family: 'Nunito Sans';
	font-style: normal;
	font-weight: 200 900;
	src: url(/wp-content/themes/comboprint-child/assets/fonts/NunitoSans.woff2) format('woff2');
	font-display: swap;
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: 200 900;
	src: url(/wp-content/themes/comboprint-child/assets/fonts/OpenSans.woff2) format('woff2');
	font-display: swap;
}

/* Iets ruimere leesmarge voor dienstenpagina's */
.wp-site-blocks > * + * {
	margin-block-start: 0;
}

/* Afbeeldingen in projecten netjes uitgelijnd */
.wp-block-image img {
	border-radius: 4px;
}


/* Home: paginatitel verbergen (hero neemt de rol over) */
.home .wp-block-post-title {
	display: none;
}

/* Footer: witte links op donkerblauw */
.site-footer a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.site-footer a:hover {
	color: #28ccfa;
}

/* Navigatie in header iets ruimer */
.wp-block-navigation a {
	font-weight: 600;
}

/* ===== Hero-carrousel (home) ===== */
.hero-band {
	position: relative;
	overflow: hidden;
	min-height: clamp(340px, 26vw, 580px);
	display: flex;
	align-items: center;
}
.hero-band .hero-slide {
	position: absolute;
	inset: 0;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	opacity: 0;
	animation: comboprint-herofade 28s infinite;
}
.hero-band .hero-slide img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	display: block;
	transform-origin: center;
	/* Ademend effect: trage zoom zolang de slide zichtbaar is */
	animation: comboprint-kenburns 28s ease-in-out infinite;
}
.hero-band .hero-slide-1 { animation-delay: var(--cp-strip-offset, 0s); }
.hero-band .hero-slide-2 { animation-delay: calc(7s + var(--cp-strip-offset, 0s)); }
.hero-band .hero-slide-3 { animation-delay: calc(14s + var(--cp-strip-offset, 0s)); }
.hero-band .hero-slide-4 { animation-delay: calc(21s + var(--cp-strip-offset, 0s)); }
.hero-band .hero-slide-1 img { animation-delay: var(--cp-strip-offset, 0s); }
.hero-band .hero-slide-2 img { animation-delay: calc(7s + var(--cp-strip-offset, 0s)); }
.hero-band .hero-slide-3 img { animation-delay: calc(14s + var(--cp-strip-offset, 0s)); }
.hero-band .hero-slide-4 img { animation-delay: calc(21s + var(--cp-strip-offset, 0s)); }
.hero-band::after {
	content: '';
	position: absolute;
	inset: 0;
	/* Zachte gradient i.p.v. vlakke sluier: boven lichter zodat de beelden
	   leven, onderaan donkerder voor de leesbaarheid van de tekst. */
	background: linear-gradient(180deg, rgba(4, 25, 78, 0.28) 0%, rgba(4, 25, 78, 0.45) 42%, rgba(4, 25, 78, 0.62) 100%);
	z-index: 1;
}
.hero-band .hero-content {
	position: relative;
	z-index: 4;
	width: 100%;
	max-width: none !important;
}
/* Golven boven en onder de hero — altijd volle breedte */
.hero-wave-top,
.hero-wave-bottom {
	position: absolute;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	max-width: 100% !important;
	margin: 0 !important;
	z-index: 3;
	pointer-events: none;
}
.hero-wave-top {
	top: 0;
	height: 60px;
}
.hero-wave-bottom {
	bottom: -1px;
	height: 90px;
}
/* Tekst: opvallend en leesbaar */
.hero-content h1 {
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	line-height: 1.12;
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55);
}
/* ===== ComboPrint hexagon-structuur: subtiel zeshoek-lijnenpatroon ===== */
:root {
	--cp-hex: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.055' stroke-width='1'%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,0)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,30)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,60)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(34.64,15)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(34.64,45)'/%3E%3C/g%3E%3C/svg%3E");
	/* Sterkere variant voor kleine donkerblauwe vlakken (rubriek-badges),
	   waar het basispatroon te fijn wegvalt. */
	--cp-hex-strong: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34.64' height='60'%3E%3Cg fill='none' stroke='white' stroke-opacity='0.12' stroke-width='1'%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,0)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,30)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(0,60)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(34.64,15)'/%3E%3Cpolygon points='0,-20 17.32,-10 17.32,10 0,20 -17.32,10 -17.32,-10' transform='translate(34.64,45)'/%3E%3C/g%3E%3C/svg%3E");
}
/* De structuur op de donkerblauwe vlakken van de site */
.hero-content p,
.diensten-grid .wp-block-column .wp-block-heading,
.usp-grid > .wp-block-column,
.over-media .wp-block-media-text__content .wp-block-heading,
.site-footer,
.nav-cta-contact .wp-block-navigation-item__content {
	background-image: var(--cp-hex);
}

/* ===== Hero-subtekst: lijnbreuk + lichterblauw blok ===== */
.hero-content p {
	font-size: clamp(1.1rem, 1.9vw, 1.45rem);
	font-weight: 700;
	background-color: #0a3feb;
	background-image:
		radial-gradient(130% 150% at 50% -20%, rgba(255, 255, 255, 0.14) 0%, rgba(255, 255, 255, 0) 55%),
		linear-gradient(180deg, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.18) 100%),
		var(--cp-hex);
	color: #ffffff;
	border-radius: 16px;
	border: 1px solid rgba(255, 255, 255, 0.85);
	padding: 0.9rem 1.6rem;
	width: fit-content;
	max-width: min(84rem, 96%);
	margin-left: auto;
	margin-right: auto;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.28);
}
/* Knoppen: duidelijk en goed zichtbaar */
.hero-band .wp-block-button__link {
	font-weight: 700;
	font-size: 1.05rem;
	padding: 0.8rem 1.6rem;
}
/* Primaire CTA "Neem contact op": overal dezelfde gele huisstijlknop met
   donkerblauwe vette tekst (goed contrast), geen grijze hover. */
.hero-band .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link,
.cta-band .wp-block-button__link {
	background-color: #ffcd2a;
	color: #04194e;
	font-weight: 700;
}
.hero-band .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link:hover,
.hero-band .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link:focus-visible,
.cta-band .wp-block-button__link:hover,
.cta-band .wp-block-button__link:focus-visible {
	background-color: #04194e !important;
	color: #ffffff !important;
}
.hero-band .wp-block-button.is-style-outline .wp-block-button__link,
.hero-band .wp-block-button.is-style-outline--1 .wp-block-button__link {
	background-color: #ffffff;
	color: #04194e;
	border: 2px solid #ffffff;
}
.hero-band .wp-block-button.is-style-outline .wp-block-button__link:hover,
.hero-band .wp-block-button.is-style-outline--1 .wp-block-button__link:hover {
	background-color: #28ccfa;
	color: #04194e;
	border-color: #28ccfa;
}
@keyframes comboprint-herofade {
	0%   { opacity: 0; }
	2.5% { opacity: 1; }
	21%  { opacity: 1; }
	25%  { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes comboprint-kenburns {
	0%   { transform: scale(1); }
	25%  { transform: scale(1.07); }
	100% { transform: scale(1.07); }
}
/* Toegankelijkheid: geen beweging voor wie dat wenst (enkel slide 1 statisch) */
@media (prefers-reduced-motion: reduce) {
	.hero-band .hero-slide,
	.hero-band .hero-slide img {
		animation: none !important;
	}
	.hero-band .hero-slide-1 {
		opacity: 1;
	}
	.diensten-grid .wp-block-column figure img {
		transition: none;
	}
	.diensten-grid .wp-block-column:hover figure img,
	.diensten-grid .wp-block-column:focus-within figure img {
		transform: none;
	}
}
@media (max-width: 781px) {
	.hero-band { min-height: 420px; }
	.hero-wave-top { height: 40px; }
	.hero-wave-bottom { height: 60px; }
}

/* Responsive slide-paren: desktop-panorama (4:1) vs mobiele 3-beeld compositie */
@media (min-width: 782px) {
	.hero-band .hero-slide-mob { display: none !important; }
}
@media (max-width: 781px) {
	.hero-band .hero-slide-desk { display: none !important; }
}

/* De sectie na de hero sluit direct aan (geen witte gap onder de golf) */
.home .hero-band + .wp-block-group {
	margin-top: 0 !important;
}

/* ===== Over ComboPrint: media-carrousel met badge ===== */
.wp-block-media-text.over-media {
	gap: 3rem;
}
.over-media .wp-block-media-text__media {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	aspect-ratio: 1 / 1;
}
.over-media .wp-block-media-text__media img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	opacity: 0;
	animation: comboprint-herofade 24s infinite;
}
.over-media .wp-block-media-text__media .over-slide-1 { animation-delay: var(--cp-over-offset, 0s); }
.over-media .wp-block-media-text__media .over-slide-2 { animation-delay: calc(6s + var(--cp-over-offset, 0s)); }
.over-media .wp-block-media-text__media .over-slide-3 { animation-delay: calc(12s + var(--cp-over-offset, 0s)); }
.over-media .wp-block-media-text__media .over-slide-4 { animation-delay: calc(18s + var(--cp-over-offset, 0s)); }
.over-media .wp-block-media-text__content {
	text-align: center;
}
.over-media .wp-block-media-text__content .wp-block-heading {
	background-color: #04194e;
	color: #ffffff;
	border-radius: 14px;
	padding: 0.7rem 1.75rem;
	display: inline-block;
	margin: 0 0 1.25rem;
	text-align: center;
}
.over-media .wp-block-media-text__content p {
	max-width: 36rem;
	margin-left: auto;
	margin-right: auto;
}
.over-media .wp-block-buttons {
	justify-content: center;
}
@media (max-width: 781px) {
	.over-media .wp-block-media-text__media {
		border-radius: 20px;
	}
}

/* ===== Recent werk: lichtgrijze band, breed grid, wisselende beelden ===== */
.recent-band .wp-block-heading {
	margin-bottom: 2.25rem;
}
.recent-band .wp-block-gallery {
	max-width: 1218px;
	margin-left: auto;
	margin-right: auto;
}
.recent-band figure.wp-block-image {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}
.recent-band figure.wp-block-image img {
	border-radius: 0;
}
.recent-band figure.wp-block-image .recent-wissel {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	opacity: 0;
	animation: comboprint-werkfade 12s infinite;
}
/* Per cel een andere starttijd, zodat niet alles tegelijk wisselt */
.recent-band figure.wp-block-image .recent-wissel-1 { animation-delay: var(--cp-recent-offset, 0s); }
.recent-band figure.wp-block-image .recent-wissel-2 { animation-delay: calc(2s + var(--cp-recent-offset, 0s)); }
.recent-band figure.wp-block-image .recent-wissel-3 { animation-delay: calc(4s + var(--cp-recent-offset, 0s)); }
.recent-band figure.wp-block-image .recent-wissel-4 { animation-delay: calc(6s + var(--cp-recent-offset, 0s)); }
.recent-band figure.wp-block-image .recent-wissel-5 { animation-delay: calc(8s + var(--cp-recent-offset, 0s)); }
.recent-band figure.wp-block-image .recent-wissel-6 { animation-delay: calc(10s + var(--cp-recent-offset, 0s)); }
@keyframes comboprint-werkfade {
	0%   { opacity: 0; }
	4%   { opacity: 1; }
	46%  { opacity: 1; }
	50%  { opacity: 0; }
	100% { opacity: 0; }
}

/* Halve bovenmarge tussen header en hero op de home */
.home main {
	margin-top: clamp(15px, 3.5vw, 35px) !important;
}

/* Verwijder de tweede witruimte (template-padding rond de verborgen titel) op de home */
.home main > .wp-block-group.alignfull {
	padding-top: 0 !important;
}

/* ===== Dienstenkaarten-grid (home + diensten) =====
   Rij 1 en rij 2 krijgen even brede kaarten (267px, de natuurlijke breedte
   van 3 kaarten in de contentkolom). Rij 1 benut meer sectiebreedte;
   rij 2 blijft even breed en staat gecentreerd onder rij 1. */
.wp-block-columns.diensten-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	margin-left: auto;
	margin-right: auto;
}
.wp-block-columns.diensten-grid-4 {
	width: 1218px;
	max-width: 1218px;
}
.wp-block-columns.diensten-grid-3 {
	width: 901px;
	max-width: 901px;
}
.wp-block-columns.diensten-grid > .wp-block-column {
	flex: 0 0 267px;
}
@media (max-width: 1280px) {
	.wp-block-columns.diensten-grid-4,
	.wp-block-columns.diensten-grid-3 {
		width: auto;
		max-width: 100%;
	}
}

/* ===== Styling dienstenkaarten =====
   Afgeronde hoeken, donkerdere kaartachtergrond, gecentreerde tekst
   en een donkerblauwe titelbalk met lichte letters. */
.diensten-grid .wp-block-column > .wp-block-group {
	border-radius: 12px;
	overflow: hidden;
	background-color: #edf1f5 !important;
}
.diensten-grid .wp-block-column figure {
	margin: 0;
	overflow: hidden; /* foto-zoom blijft binnen de kaart en klemt niet over de titelbalk */
}
.diensten-grid .wp-block-column .wp-block-heading {
	background-color: #04194e;
	color: #ffffff;
	text-align: center;
	padding: 0.65rem 1rem;
	margin: 0;
}
.diensten-grid .wp-block-column p {
	text-align: center;
}
.diensten-grid .wp-block-column > .wp-block-group {
	display: flex;
	flex-direction: column;
	height: 100%;
}
.diensten-grid .wp-block-column > .wp-block-group > p:last-of-type {
	margin-top: auto;
}
@media (min-width: 782px) {
	.diensten-grid .wp-block-column > .wp-block-group > p:first-of-type {
		min-height: calc(5 * 1.7em); /* 5 regels = hoogte van de langste beschrijving */
	}
}

/* ===== Dienstenkaarten: hele kaart klikbaar + hover op de titel =====
   De "Meer weten"-link wordt via een stretched link over de volledige
   kaart gelegd; de witte titel in de donkerblauwe balk groeit subtiel
   en kleurt lichtblauw bij hover (transform + kleur, dus geen
   layoutverspringing). */
.diensten-grid .wp-block-column {
	position: relative;
}
.diensten-grid .wp-block-column > .wp-block-group > p:last-of-type a::after {
	content: '';
	position: absolute;
	inset: 0;
}
.diensten-grid .wp-block-column .wp-block-heading {
	transition: transform 0.2s ease, background-color 0.2s ease;
}
.diensten-grid .wp-block-column:hover .wp-block-heading,
.diensten-grid .wp-block-column:focus-within .wp-block-heading {
	transform: scale(1.05);
	background-color: #0a3feb;
}
/* Foto in de kaart zoomt zachtjes mee bij hover/focus — de kaart leeft meer */
.diensten-grid .wp-block-column figure img {
	transition: transform 0.45s ease;
}
.diensten-grid .wp-block-column:hover figure img,
.diensten-grid .wp-block-column:focus-within figure img {
	transform: scale(1.06);
}

/* ===== Dienstenpagina 3D: rubriekblokken =====
   Afwisselend beeld links/rechts, kleinere afbeelding (40%) met
   afgeronde hoeken, rubriek-titel als donkerblauwe badge met
   hex-structuur. */
.wp-block-media-text.rubriek-media {
	gap: 2.5rem;
	grid-template-columns: 40% 1fr;
}
.wp-block-media-text.rubriek-media.has-media-on-the-right {
	grid-template-columns: 1fr 40%;
}
.rubriek-media .wp-block-media-text__media {
	border-radius: 20px;
	overflow: hidden;
}
.rubriek-media .wp-block-media-text__media img {
	border-radius: 0;
	width: 100%;
	height: auto;
	display: block;
}
.rubriek-media .wp-block-heading.rubriek-titel {
	background-color: #04194e;
	background-image: var(--cp-hex-strong);
	color: #ffffff;
	border-radius: 14px;
	padding: 0.55rem 1.4rem;
	display: inline-block;
	margin: 0 0 1.1rem;
}
/* Rubriek-teksten iets groter voor betere leesbaarheid */
.rubriek-media .wp-block-media-text__content p {
	font-size: 1.15rem;
	line-height: 1.7;
}
.rubriek-media .wp-block-media-text__content ul {
	font-size: 1.15rem;
	line-height: 1.7;
	margin: 0;
	padding-left: 1.4em;
}
.rubriek-media .wp-block-media-text__content li {
	margin-block: 0.35em;
}
/* Lichtgrijze rubriekbanden: de band zelf begint zonder extra marge
   (de voorgaande witte rubriek levert de ademruimte). */
.rubriek-band {
	margin-block-start: 0 !important;
}
/* Witte rubrieken (buiten de banden): zelfde ademruimte als de
   bandpadding, zodat de afbeeldingen niet tegen de banden plakken,
   noch onder noch boven. */
.wp-block-media-text.rubriek-media:not(.rubriek-band .rubriek-media) {
	margin-block: 3.5rem;
}
/* FDM/Resin-tipblok: opvallend lichtblauw blok met vette, grotere tekst,
   gecentreerd, met een lamp-icoontje boven de tekst */
.wp-block-group.tip-blok {
	padding: 2.5rem 2.5rem;
	border-radius: 16px;
	margin-block: 2rem;
	text-align: center;
}
.tip-blok p {
	color: #04194e;
	font-weight: 700;
	font-size: clamp(1.1rem, 1.6vw, 1.3rem);
	line-height: 1.5;
	margin: 0;
	max-width: none;
	text-align: center;
}
.tip-blok p::before {
	content: '';
	display: block;
	width: 46px;
	height: 46px;
	margin: 0 auto 1.1rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2304194e' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 18h6'/%3E%3Cpath d='M10 21h4'/%3E%3Cpath d='M12 3a6.5 6.5 0 0 0-3.7 11.8c.7.5 1.2 1.3 1.2 2.2h5c0-.9.5-1.7 1.2-2.2A6.5 6.5 0 0 0 12 3z'/%3E%3C/svg%3E") no-repeat center / contain;
}
@supports not (grid-template-columns: 40% 1fr) {
	.wp-block-media-text.rubriek-media,
	.wp-block-media-text.rubriek-media.has-media-on-the-right {
		grid-template-columns: 1fr;
	}
}

/* ===== Waarom ComboPrint? USP-kaarten =====
   Zelfde kaartenstijl als de dienstenkaarten, maar geïnverteerd:
   donkerblauwe kaart, witte titelbalk met donkere tekst. */
.wp-block-columns.usp-grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 50px;
	width: 1218px;
	max-width: 1218px;
	margin-left: auto;
	margin-right: auto;
}
.usp-grid > .wp-block-column {
	flex: 0 0 267px;
	background-color: #04194e;
	border-radius: 12px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	outline: 1px solid rgba(4, 25, 78, 0.9);
	transition: transform 0.25s ease, box-shadow 0.25s ease, outline-color 0.25s ease;
}
.usp-grid .wp-block-column .wp-block-heading {
	background-color: #ffffff;
	color: #1e2124;
	text-align: center;
	padding: 0.65rem 1rem;
	margin: 0;
	transition: color 0.25s ease;
}
.usp-grid .wp-block-column p {
	color: #ffffff;
	text-align: center;
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 1.25rem;
}
@media (max-width: 1280px) {
	.wp-block-columns.usp-grid {
		width: auto;
		max-width: 100%;
	}
}

/* Icoon boven de titel op de Waarom-kaarten — accentkleur, vrijstaand (variant C) */
.usp-grid .wp-block-column figure.usp-icon {
	width: 76px;
	height: 76px;
	box-sizing: border-box;
	margin: 1.6rem auto 1.2rem;
	transition: transform 0.28s ease;
}
.usp-grid .wp-block-column figure.usp-icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	display: block;
}

/* Waarom-kaarten: overal de standaard pijl (geen tekst-selectiecursor op de tekst) */
.wp-block-columns.usp-grid,
.usp-grid .wp-block-column,
.usp-grid .wp-block-column p,
.usp-grid .wp-block-column .wp-block-heading {
	cursor: default;
}

/* Subtiele hover op de USP-kaarten: lichte lift, zachte schaduw en een
   linkblauwe rand + titelkleur die meetint. Alleen op hover-capabele schermen. */
@media (hover: hover) {
	.usp-grid > .wp-block-column:hover,
	.usp-grid > .wp-block-column:focus-within {
		transform: translateY(-5px);
		box-shadow: 0 16px 32px rgba(4, 25, 78, 0.28);
		outline-color: rgba(10, 63, 235, 0.75);
	}
	.usp-grid > .wp-block-column:hover .wp-block-heading {
		color: #0a3feb;
	}
	/* Icoon zoomt zachtjes mee */
	.usp-grid > .wp-block-column:hover figure.usp-icon,
	.usp-grid > .wp-block-column:focus-within figure.usp-icon {
		transform: scale(1.12);
	}
}
/* Toegankelijkheid: geen beweging op de USP-kaarten */
@media (prefers-reduced-motion: reduce) {
	.usp-grid .wp-block-column figure.usp-icon {
		transition: none;
	}
	.usp-grid > .wp-block-column:hover figure.usp-icon,
	.usp-grid > .wp-block-column:focus-within figure.usp-icon {
		transform: none;
	}
}

/* ===== Over ons-pagina: atelierfoto links, tekstkader rechts overlappend =====
   Zoals op de originele site: foto ~72% breed links, langwerpig wit kader rechts,
   verticaal gecentreerd, deels over de foto en deels rechts ervan. Nieuw palet. */
.over-compo-band {
	padding-left: 1rem;
	padding-right: 1rem;
}
.over-compo {
	position: relative;
}
.over-compo-band .over-compo {
	max-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.over-compo-foto {
	margin: 0;
	width: 72%;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 18px 44px rgba(4, 25, 78, 0.18);
}
.over-compo-foto img {
	display: block;
	width: 100%;
	height: auto;
}
.over-compo-kader {
	position: absolute;
	top: 50%;
	right: 3%;
	transform: translateY(-50%);
	width: 53%;
	z-index: 2;
	margin: 0;
	background-color: #ffffff;
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(4, 25, 78, 0.22);
	padding: clamp(1.4rem, 2.2vw, 2.2rem);
}
.over-compo-kader p {
	margin: 0;
	color: #1e2124;
	font-size: 1.125rem;
	line-height: 1.65;
}
.over-compo-kader p + p {
	margin-top: 1rem;
}
.over-compo-kader .over-accent {
	color: #0a3feb;
	font-weight: 700;
}
@media (max-width: 1100px) {
	.over-compo-foto {
		width: 100%;
	}
	.over-compo-kader {
		position: static;
		transform: none;
		width: auto;
		margin: 1.25rem 0 0;
	}
}

/* ===== Pagina-titelbanner (alle pagina's behalve home) =====
   Donkerblauwe band met grote witte titel en een vloeiende golf onderaan. */
.page-hero {
	text-align: center;
}
.page-hero .wp-block-post-title,
.page-hero h1.wp-block-heading {
	color: #ffffff;
	font-size: clamp(2.5rem, 5vw, 4rem);
	margin: 0;
	line-height: 1.15;
	text-wrap: balance;
}
/* ===== Dienstenpagina's: statische faded achtergrondfoto in de titelzone ===== */
.page-hero {
	background-size: cover;
	background-position: center;
	padding-top: clamp(5.5rem, 10vw, 8rem) !important;
	padding-bottom: clamp(4rem, 7vw, 5.5rem) !important;
}
/* ===== Brede schermen (variant C, Bart 14/09): de band groeit mee zodat de
   strips beter tot hun recht komen; op 1920px wordt ±70% van de strip getoond
   i.p.v. ±48%. Full-bleed en de golf blijven ongewijzigd. ===== */
@media (min-width: 1400px) {
	.page-hero {
		padding-top: clamp(6.5rem, 10vw, 13rem) !important;
		padding-bottom: clamp(4.5rem, 8vw, 11rem) !important;
	}
}

/* ===== Wisselende strip-banners (crossfade zoals de hero) =====
   Drie lagen: basis (strip 3) + ::before (strip 1) + ::after (strip 2).
   Elke laag draagt zijn eigen sluier; cyclus 21s, zachte overgangen. */
.page-hero {
	position: relative;
	z-index: 0;
}
.page-hero::before,
.page-hero::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: cp-banner-wissel 21s infinite;
	animation-delay: var(--cp-strip-offset, 0s);
}
.page-hero::after {
	animation-delay: calc(7s + var(--cp-strip-offset, 0s));
}
@keyframes cp-banner-wissel {
	0%    { opacity: 0; }
	2.9%  { opacity: 1; }
	32.9% { opacity: 1; }
	35.7% { opacity: 0; }
	100%  { opacity: 0; }
}
/* Vijf-lagen variant (Diensten-hub): de titel draagt twee extra lagen */
.page-hero .wp-block-post-title::before,
.page-hero .wp-block-post-title::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: -1;
	background-size: cover;
	background-position: center;
	opacity: 0;
	animation: cp-banner-wissel-vijf 35s infinite;
}
.page-hero .wp-block-post-title::before { animation-delay: calc(14s + var(--cp-strip-offset, 0s)); }
.page-hero .wp-block-post-title::after { animation-delay: calc(21s + var(--cp-strip-offset, 0s)); }
.page-id-219 .page-hero::before,
.page-id-219 .page-hero::after {
	animation-name: cp-banner-wissel-vijf;
	animation-duration: 35s;
}
@keyframes cp-banner-wissel-vijf {
	0%    { opacity: 0; }
	1.7%  { opacity: 1; }
	19.7% { opacity: 1; }
	21.4% { opacity: 0; }
	100%  { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.page-hero::before,
	.page-hero::after,
	.page-hero .wp-block-post-title::before,
	.page-hero .wp-block-post-title::after {
		animation: none;
	}
	.page-hero::before {
		opacity: 1;
	}
}
.page-hero .wp-block-post-title,
.page-hero h1.wp-block-heading {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.5);
}
.page-id-211 .page-hero { /* 2D Print — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_2D_Print_Strip_3-3.jpg');
}
.page-id-211 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_2D_Print_Strip_1-3.jpg');
}
.page-id-211 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_2D_Print_Strip_2-2.jpg');
}
.page-id-212 .page-hero { /* Textieldruk (DTF) — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_DTF_Strip_3-1.jpg');
}
.page-id-212 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_DTF_Strip_1.jpg');
}
.page-id-212 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_DTF_Strip_2-2.jpg');
}
.page-id-213 .page-hero { /* UV DTF — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_UV_DTF_Strip_3-1.jpg');
}
.page-id-213 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_UV_DTF_Strip_1.jpg');
}
.page-id-213 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_UV_DTF_Strip_2-1.jpg');
}
.page-id-214 .page-hero { /* 3D Print — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_3D_Print_Strip_3.jpg');
}
.page-id-214 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_3D_Print_Strip_1-2.jpg');
}
.page-id-214 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_3D_Print_Strip_2-1.jpg');
}
.page-id-215 .page-hero { /* Graveren — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Graveren_Strip_3.jpg');
}
.page-id-215 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Graveren_Strip_1-1.jpg');
}
.page-id-215 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Graveren_Strip_2-1.jpg');
}
.page-id-216 .page-hero { /* Ontwerp — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Ontwerp_Strip_3.jpg');
}
.page-id-216 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Ontwerp_Strip_1.jpg');
}
.page-id-216 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Ontwerp_Strip_2-1.jpg');
}
.page-id-278 .page-hero { /* Sublimatie — wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Sublimatie_Strip_3.jpg');
}
.page-id-278 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Sublimatie_Strip_1.jpg');
}
.page-id-278 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Sublimatie_Strip_2-2.jpg');
}

/* Diensten-hub: zelfde faded achtergrondbehandeling */
.page-id-219 .page-hero { /* Diensten — vijf wisselende strips */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Diensten_Strip_5-1.jpg');
}
.page-id-219 .page-hero::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Diensten_Strip_1-1.jpg');
}
.page-id-219 .page-hero::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Diensten_Strip_2-2.jpg');
}
.page-id-219 .page-hero .wp-block-post-title::before {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Diensten_Strip_3-1.jpg');
}
.page-id-219 .page-hero .wp-block-post-title::after {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.70) 0%, rgba(4, 25, 78, 0.45) 100%),
		url('/wp-content/uploads/2026/09/Banner_Diensten_Strip_4.jpg');
}

/* Overige pagina's: passende titelzone-achtergronden */
.page-id-170 .page-hero { /* Over ons */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.86) 0%, rgba(4, 25, 78, 0.58) 100%),
		url('/wp-content/uploads/2026/09/Banner_OverOns_v2.png');
}
.page-id-220 .page-hero, /* Projecten (blog-index) */
body.blog .page-hero {
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.86) 0%, rgba(4, 25, 78, 0.58) 100%),
		url('/wp-content/uploads/2026/09/Banner_Projecten.jpg');
}
.page-id-225 .page-hero { /* Contact */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.86) 0%, rgba(4, 25, 78, 0.58) 100%),
		url('/wp-content/uploads/2026/09/Banner_Contact.jpg');
}
.page-id-171 .page-hero, /* Privacyverklaring */
.page-id-172 .page-hero, /* Disclaimer */
.page-id-173 .page-hero, /* Cookiebeleid */
.page-id-174 .page-hero { /* Algemene voorwaarden */
	background-image: linear-gradient(180deg, rgba(4, 25, 78, 0.88) 0%, rgba(4, 25, 78, 0.64) 100%),
		url('/wp-content/uploads/2026/09/Banner_Juridisch.jpg');
}

/* Lead-tekst onder de titelbanner: de intro subtiel laten opvallen (gecentreerd, 13/09) */
.page-intro {
	font-size: clamp(1.15rem, 1.7vw, 1.3rem);
	line-height: 1.65;
	color: #04194e;
	max-width: 50rem;
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

/* Dienstenpagina's: de band krijgt zelf een golvende onderrand (masker),
   zodat de foto doorloopt in de golf en er geen donkerblauw vlak meer
   onder de afbeelding hangt. De losse golf-svg wordt daarbij verborgen. */
.page-id-170 .page-hero,
.page-id-171 .page-hero,
.page-id-172 .page-hero,
.page-id-173 .page-hero,
.page-id-174 .page-hero,
.page-id-211 .page-hero,
.page-id-212 .page-hero,
.page-id-213 .page-hero,
.page-id-214 .page-hero,
.page-id-215 .page-hero,
.page-id-216 .page-hero,
.page-id-219 .page-hero,
.page-id-220 .page-hero,
body.blog .page-hero,
.page-id-225 .page-hero,
.page-id-278 .page-hero {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,70 C 960,110 480,110 0,70 Z' fill='%23fff'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 L1440,0 L1440,70 C 960,110 480,110 0,70 Z' fill='%23fff'/%3E%3C/svg%3E");
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
}
.page-id-170 .page-hero-wave,
.page-id-171 .page-hero-wave,
.page-id-172 .page-hero-wave,
.page-id-173 .page-hero-wave,
.page-id-174 .page-hero-wave,
.page-id-211 .page-hero-wave,
.page-id-212 .page-hero-wave,
.page-id-213 .page-hero-wave,
.page-id-214 .page-hero-wave,
.page-id-215 .page-hero-wave,
.page-id-216 .page-hero-wave,
.page-id-219 .page-hero-wave,
.page-id-220 .page-hero-wave,
body.blog .page-hero-wave,
.page-id-225 .page-hero-wave,
.page-id-278 .page-hero-wave {
	display: none !important;
}
.page-hero-wave {
	display: block;
	width: 100%;
	height: 80px;
	margin-top: -1px;
}
/* Home toont geen titelbanner (hero neemt de rol over) */
.home .page-hero,
.home .page-hero-wave {
	display: none;
}

/* ===== Logo in header: meeschalen op smallere schermen ===== */
@media (max-width: 1100px) {
	header .wp-block-image img {
		width: 320px !important;
	}
}
@media (max-width: 900px) {
	header .wp-block-image img {
		width: 260px !important;
	}
}
@media (max-width: 780px) {
	header .wp-block-image img {
		width: 210px !important;
	}
}
@media (max-width: 620px) {
	header .wp-block-image img {
		width: 130px !important;
	}
}

/* ===== Contact-CTA in de menubalk ===== */
.wp-block-navigation-item.nav-cta-contact .wp-block-navigation-item__content {
	background-color: #04194e;
	color: #ffffff;
	border-radius: 8px;
	padding: 0.5rem 1.25rem !important;
	font-weight: 600;
	text-decoration: none;
}
.wp-block-navigation-item.nav-cta-contact .wp-block-navigation-item__content:hover,
.wp-block-navigation-item.nav-cta-contact .wp-block-navigation-item__content:focus {
	background-color: #0a3feb;
	color: #ffffff;
	text-decoration: none;
}
/* In het mobiele overlaymenu dezelfde knopstijl behouden */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.nav-cta-contact .wp-block-navigation-item__content {
	display: inline-block;
}

/* ===== v0.4.88: sticky menubalk op desktop (>=1200px) ===== */
/* De menubalk blijft bovenaan plakken bij scrollen; tablet en mobiel blijven ongewijzigd. */
@media (min-width: 1200px) {
	header.wp-block-template-part {
		position: sticky;
		top: 0;
		z-index: 90;
	}
	/* Ingelogd (met WP-adminbalk): balk onder de adminbalk plakken */
	body.admin-bar header.wp-block-template-part {
		top: 32px;
	}
	/* Zachte schaduw zodra er gescrold is (klasse via assets/cp-sticky-header.js) */
	header.wp-block-template-part.cp-stuck {
		box-shadow: 0 12px 28px rgba(4, 25, 78, 0.10);
	}
}

/* ===== v0.4.91: mega-dropdown voor "Diensten" (desktop >=1200px) ===== */
/* Het paneel hangt aan de header (sticky = positioneel anker), gecentreerd over de volle breedte. */
@media (min-width: 1200px) {
	/* geen positioned tussenliggers, zodat het paneel aan de header (sticky) hangt */
	.wp-block-navigation,
	.wp-block-navigation__container,
	.wp-block-navigation__container > .wp-block-navigation-submenu,
	.wp-block-navigation__responsive-dialog,
	.wp-block-navigation__responsive-container,
	header.wp-block-template-part > .wp-block-group {
		position: static !important;
	}

	/* ---------- het paneel ---------- */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container {
		position: absolute !important;
		left: 50% !important;
		right: auto !important;
		top: calc(100% + 10px) !important;
		transform: translate(-50%, 0);
		box-sizing: border-box;
		width: min(920px, calc(100vw - 56px)) !important;
		min-width: 0 !important;
		max-width: none !important;
		display: grid !important;
		grid-template-columns: 1fr 1fr;
		gap: 2px 14px;
		/* kern-fix: core's default zet height:0 + overflow:hidden bij sluiten =
		   paneel klapt in tot een strookje voor de fade. Overschrijven zodat het
		   paneel zijn volle vorm houdt en alleen de fade-out speelt. */
		height: auto !important;
		overflow: visible !important;
		padding: 16px 16px 18px;
		background: #ffffff !important;
		border-radius: 18px;
		box-shadow: 0 34px 70px -28px rgba(4, 25, 78, 0.4);
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.4s ease, visibility 0s linear 0.4s;
		z-index: 95;
	}
	/* onzichtbare hoverbrug: het paneel blijft open van de balk naar het paneel */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container::before {
		content: '';
		position: absolute;
		left: 0;
		right: 0;
		top: -58px;
		height: 58px;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
	.wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translate(-50%, 0);
		transition: opacity 0.24s cubic-bezier(0.2, 0, 0, 1), visibility 0s;
	}

	/* ---------- de items ---------- */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		position: relative;
		border-radius: 14px;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a {
		display: block !important;
		position: relative;
		box-sizing: border-box;
		min-height: 70px;
		padding: 11px 14px 12px 72px !important;
		border-radius: 14px;
		font-weight: 600;
		font-size: 15px;
		line-height: 1.25;
		color: #04194e;
		transition: background-color 0.18s ease;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > a {
		background-color: rgba(4, 25, 78, 0.045) !important;
	}
	/* chip met icoon in één laag (icoon zit als achtergrondbeeld in de chip) */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a::before {
		content: '';
		position: absolute;
		left: 13px;
		top: 50%;
		width: 46px;
		height: 46px;
		margin-top: -23px;
		border-radius: 13px;
		background-color: rgba(40, 204, 250, 0.14);
		background-repeat: no-repeat;
		background-position: center;
		background-size: 22px 22px;
		transition: background-color 0.2s ease, transform 0.2s ease;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:hover > a::before {
		background-color: #28ccfa;
		transform: scale(1.06);
	}
	/* kleine beschrijving onder de titel */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item > a::after {
		display: block;
		font-weight: 400;
		font-size: 12.5px;
		line-height: 1.3;
		color: #62708c;
		margin-top: 2px;
	}

	/* ---------- icoon + beschrijving per dienst ---------- */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/2d.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1) > a::after { content: 'Posters, stickers, banners & belettering'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/dtf.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) > a::after { content: 'T-shirts, hoodies & kledij op maat'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/uvdtf.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) > a::after { content: 'Stickers voor metaal, glas & harde materialen'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/3d.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4) > a::after { content: 'Prototypes, decoratie & maatwerk in 3D'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(5) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/graveren.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(5) > a::after { content: 'Laserwerk op hout, glas, acryl & metaal'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(6) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/sublimatie.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(6) > a::after { content: 'Mokken, tumblers & fotopanelen'; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(7) > a::before { background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/ontwerp.svg'); }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(7) > a::after { content: 'Van schets tot drukklare bestanden'; }
	/* CTA helemaal onderaan: alle diensten in één overzicht */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8) > a {
		background-color: rgba(40, 204, 250, 0.08);
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8):hover > a {
		background-color: rgba(40, 204, 250, 0.16);
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8) > a::before {
		background-image: url('/wp-content/themes/comboprint-child/assets/menu-icons/alle.svg');
		background-color: rgba(40, 204, 250, 0.5);
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8):hover > a::before {
		background-color: #28ccfa;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8) > a::after { content: 'Het volledige aanbod in één overzicht'; }

	/* ---------- openingsanimatie (items komen na elkaar binnen) ---------- */
	.wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container > .wp-block-navigation-item,
	.wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container > .wp-block-navigation-item {
		animation: cp-mega-item 0.34s ease both;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.01s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.04s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.07s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.1s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.13s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(6) { animation-delay: 0.16s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(7) { animation-delay: 0.19s; }
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation__submenu-container > .wp-block-navigation-item:nth-child(8) { animation-delay: 0.22s; }
	@keyframes cp-mega-item {
		from { opacity: 0; transform: translateY(9px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* pijltje bij "Diensten" draait mee open */
	.wp-block-navigation__container > .wp-block-navigation-submenu > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
		transition: transform 0.25s ease;
	}
	.wp-block-navigation__container > .wp-block-navigation-submenu:hover > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon,
	.wp-block-navigation__container > .wp-block-navigation-submenu:focus-within > .wp-block-navigation-item__content .wp-block-navigation__submenu-icon {
		transform: rotate(180deg);
	}
}

/* ===== v0.4.95: galerij-stijl voor voorbeelden-secties (niet de home-grid) ===== */
.wp-block-gallery.has-nested-images:not(.recent-grid) figure.wp-block-image img {
	border-radius: 18px;
}

/* ===== v0.4.97: kaartenstroken (usp-grid) netjes centreren + responsief ===== */
/* De kaartenstrook (1218px) is breder dan de contentkolom (900px). Auto-marges zijn dan 0
   en de strook schoof rechts uit. Centreer expliciet over het midden van de ouder. */
@media (min-width: 1281px) {
	.is-layout-constrained > .wp-block-columns.usp-grid {
		margin-left: calc(50% - 609px) !important;
		margin-right: calc(50% - 609px) !important;
	}
}
/* Tussen 782 en 1280px: kaarten op vaste breedte laten terugvallen in een gecentreerd
   raster (2×2) i.p.v. onnodig te krimpen. */
@media (min-width: 782px) and (max-width: 1280px) {
	.wp-block-columns.usp-grid {
		flex-wrap: wrap !important;
	}
}
/* Vaste kaartbreedte (267px); overschrijft core's flex-basis:0. Op mobiel wint de
   core-stacking (flex-basis:100% !important, hogere specificiteit) gewoon. */
.wp-block-columns.usp-grid > .wp-block-column {
	flex: 0 0 267px !important;
}

/* ===== v0.5.00: FAQ-blokken (details/summary) ===== */
.faq-sectie .wp-block-heading {
	margin-bottom: 1.9rem;
}
.faq-item {
	border: 1px solid rgba(4, 25, 78, 0.14);
	border-radius: 14px;
	background: #ffffff;
	margin-bottom: 14px;
}
.faq-item summary {
	cursor: pointer;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	color: #04194e;
	padding: 1.05rem 3.2rem 1.05rem 1.4rem;
	position: relative;
	list-style: none;
}
.faq-item summary::-webkit-details-marker {
	display: none;
}
.faq-item summary::after {
	content: "";
	position: absolute;
	right: 1.35rem;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2.5px solid #28ccfa;
	border-bottom: 2.5px solid #28ccfa;
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.18s ease;
}
.faq-item[open] summary::after {
	transform: translateY(-30%) rotate(-135deg);
}
.faq-item p {
	margin: 0;
	padding: 0 1.4rem 1.2rem;
	color: #3a4a63;
}

/* ===== v0.5.02: Gerelateerde diensten + Forminator-verzendknop in huisstijl ===== */
.gerelateerd-blok .wp-block-heading {
	text-align: center;
	margin-bottom: 0.4rem;
}
.gerelateerd-blok .gerelateerd-intro {
	text-align: center;
	margin-bottom: 1.4rem;
	color: #3a4a63;
}
.gerelateerd-buttons {
	justify-content: center;
}
.gerelateerd-buttons .wp-block-button__link {
	background-color: #ffffff;
	color: #04194e;
	border: 2px solid #04194e;
	border-radius: 14px;
	font-weight: 700;
	padding: 0.7rem 1.75rem;
}
.gerelateerd-buttons .wp-block-button__link:hover,
.gerelateerd-buttons .wp-block-button__link:focus-visible {
	background-color: #28ccfa;
	border-color: #28ccfa;
	color: #04194e;
}
/* Contactformulier: verzendknop in huisstijl (donkerblauw, accent bij hover) */
.forminator-button-submit {
	background-color: #04194e !important;
	color: #ffffff !important;
	border: 0 !important;
	border-radius: 14px !important;
	font-family: 'Nunito Sans', sans-serif !important;
	font-weight: 700 !important;
	font-size: 1.05rem !important;
	padding: 0.9rem 2.2rem !important;
	transition: background-color 0.18s ease, color 0.18s ease !important;
}
.forminator-button-submit:hover,
.forminator-button-submit:focus-visible {
	background-color: #28ccfa !important;
	color: #04194e !important;
}

/* ===== v0.5.03: Facebook-icoon in de footer ===== */
.site-footer .footer-social {
	margin: 1.2rem 0 0;
}
.site-footer .footer-social a {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	text-decoration: none;
}
.site-footer .footer-social-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background-color: #1877f2;
	transition: background-color 0.18s ease;
}
.site-footer .footer-social-label {
	color: #ffffff;
	font-weight: 600;
}
.site-footer .footer-social a:hover .footer-social-badge,
.site-footer .footer-social a:focus-visible .footer-social-badge {
	background-color: #4a9bf7;
}
.site-footer .footer-social a:hover .footer-social-label,
.site-footer .footer-social a:focus-visible .footer-social-label {
	text-decoration: underline;
}


/* ---------- 404-pagina (pagina niet gevonden) ---------- */
.cp-404 { text-align: center; }
.cp-404 .cp-404__kicker {
	display: inline-block;
	margin: 0 0 0.9rem;
	padding: 6px 18px;
	border-radius: 999px;
	background: rgba(40, 204, 250, 0.14);
	color: #04194e;
	font-family: var(--wp--preset--font-family--nunito-sans);
	font-weight: 800;
	font-size: 0.95rem;
	letter-spacing: 0.14em;
}
.cp-404 .cp-404__sub { margin-top: 3.2rem; font-size: 1.5rem; }
.cp-404 .cp-404__links {
	margin-top: 0.8rem;
	width: fit-content;
	max-width: 100%;
	margin-left: auto !important;
	margin-right: auto !important;
	/* op mobiel stapelen de kolommen; kleine rij-afstand zodat het één lijst lijkt */
	gap: 0.35rem 3rem !important;
}
.cp-404 .cp-404__links .wp-block-column { flex-grow: 0; flex-basis: auto; }
.cp-404 .cp-404__links .wp-block-list { margin-top: 0; text-align: left; list-style: none; padding-left: 0.2rem; }
.cp-404 .cp-404__links li { margin-bottom: 0.45rem; }
.cp-404 .cp-404__links a {
	color: #04194e;
	text-decoration: none;
	border-bottom: 1px solid rgba(40, 204, 250, 0.55);
}
.cp-404 .cp-404__links a:hover { color: #0a3feb; border-bottom-color: #28ccfa; }
/* primaire knop = gele huisstijlknop met donkerblauwe tekst (zoals hero/cta-band) */
.cp-404 .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link {
	background-color: #ffcd2a;
	color: #04194e;
	font-weight: 700;
}
.cp-404 .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link:hover,
.cp-404 .wp-block-button:not(.is-style-outline):not(.is-style-outline--1) .wp-block-button__link:focus-visible {
	background-color: #04194e !important;
	color: #ffffff !important;
}

/* mobiel: de gestapelde lijst netjes centreren (kolommen stapelen onder 782px) */
@media (max-width: 781px) {
	.cp-404 .cp-404__links { width: auto; }
	.cp-404 .cp-404__links .wp-block-list { text-align: center; padding-left: 0; }
}