/* Aanvullingen op sf.css (dat 1:1 uit het ontwerp komt en niet wordt aangepast).
   Hier staat alleen wat het ontwerp met inline stijlen of gedrag oploste. */

/* hidden wint altijd, ook van display uit .sf-btn en andere componenten */
[hidden] { display: none !important; }

/* Knoppen op donkere header en drawer (in het ontwerp inline) */
.sf-header .sf-btn--primary,
.sf-drawer .sf-btn--primary { background: var(--sf-petrol-licht); color: var(--sf-asfalt) !important; }
.sf-drawer .sf-btn--secondary { border-color: var(--sf-petrol-licht); color: var(--sf-petrol-licht) !important; background: transparent; }
.sf-drawer__knoppen { margin-top: var(--sf-s-6); }
.sf-drawer__account { margin-top: var(--sf-s-6); }
.sf-drawer[hidden] { display: none; }
@media (min-width: 1024px) { .sf-drawer { display: none !important; } }

/* Profielmenu als uitklapper */
.sf-header__profielwrap { position: relative; display: none; }
@media (min-width: 1024px) { .sf-header__profielwrap { display: inline-flex; } }
.sf-header__dropdown { position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.sf-header__dropdown[hidden] { display: none; }
/* Submenu's in het hoofdmenu op desktop: open bij hover en via de pijlknop. */
.sf-header__sub::before { content: ""; position: absolute; left: 0; right: 0; top: -8px; height: 8px; }
.sf-header__groep { position: relative; display: inline-flex; align-items: center; }
.sf-header__groep > a { padding-right: 4px; }
.sf-header__subknop { display: inline-flex; align-items: center; justify-content: center; width: 28px; min-height: var(--sf-target); border: 0; border-radius: var(--sf-r-2); background: transparent; color: var(--sf-beton); cursor: pointer; }
.sf-header__subknop:hover { background: var(--sf-antraciet); }
.sf-header__subknop .sf-i { transition: transform .15s; }
.sf-header__subknop[aria-expanded="true"] .sf-i { transform: rotate(180deg); }
.sf-header__sub { position: absolute; left: 0; top: calc(100% + 4px); z-index: 30; margin: 0; box-shadow: 0 12px 32px rgba(0, 0, 0, .18); }
.sf-header__sub[hidden] { display: none; }
.sf-header__nav .sf-header__sub a { color: var(--sf-text) !important; font-weight: 400; padding: 0 var(--sf-s-3); }
.sf-header__nav .sf-header__sub a:hover { background: var(--sf-bg-alt); }
.sf-menu form { margin: 0; }
img.sf-avatar { object-fit: cover; }

main:focus { outline: none; }

/* Witruimte tussen de laatste inhoud en de footer; zonder deze regel plakte
   een grijs blok onderaan (zoals 'Vragen over deze pagina?') tegen de footer. */
.sf-footer { margin-top: var(--sf-s-10); }
/* Getekend straatpatroon achter de footer, gedempt met een laag asfalt (70%)
   zodat de grijze teksten leesbaar blijven. De tegel is half zo groot als het
   bestand, dan blijft hij scherp op een retinascherm. */
.sf-footer {
  background-color: var(--sf-asfalt);
  background-image: linear-gradient(rgb(18 20 23 / .7), rgb(18 20 23 / .7)), url(../img/footer-patroon.webp);
  background-size: auto, 627px;
}
.sf-footer__intro { color: var(--sf-donker-300); }

/* Flash-meldingen na een formulier */
.sf-flashes { padding-top: var(--sf-s-4); display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-flashes:focus { outline: none; }
.sf-flash { display: flex; gap: var(--sf-s-2); align-items: flex-start; padding: var(--sf-s-3) var(--sf-s-4); border-radius: var(--sf-r-2); background: var(--sf-subtle); color: var(--sf-on-subtle); font-weight: 500; }
.sf-flash--fout { background: var(--sf-rood-licht); color: var(--sf-rood); }

/* Foutpagina's */
.sf-foutpagina { padding-block: var(--sf-s-16) var(--sf-s-20); }

/* Kaarten: aanvullingen op sf.css, in plaats van de inline styles uit het ontwerp */
.sf-card__foot--stapel { flex-direction: column; align-items: stretch; }
.sf-assignment .sf-eyebrow { color: var(--sf-donker-300); }
.sf-promo .sf-eyebrow { color: var(--sf-grijs-600); }
.sf--donker .sf-promo .sf-eyebrow { color: var(--sf-donker-300); }
.sf-promo > img { width: 100%; height: 100%; object-fit: cover; }
.sf-promo--zonder-beeld { grid-template-columns: minmax(0, 1fr) !important; }
/* Eén regel naar het aanbod halverwege lange artikelen (partials/promo-regel.php) */
.sf-prose .sf-promo-regel { margin-block: var(--sf-s-8); padding-block: var(--sf-s-4); border-block: 1px solid var(--sf-border); }
.sf-prose .sf-promo-regel p { margin: 0; font-size: var(--sf-fs-2); }
.sf-promo-regel .sf-eyebrow { display: block; margin-bottom: var(--sf-s-1); color: var(--sf-grijs-600); }
.sf-promo-regel__titel { font-weight: 600; margin-right: var(--sf-s-2); }
.sf-photo__link img, .sf-kb > img, .sf-video__frame > img { width: 100%; height: auto; }
.sf-video__frame > img { display: block; aspect-ratio: 16 / 9; object-fit: cover; }
.sf-video__frame iframe { display: block; width: 100%; aspect-ratio: 16 / 9; border: 0; }
.sf-label-status--klein { min-height: 22px; padding: 0 8px; }
.sf-comment__text p + p { margin-top: var(--sf-s-2); }

/* Rij met kaarten: één kolom mobiel, twee vanaf md, drie vanaf lg */
.sf-kaartenrij { display: grid; gap: var(--sf-s-6); grid-template-columns: minmax(0, 1fr); align-items: start; }
@container sf (min-width: 768px) { .sf-kaartenrij { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container sf (min-width: 1024px) { .sf-kaartenrij--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Styleguide */
.sf-styleguide__blok { padding-block: var(--sf-s-10); border-top: var(--sf-b-1); }
.sf-styleguide__blok > h2 { margin-bottom: var(--sf-s-6); }

/* sf.css zet .sf button op color: inherit, en dat wint van .sf-video__load */
.sf .sf-video__load { color: #fff; }

/* ─── Ledenprofiel, instellingen en vermeldingen (fase 2) ─── */
.sf-profiel__eigen { margin-bottom: var(--sf-s-6); }
@media (min-width: 768px) {
  .sf-profilehead__top > :first-child { grid-row: 1 / span 2; }
  .sf-profiel__tekst { grid-column: 2; grid-row: 2; }
  .sf-profiel__acties { grid-column: 3; grid-row: 1; }
}
.sf-bio { max-width: 62ch; }
.sf-bio__meer > summary { cursor: pointer; display: inline-block; color: var(--sf-petrol); text-decoration: underline; list-style: none; min-height: var(--sf-target); padding-block: 12px; }
.sf-bio__meer > summary::-webkit-details-marker { display: none; }
.sf-bio__meer .sf-bio__meer-dicht { display: none; }
.sf-bio__meer[open] .sf-bio__meer-dicht { display: inline; }
.sf-bio__meer[open] .sf-bio__meer-open { display: none; }
.sf-bio:has(details[open]) .sf-bio__kort { display: none; }
.sf-vermeldingen__jaar { display: grid; gap: var(--sf-s-2); padding-block: var(--sf-s-3); border-top: var(--sf-b-1); }
.sf-vermeldingen__jaartal { font-size: var(--sf-fs-h5, 1.125rem); font-weight: 600; }
@media (min-width: 720px) { .sf-vermeldingen__jaar { grid-template-columns: 96px minmax(0, 1fr); } }

.sf-instellingen__avatar { align-items: flex-start; gap: var(--sf-s-6); }
.sf-vermelding-rij { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-s-3); padding-block: var(--sf-s-2); }
.sf-vermelding-rij__acties { margin-left: auto; align-items: flex-start; }
.sf-i--omhoog { transform: rotate(180deg); }
.sf-bevestig { position: relative; }
.sf-bevestig > summary { list-style: none; cursor: pointer; }
.sf-bevestig > summary::-webkit-details-marker { display: none; }
.sf-bevestig__vak { position: absolute; right: 0; z-index: 5; display: grid; gap: var(--sf-s-3); width: 260px; margin-top: var(--sf-s-1); padding: var(--sf-s-4); background: var(--sf-surface); border: var(--sf-b-1); border-radius: var(--sf-r-2); box-shadow: 0 4px 16px rgb(0 0 0 / .12); }
.sf-beheer__sub { display: block; }
.sf-beheer__filterknop { align-self: flex-end; }
.sf-table .sf-bevestig__vak { position: static; width: 220px; box-shadow: none; }
.sf-vermelding-rij__acties .sf-bevestig__vak { max-width: calc(100vw - 2 * var(--sf-s-4)); }
.sf-table-wrap { position: relative; }
.sf-sorteer { display: inline-flex; align-items: center; gap: var(--sf-s-1); color: inherit; text-decoration: none; }
.sf-sorteer:hover, .sf-sorteer:focus-visible { text-decoration: underline; }
.sf-sorteer__pijl { font-size: .75em; }

/* Foto's (fase 3): galerij, ledenlijst, fotopagina en portfoliobeheer */
.sf-galerij__kop { max-width: 62ch; }
.sf-galerij__select { min-width: 180px; min-height: 44px; padding-block: 8px; }
/* Meer lucht onder elk bijschrift, zodat titel en fotograaf zichtbaar bij de foto erboven horen */
.sf .sf-grid-masonry > * { margin-bottom: var(--sf-s-6); }
@media (min-width: 768px) { .sf .sf-grid-masonry > * { margin-bottom: var(--sf-s-8); } }
.sf-galerij__fotos { padding-bottom: var(--sf-s-12, 96px); }

.sf-ledenlijst { padding-bottom: var(--sf-s-12, 96px); }
.sf-ledenlijst__zoek { max-width: 480px; flex-wrap: nowrap; }
.sf-ledenlijst__zoek .sf-input { flex: 1 1 auto; }
.sf-ledenlijst__raster { display: grid; gap: var(--sf-s-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.sf-ledenlijst__kaart { display: flex; align-items: center; gap: var(--sf-s-4); height: 100%; padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); color: var(--sf-text) !important; text-decoration: none !important; }
.sf-ledenlijst__kaart:hover { border-color: var(--sf-text); }
.sf-ledenlijst__kaart:hover .sf-strong { text-decoration: underline; }

.sf-foto { margin: 0; padding-block: var(--sf-s-6) var(--sf-s-4); }
.sf-foto__wrap { display: grid; gap: var(--sf-s-3); }
.sf-foto__zoom { display: block; cursor: zoom-in; }
.sf-foto__img, .sf-foto__zoom img { display: block; width: 100%; height: auto; max-height: 85vh; object-fit: contain; }
/* Op een telefoon lager, zodat titel en fotograaf zonder scrollen in beeld komen */
@media (max-width: 767px) { .sf-foto__img, .sf-foto__zoom img { max-height: 60vh; } }
.sf-foto__onder { flex-wrap: wrap; }
.sf-foto__buren { gap: var(--sf-s-2); }
.sf-foto__info { padding-block: var(--sf-s-6) var(--sf-s-12, 96px); }
.sf-foto__maker { color: var(--sf-text) !important; }
.sf-foto__menu { position: relative; }
.sf-foto__menu > summary { list-style: none; cursor: pointer; }
.sf-foto__menu > summary::-webkit-details-marker { display: none; }
.sf-foto__menu > .sf-menu { position: absolute; left: 0; top: calc(100% + var(--sf-s-1)); z-index: 10; box-shadow: 0 8px 24px rgb(0 0 0 / .35); }
.sf-foto__meld > .sf-menu { width: min(320px, calc(100vw - 2 * var(--sf-s-4))); padding: var(--sf-s-4); }
.sf-foto__menukop { padding: var(--sf-s-2) var(--sf-s-3); }
.sf-foto__meer { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sf-foto__meer img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.sf-foto__verwant { background: var(--sf-bg-alt); }
.sf-foto__lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; }
.sf-foto__lightbox:not([open]) { display: none; }
.sf-foto__lightbox::backdrop { background: rgb(18 20 23 / .97); }
.sf-foto__lightbox .sf-lightbox__stage { min-height: 0; }
.sf-foto__lightbox img { max-width: 100%; max-height: calc(100vh - 96px); width: auto; height: auto; object-fit: contain; }
.sf-comment__actions form { display: contents; }

.sf-portfolio__upload > summary { list-style: none; cursor: pointer; margin: var(--sf-s-4); }
.sf-portfolio__upload > summary::-webkit-details-marker { display: none; }
.sf-portfolio__upload[open] > summary { margin-bottom: 0; }
.sf-portfolio__thumb { display: block; width: 72px; }
.sf-portfolio__thumb img { display: block; width: 72px; height: 72px; object-fit: cover; border-radius: var(--sf-r-0); }
.sf-portfolio__item.is-uit .sf-portfolio__thumb img { opacity: .45; }
.sf-portfolio__knoppen { flex-wrap: wrap; gap: var(--sf-s-1); }
.sf-portfolio__knoppen form { display: contents; }

/* Profielknop: initialen als gegenereerde inhoud, zodat ze niet botsen met het aria-label (WCAG 2.5.3) */
.sf-avatar--initialen::before { content: attr(data-initialen); }

/* ─── Lezen (fase 4): kennisbank, beginnersroute, boeken, video's, tekstpagina's ─── */
.sf-lezen__kop { max-width: 62ch; }
.sf-lezen__lijst { padding-bottom: var(--sf-s-12, 96px); }
.sf-lezen__uitgelicht { padding-block: var(--sf-s-6) var(--sf-s-8); border-bottom: var(--sf-b-1); }
.sf-lezen__uitgelicht-raster { align-items: center; }
.sf-lezen__select { min-width: 180px; }
.sf-lezen__kopruimte { padding-bottom: var(--sf-s-6); }
.sf-lezen__beeld { margin-bottom: var(--sf-s-8); }
.sf-lezen__foto { display: block; width: 100%; height: auto; max-height: 75vh; object-fit: cover; border-radius: var(--sf-r-2); }
.sf-lezen__body { padding-bottom: var(--sf-s-12, 96px); }
.sf-lezen__auteur { padding-top: var(--sf-s-6); border-top: var(--sf-b-1); }
.sf-lezen__volgende { align-self: flex-start; padding: 0; min-height: 0; white-space: normal; text-align: left; font-weight: 600; }

.sf-lezen__voortgang { max-width: 480px; }
.sf-lezen__route { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sf-s-3); }
.sf-lezen__stap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); }
.sf-lezen__stap.is-volgende { border-color: var(--sf-primary); box-shadow: inset 4px 0 0 var(--sf-primary); }
.sf-lezen__nummer { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: var(--sf-b-strong); font-weight: 600; }
.sf-lezen__stap.is-gelezen .sf-lezen__nummer { background: var(--sf-primary); border-color: var(--sf-primary); color: var(--sf-on-primary); }

.sf-lezen__video { margin-bottom: var(--sf-s-6); }

.sf-lezen__tekst { padding-block: var(--sf-s-8) var(--sf-s-12, 96px); }
.sf-lezen__tekst .sf-prose { max-width: var(--sf-read); }
.sf-lezen__zijnav { align-self: start; }
.sf-lezen__vraag + .sf-lezen__vraag { margin-top: var(--sf-s-3); }
.sf-lezen__formulier { max-width: var(--sf-read); }
/* E-bookpagina: omslag naast de kop, op smalle schermen eronder. */
.sf-ebook__kop { display: grid; gap: var(--sf-s-6); align-items: center; }
.sf-ebook__omslag { width: min(50vw, 280px); height: auto; }
@container sf (min-width: 768px) {
  .sf-ebook__kop { grid-template-columns: 1fr 280px; gap: var(--sf-s-8); }
}
.sf-lezen__extra { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sf-concept { margin-top: var(--sf-s-4); }

/* ─── Beheer (fase 4): artikelen, items, pagina's en contact ─── */
.sf-beheer { padding-block: var(--sf-s-8) var(--sf-s-20, 80px); }
.sf-beheer__eyebrow { padding: 0 12px 8px; }
.sf-beheer__rij { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sf-s-3); align-items: center; padding-inline: 0; }
.sf-beheer__acties { display: flex; flex-wrap: wrap; gap: var(--sf-s-1); align-items: center; }
.sf-beheer__form { max-width: 860px; }
.sf-beheer__opslaan { display: flex; flex-wrap: wrap; gap: var(--sf-s-3); align-items: flex-end; padding-top: var(--sf-s-4); border-top: var(--sf-b-1); }
.sf-beheer__omslag { display: block; width: 120px; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-beheer__blokken { border: 0; margin: 0; padding: 0; display: grid; gap: var(--sf-s-4); min-width: 0; }
.sf-beheer__blok { display: grid; gap: var(--sf-s-3); padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-bg-alt); }
.sf-beheer__bericht.is-afgehandeld { background: var(--sf-bg-alt); }
.sf-beheer__contacttabel td { vertical-align: top; }
.sf-beheer__datum { white-space: nowrap; }
.sf-beheer__uitklap > summary { cursor: pointer; color: var(--sf-petrol); text-decoration: underline; min-height: var(--sf-target); display: list-item; }
.sf-beheer__uitklap[open] > summary { margin-bottom: var(--sf-s-3); }
.sf-beheer__berichttekst { white-space: pre-wrap; overflow-wrap: anywhere; }

/* ─── Straatpraat ─────────────────────────────────────────────────────────── */
.sf-forum__kop { align-items: flex-end; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-forum__gereedschap { flex-wrap: wrap; gap: var(--sf-s-4); align-items: flex-end; }
.sf-forum__tabs { border-bottom: 0; }
.sf-forum__zoek { flex: 1 1 220px; max-width: 280px; }
.sf-forum__categorieen { flex-direction: column; overflow: visible; }
.sf-forum__categorieen a { justify-content: space-between; white-space: normal; }
.sf-forum__categorieen a[aria-current="page"] { background: var(--sf-bg-alt); font-weight: 600; }
.sf-onderwerp__tekst { white-space: pre-wrap; overflow-wrap: anywhere; }
.sf-bericht-foto { display: block; max-width: 420px; }
.sf-bericht-foto img { display: block; width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-select--smal { width: auto; min-width: 0; }
.sf-foto-kiezer > summary { list-style: none; cursor: pointer; width: fit-content; }
.sf-foto-kiezer > summary::-webkit-details-marker { display: none; }
.sf-foto-kiezer[open] > summary { margin-bottom: var(--sf-s-3); }

.sf-vvdw__rij { align-items: center; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-vvdw__vraag { color: var(--sf-text); text-decoration: none; }
.sf-vvdw__vraag:hover { text-decoration: underline; }
.sf-vvdw-venster { padding: 0; border: 0; max-width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.sf-vvdw-venster:not([open]) { display: none; }
.sf-vvdw-venster::backdrop { background: rgb(18 20 23 / .6); }

/* Probleem melden: venster op de instellingen, en de melding in het beheer. */
.sf-probleem-venster { padding: 0; border: 0; width: min(560px, calc(100vw - 32px)); max-width: min(560px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow: auto; }
.sf-probleem-venster:not([open]) { display: none; }
.sf-probleem-venster::backdrop { background: rgb(18 20 23 / .6); }
.sf-probleem-kop { align-items: center; flex-wrap: wrap; gap: var(--sf-s-4); }
.sf-probleem__url { overflow-wrap: anywhere; }

/* ─── Meldingen ───────────────────────────────────────────────────────────── */
.sf-meldingen { border-top: var(--sf-b-1); }
.sf-melding { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: var(--sf-s-3); align-items: start; padding: var(--sf-s-4) var(--sf-s-3); border-bottom: var(--sf-b-1); }
.sf-melding.is-nieuw { background: var(--sf-bg-alt); }
.sf-melding.is-nieuw .sf-melding__link { font-weight: 600; }
.sf-melding__icoon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sf-bg-alt); }
.sf-melding__link { color: var(--sf-text); text-decoration: none; }
.sf-melding__link:hover { text-decoration: underline; }
.sf-melding__link::after { content: ""; position: absolute; inset: 0; }
.sf-melding { position: relative; }

/* Beheer van Straatpraat: knoppen onderaan een rij met velden, en een smal getalveld. */
.sf-field--knop { align-self: flex-end; }
.sf-input--kort { width: 7rem; }

/* ─── Home (T1) ───────────────────────────────────────────────────────────── */
.sf-home-hero { align-items: center; }
.sf-assignment .sf-eyebrow { color: var(--sf-donker-300); }
.sf-home-winnaar img { width: 100%; height: 100%; object-fit: cover; }
.sf-home-winnaar::after { content: ""; position: absolute; inset: 50% 0 0; background: linear-gradient(transparent, rgb(18 20 23 / .7)); }
.sf-home-winnaar .sf-ph__label { z-index: 1; color: #fff; }
.sf-home-winnaar:hover img { opacity: .88; }
.sf-home-opdracht__acties { margin-top: var(--sf-s-1); }
.sf-home-ebook { gap: var(--sf-s-4); }
.sf-home-promo { padding-bottom: var(--sf-s-16); }

/* ─── Maandopdracht (fase 5) ─── */
.sf-mo-held { background: var(--sf-asfalt); color: var(--sf-text); padding: 40px 0 56px; }
.sf-mo-held__tekst > * { max-width: 760px; }
.sf-mo-held__split { align-items: center; }
.sf-mo-held__foto { margin: 0; display: grid; gap: var(--sf-s-2); justify-items: center; }
.sf-mo-held__foto img { display: block; width: auto; max-width: 100%; max-height: 520px; height: auto; }
.sf-mo-tabs { padding-top: var(--sf-s-6); }
.sf-mo-mijn { display: grid; gap: var(--sf-s-2); color: var(--sf-text); text-decoration: none; }
.sf-mo-mijn__foto { width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
.sf-mo-keuze__raster { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sf-s-2); max-height: 420px; overflow-y: auto; padding: 4px; margin-top: var(--sf-s-3); }
.sf-mo-keuze__item { position: relative; }
.sf-mo-keuze__radio { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sf-mo-keuze__item label { display: grid; gap: 4px; cursor: pointer; border-radius: var(--sf-r-1, 4px); padding: 3px; outline: 2px solid transparent; }
.sf-mo-keuze__foto { width: 100%; aspect-ratio: 1; object-fit: cover; height: auto; border-radius: 2px; }
.sf-mo-keuze__item span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-mo-keuze__radio:checked + label { outline: 3px solid var(--sf-primary); }
.sf-mo-keuze__radio:focus-visible + label { outline: 3px solid var(--sf-focus, var(--sf-primary)); outline-offset: 2px; }
.sf-mo-keuze__item.is-uit label { cursor: not-allowed; }
.sf-mo-keuze__item.is-uit img { opacity: .4; }
.sf-mo-kaart__foto { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.sf-mo-beheer { list-style: none; margin: 0; padding: 0; }
.sf-mo-beheer__rij { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; flex-direction: unset; }
.sf-mo-beheer__foto img { display: block; width: 100%; height: auto; border-radius: var(--sf-r-1, 4px); }
@media (max-width: 599px) { .sf-mo-beheer__rij { grid-template-columns: 1fr; } .sf-mo-beheer__foto { max-width: 200px; } }

/* Tipregel onder de opdrachtengenerator: gloeilamp voor de zin. */
.sf-mo-tip { display: flex; gap: var(--sf-s-2); align-items: flex-start; }
.sf-mo-tip .sf-i { color: var(--sf-petrol); margin-top: 2px; }

/* ─── Foto van de maand (fase 5) ─── */
.sf-fvdm-uitleg > * { max-width: 760px; }
.sf-fvdm-werking { max-width: 760px; }
.sf-fvdm-kandidaten { list-style: none; margin: 0; padding: 0; }
.sf-fvdm-kandidaat { scroll-margin-top: 96px; }
.sf-fvdm-kandidaat img { display: block; width: 100%; height: auto; }
.sf-fvdm-kandidaat .sf-photo__meta { justify-content: space-between; }
.sf-fvdm-start { max-width: 880px; }
.sf-fvdm-start img { display: block; width: 100%; height: auto; }
.sf-badge--fotovandemaand .sf-badge__mark { background: var(--sf-geel); color: var(--sf-asfalt); }

/* Gele ring om de avatar van de maker van de huidige foto van de maand */
.sf-avatar-ring { position: relative; display: inline-flex; flex: none; border-radius: 50%; }
.sf-avatar-ring > .sf-avatar { box-shadow: 0 0 0 2px var(--sf-surface), 0 0 0 4px var(--sf-geel); }
.sf-avatar-ring__ster { position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sf-geel); color: var(--sf-asfalt); box-shadow: 0 0 0 2px var(--sf-surface); font-size: 10px; line-height: 1; }
.sf-avatar-ring:has(> .sf-avatar--lg) > .sf-avatar, .sf-avatar-ring:has(> .sf-avatar--xl) > .sf-avatar { box-shadow: 0 0 0 3px var(--sf-surface), 0 0 0 7px var(--sf-geel); }
.sf-avatar-ring:has(> .sf-avatar--lg) .sf-avatar-ring__ster, .sf-avatar-ring:has(> .sf-avatar--xl) .sf-avatar-ring__ster { top: -2px; right: -2px; width: 26px; height: 26px; font-size: 15px; box-shadow: 0 0 0 3px var(--sf-surface); }
.sf-faces .sf-avatar-ring > .sf-avatar { box-shadow: 0 0 0 2px var(--sf-surface), 0 0 0 4px var(--sf-geel); }

/* Erelijst en 'Deel je winst' op het profiel */
.sf-erelijst { display: grid; gap: var(--sf-s-3); }
.sf-erelijst__regel { display: inline-flex; align-items: center; gap: var(--sf-s-3); color: var(--sf-text); text-decoration: none; }
.sf-erelijst__regel img { width: 64px; height: 64px; object-fit: cover; display: block; }
.sf-erelijst__regel:hover .sf-strong { text-decoration: underline; }
.sf-deel { display: grid; gap: var(--sf-s-6); max-width: 760px; padding: var(--sf-s-6); overflow: visible; }
.sf-deel__maand { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sf-s-4); align-items: start; }
.sf-deel__embleem { display: block; width: 120px; height: 120px; }
.sf-deel__code { width: 100%; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; resize: vertical; }
@media (max-width: 599px) { .sf-deel__maand { grid-template-columns: 1fr; } }

/* Cookiebanner: vast onderaan, verborgen tot site.js hem toont. */
.sf-cookies { position: fixed; inset: auto 0 0 0; z-index: 50; background: var(--sf-asfalt); color: var(--sf-wit); box-shadow: 0 -2px 12px rgba(0, 0, 0, .2); }
.sf-cookies[hidden] { display: none; }
.sf-cookies__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sf-s-3) var(--sf-s-6); padding-block: var(--sf-s-3); }
.sf-cookies__tekst { flex: 1 1 320px; margin: 0; font-size: var(--sf-fs-2); line-height: var(--sf-lh-2); }
.sf-cookies__tekst--lang { display: none; }
.sf-cookies__knoppen { flex-wrap: nowrap; gap: var(--sf-s-2); }
@container sf (min-width: 768px) {
  .sf-cookies__inner { padding-block: var(--sf-s-4); }
  .sf-cookies__tekst--lang { display: block; }
  .sf-cookies__tekst--kort { display: none; }
}
/* Zolang de banner er staat, houdt de pagina zijn hoogte vrij (site.js zet
   --sf-cookies-h), zodat niets met focus erachter verdwijnt (WCAG 2.4.11). */
html { scroll-padding-bottom: var(--sf-cookies-h, 0px); }
.sf.sf--cookies { padding-bottom: var(--sf-cookies-h, 0px); }
.sf-cookies a { color: var(--sf-wit); text-decoration: underline; }
.sf-cookies .sf-btn--text { color: var(--sf-wit) !important; }
.sf-footer__knop { background: none; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-decoration: underline; }

/* Nieuwsbriefblok bovenaan de footer (partials/footer-nieuwsbrief.php) */
.sf-footer__nieuwsbrief { display: grid; gap: var(--sf-s-4) var(--sf-s-8); padding-bottom: var(--sf-s-8); margin-bottom: var(--sf-s-8); border-bottom: 1px solid var(--sf-donker-700); }
.sf-footer__nieuwsbrief h2 { font-size: var(--sf-fs-4); line-height: var(--sf-lh-4); text-transform: none; letter-spacing: 0; color: var(--sf-beton); }
.sf-footer__nieuwsbrief-tekst p { color: var(--sf-donker-300); max-width: 46ch; margin: 0; }
.sf-footer__nieuwsbrief-form { display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-footer__nieuwsbrief-rij { display: flex; flex-wrap: wrap; gap: var(--sf-s-2); }
.sf-footer__nieuwsbrief-rij .sf-input { flex: 1 1 14rem; width: auto; }
.sf-footer__nieuwsbrief-label { font-weight: 600; margin-bottom: calc(-1 * var(--sf-s-1)); }
.sf-footer__nieuwsbrief-melding { margin: 0; color: var(--sf-donker-300); }
@container sf (min-width: 1024px) {
  .sf-footer__nieuwsbrief { grid-template-columns: 1fr 1fr; align-items: center; }
}

/* Premium: een rustig label met tekst, niet alleen een kleur. */
.sf-label-premium { display: inline-flex; align-items: center; min-height: 22px; padding: 0 8px; border: 1px solid currentColor; border-radius: var(--sf-r-1); font-size: var(--sf-fs-1); line-height: 1; font-weight: 600; letter-spacing: 0.02em; white-space: nowrap; }

/* Premium: achtergrondkleur van het profiel. Waarden gelijk aan PROFIELKLEUREN
   in src/profielkleur.php; tests/profielkleur.php bewaakt dat. Links altijd
   onderstreept, omdat link en tekst onderling weinig contrast hebben. */
.sf-profielkleur { background-color: var(--sf-bg); color: var(--sf-text); }
.sf-profielkleur a:not(.sf-btn):not(.sf-iconbtn) { text-decoration: underline; text-underline-offset: 3px; }
/* Vaste tekstkleuren elders op het profiel volgen hier het palet (tests/profielkleur.php). */
.sf-profielkleur .sf-bio__meer > summary { color: var(--sf-link); }
.sf-profielkleur .sf-input::placeholder { color: var(--sf-muted); }
.sf-profielkleur .sf-textarea::placeholder { color: var(--sf-muted); }
.sf-kleurstaal { display: inline-block; width: 20px; height: 20px; border: 1px solid var(--sf-border-strong); border-radius: 50%; vertical-align: middle; flex: none; }
.sf-profielkleur--zwart { --sf-bg: #111111; --sf-bg-alt: #1E1E1E; --sf-surface: #1E1E1E; --sf-subtle: #1E1E1E; --sf-text: #F2F2F2; --sf-link-hover: #F2F2F2; --sf-primary-hover: #F2F2F2; --sf-muted: #B5B5B5; --sf-border: #6B6B6B; --sf-border-strong: #6B6B6B; --sf-link: #8FCFE3; --sf-primary: #8FCFE3; --sf-on-subtle: #8FCFE3; --sf-focus: #8FCFE3; --sf-on-primary: #111111; background-color: #111111; }
.sf-profielkleur--wit { --sf-bg: #FFFFFF; --sf-bg-alt: #F4F4F2; --sf-surface: #F4F4F2; --sf-subtle: #F4F4F2; --sf-text: #1A1A1A; --sf-link-hover: #1A1A1A; --sf-primary-hover: #1A1A1A; --sf-muted: #595959; --sf-border: #8A8A8A; --sf-border-strong: #8A8A8A; --sf-link: #0B5A70; --sf-primary: #0B5A70; --sf-on-subtle: #0B5A70; --sf-focus: #0B5A70; --sf-on-primary: #FFFFFF; background-color: #FFFFFF; }
.sf-profielkleur--grijs { --sf-bg: #DCDCD8; --sf-bg-alt: #E8E8E5; --sf-surface: #E8E8E5; --sf-subtle: #E8E8E5; --sf-text: #1A1A1A; --sf-link-hover: #1A1A1A; --sf-primary-hover: #1A1A1A; --sf-muted: #454545; --sf-border: #6B6B6B; --sf-border-strong: #6B6B6B; --sf-link: #0A4A5C; --sf-primary: #0A4A5C; --sf-on-subtle: #0A4A5C; --sf-focus: #0A4A5C; --sf-on-primary: #DCDCD8; background-color: #DCDCD8; }
.sf-profielkleur--bordeaux { --sf-bg: #561C26; --sf-bg-alt: #64242F; --sf-surface: #64242F; --sf-subtle: #64242F; --sf-text: #F8EEEF; --sf-link-hover: #F8EEEF; --sf-primary-hover: #F8EEEF; --sf-muted: #E3C6CA; --sf-border: #B4848B; --sf-border-strong: #B4848B; --sf-link: #FFD3AD; --sf-primary: #FFD3AD; --sf-on-subtle: #FFD3AD; --sf-focus: #FFD3AD; --sf-on-primary: #561C26; background-color: #561C26; }
.sf-profielkleur--donkerblauw { --sf-bg: #15243F; --sf-bg-alt: #1D2E4D; --sf-surface: #1D2E4D; --sf-subtle: #1D2E4D; --sf-text: #F0F3F8; --sf-link-hover: #F0F3F8; --sf-primary-hover: #F0F3F8; --sf-muted: #C3CCDB; --sf-border: #7486A6; --sf-border-strong: #7486A6; --sf-link: #A8D0FF; --sf-primary: #A8D0FF; --sf-on-subtle: #A8D0FF; --sf-focus: #A8D0FF; --sf-on-primary: #15243F; background-color: #15243F; }
.sf-profielkleur--zachtroze { --sf-bg: #EBD6D6; --sf-bg-alt: #F3E4E4; --sf-surface: #F3E4E4; --sf-subtle: #F3E4E4; --sf-text: #2A1B1D; --sf-link-hover: #2A1B1D; --sf-primary-hover: #2A1B1D; --sf-muted: #5A4144; --sf-border: #8F6D71; --sf-border-strong: #8F6D71; --sf-link: #7A2335; --sf-primary: #7A2335; --sf-on-subtle: #7A2335; --sf-focus: #7A2335; --sf-on-primary: #EBD6D6; background-color: #EBD6D6; }
.sf-profielkleur--donkergroen { --sf-bg: #1E3A2C; --sf-bg-alt: #264736; --sf-surface: #264736; --sf-subtle: #264736; --sf-text: #EEF4EF; --sf-link-hover: #EEF4EF; --sf-primary-hover: #EEF4EF; --sf-muted: #C0D2C6; --sf-border: #729482; --sf-border-strong: #729482; --sf-link: #C6E6A0; --sf-primary: #C6E6A0; --sf-on-subtle: #C6E6A0; --sf-focus: #C6E6A0; --sf-on-primary: #1E3A2C; background-color: #1E3A2C; }

/* Kortingscode op /premium: in een keer te selecteren. */
.sf-kortingscode { font-size: 1.05em; padding: 0.15em 0.45em; user-select: all; letter-spacing: 0.04em; }
/* Galerij: foto en bijschrift samen in één kader, zodat titel en fotograaf onmiskenbaar bij die foto horen */
.sf-galerij__fotos .sf-photo { gap: 0; background: var(--sf-bg-alt); border: 1px solid var(--sf-border); }
.sf-galerij__fotos .sf-photo__meta { padding: var(--sf-s-3); }

/* Links naar de velden met een fout, in de foutmelding boven een formulier (site.js) */
.sf-alert__lijst { margin: var(--sf-s-2) 0 0; padding-left: 18px; }

/* Groter raakvlak voor 'Wachtwoord vergeten?' op een telefoon, zonder dat de regel hoger wordt */
.sf-aanmeld-bewijs { margin: 0; display: flex; flex-direction: column; gap: var(--sf-s-2); }
.sf-aanmeld-bewijs__fotos { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sf-s-2); }
.sf-aanmeld-bewijs__fotos img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: var(--sf-r-2, 4px); }
.sf-auth__vergeten { padding-block: 12px; margin-block: -12px; }

/* Zoeken */
.sf-zoeken__kop { max-width: 62ch; }
.sf-zoeken__form { max-width: 560px; flex-wrap: nowrap; }
.sf-zoeken__form .sf-input { flex: 1 1 auto; }
.sf-zoeken { padding-bottom: var(--sf-s-12, 96px); }
.sf-zoeken__aantal { font-weight: 400; }
.sf-zoeken__lijst { display: grid; gap: var(--sf-s-3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.sf-zoeken__treffer { display: flex; flex-direction: column; gap: var(--sf-s-1, 4px); padding: var(--sf-s-4); border: var(--sf-b-1); border-radius: var(--sf-r-2); background: var(--sf-surface); position: relative; }
.sf-zoeken__treffer:hover { border-color: var(--sf-text); }
.sf-zoeken__titel { font-weight: 600; color: var(--sf-text) !important; }
.sf-zoeken__titel::after { content: ""; position: absolute; inset: 0; }
.sf-zoeken__overzichten { justify-content: center; flex-wrap: wrap; }
.sf-zoeken .sf-sectionhead { margin-bottom: 0; }