/*
 * Pavinom — de telefoon.
 *
 * Apart bestand omdat het één samenhangend verhaal is en niet een handvol
 * uitzonderingen die door site.css verspreid staan. Wie zich afvraagt waarom
 * iets op een telefoon anders is, kijkt hier en nergens anders.
 *
 * Twee echte fouten die hierin rechtgezet worden, en die je op een breed
 * scherm nooit ziet:
 *
 *   De pagina schoof zijwaarts. Oorzaak was de uitschuiflade: die staat vast
 *   gepositioneerd en met translateX(100%) buiten beeld gezet, en zo'n element
 *   telt toch mee voor de breedte van het document. Het gevolg is een pagina
 *   die je met de duim opzij kunt schuiven en dan scheef blijft staan — het
 *   soort ding waarvan een bezoeker denkt dat de site kapot is.
 *
 *   De oranje knop in de kop kromp niet mee. Op vierhonderd pixels was hij
 *   tweehonderdacht pixels breed en duwde hij het menu-icoon voorbij de rand,
 *   waar het niet meer aan te raken was. Er was dus geen menu op een telefoon.
 *
 * De rest is lucht. Alles stond op een telefoon even dicht op elkaar als op
 * een breed scherm, en dat leest daar veel benauwder omdat er geen marge naast
 * staat om op te rusten.
 */

/* ═══════════════════════════════════════════════ de lade en de kop ══ */

@media (max-width: 1080px) {

    /* Weggeschoven is niet weg. Zonder dit blijft de lade meetellen voor de
       breedte van het document en schuift de hele pagina mee opzij. */
    .lade {
        visibility: hidden;
    }

    .lade[data-open="ja"] {
        visibility: visible;
    }

    /* Een lade die je met de duim bedient, mag ruimer staan. */
    .lade a {
        padding-block: .95rem;
        font-size: 1.05rem;
    }
}

@media (max-width: 860px) {

    /* Compacter, zodat het menu-icoon zijn plaats houdt. */
    .kop__acties .knop--doen {
        padding-inline: var(--ruimte-3);
        font-size: var(--tekst-s);
    }
}

@media (max-width: 620px) {

    /* Hieronder past hij niet meer naast het logo en het icoon. Hij staat in
       de lade én groot in de kop van de pagina zelf, dus hier mag hij weg —
       dat is iets anders dan hem verstoppen. */
    .kop__acties .knop--doen {
        display: none;
    }

    .merk__onder {
        display: none;
    }
}

/* ═══════════════════════════════════════════════════════ meer lucht ══ */

@media (max-width: 720px) {

    /* De rand naast de tekst. Onder de 4vw wordt dat op een telefoon krap. */
    :root {
        --rand: 1.25rem;
    }

    /* Secties krijgen minder hoogte dan op een breed scherm, maar wel meer
       dan ze hadden: de verhouding tussen wit en tekst hoort op een smal
       scherm rúimer te zijn, niet krapper. */
    .vak { padding-block: var(--ruimte-8); }
    .vak--kort { padding-block: var(--ruimte-7); }

    .vak__kop { margin-bottom: var(--ruimte-6); }

    /* Kaarten en rasters uit elkaar. Twee kaarten die op een telefoon tegen
       elkaar plakken, lezen als één blok. */
    .raster { gap: var(--ruimte-5); }
    .kaart { padding: var(--ruimte-5); }

    .proza p + p { margin-top: var(--ruimte-4); }

    /* De feitenbalk stond met een negatieve marge over de kop heen. Op een
       telefoon staat die kop krap en wordt dat verdringen in plaats van
       overlappen. */
    .feiten {
        margin-top: var(--ruimte-5);
        grid-template-columns: 1fr 1fr;
    }

    .feit { padding-block: var(--ruimte-4); }

    /* De agenda en de zijkolom onder elkaar, met ruimte ertussen. */
    .startraster { gap: var(--ruimte-6) !important; }
}

@media (max-width: 480px) {

    .vak { padding-block: var(--ruimte-7); }

    /* Knoppen onder elkaar en over de volle breedte. Twee knoppen naast
       elkaar op driehonderd pixels levert twee knoppen op waar je telkens
       naast duwt. */
    .held__knoppen,
    .ban__knoppen {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
    }

    .held__knoppen .knop,
    .ban__knoppen .knop {
        justify-content: center;
    }
}

/* ══════════════════════════════════════════ de banner op een telefoon ══ */

@media (max-width: 640px) {

    /* Minder hoog, want een kop die het hele scherm vult laat een bezoeker
       niet zien dat er nog iets onder staat. */
    .ban--hoog { min-height: min(74dvh, 560px); }
    .ban--scherm { min-height: 86dvh; }

    .ban__binnen { padding-block: var(--ruimte-7); }
    .ban__tekst { gap: var(--ruimte-3); }

    /* De waas wat zwaarder: op een klein scherm staat de tekst dichter op het
       beeld en wordt hij sneller onleesbaar. */
    .ban__beeld::after { --waas: calc(var(--waas, .45) * 1.15); }
}

/* ═════════════════════════════════════════ de widgets op een telefoon ══ */

@media (max-width: 560px) {

    /* Het scorebord: twee ploegen naast elkaar blijft juist, maar de knopjes
       eronder mogen groter. Dit wordt met een duim bediend, buiten, in de zon. */
    .teller__kleinknop {
        min-width: 54px;
        padding: 10px 12px;
        font-size: var(--tekst-m);
    }

    .teller__voet .knop { flex: 1 1 auto; justify-content: center; }

    .teller { padding: var(--ruimte-4); }
    .teller__ploeg { padding: var(--ruimte-3) var(--ruimte-2); }

    /* De aftelklok: het getal en de tekst onder elkaar in plaats van naast. */
    .aftel {
        grid-template-columns: auto 1fr;
        gap: var(--ruimte-3);
    }

    .aftel__pijl { display: none; }

    /* De kroniek schuift al; alleen de kaarten wat smaller zodat je ziet dat
       er meer naast staat. */
    .kroniek__punt { flex-basis: min(15rem, 78vw); }
}

/* ───────────────────────────────────────────────────── het lokvak ── */

/* Het verstopte veld tegen spam. Dit stond tot 10 september 2026 enkel in het
   thema bloesem, terwijl drie plugins het gebruiken: de cadeaulijst, de fotomuur
   en de gastenlijst. Op elk ander thema stond er dus zichtbaar een veld
   "Website" boven het formulier, en wie het invulde zag zijn bericht stil
   verdwijnen. Erger dan geen lokvak.

   Het staat daarom nu in elk thema. Verplaatsen naar één gedeeld bestand is
   beter, maar dat bestaat vandaag niet en dit moest vanavond recht. */
.brl-verstopt {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}