/*
 * Spenkelink — huisstijl-tokens + basis (uit Figma "Tegelhandel Spenkelink").
 * Donker thema: pagina #212121, footer #171717, accent goud #b39f71, tekst wit.
 * Koppen: Inria Serif · Lopende tekst: Manrope (beide lokaal gehost).
 */

/* ---------- Fonts (lokaal, woff2) ---------- */
@font-face {
	font-family: 'Inria Serif';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/inria-serif-v18-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Inria Serif';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inria-serif-v18-latin-700.woff2') format('woff2');
}
@font-face {
	font-family: 'Inria Serif';
	font-style: italic;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/inria-serif-v18-latin-700italic.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/manrope-v20-latin-regular.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url('../fonts/manrope-v20-latin-500.woff2') format('woff2');
}
@font-face {
	font-family: 'Manrope';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url('../fonts/manrope-v20-latin-700.woff2') format('woff2');
}

/* ---------- Tokens ---------- */
:root {
	/* Spenkelink-huisstijl */
	--spk-bg: #212121;          /* pagina-achtergrond */
	--spk-bg-dark: #171717;     /* footerbalk / tag-blokken */
	--spk-gold: #b39f71;        /* merk-accent (knoppen, koppen, hovers) */
	--spk-white: #ffffff;
	--spk-line: rgba(255, 255, 255, 0.15);
	--spk-font-serif: 'Inria Serif', Georgia, serif;
	--spk-font-sans: 'Manrope', 'Segoe UI', sans-serif;
	--spk-content: 1516px;      /* contentbreedte (1920 − 2×202) */

	/* Tokens die de core leest (huisstijl doorgeven aan core-componenten) */
	--sellabees-accent: var(--spk-gold);
	--sellabees-red: var(--spk-gold); /* historische naam; waarde = merkkleur */
	--sellabees-yellow: var(--spk-gold);
	--sellabees-ink: var(--spk-white);
	--sellabees-font-heading: var(--spk-font-serif);
	--sellabees-preloader-accent: var(--spk-gold);
	--sellabees-preloader-bg: var(--spk-bg);
	--sellabees-toast-bg: var(--spk-bg-dark);
	--sellabees-toast-color: var(--spk-white);
}

/* ---------- Basis ---------- */
html {
	box-sizing: border-box;
}
*, *::before, *::after {
	box-sizing: inherit;
}
body {
	margin: 0;
	background: var(--spk-bg);
	color: var(--spk-white);
	font-family: var(--spk-font-sans);
	font-size: 16px;
	line-height: 26px;
	-webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
	font-family: var(--spk-font-serif);
	font-weight: 400;
	line-height: 1.2; /* niet de 26px body-regelafstand erven */
	color: var(--spk-white);
	margin: 0 0 0.5em;
}
a {
	color: var(--spk-white);
	text-decoration: none;
	transition: color 0.2s ease;
}
a:hover {
	color: var(--spk-gold);
}
img {
	max-width: 100%;
	height: auto;
}

/* Alleen voor schermlezers (WP-conventie): visueel verborgen, wél voorleesbaar.
   Formulierlabels gebruiken deze class; zonder deze regel worden ze zichtbaar
   (dubbelop met de placeholder) en verschuiven velden/iconen. */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.spk-container {
	max-width: calc(var(--spk-content) + 48px); /* padding niet van de contentbreedte af laten snoepen */
	margin-inline: auto;
	padding-inline: 24px;
}
.spk-fallback {
	padding-block: 64px;
}
.spk-page-title {
	font-size: 45px;
}

/* ---------- Knoppen (Figma: 47px hoog, scherpe hoeken, serif bold 16 caps) ---------- */
.spk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 47px;
	padding-inline: 16px;
	font-family: var(--spk-font-serif);
	font-size: 16px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--spk-white);
	white-space: nowrap;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.spk-btn--gold {
	background: var(--spk-gold);
}
.spk-btn--gold:hover {
	background: #c4b183;
	color: var(--spk-white);
}
.spk-btn--outline {
	border: 1px solid var(--spk-white);
	background: transparent;
}
.spk-btn--outline:hover {
	border-color: var(--spk-gold);
	color: var(--spk-gold);
}
.spk-btn__arrow {
	width: 11px;
	height: auto;
	transform: rotate(90deg); /* chevron uit Figma wijst omhoog; in de knop naar rechts */
	flex: none;
}