/* Haags.nl reveal-footer (geport van sjaakbralide, OSMO "footer parallax effect").
 *
 * Werking: op de reveal-pagina's (body.hg-reveal, zie
 * RevealFooter::should_reveal(): homepage, contact, winkel en FluentCart-pagina's
 * via ShopPages, Over ons en Privacy statement via IntroPage) krijgt de content
 * (<main>) een hogere z-index + een dekkende achtergrond en schuift bij het
 * scrollen over deze footer heen. De footer is `position: sticky; bottom: 0` en
 * wordt zo onthuld. Geen JS nodig. Overige pagina's: statische footer.
 *
 * Zelfstandig (hardcoded hex + eigen @font-face-import), want de footer laadt
 * site-breed en mag niet afhangen van een globaal geladen variabelen-stylesheet. */


/* De oude Etch-footer wordt vervangen door deze reveal-footer. */
.footer-alpha {
	display: none !important;
}

/* Reveal-pagina's (homepage + shop): de content-laag (<main>) die over de footer
 * heen schuift. Dekkende ocher achtergrond + hogere z-index zodat de footer
 * eronder pas bij het scrollen onthuld wordt. Minstens één viewport hoog.
 * De body-class .hg-reveal wordt gezet door RevealFooter::body_class(). */
body.hg-reveal main {
	position: relative;
	z-index: 1;
	background-color: #e6c044;
	/* Zelfde witte rasterlijnen als de body/banner: deze dekkende laag verbergt
	 * anders het body-raster (o.a. onder de shop-producten). */
	background-image:
		linear-gradient(90deg, rgba(255, 255, 255, 0.1) 2px, transparent 2px),
		linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
	background-size:
		100px 100%,
		20px 100%;
	background-position:
		-2px 0,
		-1px 0;
	min-height: 100svh;
}

.hg-footer {
	position: sticky;
	bottom: 0;
	z-index: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	/* Volle browserbreedte zodat HAAGS.NL edge-to-edge kan. */
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	min-height: 100svh;
	/* Bottom-padding zet de ONDERKANT van HAAGS.NL exact op de paginarand: door de
	 * krappe line-height (.74) zakt de tekst-baseline ~0.147em onder de woord-box,
	 * dus zonder deze correctie valt de onderkant (incl. de punt) van het scherm.
	 * 0.148em × 29.4vw ≈ 4.35vw — schaalt mee met het woord. */
	padding: clamp(2.5rem, 5vw, 4.5rem) 0 4.35vw;
	overflow: hidden;
	background-color: #1e7a54;
	color: #ffffff;
	font-family: "Antonio", system-ui, sans-serif;
}

/* Statische variant (pagina's zonder de reveal-content-structuur): footer gewoon
 * onderaan in de flow. */
.hg-footer--static {
	position: static;
	min-height: 0;
}

.hg-footer *,
.hg-footer *::before,
.hg-footer *::after {
	box-sizing: border-box;
}

/* ---- Linkkolommen ---- */
.hg-footer__inner {
	width: 92%;
	max-width: 1400px;
	margin: 0 auto;
}

.hg-footer__cols {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: clamp(2rem, 4vw, 4rem);
}

.hg-footer__label {
	display: block;
	margin-bottom: clamp(1.2rem, 2.5vw, 2.25rem);
	font-family: "Funnel Display", system-ui, sans-serif;
	font-size: clamp(.85rem, 1.1vw, 1.05rem);
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: none;
	color: #f7e87d;
	opacity: .85;
}

.hg-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hg-footer__links a {
	display: inline-block;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 500;
	font-size: clamp(1.5rem, 2.6vw, 2.5rem);
	line-height: 1.2;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	transition: color .2s ease, transform .2s ease;
}

.hg-footer__links a:hover {
	color: #f7e87d;
	transform: translateX(6px);
}

/* ---- Merk-blok: full-width HAAGS.NL ---- */
.hg-footer__brand {
	/* Duw het woord naar de onderrand van de footer (die is min. 100svh hoog),
	 * zodat HAAGS.NL echt tot onderaan de pagina loopt zonder ruimte eronder. */
	margin-top: auto;
	padding: 0;
}

.hg-footer__word {
	display: block;
	font-family: "Antonio", system-ui, sans-serif;
	font-weight: 700;
	/* Volle browserbreedte: de inkt van "HAAGS.NL" raakt exact de linker- en
	 * rechterrand. 29.4vw is gemeten (canvas ink-metrics) zodat de inkt-breedte
	 * = viewportbreedte. Geen negatieve letter-spacing: die verkort de advance-box
	 * ook ná de laatste letter en schuift de inkt naar rechts (L viel eraf). */
	font-size: 29.4vw;
	line-height: .74;
	letter-spacing: 0;
	text-transform: uppercase;
	white-space: nowrap;
	text-align: center;
	/* text-align:center centreert de ADVANCE-box, maar "HAAGS.NL" heeft een grote
	 * linker-side-bearing (H) en een kleine rechter (L), dus de inkt zit ~0.029em
	 * te ver naar rechts. Deze translate centreert de INKT zelf (H én L raken de
	 * randen even hard). */
	transform: translateX(-0.029em);
	/* Ton-sur-ton: tussen #1E7A54 (footer-bg) en #2A9D6E in — subtiel. */
	color: #24895f;
}

/* Toegankelijke naam voor screenreaders (het grote woord is decoratief). */
.hg-footer__word-sr {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---- Responsief: kolommen stapelen ---- */
@media (max-width: 760px) {
	.hg-footer {
		min-height: 0;
	}
	.hg-footer__cols {
		grid-template-columns: 1fr;
		gap: clamp(1.75rem, 6vw, 2.5rem);
	}
	/* Zonder 100svh-hoogte vervalt margin-top:auto; zet hier een vaste marge zodat
	 * het woord niet tegen de kolommen plakt (en nog steeds tot onderaan loopt). */
	.hg-footer__brand {
		margin-top: clamp(1.75rem, 7vw, 3rem);
	}
	.hg-footer__word {
		line-height: .8;
	}
}