/*
 * Spenkelink — header + footer (1:1 met Figma Component 2 / Component 1).
 * Alle maten komen uit de design-data (1920-frame, contentmarge 202px).
 */

/* =====================================================================
   HEADER  (Figma 80:342 — balk 57px hoog op y=44, logo 342×57,
   menu Inria Serif Bold 16 wit met 37px tussenruimte, CTA 237×47 goud)
   ===================================================================== */
.spk-header {
	background: var(--spk-bg);
	padding: 44px 0 24px;
	/* Balk blijft bovenaan plakken; zodra er gescrold is zet theme.js
	   .is-scrolled en kleurt de achtergrond zwart. */
	position: sticky;
	top: 0;
	z-index: 50;
	transition: background-color 0.3s ease, padding 0.3s ease, box-shadow 0.3s ease;
}
/* Pagina's met een hero (o.a. voorpagina): header zweeft transparant over de
   herofoto, zoals in Figma (navbalk op y=44 bovenop de hero) — fixed i.p.v.
   sticky omdat hij daar geen eigen ruimte in de flow heeft. */
body.spk-has-hero .spk-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: transparent;
}
/* Ingelogd: onder de WP-adminbalk blijven. */
body.admin-bar .spk-header { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .spk-header { top: 46px; }
}
/* Gescrold: zwarte balk met schaduw; op hero-pagina's ook compacter
   (44px toppadding is het Figma-startbeeld, niet nodig tijdens scrollen).
   De hero-selector staat er expliciet bij: die moet winnen van de
   transparant-regel hierboven (body.spk-has-hero .spk-header). */
.spk-header.is-scrolled,
body.spk-has-hero .spk-header.is-scrolled {
	background: var(--spk-bg-dark);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
body.spk-has-hero .spk-header.is-scrolled {
	padding: 14px 0;
}
.spk-header__inner {
	max-width: calc(var(--spk-content) + 48px); /* content exact 1516 breed, marges 202 op 1920 */
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	align-items: center;
}
.spk-header__logo {
	flex: none;
	line-height: 0;
}
.spk-header__logo img {
	width: 342px;
	height: 57px;
}
.spk-header__nav {
	margin-left: auto;
}
.spk-menu {
	display: flex;
	align-items: center;
	gap: 37px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.spk-menu a {
	font-family: var(--spk-font-serif);
	font-size: 16px;
	font-weight: 700;
	color: var(--spk-white);
	white-space: nowrap;
	/* Zachte schaduw: houdt wit én het gouden actieve item leesbaar op lichte
	   herofoto's (bijv. Contact); op donkere vlakken onzichtbaar. */
	text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55), 0 2px 12px rgba(0, 0, 0, 0.45);
}
.spk-menu a:hover,
.spk-menu .current-menu-item > a,
.spk-menu .current_page_item > a {
	color: var(--spk-gold);
}
/* Submenu (dropdown) — donker paneel onder het item; opent met fade + slide.
   De 8px ruimte tot de menuregel is een transparante bovenrand (geen margin),
   zodat de muis het paneel kan bereiken zonder dat de hover wegvalt;
   drop-shadow i.p.v. box-shadow zodat de schaduw die rand overslaat. */
.spk-menu .sub-menu {
	position: absolute;
	list-style: none;
	margin: 0;
	border-top: 8px solid transparent;
	background-clip: padding-box;
	padding: 12px 0;
	background: var(--spk-bg-dark);
	min-width: 200px;
	filter: drop-shadow(0 12px 24px rgba(0, 0, 0, 0.35));
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, visibility 0s linear 0.25s;
}
.spk-menu > li {
	position: relative;
}
.spk-menu > li:hover > .sub-menu,
.spk-menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
	.spk-header,
	.spk-menu .sub-menu { transition: none; }
}
.spk-menu .sub-menu a {
	display: block;
	padding: 8px 20px;
}
.spk-header__cta {
	min-width: 237px;
	margin-left: 50px;
}
.spk-header__cta--mobile {
	display: none;
}
/* ---------------------------------------------------------------------
   Menuknop: 2×2 tegelmozaïek i.p.v. de generieke drie streepjes — het
   merkbeeld van een tegelhandel. Bij openen vliegen de vier tegels naar
   het midden; de diagonaal linksboven/rechtsonder rekt uit tot een gouden
   kruis, de andere twee krimpen eronder weg. Hover laat een gouden golf
   met de klok mee door de tegels lopen.
   --------------------------------------------------------------------- */
.spk-menu-toggle {
	display: none;
	background: none;
	border: 0;
	color: var(--spk-white);
	padding: 8px;
	margin-left: auto;
	line-height: 0;
	cursor: pointer;
}
.spk-menu-toggle__grid {
	position: relative;
	display: block;
	width: 26px;
	height: 26px;
	/* Zelfde reden als de schaduw op de menulinks: leesbaar houden op lichte
	   herofoto's, onzichtbaar op de donkere balk. */
	filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
}
.spk-menu-toggle__tile {
	position: absolute;
	width: 11px; /* 2×11 + 4px voeg = 26px */
	height: 11px;
	background: currentColor;
	transition: transform 0.45s cubic-bezier(0.55, 0.06, 0.25, 1.12),
		opacity 0.3s ease, background-color 0.3s ease;
}
.spk-menu-toggle__tile:nth-child(1) { top: 0; left: 0; }
.spk-menu-toggle__tile:nth-child(2) { top: 0; right: 0; }
.spk-menu-toggle__tile:nth-child(3) { bottom: 0; left: 0; }
.spk-menu-toggle__tile:nth-child(4) { bottom: 0; right: 0; }

/* Hover (dicht): gouden golf met de klok mee — 1 → 2 → 4 → 3. */
.spk-menu-toggle:hover .spk-menu-toggle__tile,
.spk-menu-toggle:focus-visible .spk-menu-toggle__tile { background: var(--spk-gold); }
.spk-menu-toggle:hover .spk-menu-toggle__tile:nth-child(2) { transition-delay: 0.06s; }
.spk-menu-toggle:hover .spk-menu-toggle__tile:nth-child(4) { transition-delay: 0.12s; }
.spk-menu-toggle:hover .spk-menu-toggle__tile:nth-child(3) { transition-delay: 0.18s; }

/* Open: tegels naar het midden (7,5px = halve tegel + halve voeg), twee
   rekken uit tot een balk (11 → ±26px lang, ±2px dik) en kruisen elkaar. */
body.spk-nav-open .spk-menu-toggle__tile { background: var(--spk-gold); }
body.spk-nav-open .spk-menu-toggle__tile:nth-child(1) {
	transform: translate(7.5px, 7.5px) rotate(45deg) scale(2.36, 0.18);
}
body.spk-nav-open .spk-menu-toggle__tile:nth-child(4) {
	transform: translate(-7.5px, -7.5px) rotate(-45deg) scale(2.36, 0.18);
	transition-delay: 0.06s;
}
body.spk-nav-open .spk-menu-toggle__tile:nth-child(2) {
	transform: translate(-7.5px, 7.5px) scale(0.2);
	opacity: 0;
}
body.spk-nav-open .spk-menu-toggle__tile:nth-child(3) {
	transform: translate(7.5px, -7.5px) scale(0.2);
	opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
	.spk-menu-toggle__tile { transition: none; }
}

/* =====================================================================
   PRE-FOOTER  (Figma: "Plan je bezoek of kom langs" — content 1248px,
   linkerkolom 636px, rechterkolom 554px, foto 1248×486, tag 194×65)
   ===================================================================== */
.spk-prefooter {
	background: var(--spk-bg);
	padding: 56px 0 48px;
}
.spk-prefooter__inner {
	max-width: 1296px; /* content exact 1248 breed (Figma), marges 336 op 1920 */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-prefooter__top {
	display: grid;
	grid-template-columns: 636fr 554fr;
	column-gap: 58px;
	align-items: start;
}
.spk-prefooter__title {
	font-size: 45px;
	font-weight: 400;
	line-height: 1.2;
	margin: 0 0 16px;
}
.spk-prefooter__text {
	font-size: 16px;
	line-height: 26px;
	margin: 0;
}
.spk-prefooter__usps {
	list-style: none;
	margin: 4px 0 0;
	padding: 0;
}
.spk-prefooter__usps li {
	display: flex;
	align-items: flex-start;
	gap: 15px;
	margin-bottom: 14px;
	opacity: 0;
	transform: translateY(10px) scale(0.96);
}
/* [een voor een op poppen] — JS zet .is-inview zodra de lijst in beeld komt. */
.spk-prefooter__usps.is-inview li {
	animation: spk-pop 0.45s cubic-bezier(0.22, 0.9, 0.35, 1.2) forwards;
}
.spk-prefooter__usps.is-inview li:nth-child(2) { animation-delay: 0.18s; }
.spk-prefooter__usps.is-inview li:nth-child(3) { animation-delay: 0.36s; }
@keyframes spk-pop {
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.spk-prefooter__usps li { opacity: 1; transform: none; animation: none !important; }
}
.spk-prefooter__usps em {
	font-family: var(--spk-font-serif);
	font-size: 14px;
	font-weight: 700;
	font-style: italic;
	line-height: 26px;
}
.spk-check {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border-radius: 50%;
	background: var(--spk-gold);
}
.spk-prefooter__actions {
	display: flex;
	gap: 20px;
	margin-top: 23px;
	flex-wrap: wrap;
}
.spk-prefooter__actions .spk-btn--gold {
	min-width: 297px;
}
.spk-prefooter__actions .spk-btn--outline {
	min-width: 237px;
}
.spk-prefooter__media {
	position: relative;
	margin: 41px 0 0;
}
.spk-prefooter__img {
	display: block;
	width: 100%;
	height: 486px;
	object-fit: cover;
	object-position: center 44%; /* Figma-venster van de staande showroomfoto */
}
.spk-prefooter__tag {
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	gap: 10px;
	width: 194px;
	height: 65px;
	padding-left: 15px; /* SVG-box heeft ±2,5px eigen marge: glyph landt op x=17 (Figma) */
	background: var(--spk-bg-dark);
}
.spk-prefooter__tag img {
	width: 18px; /* 18×18-box → pin-glyph exact 13×18 zoals in Figma */
	height: 18px;
	filter: brightness(0) invert(1); /* pin in de tag is wit in het design */
}
.spk-prefooter__tag em {
	font-family: var(--spk-font-serif);
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: var(--spk-white);
}

/* =====================================================================
   FOOTER  (Figma: balk #171717, 4 kolommen op 304/320/287/rest binnen
   1248-container met 70px inspring, koppen Inria Serif Bold 24 goud)
   ===================================================================== */
.spk-footer__main {
	background: var(--spk-bg-dark);
	padding-top: 79px;
}
.spk-footer__inner {
	max-width: 1296px; /* content exact 1248 breed (Figma) */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-footer__grid {
	display: grid;
	grid-template-columns: 304fr 320fr 287fr 267fr;
	padding-left: 70px;
	padding-bottom: 80px;
}
.spk-footer__title {
	font-family: var(--spk-font-serif);
	font-size: 24px;
	font-weight: 700;
	color: var(--spk-gold);
	margin: 0 0 16px;
}
.spk-footer__col p,
.spk-footer__col ul {
	font-size: 16px;
	line-height: 26px;
}
/* [kleurverandering hover] — links in de footer worden goud bij hover. */
.spk-footer__col a:hover {
	color: var(--spk-gold);
}
.spk-footer__row {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin: 0 0 13px;
}
.spk-footer__row--address {
	line-height: 21px;
}
.spk-footer__icon {
	flex: none;
	width: 17px;
	height: 17px;
	margin-top: 4px;
	/* Icoon als mask op currentColor: kleurt automatisch mee (wit → goud bij hover). */
	background-color: currentColor;
	-webkit-mask: var(--spk-icon) no-repeat center / contain;
	mask: var(--spk-icon) no-repeat center / contain;
	color: var(--spk-white);
	transition: color 0.2s ease;
}
.spk-footer__row--address .spk-footer__icon {
	width: 18px; /* Figma: pin-box 18×18 (glyph heeft eigen marge in de SVG) */
	height: 18px;
	margin-top: 2px;
}
/* [kleurverandering hover] — hele contactregel (icoon + tekst) wordt goud. */
.spk-footer__row:hover .spk-footer__icon,
.spk-footer__row:hover a {
	color: var(--spk-gold);
}
.spk-footer__hours {
	list-style: none;
	margin: 0;
	padding: 0;
}
.spk-footer__hours li {
	display: grid;
	grid-template-columns: 121px auto;
}
.spk-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}
.spk-footer__socials {
	list-style: none;
	margin: 13px 0 0;
	padding: 0;
	display: flex;
	gap: 10px;
}
.spk-footer__socials img {
	display: block;
	width: 31px;
	height: 31px;
}
.spk-footer__socials a {
	display: block;
	line-height: 0;
	transition: opacity 0.2s ease;
}
.spk-footer__socials a:hover {
	opacity: 0.75;
}
.spk-footer__bottom {
	border-top: 1px solid var(--spk-line);
	padding: 12px 0 14px;
}
.spk-footer__copyright {
	font-size: 14px;
	line-height: normal;
	margin: 0;
	padding-left: 70px;
}

/* =====================================================================
   RESPONSIVE
   ===================================================================== */
@media (max-width: 1500px) {
	.spk-header__logo img { width: 260px; height: auto; }
	.spk-menu { gap: 24px; }
	.spk-header__cta { min-width: 0; margin-left: 32px; }
}
@media (max-width: 1200px) {
	.spk-header { padding: 20px 0; }
	/* Overlay fadet in i.p.v. hard aan/uit (display:none blokkeert transities,
	   dus visibility + opacity). */
	.spk-header__nav {
		position: fixed;
		inset: 0;
		z-index: 100;
		background: var(--spk-bg-dark);
		padding: 96px 32px 32px;
		overflow-y: auto;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transition: opacity 0.35s ease, visibility 0s linear 0.35s;
	}
	body.spk-nav-open .spk-header__nav {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transition: opacity 0.35s ease;
	}
	body.spk-nav-open { overflow: hidden; }

	/* Menu-items komen één voor één omhoog zodra het overlay opent; bij
	   sluiten vervalt de vertraging (staat alleen in de open-staat) zodat
	   alles ineens weg is. */
	.spk-header__nav .spk-menu > li,
	.spk-header__nav .spk-header__cta--mobile {
		opacity: 0;
		transform: translateY(16px);
		/* background-color meenemen: deze regel overschrijft anders de
		   hover-overgang van .spk-btn op de mobiele CTA. */
		transition: opacity 0.4s ease, transform 0.4s ease, background-color 0.2s ease;
	}
	body.spk-nav-open .spk-header__nav .spk-menu > li,
	body.spk-nav-open .spk-header__nav .spk-header__cta--mobile {
		opacity: 1;
		transform: none;
	}
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(1) { transition-delay: 0.10s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(2) { transition-delay: 0.16s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(3) { transition-delay: 0.22s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(4) { transition-delay: 0.28s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(5) { transition-delay: 0.34s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(6) { transition-delay: 0.40s; }
	body.spk-nav-open .spk-header__nav .spk-menu > li:nth-child(7) { transition-delay: 0.46s; }
	body.spk-nav-open .spk-header__nav .spk-header__cta--mobile { transition-delay: 0.52s; }
	@media (prefers-reduced-motion: reduce) {
		.spk-header__nav,
		.spk-header__nav .spk-menu > li,
		.spk-header__nav .spk-header__cta--mobile {
			transition: none;
			transform: none;
		}
	}
	.spk-menu { flex-direction: column; align-items: flex-start; gap: 8px; }
	.spk-menu a { font-size: 22px; line-height: 2; }
	.spk-menu .sub-menu {
		/* In het fullscreen-overlay staan sublinks gewoon ingesprongen in de
		   lijst: alle dropdown-mechaniek van desktop uitzetten. */
		position: static;
		background: none;
		border-top: 0;
		filter: none;
		padding: 0 0 0 20px;
		margin: 0;
		opacity: 1;
		visibility: visible;
		transform: none;
		pointer-events: auto;
		transition: none;
	}
	.spk-menu .sub-menu a { font-size: 18px; padding: 4px 0; }
	.spk-header__cta { display: none; }
	.spk-header__cta--mobile { display: inline-flex; margin: 24px 0 0; }
	.spk-menu-toggle { display: block; position: relative; z-index: 110; }

	.spk-footer__grid {
		grid-template-columns: 1fr 1fr;
		gap: 40px 24px;
		padding-left: 0;
	}
	.spk-footer__copyright { padding-left: 0; }
}
/* Prefooter + footer compacter op tablet/mobiel. De Figma-maten (prefooter
   56/48, footer 79 boven en 80 onder het kolomraster) stonden op élke breedte
   gelijk: daardoor bleef er overal ~161px lucht boven "Plan je bezoek" en
   ~127px boven de footerkoppen. Deze waarden gelden op de héle site, dus
   bewust ruim genoeg dat de donkere footerband nog van de prefooter loskomt. */
@media (max-width: 1100px) {
	.spk-prefooter { padding: 40px 0 32px; }
	.spk-footer__main { padding-top: 48px; }
	.spk-footer__grid { padding-bottom: 56px; }
}
@media (max-width: 900px) {
	.spk-prefooter__top { grid-template-columns: 1fr; row-gap: 32px; }
	.spk-prefooter__title { font-size: 34px; }
	.spk-prefooter__img { height: 320px; }
	.spk-prefooter__actions .spk-btn { min-width: 0; flex: 1 1 auto; }
}
@media (max-width: 640px) {
	.spk-header__logo img { width: 200px; }
	.spk-prefooter { padding: 32px 0 24px; }
	.spk-footer__main { padding-top: 40px; }
	.spk-footer__grid { grid-template-columns: 1fr; padding-bottom: 40px; }
	.spk-prefooter__tag { height: 52px; width: 160px; }
	.spk-prefooter__tag em { font-size: 20px; }
	.spk-prefooter__img { height: 240px; }
}