/*
 * De "Snel naar"-balk onderaan /open-dagen.
 *
 * De markup komt uit het YOOtheme-template (#floating-bottom-bar > .bar-content
 * met een span en drie links), dus die selectors staan vast en er zijn geen
 * klassen aan toe te voegen. Alles hieronder is dus opmaak per selector.
 *
 * ## Waarom dit niet meer oranje is
 *
 * Eerdere versies van dit bestand maakten de balk oranje: de snippet met
 * #ff6b35 → #f7931e en een gradient, daarna een eigen #c2551a. Beide waren fout,
 * en om verschillende redenen.
 *
 * Nagemeten op de live site (28 augustus 2026), thema-knoppen:
 *
 *     achtergrond  #ED6C20      radius 500px (pill)
 *     tekst        #fff         Inter, 16px / regelhoogte 40px / gewicht 400
 *     padding      0 23px       geen schaduw
 *
 * De vorige versie week daar op vijf punten van af: kleur (#c2551a), radius
 * (30px en 25px), lettertype (Plus Jakarta Sans in plaats van Inter), grootte en
 * gewicht (14px/600), en een zware schaduw. Vandaar dat de balk als een ander
 * merk las, en niet alleen als een andere kleur.
 *
 * ## Waarom niet gewoon de thema-oranje als balk
 *
 * Omdat oranje geen kleine tekst kan dragen, in geen van beide richtingen:
 *
 *     wit op #ED6C20 (thema)        3,10:1   AA klein: nee
 *     wit op #E8722A (huisstijl)    3,06:1   AA klein: nee
 *     wit op #c2551a (vorige)       4,56:1   AA klein: ja, maar off-brand
 *     donkerbruin op #ED6C20        2,96:1   AA klein: nee
 *
 * Op een oranje vlak is er dus geen thema-kleur waarmee een uitgelichte chip zich
 * kan onderscheiden — elke poging levert opnieuw een verzonnen kleur op. Op een
 * wit vlak komt élk element uit het thema: donkere tekst op wit (17,3:1) en één
 * hoofdactie die letterlijk de thema-knop is.
 *
 * De enige wit-op-oranje die overblijft is het label van die hoofdactie, en dat
 * is exact de combinatie die het thema op alle zes andere knoppen van deze pagina
 * gebruikt. Dat is een bewuste keuze voor consistentie: één element donkerder
 * maken verbetert de toegankelijkheid van de site niet, het maakt alleen dat ene
 * element afwijkend. Wil je die 3,10:1 echt oplossen, dan is dat een
 * thema-brede beslissing over de primaire kleur en niet iets voor deze plugin.
 *
 * Geen lettertype opgegeven: dat erft van de pagina. Een plugin die zijn eigen
 * font vastzet maakt dezelfde fout als een plugin die zijn eigen oranje kiest.
 */

#floating-bottom-bar {
    position: fixed;
    bottom: 20px;
    /*
     * Centreren met left/right + auto-marges, niet met `left:50%` en een
     * transform. Dat laatste maakt de beschikbare breedte de hálve viewport:
     * op 1200px kon de balk niet breder worden dan 600px, en dan wrappen de
     * chips naar een tweede regel zonder dat er ruimte tekort is. Nagemeten op
     * 28 augustus 2026 (600x108 op een viewport van 1200 breed).
     */
    left: 0;
    right: 0;
    margin-inline: auto;
    width: fit-content;
    max-width: min(90vw, 62rem);
    background: #fff;
    border-radius: 500px;
    padding: 10px 16px;
    z-index: 999;
    /* Een zwevende balk heeft hoogte nodig, maar subtiel: de schaduw was eerder
     * zwaarder dan alles op de pagina eromheen. */
    box-shadow: 0 4px 16px rgba(31, 26, 21, 0.14);
}

#floating-bottom-bar .bar-content {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}

#floating-bottom-bar .bar-content span {
    /* De tekstkleur van het thema (rgb(51,51,51)), niet een eigen grijs. */
    color: #333;
    font-size: 15px;
    font-weight: 600;
    padding-left: 8px;
    margin-right: 4px;
}

/* De chips zijn tekstknoppen op een wit vlak: geen vlak nodig, dus geen tweede
 * kleur nodig. Geometrie gelijk aan de thema-knop, zodat ze naast de hoofdactie
 * dezelfde hoogte hebben. */
#floating-bottom-bar .bar-content a {
    /* Zwart met gewicht 500: dat is de linkstijl van het thema (nagemeten:
     * twaalf links op deze pagina staan zo). Geen oranje tekst — die bestaat
     * nergens op de site, en de twee die er stonden waren van deze balk zelf. */
    color: #000;
    text-decoration: none;
    padding: 0 23px;
    border-radius: 500px;
    background: transparent;
    font-size: 16px;
    line-height: 40px;
    font-weight: 500;
    transition: background-color 0.2s ease, color 0.2s ease;
    white-space: nowrap;
}

#floating-bottom-bar .bar-content a:hover,
#floating-bottom-bar .bar-content a:focus-visible {
    /* Warme lichte tint uit de eigen achtergrondfamilie, geen nieuwe accentkleur. */
    background: #f7f2ec;
    color: #000;
}

/* De laatste link is de hoofdactie en is exact de primaire thema-knop. */
#floating-bottom-bar .bar-content a:last-child {
    background: #ED6C20;
    color: #fff;
}

#floating-bottom-bar .bar-content a:last-child:hover,
#floating-bottom-bar .bar-content a:last-child:focus-visible {
    /* Eén stap donkerder dan de thema-knop, alleen voor de hover-staat. */
    background: #d55f18;
    color: #fff;
}

#floating-bottom-bar .bar-content a:focus-visible {
    outline: 2px solid #000;
    outline-offset: 2px;
}

/*
 * Mobiel: een balk over de volle breedte, geen zwevende pil.
 *
 * Nagemeten op 375 x 812 (28 augustus 2026): met `width:auto` plus
 * `transform:translateX(-50%)` kromp de balk tot de breedte van de smalste chip
 * — 188 breed, 156 hoog — en met `border-radius:500px` werd dat een ovaal
 * midden op het scherm. Die bedekte allebei de heroknoppen volledig
 * ('Stel je woning open' en 'Bekijk alle woningen', allebei nagemeten als
 * overlappend). De vorige versie had daar een `min-width` tegen; die is bij het
 * herschrijven weggevallen.
 *
 * Van links naar rechts vastgezet in plaats van gecentreerd met een transform:
 * dan is de breedte een gegeven en niet een gevolg van de inhoud, en kan de
 * balk niet meer tot een blob krimpen. De chips mogen wrappen naar een tweede
 * regel; hij blijft dan een balk.
 */
@media (max-width: 768px) {
    #floating-bottom-bar {
        left: 12px;
        right: 12px;
        width: auto;
        max-width: none;
        bottom: 12px;
        padding: 8px 10px;
        border-radius: 22px;
    }

    #floating-bottom-bar .bar-content {
        gap: 4px 6px;
    }

    #floating-bottom-bar .bar-content span {
        font-size: 13px;
        padding-left: 4px;
        margin-right: 0;
    }

    #floating-bottom-bar .bar-content a {
        font-size: 14px;
        line-height: 34px;
        padding: 0 12px;
    }
}

/*
 * Onder de 420px past 'Snel naar:' er niet meer bij zonder de chips op drie
 * regels te duwen. Het label is een aankondiging van wat er naast staat; de
 * chips zeggen zelf al waar ze heen gaan.
 */
@media (max-width: 420px) {
    #floating-bottom-bar .bar-content span {
        display: none;
    }

    #floating-bottom-bar .bar-content a {
        font-size: 13px;
        padding: 0 10px;
    }
}