/* ==========================================================================
   Receptenoverzicht: Alle recepten, categorie, tag en zoeken.
   Sjabloon: template-parts/archive/*.php, script: assets/js/archive.js.
   Laden na main.css (tokens, .card, .card-grid, .pagination, .search-form).

   AdPushup (advertenties.md): voorouders van .recent-posts en #sidebar krijgen
   geen overflow: hidden, transform, filter of contain (flying carpet).
   ========================================================================== */

/* ---------- 1. Kop ---------- */
.listing-head {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding-top: 18px;
	text-align: center;
}
.listing-head > * { margin: 0; }
.listing-head__title.page-title { margin: 0; font-size: 28px; line-height: 30px; }
.listing-head__intro {
	max-width: 640px;
	font-size: 15px;
	line-height: 1.55;
}
.listing-search { width: 100%; max-width: 600px; margin-top: 4px; text-align: left; }

@media (min-width: 1024px) {
	.listing-head { gap: 14px; padding-top: 28px; }
	.listing-head__title.page-title { font-size: 44px; line-height: 46px; }
	.listing-head__intro { font-size: 16px; line-height: 1.6; }
	.listing-search { height: 58px; padding: 0 7px 0 24px; margin-top: 6px; }
	.listing-search .search-form__submit { width: 44px; height: 44px; }
}

/* Kruimelpad (zelfde stijl als op het recept). */
.breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	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 { color: var(--c-muted); }
.breadcrumbs a:hover { color: var(--c-navy); }
.breadcrumbs [aria-current] { color: var(--c-text); }

/* ---------- 2. Chips (snelfilters, gekozen filters) ---------- */
.chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-dark);
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
	text-decoration: none;
	white-space: nowrap;
	transition: border-color 0.15s, background-color 0.15s;
}
.chip:hover { border-color: var(--c-navy); color: var(--c-navy); }
.chip:active { background: var(--c-soft); }
/* Gekozen = navy (besluit 3 okt: navy alleen voor kleine 'actief'-staten). */
.chip.is-active { border-color: var(--c-navy); background: var(--c-navy); color: #fff; font-weight: 600; }
.chip.is-active:hover { background: var(--c-navy-hover); color: #fff; }
.chip__x { font-size: 14px; }

/* Mobiel: één rij die horizontaal scrolt, tot aan de schermrand. */
.listing-chips {
	align-self: stretch;
	margin: 6px calc(-1 * var(--gutter)) 0;
}
.listing-chips__list {
	display: flex;
	gap: var(--s-2);
	margin: 0;
	padding: 2px var(--gutter) 4px;
	list-style: none;
	overflow-x: auto;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.listing-chips__list::-webkit-scrollbar { display: none; }
.listing-chips__list > li { flex-shrink: 0; }

@media (min-width: 1024px) {
	.listing-chips { margin: 4px 0 0; }
	.listing-chips__list { flex-wrap: wrap; justify-content: center; padding: 0; overflow: visible; }
}

/* ---------- 3. Indeling: filterkolom + raster (+ #sidebar) ---------- */
.listing-body { padding-top: var(--s-4); }
.listing-main { min-width: 0; }

@media (min-width: 1024px) {
	.listing-body { padding-top: 40px; }
	.listing.has-filters .listing-body {
		display: grid;
		grid-template-columns: 300px minmax(0, 1fr);
		grid-template-rows: auto 1fr;
		grid-template-areas:
			"filters main"
			"sidebar main";
		column-gap: 48px;
		align-items: start;
	}
	.listing.has-filters .filters { grid-area: filters; }
	.listing.has-filters .listing-main { grid-area: main; }
	.listing.has-filters .listing-sidebar { grid-area: sidebar; }
}
/* Kleine laptops: smallere filterkolom, anders worden de kaarten te smal.
   Niet op Alle recepten: daar moet de 300x600 uit #sidebar in de kolom passen. */
@media (min-width: 1024px) and (max-width: 1279px) {
	.listing.has-filters:not(.has-sidebar) .listing-body { grid-template-columns: 240px minmax(0, 1fr); column-gap: 32px; }
}

/* ---------- 4. Aantal + sorteren ---------- */
.listing-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-4);
	padding-bottom: var(--s-3);
	margin-bottom: var(--s-4);
	border-bottom: 1px solid var(--c-border-light);
}
.listing-toolbar__count { margin: 0; font-size: 14px; color: var(--c-muted); }

.sort { position: relative; }
.sort__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	padding: 0 14px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: #fff;
	font-size: 14px;
	font-weight: 500;
	color: var(--c-dark);
	cursor: pointer;
	list-style: none;
	user-select: none;
}
.sort__toggle::-webkit-details-marker { display: none; }
.sort__toggle:hover { border-color: var(--c-navy); }
.sort__label { color: var(--c-muted); font-weight: 400; }
.sort[open] .sort__toggle .icon { transform: rotate(180deg); }
.sort__menu {
	position: absolute;
	z-index: 20;
	top: calc(100% + 6px);
	right: 0;
	min-width: 190px;
	margin: 0;
	padding: 6px;
	list-style: none;
	border: 1px solid var(--c-border-light);
	border-radius: var(--r-md);
	background: #fff;
	box-shadow: var(--shadow-float);
}
.sort__option {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: var(--r-sm);
	font-size: 15px;
	color: var(--c-dark);
	text-decoration: none;
}
.sort__option:hover { background: var(--c-soft); color: var(--c-navy); }
.sort__option[aria-current] { font-weight: 700; color: var(--c-navy); }
.sort__option[aria-current]::after { content: "✓"; margin-left: auto; padding-left: 12px; }

@media (min-width: 1024px) {
	.listing-toolbar { margin-bottom: 24px; padding-bottom: 14px; }
	.listing-toolbar__count { font-size: 14px; }
}

/* ---------- 5. Paginering + telling ---------- */
.listing-pagination {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--s-3);
	margin: var(--s-8) 0 0;
}
.listing-pagination .nav-links { gap: 4px; }
.listing-pagination .page-numbers { border-color: transparent; padding: 0 10px; }
.listing-pagination .page-numbers.prev,
.listing-pagination .page-numbers.next { border: 1.5px solid var(--c-dark); padding: 0 16px; font-weight: 600; }
.listing-pagination .page-numbers.next { margin-left: 4px; }
.listing-pagination .page-numbers.prev { margin-right: 4px; }
.listing-pagination__count { margin: 0; font-size: 14px; color: var(--c-muted); }
/* Mobiel: nummers op de eerste rij, Vorige/Volgende samen eronder (anders breekt de rij rommelig af). */
@media (max-width: 599px) {
	.listing-pagination .nav-links { row-gap: 10px; }
	.listing-pagination .nav-links::after { content: ""; order: 1; flex-basis: 100%; height: 0; }
	.listing-pagination .page-numbers.prev,
	.listing-pagination .page-numbers.next { order: 2; margin: 0 4px; }
}
@media (max-width: 359px) {
	.listing-pagination .page-numbers { min-width: 40px; padding: 0 6px; }
}

/* ---------- 6. Niets gevonden ---------- */
.listing-empty {
	display: flex;
	flex-direction: column;
	gap: var(--s-3);
	padding: var(--s-6) 0 var(--s-4);
}
.listing-empty > * { margin: 0; }
.listing-empty__title { font-size: 22px; line-height: 26px; }
.listing-empty__tip { font-size: 15px; line-height: 1.6; }
.listing-empty .search-form { max-width: 480px; }

/* ---------- 7. Categorietekst onder het raster (grijs blok, "Lees verder") ---------- */
.term-text {
	margin-top: var(--s-8);
	padding: 20px;
	border-radius: var(--r-lg);
	background: var(--c-warm);
	font-size: 15px;
	line-height: 1.65;
}
.term-text__body > :last-child { margin-bottom: 0; }
/* Alleen met JS ingeklapt; de volledige tekst staat altijd in de HTML. */
.js .term-text__body.is-clamped {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 4;
	overflow: hidden;
}
.term-text__more {
	min-height: 44px;
	margin-top: var(--s-2);
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-link);
	cursor: pointer;
}
.term-text__more:hover { text-decoration: underline; }
@media (min-width: 1024px) {
	.term-text { margin-top: var(--s-12); padding: 28px 32px; font-size: 16px; }
}

/* ---------- 8. #sidebar op Alle recepten ---------- */
.listing-sidebar {
	display: flex;
	flex-direction: column;
	gap: var(--s-6);
	margin-top: var(--s-8);
}
.listing-sidebar > .widget_custom_html { width: 100%; text-align: center; }
@media (min-width: 1024px) {
	.listing-sidebar { margin-top: var(--s-8); }
	/* qatrh = 300x600: ruimte vasthouden tegen verspringen. */
	.listing-sidebar > #custom_html-7 { min-height: 600px; }
}

/* ---------- 9. Filterpaneel ---------- */
.filters__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--s-3);
}
.filters__title { margin: 0; font-size: 20px; line-height: 24px; }
.filters__handle { display: none; }
.filters__clear {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	font-size: 14px;
	font-weight: 600;
	color: var(--c-nav);
	text-decoration: underline;
	text-underline-offset: 3px;
}
.filters__clear:hover { color: var(--c-navy); }

.fgroup {
	min-width: 0;
	margin: 0;
	padding: 18px 0;
	border: 0;
	border-bottom: 1px solid var(--c-border-light);
}
.fgroup:last-of-type { border-bottom: 0; }
.fgroup__title {
	display: block;
	float: left; /* legend: geen ingesprongen rand */
	width: 100%;
	margin: 0 0 12px;
	padding: 0;
	font-size: 14px;
	line-height: 18px;
	font-weight: 700;
	letter-spacing: normal;
	text-transform: none;
	color: var(--c-nav);
}
.fgroup > :not(legend) { clear: both; }
.fgroup__options { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.js .fgroup__more:not(.is-open) { display: none; }
.fgroup__more { margin-top: var(--s-2); }
.fgroup__toggle {
	min-height: 44px;
	margin-top: 4px;
	padding: 0;
	border: 0;
	background: none;
	font-size: 14px;
	font-weight: 700;
	color: var(--c-link);
	cursor: pointer;
}
.fgroup__toggle:hover { text-decoration: underline; }

/* Optie (echte checkbox). Mobiel als chip, desktop als vinkjeslijst. */
.fopt { position: relative; display: inline-flex; cursor: pointer; }
.fopt__input {
	position: absolute;
	opacity: 0;
	width: 1px;
	height: 1px;
	margin: 0;
	pointer-events: none;
}
.fopt__label,
.fchip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: 0 16px;
	border: 1px solid var(--c-border);
	border-radius: var(--r-pill);
	background: #fff;
	color: var(--c-dark);
	font-size: 14px;
	line-height: 1;
	font-weight: 500;
	transition: border-color 0.15s, background-color 0.15s;
	user-select: none;
}
.fopt:hover .fopt__label,
.fchip:hover { border-color: var(--c-navy); }
.fopt__input:checked + .fopt__label,
.fchip[aria-pressed="true"] {
	border-color: var(--c-navy);
	background: var(--c-navy);
	color: #fff;
	font-weight: 600;
}
.fopt__input:focus-visible + .fopt__label { outline: 2px solid var(--c-navy); outline-offset: 2px; }
/* Aantal binnen de huidige resultaten (review Quint 3 okt). */
.fopt__count { margin-left: 6px; font-size: 14px; font-weight: 400; color: #6B7280; }
.fopt__input:checked + .fopt__label .fopt__count { color: rgba(255, 255, 255, 0.75); }
.fopt[hidden], .fgroup[hidden] { display: none !important; }
/* Bereidingstijd zonder resultaat: uitgeschakeld i.p.v. verborgen, zodat de rij gelijk blijft. */
.fchip:disabled { border-color: var(--c-border-light); background: var(--c-soft); color: #A3A9B3; cursor: not-allowed; }
.fchip:disabled:hover { border-color: var(--c-border-light); }
.filters.is-counting .filters__apply { opacity: 0.7; }
.fchip { cursor: pointer; font-family: inherit; }
.fchip:active { background: var(--c-soft); }
.fchip[aria-pressed="true"]:active { background: var(--c-navy-hover); }

/* Twee per rij (ook mobiel), zodat het aantal erbij past (F3, review Quint 4 okt). */
.ftime { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.ftime .fchip { padding: 0 8px; white-space: nowrap; }
.fchip__count { margin-left: 6px; font-size: 14px; font-weight: 400; color: #6B7280; }
.fchip[aria-pressed="true"] .fchip__count { color: rgba(255, 255, 255, 0.75); }
.fchip:disabled .fchip__count { color: inherit; }
.filters.is-loading .fchip__count { opacity: 0.5; }

/* Schuifbalk koolhydraten */
.fgroup--range { display: flex; flex-direction: column; gap: 10px; }
.fgroup--range .fgroup__title { float: none; margin: 0; }
.frange__scale { display: flex; justify-content: space-between; font-size: 14px; color: var(--c-muted); }
.frange__scale strong { color: var(--c-ink); }
.frange {
	width: 100%;
	height: 44px;
	margin: 0;
	background: transparent;
	accent-color: var(--c-navy);
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	--fill: 100%;
}
.frange:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; border-radius: 4px; }
.frange::-webkit-slider-runnable-track {
	height: 3px;
	border-radius: 2px;
	background: linear-gradient(to right, var(--c-navy) var(--fill), var(--c-border) var(--fill));
}
.frange::-moz-range-track { height: 3px; border-radius: 2px; background: var(--c-border); }
.frange::-moz-range-progress { height: 3px; border-radius: 2px; background: var(--c-navy); }
.frange::-webkit-slider-thumb {
	-webkit-appearance: none;
	width: 24px;
	height: 24px;
	margin-top: -10.5px;
	border: 2px solid var(--c-navy);
	border-radius: 50%;
	background: #fff;
}
.frange::-moz-range-thumb {
	width: 20px;
	height: 20px;
	border: 2px solid var(--c-navy);
	border-radius: 50%;
	background: #fff;
}

.filters__foot {
	display: flex;
	align-items: center;
	gap: var(--s-3);
}
.filters__apply { flex: 1; min-height: 52px; }
.filters__nojs { margin: var(--s-4) 0 0; }

/* Zwevende knop "Filteren (n)" (alleen mobiel, met JS). */
.filters-fab { display: none; }
.filters-backdrop { display: none; }

/* --- Mobiel: paneel van onderen --- */
@media (max-width: 1023px) {
	/* Zonder JS: paneel gewoon onder de lijst, met een knop Toon. */
	html:not(.js) .filters { margin-top: var(--s-8); padding-top: var(--s-4); border-top: 1px solid var(--c-border-light); }
	html:not(.js) .filters__close,
	html:not(.js) .filters__clear--head { display: none; }
	html:not(.js) .listing.has-filters .listing-body { display: flex; flex-direction: column; }
	html:not(.js) .listing.has-filters .filters { order: 2; }

	.js .filters {
		position: fixed;
		z-index: 200;
		left: 0;
		right: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		max-height: min(92vh, 92dvh);
		border-radius: 22px 22px 0 0;
		background: #fff;
		box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.18);
		transform: translateY(105%);
		visibility: hidden;
		transition: transform 0.25s ease-out, visibility 0s linear 0.25s;
	}
	.js .filters.is-open {
		transform: translateY(0);
		visibility: visible;
		transition: transform 0.25s ease-out, visibility 0s;
	}
	.js .filters__head {
		position: relative;
		flex-shrink: 0;
		padding: 18px 6px 8px 20px;
		border-bottom: 1px solid var(--c-border-light);
	}
	.js .filters__handle {
		display: block;
		position: absolute;
		top: 8px;
		left: 50%;
		width: 40px;
		height: 5px;
		margin-left: -20px;
		border-radius: 3px;
		background: #d5d8dd;
	}
	.js .filters__title { font-size: 22px; }
	.js .filters__clear--head { display: none; }
	.js .filters__body {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 20px;
	}
	.js .filters__foot {
		flex-shrink: 0;
		padding: 12px 20px calc(16px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--c-border-light);
	}

	.js .filters-backdrop:not([hidden]) {
		display: block;
		position: fixed;
		z-index: 199;
		inset: 0;
		background: rgba(26, 32, 40, 0.45);
	}

	.js .filters-fab {
		position: fixed;
		z-index: 60;
		left: 50%;
		bottom: calc(20px + env(safe-area-inset-bottom));
		display: inline-flex;
		align-items: center;
		gap: 10px;
		min-height: 50px;
		padding: 0 22px;
		border: 1px solid var(--c-border);
		border-radius: var(--r-pill);
		background: #fff;
		color: var(--c-dark);
		font-size: 15px;
		font-weight: 600;
		box-shadow: var(--shadow-float);
		transform: translateX(-50%);
	}
	.js .filters-fab[aria-expanded="true"] { visibility: hidden; }
	.filters-fab__count {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		min-width: 22px;
		height: 22px;
		padding: 0 6px;
		border-radius: 11px;
		background: var(--c-navy);
		color: #fff;
		font-size: 14px;
	}
	/* Ruimte zodat de zwevende knop de paginering niet bedekt. */
	.js .listing.has-filters { padding-bottom: 72px; }
}

/* --- Desktop: kolom links, vinkjes --- */
@media (min-width: 1024px) {
	.filters__close,
	.filters__handle,
	.filters__foot { display: none; }
	html:not(.js) .filters__foot { display: none; }
	.filters__head { padding-bottom: 14px; border-bottom: 1.5px solid var(--c-dark); }

	.filters .fgroup__options { flex-direction: column; flex-wrap: nowrap; gap: 0; }
	.fopt { display: flex; align-items: center; gap: 10px; min-height: 44px; }
	.fopt__label { flex: 1 1 auto; justify-content: space-between; }
	.fopt__count { margin-left: auto; padding-left: 8px; }
	.fopt__input:checked + .fopt__label .fopt__count { color: #6B7280; }
	.fopt__input {
		position: static;
		opacity: 1;
		width: 18px;
		height: 18px;
		pointer-events: auto;
		accent-color: var(--c-navy);
		cursor: pointer;
	}
	.fopt__label,
	.fopt__input:checked + .fopt__label {
		min-height: 0;
		padding: 0;
		border: 0;
		background: none;
		color: var(--c-dark);
		font-size: 15px;
		font-weight: 400;
	}
	.fopt:hover .fopt__label { color: var(--c-navy); }
	.fopt__input:focus-visible + .fopt__label { outline: none; }
	.fopt__input:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	.js .filters,
	.js .filters.is-open { transition: none; }
}

/* ---------- 10. Filteren zonder herladen (assets/js/archive.js) ---------- */

/* Na paginering naar de bovenkant van de resultaten (bovenop html scroll-padding-top; de header is niet sticky). */
.listing-main { scroll-margin-top: 8px; }
#listing-count:focus { outline: none; }
#listing-count:focus-visible { outline: 2px solid var(--c-navy); outline-offset: 4px; }

/* Laden: bestaande kaarten vervagen en de foto's pulseren zacht (pas na 120 ms,
   zodat een snelle verversing niet knippert). */
.listing-main.is-loading .listing-grid > article,
.listing-main.is-loading .listing-empty,
.listing-main.is-loading .listing-pagination {
	opacity: 0.5;
	pointer-events: none;
	transition: opacity 0.2s ease 0.12s;
}
.listing-main.is-loading .listing-grid > article .card__media {
	background: var(--c-placeholder);
	animation: lcc-listing-pulse 1.2s ease-in-out 0.12s infinite;
}
.listing-main.is-loading .listing-toolbar__count { opacity: 0.6; transition: opacity 0.2s ease 0.12s; }
.filters.is-loading .fopt__count { opacity: 0.5; }

@keyframes lcc-listing-pulse {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.5; }
}

@media (prefers-reduced-motion: reduce) {
	.listing-main.is-loading .listing-grid > article .card__media { animation: none; }
	.listing-main.is-loading .listing-grid > article,
	.listing-main.is-loading .listing-empty,
	.listing-main.is-loading .listing-pagination,
	.listing-main.is-loading .listing-toolbar__count { transition: none; }
}

/* ---------- Zoeken: correctie en lege staat ---------- */
.search-correction {
	margin: var(--s-2) 0 0;
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-text);
}
.search-correction a,
.search-popular__link {
	color: var(--c-link);
	font-weight: 700;
	text-decoration: none;
}
.search-correction a:hover,
.search-correction a:focus-visible { text-decoration: underline; }
.listing-empty__subtitle {
	margin: var(--s-2) 0 var(--s-2);
	font-size: 15px;
	font-weight: 600;
	color: var(--c-ink);
}
.search-popular {
	display: flex;
	flex-wrap: wrap;
	gap: var(--s-2);
	margin: 0;
	padding: 0;
	list-style: none;
}
.search-popular__link {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 var(--s-4);
	border-radius: var(--r-pill);
	background: var(--c-blue-soft);
	font-size: 14px;
}
.search-popular__link:hover,
.search-popular__link:focus-visible { background: var(--c-blue); }