/* =========================================================
   Sticky Footer Bar – Frontend CSS
   De Wouw Factor Internet | https://wouwfactor.com
   ========================================================= */

:root {
    --sfb-bg:         #ffffff;
    --sfb-bg-hover:   #f0f0f0;
    --sfb-text:       #333333;
    --sfb-text-hover: #0055aa;
    --sfb-icon:       #0055aa;
    --sfb-icon-hover: #003388;
    --sfb-divider:    #dddddd;
    --sfb-count:      4;
    --sfb-height:     64px;
    --sfb-transition: 0.18s ease;
}

/* ── Balk ─────────────────────────────────────────────── */
.sfb-bar {
    display:         none; /* standaard verborgen, mobiel zichtbaar */
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    z-index:         99999;
    height:          var(--sfb-height);
    background:      var(--sfb-bg);
    box-shadow:      0 -2px 12px rgba(0,0,0,.12);
    flex-direction:  row;
    align-items:     stretch;
    /* safe area voor iPhones */
    padding-bottom:  env(safe-area-inset-bottom, 0px);
}

/* Alleen weergeven op mobiel */
@media (max-width: 767px) {
    .sfb-bar {
        display: flex;
    }

    /* Ruimte zodat content niet achter balk verdwijnt */
    body {
        padding-bottom: calc(var(--sfb-height) + env(safe-area-inset-bottom, 0px));
    }
}

/* ── Knop ─────────────────────────────────────────────── */
.sfb-btn {
    flex:            1;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    text-decoration: none !important;
    background:      var(--sfb-bg) !important;
    color:           var(--sfb-text) !important;
    transition:      background var(--sfb-transition), color var(--sfb-transition);
    -webkit-tap-highlight-color: transparent;
    cursor:          pointer;
    padding:         6px 4px;
    min-width:       0;
}

.sfb-btn:hover,
.sfb-btn:focus,
.sfb-btn:active {
    background: var(--sfb-bg-hover) !important;
    color:      var(--sfb-text-hover) !important;
    outline:    none;
}

/* Scheidingsstreepje rechts van elke knop (behalve laatste) */
.sfb-btn--divider {
    border-right: 1px solid var(--sfb-divider);
}

/* ── Icoon ────────────────────────────────────────────── */
.sfb-btn__icon {
    display:     flex;
    align-items: center;
    font-size:   1.25rem;
    color:       var(--sfb-icon) !important;
    transition:  color var(--sfb-transition);
    line-height: 1;
}

.sfb-btn:hover   .sfb-btn__icon,
.sfb-btn:focus   .sfb-btn__icon,
.sfb-btn:active  .sfb-btn__icon {
    color: var(--sfb-icon-hover) !important;
}

/* ── Label ────────────────────────────────────────────── */
.sfb-btn__label {
    font-size:      0.65rem;
    font-weight:    600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space:    nowrap;
    overflow:       hidden;
    text-overflow:  ellipsis;
    max-width:      100%;
    color:          var(--sfb-text) !important;
    transition:     color var(--sfb-transition);
}

.sfb-btn:hover  .sfb-btn__label,
.sfb-btn:focus  .sfb-btn__label,
.sfb-btn:active .sfb-btn__label {
    color: var(--sfb-text-hover) !important;
}

/* ── Calendly-knop ────────────────────────────────────── */
.sfb-btn--calendly {
    cursor: pointer;
}

/* Calendly-popup overlay boven de footerbar tonen */
.calendly-overlay {
    z-index: 100000 !important;
}

/* ── Taalswitcher (TranslatePress) ────────────────────── */
/* TranslatePress heeft al een eigen, werkende taalswitcher op de
   pagina (de "floating switcher"). In plaats van het element te
   verplaatsen, positioneren we het opnieuw met CSS, als laatste
   kolom in de footerbar. Dit hergebruikt de eigen, altijd-correcte
   links van TranslatePress zelf; er wordt geen eigen URL-logica
   gebruikt. Het element krijgt via JS de class .sfb-lang-active,
   zodat deze CSS altijd aanslaat, ongeacht DOM-volgorde of
   browserondersteuning voor :has(). */
@media (max-width: 767px) {
    .trp-language-switcher.sfb-lang-active {
        position:        fixed !important;
        top:              auto !important;
        right:            0 !important;
        bottom:           0 !important;
        left:             auto !important;
        width:            calc(100% / (var(--sfb-count) + 1)) !important;
        height:           var(--sfb-height) !important;
        max-width:        none !important;
        max-height:       none !important;
        min-width:        0 !important;
        margin:           0 !important;
        padding:          0 !important;
        gap:              0 !important;
        background:       var(--sfb-bg) !important;
        border-radius:    0 !important;
        box-shadow:       none !important;
        z-index:          100000 !important;
        display:          flex !important;
        visibility:       visible !important;
        opacity:          1 !important;
        padding-bottom:   env(safe-area-inset-bottom, 0px) !important;
        box-sizing:       border-box !important;
    }

    .trp-language-switcher.sfb-lang-active .trp-language-switcher-inner {
        display:    flex !important;
        visibility: visible !important;
        opacity:    1 !important;
        width:      100% !important;
        height:     100% !important;
        margin:     0 !important;
        padding:    0 !important;
        gap:        0 !important;
    }

    .trp-language-switcher.sfb-lang-active .trp-language-item {
        flex:            1 1 100% !important;
        width:           100% !important;
        max-width:       100% !important;
        display:         flex !important;
        visibility:      visible !important;
        opacity:         1 !important;
        align-items:     center !important;
        justify-content: center !important;
        margin:          0 !important;
        padding:         0 !important;
    }

    /* Vlag-afbeelding zelf: zorg dat hij altijd zichtbaar is met een
       nette grootte, ongeacht TranslatePress' eigen mobiel-CSS. */
    .trp-language-switcher.sfb-lang-active .trp-flag-image {
        display:    block !important;
        visibility: visible !important;
        opacity:    1 !important;
        width:      26px !important;
        height:     19px !important;
        max-width:  none !important;
    }

    /* Taalnaam (indien TranslatePress die toont): verbergen, want de
       footerbar-knoppen tonen ook geen tekst onder een los icoon hier. */
    .trp-language-switcher.sfb-lang-active .trp-ls-shortcode-language-name,
    .trp-language-switcher.sfb-lang-active .trp-language-switcher-language-name {
        display: none !important;
    }

    /* Verberg de vlag van de huidige taal: alleen de andere taal
       (om naar te wisselen) moet zichtbaar blijven. */
    .trp-language-switcher.sfb-lang-active .trp-language-item[aria-current="page"] {
        display: none !important;
    }

    /* De laatste echte knop in de balk krijgt nu een streepje, omdat
       de taalswitcher (los element) er rechts naast komt te liggen. */
    .sfb-bar--with-lang .sfb-btn:last-child {
        border-right: 1px solid var(--sfb-divider);
    }

    /* Ruimte reserveren in de balk zelf voor de losse switcher rechts.
       Let op: er komt 1 kolom BIJ (de vlag), dus delen door
       (aantal knoppen + 1), niet door het aantal knoppen alleen. */
    .sfb-bar--with-lang {
        padding-right: calc(100% / (var(--sfb-count) + 1));
    }

    .sfb-bar--with-lang .sfb-btn {
        flex: 1 1 calc(100% / (var(--sfb-count) + 1)) !important;
    }
}
/* ── Sticky sidebar knop ──────────────────────────────────── */
.sfb-sidebar {
    position:       fixed;
    right:          0;
    top:            50%;
    transform:      translate(0, -50%);
    z-index:        1000;
    animation:      sfb-slide-in .8s cubic-bezier(.16,1,.3,1) both;
}

.sfb-sidebar__btn {
    box-sizing:      border-box;
    width:           40px;
    padding:         16px 8px;
    border:          none;
    cursor:          pointer;
    text-decoration: none;
    background:      var(--sfb-sb-color, #59b79f);
    color:           var(--sfb-sb-text, #ffffff);
    border-radius:   14px 0 0 14px;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             12px;
    box-shadow:      -8px 10px 26px rgba(27,30,35,.22);
    transition:      width .34s cubic-bezier(.16,1,.3,1),
                     background .3s,
                     color .3s,
                     box-shadow .3s;
}

.sfb-sidebar__btn:hover,
.sfb-sidebar__btn:focus-visible {
    width:      60px;
    background: #ffffff;
    color:      var(--sfb-sb-color, #59b79f);
    box-shadow: -16px 14px 36px rgba(27,30,35,.28);
    outline:    none;
}

/* ── Sidebar logo — onderdeel van de knop ─────────────── */
.sfb-sidebar__logo {
    display:    block;
    width:      26px;
    height:     auto;
    max-height: 34px;
    object-fit: contain;
    flex-shrink: 0;
    transition: opacity .3s;
}

/* Hover-logo standaard verbergen */
.sfb-sidebar__logo--hover {
    display: none;
}

/* Bij hover: wissel logo */
.sfb-sidebar__btn:hover .sfb-sidebar__logo--default,
.sfb-sidebar__btn:focus-visible .sfb-sidebar__logo--default {
    display: none;
}

.sfb-sidebar__btn:hover .sfb-sidebar__logo--hover,
.sfb-sidebar__btn:focus-visible .sfb-sidebar__logo--hover {
    display: block;
}

.sfb-sidebar__label {
    writing-mode:   vertical-rl;
    transform:      rotate(180deg);
    font-size:      13px;
    font-weight:    700;
    line-height:    1;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space:    nowrap;
    color:          inherit;
}

@keyframes sfb-slide-in {
    from { transform: translate(150%, -50%); opacity: 0; }
    to   { transform: translate(0, -50%);   opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .sfb-sidebar { animation: none; }
}