/* =========================================================================
   Visual Vibes Base — signature polish layer
   Layered on top of theme.json. Holds the flourishes that block markup and
   theme.json can't express well: floating pill nav, soft shadows, rounded
   cards, soft-yellow blobs, dot grid, hover motion, hero entrance.
   ========================================================================= */

:root {
	--vv-shadow-soft:  0 1px 2px rgba(23, 23, 23, .09);
	--vv-shadow-card:  0 1px 4px rgba(23, 23, 23, .11);
	--vv-shadow-hover: 0 2px 8px rgba(23, 23, 23, .14);
	--vv-glow:         0 1px 4px rgba(50, 57, 142, .22);
	--vv-ease:         cubic-bezier(.22, .61, .36, 1);
}

a,
.wp-block-button__link,
.vv-card,
.wp-block-image img,
.wp-block-details {
	transition: transform .25s var(--vv-ease), box-shadow .25s var(--vv-ease), background-color .25s var(--vv-ease), color .25s var(--vv-ease);
}

/* ---- Floating pill navbar ------------------------------------------------ */
header.wp-block-group {
	background: transparent !important;
	padding-top: clamp(1rem, 2.2vw, 1.9rem) !important;
}
.vv-navbar {
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(23, 23, 23, .06);
	border-radius: 9999px;
	box-shadow: var(--vv-shadow-soft);
	padding: .55rem .7rem .55rem 1.6rem;
}
.vv-navbar .wp-block-navigation a {
	border-radius: 9999px;
	padding: .4rem .95rem;
}
.vv-navbar .wp-block-navigation a:hover {
	background: var(--wp--preset--color--surface);
	color: var(--wp--preset--color--contrast);
}

/* ---- Buttons ------------------------------------------------------------- */
.wp-block-button__link {
	font-weight: 600;
	box-shadow: var(--vv-glow);
}
.wp-block-button__link:hover {
	transform: translateY(-2px);
	box-shadow: 0 3px 8px rgba(50, 57, 142, .30);
}
/* Outline = brand primary: 2px blue border, ink text (fills blue on hover) */
.wp-block-button.is-style-outline .wp-block-button__link {
	border: 2px solid var(--wp--preset--color--primary);
	color: var(--wp--preset--color--contrast);
	background: transparent;
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	transform: translateY(-2px);
	box-shadow: var(--vv-glow);
}

/* ---- Cards --------------------------------------------------------------- */
.vv-card {
	box-shadow: var(--vv-shadow-card);
	height: 100%;
}
.vv-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--vv-shadow-hover);
}

/* Rounded imagery everywhere */
.wp-block-image img {
	border-radius: 16px;
}

/* ---- Soft organic blob behind hero imagery (brand secondary/yellow) ----- */
.vv-blob {
	position: relative;
}
.vv-blob::before {
	content: "";
	position: absolute;
	inset: -9% -7% -12% -9%;
	background: var(--wp--preset--color--secondary);
	border-radius: 42% 58% 56% 44% / 54% 44% 56% 46%;
	z-index: 0;
}
.vv-blob > * {
	position: relative;
	z-index: 1;
}

/* ---- Subtle dot grid (hero) --------------------------------------------- */
.vv-grid {
	background-image: radial-gradient(rgba(23, 23, 23, .055) 1.5px, transparent 1.6px);
	background-size: 26px 26px;
	background-position: -13px -13px;
}

/* ---- Hero entrance (staggered) ------------------------------------------ */
@media (prefers-reduced-motion: no-preference) {
	.vv-hero-in > * {
		opacity: 0;
		transform: translateY(18px);
		animation: vvUp .7s var(--vv-ease) forwards;
	}
	.vv-hero-in > *:nth-child(1) { animation-delay: .05s; }
	.vv-hero-in > *:nth-child(2) { animation-delay: .15s; }
	.vv-hero-in > *:nth-child(3) { animation-delay: .25s; }
	.vv-hero-in > *:nth-child(4) { animation-delay: .35s; }
	.vv-hero-in > *:nth-child(5) { animation-delay: .45s; }
	@keyframes vvUp { to { opacity: 1; transform: none; } }
}

/* ---- FAQ details --------------------------------------------------------- */
.wp-block-details {
	box-shadow: var(--vv-shadow-soft);
}
.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
}
.wp-block-details summary::-webkit-details-marker { display: none; }
.wp-block-details summary::after {
	content: "+";
	float: right;
	font-weight: 700;
	color: var(--wp--preset--color--primary);
	transition: transform .25s var(--vv-ease);
}
.wp-block-details[open] summary::after { content: "\2013"; }

/* ---- Typographic finish -------------------------------------------------- */
h1, h2 { letter-spacing: -.015em; }

/* Map gets the same rounded, floating treatment */
.wp-block-html iframe { border-radius: 16px; box-shadow: var(--vv-shadow-soft); }

/* =========================================================================
   GameLoods — onepager specifieke stijlen
   Bord- & kaartspellenwinkel. Alle kleuren via brand-tokens (blauw/geel/rood).
   ========================================================================= */

/* ---- Hero: groot logo + decoratieve pokéballs --------------------------- */
.gl-hero {
	position: relative;
	overflow: clip;
}
.gl-hero .gl-logo img {
	border-radius: 0;
	box-shadow: none;
	max-height: 220px;
	width: auto;
}

/* Decoratieve, "dynamische" pokéballs (puur CSS, geen merkbeelden) --------- */
.gl-pokeball {
	position: absolute;
	width: var(--s, 64px);
	height: var(--s, 64px);
	border-radius: 50%;
	background:
		linear-gradient(var(--wp--preset--color--accent) 0 50%, #fff 50% 100%);
	border: 4px solid var(--wp--preset--color--contrast);
	box-shadow: var(--vv-shadow-card);
	pointer-events: none;
	z-index: 0;
	opacity: .9;
}
.gl-pokeball::before { /* middenband */
	content: "";
	position: absolute;
	inset: calc(50% - 4px) -4px auto -4px;
	height: 8px;
	background: var(--wp--preset--color--contrast);
}
.gl-pokeball::after {  /* middenknop */
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 28%;
	height: 28%;
	transform: translate(-50%, -50%);
	background: #fff;
	border: 4px solid var(--wp--preset--color--contrast);
	border-radius: 50%;
}
.gl-pokeball.gl-spin { animation: glSpin 14s linear infinite; }
.gl-pokeball.gl-float { animation: glFloat 7s ease-in-out infinite; }
.gl-pokeball.gl-float-slow { animation: glFloat 11s ease-in-out infinite; }
@keyframes glSpin  { to { transform: rotate(360deg); } }
@keyframes glFloat {
	0%, 100% { transform: translateY(0) rotate(-8deg); }
	50%      { transform: translateY(-22px) rotate(8deg); }
}

/* ---- Lopende logo-strip (marquee) --------------------------------------- */
.gl-marquee {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
	        mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.gl-marquee__track {
	display: flex;
	width: max-content;
	gap: var(--wp--preset--spacing--md);
	animation: glMarquee 38s linear infinite;
}
.gl-marquee:hover .gl-marquee__track { animation-play-state: paused; }
.gl-chip {
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	width: 190px;
	height: 110px;
	padding: 18px 26px;
	background: #fff;
	border-radius: 16px;
	box-shadow: var(--vv-shadow-card);
}
.gl-chip img {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	border-radius: 0;
}
@keyframes glMarquee { to { transform: translateX(-50%); } }

/* ---- Pokémon-band ------------------------------------------------------- */
.gl-poke-band {
	position: relative;
	overflow: clip;
}

/* ---- Event-kaart -------------------------------------------------------- */
.gl-event-date {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-width: 104px;
	padding: 14px 18px;
	border-radius: 16px;
	background: var(--wp--preset--color--accent);
	color: #fff;
	line-height: 1;
	box-shadow: var(--vv-shadow-card);
}
.gl-event-date .gl-day   { font-family: var(--wp--preset--font-family--accent); font-weight: 700; font-size: 2.6rem; }
.gl-event-date .gl-month { font-weight: 600; text-transform: uppercase; letter-spacing: .12em; font-size: .8rem; margin-top: 6px; }

/* ---- Forminator: brand-afwerking ---------------------------------------- */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui select,
.forminator-ui textarea {
	border-radius: 12px !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit {
	background: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--base) !important;
	border-radius: 12px !important;
	font-weight: 600 !important;
}
.forminator-ui.forminator-custom-form .forminator-button-submit:hover {
	background: var(--wp--preset--color--secondary) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* ---- Toegankelijkheid: minder beweging ---------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.gl-marquee__track,
	.gl-pokeball.gl-spin,
	.gl-pokeball.gl-float,
	.gl-pokeball.gl-float-slow { animation: none !important; }
}

/* ---- Mobiel ------------------------------------------------------------- */
@media (max-width: 781px) {
	.gl-pokeball { display: none; }          /* decoratie weg op klein scherm */
	.gl-pokeball.gl-keep { display: block; }
	.gl-hero .gl-logo img { max-height: 130px; }
}

/* ---- Onepager: vloeiend scrollen + anker-offset onder de pill-nav ------- */
html { scroll-behavior: smooth; }
:where(section[id], [id="top"]) { scroll-margin-top: 96px; }

/* =========================================================================
   GameLoods — extra kleur, fantasy & echte Pokémon (v2)
   ========================================================================= */

/* ---- Zwevende Pokémon-artwork ------------------------------------------- */
.gl-poke-img {
	position: absolute;
	width: var(--s, 120px);
	height: auto;
	pointer-events: none;
	z-index: 0;
	filter: drop-shadow(0 12px 20px rgba(23, 23, 23, .22));
}
.gl-poke-img.gl-bob       { animation: glBob 5.5s ease-in-out infinite; }
.gl-poke-img.gl-bob-slow  { animation: glBob 8s   ease-in-out infinite; }
.gl-poke-img.gl-tilt      { animation: glTilt 7s  ease-in-out infinite; }
@keyframes glBob  { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-16px); } }
@keyframes glTilt { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-12px) rotate(5deg); } }

/* Content boven de decoratie houden */
.gl-hero > .wp-block-group,
.gl-poke-band > *:not(.gl-pokeball):not(.gl-poke-img),
.gl-event-wrap > * { position: relative; z-index: 1; }

/* ---- Kleurrijke, speelse achtergronden (fantasy) ------------------------ */
.gl-hero {
	background:
		radial-gradient(58% 50% at 14% 18%, rgba(254, 204, 22, .28), transparent 70%),
		radial-gradient(54% 50% at 86% 12%, rgba(50, 57, 142, .18), transparent 70%),
		radial-gradient(48% 46% at 82% 92%, rgba(229, 27, 32, .14), transparent 70%),
		var(--wp--preset--color--base) !important;
}
.gl-soft {
	background:
		radial-gradient(60% 60% at 18% 8%, rgba(254, 204, 22, .30), transparent 70%),
		radial-gradient(52% 52% at 92% 96%, rgba(50, 57, 142, .14), transparent 72%),
		var(--wp--preset--color--base) !important;
}
.gl-soft-blue {
	background:
		radial-gradient(55% 55% at 85% 12%, rgba(254, 204, 22, .22), transparent 70%),
		radial-gradient(60% 60% at 10% 90%, rgba(229, 27, 32, .14), transparent 72%),
		var(--wp--preset--color--surface) !important;
}

/* De Pokémon-band krijgt extra diepte */
.gl-poke-band {
	background:
		radial-gradient(50% 60% at 12% 10%, rgba(254, 204, 22, .18), transparent 60%),
		radial-gradient(46% 60% at 90% 90%, rgba(229, 27, 32, .22), transparent 60%),
		var(--wp--preset--color--primary) !important;
}

/* ---- Sparkles (kleine fantasie-fonkelingen) ----------------------------- */
.gl-spark {
	position: absolute;
	width: var(--s, 18px);
	height: var(--s, 18px);
	z-index: 0;
	pointer-events: none;
	background:
		radial-gradient(closest-side, currentColor 0 22%, transparent 24%),
		conic-gradient(from 0deg, transparent 0 38%, currentColor 50%, transparent 62% 100%);
	-webkit-mask: conic-gradient(from 45deg, #000 0 25%, transparent 0 50%, #000 0 75%, transparent 0);
	color: var(--wp--preset--color--secondary);
	opacity: .9;
	animation: glSpark 4.5s ease-in-out infinite;
}
@keyframes glSpark { 0%, 100% { transform: scale(.7) rotate(0); opacity: .55; } 50% { transform: scale(1.1) rotate(40deg); opacity: 1; } }

/* ---- Event-poster ------------------------------------------------------- */
.gl-event-poster img {
	border-radius: 18px;
	box-shadow: var(--vv-shadow-hover);
}

/* ---- Reduced motion (v2) ------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	.gl-poke-img.gl-bob,
	.gl-poke-img.gl-bob-slow,
	.gl-poke-img.gl-tilt,
	.gl-spark { animation: none !important; }
}

/* ---- Mobiel (v2) -------------------------------------------------------- */
@media (max-width: 781px) {
	.gl-poke-img { width: calc(var(--s, 120px) * .62); opacity: .9; }
	.gl-poke-img.gl-hide-mobile,
	.gl-spark { display: none; }
}

/* =========================================================================
   GameLoods v3 — sticky header, hero-tot-boven, geen sectie-gaten,
   logo's zonder vakje, muis-volgende eigen decoratie (geen merkbeelden)
   ========================================================================= */

/* ---- Smart sticky header ------------------------------------------------ */
header.wp-block-group {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	padding-top: clamp(.7rem, 1.6vw, 1.2rem) !important;
	padding-bottom: 0 !important;
	transition: transform .35s var(--vv-ease);
}
header.wp-block-group.gl-head--hidden { transform: none; } /* menu blijft altijd zichtbaar (klantwens) */
header.wp-block-group.gl-head--solid .vv-navbar { box-shadow: var(--vv-shadow-card); }

/* ---- Hero tot helemaal bovenaan; andere pagina's onder de vaste header --- */
main.wp-block-group { padding-top: clamp(5.5rem, 9vh, 7.5rem); }
main.wp-block-group:has(.gl-hero),
main.wp-block-group:has(.v2-hero) { padding-top: 0 !important; }
.gl-hero {
	padding-top: clamp(7rem, 13vh, 10rem) !important;
}

/* ---- Geen witte balken tussen de secties -------------------------------- */
.entry-content > *,
.wp-block-post-content > * { margin-block: 0 !important; }

/* ---- Logo-strip: logo's zweven náást elkaar, geen vakjes ---------------- */
.gl-marquee {
	-webkit-mask-image: none;
	        mask-image: none;
	padding: .5rem 0;
}
.gl-marquee__track {
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
}
.gl-logo-item {
	flex: 0 0 auto;
	height: 56px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
	border-radius: 0;
	opacity: .92;
	transition: transform .25s var(--vv-ease), opacity .25s var(--vv-ease);
}
.gl-logo-item:hover { opacity: 1; transform: scale(1.06); }

/* ---- Muis-volgende decoratie (parallax-wrapper) ------------------------- */
.gl-deco {
	position: absolute;
	z-index: 0;
	pointer-events: none;
	will-change: transform;
	transition: transform .5s cubic-bezier(.18,.7,.3,1);
}
.gl-deco > * { display: block; }

/* Speelkaart — echoot het GameLoods-logo (blauwe rand, brand-kleur) */
.gl-card {
	width: var(--s, 64px);
	height: calc(var(--s, 64px) * 1.4);
	border-radius: 14px;
	border: 4px solid var(--wp--preset--color--primary);
	box-shadow: var(--vv-shadow-card);
}
.gl-card--yellow { background: var(--wp--preset--color--secondary); }
.gl-card--red    { background: var(--wp--preset--color--accent); }
.gl-card--blue   { background: var(--wp--preset--color--primary); border-color: var(--wp--preset--color--contrast); }

/* Dobbelsteen — wit met pips */
.gl-die {
	width: var(--s, 56px);
	height: var(--s, 56px);
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='0' y2='1'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='1' stop-color='%23e9ecf7'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect x='5' y='5' width='90' height='90' rx='23' fill='url(%23g)' stroke='%23cdd2e8' stroke-width='2.5'/%3E%3Cg fill='%2332398e'%3E%3Ccircle cx='31' cy='31' r='8.5'/%3E%3Ccircle cx='69' cy='31' r='8.5'/%3E%3Ccircle cx='50' cy='50' r='8.5'/%3E%3Ccircle cx='31' cy='69' r='8.5'/%3E%3Ccircle cx='69' cy='69' r='8.5'/%3E%3C/g%3E%3C/svg%3E") center / contain no-repeat;
	filter: drop-shadow(var(--vv-shadow-card));
}

/* Kleurrijke orb met glans */
.gl-orb {
	width: var(--s, 54px);
	height: var(--s, 54px);
	border-radius: 50%;
	background:
		radial-gradient(circle at 32% 28%, rgba(255,255,255,.85), transparent 42%),
		var(--c, var(--wp--preset--color--accent));
	box-shadow: var(--vv-shadow-card);
}

/* Hergebruik de bestaande bob/tilt/spin animaties op de binnen-elementen */
.gl-card.gl-bob, .gl-die.gl-bob, .gl-orb.gl-bob { animation: glBob 5.5s ease-in-out infinite; }
.gl-card.gl-tilt, .gl-die.gl-tilt { animation: glTilt 7s ease-in-out infinite; }
.gl-orb.gl-float { animation: glFloat 8s ease-in-out infinite; }
.gl-die.gl-spin { animation: glSpin 16s linear infinite; }

@media (prefers-reduced-motion: reduce) {
	.gl-card, .gl-die, .gl-orb { animation: none !important; }
	.gl-deco { transition: none; }
}
@media (max-width: 781px) {
	.gl-deco.gl-hide-mobile { display: none; }
	.gl-logo-item { height: 42px; }
}

/* Decoratie altijd achter de inhoud (beat eerdere z-index regels) */
.gl-deco { z-index: 0 !important; }
.gl-hero > .wp-block-group,
.gl-poke-band > .wp-block-columns,
.gl-poke-band > .wp-block-heading,
.gl-poke-band > .wp-block-paragraph,
.gl-poke-band > p,
.gl-poke-band > h2,
.gl-event-wrap > .wp-block-group,
.gl-event-wrap > .wp-block-heading,
.gl-event-wrap > p,
.gl-event-wrap > h2 { position: relative; z-index: 1; }

/* ---- Echte Pokémon als zwevende, muis-volgende decoratie (rechten OK) --- */
.gl-mon {
	width: var(--s, 130px);
	height: auto;
	display: block;
	filter: drop-shadow(0 12px 20px rgba(23, 23, 23, .22));
}
.gl-mon.gl-bob      { animation: glBob 5.5s ease-in-out infinite; }
.gl-mon.gl-bob-slow { animation: glBob 8s   ease-in-out infinite; }
.gl-mon.gl-tilt     { animation: glTilt 7s  ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .gl-mon { animation: none !important; } }

/* =========================================================================
   GameLoods v4 — fixes: template-balken weg, deco echt absoluut, hero-top
   ========================================================================= */

/* Geen witte balken tussen header / main / footer (template-niveau) */
.wp-site-blocks > * { margin-block: 0 !important; }
.wp-site-blocks { background: var(--wp--preset--color--base); }

/* Decoratie ALTIJD absoluut (oudere .gl-poke-band-regel zette ze op relative,
   waardoor de Pokémon in de flow stapelden en een gat bovenaan gaven) */
.gl-deco { position: absolute !important; }

/* Hero-gradient ook kleur tot helemaal bovenaan (geen wit-gevoel bij de nav) */
.gl-hero {
	background:
		radial-gradient(52% 40% at 50% -8%, rgba(254, 204, 22, .24), transparent 70%),
		radial-gradient(58% 50% at 14% 20%, rgba(254, 204, 22, .26), transparent 70%),
		radial-gradient(54% 50% at 86% 12%, rgba(50, 57, 142, .18), transparent 70%),
		radial-gradient(48% 46% at 82% 92%, rgba(229, 27, 32, .14), transparent 70%),
		var(--wp--preset--color--base) !important;
}

/* Form-band: zelfde blauwe sfeer als de Pokémon-sectie; kaart blijft leesbaar */
.gl-form-band > .wp-block-group { position: relative; z-index: 1; }

/* ---- Footer: gradient over de volledige footer (contact zit nu hierin) -- */
.gl-footer {
	position: relative;
	background:
		radial-gradient(38% 85% at 88% 0%, rgba(254, 204, 22, .22), transparent 70%),
		radial-gradient(42% 95% at 5% 100%, rgba(50, 57, 142, .16), transparent 72%),
		radial-gradient(40% 80% at 55% 120%, rgba(229, 27, 32, .10), transparent 70%),
		var(--wp--preset--color--surface) !important;
}
.gl-footer .wp-block-columns { margin-block: 0; }
.gl-footer .gl-foot-bottom {
	margin-top: var(--wp--preset--spacing--xl);
	padding-top: var(--wp--preset--spacing--md);
	border-top: 1px solid rgba(23, 23, 23, .10);
}

/* Pokéball bruikbaar binnen de muis-volg-wrapper (.gl-deco is de positie-context) */
.gl-deco .gl-pokeball { position: relative !important; opacity: 1; }

/* ---- Events: laatste 3, volledig op de homepage, 3 rijen onder elkaar --- */
.gl-events .wp-block-post-template {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--lg);
	list-style: none;
	margin: 0;
	padding: 0;
	grid-template-columns: none !important;   /* nooit als grid renderen */
}
.gl-event-row {
	overflow: hidden;
	padding: 0 !important;
}
.gl-event-row .gl-row-cols {
	margin: 0;
	align-items: stretch;
	gap: 0;
}
/* Poster vult de volledige hoogte van de rij */
.gl-row-media { align-self: stretch !important; }
.gl-row-media .wp-block-post-featured-image,
.gl-row-media .wp-block-post-featured-image img {
	height: 100%;
	margin: 0;
}
.gl-row-media .wp-block-post-featured-image img {
	width: 100%;
	min-height: 220px;
	object-fit: cover;
	border-radius: 0;
}
/* Tekst verticaal gecentreerd */
.gl-row-text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	height: 100%;
}
.gl-event-row .wp-block-post-title { margin: 0 0 .5rem; }
.gl-event-row .wp-block-post-excerpt { margin: 0; }
.gl-event-row .wp-block-post-excerpt__excerpt { color: var(--wp--preset--color--muted); }
/* Afwisselend de poster links/rechts voor wat ritme */
.gl-events .wp-block-post-template > li:nth-child(even) .gl-row-cols {
	flex-direction: row-reverse;
}
@media (max-width: 781px) {
	.gl-event-row .gl-row-cols { flex-direction: column !important; }
	.gl-event-row .wp-block-column { flex-basis: 100% !important; width: 100% !important; }
}

/* =========================================================================
   Optie 3 — alleen de hero houdt een gradiënt. Lichte secties worden solide
   (geen twee gradiënten na elkaar). Blauwe vlakken blijven zoals ze zijn.
   ========================================================================= */
.gl-soft            { background: var(--wp--preset--color--base) !important; }     /* Merken: solide wit */
.gl-event-wrap.gl-soft { background: var(--wp--preset--color--surface) !important; } /* Events: solide lichtgrijs */
.gl-footer          { background: var(--wp--preset--color--surface) !important; }  /* Footer: solide lichtgrijs */

/* =========================================================================
   HOMEPAGE V2 — "Arcade sticker-book" redesign (alleen op pagina 108)
   Alles gescoped onder .page-id-108 zodat de echte homepage onaangeroerd blijft.
   ========================================================================= */

/* ---- Distinctieve, zelf-gehoste fonts ---------------------------------- */
@font-face { font-family:"Rokkitt"; font-weight:600; font-display:swap; src:url("./assets/fonts/rokkitt-600.woff2") format("woff2"); }
@font-face { font-family:"Rokkitt"; font-weight:700; font-display:swap; src:url("./assets/fonts/rokkitt-700.woff2") format("woff2"); }
@font-face { font-family:"Rokkitt"; font-weight:800; font-display:swap; src:url("./assets/fonts/rokkitt-800.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-weight:400; font-display:swap; src:url("./assets/fonts/hanken-400.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-weight:500; font-display:swap; src:url("./assets/fonts/hanken-500.woff2") format("woff2"); }
@font-face { font-family:"Hanken"; font-weight:700; font-display:swap; src:url("./assets/fonts/hanken-700.woff2") format("woff2"); }

.page-id-108 {
	--v2-ink:    #2A3072;
	--v2-sky:    #E7ECFA;
	--v2-night:  #23264A;
	--v2-deep:   #4750B8;
	--v2-blue:   #32398E;
	--v2-yellow: #FECC16;
	--v2-red:    #E51B20;
	--v2-cream:  #FBF7EE;
	--v2-paper:  #F3ECDC;
	--v2-sh:     5px 5px 0 var(--v2-ink);
	--v2-sh-sm:  3px 3px 0 var(--v2-ink);
}

/* Warm papier als basis + nieuwe typografie */
.page-id-108 .wp-site-blocks { background: var(--v2-paper); }
.page-id-108 .entry-content { font-family: "Hanken", system-ui, sans-serif; }
.page-id-108 .entry-content :is(h1,h2,h3,h4),
.page-id-108 .v2-display {
	font-family: "Rokkitt", system-ui, sans-serif;
	font-weight: 800;
	letter-spacing: -.02em;
	line-height: .98;
}

/* Halftoon-stip textuur (hergebruikbaar) */
.page-id-108 .v2-dots { position: relative; }
.page-id-108 .v2-dots::before {
	content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
	background-image: radial-gradient(currentColor 1.6px, transparent 1.7px);
	background-size: 22px 22px; opacity:.10;
}
.page-id-108 .v2-dots > * { position: relative; z-index: 1; }

/* Knoppen: sticker-stijl met harde offset-schaduw */
.page-id-108 .wp-block-button__link {
	border-radius: 12px;
	border: 2.5px solid var(--v2-ink);
	box-shadow: var(--v2-sh-sm);
	font-family: "Rokkitt", sans-serif; font-weight: 700;
	padding: .8rem 1.6rem;
	transition: transform .12s ease, box-shadow .12s ease;
}
.page-id-108 .wp-block-button:not(.is-style-outline) .wp-block-button__link {
	background: var(--v2-yellow) !important; color: var(--v2-ink) !important;
}
.page-id-108 .wp-block-button.is-style-outline .wp-block-button__link {
	background: var(--v2-cream); color: var(--v2-ink); box-shadow: var(--v2-sh-sm);
}
.page-id-108 .wp-block-button__link:hover {
	transform: translate(-2px,-2px); box-shadow: 6px 6px 0 var(--v2-ink);
}

/* Marker-highlight achter een woord */
.page-id-108 .v2-hl {
	background: linear-gradient(var(--v2-yellow), var(--v2-yellow)) no-repeat;
	background-size: 100% .32em; background-position: 0 92%;
	padding: 0 .06em;
}

/* ---- HERO (donker inkt-blauw) ------------------------------------------ */
.page-id-108 .v2-hero {
	position: relative; overflow: clip;
	background:
		radial-gradient(54% 62% at 86% 0%, rgba(254,204,22,.12), transparent 60%),
		#ffffff !important;
	color: var(--v2-ink);
	padding-top: clamp(8rem, 16vh, 12rem) !important;
	padding-bottom: clamp(4rem, 9vh, 7rem) !important;
}
.page-id-108 .v2-eyebrow {
	display: table; width: fit-content; margin-left: auto; margin-right: auto;
	transform: rotate(-2deg);
	background: var(--v2-yellow); color: var(--v2-ink);
	font-family:monospace; font-weight:700; font-size:.95rem; letter-spacing:.02em;
	padding: .45rem 1rem; border: 2.5px solid var(--v2-ink); border-radius: 999px;
	box-shadow: var(--v2-sh-sm);
}
.page-id-108 .v2-hero h1 {
	color: var(--v2-ink);
	font-size: clamp(2.9rem, 8.5vw, 6.6rem);
	margin: 1.2rem 0 0;
}
.page-id-108 .v2-hero .v2-lead {
	color: #4C5170; font-size: clamp(1.05rem, 2vw, 1.3rem);
	max-width: 730px; margin: 1.4rem auto 0; line-height: 1.5; text-wrap: balance;
}

/* Zwevende speelkaarten (decor) — dik omlijnd, harde schaduw */
.page-id-108 .v2-card {
	width: var(--s, 120px); aspect-ratio: 3/4; border-radius: 16px;
	border: 3px solid var(--v2-ink); box-shadow: 6px 7px 0 rgba(42,48,114,.22);
}
.page-id-108 .v2-card.is-yellow { background: var(--v2-yellow); }
.page-id-108 .v2-card.is-red    { background: var(--v2-red); }
.page-id-108 .v2-card.is-blue   { background: var(--v2-blue); }

/* ---- Merken-strip: gele ticker-band met label -------------------------- */
.page-id-108 .v2-strip {
	background: var(--v2-yellow) !important; color: var(--v2-ink);
	border-top: 3px solid var(--v2-ink); border-bottom: 3px solid var(--v2-ink);
	padding-top: 2.9rem !important; padding-bottom: 2.9rem !important;
}
.page-id-108 .v2-strip .v2-tag {
	display: table; width: fit-content; margin: 0 auto 1.6rem;
	background: var(--v2-ink); color: var(--v2-yellow);
	font-family:monospace; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
	font-size:.8rem; padding:.45rem 1rem; border-radius:999px;
}
.page-id-108 .v2-strip .gl-logo-item { height: 50px; }

/* ---- POKÉMON-sectie: trading-card panelen ------------------------------ */
.page-id-108 .v2-poke { background: var(--v2-cream) !important; color: var(--v2-ink); position: relative; overflow: clip; }
.page-id-108 .v2-poke h2 { font-size: clamp(2.2rem, 5.5vw, 4rem); }
.page-id-108 .v2-tcard {
	background: #fff; border: 3px solid var(--v2-ink); border-radius: 18px;
	box-shadow: var(--v2-sh); padding: 0 !important; overflow: hidden; height: 100%;
	transition: transform .15s ease, box-shadow .15s ease;
}
.page-id-108 .v2-tcard:hover { transform: translate(-3px,-3px); box-shadow: 8px 8px 0 var(--v2-ink); }
.page-id-108 .v2-tcard .v2-tcard-top {
	height: 10px;
}
.page-id-108 .v2-tcard.c1 .v2-tcard-top { background: var(--v2-yellow); }
.page-id-108 .v2-tcard.c2 .v2-tcard-top { background: var(--v2-red); }
.page-id-108 .v2-tcard.c3 .v2-tcard-top { background: var(--v2-blue); }
.page-id-108 .v2-tcard .v2-tcard-body { padding: 1.4rem 1.5rem 1.6rem; }
.page-id-108 .v2-tcard h3 { font-size: 1.4rem; margin: 0 0 .4rem; }

/* ---- EVENTS: ticket-kaarten -------------------------------------------- */
.page-id-108 .v2-events { background: radial-gradient(60% 55% at 92% 4%, rgba(254,204,22,.16), transparent 62%), var(--v2-sky) !important; color: var(--v2-ink); position: relative; overflow: clip; }
.page-id-108 .v2-events h2 { color: var(--v2-ink); font-size: clamp(2.2rem,5.5vw,4rem); }
.page-id-108 .v2-events .v2-eyebrow { background: var(--v2-red); color: var(--v2-cream); border-color: var(--v2-ink); box-shadow: 3px 3px 0 var(--v2-ink); }
.page-id-108 .gl-events .wp-block-post-template { gap: 1.4rem; }
.page-id-108 .gl-event-row {
	background: #fff !important; color: var(--v2-ink);
	border: 3px solid var(--v2-ink); border-radius: 18px; box-shadow: 6px 6px 0 rgba(42,48,114,.20);
	overflow: hidden;
}
.page-id-108 .gl-event-row .wp-block-post-title,
.page-id-108 .gl-event-row .wp-block-post-title a { font-family: "Rokkitt", system-ui, sans-serif !important; font-weight: 800; }
.page-id-108 .gl-event-row .wp-block-post-excerpt__excerpt { color: #45474f; }
.page-id-108 .gl-row-media .wp-block-post-featured-image img { min-height: 200px; }

/* ---- JOIN / formulier -------------------------------------------------- */
.page-id-108 .v2-join {
	background:
		radial-gradient(50% 60% at 88% 8%, rgba(71,80,184,.08), transparent 60%),
		var(--v2-cream) !important;
	color: var(--v2-ink); position: relative; overflow: clip;
}
.page-id-108 .v2-join h2 { color: var(--v2-ink); font-size: clamp(2.2rem,5.5vw,4rem); }
.page-id-108 .v2-join .v2-eyebrow { background: var(--v2-yellow); color: var(--v2-ink); }
.page-id-108 .v2-join .v2-formcard {
	background: #fff; border: 3px solid var(--v2-ink);
	border-radius: 20px; box-shadow: var(--v2-sh);
}
.page-id-108 .v2-join .forminator-button-submit {
	background: var(--v2-yellow) !important; color: var(--v2-ink) !important;
	border: 2.5px solid var(--v2-ink) !important; box-shadow: var(--v2-sh-sm); border-radius: 12px !important;
}

/* ---- Scroll-reveal ----------------------------------------------------- */
.page-id-108 .gl-reveal { opacity: 0; transform: translateY(26px); }
.page-id-108 .gl-reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
@media (prefers-reduced-motion: reduce) {
	.page-id-108 .gl-reveal { opacity: 1 !important; transform: none !important; }
}

@media (max-width: 781px) {
	.page-id-108 .v2-card { display: none; }
}

/* ---- V2: header in sticker-pill (zoals goedgekeurd) -------------------- */
.page-id-108 .vv-navbar {
	background: #fff;
	border: 3px solid var(--v2-blue);
	box-shadow: 4px 4px 0 var(--v2-blue);
}
/* Pill houdt dezelfde harde schaduw bij het scrollen (geen versprong) */
.page-id-108 header.wp-block-group.gl-head--solid .vv-navbar {
	box-shadow: 4px 4px 0 var(--v2-blue);
}
.page-id-108 header.wp-block-group .wp-block-navigation a {
	color: var(--v2-ink); font-family: "Rokkitt", sans-serif; font-weight: 600;
}
.page-id-108 header.wp-block-group .wp-block-navigation a:hover {
	background: var(--v2-blue); color: #fff;
}

/* ---- V2: footer donker, passend bij de look ----------------------------- */
.page-id-108 .gl-footer {
	background: var(--v2-night) !important;
	color: var(--v2-cream) !important;
	border-top: 5px solid var(--v2-yellow);
	font-family: "Hanken", sans-serif;
}
.page-id-108 .gl-footer p,
.page-id-108 .gl-footer strong,
.page-id-108 .gl-footer .wp-block-site-title a { color: var(--v2-cream) !important; }
.page-id-108 .gl-footer .has-muted-color { color: #B9BCE0 !important; }
.page-id-108 .gl-footer .has-primary-color { color: var(--v2-yellow) !important; }
.page-id-108 .gl-footer .wp-block-site-title {
	font-family: "Rokkitt", sans-serif !important;
}
/* footer detail-label ("Tot snel in de loods", "Openingsuren") in monospace */
.page-id-108 .gl-footer .has-accent-font-family {
	font-family: monospace !important;
}
.page-id-108 .gl-footer a { color: var(--v2-cream); }
.page-id-108 .gl-footer a:hover { color: var(--v2-yellow); }
.page-id-108 .gl-foot-bottom { border-top-color: rgba(255,255,255,.16) !important; }