/*
 * Pretzo theme — base.css
 * Reset, container/section-utilities, en aanvullingen op de theme.json
 * design-tokens (kleur/typografie/spacing komen zoveel mogelijk uit
 * theme.json-presets; hier staat alleen wat theme.json niet kan uitdrukken).
 */

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

html {
	-webkit-text-size-adjust: 100%;
	/* Vangnet tegen horizontale overflow (bv. door een decoratief element
	   dat op een onvoorziene viewportbreedte net buiten de content valt).
	   Lost geen onderliggende oorzaak op, maar garandeert dat de pagina
	   zelf nooit breder wordt dan de viewport. */
	overflow-x: hidden;
}

body {
	margin: 0;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
}

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

/* ---------- Focus & toegankelijkheid ---------- */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--wp--preset--color--blue, #007bff);
	outline-offset: 2px;
	border-radius: var(--wp--custom--radius--sm, 4px);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: 0.5rem;
	left: 0.5rem;
	width: auto;
	height: auto;
	clip: auto;
	z-index: 10000;
	padding: 0.6em 1em;
	background: var(--wp--preset--color--white, #fff);
	color: var(--wp--preset--color--navy, #111827);
	border-radius: var(--wp--custom--radius--sm, 4px);
}

/* ---------- Container & sections ---------- */

.pretzo-container {
	width: 100%;
	max-width: var(--wp--style--global--wide-size, 1200px);
	margin-inline: auto;
	/* Bewust een kleinere max-zijpadding dan voorheen: op desktop (≥1000px)
	   geeft dit een effectieve contentbreedte van ±1150px binnen de
	   1200px-container, i.p.v. de brede lege randen van eerdere fases. */
	padding-inline: clamp(1rem, 2.5vw, 1.5rem);
}

.pretzo-container--narrow {
	max-width: var(--wp--style--global--content-size, 720px);
}

.pretzo-section {
	padding-block: var(--wp--preset--spacing--md, 1.5rem);
}

@media (min-width: 782px) {
	.pretzo-section {
		padding-block: var(--wp--preset--spacing--lg, 2.5rem);
	}
}

.pretzo-section--white {
	background: var(--wp--preset--color--white, #fff);
}

.pretzo-section--muted {
	background: var(--wp--preset--color--surface, #f5f6f8);
}

.pretzo-section--navy {
	background: var(--wp--preset--color--navy, #111827);
	color: var(--wp--preset--color--white, #fff);
}

.pretzo-section--navy a {
	color: var(--wp--preset--color--accent, #ffb347);
}

/* ---------- Typografie: aanvulling op theme.json ----------
 * font-family/font-size/font-weight van h1-h4 en links komen al uit
 * theme.json (styles.elements). Hier staat alleen wat theme.json niet
 * kan uitdrukken (text-wrap, marges) en de .h1-.h4 utility-classes voor
 * niet-koppen die dezelfde schaal moeten volgen.
 */

h1,
h2,
h3,
h4 {
	text-wrap: balance;
	margin: 0 0 0.5em;
}

.h1,
.h2,
.h3,
.h4 {
	font-family: var(--wp--preset--font-family--heading);
	line-height: 1.15;
	text-wrap: balance;
	margin: 0 0 0.5em;
}

.h1 {
	font-size: var(--wp--preset--font-size--display);
	font-weight: 800;
}

.h2 {
	font-size: var(--wp--preset--font-size--h2);
	font-weight: 700;
}

.h3 {
	font-size: var(--wp--preset--font-size--h3);
	font-weight: 600;
}

.h4 {
	font-size: var(--wp--preset--font-size--h4);
	font-weight: 600;
}

p {
	margin: 0 0 1em;
}

.pretzo-meta,
small {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted, #4b5563);
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}