/*
 * home-v2-social-float.css — zwevende social-media-knoppen op de homepage (v2).
 *
 * Raw geladen (geen Vite-build) — zelfde patroon als home-v2-partners.css.
 * Verticale stapel ronde knoppen, vast gepositioneerd aan de rechterkant en
 * verticaal gecentreerd. Wordt alleen geladen (en gerenderd) wanneer minstens
 * één kanaal is ingevuld in Beheer → Instellingen → Zakelijke Informatie.
 *
 * Donkere merkkleuren per platform blijven ondoorzichtig boven fotografie,
 * zodat witte iconen onafhankelijk van de onderliggende foto AA-contrast houden.
 */

/* Container: fixed rechts, verticaal gecentreerd, boven de content maar onder
   Bootstrap-modals/-backdrops (modal-backdrop = 1050) en de cookie-banner. */
.hpv2-social-float {
    position: fixed;
    top: 50%;
    right: 0.65rem;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 1030;
}

/* Het gedeelde v2-taptoken bewaakt 48px. De ondoorzichtige vulling en dubbele
   lichte/donkere rand houden component en icoon herkenbaar boven iedere foto. */
.hpv2-social-float__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--hpv2-tap-min, 48px);
    height: var(--hpv2-tap-min, 48px);
    border: 2px solid rgba(255, 255, 255, 0.92);
    border-radius: 50%;
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(12, 10, 9, 0.92), 0 5px 14px rgba(0, 0, 0, 0.34);
    opacity: 1;
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Icoon vult de knop proportioneel; currentColor = wit uit de knop. */
.hpv2-social-float__btn svg {
    width: 20px;
    height: 20px;
    display: block;
}

/* Hover/focus: lichte schaal-lift; kleur blijft het merk-vlak (geen underline). */
.hpv2-social-float__btn:hover,
.hpv2-social-float__btn:focus-visible {
    color: #ffffff;
    transform: translateY(-1px);
    box-shadow: 0 0 0 1px rgba(12, 10, 9, 0.96), 0 7px 18px rgba(0, 0, 0, 0.42);
}

/* Zichtbare focus-ring voor keyboard-navigatie (WCAG). */
.hpv2-social-float__btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* --- Merk-kleuren per platform --- */
.hpv2-social-float__btn--facebook {
    background: #0f56b3;
}

/* Solide donker magenta bewaart het Instagram-karakter en maakt contrast meetbaar. */
.hpv2-social-float__btn--instagram {
    background: #7a246d;
}

.hpv2-social-float__btn--whatsapp {
    background: #08783f;
}

/* Mobiel: de vaste stack vervalt volledig. Dezelfde kanalen blijven bereikbaar
   in de inhoudsgestuurde "Volg ons"-sectie en footer, terwijl geen enkele
   beschikbaarheidsknop, kaart of tekst nog door fixed bediening wordt bedekt. */
@media (max-width: 575.98px) {
    .hpv2-social-float {
        display: none;
    }
}

/* Geen hoverbeweging voor bezoekers met reduced-motion-voorkeur. */
@media (prefers-reduced-motion: reduce) {
    .hpv2-social-float__btn {
        transition: none;
    }

    .hpv2-social-float__btn:hover,
    .hpv2-social-float__btn:focus-visible {
        transform: none;
    }
}

/* Print: zwevende knoppen niet mee afdrukken. */
@media print {
    .hpv2-social-float {
        display: none;
    }
}

/* ============================================================
   "Volg ons"-sectie (.hpv2-follow) — volg-knoppen Facebook/Instagram.
   De sectie zelf erft spacing/typografie van .hpv2-section, -label,
   -title en -lead uit home-v2.css; hier staan alleen de pill-knoppen.
   Zelfde merk-kleuren als de zwevende knoppen hierboven.
   ============================================================ */

/* Knoppenrij onder de lead-tekst: wrapt netjes op smalle schermen. */
.hpv2-follow-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-top: 1.6rem;
}

/* Pill-knop met merk-achtergrond, wit icoon + label. */
.hpv2-follow-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.78rem 1.5rem;
    border-radius: 999px;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

/* Brand-icoon in de knop; currentColor = wit uit de knop. */
.hpv2-follow-btn svg {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
}

/* Hover/focus: zelfde subtiele lift als de zwevende knoppen. */
.hpv2-follow-btn:hover,
.hpv2-follow-btn:focus-visible {
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.3);
}

/* Zichtbare focus-ring voor keyboard-navigatie (WCAG). */
.hpv2-follow-btn:focus-visible {
    outline: 2px solid #ffffff;
    outline-offset: 3px;
}

/* Merk-kleuren — identiek aan de zwevende knoppen voor herkenbaarheid. */
.hpv2-follow-btn--facebook {
    background: #1877f2;
}

.hpv2-follow-btn--instagram {
    background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285aeb 90%);
}

/* Mobiel: knoppen volle breedte zodat ze comfortabel tikbaar zijn. */
@media (max-width: 575.98px) {
    .hpv2-follow-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Geen lift-animatie bij reduced-motion-voorkeur. */
@media (prefers-reduced-motion: reduce) {
    .hpv2-follow-btn {
        transition: none;
    }

    .hpv2-follow-btn:hover,
    .hpv2-follow-btn:focus-visible {
        transform: none;
    }
}