/* ==========================================================================
   Lowcarbchef — basisopmaak
   Bron: redesign/02-ontwerp/designsystem/tokens.json + redesign/beslissingen.md
   (beslissingen gaan voor: knoppen lichtblauw, links blauw vet, "koolhydraten" voluit).
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
	--c-surface: #ffffff;
	--c-soft: #f7f8fa;
	--c-warm: #f6f6f4;
	--c-card: #f9f9f9;          /* receptkaart (Tasty) */
	--c-deal: #fbf4e4;
	--c-placeholder: #e9ebee;
	--c-ink: #000000;
	--c-text: #444444;
	--c-muted: #6b7280;
	--c-nav: #363940;
	--c-navy: #384353;
	--c-navy-hover: #2b3442;
	--c-blue: #e1eaf3;          /* lichtblauw: gewone knoppen, merkvlakken */
	--c-blue-hover: #d2deea;
	--c-blue-soft: #f1f6fe;
	--c-dark: #222222;
	--c-border: #dddddd;
	--c-border-light: #eeeeee;
	--c-underline: #c9cdd3;
	--c-link: #0f7faf;          /* tekstlinks zoals nu: blauw, vet, niet onderstreept */
	--c-order: #ff7a01;         /* alleen bestellen bij Lowcarbcenter / winkel */
	--c-order-hover: #e86d00;
	--c-discount: #ee5665;
	--c-star: #f2b955;
	--c-error: #b42318;
	--c-success: #1f7a4d;

	--f-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
	--f-display: "Roboto Condensed", "Arial Narrow", sans-serif;

	--s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
	--s-6: 24px; --s-8: 32px; --s-12: 48px; --s-16: 64px;

	--r-sm: 10px; --r-md: 12px; --r-lg: 18px; --r-xl: 20px; --r-pill: 999px;
	--shadow-float: 0 6px 18px rgba(0, 0, 0, 0.18);

	--gutter: var(--s-4);
	--max: 1440px;
	--header-h: 80px; /* mobiel: logo 66 px + 7 px boven en onder (besluit Quint 5 okt); met rand 81 px */
}

@media (min-width: 1024px) {
	:root {
		--gutter: var(--s-16);
		--header-h: 92px;
	}
}

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

html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--s-4); }

body {
	margin: 0;
	background: var(--c-surface);
	color: var(--c-text);
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 27px;
	-webkit-font-smoothing: antialiased;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

h1, h2, h3, h4 { color: var(--c-ink); margin: 0 0 var(--s-4); }

:focus-visible {
	outline: 2px solid var(--c-navy);
	outline-offset: 2px;
}

.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:focus {
	position: fixed !important;
	z-index: 1000;
	top: var(--s-2); left: var(--s-2);
	width: auto; height: auto;
	clip: auto;
	padding: var(--s-3) var(--s-4);
	border-radius: var(--r-pill);
	background: var(--c-navy);
	color: #fff;
	font-weight: 700;
	text-decoration: none;
}

.container {
	width: 100%;
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(760px + 2 * var(--gutter)); }

/* ---------- 3. Typografie ---------- */
/* Twee soorten koppen (besluit Quint 3 okt):
   - .title-section (= .display / .page-title): HOOFDLETTERS, voor paginakoppen van overzichten
     (Alle recepten, categorie/tag, weekmenu's, artikelen, Over ons, Contact, 404, winkel) en sectiekoppen;
   - .title-content: Inter, gewone letters, voor de titel van een recept, artikel of weekmenu;
     koppen ín de tekst ook Inter (recipe.css, "Koppen in de tekst"). */
.display, .page-title, .title-section {
	font-family: var(--f-display);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.5px;
	color: var(--c-ink);
}
.page-title { font-size: 28px; line-height: 32px; margin: var(--s-6) 0 var(--s-6); }
@media (min-width: 1024px) {
	.page-title { font-size: 44px; line-height: 46px; margin: var(--s-12) 0 var(--s-8); }
}

/* Titel van recept/artikel/weekmenu in Inter, zoals de huidige site (besluit Quint 3 okt). */
.title-content {
	font-family: var(--f-sans);
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: #000000;
}
@media (min-width: 1024px) {
	.title-content { font-size: 40px; }
}

/* Bovenregel boven een kop (besluit Quint 3 okt): gewone letters, grijs, Inter 15/16px 600.
   Geldt ook voor de H1 "Koolhydraatarme recepten" op de homepage (element blijft h1).
   .kicker--navy is sindsdien gelijk aan .kicker (klasse blijft bestaan in de sjablonen). */
.kicker,
.kicker--navy {
	font-family: var(--f-sans);
	font-size: 15px;
	line-height: 1.4;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-muted);
}
@media (min-width: 1024px) {
	.kicker,
	.kicker--navy { font-size: 16px; }
}

/* Lopende tekst: links blauw en vet, niet onderstreept (zoals nu op lowcarbchef.nl). */
.entry-content a {
	color: var(--c-link);
	font-weight: 700;
	text-decoration: none;
}
.entry-content a:hover { text-decoration: underline; text-underline-offset: 3px; }
.entry-content img { border-radius: var(--r-md); }
.entry-content :is(iframe, embed, video) { max-width: 100%; }

/* Lopende tekst: één gedeelde stijl voor recept, artikel, weekmenu en tekstpagina's (review Quint 3 okt).
   16/17 px, regelhoogte 1.8 zoals live, 1.5em tussen alinea's en lijsten, koppen 1.6em erboven.
   Alleen directe kinderen (de tekst uit de editor), niet de blokken erin; de introtekst op de homepage (.home-about__text) houdt zijn eigen maat. */
.entry-content:not(.home-about__text) {
	font-size: 16px;
	line-height: 1.8;
}
.entry-content:not(.home-about__text) > :where(p, ul, ol, blockquote) { margin: 0 0 1.5em; }
.entry-content:not(.home-about__text) > :where(ul, ol) { padding-left: 1.3em; }
.entry-content:not(.home-about__text) > :where(ul, ol) > li + li { margin-top: 0.35em; }
.entry-content:not(.home-about__text) > :where(h2, h3) { margin: 1.6em 0 12px; }
.entry-content:not(.home-about__text) > :where(h4) { margin: 1.4em 0 8px; }
.entry-content:not(.home-about__text) > :first-child { margin-top: 0; }
.entry-content:not(.home-about__text) > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) {
	.entry-content:not(.home-about__text) { font-size: 17px; }
}

/* ---------- 4. Knoppen ---------- */
/* Hiërarchie (besluit 3 okt): oranje = bestellen, lichtblauw = gewone actie, navy = alleen kleine actieve staten. */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	min-height: 48px;
	padding: 0 26px;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-blue);
	color: var(--c-navy);
	font-size: 15px;
	line-height: 20px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none; /* geen hoofdletters op knoppen (review Quint 3 okt) */
	text-decoration: none;
	transition: background-color 0.15s;
}
.btn:hover { background: var(--c-blue-hover); }
.btn--white { background: #fff; }
.btn--white:hover { background: var(--c-soft); }
/* Oranje bestelknop: tekst altijd wit, ook binnen .rcard/.entry-content waar links een eigen kleur krijgen
   (".rcard a" won hier eerst, review Quint 5 okt). Dubbele klasse voor voldoende gewicht. */
.btn.btn--order,
.btn.btn--order:hover,
.btn.btn--order:focus,
.btn.btn--order:focus-visible,
.btn.btn--order:visited { color: #fff; }
.btn--order { background: var(--c-order); }
.btn--order:hover { background: var(--c-order-hover); }
/* Nieuwsbrief: navy met gewone letters, enige uitzondering (lichtblauw op lichtblauw valt weg). */
.btn--navy { background: var(--c-navy); color: #fff; text-transform: none; letter-spacing: 0; font-size: 15px; }
.btn--navy:hover { background: var(--c-navy-hover); }

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: transparent;
	color: var(--c-nav);
}
.icon-btn--navy { width: 42px; height: 42px; background: var(--c-navy); color: #fff; }
.icon-btn--navy:hover { background: var(--c-navy-hover); }

/* ---------- 5. Zoekveld ---------- */
.search-form {
	display: flex;
	align-items: center;
	gap: var(--s-2);
	height: 50px;
	padding: 0 5px 0 18px;
	border: 1px solid #cccccc;
	border-radius: var(--r-pill);
	background: #fff;
}
.search-form:focus-within { border-color: var(--c-navy); }
.search-form__input {
	flex: 1;
	min-width: 0;
	height: 100%;
	border: 0;
	outline: 0;
	background: transparent;
	font-size: 16px; /* 16px: iOS zoomt anders in */
	color: var(--c-ink);
}
.search-form__input::placeholder { color: var(--c-muted); opacity: 1; }
.search-form__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.search-form__submit {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: var(--c-navy);
	color: #fff;
}
.search-form__submit:hover { background: var(--c-navy-hover); }

/* ---------- 6. Header ---------- */
.site-header {
	position: relative;
	z-index: 50;
	background: #fff;
	border-bottom: 1px solid var(--c-border-light);
}

.site-header__bar {
	display: grid;
	grid-template-columns: 56px 1fr 56px;
	align-items: center;
	height: var(--header-h);
	max-width: var(--max);
	margin-inline: auto;
}

.site-header__menu-btn { margin-left: 4px; }
.site-header__logo { justify-self: center; }
.site-header__search-btn { justify-self: end; margin-right: 8px; position: relative; }
/* Zoekicoon is een rondje van 42 px; tikvlak 48 px zoals de hamburger (B10). */
.site-header__search-btn::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; }

.site-logo { display: block; flex-shrink: 0; }
.site-logo img { width: 66px; height: 66px; object-fit: contain; }

/* Alleen desktop. */
.main-nav,
.search-form--header,
.site-header__saved { display: none; }

@media (min-width: 1024px) {
	.site-header__bar {
		display: flex;
		gap: 40px;
		padding-inline: var(--gutter);
	}
	.site-header__menu-btn,
	.site-header__search-btn { display: none; }
	.site-header__logo { justify-self: auto; }
	.site-header__logo img { width: 78px; height: 80px; }

	.main-nav { display: block; flex: 1; align-self: stretch; }
	.search-form--header {
		display: flex;
		flex: 0 1 290px;
		min-width: 200px;
		height: 46px;
		border-color: var(--c-border);
	}
	.search-form--header .search-form__input { font-size: 15px; }
	.search-form--header .search-form__submit { width: 36px; height: 36px; }

	.site-header__saved {
		display: flex;
		align-items: center;
		gap: var(--s-2);
		font-size: 14px;
		font-weight: 600;
		color: var(--c-nav);
		text-decoration: none;
		white-space: nowrap;
	}
	.site-header__saved:hover { color: var(--c-navy); }
}

/* Menubalk */
.main-nav__list {
	display: flex;
	align-items: stretch;
	gap: 28px;
	height: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
.main-nav__item { display: flex; align-items: center; }
.main-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 0 4px;
	border: 0;
	border-bottom: 2px solid transparent;
	background: none;
	font-family: var(--f-display);
	font-size: 18px;
	line-height: 24px;
	font-weight: 400;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: var(--c-nav);
	text-decoration: none;
	white-space: nowrap;
}
.main-nav__link:hover,
.main-nav__link[aria-current="page"],
.main-nav__link[data-current],
.has-mega.is-open .main-nav__toggle {
	color: var(--c-ink);
	border-bottom-color: var(--c-ink);
}
.main-nav__toggle .icon { transition: transform 0.15s; }
.has-mega.is-open .main-nav__toggle .icon { transform: rotate(180deg); }

/* 1024-1279 px: alles moet op één regel passen. Kleinere marge, smaller zoekveld,
   "Bewaard" alleen als hartje (tekst blijft voor schermlezers). */
@media (min-width: 1024px) and (max-width: 1279px) {
	.site-header__bar { gap: 20px; padding-inline: 32px; }
	.main-nav__list { gap: 18px; }
	.main-nav__link { font-size: 17px; }
	.search-form--header { flex-basis: 220px; min-width: 160px; }
	.site-header__saved { font-size: 0; gap: 0; width: 44px; height: 44px; justify-content: center; }
	.site-header__saved .icon { width: 22px; height: 22px; }
}

/* ---------- 7. Megamenu ---------- */
.mega { display: none; }

@media (min-width: 1024px) {
	.mega {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 0 0 var(--r-xl) var(--r-xl);
		box-shadow: var(--shadow-float);
	}
	/* Zonder JS: hover en toetsenbordfocus. Met JS stuurt nav.js .is-open aan. */
	html:not(.js) .has-mega:hover .mega,
	html:not(.js) .has-mega:focus-within .mega,
	.has-mega.is-open .mega { display: block; }

	.mega__inner {
		max-width: var(--max);
		margin-inline: auto;
		padding: 40px var(--gutter) 0;
	}
	.mega__grid {
		display: grid;
		grid-template-columns: repeat(4, minmax(0, 1fr)) 380px;
		gap: var(--s-12);
	}
	.mega__title {
		margin: 0 0 18px;
		font-size: 14px;
		line-height: 18px;
		font-weight: 700;
		letter-spacing: 1.4px;
		text-transform: uppercase;
		color: var(--c-muted);
	}
	.mega__links {
		display: flex;
		flex-direction: column;
		gap: 12px;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.mega__links a {
		font-size: 15px;
		line-height: 22px;
		color: var(--c-dark);
		text-decoration: none;
	}
	.mega__links a:hover { color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }

	.mega__book {
		display: grid;
		grid-template-columns: 140px 1fr;
		gap: 22px;
		align-items: center;
		padding: 22px;
		border-radius: 16px;
		background: var(--c-warm);
		color: var(--c-ink);
		text-decoration: none;
	}
	.mega__book-cover {
		width: 140px;
		height: 175px;
		object-fit: cover;
		border-radius: 4px;
		box-shadow: 0 6px 14px rgba(0, 0, 0, 0.18);
	}
	.mega__book-text { display: flex; flex-direction: column; gap: var(--s-2); }
	.mega__book-title {
		font-family: var(--f-display);
		font-size: 20px;
		line-height: 22px;
		font-weight: 700;
		letter-spacing: 0.5px;
		text-transform: uppercase;
	}
	.mega__book-meta { font-size: 14px; line-height: 19px; color: var(--c-muted); }
	.mega__book-cta {
		font-size: 14px;
		font-weight: 700;
		letter-spacing: 0.6px;
		text-transform: uppercase;
		color: var(--c-dark);
		text-decoration: underline;
		text-underline-offset: 3px;
	}
	.mega__book:hover .mega__book-cta { color: var(--c-navy); }

	.mega__footer {
		display: flex;
		align-items: center;
		gap: var(--s-4);
		margin-top: var(--s-8);
		padding: 20px 0 26px;
		border-top: 1px solid var(--c-border-light);
	}
	.mega__hint { font-size: 14px; color: var(--c-muted); }
}

@media (min-width: 1024px) and (max-width: 1279px) {
	.mega__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.mega__book { display: none; }
}

/* Dimlaag achter het megamenu (gezet door nav.js) */
.mega-backdrop {
	position: fixed;
	inset: 0;
	z-index: 40;
	background: rgba(26, 32, 40, 0.45);
}

/* ---------- 8. Mobiel menu ---------- */
.mobile-menu {
	width: 100%;
	max-width: 480px;
	height: 100%;
	max-height: none;
	margin: 0;
	padding: 0;
	border: 0;
	background: #fff;
	color: var(--c-text);
	flex-direction: column;
}
.mobile-menu[open] { display: flex; }
.mobile-menu::backdrop { background: rgba(26, 32, 40, 0.45); }

.mobile-menu__head {
	display: grid;
	grid-template-columns: 56px 1fr 56px;
	align-items: center;
	flex-shrink: 0;
	height: var(--header-h); /* gelijk aan de kop, zodat het logo niet verspringt bij openen */
	border-bottom: 1px solid var(--c-border-light);
}
.mobile-menu__head .icon-btn { margin-left: 4px; }
.mobile-menu__logo { justify-self: center; }

.mobile-menu__body {
	flex: 1;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: var(--s-4) 20px var(--s-6);
}
.search-form--menu { margin-bottom: var(--s-2); }

.mobile-nav { display: flex; flex-direction: column; }

.mobile-nav__big {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 48px;
	padding: 4px 0;
	border-bottom: 1px solid var(--c-border-light);
	/* Rustige lijst in de broodtekstletter (review Quint 4 okt). */
	font-family: var(--f-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #363940;
	text-decoration: none;
	cursor: pointer;
}
.mobile-nav__big .icon { color: var(--c-muted); }
.mobile-nav__count {
	font-family: var(--f-sans);
	font-size: 15px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	color: var(--c-muted);
}

.mobile-nav__group summary { list-style: none; }
.mobile-nav__group summary::-webkit-details-marker { display: none; }
.mobile-nav__group[open] summary { border-bottom-color: transparent; }
.mobile-nav__group[open] { border-bottom: 1px solid var(--c-border-light); }

/* Pijltje (chevron, 12px): dicht omlaag, open omhoog (review Quint 4 okt). */
.mobile-nav__plus {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--c-muted);
	transition: transform 0.2s ease;
}
.mobile-nav__plus::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.mobile-nav__group[open] .mobile-nav__plus { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.mobile-nav__plus { transition: none; }
}

.mobile-nav__sub {
	display: flex;
	flex-direction: column;
	margin: 0 0 12px;
	padding: 0 0 0 14px; /* 14px inspringen met een lijntje links */
	border-left: 2px solid #e1eaf3;
	list-style: none;
}
.mobile-nav__sub a {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 11px 0;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #444;
	text-decoration: none;
}

.mobile-menu__foot {
	display: flex;
	gap: var(--s-4);
	flex-shrink: 0;
	padding: var(--s-4) 20px calc(var(--s-6) + env(safe-area-inset-bottom));
	border-top: 1px solid var(--c-border-light);
	font-size: 14px;
}
.mobile-menu__foot a { color: var(--c-muted); }

/* ---------- 9. Advertentie onder het menu ---------- */
/* #wrpr-custom zelf houdt de inline stijlen uit het oude thema (1-op-1). */
#wrpr-custom { margin-top: var(--s-3); }
/* Lokaal zonder advertenties (lcc_hide_ads): ook de vrijgehouden ruimte weg. */
.lcc-no-ads #custom_html-7,
.lcc-no-ads #custom_html-8 { display: none !important; }

/* ---------- 10. Footer ---------- */
/* footer.php (besluit Quint 5 okt): nieuwsbriefbalk, logo + zin + sociaal, 4 linkkolommen, ©-regel.
   Mobiel: kolommen als uitklapblokken in de stijl van het mobiele menu (.mobile-nav__*).
   Vanaf 768px: kolommen open, geen uitklapblokken. Tikvlakken 44px met 8px ertussen (afspraak Quint). */
.site-footer {
	margin-top: var(--s-8);
	background: var(--c-warm);
	color: var(--c-nav);
}
.site-footer__wrap {
	max-width: var(--max);
	margin-inline: auto;
	padding-inline: 20px;
}

/* Nieuwsbriefbalk: het gewone blok (template-parts/newsletter.php), als lichtblauwe balk over de volle breedte. */
.site-footer__newsletter { background: var(--c-blue); }
.site-footer__newsletter .newsletter {
	padding: 28px 0;
	border-radius: 0;
	background: transparent;
}

.site-footer__main {
	display: flex;
	flex-direction: column;
	gap: 28px;
	padding-top: 32px;
	padding-bottom: 8px;
}

/* Logo + zin + sociale iconen */
.site-footer__logo { display: inline-flex; }
.site-footer__logo img { display: block; width: 64px; height: 64px; }
.site-footer__tagline {
	max-width: 30ch;
	margin: 14px 0 0;
	font-size: 15px;
	line-height: 23px;
	color: var(--c-text);
}
.site-footer__social { display: flex; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.site-footer__social a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-nav);
	transition: color 0.15s ease;
}
.site-footer__social a:hover { color: var(--c-link); }

/* Kolommen: mobiel uitklapblokken (kopje 17px/600 + chevron, onderdelen 16px/400 #444). */
.site-footer__nav { border-top: 1px solid var(--c-border-light); }
.site-footer__col { border-bottom: 1px solid var(--c-border-light); }
.site-footer__title {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
	min-height: 48px;
	padding: 4px 0;
	list-style: none;
	font-family: var(--f-sans);
	font-size: 17px;
	line-height: 24px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
	color: #363940;
	cursor: pointer;
}
.site-footer__title::-webkit-details-marker { display: none; }
.site-footer__chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	color: var(--c-muted);
	transition: transform 0.2s ease;
}
.site-footer__chevron::before {
	content: "";
	width: 8px;
	height: 8px;
	margin-top: -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
}
.site-footer__col[open] .site-footer__chevron { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
	.site-footer__chevron,
	.site-footer__social a,
	.site-footer__links a { transition: none; }
}

.site-footer__links {
	display: flex;
	flex-direction: column;
	gap: 8px; /* 8px tussen de tikvlakken */
	margin: 0 0 16px;
	padding: 0 0 0 14px; /* 14px inspringen met een lijntje links, zoals het mobiele menu */
	border-left: 2px solid var(--c-blue);
	list-style: none;
}
.site-footer__links a {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 22px;
	font-weight: 400;
	color: #444;
	text-decoration: none;
	transition: color 0.15s ease;
}
.site-footer__links a:hover { color: var(--c-link); }

/* ©-regel, gescheiden door een dunne lijn (mobiel: de onderste lijn van de uitklapblokken). */
.site-footer__bottom { padding-top: 12px; padding-bottom: 28px; }
.site-footer__copy {
	margin: 0;
	font-size: 14px;
	line-height: 19px;
	color: var(--c-muted);
}

/* Tablet en groter: geen uitklapblokken, kolommen open (footer.php zet [open]).
   Kopje Inter 15px/600 #363940, links 15px #363940; het tikvlak blijft 44px hoog
   (onzichtbaar vergroot), met 8px ertussen. */
@media (min-width: 768px) {
	.site-footer__wrap { padding-inline: var(--gutter); }
	.site-footer__main {
		display: grid;
		grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 1fr);
		gap: 32px;
		padding-top: 44px;
		padding-bottom: 12px;
	}
	.site-footer__brand { grid-row: span 2; }
	.site-footer__nav { display: contents; border: 0; }
	.site-footer__col { border: 0; }
	.site-footer__title {
		min-height: 0;
		padding: 0;
		margin-bottom: 14px; /* ruimte voor het vergrote tikvlak van de eerste link */
		font-size: 15px;
		line-height: 22px;
		cursor: default;
	}
	.site-footer__chevron { display: none; }
	.site-footer__links {
		gap: 0;
		margin: 0;
		padding: 0;
		border: 0;
	}
	.site-footer__links a {
		min-height: 0;
		/* zichtbaar 22px, tikvlak 44px: 11px erboven en eronder; rijen 52px uit elkaar */
		padding: 11px 0;
		margin: -11px 0;
		font-size: 15px;
		color: var(--c-nav);
	}
	.site-footer__links li + li { margin-top: 30px; } /* 30 - 22 = 8px tussen de tikvlakken */
	.site-footer__bottom { padding-top: 32px; padding-bottom: 32px; }
	.site-footer__copy { padding-top: 20px; border-top: 1px solid var(--c-border); }
}

/* Desktop: 5 kolommen naast elkaar. */
@media (min-width: 1024px) {
	.site-footer { margin-top: var(--s-16); }
	.site-footer__newsletter .newsletter { padding: 32px 0; }
	.site-footer__main {
		grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
		gap: 40px;
		padding-top: 56px;
	}
	.site-footer__brand { grid-row: auto; }
}
/* Met muis (fijne aanwijzer) op desktop: compacter, tikvlak hoeft niet 44px. */
@media (min-width: 1024px) and (pointer: fine) {
	.site-footer__links a { padding: 5px 0; margin: -5px 0; }
	.site-footer__links li + li { margin-top: 12px; }
	.site-footer__title { margin-bottom: 10px; }
}

/* ---------- 11. Receptkaart + raster ---------- */
/* Kaart: template-parts/content/card.php. Gedeeld door homepage, overzichten en zoeken. */
.card-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 22px var(--s-3);
}
@media (min-width: 1024px) {
	.card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 28px; }
}
/* AdPushup-advertentie (300x600) als 7e kaart: mobiel over de volle breedte. */
@media (max-width: 1023px) {
	.recent-posts > article.regular-post:not(.card) { grid-column: 1 / -1; }
}

.card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-width: 0;
}
.card__media {
	position: relative;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	border-radius: var(--r-md);
	background: var(--c-placeholder);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; }

/* Hartje rechtsonder op de foto: klein wit rondje (32 px), raakvlak 44 px via ::before,
   navy icoon, gevuld als het recept bewaard is (besluit Quint 3 okt). */
.card .card__save {
	position: absolute;
	z-index: 2;
	right: 8px;
	bottom: 8px;
	width: 32px;
	height: 32px;
	padding: 0;
	border: 0;
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-navy);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.card .card__save::before {
	content: "";
	position: absolute;
	inset: -6px;
}
.card .card__save:hover { background: #fff; color: var(--c-navy-hover); }
.card .card__save svg { width: 16px; height: 16px; }
.card .card__save.is-saved { background: #fff; color: var(--c-navy); }
.card .card__save.is-saved svg { fill: currentColor; }

/* Kaartje rustiger (besluit Quint 3 okt): titel (max. 2 regels) en één regel koolhydraten. */
.card__body { display: flex; flex-direction: column; gap: 4px; padding-top: 10px; }
.card__meta {
	display: block;
	font-size: 14px;
	line-height: 18px;
	font-weight: 400;
	color: #6B7280;
}
.card__title {
	display: -webkit-box;
	margin: 0;
	overflow: hidden;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 1.35;
	font-weight: 600;
	color: #000000;
	overflow-wrap: break-word;
}
.card__link { color: inherit; text-decoration: none; }
/* De titel-link dekt de hele kaart (foto + tekst). */
.card__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	border-radius: var(--r-md);
}
@media (min-width: 1024px) {
	.card .card__save { right: 10px; bottom: 10px; }
	.card__body { padding-top: 12px; }
	.card__title { font-size: 17px; }
}

/* Hover (besluit 3 okt, alleen desktop): titel navy + onderstreept, foto blijft stil. */
@media (hover: hover) {
	.card:hover .card__title { color: var(--c-navy); }
	.card:hover .card__link { text-decoration: underline; text-underline-offset: 3px; }
}
/* Toetsenbord: zelfde stijl + focusring om de hele kaart. */
.card__link:focus-visible { outline: none; color: var(--c-navy); text-decoration: underline; text-underline-offset: 3px; }
.card__link:focus-visible::after { outline: 2px solid var(--c-navy); outline-offset: 4px; }

/* ---------- 12. Paginering ---------- */
.pagination { margin: var(--s-8) 0; }
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: var(--s-2);
}
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	color: var(--c-dark);
	font-size: 15px;
	font-weight: 500;
	text-decoration: none;
}
.pagination .page-numbers.current { border-color: var(--c-navy); background: var(--c-navy); color: #fff; }
.pagination .page-numbers.dots { border: 0; min-width: 0; padding: 0 4px; }
.pagination a.page-numbers:hover { border-color: var(--c-navy); color: var(--c-navy); }

/* ---------- 12b. Kruimelpad (alle pagina's) ---------- */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 14px;
	line-height: 19px;
	color: var(--c-muted);
}
.breadcrumbs li + li::before { content: "›"; margin: 0 6px; }
.breadcrumbs a { position: relative; color: var(--c-muted); }
/* Tikvlak minimaal 44 px hoog zonder de regel hoger te maken (review Quint 4 okt). */
.breadcrumbs a::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: 44px; transform: translateY(-50%); }
.breadcrumbs a:hover { color: var(--c-navy); }
/* Mobiel kort: Home › Diner (zoals in het ontwerp). */
@media (max-width: 1023px) {
	.single-post .breadcrumbs .crumb--recipes { display: none; }
}

/* ---------- 13. Terugvalsjabloon ---------- */
.page-fallback { padding-bottom: var(--s-8); }

/* Teller op het winkelmandje: niet kleiner dan 14px (review Quint 3 okt). */
.xoo-wsc-items-count { font-size: 14px !important; }

.nowrap, .card__fact { white-space: nowrap; }

/* Hoofdfoto smaller dan de kolom: eigen breedte, gecentreerd (nooit opschalen, review Quint 3 okt). */
.lcc-hero-photo.is-narrow { width: 100%; margin-inline: auto !important; }

/* Zwevend winkelmandje alleen in de winkel (inc/shop.php, body.lcc-no-basket). */
.lcc-no-basket .xoo-wsc-basket { display: none !important; }

/* Sluitkruisje van het winkelmandje: tikvlak minimaal 44 px (review Quint 4 okt). */
/* Kruisje is 16 px en staat 10 px van de schermrand: het vlak loopt vooral naar links, zodat het
   binnen het scherm blijft (44 × 44 px, B13). */
span.xoo-wsch-close::after { content: ""; position: absolute; top: -14px; bottom: -14px; left: -22px; right: -6px; }

/* Social Snap "Copy link"-venster: alleen tonen als de plugin het opent (review Quint 4 okt).
   Op pagina's zonder deelknoppen laadt de plugin-CSS niet en stond het ongestyled onder de footer. */
.ss-popup-overlay:not(.ss-visible) { display: none; }

/* ---------- 14. Review Quint 4 okt: typografie en tikvlakken ---------- */

/* B3: Vorige/Volgende onder recepten en artikelen in Inter, gewone hoofdletter, zonder spatiëring.
   (De basisregel staat in recipe.css; hier met .post-foot ervoor zodat dit wint.) */
.post-foot .post-nav__label {
	font-family: var(--f-sans);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: normal;
	text-transform: none;
}

/* B10: tikvlakken min. 44 px via een onzichtbare ::after; de opmaak verschuift niet. */
.byline a[data-auteur-plek],
.post-foot__tags .chip { position: relative; }
/* Rijen tag-chips 18 px uit elkaar (was 10): 34 px chip + 2 × 5 px vlak houdt 8 px tussenruimte. */
.post-foot .post-foot__tags { row-gap: 18px; }
/* Alleen de auteurslink ("Door Quint Kames"), niet de categorielinks ("in Diner, Lunch") die dicht op elkaar staan. */
.byline a[data-auteur-plek]::after {
	content: "";
	position: absolute;
	left: -4px;
	right: -4px;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}
/* Tag-chips 34 px hoog, 10 px tussenruimte: 44 px tikvlak raakt de rij erboven/eronder niet. */
.post-foot__tags .chip::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 44px;
	transform: translateY(-50%);
}

/* ---------- 15. Zwevende knop "10% korting?" (GTM, B18) ----------
   Komt uit een Custom HTML-tag in GTM-PGT4TN4S (div#lc-korting-bubble, inline stijl, opent een
   Reloadify-popup). Het thema past alleen de positie aan en verbergt hem:
   - zolang een paneel open is (body.is-panel-open, nav.js): filterpaneel, mobiel menu, kookmodus,
     Side Cart, zoeklaag;
   - zolang hij over een advertentie zou vallen (body.is-bubble-over-ad, nav.js, alleen mobiel). */
body.is-panel-open #lc-korting-bubble,
html.cook-open #lc-korting-bubble,
body.xoo-wsc-cart-active #lc-korting-bubble { display: none !important; }
@media (max-width: 1023px) {
	#lc-korting-bubble { transition: opacity 0.15s, visibility 0.15s; }
	body.is-bubble-over-ad #lc-korting-bubble { opacity: 0; visibility: hidden; pointer-events: none; }
	/* Overzichten: boven de zwevende knop "Filteren" (20 px + 50 px hoog) in plaats van ernaast. */
	body:has(.filters-fab) #lc-korting-bubble { bottom: calc(82px + env(safe-area-inset-bottom)) !important; }
	/* Pagina's met de Social Snap-deelbalk onderaan (recept, artikel, weekmenu): erboven. */
	body:has(#ss-sticky-bar) #lc-korting-bubble { bottom: calc(78px + env(safe-area-inset-bottom)) !important; }
}

/* ---------- 16. Scrollbare knoppenrijen: fade aan de rand (review Quint 5 okt) ----------
   nav.js zet is-more-left/right op .theme-chips (/blog) en .products-filter__list (/producten).
   Mask i.p.v. een gekleurde laag: de knoppen vervagen naar de achtergrond, welke kleur die ook is. */
.theme-chips.is-scrollable,
.products-filter__list.is-scrollable {
	--fade-l: 0px;
	--fade-r: 0px;
	-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
	mask-image: linear-gradient(to right, transparent 0, #000 var(--fade-l), #000 calc(100% - var(--fade-r)), transparent 100%);
}
.theme-chips.is-more-left,
.products-filter__list.is-more-left { --fade-l: 32px; }
.theme-chips.is-more-right,
.products-filter__list.is-more-right { --fade-r: 32px; }