/* ════════════════════════════════════════════════════════════════════════
   UitKerst — templates (A6, 20-10-2026). Zelfvoorzienend, mobiel eerst.
   Sitekleur via --color-primary (DS v4), font via --btn-font; één seizoens-
   accent (goud) uitsluitend voor "Gesponsord". Zie docs/design/2026-10-20-a6-templates.md.
   ════════════════════════════════════════════════════════════════════════ */
.uk {
	--uk-inkt: #16212B; --uk-zacht: #4B5A66; --uk-rand: #E2E6E9; --uk-mist: #F6F7F5; --uk-wit: #FFFFFF;
	--uk-primair: var(--color-primary, #0B7285);
	--uk-primair-dk: var(--color-primary-dark, #0A6275);
	--uk-primair-tint: color-mix(in srgb, var(--uk-primair) 12%, white);
	--uk-goud: #8A6A1F; --uk-goud-bg: #FBF4E3;
	--uk-font: var(--btn-font, system-ui, -apple-system, 'Segoe UI', sans-serif);
	color: var(--uk-inkt); font-family: var(--uk-font);
	max-width: 1120px; margin: 0 auto; padding: 1.25rem 1.1rem 3.5rem;
	-webkit-text-size-adjust: 100%;
}
.uk *, .uk *::before, .uk *::after { box-sizing: border-box; }
.uk a { color: var(--uk-primair-dk); }
.uk a:focus-visible, .uk button:focus-visible, .uk select:focus-visible, .uk input:focus-visible { outline: 2px solid var(--uk-primair); outline-offset: 2px; }
.uk .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* kruimels */
.uk-kruimels { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; font-size: .88rem; color: var(--uk-zacht); }
.uk-kruimels a { text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; }
.uk-kruimels span[aria-current] { display: inline-flex; align-items: center; min-height: 44px; }

/* hero */
.uk-hero { margin: 0 0 1.4rem; max-width: 64ch; }
.uk-hero__titel { margin: 0 0 .7rem; font-size: clamp(1.8rem, 1.4rem + 1.8vw, 2.7rem); font-weight: 800; line-height: 1.08; letter-spacing: -.015em; }
.uk-hero__antwoord { margin: 0 0 .5rem; font-size: 1.02rem; line-height: 1.6; max-width: 58ch; }
.uk-byline { margin: 0; font-size: .85rem; color: var(--uk-zacht); }
.uk-zaak, .uk-kaart__zaak { margin: 0 0 .25rem; font-weight: 700; }
.uk-kaart__soort { font-weight: 500; color: var(--uk-zacht); }
.uk-adres { margin: .4rem 0 0; color: var(--uk-zacht); }

/* categorie-links en dag-links */
.uk-cats, .uk-dagen { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.2rem; align-items: center; }
.uk-cats__item, .uk-dagen a {
	display: inline-flex; align-items: center; gap: .4em; min-height: 44px; padding: .45rem .9rem;
	border: 1.5px solid var(--uk-rand); border-radius: 999px; background: var(--uk-wit);
	color: var(--uk-zacht); font-size: .9rem; font-weight: 600; text-decoration: none;
}
.uk-cats__item.is-actief { background: var(--uk-primair-tint); border-color: var(--uk-primair); color: var(--uk-primair-dk); font-weight: 800; }
.uk-cats__n { font-size: .82em; font-weight: 700; opacity: .7; background: var(--uk-mist); border-radius: 999px; padding: .05em .5em; }
.uk-dagen__kop { font-weight: 700; color: var(--uk-zacht); margin-right: .25rem; }

/* filters (GET) */
.uk-filter { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .8rem; align-items: end; margin: 0 0 1.6rem; padding: .9rem; background: var(--uk-mist); border-radius: 14px; }
.uk-filter label { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; color: var(--uk-zacht); }
.uk-filter select { min-height: 44px; padding: .4rem .6rem; border: 1.5px solid var(--uk-rand); border-radius: 10px; background: var(--uk-wit); font: inherit; color: var(--uk-inkt); }
.uk-filter__check { flex-direction: row !important; align-items: center; min-height: 44px; }
.uk-filter__check input { width: 1.2rem; height: 1.2rem; }
.uk-filter__reset { align-self: center; font-size: .9rem; }
@media (min-width: 700px) { .uk-filter { grid-template-columns: repeat(4, minmax(0, 1fr)) auto auto; } }

/* secties */
.uk-sectie { margin: 0 0 2.2rem; }
.uk-sectie__kop { margin: 0 0 .9rem; font-size: 1.25rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; }
.uk-gesponsord { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .02em; color: var(--uk-goud); background: var(--uk-goud-bg); border: 1px solid #EAD9A8; border-radius: 6px; padding: .15em .5em; }

/* kaarten */
.uk-lijst { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 560px) { .uk-lijst { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .uk-lijst { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .uk-lijst--uitgelicht { grid-template-columns: repeat(3, 1fr); } }
.uk-kaart { border: 1.5px solid var(--uk-rand); border-radius: 16px; background: var(--uk-wit); overflow: hidden; display: flex; flex-direction: column; }
.uk-kaart--gesponsord { border-color: #EAD9A8; }
.uk-kaart__media { display: block; aspect-ratio: 4 / 3; background: var(--uk-mist); }
.uk-kaart__media img { width: 100%; height: 100%; object-fit: contain; display: block; } /* nooit afsnijden: posters en staande foto's blijven heel */
.uk-kaart__geenfoto { display: flex; align-items: center; justify-content: center; height: 100%; font-size: 2.4rem; color: var(--uk-primair); opacity: .55; }
.uk-kaart__body { padding: .9rem 1rem 1.1rem; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.uk-kaart__titel { margin: 0; font-size: 1.08rem; font-weight: 800; line-height: 1.25; }
.uk-kaart__titel a { color: inherit; text-decoration: none; }
.uk-kaart__titel a:hover { text-decoration: underline; }
.uk-kaart__meta { margin: 0; display: flex; flex-wrap: wrap; gap: .4rem .8rem; align-items: center; font-size: .92rem; }
.uk-prijs { font-weight: 800; }
.uk-nogplek { color: var(--uk-primair-dk); font-weight: 700; display: inline-flex; gap: .3em; align-items: center; }
.uk-badge { color: var(--uk-zacht); display: inline-flex; gap: .3em; align-items: center; }
.uk-kenmerken { margin: 0; font-size: .85rem; color: var(--uk-zacht); }
.uk-kaart .uk-knop { margin-top: auto; align-self: flex-start; }

/* datumstrook — het ene eigen element */
.uk-strook { list-style: none; margin: 0; padding: 0; display: flex; gap: .4rem; }
.uk-strook__dag { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 3rem; padding: .35rem .4rem; border-radius: 10px; border: 1.5px solid var(--uk-rand); color: var(--uk-rand); line-height: 1; }
.uk-strook__dag.is-aan { border-color: var(--uk-primair); background: var(--uk-primair-tint); color: var(--uk-primair-dk); }
.uk-strook__nr { font-size: 1.25rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.uk-strook__mnd { font-size: .68rem; font-weight: 700; margin-top: .15rem; }
.uk-strook--groot .uk-strook__dag { min-width: 4rem; padding: .55rem .5rem; }
.uk-strook--groot .uk-strook__nr { font-size: 1.8rem; }
.uk-periode { margin: 0; display: inline-flex; gap: .4em; align-items: center; font-weight: 700; color: var(--uk-primair-dk); }
.uk-periode--groot { font-size: 1.15rem; }

/* knoppen */
.uk-knop { display: inline-flex; align-items: center; gap: .45em; min-height: 44px; padding: .55rem 1.1rem; border-radius: 999px; background: var(--uk-primair); color: #fff; font-weight: 800; text-decoration: none; border: 1.5px solid var(--uk-primair); font: inherit; font-weight: 800; cursor: pointer; }
.uk-knop:hover { background: var(--uk-primair-dk); border-color: var(--uk-primair-dk); color: #fff; }
.uk-knop--stil { background: var(--uk-wit); color: var(--uk-primair-dk); }
.uk-knop--stil:hover { background: var(--uk-primair-tint); color: var(--uk-primair-dk); }
.uk-knop--tel { background: var(--uk-wit); color: var(--uk-inkt); border-color: var(--uk-rand); }

/* leeg / aanvulling / melding */
.uk-leeg { padding: 1.4rem; border: 1.5px dashed var(--uk-rand); border-radius: 16px; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.uk-leeg__titel { margin: 0; font-weight: 800; font-size: 1.1rem; }
.uk-leeg p { margin: 0; color: var(--uk-zacht); }
.uk-aanvulling { margin: 1rem 0 0; color: var(--uk-zacht); font-size: .92rem; }
.uk-melding { display: flex; gap: .5rem; align-items: center; margin: 0 0 1rem; padding: .8rem 1rem; border-radius: 12px; background: var(--uk-mist); }

/* faq, aanmeld, prose */
.uk-faq__item { border-top: 1px solid var(--uk-rand); padding: .2rem 0; }
.uk-faq__item summary { cursor: pointer; font-weight: 700; min-height: 44px; display: flex; align-items: center; }
.uk-faq__item p { margin: 0 0 .9rem; color: var(--uk-zacht); max-width: 64ch; line-height: 1.55; }
.uk-aanmeld { padding: 1.3rem; border-radius: 16px; background: var(--uk-primair-tint); max-width: 64ch; }
.uk-aanmeld p { margin: 0 0 .9rem; line-height: 1.55; }
.uk-prose { max-width: 64ch; line-height: 1.6; }
.uk-bron { margin: .6rem 0 0; font-size: .85rem; color: var(--uk-zacht); }

/* single */
.uk-foto { margin: 0 0 1.2rem; border-radius: 16px; background: var(--uk-mist); overflow: hidden; max-height: 70vh; display: flex; justify-content: center; }
.uk-foto img { width: 100%; height: auto; max-height: 70vh; object-fit: contain; display: block; }
.uk-kort { display: flex; flex-direction: column; gap: 1rem; margin: 0 0 1.8rem; padding: 1.1rem; border: 1.5px solid var(--uk-rand); border-radius: 16px; align-items: flex-start; }
.uk-feiten { margin: 0; display: grid; grid-template-columns: 1fr; gap: .5rem 1.2rem; }
.uk-feiten div { display: grid; grid-template-columns: 7rem 1fr; gap: .4rem; }
.uk-feiten dt { font-weight: 700; color: var(--uk-zacht); }
.uk-feiten dd { margin: 0; }
.uk-terugnaar { margin: 0 0 1.5rem; }
.uk-single__voet { border-top: 1px solid var(--uk-rand); padding-top: .8rem; }
@media (min-width: 700px) { .uk-kort { flex-direction: row; flex-wrap: wrap; align-items: center; } .uk-kort .uk-knop { margin-left: auto; } }

@media (prefers-reduced-motion: reduce) { .uk * { transition: none !important; } }

/* agenda + nieuwsbrief (A11) */
.uk-agenda__lijst { list-style: none; margin: 0 0 .6rem; padding: 0; display: grid; gap: .35rem; max-width: 64ch; }
.uk-agenda__lijst li { display: flex; gap: .7rem; align-items: baseline; min-height: 44px; border-bottom: 1px solid var(--uk-rand); }
.uk-agenda__datum { flex: 0 0 7rem; font-weight: 700; color: var(--uk-zacht); font-variant-numeric: tabular-nums; }
.uk-agenda__meer { margin: 0; }
.uk-nieuwsbrief { padding: 1.3rem; border: 1.5px solid var(--uk-rand); border-radius: 16px; max-width: 64ch; }
.uk-nieuwsbrief p { margin: 0 0 .9rem; line-height: 1.55; }
.uk-nieuwsbrief__form { display: flex; flex-wrap: wrap; gap: .6rem; }
.uk-nieuwsbrief__form input[type=email] { flex: 1 1 14rem; min-height: 44px; padding: .5rem .8rem; border: 1.5px solid var(--uk-rand); border-radius: 999px; font: inherit; }

/* gids (A12) */
.uk-gids h2 { font-size: 1.35rem; margin: 0 0 .6rem; }
.uk-gids h3 { font-size: 1.08rem; margin: 1.2rem 0 .4rem; }
.uk-gids p { margin: 0 0 .9rem; }