/*
 * Zoeken (oktober 2026): de preview tijdens het typen (assets/js/zoeken.js) en de resultatenpagina (search.php).
 *
 * Huisregels uit de ontwerpbrief:
 * - Oranje alleen voor de zoekknop, de belknop en het gekozen resultaat.
 * - Categoriekleuren alleen als herkenning, altijd met icoon en tekst.
 * - Titels en kerngegevens 18px; secundaire informatie (soort, datum, bestandsgrootte) 16px.
 */

/* ---------- Preview ---------- */
.swo-zoek-preview { --swo-zp-line: #EFE8E0; --swo-zp-muted: #5A544E; position: absolute; z-index: 1000; top: 0; left: 0; overflow: hidden; color: var(--swo-color-text); background: #FFFFFF; border: 1px solid #E4DBD0; border-radius: 16px; box-shadow: 0 20px 44px rgba(20, 35, 59, .2), 0 2px 6px rgba(20, 35, 59, .08); font-family: var(--swo-font-primary); text-align: left; }
.swo-zoek-preview[hidden] { display: none; }
.swo-zoek-preview.is-open { animation: swo-zoek-in .2s cubic-bezier(.2, .7, .2, 1) both; }

@keyframes swo-zoek-in {
	from { opacity: 0; transform: translateY(-6px); }
	to { opacity: 1; transform: none; }
}

.swo-zoek-preview__note { margin: 0; padding: 14px 18px 2px; color: var(--swo-zp-muted); font-size: 16px; line-height: 1.45; }
.swo-zoek-preview__list { padding: 6px 0 0; }
.swo-zoek-preview__group { padding-bottom: 6px; }
.swo-zoek-preview__group + .swo-zoek-preview__group { padding-top: 4px; border-top: 1px solid var(--swo-zp-line); }
.swo-zoek-preview__group-title { padding: 10px 18px 4px; color: var(--swo-zp-muted); font-size: 15px; font-weight: 800; line-height: 1.4; letter-spacing: .02em; }
.swo-zoek-preview__count { font-weight: 600; }

.swo-zoek-item { display: flex; align-items: center; gap: 14px; min-height: 62px; padding: 8px 18px; color: var(--swo-color-heading); text-decoration: none; cursor: pointer; }
.swo-zoek-item:hover { color: var(--swo-color-heading); text-decoration: none; }
.swo-zoek-item.is-active, .swo-zoek-preview__all.is-active { background: #FDF1E4; box-shadow: inset 4px 0 0 var(--swo-color-primary-dark); }
.swo-zoek-item__icon { display: inline-flex; flex: none; width: 42px; height: 42px; align-items: center; justify-content: center; color: var(--zi-ink, #6B6058); background: var(--zi-tint, color-mix(in srgb, var(--zi-ink, #6B6058) 13%, #FFFFFF)); border-radius: 50%; }
.swo-zoek-item__icon svg, .swo-zoek-item__icon .kami-icon { display: block; width: 20px; height: 20px; }
.swo-zoek-item__thumb { display: block; flex: none; width: 42px; height: 56px; overflow: hidden; background: #F4EEE7; border: 1px solid #E4DBD0; border-radius: 4px; }
.swo-zoek-item__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.swo-zoek-item__body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.swo-zoek-item__title { font-size: 18px; font-weight: 700; line-height: 1.3; overflow-wrap: anywhere; }
.swo-zoek-item__meta { display: -webkit-box; margin-top: 2px; overflow: hidden; color: var(--swo-zp-muted); font-size: 16px; line-height: 1.4; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }

.swo-zoek-preview__all { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 12px 18px; color: var(--swo-color-heading); background: #FBF6EF; border-top: 1px solid var(--swo-zp-line); font-size: 17px; font-weight: 800; line-height: 1.3; text-decoration: none; }
.swo-zoek-preview__all:hover { color: var(--swo-color-heading); text-decoration: none; }
.swo-zoek-preview__all svg { flex: none; width: 20px; height: 20px; color: var(--swo-color-primary-dark); transition: transform .2s ease; }
.swo-zoek-preview__all.is-active svg { transform: translateX(3px); }

.swo-zoek-preview__empty { padding: 16px 18px 18px; color: var(--swo-color-text); font-size: 17px; line-height: 1.5; }
.swo-zoek-preview__empty p { margin: 0; }
.swo-zoek-preview__empty p + p { margin-top: 4px; color: var(--swo-zp-muted); }
.swo-zoek-preview__empty strong { color: var(--swo-color-heading); }
.swo-zoek-preview__empty a { color: var(--swo-color-heading); font-weight: 700; text-decoration: underline; text-decoration-color: rgba(163, 71, 0, .55); text-decoration-thickness: 2px; text-underline-offset: 3px; white-space: nowrap; }

.swo-zoek-item mark, .swo-zoeken mark { padding: 0 1px; color: inherit; background: #FDE3C8; border-radius: 3px; }

/* ---------- Resultatenpagina ---------- */
.swo-zoeken { --swo-zk-line: #E4DBD0; --swo-zk-muted: #5A544E; --swo-zk-body: #3A3530; color: var(--swo-color-text); background-color: var(--swo-color-background-soft); background-image: var(--swo-motif); background-size: var(--swo-motif-size); background-position: var(--swo-motif-position); }
.swo-zoeken__shell { width: 100%; max-width: 1000px; margin: 0 auto; padding: 32px 24px 72px; }

.swo-zoeken__crumbs { display: flex; flex-wrap: wrap; gap: 4px 8px; margin: 0 0 14px; color: var(--swo-zk-muted); font-size: 16px; line-height: 1.5; }
.swo-zoeken__crumbs a { color: var(--swo-zk-muted); text-decoration: underline; text-underline-offset: 3px; }
.swo-zoeken__crumbs a:hover { color: var(--swo-color-heading); }

.swo-zoeken__title { margin: 0; color: var(--swo-color-heading); font-size: clamp(36px, 4vw, 50px); font-weight: 800; line-height: 1.1; letter-spacing: -.02em; }

.swo-zoeken__form { margin: 22px 0 0; }
.swo-zoeken__label { display: block; margin: 0 0 8px; color: var(--swo-color-heading); font-size: 18px; font-weight: 700; line-height: 1.4; }
.swo-zoeken__field { display: flex; align-items: center; gap: 10px; min-height: 66px; padding: 7px 7px 7px 20px; background: #FFFFFF; border: 2px solid #6E6862; border-radius: 999px; box-shadow: 0 6px 18px rgba(70, 45, 20, .07); transition: border-color .2s ease; }
.swo-zoeken__field:hover { border-color: var(--swo-color-heading); }
.swo-zoeken__field:focus-within { border-color: var(--swo-color-focus); outline: 3px solid var(--swo-color-focus); outline-offset: 2px; }
.swo-zoeken__field > .swo-icon, .swo-zoeken__field > .kami-icon { flex: none; width: 24px; height: 24px; color: #6B6058; }
.swo-zoeken__input { flex: 1 1 auto; width: 100%; min-width: 0; min-height: 48px; padding: 4px 0; color: var(--swo-color-heading); background: transparent; border: 0; outline: 0; font-family: inherit; font-size: 19px; line-height: 1.4; }
.swo-zoeken__input::placeholder { color: #6B6560; opacity: 1; }
.swo-zoeken__input::-webkit-search-decoration, .swo-zoeken__input::-webkit-search-results-decoration { -webkit-appearance: none; appearance: none; }
.swo-zoeken__button { display: inline-flex; flex: none; align-items: center; justify-content: center; gap: 8px; min-width: 140px; min-height: 50px; padding: 0 24px; color: var(--swo-color-heading); background: var(--swo-color-primary); border: 2px solid var(--swo-color-primary); border-radius: 999px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background-color .2s ease, border-color .2s ease; }
.swo-zoeken__button:hover { background: var(--swo-color-primary-hover); border-color: var(--swo-color-primary-hover); }
.swo-zoeken__button:focus-visible { outline: 3px solid var(--swo-color-focus); outline-offset: 3px; }

.swo-zoeken__summary { margin: 34px 0 0; color: var(--swo-color-heading); font-size: 26px; font-weight: 800; line-height: 1.3; }
.swo-zoeken__summary:focus { outline: none; }
.swo-zoeken__note { margin: 6px 0 0; color: var(--swo-zk-body); font-size: 18px; line-height: 1.55; }

.swo-zoeken__group { margin: 18px 0 0; padding: 22px 28px 10px; background: #FFFFFF; border: 1px solid var(--swo-zk-line); border-radius: 16px; }
.swo-zoeken__summary + .swo-zoeken__group, .swo-zoeken__note + .swo-zoeken__group { margin-top: 20px; }
.swo-zoeken__group-title { display: flex; align-items: baseline; gap: 8px; margin: 0 0 6px; color: var(--swo-color-heading); font-size: 22px; font-weight: 800; line-height: 1.3; }
.swo-zoeken__group-count { color: var(--swo-zk-muted); font-size: 17px; font-weight: 600; }

.swo-zoeken__list { margin: 0; padding: 0; list-style: none; }
.swo-zoeken__result { position: relative; display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 4px 16px; align-items: start; margin: 0 -14px; padding: 16px 14px; border-top: 1px solid var(--swo-zk-line); border-radius: 10px; transition: background-color .2s ease; }
.swo-zoeken__result:first-child { border-top: 0; }
.swo-zoeken__result:hover { background: #FBF6EF; }
.swo-zoeken__icon { display: inline-flex; width: 46px; height: 46px; align-items: center; justify-content: center; color: var(--zi-ink, #6B6058); background: var(--zi-tint, color-mix(in srgb, var(--zi-ink, #6B6058) 13%, #FFFFFF)); border-radius: 50%; }
.swo-zoeken__icon svg, .swo-zoeken__icon .kami-icon { display: block; width: 22px; height: 22px; }
.swo-zoeken__thumb { display: block; width: 46px; height: 62px; overflow: hidden; background: #F4EEE7; border: 1px solid var(--swo-zk-line); border-radius: 4px; }
.swo-zoeken__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; }
.swo-zoeken__body { min-width: 0; }
.swo-zoeken__result-title { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.3; }
.swo-zoeken__result-title a { color: var(--swo-color-heading); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 4px; transition: color .2s ease, text-decoration-color .2s ease; }
/* De hele regel is aanklikbaar. */
.swo-zoeken__result-title a::after { position: absolute; inset: 0; content: ""; border-radius: inherit; }
.swo-zoeken__result:hover .swo-zoeken__result-title a, .swo-zoeken__result-title a:focus-visible { color: var(--swo-color-primary-dark); text-decoration-color: currentColor; }
.swo-zoeken__result-title a:focus-visible { outline: none; }
.swo-zoeken__result-title a:focus-visible::after { outline: 3px solid var(--swo-color-focus); outline-offset: 2px; }
.swo-zoeken__meta { margin: 3px 0 0; color: var(--swo-zk-muted); font-size: 16px; line-height: 1.45; }
.swo-zoeken__desc { margin: 4px 0 0; color: var(--swo-zk-body); font-size: 17px; line-height: 1.55; }

/* ---------- Niets gevonden, en suggesties ---------- */
.swo-zoeken__empty { margin: 34px 0 0; padding: 26px 28px; background: #FFFFFF; border: 1px solid var(--swo-zk-line); border-radius: 16px; }
.swo-zoeken__empty h2 { margin: 0; color: var(--swo-color-heading); font-size: 24px; font-weight: 800; line-height: 1.3; }
.swo-zoeken__tips { margin: 10px 0 0; padding-left: 22px; color: var(--swo-zk-body); font-size: 18px; line-height: 1.6; }
.swo-zoeken__suggest { margin: 30px 0 0; }
.swo-zoeken__empty .swo-zoeken__suggest { margin-top: 22px; }
.swo-zoeken__suggest-title { margin: 0 0 10px; color: var(--swo-color-heading); font-size: 18px; font-weight: 700; line-height: 1.4; }
.swo-zoeken__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
.swo-zoeken__chips a { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 8px 18px; color: var(--swo-color-heading); background: #FFFFFF; border: 2px solid #9C8F82; border-radius: 999px; font-size: 18px; font-weight: 700; line-height: 1.25; text-decoration: none; transition: border-color .2s ease, transform .2s ease; }
.swo-zoeken__chips a:hover { color: var(--swo-color-heading); border-color: var(--swo-color-heading); text-decoration: none; transform: translateY(-1px); }
.swo-zoeken__chips svg { width: 18px; height: 18px; color: #6B6058; }

.swo-zoeken__help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; margin: 24px 0 0; padding: 20px 0 0; border-top: 1px solid var(--swo-zk-line); }
.swo-zoeken__help p { margin: 0; color: var(--swo-zk-body); font-size: 18px; line-height: 1.5; }
.swo-zoeken__help strong { display: block; color: var(--swo-color-heading); }
.swo-zoeken__call { display: inline-flex; align-items: center; gap: 10px; min-height: 52px; padding: 10px 22px; color: var(--swo-color-heading); background: var(--swo-color-primary); border: 2px solid var(--swo-color-primary); border-radius: 10px; font-size: 18px; font-weight: 700; line-height: 1.2; text-decoration: none; white-space: nowrap; transition: background-color .2s ease; }
.swo-zoeken__call:hover { color: var(--swo-color-heading); background: var(--swo-color-primary-hover); border-color: var(--swo-color-primary-hover); text-decoration: none; }
.swo-zoeken__call svg { width: 20px; height: 20px; }

/* ---------- Mobiel ---------- */
@media (max-width: 640px) {
	.swo-zoeken__shell { padding: 20px 16px 56px; }
	.swo-zoeken__field { flex-wrap: wrap; padding: 10px 10px 10px 16px; border-radius: 22px; }
	.swo-zoeken__input { flex-basis: calc(100% - 40px); font-size: 18px; }
	.swo-zoeken__button { width: 100%; }
	.swo-zoeken__summary { margin-top: 26px; font-size: 23px; }
	.swo-zoeken__group { padding: 18px 16px 6px; border-radius: 14px; }
	.swo-zoeken__group-title { font-size: 20px; }
	.swo-zoeken__result { grid-template-columns: 40px minmax(0, 1fr); gap: 4px 12px; margin: 0 -8px; padding: 14px 8px; }
	.swo-zoeken__icon { width: 40px; height: 40px; }
	.swo-zoeken__thumb { width: 40px; height: 54px; }
	.swo-zoeken__result-title { font-size: 19px; }
	.swo-zoeken__empty { padding: 20px 18px; border-radius: 14px; }
	.swo-zoek-item { padding: 8px 14px; gap: 12px; }
	.swo-zoek-preview__group-title, .swo-zoek-preview__note { padding-right: 14px; padding-left: 14px; }
	.swo-zoek-preview__all { padding-right: 14px; padding-left: 14px; }
}

/* ---------- Minder beweging ---------- */
@media (prefers-reduced-motion: reduce) {
	.swo-zoek-preview.is-open { animation: none; }
	.swo-zoek-preview__all svg, .swo-zoeken__field, .swo-zoeken__button, .swo-zoeken__result, .swo-zoeken__result-title a, .swo-zoeken__chips a, .swo-zoeken__call { transition: none; }
	.swo-zoeken__chips a:hover { transform: none; }
}

/* ---------- Geforceerde kleuren ---------- */
@media (forced-colors: active) {
	.swo-zoek-preview, .swo-zoeken__group, .swo-zoeken__empty { border: 2px solid CanvasText; }
	.swo-zoek-item.is-active, .swo-zoek-preview__all.is-active { outline: 3px solid Highlight; outline-offset: -3px; }
	.swo-zoek-item mark, .swo-zoeken mark { color: HighlightText; background: Highlight; }
}