/* ============================================================
   Bestand: public_html/assets/modules/stad/css/public.css
   ============================================================

   De publieke weergaven van de stadsrubrieken: nieuws, prikbord, verenigingen
   en 112-meldingen.

   Deze stijl hoort bij de MODULE, niet bij één thema. Het sjabloon laadt hem
   zelf met een <link>, net zoals de bedrijvenmodule dat doet. Zonder dit
   bestand zou /nieuws op elk thema behalve Franeker kale HTML zijn.

   Kleuren en letters staan als `var(--fr-x, terugval)`. Draait de module in het
   Franeker-thema, dan zet dat thema die tokens en volgt de module vanzelf de
   huisstijl (inclusief nachtstand). Elk ander thema krijgt de terugval: een
   neutrale, leesbare weergave die bij een lichte CMS-pagina past.
   ============================================================ */

.stad-lijst { display: flex; flex-direction: column; gap: 18px; }
.stad-nieuwskaart {
    display: flex;
    gap: 20px;
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 20px;
    text-decoration: none;
}
.stad-nieuwskaart:hover { border-color: var(--fr-rand3, #b6bcc6); }
.stad-nieuwskaart-beeld { flex: 0 0 200px; height: 134px; overflow: hidden; border-radius: 2px; }
.stad-nieuwskaart-beeld img { width: 100%; height: 100%; object-fit: cover; }
.stad-nieuwskaart-tekst { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.stad-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fr-stil2, #6b7280);
}
.stad-meta .stad-rubrieklabel {
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--fr-kicker, #6f5716);
}
.stad-prikbord-kaart {
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 20px;
}
.stad-club {
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 15px;
    text-decoration: none;
}
.stad-club:hover { border-color: var(--fr-rand3, #b6bcc6); }
.stad-feiten {
    margin: 0 0 22px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1px;
    background: var(--fr-rand, #e2e4e8);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
    overflow: hidden;
}
.stad-feit { background: var(--fr-kaart, #fff); padding: 16px 18px; }
.stad-feit dt {
    font: 400 10.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--fr-stil, #6b7280);
    margin-bottom: 7px;
}
/* Een mailadres of webadres breekt nergens uit zichzelf; zonder dit loopt hij op een smalle
   kolom zijn cel uit. */
.stad-feit dd { margin: 0; overflow-wrap: anywhere; font: 500 15px/1.4 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
/* Stadsrubrieken: wat de moduleweergaven bovenop de gedeelde bouwstenen nodig hebben. */
.stad-kop {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    border-bottom: 3px double var(--fr-dubbel, #1b2130);
    padding-bottom: 10px;
    margin-bottom: 22px;
}
.stad-kop h1 { margin: 0; font: 500 40px/1.08 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); letter-spacing: -0.01em; }
.stad-teller { font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--fr-stil2, #6b7280); }
.stad-leeg { font: 400 15.5px/1.7 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-nieuwskaart-kop { font: 500 23px/1.25 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); }
.stad-nieuwskaart-lead { font: 400 14.5px/1.6 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-prikbord-kaart h2 { margin: 8px 0; font: 600 19px/1.25 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); }
.stad-prikbord-kaart p { margin: 0 0 8px; font: 400 14.5px/1.6 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst2, #4a5060); }
.stad-contact { font: 500 13.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-link, #1d4ed8) !important; }
.stad-club-mono {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    background: var(--fr-nacht, #1b2130);
    color: #c39026;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    font: 700 15px/1 var(--fr-serif, Georgia, "Times New Roman", serif);
}
.stad-club-naam { display: block; font: 600 15px/1.25 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-club-soort {
    display: block;
    font: 400 10.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--fr-stil, #6b7280);
    margin-top: 5px;
}
.stad-melding {
    display: flex;
    gap: 16px;
    padding: 14px 18px;
    background: var(--fr-kaart, #fff);
    border: 1px solid var(--fr-rand, #e2e4e8);
    border-radius: 2px;
}
.stad-melding-tijd { flex: 0 0 60px; font: 400 12.5px/1.5 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace); color: var(--fr-stil2, #6b7280); }
.stad-melding-dienst { display: block; font: 600 14.5px/1.35 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-melding-plaats { display: block; font: 400 12.5px/1.4 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-stil, #6b7280); }
.stad-kruimel {
    display: flex;
    gap: 8px;
    align-items: center;
    font: 400 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fr-stil, #6b7280);
    margin-bottom: 18px;
}
.stad-detail h1 { margin: 10px 0 14px; font: 500 42px/1.06 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); letter-spacing: -0.01em; }
.stad-lead {
    font: 500 17px/1.55 var(--fr-serif, Georgia, "Times New Roman", serif);
    font-style: italic;
    color: var(--fr-tekst2, #4a5060);
    border-bottom: 1px solid var(--fr-lijn, #eceef1);
    padding-bottom: 18px;
    margin: 0 0 18px;
}
.stad-detail-beeld { margin: 0 0 22px; }
.stad-detail-beeld img { width: 100%; border-radius: 2px; }
.stad-tekst { font: 400 15.5px/1.7 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-tekst p { margin: 0 0 14px; max-width: 64ch; }
.stad-tekst h2 { font: 500 27px/1.2 var(--fr-serif, Georgia, "Times New Roman", serif); color: var(--fr-kop, #1b2130); margin: 28px 0 10px; }
.stad-website { font: 500 14.5px/1.5 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); }
.stad-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 18px;
    margin-top: 26px;
    padding-top: 20px;
    border-top: 1px solid var(--fr-lijn, #eceef1);
    font: 400 13px/1 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--fr-tekst2, #4a5060);
}
.stad-pager a { font-weight: 600; text-decoration: none; }


/* ── Verenigingsprofiel ──────────────────────────────────────────
   De kicker, de knop naar de eigen site van de club en de lijst met andere clubs uit
   hetzelfde dorp. Het kleuraccent komt uit data-accent op het artikel: zes standen,
   berekend uit de plaatsnaam, zodat clubs uit één dorp bij elkaar horen zonder dat er
   ergens een lijst met dorpen staat die achterloopt. */
.stad-detail-vereniging { --stad-accent: #1d4ed8; }
.stad-detail-vereniging[data-accent="1"] { --stad-accent: #b5893a; }
.stad-detail-vereniging[data-accent="2"] { --stad-accent: #0f766e; }
.stad-detail-vereniging[data-accent="3"] { --stad-accent: #9a3412; }
.stad-detail-vereniging[data-accent="4"] { --stad-accent: #6d28d9; }
.stad-detail-vereniging[data-accent="5"] { --stad-accent: #15803d; }

.stad-club-kicker {
    display: flex;
    align-items: center;
    gap: 9px;
    margin: 0 0 4px;
    font: 700 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-kicker, #6f5716);
}
.stad-club-stip {
    flex: 0 0 auto;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--stad-accent);
}
.stad-detail-vereniging h1 { border-bottom: 3px double var(--fr-dubbel, #1b2130); padding-bottom: 14px; }

.stad-club-cta { margin: 0 0 22px; }
.stad-knop {
    display: inline-flex;
    align-items: baseline;
    gap: 9px;
    padding: 13px 22px;
    border-radius: var(--fr-radius, 2px);
    background: var(--stad-accent);
    color: #fff;
    text-decoration: none;
    font: 600 15px/1.2 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    /* Het label is de hostnaam uit de database en die kapt nergens af; zonder dit duwt een lang
       adres de knop over de rand van een telefoonscherm. */
    overflow-wrap: anywhere;
}
.stad-knop:hover { filter: brightness(1.12); color: #fff; }
.stad-knop:focus-visible { outline: 3px solid var(--stad-accent); outline-offset: 3px; }
/* Voor wie de pagina beluistert: de knop zegt alleen het adres, en dat is zonder context
   nietszeggend. Zichtbaar weglaten, hoorbaar houden. */
.stad-knop-uitleg {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.stad-club-melden {
    margin: 22px 0 0;
    padding: 15px 18px;
    border-left: 3px solid var(--stad-accent);
    background: var(--fr-zacht, #f5f6f8);
    border-radius: 0 2px 2px 0;
    font: 400 14px/1.6 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif);
    color: var(--fr-tekst2, #4a5060);
}

.stad-meeruit { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--fr-lijn, #eceef1); }
.stad-meeruit h2 {
    margin: 0 0 14px;
    font: 700 11.5px/1 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--fr-stil, #6b7280);
}
.stad-meeruit ul { margin: 0; padding: 0; list-style: none; }
.stad-meeruit li + li { border-top: 1px solid var(--fr-lijn, #eceef1); }
.stad-meeruit li > * {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    padding: 11px 0;
    text-decoration: none;
}
.stad-meeruit li > a:hover .stad-meeruit-naam { color: var(--stad-accent); }
.stad-meeruit-naam { font: 600 15px/1.3 var(--fr-sans, system-ui, -apple-system, "Segoe UI", sans-serif); color: var(--fr-tekst, #1b2130); }
.stad-meeruit-soort {
    flex: 0 0 auto;
    font: 400 11.5px/1.3 var(--fr-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    color: var(--fr-stil, #6b7280);
    text-align: right;
}

/* ── Smal scherm ─────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .stad-kop h1 { font-size: 30px; }
    .stad-detail h1 { font-size: 30px; }
    .stad-nieuwskaart { flex-direction: column; }
    .stad-nieuwskaart-beeld { flex: 0 0 auto; width: 100%; height: 180px; }
}

/* Een vereniging zonder eigen verhaal is geen link. Hij houdt dezelfde vorm, alleen zonder
   klikgedrag: anders klik je op een regel die je terugbrengt op dezelfde pagina. */
.stad-club.is-plat { cursor: default; }
.stad-club.is-plat:hover { background: inherit; }

/* De weg om zelf iets aan te leveren. Stond er niet, en dan is een prikbord alleen om
   naar te kijken. */
.stad-aanleveren {
    margin: 0 0 18px;
    font: 400 13.5px/1.5 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-aanleveren a { color: var(--fr-link, #24407c); font-weight: 600; }
.stad-aanleveren a:hover { color: var(--fr-messingdonker, #8c6612); }

/* ── Zelf een oproep plaatsen ──────────────────────────────────────────────────────────
   Het formulier onderaan het prikbord. Zelfde `var(--fr-x, terugval)`-aanpak als de rest van
   deze module: in het Franeker-thema volgt het vanzelf de huisstijl, elk ander thema krijgt de
   neutrale terugval. Ingeklapt als <details>, zodat het bord het bord blijft. */
.stad-plaatsen {
    margin: 26px 0 0;
    border: 1px solid var(--fr-lijn, #d9d5c8);
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-vlak, #fbfaf6);
}
.stad-plaatsen > summary {
    padding: 14px 16px;
    font: 600 15px/1.2 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-tekst, #1b1c18);
    cursor: pointer;
    list-style: none;
}
/* Het standaard driehoekje van de browser past niet in de huisstijl; een eigen teken wel. */
.stad-plaatsen > summary::-webkit-details-marker { display: none; }
.stad-plaatsen > summary::before {
    content: "+";
    display: inline-block;
    width: 18px;
    color: var(--fr-messingdonker, #8c6612);
    font-weight: 700;
}
.stad-plaatsen[open] > summary::before { content: "−"; }

.stad-plaatsen-form {
    display: grid;
    gap: 14px;
    padding: 4px 16px 18px;
}
.stad-veld { display: grid; gap: 5px; }
.stad-veld > span {
    font: 600 12.5px/1.3 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-veld-bij { font-weight: 400; opacity: .8; }
.stad-veld input,
.stad-veld select,
.stad-veld textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--fr-lijn, #d9d5c8);
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-papier, #fff);
    color: var(--fr-tekst, #1b1c18);
    font: 400 15px/1.4 var(--fr-sans, system-ui, sans-serif);
}
.stad-veld textarea { resize: vertical; min-height: 90px; }
.stad-veld input:focus,
.stad-veld select:focus,
.stad-veld textarea:focus {
    outline: 2px solid var(--fr-messing, #b5893a);
    outline-offset: 1px;
}
/* Twee velden naast elkaar zolang er ruimte is; op een telefoon onder elkaar. */
.stad-veld-rij { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) {
    .stad-veld-rij { grid-template-columns: 1fr; }
    /* Naam en soort naast elkaar wordt op deze breedte een tang van twee woorden per regel. */
    .stad-meeruit li > * { flex-direction: column; align-items: flex-start; gap: 3px; }
    .stad-meeruit-soort { text-align: left; }
    .stad-knop { width: 100%; justify-content: center; }
    /* Het feitenblok trekt zijn rasterlijnen met de achtergrond van de lijst erachter. Bij een
       oneven aantal feiten bleef op smal scherm de laatste halve cel als grijs vlak liggen. Twee
       vaste kolommen maken de telling voorspelbaar, en een laatste feit dat een rij alleen begint
       loopt over de volle breedte door. */
    .stad-feiten { grid-template-columns: repeat(2, 1fr); }
    .stad-feit:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.stad-plaatsen-knop {
    justify-self: start;
    padding: 11px 22px;
    border: 0;
    border-radius: var(--fr-radius, 2px);
    background: var(--fr-messing, #b5893a);
    color: var(--fr-nacht, #16203a);
    font: 700 14px/1 var(--fr-sans, system-ui, sans-serif);
    cursor: pointer;
}
.stad-plaatsen-knop:hover { background: var(--fr-messingdonker, #8c6612); color: #fff; }

.stad-plaatsen-klein {
    margin: 0;
    font: 400 12.5px/1.5 var(--fr-sans, system-ui, sans-serif);
    color: var(--fr-stil, #6b6d62);
}
.stad-plaatsen-goed,
.stad-plaatsen-fout {
    margin: 0 16px 12px;
    padding: 11px 13px;
    border-left: 3px solid;
    font: 500 14px/1.45 var(--fr-sans, system-ui, sans-serif);
}
.stad-plaatsen-goed { border-color: #2f7d4f; background: rgba(47, 125, 79, .08); color: #1f5936; }
.stad-plaatsen-fout { border-color: #b42318; background: rgba(180, 35, 24, .07); color: #8a1c14; }

/* Het honeypot-veld. Weg uit beeld én uit de tabvolgorde, maar niet met display:none: een
   bot die daarop let slaat het veld dan juist over, en dan vangt het niets. */
.stad-plaatsen-vangst {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}