/*
Theme Name: Kaarteditor
Theme URI: https://voorbeeld.be/kaarteditor
Author: Jeff
Description: Theme voor een drukkerij die kart-startnummers, stickers en kaarten in PMS-kleuren (Pantone C) maakt. Rustige opzet met een racing-rood accent. Bevat een ingebouwde editor waarmee klanten een vast ontwerp inkleuren en hun logo plaatsen, en een beheerscherm waar de bestellingen binnenkomen.
Version: 2.2.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kaarteditor
Tags: business, one-column, custom-menu, custom-logo, editor-style, translation-ready
*/

/* Lettertypes staan in het theme zelf, niet bij Google.
   Scheelt een AVG-discussie en laadt sneller. */
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 300 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk-latin-wght-normal.woff2") format("woff2-variations");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("assets/fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
}

:root {
	--wit:      #FFFFFF;
	--blad:     #E9EAE6;
	--blad-dik: #DEE0DA;
	--inkt:     #16181B;
	--gedempt:  #6B6F74;
	--lijn:     #D5D7D2;
	--waarschuwing: #8B2116;

	/* het enige merk-accent: een ingehouden racing-rood */
	--rood:      #D5122A;
	--rood-diep: #A50E20;

	--kop:  "Space Grotesk", system-ui, sans-serif;
	--sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

	--r: 8px;
	--breed: 1180px;
	--kant: clamp(18px, 5vw, 44px);
}

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

body {
	margin: 0;
	background: var(--wit);
	color: var(--inkt);
	font-family: var(--sans);
	font-size: 16.5px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
	font-family: var(--kop);
	font-weight: 600;
	letter-spacing: -0.02em;
	line-height: 1.15;
	margin: 0;
	text-wrap: balance;
}
h1 { font-size: clamp(2.1rem, 5.2vw, 3.5rem); }
h2 { font-size: clamp(1.5rem, 3.2vw, 2.15rem); }
h3 { font-size: 1.12rem; letter-spacing: -0.01em; }
p { margin: 0; }
a { color: inherit; }

img, svg { max-width: 100%; height: auto; }
::selection { background: var(--rood); color: #fff; }

.omhulsel { max-width: var(--breed); margin: 0 auto; padding-inline: var(--kant); }
.verborgen-visueel {
	position: absolute; width: 1px; height: 1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}
.overslaan {
	position: absolute; left: -9999px;
	background: var(--inkt); color: var(--wit);
	padding: 10px 16px; border-radius: var(--r); z-index: 100;
}
.overslaan:focus { left: 12px; top: 12px; }

:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--rood);
	outline-offset: 2px;
	border-radius: 3px;
}

/* ---------------------------------------------------------------- knoppen */
.knop {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 13px 22px;
	border: 1px solid var(--rood);
	border-radius: 100px;
	background: var(--rood);
	color: var(--wit);
	font: inherit;
	font-size: 15.5px;
	font-weight: 500;
	text-decoration: none;
	cursor: pointer;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.knop:hover { background: var(--rood-diep); border-color: var(--rood-diep); }
.knop--rustig { background: transparent; color: var(--inkt); border-color: var(--lijn); }
.knop--rustig:hover { color: var(--rood); border-color: var(--rood); background: transparent; }

/* ------------------------------------------------------------------- kop */
.plaatskop {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .9);
	backdrop-filter: saturate(160%) blur(9px);
	border-bottom: 2px solid var(--rood);
}
.plaatskop-binnen {
	display: flex;
	align-items: center;
	gap: 26px;
	min-height: 68px;
}
.merk {
	font-family: var(--kop);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: -0.02em;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin-right: auto;
}
/* vier stippen: de registratiemarkers van het vel, als beeldmerk */
.merkteken {
	display: grid;
	grid-template-columns: 7px 7px;
	gap: 4px;
}
.merkteken i { width: 7px; height: 7px; border-radius: 50%; background: var(--rood); }

.hoofdmenu ul {
	display: flex;
	gap: 22px;
	list-style: none;
	margin: 0; padding: 0;
	font-size: 15px;
}
.hoofdmenu a { text-decoration: none; color: var(--gedempt); padding-bottom: 2px; border-bottom: 2px solid transparent; }
.hoofdmenu a:hover, .hoofdmenu .current-menu-item > a { color: var(--inkt); border-bottom-color: var(--rood); }

.menuknop {
	display: none;
	border: 1px solid var(--lijn);
	background: none;
	border-radius: var(--r);
	padding: 8px 13px;
	font: inherit; font-size: 14px;
	cursor: pointer;
}

/* ------------------------------------------------------------------ hero */
.hero { padding: clamp(48px, 8vw, 92px) 0 clamp(40px, 6vw, 70px); }
.hero-raster {
	display: grid;
	grid-template-columns: 1.05fr 1fr;
	gap: clamp(30px, 5vw, 64px);
	align-items: center;
}
.hero-tekst p.leidend {
	font-size: clamp(1.02rem, 1.7vw, 1.2rem);
	color: var(--gedempt);
	margin-top: 18px;
	max-width: 46ch;
}
.hero-acties { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.hero-etiket {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--mono);
	font-size: 12px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--rood);
	margin-bottom: 20px;
}
.hero-etiket::before {
	content: "";
	width: 22px; height: 2px;
	background: var(--rood);
}

/* het vel met startnummers als beeld */
.hero-vel {
	background: var(--blad);
	border-radius: var(--r);
	padding: clamp(20px, 3vw, 34px);
	position: relative;
}
.hero-vel::before,
.hero-vel::after,
.hero-vel > .stip {
	content: "";
	position: absolute;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: var(--inkt);
	opacity: .55;
}
.hero-vel::before { top: 11px; left: 11px; }
.hero-vel::after  { top: 11px; right: 11px; }
.hero-vel .stip-lo { bottom: 11px; left: 11px; }
.hero-vel .stip-ro { bottom: 11px; right: 11px; }

.hero-kaarten {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}
.hero-kaarten svg { border-radius: 4px; filter: drop-shadow(0 2px 8px rgba(0,0,0,.13)); }

/* ------------------------------------------------------------- kenmerken */
.strook { padding: clamp(46px, 7vw, 84px) 0; border-top: 1px solid var(--lijn); }
.strook--blad { background: var(--blad); border-top: 0; }

.strook-kop { max-width: 56ch; margin-bottom: clamp(26px, 4vw, 44px); }
.strook-kop p { color: var(--gedempt); margin-top: 13px; }

.stappen {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 1px;
	background: var(--lijn);
	border: 1px solid var(--lijn);
	border-radius: var(--r);
	overflow: hidden;
}
.stap { background: var(--wit); padding: 26px 24px; }
.strook--blad .stap { background: var(--blad); }
.stap-nr {
	font-family: var(--mono);
	font-size: 12px;
	color: var(--rood);
	display: block;
	margin-bottom: 13px;
}
.stap h3 { margin-bottom: 8px; }
.stap p { color: var(--gedempt); font-size: 15px; }

/* kleurenlint: alle PMS-kleuren uit de bibliotheek als bewijs */
.kleurenlint {
	display: flex;
	flex-wrap: nowrap;
	gap: 5px;
	margin-top: 26px;
	overflow: hidden;
}
.kleurenlint span { flex: 0 0 auto; }
.kleurenlint span {
	width: 26px; height: 26px;
	border-radius: 5px;
	border: 1px solid rgba(0,0,0,.14);
}

/* --------------------------------------------------------------- oproep */
.oproep {
	background: var(--inkt);
	color: var(--wit);
	border-radius: var(--r);
	padding: clamp(32px, 5vw, 56px);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
}
.oproep h2 { color: var(--wit); }
.oproep p { color: #B9BCC0; margin-top: 11px; max-width: 44ch; }
.oproep .knop { background: var(--rood); color: var(--wit); border-color: var(--rood); }
.oproep .knop:hover { background: var(--rood-diep); border-color: var(--rood-diep); }

/* --------------------------------------------------------------- inhoud */
.inhoud { padding: clamp(40px, 6vw, 72px) 0; }
.artikel { max-width: 72ch; }
.artikel > * + * { margin-top: 1.1em; }
.artikel h2, .artikel h3 { margin-top: 1.7em; }
.artikel a { color: var(--rood); text-underline-offset: 2px; }
.artikel ul, .artikel ol { padding-left: 1.3em; }
.artikel li + li { margin-top: .35em; }
.artikel blockquote {
	margin: 1.5em 0;
	padding-left: 18px;
	border-left: 3px solid var(--rood);
	color: var(--gedempt);
}
.artikel code { font-family: var(--mono); font-size: .9em; background: var(--blad); padding: 2px 5px; border-radius: 4px; }
.artikel img { border-radius: var(--r); }
.metagegevens { font-size: 14px; color: var(--gedempt); margin-top: 10px; }

.berichtlijst { display: grid; gap: 1px; background: var(--lijn); border-block: 1px solid var(--lijn); }
.berichtitem { background: var(--wit); padding: 24px 0; }
.berichtitem a { text-decoration: none; }
.berichtitem h2 { font-size: 1.35rem; }
.berichtitem a:hover h2 { color: var(--rood); }
.berichtitem p { color: var(--gedempt); margin-top: 9px; }

/* ------------------------------------------------------------------ voet */
.plaatsvoet {
	border-top: 1px solid var(--lijn);
	padding: 40px 0 34px;
	font-size: 14.5px;
	color: var(--gedempt);
}
.voet-binnen { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.plaatsvoet a { text-decoration: none; }
.plaatsvoet a:hover { color: var(--inkt); }
.voetmenu ul { display: flex; gap: 18px; list-style: none; margin: 0; padding: 0; }

/* --------------------------------------------------------------- editor */
.editorpagina { padding: 34px 0 clamp(46px, 7vw, 80px); }
.editorpagina .paginakop { max-width: 60ch; margin-bottom: 26px; }
.editorpagina .paginakop p { color: var(--gedempt); margin-top: 12px; }

/* ---------------------------------------------------------------- smaller */
@media (max-width: 860px) {
	.hero-raster { grid-template-columns: 1fr; }
	.oproep { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 720px) {
	.menuknop { display: inline-block; }
	.hoofdmenu {
		display: none;
		position: absolute;
		inset: 68px 0 auto;
		background: var(--wit);
		border-bottom: 1px solid var(--lijn);
		padding: 14px var(--kant) 20px;
	}
	.hoofdmenu.open { display: block; }
	.hoofdmenu ul { flex-direction: column; gap: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}