/* ==========================================================================
   Verduurzaamwijs — global sticky footer CTA
   Compact bar pinned to the bottom-right: logo + phone + primary CTA +
   WhatsApp, collapsible. It hugs its content instead of spanning the page.
   Revealed only once the visitor has scrolled past the hero (JS adds
   .is-visible); collapses to a small handle on the right.
   Self-contained: falls back to its own tokens when header.css is absent.
   ========================================================================== */

.pds-stickycta {
    --pdsc-purple: var(--pdsh-purple, #6A248C);
    --pdsc-purple-dark: var(--pdsh-purple-dark, #4E1A68);
    --pdsc-orange: var(--pdsh-orange, #FF7F0D);
    --pdsc-ink: var(--pdsh-ink, #17092A);
    --pdsc-body: var(--pdsh-body, #554C60);
    --pdsc-line: var(--pdsh-line, #E6DFE9);
    --pdsc-wa: #25D366;
    --pdsc-display: var(--pdsh-display, "SUSE", "DM Sans", system-ui, sans-serif);
    --pdsc-text: var(--pdsh-text, "DM Sans", system-ui, sans-serif);
    --pdsc-ease: var(--pdsh-ease, cubic-bezier(.22, .61, .36, 1));
    --pdsc-ease-out: var(--pdsh-ease-out, cubic-bezier(.16, 1, .3, 1));

    position: fixed;
    inset: auto 0 0;
    z-index: 88;
    display: flex;
    justify-content: flex-end;
    padding: 0 clamp(.75rem, 3vw, 1.5rem) max(.75rem, env(safe-area-inset-bottom));
    pointer-events: none;
}

.pds-stickycta[hidden] {
    display: none;
}

.pds-stickycta * {
    box-sizing: border-box;
}

.pds-stickycta__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* --- The bar itself ------------------------------------------------------ */

.pds-stickycta__bar {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: auto;
    max-width: 100%;
    padding: .4375rem .4375rem .4375rem .875rem;
    border: 1px solid var(--pdsc-line);
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    backdrop-filter: blur(18px) saturate(1.4);
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    box-shadow: 0 12px 30px rgba(23, 9, 42, .14);
    font-family: var(--pdsc-text);

    /* Hidden state: tucked below the fold, no interaction. */
    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s var(--pdsc-ease), transform .42s var(--pdsc-ease-out), visibility .42s;
}

.pds-stickycta.is-visible .pds-stickycta__bar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

/* --- Brand --------------------------------------------------------------- */

.pds-stickycta__brand {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    text-decoration: none;
    min-width: 0;
}

/* Wide screens show the full horizontal logo; the loose beeldmerk only takes
   over on phones, where the logo is hidden with the rest of the brand text. */
.pds-stickycta__mark {
    display: none;
    flex: none;
    width: 30px;
    height: 27px;
}

.pds-stickycta__mark svg {
    display: block;
    width: 100%;
    height: 100%;
}

.pds-stickycta__brand-text {
    display: flex;
    flex-direction: column;
    gap: .125rem;
    min-width: 0;
}

.pds-stickycta__logo {
    display: block;
    height: 26px;
    width: auto;
}

/* The strapline is what stretched the bar across the page; a compact bar keeps
   the logo only. Remove this rule to bring the line back. */
.pds-stickycta__brand-text span {
    display: none;
}

/* --- Actions ------------------------------------------------------------- */

.pds-stickycta__actions {
    display: flex;
    align-items: center;
    gap: .375rem;
    flex: none;
}

.pds-stickycta__phone,
.pds-stickycta__cta,
.pds-stickycta__wa,
.pds-stickycta__collapse {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4375rem;
    height: 40px;
    border: 0;
    border-radius: 999px;
    font-family: var(--pdsc-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .25s var(--pdsc-ease), color .25s var(--pdsc-ease),
                transform .25s var(--pdsc-ease), box-shadow .25s var(--pdsc-ease);
}

.pds-stickycta__phone svg,
.pds-stickycta__cta svg,
.pds-stickycta__wa svg,
.pds-stickycta__collapse svg {
    flex: none;
    width: 16px;
    height: 16px;
}

.pds-stickycta__phone {
    padding-inline: .8125rem;
    background: rgba(23, 9, 42, .05);
    color: var(--pdsc-ink);
}

.pds-stickycta__phone svg {
    color: var(--pdsc-orange);
}

.pds-stickycta__phone:hover {
    background: rgba(23, 9, 42, .09);
}

.pds-stickycta__cta {
    padding-inline: 1.125rem;
    background: var(--pdsc-purple);
    color: #fff;
    box-shadow: 0 8px 18px rgba(106, 36, 140, .26);
}

.pds-stickycta__cta:hover {
    background: var(--pdsc-purple-dark);
    transform: translateY(-1px);
    box-shadow: 0 12px 26px rgba(106, 36, 140, .34);
}

.pds-stickycta__wa {
    width: 40px;
    padding: 0;
    background: var(--pdsc-wa);
    color: #fff;
}

.pds-stickycta__wa svg {
    width: 20px;
    height: 20px;
}

.pds-stickycta__wa:hover {
    background: #1EBE5B;
    transform: translateY(-1px);
}

.pds-stickycta__collapse {
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    color: var(--pdsc-body);
}

.pds-stickycta__collapse:hover {
    background: rgba(23, 9, 42, .06);
    color: var(--pdsc-ink);
}

.pds-stickycta__phone:focus-visible,
.pds-stickycta__cta:focus-visible,
.pds-stickycta__wa:focus-visible,
.pds-stickycta__collapse:focus-visible,
.pds-stickycta__brand:focus-visible,
.pds-stickycta__handle:focus-visible {
    outline: 3px solid var(--pdsc-orange);
    outline-offset: 2px;
}

/* --- Collapsed state ----------------------------------------------------- */

/* Collapsing swaps the bar for a small handle on the right. The handle is only
   reachable — and only announced — while it is actually on screen; JS flips
   tabindex/aria-hidden in step with these rules. */
.pds-stickycta__handle {
    position: absolute;
    right: clamp(.75rem, 3vw, 1.5rem);
    bottom: max(.75rem, env(safe-area-inset-bottom));
    display: inline-flex;
    align-items: center;
    gap: .4375rem;
    height: 40px;
    padding-inline: 1rem;
    border: 0;
    border-radius: 999px;
    background: var(--pdsc-purple);
    color: #fff;
    font-family: var(--pdsc-text);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 14px 32px rgba(23, 9, 42, .24);

    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;
    visibility: hidden;
    transition: opacity .3s var(--pdsc-ease), transform .42s var(--pdsc-ease-out), visibility .42s,
                background-color .25s var(--pdsc-ease);
}

.pds-stickycta__handle svg {
    width: 16px;
    height: 16px;
}

.pds-stickycta__handle:hover {
    background: var(--pdsc-purple-dark);
}

.pds-stickycta.is-visible.is-collapsed .pds-stickycta__handle {
    opacity: 1;
    transform: none;
    pointer-events: auto;
    visibility: visible;
}

.pds-stickycta.is-collapsed .pds-stickycta__bar {
    opacity: 0;
    transform: translateY(140%);
    pointer-events: none;
    visibility: hidden;
}

/* --- Room at the bottom of the page -------------------------------------- */

/* Keeps the bar from covering the last strip of the real footer. */
body.pds-stickycta-on {
    padding-bottom: var(--pdsc-space, 72px);
}

/* --- Mobile -------------------------------------------------------------- */

@media (max-width: 767px) {

    .pds-stickycta {
        padding-inline: .625rem;
    }

    .pds-stickycta__bar {
        gap: .5rem;
        width: 100%;
        padding: .5rem .5rem .5rem .75rem;
        border-radius: 16px;
    }

    /* The wordmark costs more than it earns on a phone: the mark alone keeps
       the bar anchored while the actions get the room. */
    .pds-stickycta__brand-text {
        display: none;
    }

    .pds-stickycta__mark {
        display: block;
    }

    .pds-stickycta__actions {
        flex: 1;
        justify-content: flex-end;
        gap: .375rem;
    }

    .pds-stickycta__phone {
        width: 44px;
        height: 44px;
        padding: 0;
    }

    .pds-stickycta__phone-text {
        display: none;
    }

    .pds-stickycta__cta {
        flex: 1;
        min-width: 0;
        height: 44px;
        padding-inline: 1rem;
        font-size: .875rem;
    }

    .pds-stickycta__cta span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .pds-stickycta__wa {
        width: 44px;
        height: 44px;
    }

    .pds-stickycta__collapse {
        width: 30px;
        height: 44px;
    }

    body.pds-stickycta-on {
        --pdsc-space: 72px;
    }
}

/* --- Motion preferences --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    .pds-stickycta__bar,
    .pds-stickycta__handle {
        transition: opacity .01ms, visibility .01ms;
        transform: none;
    }

    .pds-stickycta.is-collapsed .pds-stickycta__bar,
    .pds-stickycta__handle {
        transform: none;
    }

    .pds-stickycta__cta:hover,
    .pds-stickycta__wa:hover {
        transform: none;
    }
}

/* The mobile menu owns the screen while it is open. */
body.pds-nav-open .pds-stickycta {
    display: none;
}

@media print {

    .pds-stickycta {
        display: none;
    }

    body.pds-stickycta-on {
        padding-bottom: 0;
    }
}