/*
Theme Name: Korenaar
Description: Eigen thema voor Bakkerij De Korenaar in Haren. Warme tarwetinten, roggebruin en korenbloemblauw.
Author: Bakkerij De Korenaar
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.1
License: GNU General Public License v2 or later
Text Domain: korenaar
*/

/* ---------- Lettertypen (lokaal, geen externe diensten) ---------- */
@font-face {
	font-family: "Caprasimo";
	src: url("assets/fonts/caprasimo.woff2") format("woff2");
	font-weight: 400;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4.woff2") format("woff2");
	font-weight: 400 700;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: "Source Serif 4";
	src: url("assets/fonts/source-serif-4-italic.woff2") format("woff2");
	font-weight: 400;
	font-style: italic;
	font-display: swap;
}

/* ---------- Tokens ---------- */
:root {
	--koren: #e3b866;        /* tarwe op het veld */
	--koren-donker: #d3a24a;
	--kruim: #fbf3e2;        /* binnenkant van het brood */
	--korst: #8a4a22;        /* korst */
	--rogge: #2e1d14;        /* roggebrood */
	--rogge-zacht: #4a3326;
	--korenbloem: #3a57a6;   /* de blauwe bloem tussen het koren */
	--korenbloem-licht: #aebff0;

	--kop: "Caprasimo", "Cooper Black", Georgia, serif;
	--tekst: "Source Serif 4", Georgia, "Times New Roman", serif;

	--t-0: 1.1875rem;   /* 19px */
	--t-1: 1.5rem;
	--t-2: clamp(1.75rem, 1.3rem + 1.6vw, 2.25rem);
	--t-3: clamp(2.1rem, 1.4rem + 2.8vw, 3.25rem);
	--t-4: clamp(2.6rem, 1.6rem + 4.2vw, 4.6rem);

	--rand: clamp(1.25rem, 4vw, 3rem);
	--breed: 72rem;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
	margin: 0;
	background: var(--kruim);
	color: var(--rogge);
	font-family: var(--tekst);
	font-size: var(--t-0);
	line-height: 1.65;
	font-optical-sizing: auto;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3 {
	font-family: var(--kop);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: -0.01em;
	margin: 0 0 0.5em;
	text-wrap: balance;
}

p { margin: 0 0 1em; text-wrap: pretty; }

a { color: var(--korenbloem); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible {
	outline: 3px solid var(--korenbloem);
	outline-offset: 3px;
	border-radius: 2px;
}

.sr-only, .screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.overslaan {
	position: absolute;
	left: 1rem; top: -4rem;
	background: var(--rogge); color: var(--kruim);
	padding: 0.5rem 1rem;
	z-index: 10;
}
.overslaan:focus { top: 1rem; }

/* ---------- Knoppen ---------- */
.knop {
	display: inline-block;
	padding: 0.7em 1.25em 0.75em;
	border: 2px solid var(--korenbloem);
	border-radius: 2em;
	background: var(--korenbloem);
	color: #fff;
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.knop:hover { background: #2c4586; border-color: #2c4586; }

.knop--rand { background: transparent; color: var(--rogge); border-color: var(--rogge); }
.knop--rand:hover { background: var(--rogge); color: var(--kruim); border-color: var(--rogge); }

.knop--licht { background: var(--koren); border-color: var(--koren); color: var(--rogge); }
.knop--licht:hover { background: var(--kruim); border-color: var(--kruim); }

/* ---------- Kop van de site ---------- */
.kop { background: var(--koren); }

.kop__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 1.1rem var(--rand);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem 2rem;
	flex-wrap: wrap;
}

.merk {
	display: inline-flex;
	align-items: center;
	gap: 0.6rem;
	color: var(--rogge);
	text-decoration: none;
	font-family: var(--kop);
	font-size: 1.6rem;
	line-height: 1;
}
.merk__aar { width: 1.05rem; color: var(--korst); }
.merk__naam { display: flex; flex-direction: column; }
.merk__klein {
	font-family: var(--tekst);
	font-style: italic;
	font-size: 0.95rem;
	margin-bottom: 0.15rem;
	color: var(--rogge-zacht);
}

.navigatie .menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 0.25rem 1.6rem;
	flex-wrap: wrap;
}
.navigatie a {
	display: inline-block;
	padding: 0.3rem 0;
	color: var(--rogge);
	font-size: 1.05rem;
	font-weight: 600;
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.navigatie a:hover { border-bottom-color: var(--rogge); }
.navigatie .current-menu-item > a,
.navigatie .current_page_item > a { border-bottom-color: var(--korenbloem); color: var(--rogge); }

/* ---------- Hero ---------- */
.hero { background: var(--koren); overflow: hidden; }

.hero__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: clamp(1.5rem, 4vw, 3.5rem) var(--rand) 0;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	align-items: end;
	gap: 2rem 4rem;
}

.hero__tekst { padding-bottom: clamp(2.5rem, 6vw, 5rem); align-self: center; }

.hero__kop {
	font-size: var(--t-4);
	line-height: 1.02;
	max-width: 13ch;
	margin-bottom: 0.4em;
}

.hero__intro {
	font-size: 1.3rem;
	line-height: 1.55;
	max-width: 32ch;
	margin-bottom: 1.8rem;
}

.hero__knoppen { display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0; }

/* De ovenmond: het beeld waar alles om draait */
.ovenmond {
	position: relative;
	margin: 0;
	aspect-ratio: 5 / 5.4;
	border-radius: 50% 50% 0 0 / 42% 42% 0 0;
	background:
		radial-gradient(ellipse 70% 45% at 50% 92%, rgba(241, 140, 52, 0.55), rgba(241, 140, 52, 0) 70%),
		var(--rogge);
	box-shadow: inset 0 0 0 14px var(--rogge-zacht);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 0 8% 8%;
}

.ovenmond__beeld { width: 100%; display: block; }

.ovenmond__vandaag {
	margin-top: 0.6rem;
	padding: 0.4em 1em;
	border-radius: 2em;
	background: var(--kruim);
	color: var(--rogge);
	font-weight: 600;
	font-size: 1rem;
	text-align: center;
}

.stoom path {
	fill: none;
	stroke: var(--kruim);
	stroke-width: 4;
	stroke-linecap: round;
	opacity: 0;
	animation: stoom 3.6s ease-out 0.4s infinite;
}
.stoom path:nth-child(2) { animation-delay: 1.3s; }
.stoom path:nth-child(3) { animation-delay: 2.2s; }

@keyframes stoom {
	0%   { opacity: 0;   transform: translateY(14px); }
	35%  { opacity: 0.5; }
	100% { opacity: 0;   transform: translateY(-16px); }
}
@media (prefers-reduced-motion: reduce) {
	.stoom path { animation: none; opacity: 0.35; }
}

/* ---------- Tekeningen ---------- */
.t-korst { fill: var(--korst); }
.t-snee { fill: none; stroke: var(--koren); stroke-width: 5; stroke-linecap: round; }
.t-meel circle { fill: var(--kruim); opacity: 0.8; }
.t-schep { stroke: var(--koren-donker); stroke-width: 6; stroke-linecap: round; }
.t-plank { stroke: var(--rogge); stroke-width: 3; stroke-linecap: round; }
.t-rogge { fill: var(--rogge); }
.t-rogge-top { fill: none; stroke: var(--rogge-zacht); stroke-width: 4; }
.t-rogge-snede { fill: var(--rogge-zacht); stroke: var(--rogge); stroke-width: 3; }
.t-taart-top { fill: var(--koren); }
.t-rooster path { stroke: var(--korst); stroke-width: 5; stroke-linecap: round; }

/* ---------- Introductie ---------- */
.welkom__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: clamp(3rem, 8vw, 6rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
}
.welkom__binnen > * {
	max-width: 30em;
	margin-left: auto;
	margin-right: auto;
}
.welkom p {
	font-size: var(--t-1);
	line-height: 1.5;
}
.welkom p:first-child::first-letter {
	font-family: var(--kop);
	float: left;
	font-size: 3.4em;
	line-height: 0.82;
	margin: 0.06em 0.1em 0 0;
	color: var(--korst);
}

/* ---------- Specialiteiten ---------- */
.specialiteiten__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: clamp(1rem, 3vw, 2rem) var(--rand) clamp(4rem, 9vw, 7rem);
}

.sectiekop {
	font-size: var(--t-3);
	margin-bottom: clamp(1.5rem, 4vw, 3rem);
}

.specialiteiten__lijst {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 3rem clamp(1.5rem, 4vw, 3.5rem);
}

.brood__tekening { max-width: 15rem; margin-bottom: 1rem; }
.brood__tekening svg { display: block; width: 100%; }

.brood__naam { font-size: var(--t-2); margin-bottom: 0.4em; }
.brood__tekst { margin-bottom: 0.8em; }
.brood__wanneer {
	margin: 0;
	font-style: italic;
	color: var(--korst);
	padding-top: 0.6em;
	border-top: 2px dotted var(--koren-donker);
}

/* ---------- Openingstijden & contact ---------- */
.oven { background: var(--rogge); color: var(--kruim); }
.oven a { color: var(--kruim); }

.oven__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: clamp(3.5rem, 8vw, 6rem) var(--rand);
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	gap: 3.5rem clamp(2rem, 7vw, 6rem);
}

.oven__kop { font-size: var(--t-3); color: var(--koren); }

.tijden__tabel {
	width: 100%;
	max-width: 30rem;
	border-collapse: collapse;
	font-size: 1.15rem;
	font-variant-numeric: tabular-nums lining-nums;
}
.tijden__tabel th,
.tijden__tabel td {
	padding: 0.55rem 0.8rem;
	border-bottom: 1px solid var(--rogge-zacht);
	text-align: left;
	font-weight: 400;
}
.tijden__tabel td { text-align: right; white-space: nowrap; }
.tijden__tabel th { padding-left: 0; }
.tijden__tabel tr.is-dicht td { color: #c9b89c; font-style: italic; }

.tijden__tabel tr.is-vandaag th,
.tijden__tabel tr.is-vandaag td {
	background: var(--koren);
	color: var(--rogge);
	font-weight: 700;
	font-style: normal;
	border-bottom-color: var(--koren);
}
.tijden__tabel tr.is-vandaag th { padding-left: 0.8rem; border-radius: 0.4rem 0 0 0.4rem; }
.tijden__tabel tr.is-vandaag td { border-radius: 0 0.4rem 0.4rem 0; }
.tijden__vandaag { font-weight: 400; font-style: italic; margin-left: 0.3em; }

.tijden__noot { margin-top: 1.2rem; font-size: 1rem; color: #e4d5bb; max-width: 30rem; }

.adres address {
	font-style: normal;
	font-family: var(--kop);
	font-size: var(--t-2);
	line-height: 1.2;
	margin-bottom: 1rem;
}
.adres__regel { display: block; }
.adres__telefoon { font-size: var(--t-1); font-weight: 600; margin-bottom: 0.5rem; }
.adres__telefoon a { text-decoration-color: var(--koren); text-decoration-thickness: 2px; }
.adres__uitleg { color: #e4d5bb; max-width: 26rem; font-size: 1.05rem; margin-bottom: 1.6rem; }
.oven .knop--licht { color: var(--rogge); }

/* ---------- Gewone pagina's ---------- */
.pagina__kop { background: var(--koren); }
.pagina__titel {
	max-width: var(--breed);
	margin: 0 auto;
	padding: clamp(2rem, 6vw, 4.5rem) var(--rand) clamp(2rem, 5vw, 3.5rem);
	font-size: var(--t-4);
}

.pagina__tekst {
	max-width: calc(36em + 2 * var(--rand));
	margin: 0 auto;
	padding: clamp(2.5rem, 6vw, 4.5rem) var(--rand) clamp(3rem, 8vw, 6rem);
	line-height: 1.7;
}
.pagina__tekst h2 { font-size: var(--t-2); margin-top: 1.8em; }
.pagina__tekst h3 { font-size: var(--t-1); margin-top: 1.6em; }
.pagina__tekst > p:first-child { font-size: var(--t-1); line-height: 1.5; }
.pagina__tekst ul, .pagina__tekst ol { padding-left: 1.2em; margin: 0 0 1em; }
.pagina__tekst li { margin-bottom: 0.35em; }
.pagina__tekst blockquote {
	margin: 2rem 0;
	padding: 0 0 0 1.4rem;
	border-left: 4px solid var(--koren);
	font-style: italic;
	font-size: var(--t-1);
	line-height: 1.5;
}
.pagina__tekst blockquote p:last-child { margin-bottom: 0; }
.pagina__tekst blockquote cite { display: block; margin-top: 0.5rem; font-size: 1rem; color: var(--korst); }
.pagina__tekst img { border-radius: 0.5rem; }

/* ---------- Voet ---------- */
.voet { background: var(--koren); color: var(--rogge); }
.voet__binnen {
	max-width: var(--breed);
	margin: 0 auto;
	padding: 2.5rem var(--rand);
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem 3rem;
	font-size: 1rem;
}
.voet p { margin: 0; }
.voet a { color: var(--rogge); }
.voet__naam { font-family: var(--kop); font-size: 1.4rem; display: flex; align-items: center; gap: 0.5rem; }
.voet__aar { width: 0.8rem; color: var(--korst); }
.voet__klein { flex-basis: 100%; font-style: italic; color: var(--rogge-zacht); }

/* ---------- Kleinere schermen ---------- */
@media (max-width: 60rem) {
	.specialiteiten__lijst { grid-template-columns: 1fr; gap: 3rem; }
	.brood {
		display: grid;
		grid-template-columns: 9rem minmax(0, 1fr);
		column-gap: 1.5rem;
		align-items: start;
	}
	.brood__tekening { grid-row: span 3; margin: 0.3rem 0 0; }
	.oven__binnen { grid-template-columns: 1fr; }
}

@media (max-width: 46rem) {
	body { font-size: 1.125rem; }
	.hero__binnen { grid-template-columns: 1fr; gap: 0; }
	.hero__tekst { padding-bottom: 2.5rem; }
	.hero__intro { font-size: 1.2rem; }
	.ovenmond { width: min(100%, 22rem); justify-self: center; }
	.welkom p { font-size: 1.3rem; }
}

@media (max-width: 30rem) {
	.brood { grid-template-columns: 1fr; }
	.brood__tekening { grid-row: auto; max-width: 11rem; margin-bottom: 0.8rem; }
	.kop__binnen { padding-top: 0.9rem; padding-bottom: 0.9rem; }
	.navigatie .menu { gap: 0.25rem 1.2rem; }
}