/*
Theme Name: KookJij
Theme URI: https://www.kookjij.nl
Author: KookJij
Description: Modern 2026 re-skin of the classic KookJij.nl recipe site. Faithful to the original brand identity (lime green, boxed blocks, two-column layout) but flat, responsive and accessible. Presentation layer for the KookJij Features plugin.
Version: 0.40.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kookjij
Tags: recipes, food, two-columns, custom-logo, custom-menu, featured-images, translation-ready
*/

/* =========================================================================
   1. Design tokens
   ========================================================================= */
:root {
	--kj-green:        #8bbf1f;
	--kj-green-600:    #749f18;
	--kj-green-700:    #5c7d13;
	--kj-green-050:    #f2f8e4;
	--kj-green-brand:  #96c11f; /* exact original, for logo-matched spots */

	--kj-ink:      #1e1e1e;
	--kj-body:     #3f3f3f;
	--kj-muted:    #6b6b6b;
	--kj-line:     #e4e4e4;
	--kj-surface:  #ffffff;
	--kj-bg:       #f7f7f5;
	--kj-star:     #f5a623;
	--kj-danger:   #c0392b;

	--kj-font-body:    'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--kj-font-display: 'Quicksand', 'Nunito', 'Segoe UI', system-ui, sans-serif;

	--kj-space-1: 4px;
	--kj-space-2: 8px;
	--kj-space-3: 12px;
	--kj-space-4: 16px;
	--kj-space-5: 24px;
	--kj-space-6: 32px;
	--kj-space-7: 48px;
	--kj-space-8: 64px;

	--kj-radius:     8px;
	--kj-radius-sm:  4px;
	--kj-shadow:     0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
	--kj-shadow-lift: 0 6px 20px rgba(0,0,0,.10);

	--kj-container: 1200px;
}

/* =========================================================================
   2. Reset / base
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* overflow-x:clip stops a stray wide element (e.g. an AdSense unit filled wider than
   its slot, or an off-screen honeypot) from expanding the mobile layout viewport and
   pushing the page sideways. clip (not hidden) doesn't create a scroll container, so
   position:sticky and the carousel's own overflow-x:auto still work. */
html { -webkit-text-size-adjust: 100%; overflow-x: clip; }
/* iOS Safari < 16 doesn't know overflow:clip — fall back to hidden (on body too:
   iOS applies root overflow guards inconsistently for viewport panning). */
@supports not (overflow: clip) {
	html, body { overflow-x: hidden; }
}
body {
	margin: 0;
	/* The html-level clip transfers to the viewport (blocks panning) but per CSS
	   overflow propagation does NOT cap document.scrollWidth; the body-level clip
	   does (measured) — keeps overflow tooling/metrics honest too. */
	overflow-x: clip;
	background: var(--kj-bg);
	color: var(--kj-body);
	font-family: var(--kj-font-body);
	font-size: 16px;
	line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
/* Classic-content autoembeds get a hard width attribute up to $content_width (1200)
   and the block-editor responsive-embed CSS never matches them — cap them all. */
iframe, embed, object, video { max-width: 100%; }
a { color: var(--kj-green-700); text-decoration: none; }
a:hover, a:focus { color: var(--kj-green-600); text-decoration: underline; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--kj-font-display);
	color: var(--kj-ink);
	line-height: 1.25;
	margin: 0 0 var(--kj-space-4);
	font-weight: 600;
}
h1 { font-size: clamp(1.75rem, 4vw, 2.5rem); }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
p { margin: 0 0 var(--kj-space-4); }

:focus-visible { outline: 3px solid var(--kj-green-600); outline-offset: 2px; }

/* Respect reduced-motion: kill the lift/scale/pulse animations for users who ask. */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
	.kj-card:hover, .kj-board__item:hover, .kj-dash-tile:hover, .kj-recent__item:hover, .kj-season-list a:hover { transform: none; }
}
/* On touch devices a tap otherwise leaves a "stuck" hover transform until the next tap. */
@media (hover: none) {
	.kj-card:hover, .kj-board__item:hover, .kj-dash-tile:hover, .kj-recent__item:hover, .kj-season-list a:hover { transform: none; }
}

.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; word-wrap: normal !important;
}
.skip-link {
	position: absolute; left: -9999px; top: 0; z-index: 1000;
	background: var(--kj-ink); color: #fff; padding: var(--kj-space-3) var(--kj-space-4);
}
.skip-link:focus { left: var(--kj-space-3); top: var(--kj-space-3); color: #fff; }

/* =========================================================================
   3. Layout
   ========================================================================= */
.kj-container { max-width: var(--kj-container); margin: 0 auto; padding-inline: var(--kj-space-4); }
@media (min-width: 900px) { .kj-container { padding-inline: var(--kj-space-6); } }

.kj-layout {
	display: grid;
	/* minmax(0,1fr), NOT bare 1fr: grid items default to min-width:auto, so a wide
	   horizontal scroller inside .kj-main (the "Laatst bekeken" rail, ~2000px of
	   flex items) blows the column out past the viewport and the whole page renders
	   shifted right on phones. The desktop rule below already guards this; the
	   mobile column must too. */
	grid-template-columns: minmax(0, 1fr);
	gap: var(--kj-space-6);
	padding-block: var(--kj-space-6);
}
/* Belt & braces for the same blowout class: never let the columns' content dictate
   a minimum wider than their track (embedded overflow-x scrollers stay internal). */
.kj-main, .kj-sidebar { min-width: 0; }
@media (min-width: 900px) {
	.kj-layout { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
	.kj-layout--full { grid-template-columns: minmax(0, 1fr); }
}

/* =========================================================================
   4. Header + primary nav
   ========================================================================= */
.kj-header { background: var(--kj-surface); border-bottom: 1px solid var(--kj-line); }
.kj-header__top {
	display: flex; align-items: center; gap: var(--kj-space-4);
	padding-block: var(--kj-space-3);
	position: relative;
}
.kj-header__logo img, .kj-header__logo .custom-logo { max-height: 64px; width: auto; }
.kj-header__band {
	flex: 1 1 auto; height: 64px; border-radius: var(--kj-radius);
	background: url(assets/img/header-band.png) center/cover no-repeat;
	opacity: .95;
}
@media (max-width: 640px) { .kj-header__band { display: none; } }
.kj-header__account { display: flex; align-items: center; gap: var(--kj-space-2); flex: 0 0 auto; }

.kj-nav { background: var(--kj-green); }
.kj-nav__inner { display: flex; align-items: center; justify-content: space-between; }
.kj-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.kj-nav li a {
	display: block; color: #fff; font-family: var(--kj-font-display); font-weight: 600;
	font-size: 1.0625rem; padding: var(--kj-space-3) var(--kj-space-4); text-decoration: none;
}
.kj-nav li a:hover, .kj-nav li.current-menu-item > a, .kj-nav li.current_page_item > a {
	background: var(--kj-green-600); color: #fff;
}
.kj-nav__toggle {
	display: none; background: none; border: 0; color: #fff; cursor: pointer;
	font: 600 1rem/1 var(--kj-font-display); padding: var(--kj-space-3) var(--kj-space-4); align-items: center; gap: 8px;
}
.kj-nav__toggle svg { width: 22px; height: 22px; fill: currentColor; }
@media (max-width: 900px) {
	.kj-nav__toggle { display: inline-flex; }
	.kj-nav .kj-nav__menu { display: none; width: 100%; flex-direction: column; }
	.kj-nav .kj-nav__menu.is-open { display: flex; }
	.kj-nav__inner { flex-wrap: wrap; }
	.kj-nav li { width: 100%; }
	.kj-nav li a { padding: var(--kj-space-3) var(--kj-space-4); border-top: 1px solid rgba(255,255,255,.15); }
}

/* Page intro (headerline + breadcrumbs) */
.kj-pagehead { background: var(--kj-green-050); border-bottom: 1px solid var(--kj-line); }
.kj-pagehead__inner { padding-block: var(--kj-space-5); }
.kj-pagehead h1 { margin: 0 0 var(--kj-space-2); }
.kj-breadcrumbs { font-size: .875rem; color: var(--kj-muted); padding-block: var(--kj-space-3); }
.kj-breadcrumbs a { color: var(--kj-muted); }
.kj-breadcrumbs a:hover { color: var(--kj-green-600); }

/* =========================================================================
   5. Buttons + forms
   ========================================================================= */
.kj-btn, .btn, button, input[type="submit"] {
	display: inline-block; font-family: var(--kj-font-display); font-weight: 600; font-size: 1rem;
	padding: 10px 18px; border-radius: var(--kj-radius); border: 1px solid transparent;
	cursor: pointer; line-height: 1.2; text-decoration: none; transition: background-color .15s ease;
}
.kj-btn--primary, input[type="submit"] { background: var(--kj-green-700); color: #fff; } /* green-700 for AA contrast on white text */
.kj-btn--primary:hover, input[type="submit"]:hover { background: var(--kj-green-600); color: #fff; text-decoration: none; }
.kj-btn--ghost { background: var(--kj-surface); border-color: var(--kj-line); color: var(--kj-ink); }
.kj-btn--ghost:hover { border-color: var(--kj-green); color: var(--kj-green-700); text-decoration: none; }
.kj-btn--sm { padding: 6px 12px; font-size: .875rem; }

input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], select, textarea {
	width: 100%; font: inherit; color: var(--kj-body);
	padding: 10px 12px; border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm);
	background: #fff;
}
input:focus, select:focus, textarea:focus { border-color: var(--kj-green-600); outline: none; box-shadow: 0 0 0 3px var(--kj-green-050); }
label { font-weight: 600; color: var(--kj-ink); display: block; margin-bottom: var(--kj-space-1); }

.kj-searchform { display: flex; gap: var(--kj-space-2); }
.kj-searchform input[type="search"] { flex: 1 1 auto; }

/* =========================================================================
   6. Block (signature card)
   ========================================================================= */
.kj-block {
	background: var(--kj-surface); border: 1px solid var(--kj-line);
	border-radius: var(--kj-radius); box-shadow: var(--kj-shadow); margin-bottom: var(--kj-space-6); overflow: hidden;
}
.kj-block__title {
	font-family: var(--kj-font-display); font-weight: 600; font-size: 1.25rem; color: var(--kj-ink);
	margin: 0; padding: var(--kj-space-4) var(--kj-space-5);
	background: var(--kj-green-050); border-left: 5px solid var(--kj-green);
}
.kj-block__content { padding: var(--kj-space-5); }
.kj-block__content > :last-child { margin-bottom: 0; }
/* A block hosting a search form must NOT clip its autocomplete dropdown, which
   overflows the card below the input. Re-round the header's top corners that the
   removed overflow:hidden used to clip. */
.kj-block:has(.kj-searchform) { overflow: visible; }
.kj-block:has(.kj-searchform) .kj-block__title { border-top-left-radius: var(--kj-radius); border-top-right-radius: var(--kj-radius); }

/* =========================================================================
   7. Recipe card + grids
   ========================================================================= */
.kj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--kj-space-5); }
.kj-results-count { font-size: .95rem; color: var(--kj-muted); margin: 0 0 var(--kj-space-4); }
/* "Wat heb ik in huis?" — plain ingredient search input + autocomplete. */
.kj-ingsearch { display: flex; flex-direction: column; gap: 4px; position: relative; }
.kj-ingsearch label { font-weight: 600; font-size: .875rem; }
.kj-ingsearch__input { width: 100%; max-width: 460px; padding: 9px 12px; border: 1px solid var(--kj-line); border-radius: var(--kj-radius); font: inherit; }
.kj-ingsearch__input:focus { outline: 2px solid var(--kj-green-600); border-color: var(--kj-green-600); }
.kj-ingsearch__hint { font-size: .8rem; color: var(--kj-muted); }
/* Ingredient autocomplete option rows. The dropdown container itself reuses the
   shared `.kj-ac` rule (see "Search autocomplete" section) — no duplicate here, so
   the two autocompletes can't fight over `.kj-ac` positioning/z-index. */
.kj-ac__opt { display: flex; justify-content: space-between; align-items: center; gap: var(--kj-space-3); width: 100%; padding: 8px 12px; border: 0; border-bottom: 1px solid var(--kj-line); background: none; font: inherit; text-align: left; cursor: pointer; }
.kj-ac__opt:last-child { border-bottom: 0; }
.kj-ac__opt:hover, .kj-ac__opt:focus, .kj-ac__opt.is-active { background: var(--kj-green-050); }
.kj-ac__count { font-size: .75rem; color: var(--kj-muted); }

.kj-card {
	background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
	overflow: hidden; box-shadow: var(--kj-shadow); transition: transform .15s ease, box-shadow .15s ease;
	display: flex; flex-direction: column;
}
.kj-card:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lift); }
.kj-card__media { position: relative; aspect-ratio: 4/3; overflow: hidden; background: var(--kj-green-050); }
.kj-card__media > a { display: block; width: 100%; height: 100%; }
.kj-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Meta (time / persons / rating) overlaid on the photo, like recipe-of-the-day. */
.kj-card__media .kj-card__meta { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: var(--kj-space-6) var(--kj-space-3) var(--kj-space-2); background: linear-gradient(transparent, rgba(0,0,0,.72)); color: #fff; pointer-events: none; }
.kj-card__media .kj-card__meta:empty { display: none; } /* no time/persons/rating → no empty gradient bar */
/* On photoless cards the dark gradient over the pale placeholder looks muddy — drop it, use green text. */
.kj-card__media.is-placeholder .kj-card__meta { background: none; padding: var(--kj-space-2) var(--kj-space-3); color: var(--kj-green-700); }
.kj-card__media.is-placeholder .kj-card__meta span { color: var(--kj-green-700); }
.kj-card__media.is-placeholder .kj-rating__meta { color: var(--kj-muted); }
/* Card category chips: intentional row spacing (was accidental). */
.kj-card__cats { display: flex; flex-wrap: wrap; gap: var(--kj-space-2); margin-top: 2px; }
.kj-card__media .kj-card__meta span { color: #fff; }
.kj-card__media .kj-rating__meta { color: rgba(255,255,255,.85); }
.kj-card__body { padding: var(--kj-space-4); display: flex; flex-direction: column; gap: var(--kj-space-2); flex: 1 1 auto; }
.kj-card__title { font-size: 1.0625rem; margin: 0; }
.kj-card__title a { color: var(--kj-ink); text-decoration: none; }
.kj-card__title a:hover { color: var(--kj-green-700); }
.kj-card__meta { font-size: .8125rem; color: var(--kj-muted); display: flex; flex-wrap: wrap; gap: var(--kj-space-3); margin-top: auto; }
.kj-card__meta span { display: inline-flex; align-items: center; gap: 4px; }
.kj-chip {
	display: inline-block; font-size: .75rem; font-weight: 600; color: var(--kj-green-700);
	background: var(--kj-green-050); padding: 2px 8px; border-radius: 999px; text-decoration: none;
}

/* Compact recipe list (top-10, sidebar) */
.kj-list { list-style: none; margin: 0; padding: 0; counter-reset: kj; }
.kj-list li { display: flex; gap: var(--kj-space-3); align-items: center; padding: var(--kj-space-3) 0; border-bottom: 1px solid var(--kj-line); }
.kj-list li:last-child { border-bottom: 0; }
.kj-list__rank { counter-increment: kj; font-family: var(--kj-font-display); font-weight: 600; color: var(--kj-green); min-width: 1.5em; text-align: center; }
.kj-list__rank::before { content: counter(kj); }
.kj-list img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--kj-radius-sm); flex: 0 0 auto; }
.kj-list__title { display: block; font-size: .9375rem; color: var(--kj-ink); font-weight: 600; }
.kj-list__sub { display: block; font-size: .8125rem; color: var(--kj-muted); }
.kj-list li > span:last-child { display: flex; flex-direction: column; gap: 2px; }

/* =========================================================================
   8. Ratings + favorites (plugin markup: .kj-rating, .kj-fav-btn, .kj-rating-form)
   ========================================================================= */
.kj-rating { color: var(--kj-star); font-size: 1.1rem; letter-spacing: 1px; white-space: nowrap; }
.kj-rating__meta { color: var(--kj-muted); font-size: .8125rem; margin-left: 4px; }
.kj-rating-form button {
	background: none; border: 0; color: #d0d0d0; font-size: 1.75rem; padding: 0 3px; cursor: pointer; line-height: 1;
	transition: color .12s ease, transform .12s ease;
}
.kj-rating-form button.is-on { color: var(--kj-star); }
.kj-rating-form button:hover, .kj-rating-form button:focus-visible { transform: scale(1.12); }
.kj-rating-form__msg { display: inline-block; margin-left: var(--kj-space-3); color: var(--kj-green-700); font-size: .875rem; }
.kj-fav-btn { background: var(--kj-surface); border: 1px solid var(--kj-line); color: var(--kj-green-700); cursor: pointer; border-radius: 999px; padding: 6px 12px; display: inline-flex; align-items: center; gap: 6px; font-size: .875rem; text-decoration: none; }
.kj-fav-btn:hover { border-color: var(--kj-green); }
.kj-fav-btn[data-fav="true"] { background: #fdeef2; border-color: #e0245e; color: #c31e50; }
/* Heart glyph via CSS so we can fill + redden it on the saved state (like the old site). */
.kj-fav-heart::before { content: '\2661'; font-size: 1.05em; line-height: 1; }
.kj-fav-btn[data-fav="true"] .kj-fav-heart::before { content: '\2665'; color: #e0245e; }
.kj-fav-count { color: var(--kj-muted); font-weight: 400; }
.kj-fav-btn[data-fav="true"] .kj-fav-count { color: #c31e50; }
/* Favorite overlay on recipe cards */
.kj-card { position: relative; }
.kj-card__fav { position: absolute; top: var(--kj-space-2); right: var(--kj-space-2); z-index: 2; }
.kj-card__fav .kj-fav-btn { background: rgba(255,255,255,.92); box-shadow: var(--kj-shadow); padding: 5px 10px; }

/* =========================================================================
   9. Single recipe (plugin markup: .kj-recipe__*)
   ========================================================================= */
.kj-recipe__header { margin-bottom: var(--kj-space-4); }
.kj-recipe__title { margin-bottom: var(--kj-space-2); }
.kj-recipe__cats { display: flex; gap: var(--kj-space-2); flex-wrap: wrap; margin: 0 0 var(--kj-space-2); }
.kj-recipe__image { margin: 0 0 var(--kj-space-5); }
.kj-recipe__image img { width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: var(--kj-radius); display: block; } /* reserve space → no CLS on the LCP hero */

/* --- Recipe photo carousel (multiple images) --------------------------------
   Built on a native scroll-snap track: swipes on touch, works without JS.
   recipe-gallery.js adds arrows/dots/counter/keyboard on top. */
.kj-gallery { position: relative; }
.kj-gallery__viewport { overflow: hidden; border-radius: var(--kj-radius); }
.kj-gallery__track {
	display: flex; margin: 0; padding: 0; list-style: none;
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch; scrollbar-width: none; /* Firefox */
}
.kj-gallery__track::-webkit-scrollbar { display: none; } /* WebKit */
.kj-gallery__slide { flex: 0 0 100%; scroll-snap-align: center; scroll-snap-stop: always; }
/* Override the base .kj-recipe__image img radius: round the viewport, not each frame. */
.kj-gallery__img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 0; display: block; }

.kj-gallery__nav {
	position: absolute; top: 50%; transform: translateY(-50%);
	width: 44px; height: 44px; padding: 0; border: none; border-radius: 50%;
	background: rgba(255,255,255,.92); color: var(--kj-ink); cursor: pointer;
	display: flex; align-items: center; justify-content: center;
	font-size: 1.7rem; line-height: 1; box-shadow: var(--kj-shadow-lift);
	transition: background .15s ease, opacity .15s ease;
}
.kj-gallery__nav:hover { background: #fff; }
.kj-gallery__nav:focus-visible { outline: 3px solid var(--kj-green-700); outline-offset: 2px; }
.kj-gallery__nav[hidden] { display: none; }
.kj-gallery__nav:disabled { opacity: .35; cursor: default; }
.kj-gallery__nav--prev { left: 10px; }
.kj-gallery__nav--next { right: 10px; }
/* Touch devices swipe — hide the arrows there, the dots show position. */
@media (hover: none) { .kj-gallery__nav { display: none; } }

.kj-gallery__counter {
	position: absolute; top: 10px; right: 10px;
	background: rgba(0,0,0,.6); color: #fff; padding: 2px 9px;
	border-radius: 999px; font-size: .8rem; line-height: 1.6; pointer-events: none;
}

.kj-gallery__dots {
	position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%);
	display: flex; gap: 7px; padding: 5px 9px; border-radius: 999px;
	background: rgba(0,0,0,.28);
}
.kj-gallery__dots[hidden] { display: none; }
.kj-gallery__dot {
	width: 8px; height: 8px; padding: 0; border: none; border-radius: 50%;
	background: rgba(255,255,255,.65); cursor: pointer; transition: width .2s ease, background .2s ease;
}
.kj-gallery__dot:hover { background: rgba(255,255,255,.9); }
.kj-gallery__dot.is-active { width: 22px; border-radius: 4px; background: #fff; }
.kj-gallery__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .kj-gallery__track { scroll-behavior: auto; } }

/* Video slides (member uploads) — same 16:9 frame as photos, letterboxed on black. */
.kj-gallery__slide--video { background: #000; }
.kj-gallery__video { width: 100%; aspect-ratio: 16 / 9; display: block; object-fit: contain; background: #000; border-radius: 0; }
.kj-recipe__image--video .kj-gallery__video { border-radius: var(--kj-radius); }

/* Submit form — upload hints + current-media manager (edit mode). */
.kj-submit__hint { display: block; font-size: .85rem; color: var(--kj-muted); margin-top: 2px; }
.kj-submit-media { border: 1px solid var(--kj-line); border-radius: var(--kj-radius); padding: var(--kj-space-3) var(--kj-space-4); margin: 0 0 var(--kj-space-4); }
.kj-submit-media legend { font-weight: 600; padding-inline: 4px; }
.kj-submit-media__grid { display: flex; flex-wrap: wrap; gap: var(--kj-space-3); }
.kj-submit-media__item { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: .8rem; max-width: 120px; text-align: center; }
.kj-submit-media__item img { width: 96px; height: 96px; object-fit: cover; border-radius: var(--kj-radius-sm); border: 1px solid var(--kj-line); }
.kj-submit-media__item--video { justify-content: center; }
.kj-submit-media__videoicon { font-size: 2rem; line-height: 1; }
.kj-submit-media__name { word-break: break-all; max-width: 110px; }

/* Front-end form feedback (recipe submission + contact form). */
.kj-submit__notice {
	margin: 0 0 var(--kj-space-4); padding: 12px 16px; border-radius: var(--kj-radius);
	border: 1px solid var(--kj-line); background: var(--kj-green-050); color: var(--kj-ink); font-weight: 600;
}
.kj-submit__notice--success { border-color: var(--kj-green-600); background: var(--kj-green-050); }
.kj-submit__notice--error { border-color: #d98b8b; background: #fbeaea; color: #7a2020; }

/* Contact form — a comfortable single-column reading width. */
.kj-contact-form { max-width: 640px; }
.kj-contact-form p { margin: 0 0 var(--kj-space-4); }

/* Owner/admin "edit" link on single recipe/blog. */
.kj-recipe__edit, .kj-entry__edit { margin: var(--kj-space-3) 0 0; }
.kj-edit-link { display: inline-flex; align-items: center; gap: 6px; }

/* Front-end comment editing (owner/admin). */
.kj-comment-edit { margin-top: var(--kj-space-2); }
.kj-comment-edit__toggle { cursor: pointer; color: var(--kj-green-700); font-size: .85rem; font-weight: 600; display: inline-block; }
.kj-comment-edit__form { margin-top: var(--kj-space-2); }
.kj-comment-edit__field { margin-bottom: var(--kj-space-2); }
.kj-comment-edit__notice { color: var(--kj-green-700); font-weight: 600; margin: var(--kj-space-2) 0; }

/* Member dashboard ("Mijn recepten"/"Mijn artikelen") list rows + edit button. */
.kj-dashboard__list { list-style: none; margin: 0; padding: 0; }
.kj-dashboard__list li { display: flex; align-items: center; flex-wrap: wrap; gap: var(--kj-space-2); padding: var(--kj-space-2) 0; border-bottom: 1px solid var(--kj-line); }
.kj-dashboard__edit { margin-left: auto; flex: 0 0 auto; }

/* Over-KookJij call-to-action buttons. */
.kj-over-cta { display: flex; flex-wrap: wrap; gap: var(--kj-space-3); margin-top: var(--kj-space-5); }

.kj-recipe__facts {
	list-style: none; margin: 0 0 var(--kj-space-5); padding: var(--kj-space-4);
	background: var(--kj-green-050); border-radius: var(--kj-radius);
	display: flex; flex-wrap: wrap; gap: var(--kj-space-5);
}
.kj-recipe__facts li { display: flex; flex-direction: column; font-size: .95rem; }
.kj-recipe__facts strong { color: var(--kj-muted); font-weight: 600; font-size: .8125rem; text-transform: uppercase; letter-spacing: .03em; }
.kj-recipe__ingredients, .kj-recipe__steps, .kj-recipe__content, .kj-recipe__rate, .kj-recipe__related { margin-bottom: var(--kj-space-6); }
.kj-recipe__ingredients ul { padding-left: 1.25em; }
.kj-recipe__ingredients li, .kj-recipe__steps li { margin-bottom: var(--kj-space-2); }
.kj-recipe__steps ol { padding-left: 1.25em; }
.kj-recipe__story { background: #fff; border-left: 4px solid var(--kj-green); padding: var(--kj-space-3) var(--kj-space-4); color: var(--kj-muted); font-style: italic; margin-bottom: var(--kj-space-5); }
/* User-written text can carry unbreakable runs (long URLs — / . _ give no break
   points) that would lay out wider than a phone. Allow mid-token wrapping:
   break-word is the universal fallback; anywhere (Safari 15.4+) also shrinks the
   box's min-content size so nothing widens the page. Verified: an 85-char URL run
   went from a 694px line to wrapped-in-place. */
.kj-recipe__story, .kj-recipe__content, .kj-recipe__steps li, .kj-recipe__ingredients li,
.kj-entry__content, .kj-comments {
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}
.kj-nutrition { border-collapse: collapse; width: 100%; }
.kj-nutrition th, .kj-nutrition td { text-align: left; padding: var(--kj-space-2) var(--kj-space-3); border-bottom: 1px solid var(--kj-line); font-size: .9rem; }

/* =========================================================================
   10. Archive filters
   ========================================================================= */
.kj-filters { background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); padding: var(--kj-space-4); margin-bottom: var(--kj-space-5); }
.kj-filters__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--kj-space-3); align-items: end; }
.kj-filters__actions { margin-top: var(--kj-space-3); display: flex; gap: var(--kj-space-2); }
.kj-activefilters { display: flex; flex-wrap: wrap; gap: var(--kj-space-2); margin-bottom: var(--kj-space-4); }
.kj-activefilters .kj-chip { display: inline-flex; align-items: center; gap: 6px; }

/* Pagination */
.kj-pagination { margin-top: var(--kj-space-6); display: flex; justify-content: center; }
.kj-pagination .page-numbers {
	display: inline-block; padding: 8px 14px; margin: 0 3px; border: 1px solid var(--kj-line);
	border-radius: var(--kj-radius-sm); color: var(--kj-green-700); text-decoration: none;
}
.kj-pagination .page-numbers.current { background: var(--kj-green-700); color: #fff; border-color: var(--kj-green-700); }
.kj-pagination .page-numbers:hover { border-color: var(--kj-green); text-decoration: none; }

/* =========================================================================
   11. Sidebar widgets
   ========================================================================= */
.kj-sidebar .widget, .kj-sidebar .kj-block { margin-bottom: var(--kj-space-6); }
.kj-sidebar .widget-title { font-family: var(--kj-font-display); font-size: 1.125rem; margin-bottom: var(--kj-space-3); color: var(--kj-ink); }

/* Category chip cloud */
.kj-chips { display: flex; flex-wrap: wrap; gap: var(--kj-space-2); }
.kj-chips .kj-chip { display: inline-flex; align-items: center; gap: 6px; }
.kj-chip__count { background: var(--kj-green-700); color: #fff; font-size: .6875rem; line-height: 1; padding: 2px 6px; border-radius: 999px; }

/* Latest comments list */
.kj-comments-list { list-style: none; margin: 0; padding: 0; }
.kj-comments-list li { padding: var(--kj-space-2) 0; border-bottom: 1px solid var(--kj-line); font-size: .875rem; line-height: 1.45; }
.kj-comments-list li:last-child { border-bottom: 0; }
.kj-comments-list a { color: var(--kj-body); text-decoration: none; }
.kj-comments-list a:hover { color: var(--kj-green-700); }
.kj-comments-list__author { font-weight: 600; color: var(--kj-ink); }
.kj-comments-list__on { color: var(--kj-muted); }
.kj-comments-list__post { color: var(--kj-green-700); }

/* =========================================================================
   12. Posts / blog
   ========================================================================= */
.kj-entry { margin-bottom: var(--kj-space-6); }
.kj-entry__meta { font-size: .8125rem; color: var(--kj-muted); margin-bottom: var(--kj-space-3); display: flex; gap: var(--kj-space-3); flex-wrap: wrap; }
.kj-entry__thumb { margin-bottom: var(--kj-space-4); border-radius: var(--kj-radius); overflow: hidden; aspect-ratio: 4 / 3; }
.kj-entry__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Blog single: author byline + tags */
.kj-entry__author { display: flex; align-items: center; gap: var(--kj-space-2); margin-bottom: var(--kj-space-3); }
.kj-entry__author-avatar { border-radius: 50%; width: 40px; height: 40px; flex: 0 0 auto; }
.kj-entry__author-name { font-size: .95rem; }
.kj-tags { font-size: .8125rem; color: var(--kj-muted); }
/* Prev/next post navigation (the_post_navigation) */
.kj-postnav { margin: var(--kj-space-6) 0; }
.kj-postnav .nav-links { display: flex; gap: var(--kj-space-3); }
.kj-postnav .nav-previous, .kj-postnav .nav-next { flex: 1 1 0; min-width: 0; }
.kj-postnav .nav-next { margin-left: auto; }
.kj-postnav a { display: flex; flex-direction: column; gap: 2px; height: 100%; padding: var(--kj-space-3) var(--kj-space-4); background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); box-shadow: var(--kj-shadow); }
.kj-postnav .nav-next a { align-items: flex-end; text-align: right; }
.kj-postnav a:hover { text-decoration: none; border-color: var(--kj-green-600); }
.kj-postnav__dir { font-size: .8rem; color: var(--kj-muted); }
.kj-postnav__title { font-weight: 600; color: var(--kj-green-700); }

/* Comments */
.kj-comments { margin-top: var(--kj-space-6); }
.kj-comments .comment-list { list-style: none; padding: 0; }
.kj-comments .comment-body { padding: var(--kj-space-4); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); margin-bottom: var(--kj-space-3); background: #fff; }
.kj-comments .children { list-style: none; margin-left: var(--kj-space-5); }

/* =========================================================================
   Ads — every slot reserves its final height up front (CLS-safe). Slugs
   mirror the plugin's Ads_Manager position registry. The wrapper is only
   printed when an ad is configured, so reserved space never shows empty.
   ========================================================================= */
.kj-ad { text-align: center; }
.kj-ad__slot { margin: var(--kj-space-5) 0; }
/* Never let an ad break the layout: an AdSense unit can be filled wider than its
   reserved slot (e.g. a 728px ad served into a mobile leaderboard). Cap + clip so it
   can't widen the page. The fixed anchor bar escapes the html clip, so it needs its
   own. */
.kj-ad, .kj-ad__slot, .kj-adsense { max-width: 100%; }
.kj-ad__slot, .kj-adsense { overflow: clip; }
.kj-ad--anchor { max-width: 100vw; overflow-x: clip; }

/* Reserved heights per position (mobile first). The in_content selector is
   legacy support for sponsors/shortcodes stored with the pre-rename slug. */
.kj-ad__slot--leaderboard,
.kj-ad__slot--landing_top { min-height: 100px; }
.kj-ad__slot--recipe_top,
.kj-ad__slot--recipe_after_steps,
.kj-ad__slot--blog_below,
.kj-ad__slot--in_content { min-height: 250px; }
.kj-ad__slot--sidebar { min-height: 250px; }
@media (min-width: 900px) {
	.kj-ad__slot--leaderboard,
	.kj-ad__slot--landing_top { min-height: 90px; }
	.kj-ad__slot--recipe_top,
	.kj-ad__slot--recipe_after_steps,
	.kj-ad__slot--blog_below,
	.kj-ad__slot--in_content { min-height: 280px; }
	.kj-ad__slot--sidebar_sticky { min-height: 600px; }
	/* Stick the OUTER wrapper — it is a direct child of the tall, stretched
	   .kj-sidebar so it has room to travel. (Sticking the inner .kj-ad__slot
	   does nothing: its parent .kj-ad--sidebar_sticky is only as tall as the
	   slot, leaving no scroll range.) */
	.kj-ad--sidebar_sticky { position: sticky; top: var(--kj-space-5); }
}
@media (max-width: 899px) { .kj-ad--sidebar_sticky { display: none; } }

/* Per-device visibility set on the settings tab (device-blind page cache ⇒
   CSS decides, never PHP). */
@media (max-width: 899px) { .kj-ad__slot--hide-mobile { display: none !important; } }
@media (min-width: 900px) { .kj-ad__slot--hide-desktop { display: none !important; } }

/* AdSense units take the exact size CSS gives them (no data-ad-format), so
   the reserved heights above always match the served creative. */
.kj-adsense { display: inline-block; }
.kj-adsense--leaderboard,
.kj-adsense--landing_top { width: 320px; height: 100px; }
.kj-adsense--recipe_top,
.kj-adsense--recipe_after_steps,
.kj-adsense--blog_below { width: 300px; height: 250px; }
.kj-adsense--sidebar { width: 300px; height: 250px; }
.kj-adsense--sidebar_sticky { width: 300px; height: 600px; }
.kj-adsense--anchor { width: 320px; height: 100px; }
@media (min-width: 900px) {
	.kj-adsense--leaderboard,
	.kj-adsense--landing_top { width: 728px; height: 90px; }
	.kj-adsense--recipe_top,
	.kj-adsense--recipe_after_steps,
	.kj-adsense--blog_below { width: 336px; height: 280px; }
}

/* Anchor: fixed bar at the viewport bottom, mobile only. Space is reserved
   via body.kj-has-anchor (rendered server-side, per URL — no layout shift).
   Stays under cook mode (z-index 1000) and disappears while it is open. */
.kj-ad--anchor {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 900;
	margin: 0;
	background: #fff;
	box-shadow: 0 -2px 8px rgba(0,0,0,.12);
	padding: 6px 0;
	min-height: 0;
}
body.kj-has-anchor { padding-bottom: 118px; }
@media (min-width: 900px) {
	.kj-ad--anchor { display: none; }
	body.kj-has-anchor { padding-bottom: 0; }
}
body.kj-cook-open .kj-ad--anchor { display: none; }
.kj-ad-anchor__close {
	position: absolute;
	top: -28px;
	right: 8px;
	width: 32px;
	height: 28px;
	border: 1px solid var(--kj-line);
	border-bottom: 0;
	background: #fff;
	border-radius: var(--kj-radius) var(--kj-radius) 0 0;
	cursor: pointer;
	font-size: 15px;
	line-height: 1;
}

/* Demo/example placeholder — fills the slot's reserved height, clearly a sample. */
.kj-ad-demo {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	width: 100%;
	min-height: inherit;
	box-sizing: border-box;
	padding: 10px;
	border: 1px dashed var(--kj-line-dk, #c9cec1);
	border-radius: var(--kj-radius);
	background:
		repeating-linear-gradient(45deg, #f6f8f2, #f6f8f2 10px, #eef1e9 10px, #eef1e9 20px);
	color: var(--kj-muted);
	text-align: center;
}
.kj-ad--anchor .kj-ad-demo { min-height: 84px; }
.kj-ad-demo__tag {
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--kj-green-700, #5c7d13);
}
.kj-ad-demo__label { font-family: var(--kj-font-display); font-weight: 600; }
.kj-ad-demo__size { font-size: .75rem; opacity: .75; font-variant-numeric: tabular-nums; }

/* Minimal cookie/consent banner — fixed bottom bar, easy to dismiss. */
.kj-consent {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 999;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 10px 16px;
	padding: 12px 16px;
	background: var(--kj-ink, #20261f);
	color: #fff;
	font-size: .9rem;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, .2);
}
.kj-consent[hidden] { display: none; }
.kj-consent__text { margin: 0; max-width: 68ch; }
.kj-consent__text a { color: #fff; text-decoration: underline; }
.kj-consent__actions { display: flex; gap: 8px; flex-shrink: 0; }
.kj-consent__actions .kj-btn { margin: 0; }
.kj-consent__reject {
	background: transparent;
	border: 1px solid rgba(255, 255, 255, .55);
	color: #fff;
}
/* While the visitor still has to choose, keep the (demo) anchor out of the way
   and release the body padding reserved for it (else a blank gap shows). */
.kj-consent-pending .kj-ad--anchor { display: none !important; }
.kj-consent-pending.kj-has-anchor { padding-bottom: 0 !important; }
@media (prefers-reduced-motion: no-preference) {
	.kj-consent { animation: kj-consent-in .2s ease-out; }
	@keyframes kj-consent-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* =========================================================================
   13. Footer
   ========================================================================= */
.kj-footer { background: #2a2a2a; color: #cfcfcf; margin-top: var(--kj-space-8); }
.kj-footer a { color: #dfe9c6; }
.kj-footer__cols { display: grid; grid-template-columns: 1fr; gap: var(--kj-space-6); padding-block: var(--kj-space-7); }
@media (min-width: 700px) { .kj-footer__cols { grid-template-columns: 1.6fr 1fr 1.4fr; } }
.kj-footer h2, .kj-footer h3, .kj-footer .widget-title { color: #fff; font-size: 1.125rem; }
.kj-footer .kj-sitemap { list-style: none; padding: 0; margin: 0; column-gap: var(--kj-space-6); }
.kj-footer .kj-sitemap a { text-decoration: none; }
.kj-footer__bottom { border-top: 1px solid rgba(255,255,255,.12); padding-block: var(--kj-space-4); font-size: .8125rem; color: #9a9a9a; }

/* =========================================================================
   Account / auth (page-inloggen.php)
   ========================================================================= */
.kj-auth { max-width: 460px; margin-inline: auto; }
.kj-auth__tabs { display: flex; gap: var(--kj-space-2); margin-bottom: var(--kj-space-5); border-bottom: 1px solid var(--kj-line); }
.kj-auth__tab { padding: var(--kj-space-3) var(--kj-space-4); text-decoration: none; color: var(--kj-muted); font-weight: 600; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.kj-auth__tab.is-active { color: var(--kj-green-700); border-bottom-color: var(--kj-green); }
.kj-auth__title { font-family: var(--kj-font-display); font-size: 1.25rem; margin: 0 0 var(--kj-space-4); }
.kj-auth__form { display: flex; flex-direction: column; gap: var(--kj-space-4); }
.kj-field { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.kj-field label { font-weight: 600; font-size: .9375rem; }
.kj-field input[type="text"], .kj-field input[type="email"], .kj-field input[type="password"] {
	width: 100%; padding: 10px 12px; border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm);
	font: inherit; background: var(--kj-surface);
}
.kj-field input:focus { outline: 2px solid var(--kj-green); border-color: var(--kj-green); }
.kj-field--check { flex-direction: row; align-items: center; font-size: .9375rem; }
.kj-field--check label { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; }
.kj-auth__link { font-size: .875rem; color: var(--kj-green-700); text-decoration: none; }
.kj-auth__link:hover { text-decoration: underline; }
.kj-auth__msg { padding: var(--kj-space-3) var(--kj-space-4); border-radius: var(--kj-radius-sm); font-size: .9375rem; margin-bottom: var(--kj-space-4); }
.kj-auth__msg--error { background: #fdecea; color: var(--kj-danger); border: 1px solid #f5c6c0; }
.kj-auth__msg--ok { background: var(--kj-green-050); color: var(--kj-green-700); border: 1px solid #cfe6a1; }
/* Honeypot — visually removed but present in the DOM for bots. */
.kj-hp { position: absolute; left: -9999px; top: 0; width: 1px; height: 1px; overflow: hidden; }

/* =========================================================================
   Share bar (template-parts/share.php)
   ========================================================================= */
.kj-share { display: flex; flex-wrap: wrap; align-items: center; gap: var(--kj-space-2); margin: 0 0 var(--kj-space-5); }
.kj-share__label { font-weight: 600; font-size: .875rem; color: var(--kj-muted); }
.kj-share__btn {
	display: inline-flex; align-items: center; gap: 6px; font-size: .8125rem; font-weight: 600;
	padding: 6px 12px; border-radius: 999px; border: 1px solid var(--kj-line); background: var(--kj-surface);
	color: var(--kj-ink); text-decoration: none; cursor: pointer; line-height: 1.2;
}
.kj-share__btn:hover { border-color: var(--kj-green); color: var(--kj-green-700); }
.kj-share__btn--wa:hover { border-color: #25d366; color: #128c3e; }
.kj-share__btn--fb:hover { border-color: #1877f2; color: #1877f2; }
.kj-share__btn--pin:hover { border-color: #e60023; color: #e60023; }
.kj-share__copy.is-copied { background: var(--kj-green-050); border-color: var(--kj-green); color: var(--kj-green-700); }

/* =========================================================================
   Print (recipe / blog) — strip chrome, show the content full-width
   ========================================================================= */
@media print {
	@page { margin: 1.5cm; }
	.kj-header, .kj-footer, .kj-nav, .kj-pagehead, .kj-breadcrumbs,
	.kj-sidebar, #secondary, .kj-share, .no-print,
	.kj-recipe__rate, .kj-recipe__related, .kj-recipe__faq, .kj-comments, .kj-ad, .kj-card__fav,
	.kj-recent, .kj-fav-btn, .kj-add-shopping, .kj-add-planner, .kj-cooked-btn, .kj-rating-form,
	.kj-cook__bar { display: none !important; }
	.kj-layout, .kj-layout--full { display: block !important; }
	.kj-main { width: 100% !important; max-width: none !important; }
	.kj-block, .kj-recipe { box-shadow: none !important; border: 0 !important; }
	body { background: #fff !important; color: #000 !important; font-size: 12pt; }
	a { color: #000 !important; text-decoration: none !important; }
	img { max-width: 100% !important; height: auto !important; }
	.kj-recipe__image img { max-width: 380px !important; }
	/* Keep logical chunks together across page breaks. */
	.kj-recipe__image, .kj-recipe__ingredients li, .kj-recipe__steps li,
	.kj-shop__group, .kj-plan__day, .kj-faq__item { break-inside: avoid; }
	h1, h2, h3 { break-after: avoid; }
	/* Shopping list: a tickable empty box that always prints. */
	.kj-shop__items input[type="checkbox"] {
		-webkit-appearance: none; appearance: none;
		width: 11px; height: 11px; border: 1.5px solid #000; border-radius: 2px;
		vertical-align: -1px; -webkit-print-color-adjust: exact; print-color-adjust: exact;
	}
}

/* =========================================================================
   Newsletter form (plugin markup .kj-newsletter-form) — page + footer
   ========================================================================= */
.kj-newsletter-form p { margin: 0; }
.kj-newsletter-form label { display: block; font-size: .9rem; margin-bottom: var(--kj-space-2); }
.kj-newsletter-form input[type="text"], .kj-newsletter-form input[type="email"] {
	width: 100%; padding: 9px 12px; border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm);
	font: inherit; margin-top: 4px; background: var(--kj-surface); color: var(--kj-ink);
}
.kj-newsletter-form button { margin-top: var(--kj-space-3); }
/* Footer variant (on dark) */
.kj-footer__newsletter .kj-newsletter-form label { color: #dfe9c6; }
.kj-footer__newsletter .kj-newsletter-form input { border-color: rgba(255,255,255,.25); }
.kj-footer__newsletter .kj-newsletter-form button {
	background: var(--kj-green); color: #fff; border: 0; border-radius: var(--kj-radius-sm);
	padding: 9px 18px; font-weight: 600; cursor: pointer;
}
.kj-footer__newsletter .kj-newsletter-form button:hover { background: var(--kj-green-600); }

/* =========================================================================
   Food & Foto's board (page-food-en-fotos.php) — Pinterest-style masonry
   ========================================================================= */
.kj-board__search { display: flex; flex-wrap: wrap; gap: var(--kj-space-2); margin-bottom: var(--kj-space-5); max-width: 620px; }
.kj-board__search input[type="search"] {
	flex: 1 1 200px; padding: 10px 16px; border: 1px solid var(--kj-line); border-radius: 999px;
	font: inherit; background: var(--kj-surface);
}
.kj-board__search input[type="search"]:focus { outline: 2px solid var(--kj-green); border-color: var(--kj-green); }
/* Pinterest-style masonry: photos keep their natural varying heights.
   FALLBACK (no JS / pre-JS): CSS multi-column, variable heights, top-aligned.
   board-masonry.js upgrades it to correct left-to-right reading order (most
   popular across the top) by adding .is-masonry and placing items absolutely. */
.kj-board { column-width: 200px; column-gap: var(--kj-space-4); margin-bottom: var(--kj-space-6); }
.kj-board__item {
	display: block; width: 100%; margin: 0 0 var(--kj-space-4); break-inside: avoid;
	aspect-ratio: var(--kj-ar, 4 / 3); /* reserve true height before the image loads → no CLS */
	position: relative; border-radius: var(--kj-radius); overflow: hidden; box-shadow: var(--kj-shadow);
	text-decoration: none; transition: transform .15s ease, box-shadow .15s ease;
	backface-visibility: hidden;
}
.kj-board:not(.is-masonry) .kj-board__item:hover { transform: translate3d(0, -3px, 0); box-shadow: var(--kj-shadow-lift); }
.kj-board__item img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* JS masonry: container is a positioning context with a JS-set height; items are
   absolutely placed via --kj-x/--kj-y (set from a stylesheet rule so :hover wins). */
.kj-board.is-masonry { position: relative; column-width: auto; }
.kj-board.is-masonry .kj-board__item {
	position: absolute; top: 0; left: 0; margin: 0; aspect-ratio: auto; will-change: transform;
	transform: translate3d(var(--kj-x, 0), var(--kj-y, 0), 0);
}
.kj-board.is-masonry .kj-board__item:hover, .kj-board.is-masonry .kj-board__item:focus-visible {
	transform: translate3d(var(--kj-x, 0), calc(var(--kj-y, 0) - 3px), 0); box-shadow: var(--kj-shadow-lift); z-index: 2;
}
.kj-board__caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: var(--kj-space-4) var(--kj-space-3) var(--kj-space-3);
	background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.25;
}
.kj-board__caption {
	position: absolute; left: 0; right: 0; bottom: 0; padding: var(--kj-space-4) var(--kj-space-3) var(--kj-space-3);
	background: linear-gradient(transparent, rgba(0,0,0,.78)); color: #fff; font-weight: 600; font-size: .9rem; line-height: 1.25;
}

/* =========================================================================
   Search autocomplete (assets/js/search-autocomplete.js)
   ========================================================================= */
.kj-ac-host { position: relative; }
.kj-ac {
	position: absolute; top: 100%; left: 0; right: 0; z-index: 40; margin-top: 4px;
	background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius);
	box-shadow: var(--kj-shadow-lift); overflow: hidden; max-height: 380px; overflow-y: auto;
}
.kj-ac__item { display: flex; align-items: center; gap: var(--kj-space-3); padding: var(--kj-space-2) var(--kj-space-3); text-decoration: none; color: var(--kj-ink); }
.kj-ac__item:hover, .kj-ac__item.is-active { background: var(--kj-green-050); }
.kj-ac__item img, .kj-ac__noimg { width: 44px; height: 44px; border-radius: var(--kj-radius-sm); object-fit: cover; flex: 0 0 auto; background: var(--kj-green-050); }
.kj-ac__title { flex: 1; font-size: .9rem; font-weight: 600; line-height: 1.2; }
.kj-ac__meta { font-size: .78rem; color: var(--kj-muted); flex: 0 0 auto; }
/* "Alle resultaten voor …" footer row in the search dropdown. */
.kj-ac__all { justify-content: space-between; gap: var(--kj-space-2); border-top: 1px solid var(--kj-line); background: var(--kj-green-050); font-weight: 600; }
.kj-ac__all .kj-ac__title { flex: 1 1 auto; color: var(--kj-green-700, var(--kj-accent)); font-weight: 600; }
.kj-ac__all .kj-ac__arrow { color: var(--kj-green-700, var(--kj-accent)); font-weight: 700; }

/* =========================================================================
   Shopping list (page-boodschappenlijst.php + .kj-add-shopping)
   ========================================================================= */
.kj-recipe__ingredients-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kj-space-3); flex-wrap: wrap; }
.kj-recipe__ingredients-head h2 { margin: 0; }
.kj-add-shopping.is-added { background: var(--kj-green-050); border-color: var(--kj-green); color: var(--kj-green-700); }
.kj-shop__group { margin-bottom: var(--kj-space-5); }
.kj-shop__head { display: flex; align-items: center; justify-content: space-between; gap: var(--kj-space-3); border-bottom: 2px solid var(--kj-green-050); padding-bottom: var(--kj-space-2); margin-bottom: var(--kj-space-3); }
.kj-shop__head h3 { margin: 0; font-size: 1.05rem; }
.kj-shop__remove { background: none; border: 0; color: var(--kj-danger); cursor: pointer; font-size: .85rem; }
.kj-shop__items { list-style: none; margin: 0; padding: 0; }
.kj-shop__items li { padding: 4px 0; }
.kj-shop__items label { display: flex; align-items: center; gap: var(--kj-space-2); cursor: pointer; }
.kj-shop__items li.is-checked span { text-decoration: line-through; color: var(--kj-muted); }
.kj-shop__actions { margin-top: var(--kj-space-5); display: flex; gap: var(--kj-space-3); }
.kj-shop-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--kj-green); color: #fff; font-size: .72rem; font-weight: 700; line-height: 18px; text-align: center; }

.kj-recipe__ing-actions { display: flex; gap: var(--kj-space-2); flex-wrap: wrap; }

/* =========================================================================
   Meal planner / weekmenu (page-weekmenu.php)
   ========================================================================= */
.kj-plan__grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: var(--kj-space-3); }
@media (max-width: 900px) { .kj-plan__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .kj-plan__grid { grid-template-columns: 1fr; } }
.kj-plan__day { background: var(--kj-green-050); border-radius: var(--kj-radius); padding: var(--kj-space-3); min-height: 90px; }
.kj-plan__day h3 { margin: 0 0 var(--kj-space-2); font-size: .9rem; color: var(--kj-green-700); text-align: center; }
.kj-plan__empty { text-align: center; margin: 0; }
.kj-plan__entry { background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm); padding: var(--kj-space-2); margin-bottom: var(--kj-space-2); }
.kj-plan__title { display: block; font-size: .82rem; font-weight: 600; line-height: 1.2; margin-bottom: 4px; }
.kj-plan__title a { color: var(--kj-ink); text-decoration: none; }
.kj-plan__ctl { display: flex; gap: 4px; align-items: center; }
.kj-plan__move { flex: 1; font-size: .72rem; padding: 2px; border: 1px solid var(--kj-line); border-radius: 3px; }
.kj-plan__remove { background: none; border: 0; color: var(--kj-danger); cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 4px; }
.kj-plan__actions { margin-top: var(--kj-space-5); display: flex; gap: var(--kj-space-3); flex-wrap: wrap; }

/* =========================================================================
   Ingredient picker ("Wat heb ik in huis?", template-parts/filters.php)
   ========================================================================= */
.kj-filters__row--ing { margin-top: var(--kj-space-3); }
.kj-ingpick { position: relative; }
.kj-ingpick > label { display: block; font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.kj-ingpick__box {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm); padding: 6px 8px; background: var(--kj-surface);
}
.kj-ingpick__box:focus-within { outline: 2px solid var(--kj-green); border-color: var(--kj-green); }
.kj-ingpick__chip { display: inline-flex; align-items: center; gap: 4px; background: var(--kj-green-050); color: var(--kj-green-700); }
.kj-ingpick__x { background: none; border: 0; color: var(--kj-green-700); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; }
.kj-ingpick__input { flex: 1 1 140px; border: 0; outline: none; font: inherit; padding: 4px; background: transparent; min-width: 120px; }
.kj-ingpick__ac {
	position: absolute; left: 0; right: 0; top: 100%; z-index: 30; margin-top: 4px;
	background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius-sm);
	box-shadow: var(--kj-shadow-lift); max-height: 300px; overflow-y: auto;
}
.kj-ingpick__opt { display: flex; justify-content: space-between; gap: var(--kj-space-3); width: 100%; text-align: left; background: none; border: 0; padding: 8px 12px; cursor: pointer; font: inherit; color: var(--kj-ink); }
.kj-ingpick__opt:hover { background: var(--kj-green-050); }
.kj-ingpick__count { color: var(--kj-muted); font-size: .8rem; }

/* =========================================================================
   Recipe of the day (meta overlaid on the image) + recipe author line
   ========================================================================= */
.kj-rotd__media { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; }
.kj-rotd__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kj-rotd__meta {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: var(--kj-space-5) var(--kj-space-4) var(--kj-space-3);
	background: linear-gradient(transparent, rgba(0,0,0,.78));
}
.kj-rotd__meta .kj-card__meta { margin: 0; color: #fff; }
.kj-rotd__meta .kj-card__meta span { color: #fff; }
.kj-rotd__meta .kj-rating__meta { color: rgba(255,255,255,.85); }

.kj-recipe__author { margin: 0 0 var(--kj-space-2); font-size: .9rem; color: var(--kj-muted); }
.kj-recipe__author a { color: var(--kj-green-700); text-decoration: none; font-weight: 600; }
.kj-recipe__author a:hover { text-decoration: underline; }

/* =========================================================================
   Kookmodus — full-screen cook mode (assets/js/cook-mode.js)
   ========================================================================= */
.kj-cookmode-launch { text-align: center; margin: var(--kj-space-5) 0; }
.kj-cookmode-btn { font-size: 1.05rem; padding: 12px 28px; }
body.kj-cook-open { overflow: hidden; }
.kj-cook { position: fixed; inset: 0; z-index: 1000; background: var(--kj-ink); color: #fff; display: flex; flex-direction: column; }
.kj-cook__bar { display: flex; align-items: center; gap: var(--kj-space-3); padding: var(--kj-space-3) var(--kj-space-4); border-bottom: 1px solid rgba(255,255,255,.15); }
.kj-cook__title { flex: 1; font-family: var(--kj-font-display); font-weight: 600; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kj-cook__ing-toggle { background: rgba(255,255,255,.12); border: 0; color: #fff; padding: 8px 14px; border-radius: 999px; cursor: pointer; font: inherit; font-size: .9rem; }
.kj-cook__ing-toggle.is-active { background: var(--kj-green); }
.kj-cook__close { background: none; border: 0; color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; padding: 0 8px; }
.kj-cook__timer { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; font-weight: 700; font-size: .95rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kj-cook__timer.is-done { background: var(--kj-green); animation: kj-cook-pulse .6s ease-in-out 4; }
.kj-cook__timer-x { background: none; border: 0; color: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer; padding: 0 0 0 2px; }
.kj-cook__timer-start { margin-top: var(--kj-space-5); }
@keyframes kj-cook-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.09); } }
.kj-cook__progress { height: 4px; background: rgba(255,255,255,.15); }
.kj-cook__progress > span { display: block; height: 100%; background: var(--kj-green); transition: width .2s ease; }
.kj-cook__main { flex: 1; display: flex; overflow: hidden; }
.kj-cook__body { flex: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: var(--kj-space-6) var(--kj-space-5); overflow-y: auto; }
.kj-cook__stepno { color: var(--kj-green-050); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; font-size: .95rem; margin: 0 0 var(--kj-space-4); }
.kj-cook__text { font-size: clamp(1.4rem, 3.5vw, 2.2rem); line-height: 1.4; max-width: 24ch; margin: 0; }
.kj-cook__ingredients { width: 320px; max-width: 45%; background: rgba(0,0,0,.28); border-left: 1px solid rgba(255,255,255,.15); padding: var(--kj-space-5); overflow-y: auto; }
.kj-cook__ingredients[hidden] { display: none; }
.kj-cook__ingredients h3 { margin: 0 0 var(--kj-space-3); }
.kj-cook__ingredients ul { list-style: none; margin: 0; padding: 0; }
.kj-cook__ingredients li { padding: 6px 0; }
.kj-cook__ingredients label { display: flex; gap: var(--kj-space-2); align-items: flex-start; cursor: pointer; color: #fff; }
.kj-cook__ingredients span { color: #fff; }
.kj-cook__ingredients li.is-checked span { text-decoration: line-through; opacity: .55; }
.kj-cook__nav { display: flex; gap: var(--kj-space-3); padding: var(--kj-space-4); border-top: 1px solid rgba(255,255,255,.15); }
.kj-cook__nav .kj-btn { flex: 1; padding: 16px; font-size: 1.1rem; }
.kj-cook__nav .kj-cook__prev:disabled { opacity: .4; cursor: default; }
@media (max-width: 640px) { .kj-cook__ingredients { position: absolute; inset: 52px 0 78px 0; width: auto; max-width: none; } }

/* =========================================================================
   Snelklaar quick chips (template-parts/quick-chips.php)
   ========================================================================= */
/* Dead-end recovery (404 / empty search / empty archive): discovery chips + popular grid */
.kj-recovery { margin-top: var(--kj-space-6); }
.kj-recovery__title { margin: 0 0 var(--kj-space-4); font-size: 1.15rem; }

/* Empty states (favorites, shopping list, meal planner) — see template-parts/empty-state.php */
.kj-empty { text-align: center; padding: var(--kj-space-6) var(--kj-space-4); }
.kj-empty__icon { font-size: 2.75rem; line-height: 1; margin-bottom: var(--kj-space-3); }
.kj-empty__title { font-family: var(--kj-font-display); font-size: 1.15rem; font-weight: 600; color: var(--kj-ink); margin: 0 0 var(--kj-space-2); }
.kj-empty__text { color: var(--kj-muted); margin: 0 auto var(--kj-space-4); max-width: 44ch; }
/* Tighter empty state above the comment form (first-comment invite). */
.kj-comments .kj-empty { padding: var(--kj-space-3) var(--kj-space-4) var(--kj-space-2); }
.kj-comments .kj-empty__icon { font-size: 2rem; }
.kj-comments .kj-empty__text { margin-bottom: 0; }

.kj-quickchips { display: flex; flex-wrap: wrap; gap: var(--kj-space-2); margin-bottom: var(--kj-space-5); }
.kj-quickchip {
	display: inline-block; padding: 8px 16px; border-radius: 999px; background: var(--kj-surface);
	border: 1px solid var(--kj-line); color: var(--kj-ink); text-decoration: none; font-size: .9rem; font-weight: 600;
	transition: border-color .15s, color .15s, background .15s;
}
.kj-quickchip:hover { border-color: var(--kj-green); color: var(--kj-green-700); }
.kj-quickchip--accent { background: var(--kj-green-050); border-color: var(--kj-green); color: var(--kj-green-700); }
.kj-quickchip--accent:hover { background: var(--kj-green); color: #fff; }

/* Porties schalen — serving scaler (assets/js/portions-scaler.js) */
.kj-portions { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 var(--kj-space-4); font-weight: 600; color: var(--kj-ink); }
.kj-portions__btn { width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--kj-line); background: var(--kj-surface); color: var(--kj-green-700); font-size: 1.2rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.kj-portions__btn:hover { border-color: var(--kj-green); }
.kj-portions__count { min-width: 1.6em; text-align: center; }
.kj-units { display: inline-flex; margin: 0 0 var(--kj-space-4); border: 1px solid var(--kj-line); border-radius: 999px; overflow: hidden; }
.kj-units__btn { background: var(--kj-surface); border: 0; padding: 6px 14px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--kj-muted); cursor: pointer; }
.kj-units__btn + .kj-units__btn { border-left: 1px solid var(--kj-line); }
.kj-units__btn.is-active { background: var(--kj-green-700); color: #fff; }

/* =========================================================================
   Mijn KookJij dashboard (page-mijn-kookjij.php)
   ========================================================================= */
.kj-dash-head__inner { display: flex; align-items: center; gap: var(--kj-space-4); flex-wrap: wrap; }
.kj-dash-head__avatar { border-radius: 50%; flex: 0 0 auto; }
.kj-dash-head__intro { flex: 1; min-width: 180px; }
.kj-dash-head__actions { display: flex; gap: var(--kj-space-2); flex-wrap: wrap; }
.kj-dash-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--kj-space-4); margin-bottom: var(--kj-space-6); }
.kj-dash-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--kj-space-2); padding: var(--kj-space-5); background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); box-shadow: var(--kj-shadow); text-decoration: none; color: var(--kj-ink); text-align: center; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.kj-dash-tile:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lift); border-color: var(--kj-green); }
.kj-dash-tile__icon { font-size: 1.9rem; line-height: 1; }
.kj-dash-tile__label { font-weight: 600; font-size: .95rem; }
.kj-dash__heading { font-family: var(--kj-font-display); font-size: 1.25rem; margin: 0 0 var(--kj-space-4); }
.kj-dash-favs { margin-bottom: var(--kj-space-6); }
.kj-dash__list { list-style: none; margin: 0; padding: 0; }
.kj-dash__list li { display: flex; align-items: center; justify-content: space-between; gap: var(--kj-space-3); padding: var(--kj-space-3) 0; border-bottom: 1px solid var(--kj-line); }
.kj-dash__list li:last-child { border-bottom: 0; }
.kj-dash__list-title a { color: var(--kj-ink); text-decoration: none; font-weight: 600; }
.kj-dash__list-title a:hover { color: var(--kj-green-700); }
.kj-status { font-size: .75rem; font-weight: 600; padding: 2px 10px; border-radius: 999px; white-space: nowrap; }
.kj-status--publish { background: var(--kj-green-050); color: var(--kj-green-700); }
.kj-status--pending { background: #fff4e0; color: #a86b00; }
.kj-status--draft { background: #eee; color: var(--kj-muted); }
.kj-status--kj-unconfirmed { background: #fde8e8; color: #9b1c1c; }

/* Member profile card (author.php) */
.kj-profilecard__inner { display: flex; align-items: center; gap: var(--kj-space-4); }
.kj-profilecard__avatar { border-radius: 50%; flex: 0 0 auto; }
.kj-profilecard__meta { flex: 1; }

/* Gekookt! cook-log button (plugin markup .kj-cooked-btn) */
.kj-recipe__cooked { margin-bottom: var(--kj-space-6); }
.kj-recipe__cooked h2 { margin-bottom: var(--kj-space-2); }
.kj-cooked-btn { display: inline-flex; align-items: center; gap: 8px; margin-top: var(--kj-space-3); padding: 10px 18px; border-radius: 999px; border: 1px solid var(--kj-line); background: var(--kj-surface); color: var(--kj-ink); font: inherit; font-weight: 600; cursor: pointer; transition: transform .1s ease, background .15s ease, border-color .15s ease; }
.kj-cooked-btn:hover { border-color: var(--kj-green); }
.kj-cooked-btn.is-cooked { background: var(--kj-green-050); border-color: var(--kj-green); color: var(--kj-green-700); }
.kj-cooked-btn.just-cooked { transform: scale(1.06); }
.kj-dash-cooked { margin-bottom: var(--kj-space-6); }

/* =========================================================================
   Laatst bekeken rail (recently-viewed.js) + Trending deze week
   ========================================================================= */
.kj-recent, .kj-trending { margin-bottom: var(--kj-space-6); }
.kj-recent__heading { font-family: var(--kj-font-display); font-size: 1.25rem; margin: 0 0 var(--kj-space-4); }
.kj-recent__track { display: flex; gap: var(--kj-space-4); overflow-x: auto; padding-bottom: var(--kj-space-2); scroll-snap-type: x mandatory; }
.kj-recent__item { flex: 0 0 160px; scroll-snap-align: start; text-decoration: none; color: var(--kj-ink); background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); overflow: hidden; box-shadow: var(--kj-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.kj-recent__item:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lift); }
.kj-recent__item img, .kj-recent__noimg { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--kj-green-050); }
.kj-recent__title { display: block; padding: var(--kj-space-3); font-size: .875rem; font-weight: 600; line-height: 1.25; }

/* =========================================================================
   Kookprestaties — streak + badges (dashboard)
   ========================================================================= */
.kj-ach { display: flex; flex-direction: column; gap: var(--kj-space-4); }
.kj-ach__streak { display: flex; align-items: center; gap: var(--kj-space-3); font-size: 1.05rem; }
.kj-ach__flame { font-size: 1.6rem; line-height: 1; }
.kj-ach__streak-num { font-size: 1.6rem; font-weight: 800; color: var(--kj-green-700, var(--kj-accent)); }
.kj-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--kj-space-3); }
.kj-badge { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; width: 96px; padding: var(--kj-space-3) var(--kj-space-2); text-align: center; border: 1px solid var(--kj-line); border-radius: var(--kj-radius); background: var(--kj-surface); }
.kj-badge.is-earned { border-color: var(--kj-green-300, var(--kj-accent)); background: var(--kj-green-050, #f3f8f3); }
.kj-badge.is-locked { opacity: .45; filter: grayscale(1); }
.kj-badge__icon { font-size: 1.7rem; line-height: 1; }
.kj-badge__label { font-size: .75rem; font-weight: 600; line-height: 1.2; }

/* Voor jou — personalized feed subtitle (grid reuses .kj-grid) */
.kj-dash-reco { margin-bottom: var(--kj-space-6); }
.kj-dash-reco__sub { margin: calc(var(--kj-space-3) * -1) 0 var(--kj-space-4); }

/* Smaakprofiel form + recipe-page allergen warning */
.kj-dash-diet { margin-bottom: var(--kj-space-6); }
.kj-diet-form__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--kj-space-4); }
.kj-diet-form__set { border: 1px solid var(--kj-line); border-radius: var(--kj-radius); padding: var(--kj-space-3) var(--kj-space-4); margin: 0; }
.kj-diet-form__set legend { font-weight: 700; padding: 0 6px; }
.kj-diet-form__set label { display: flex; align-items: center; gap: 8px; padding: 4px 0; cursor: pointer; }
.kj-diet-form__note { font-size: .85rem; margin: var(--kj-space-4) 0; }
.kj-diet-form__actions { display: flex; align-items: center; gap: var(--kj-space-3); margin: 0; }
.kj-diet-form__msg { font-size: .9rem; color: var(--kj-green-700, var(--kj-accent)); font-weight: 600; }
.kj-allergen-warn { display: flex; gap: 10px; align-items: flex-start; background: #fff4e5; border: 1px solid #f0c36d; border-left: 4px solid #e8912d; border-radius: var(--kj-radius); padding: var(--kj-space-3) var(--kj-space-4); margin: 0 0 var(--kj-space-4); font-size: .92rem; line-height: 1.5; color: #7a4a12; }
.kj-allergen-warn__icon { font-size: 1.2rem; line-height: 1.2; }

/* Nieuwsbrief-voorkeuren (dashboard + tokened e-mail-recipient view) */
.kj-dash-newsletter { margin-bottom: var(--kj-space-6); }
.kj-nl-prefs__row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; cursor: pointer; border-bottom: 1px solid var(--kj-line); font-weight: 400; }
.kj-nl-prefs__row:last-of-type { border-bottom: 0; }
.kj-nl-prefs__row input { margin-top: 4px; flex: none; }
.kj-nl-prefs__actions { margin: var(--kj-space-4) 0 0; }
.kj-nl-prefs__note { font-size: .85rem; margin: var(--kj-space-2) 0 0; }
.kj-nl-prefs__cta { border-top: 1px solid var(--kj-line); margin-top: var(--kj-space-4); padding-top: var(--kj-space-4); font-size: .92rem; }
.kj-nl-reason { background: var(--kj-green-050, #f2f4ec); border-radius: var(--kj-radius); padding: var(--kj-space-3) var(--kj-space-4); margin: 0 0 var(--kj-space-4); }
.kj-nl-reason .kj-nl-prefs__row { border-bottom: 0; padding: 4px 0; }
.kj-nl-reason__text { width: 100%; max-width: 420px; }
.kj-nl__notice { padding: 10px 14px; border-radius: var(--kj-radius); background: var(--kj-green-050, #f2f4ec); font-size: .92rem; margin: 0 0 var(--kj-space-3); }

/* Jouw kookjaar — year-in-review recap */
.kj-dash-recap { margin-bottom: var(--kj-space-6); }
.kj-recap__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(115px, 1fr)); gap: var(--kj-space-3); text-align: center; }
.kj-recap__stat { display: flex; flex-direction: column; gap: 3px; padding: var(--kj-space-4) var(--kj-space-2); border-radius: var(--kj-radius); background: var(--kj-green-050, #f3f8f3); }
.kj-recap__num { font-family: var(--kj-font-display); font-size: 2rem; font-weight: 800; line-height: 1; color: var(--kj-green-700, var(--kj-accent)); }
.kj-recap__label { font-size: .78rem; color: var(--kj-muted); line-height: 1.2; }
.kj-recap__highlight { margin: var(--kj-space-4) 0 0; text-align: center; color: var(--kj-ink); }

/* =========================================================================
   Seizoens-/feestdag landing pages ([kookjij_recipes] + hub)
   ========================================================================= */
.kj-lead { font-size: 1.15rem; line-height: 1.6; color: var(--kj-ink); margin: 0 0 var(--kj-space-5); }
.kj-season-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--kj-space-4); }
.kj-season-list li { margin: 0; }
.kj-season-list a { display: block; padding: var(--kj-space-4); text-align: center; font-weight: 700; text-decoration: none; color: var(--kj-ink); background: var(--kj-surface); border: 1px solid var(--kj-line); border-radius: var(--kj-radius); box-shadow: var(--kj-shadow); transition: transform .15s ease, box-shadow .15s ease; }
.kj-season-list a:hover { transform: translateY(-3px); box-shadow: var(--kj-shadow-lift); }

/* =========================================================================
   FAQ per recept (native <details> accordion) + pairing heading
   ========================================================================= */
.kj-faq { margin: var(--kj-space-6) 0; }
.kj-faq__item { border: 1px solid var(--kj-line); border-radius: var(--kj-radius); margin-bottom: var(--kj-space-3); background: var(--kj-surface); overflow: hidden; }
.kj-faq__q { cursor: pointer; padding: var(--kj-space-3) var(--kj-space-4); padding-right: 2.75rem; font-weight: 700; list-style: none; position: relative; }
.kj-faq__q::-webkit-details-marker { display: none; }
.kj-faq__q::after { content: '+'; position: absolute; right: var(--kj-space-4); top: 50%; transform: translateY(-50%); font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--kj-muted); }
.kj-faq__item[open] .kj-faq__q::after { content: '\2212'; }
.kj-faq__a { padding: 0 var(--kj-space-4) var(--kj-space-4); }
.kj-faq__a p { margin: 0; color: var(--kj-ink); line-height: 1.6; }

/* Utilities */
.kj-mt-0 { margin-top: 0; }
.kj-mb-0 { margin-bottom: 0; }
.kj-muted { color: var(--kj-muted); }

/* Long category intro continues below the grid (SEO text block, research-backed placement). */
.kj-term-about {
	margin: 2rem 0 1rem;
	padding: 1.25rem 1.5rem;
	background: var(--kj-surface);
	border: 1px solid var(--kj-line);
	border-radius: 8px;
}
.kj-term-about h2 { margin-top: 0; }
.kj-term-about p, .kj-term-about li { color: var(--kj-body); }
.kj-pagehead__more { margin: 0.25rem 0 0; font-size: 0.9em; }