/*
 * Reset-lite + element defaults + typography.
 * Authors against the role tokens in variables.css.
 */
*,
*::before,
*::after {
	box-sizing: border-box;
}

/*
 * The `hidden` attribute must actually hide.
 *
 * Browsers supply `[hidden] { display: none }` from their own stylesheet, where
 * it loses to any class selector that sets `display`. So every component the JS
 * shows and hides had to remember its own `.thing[hidden]` counterpart —
 * search.css and product.css each carry one, five in total — and the component
 * that forgot shipped a trade-in wizard with all three steps open at once,
 * ~2200px of form with "Volgende" and "Vorige" on screen together. Patching
 * that per component is a bug waiting to be re-introduced by the next feature.
 *
 * This is the one place `!important` is the right tool: it enforces a platform
 * invariant, it does not win a styling argument. If something needs to be
 * visible, do not mark it hidden.
 */
[hidden] {
	display: none !important;
}

html {
	-webkit-text-size-adjust: 100%;
	/* in-page anchors (skip link, #hash) land below the sticky header (WCAG 2.4.11) */
	scroll-padding-top: calc(var(--hs-header-h) + var(--sp-3));
}

body {
	margin: 0;
	font-family: var(--font-sans);
	font-size: var(--fs-16);
	line-height: var(--lh-base);
	letter-spacing: var(--tracking-body);
	color: var(--fg-1);
	background: var(--bg-1);
}

/* Form controls do not inherit the page font by default: the CF7 submit buttons
 * rendered in Arial next to Lato labels. One line here instead of a font-family
 * on every form. */
button, input, select, textarea {
	font-family: inherit;
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--accent-text);
	text-underline-offset: 2px;
}

a:hover {
	color: var(--accent-hover);
}

/* h1–h3 teal (oude site), h4 inkt: zie --heading-color in variables.css voor
 * waarom alleen de grote koppen het lichte teal mogen dragen. */
h1, h2, h3, h4 { margin: 0 0 var(--sp-4); color: var(--fg-1); letter-spacing: normal; overflow-wrap: break-word; hyphens: auto; } /* a long Dutch compound in a 32px heading overflowed phones on three pages; break only when a word cannot fit */
h1, h2, h3 { color: var(--heading-color); }
/* Lato body text carries the old site's 0.5px tracking; Poppins does not. Titles
 * set in the display font inherit it otherwise and read stretched (product card
 * titles, card headings). :where() keeps this at zero specificity, so any
 * component that sets its own letter-spacing still wins. */
:where(h1, h2, h3, h4, h5, h6, [class*="__title"], [class*="-title"], .hs-price, .price, [class*="__score"], [class*="__price"], [class*="-amount"]) { letter-spacing: normal; }
h1 { font-family: var(--font-display); font-weight: var(--fw-black); font-size: clamp(var(--fs-28), 2.4vw, var(--fs-32)); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h2 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: clamp(var(--fs-24), 2.6vw, var(--fs-32)); line-height: var(--lh-snug); letter-spacing: var(--tracking-tight); }
h3 { font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-24); line-height: var(--lh-snug); letter-spacing: var(--tracking-snug); }
h4 { font-family: var(--font-sans); font-weight: var(--fw-bold); font-size: var(--fs-18); line-height: var(--lh-snug); }

p { margin: 0 0 var(--sp-4); color: var(--fg-2); text-wrap: pretty; }

/* Utilities (from the design system's base layer) */
/* .hs-eyebrow lives in components.css — it was declared here too, and since
 * components.css always loads after base.css that copy never took effect. One
 * definition, not two. */
.hs-price { font-family: var(--font-display); font-weight: var(--fw-black); font-size: var(--fs-28); letter-spacing: var(--tracking-tight); color: var(--fg-1); font-variant-numeric: tabular-nums; }
.hs-lead { font-size: var(--fs-18); color: var(--fg-2); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* skip link (and any SR-only control) becomes visible when focused (WCAG 2.4.1) */
.screen-reader-text:focus { position: fixed !important; top: var(--sp-2); left: var(--sp-2); z-index: 1000; width: auto; height: auto; margin: 0; padding: var(--sp-2) var(--sp-4); clip: auto; background: var(--accent-fill); color: #fff; border-radius: var(--r-sm); font-weight: var(--fw-bold); text-decoration: none; }

:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; border-radius: var(--r-sm); }
/* the skip-link target only receives focus programmatically; no outline box needed */
.site-main:focus { outline: none; }
::selection { background: var(--accent-soft); color: var(--hs-teal-900); }