/* ===========================================================================
   sprekers-filters-mobiel.css — het filterblok op de telefoon
   ===========================================================================

   HET PROBLEEM

   Op een telefoon stond het hele filterblok boven de resultaten: zoekveld,
   knop Zoeken, knop Alle filters, acht populaire onderwerpen, de link Alle
   onderwerpen, en daaronder vijf uitklappers (Thema, Onderwerp, Taal,
   Tarief, Geslacht). Samen bijna twee schermen. Je kwam op /sprekers en zag
   geen enkele spreker.

   WAT ER NU GEBEURT

   Dicht staat er alleen nog een zoekveld met daaronder twee knoppen:
   Zoeken en Filters. Dat is ongeveer 130 pixels in plaats van twee
   schermen, dus de eerste sprekers staan meteen in beeld.

   Druk je op Filters, dan wordt diezelfde filterkaart scherm vullend. Alles
   staat er nog in, op precies dezelfde plek in de HTML -- er wordt niets
   verplaatst of nagebouwd. Onderaan zit een knop die vertelt hoeveel
   sprekers er overblijven, en die het paneel sluit.

   Sluit je het, dan sta je terug bij de resultaten, met de chips van wat je
   hebt aangevinkt eronder. Die chips stonden al buiten de filterkaart, dus
   daar hoefde niets voor te veranderen.

   WAT DIT BESTAND NIET DOET

   Boven 992 pixels verandert er helemaal niets. Alles hieronder staat in
   één media query; op een laptop of desktop bestaat deze opmaak simpelweg
   niet.

   Er staat ook geen enkele kleur hard in. Alles loopt via de tokens die
   hsb-sprekers.css al zet (--sb-kaart, --sb-tekst, --sb-lijn, --sb-knop).
   Daardoor volgt dit paneel vanzelf de donkere modus, zonder dat hier een
   prefers-color-scheme-regel staat. Dat is met opzet: zo'n regel in een
   los bestand was eerder precies de reden dat er zwarte vlakken op een
   lichte pagina verschenen.

   Niet plakkerig. De knop Filters scrollt gewoon mee omhoog, zoals je voor
   de filterkaart zelf ook wilde.
   =========================================================================== */

/* De kop en de voet van het paneel bestaan alleen op de telefoon. Deze
   regel staat met opzet BUITEN de media query hieronder.

   Eerst stond hij erbinnen, en dat ging mis zodra het venster van smal
   naar breed ging -- bij het draaien van een tablet bijvoorbeeld. De
   JavaScript had kop en voet dan al aangemaakt, de media query gold niet
   meer, en dus stonden "Filters / Wissen / x" en een oranje knop "Toon 444
   sprekers" ineens midden in de filterkaart op een breed scherm.

   Buiten de media query zijn ze altijd weg, behalve waar hieronder
   uitdrukkelijk staat dat ze te zien moeten zijn. */
.sb-mf-kop,
.sb-mf-voet { display: none; }

@media (max-width: 991.98px) {

    /* -----------------------------------------------------------------
       DICHT: alleen zoeken en een knop
       ----------------------------------------------------------------- */

    /* De populaire onderwerpen en de vijf uitklappers gaan uit het zicht.
       Ze blijven in de HTML staan -- ook voor Google, dat de pagina leest
       zoals de server hem opstuurt.

       Let op de klasse sb-mf-klaar op de body: die zet de JavaScript er pas
       op als het paneel ook echt werkt. Zonder JavaScript wordt er dus
       niets verborgen en staat het filterblok er gewoon zoals vroeger. Dat
       is bewust: iets wegstoppen achter een knop die het niet doet, is
       erger dan een lang filterblok. */
    body.sb-mf-klaar #filter-card:not(.sb-mf-paneel) .sb-snel,
    body.sb-mf-klaar #filter-card:not(.sb-mf-paneel) .sb-filter-row {
        display: none;
    }

    /* Zoekveld over de volle breedte, daaronder de twee knoppen naast
       elkaar. Dat scheelt een hele regel ten opzichte van drie knoppen
       onder elkaar. */
    .sb-zoekrij {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .sb-zoekrij .sb-search-wrap { flex: 1 1 100%; }
    .sb-zoekrij .sb-zoekknop,
    .sb-zoekrij .sb-allefilters {
        flex: 1 1 0;
        justify-content: center;
    }

    /* Het cijfertje achter Filters: hoeveel filters staan er aan. Het
       wordt al door de bestaande JavaScript gevuld. */
    .sb-allefilters__aantal:not(:empty) {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-width: 20px;
        height: 20px;
        padding: 0 6px;
        margin-left: 2px;
        border-radius: 10px;
        background: var(--sb-knop, #c24d16);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        line-height: 1;
    }

    /* -----------------------------------------------------------------
       OPEN: dezelfde kaart, scherm vullend
       ----------------------------------------------------------------- */

    /* De pagina eronder mag niet meescrollen. De JavaScript onthoudt waar
       je was en zet je daar bij het sluiten weer neer. */
    body.sb-mf-open {
        overflow: hidden;
    }

    body.sb-mf-open #filter-card.sb-mf-paneel {
        position: fixed;
        inset: 0;
        z-index: 2000;              /* boven de menubalk */
        margin: 0;
        max-width: none;

        /* GEEN width:100% hier.

           Die stond er eerst wel, en dan loopt het paneel rechts van het
           scherm af: inset:0 bepaalt de breedte al, en width:100% zet daar
           nog eens de volle breedte overheen -- waarna de padding van 16
           pixels er aan weerskanten bovenop komt. Het kruisje viel half
           buiten beeld.

           box-sizing erbij voor het geval sprekers.css het ooit anders
           zet: padding hoort binnen de breedte te vallen, niet erbuiten. */
        box-sizing: border-box;

        /* Kolom, zodat de voet met margin-top:auto naar onderen zakt als er
           weinig filters open staan. Zonder dit zweeft de oranje knop
           halverwege het scherm met wit eronder. Scrollt de inhoud wel over
           het scherm heen, dan houdt position:sticky hem alsnog in beeld. */
        display: flex;
        flex-direction: column;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
        background: var(--sb-kaart, #fff);
        padding: 0 16px 0;
        /* Ruimte voor de streep onderaan het scherm op een iPhone. */
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    /* In het paneel staat alles weer aan. */
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-snel,
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-filter-row {
        display: block;
    }
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-filter-row {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-fd {
        width: 100%;
    }

    /* De knop Filters zelf heeft in het paneel geen functie meer; sluiten
       doe je met het kruisje of met de knop onderaan. */
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-allefilters {
        display: none;
    }

    /* -----------------------------------------------------------------
       KOP EN VOET van het paneel

       Allebei position:sticky binnen de kaart die zelf scrollt. Daardoor
       hoeft de inhoud er niet in een extra div omheen, en blijft de HTML
       dus precies zoals hij was.
       ----------------------------------------------------------------- */

    body.sb-mf-open .sb-mf-kop {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 2;
        align-items: center;
        gap: 12px;
        margin: 0 -16px;
        padding: 14px 16px;
        background: var(--sb-kaart, #fff);
        border-bottom: 1px solid var(--sb-lijn, #e5e8ef);
    }

    .sb-mf-kop__titel {
        flex: 1 1 auto;
        margin: 0;
        font-size: 18px;
        font-weight: 700;
        color: var(--sb-tekst, #1c2b45);
    }

    .sb-mf-kop__wis {
        flex: 0 0 auto;
        padding: 6px 10px;
        border: 0;
        background: none;
        font-size: 14px;
        font-weight: 600;
        color: var(--sb-knop, #c24d16);
        cursor: pointer;
    }
    .sb-mf-kop__wis[hidden] { display: none; }

    .sb-mf-kop__sluit {
        flex: 0 0 auto;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        padding: 0;
        border: 1px solid var(--sb-lijn, #e5e8ef);
        border-radius: 12px;
        background: var(--sb-kaart, #fff);
        color: var(--sb-tekst, #1c2b45);
        font-size: 22px;
        line-height: 1;
        cursor: pointer;
    }

    body.sb-mf-open .sb-mf-voet {
        display: block;
        margin-top: auto;
        position: sticky;
        bottom: 0;
        z-index: 2;
        margin-right: -16px;
        margin-left: -16px;
        margin-bottom: 0;
        padding: 12px 16px;
        padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
        background: var(--sb-kaart, #fff);
        border-top: 1px solid var(--sb-lijn, #e5e8ef);
    }

    .sb-mf-voet__knop {
        display: block;
        width: 100%;
        padding: 15px 18px;
        border: 0;
        border-radius: 12px;
        background: var(--sb-knop, #c24d16);
        color: #fff;
        font-size: 16px;
        font-weight: 700;
        cursor: pointer;
    }

    /* De uitklappers in het paneel mogen zo hoog worden als ze willen; de
       kaart eromheen scrollt toch al. Een eigen schuifbalkje in een lijst
       die zelf in een schuivend paneel staat, is niet te bedienen. */
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-fd-menu {
        position: static;
        max-height: none;
        box-shadow: none;
        border-radius: 12px;
        box-sizing: border-box;
        width: 100%;
    }

    /* Het zoekveld binnen zo'n lijst is opgemaakt voor een menu dat los over
       de pagina zweeft. Staat het menu gewoon in de stroom, dan steekt het
       veld een paar pixels buiten de lijst uit. */
    body.sb-mf-open #filter-card.sb-mf-paneel .sb-fd-zoek__veld {
        box-sizing: border-box;
        width: 100%;
    }
}