/* =========================================================================
   Studio Spreekwoord — Route Sticky CTA component
   -------------------------------------------------------------------------
   Fixed bottom-bar met routenaam + prijs + Bestel-knop op single-route.
   Verschijnt op scroll via JS-toggle van `.is-visible`-class
   (assets/js/components/route-sticky-cta.js).

   Geëxtraheerd uit pages/routes.css (sessie 2026-04-28 restore na Batch 3
   regressie). De legacy pages/routes.css wordt niet meer enqueued op
   single-route omdat premium-cpt.css bundle de plaats heeft ingenomen —
   deze component-CSS wordt apart enqueued via inc/assets.php zodat de
   sticky-CTA visuele stijl beschikbaar blijft.

   BEM-conventie blijft 1:1 zoals origineel; geen Tailwind utilities zodat
   `.ss-premium-cpt` scope niet vereist is en het op elke single-route
   werkt zonder rebuilden van de Tailwind bundle.
   ========================================================================= */

.ss-route-sticky-cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: var(--z-mobile-cta, 90);
    background: var(--color-primary);
    color: var(--color-text-inverse, #ffffff);
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
    transform: translateY(100%);
    transition: transform var(--transition-base, 200ms ease);
}

.ss-route-sticky-cta.is-visible {
    transform: translateY(0);
}

.ss-route-sticky-cta__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md, 1rem);
    padding-block: var(--space-sm, 0.75rem);
    max-width: var(--container-max, 1200px);
    margin-inline: auto;
    padding-inline: var(--space-md, 1rem);
}

.ss-route-sticky-cta__label {
    font-family: var(--font-heading, "Playfair Display", serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 16px);
    color: var(--color-text-inverse, #ffffff);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1 1 auto;
    min-width: 0;
}

.ss-route-sticky-cta__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm, 0.5rem);
    background: var(--color-verfstreep, #A85829); /* 2026-05-31 cta-contrast: fallback = AA-token */
    color: var(--color-text-inverse, #ffffff);
    padding: var(--space-sm, 0.625rem) var(--space-lg, 1.25rem);
    border-radius: var(--radius-md, 6px);
    font-family: var(--font-body, "Lato", sans-serif);
    font-weight: var(--font-weight-semibold, 600);
    font-size: var(--font-size-base, 15px);
    text-decoration: none;
    min-height: var(--min-touch, 44px);
    transition: background var(--transition-fast, 150ms ease);
    flex-shrink: 0;
}

.ss-route-sticky-cta__btn:hover {
    background: var(--color-verfstreep-dark, #8E4A22); /* 2026-05-31 cta-contrast: hover fallback = dark-token (was #b8632c) */
}

.ss-route-sticky-cta__btn:focus-visible {
    outline: 3px solid var(--color-text-inverse, #ffffff);
    outline-offset: 2px;
}

.ss-route-sticky-cta__btn--disabled {
    background: var(--color-text-muted, #6b7280);
    cursor: not-allowed;
    pointer-events: none;
}

.ss-route-sticky-cta__price {
    font-weight: var(--font-weight-bold, 700);
    padding-left: var(--space-sm, 0.5rem);
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

@media (max-width: 767px) {
    /* Op mobiel verbergen we het label zodat de knop niet wegloopt. */
    .ss-route-sticky-cta__label {
        display: none;
    }
    .ss-route-sticky-cta__btn {
        flex: 1 1 auto;
        justify-content: center;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ss-route-sticky-cta {
        transition: none;
    }
}

@media print {
    .ss-route-sticky-cta {
        display: none !important;
    }
}

/* =====================================================================
   M.1-CSS (sessie 11 Wave-E, 2026-05-03) — Mobile praktische-info-card.

   Webby's Wave-E PHP-edit (single-route.php r415-491) injecteert een
   nieuwe `<aside class="block lg:hidden ss-route-mobile-info">` met
   alle praktische info (prijs/locatie/duur/afstand/doelgroep/type/
   startpunt/parkeren/OV/sterren) als `<dl><dt><dd>` lijst. Deze aside
   verschijnt op mobile direct onder de hero-meta-strip; op `lg:` (1024+)
   verbergt Tailwind `block lg:hidden` deze aside (de praktische-info
   staat dan in de sidebar).

   Visuele richting (Webby's PHP-comment r395-400):
     - Container: perkament-bg, padding clamp, rounded, my-spacing
     - dl: grid auto/1fr, gap xs vertical, md horizontal
     - dt: muted color, font-weight 500
     - dd: primary color, font-weight 600, margin:0
     - Subtle border-top + border-bottom voor scheiding
   ===================================================================== */

.ss-route-mobile-info {
    /* Layout — Webby's PHP gebruikt `block lg:hidden` (Tailwind), maar we
       forceren expliciet `display: block` als safety net voor cases waar
       de Tailwind base reset niet laadt op single-route. */
    display: block;
    background: var(--color-bg-perkament, #F5F0E8);
    margin-top: clamp(var(--space-md, 16px), 4vw, var(--space-lg, 24px));
    margin-bottom: clamp(var(--space-md, 16px), 4vw, var(--space-lg, 24px));
    padding: clamp(var(--space-md, 16px), 4vw, var(--space-lg, 24px));
    border-radius: var(--radius-md, 8px);
    border-top: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
    border-bottom: 1px solid var(--color-border, rgba(0, 0, 0, 0.08));
}

.ss-route-mobile-info .page-container {
    padding-left: 0;
    padding-right: 0;
    margin-left: 0;
    margin-right: 0;
    max-width: none;
}

.ss-route-mobile-info__title {
    font-family: var(--font-heading, serif);
    font-size: 1.0625rem;        /* 17px — subkop, niet concurrerend met h1/h2 */
    font-weight: var(--font-weight-bold, 700);
    color: var(--color-primary, #013440);
    margin: 0 0 var(--space-sm, 0.5rem);
    letter-spacing: -0.005em;
    line-height: 1.3;
}

.ss-route-mobile-info__list {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-md, 1rem);
    row-gap: var(--space-xs, 0.25rem);
    margin: 0;
    padding: 0;
    font-family: var(--font-body, system-ui, sans-serif);
    font-size: 0.9375rem;        /* 15px — leesbaar op mobile zonder iOS-zoom */
    line-height: 1.45;
}

.ss-route-mobile-info__list dt {
    color: var(--color-text-muted, #6B7280);
    font-weight: 500;
    margin: 0;
    white-space: nowrap;        /* korte labels niet laten wrappen */
}

.ss-route-mobile-info__list dd {
    color: var(--color-primary, #013440);
    font-weight: 600;
    margin: 0;
    overflow-wrap: anywhere;    /* lange parkeer-/OV-tekst wrapt netjes */
    word-break: normal;
}

.ss-route-mobile-info__reviews {
    font-weight: 400;
    color: var(--color-text-muted, #6B7280);
    margin-left: var(--space-xs, 0.25rem);
}

/* Tailwind `block lg:hidden` op `<aside>` regelt al de mobile/desktop-toggle.
   Defensieve regel als die utility om wat voor reden niet laadt. */
@media (min-width: 1024px) {
    .ss-route-mobile-info {
        display: none;
    }
}

@media print {
    .ss-route-mobile-info {
        background: transparent;
        border: none;
        padding: 0;
    }
}

/* =====================================================================
   "Bestel of Haal op"-blok (YV-022 / YV-019, 2026-05-31 — Layty).

   Vervangt de oude korte `.ss-route__buy-on-site-note` op single-route
   (sidebar, onder de prijs/CTA-card) door Yvette's volledige live-copy:
   verkoopmodel (thuisbezorgen vs. ter plekke) + levertijd-belofte +
   USP-chips. Toon-mal: Harry ground-truth 2026-05-30 §(a).

   BEM, geen Tailwind-scope (laadt op elke single-route via inc/assets.php).
   Tokens-only: geen hardcoded hex. Stijl sluit aan op de perkament
   sidebar-card (.ss-route-side-card) eronder/erboven.
   ===================================================================== */

.ss-route__bestel-haal-op {
    margin-top: var(--space-md, 16px);
    padding: var(--space-md, 16px) var(--space-lg, 20px);
    background: var(--color-bg-perkament, #f5f0e8);
    border: 1px solid var(--color-border, #e5e1d8);
    border-radius: var(--radius-md, 8px);
}

.ss-route__bestel-haal-op-title {
    font-family: var(--font-heading, "Playfair Display", serif);
    font-size: 1.0625rem;        /* 17px — subkop, niet concurrerend met h1 */
    font-weight: var(--font-weight-bold, 700);
    line-height: 1.25;
    color: var(--color-primary, #013440);
    margin: 0 0 var(--space-sm, 8px);
}

.ss-route__bestel-haal-op-lead,
.ss-route__bestel-haal-op-levertijd {
    font-family: var(--font-body, "Lato", sans-serif);
    font-size: var(--font-size-sm, 0.875rem);
    line-height: var(--line-height-base, 1.6);
    color: var(--color-text, #2d2d2d);
    margin: 0 0 var(--space-sm, 8px);
}

.ss-route__bestel-haal-op-levertijd {
    color: var(--color-text-muted, #6b7280);
    margin-bottom: var(--space-md, 16px);
}

.ss-route__bestel-haal-op-usps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm, 8px);
    margin: 0;
    padding: 0;
    list-style: none;
}

.ss-route__bestel-haal-op-usp {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs, 6px);
    padding: 0.375rem 0.625rem;
    background: var(--color-bg, #ffffff);
    border: 1px solid var(--color-border, #e5e1d8);
    border-radius: var(--radius-full, 9999px);
    font-family: var(--font-body, "Lato", sans-serif);
    font-size: var(--font-size-xs, 0.75rem);
    font-weight: var(--font-weight-semibold, 600);
    line-height: 1.2;
    color: var(--color-primary, #013440);
}

.ss-route__bestel-haal-op-usp svg {
    flex-shrink: 0;
    color: var(--color-verfstreep, #A85829); /* 2026-05-31 cta-contrast: fallback = AA-token */
}

@media print {
    .ss-route__bestel-haal-op {
        background: transparent;
        border: none;
        padding: 0;
    }
}

/* =====================================================================
   P.1-CSS (sessie 11 Wave-H, 2026-05-03) — Compactere meta-strip mobile.

   Symptoom (Benjamin's iPhone-review): de sticky meta-strip met "Gratis"-
   badge + locatie-card + duur-pill + afstand-pill nam ~50% van het
   mobile-scherm in beslag (~380px op iPhone 390x844). Doel: ~50%
   verkleinen zodat route-content sneller in beeld komt.

   Aanpak (CSS-only override binnen `.ss-route-meta-strip` scope):
     - Outer `.page-container py-5 lg:py-6` → kleinere block-padding mobile
     - Inner `.flex.gap-3` → kleinere gap mobile
     - Cards: padding `px-5 py-2.5` / `px-4 py-2.5` → compacter mobile
     - Font-sizes: 18-20px op prijs, 15px op pills → 14/13px mobile
     - SVG-icons (16x16) verkleinen naar 13x13 mobile
     - Border-radius cards iets kleiner voor compactere look

   Tailwind utilities op de child-elementen worden expliciet overschreven
   via de `.ss-route-meta-strip` parent-class (specificity 0,2,0 vs
   Tailwind's 0,1,0 — wint zonder !important). Geen wijzigingen op
   desktop ≥768px (alleen ingevoegd binnen `@media (max-width: 767px)`).
   ===================================================================== */

@media (max-width: 767px) {
    /* Outer container — kleinere verticale ruimte rond de strip */
    .ss-route-meta-strip .page-container {
        padding-top: 0.625rem;        /* was py-5 = 1.25rem */
        padding-bottom: 0.625rem;
    }

    /* Inner flex-row — kleinere gap tussen pills/badge/card */
    .ss-route-meta-strip .page-container > .flex {
        gap: 0.375rem;                /* was gap-3 = 0.75rem */
    }

    /* "Gratis"-badge (prijs, primary-bg) — compacter */
    .ss-route-meta-strip .page-container > .flex > .bg-primary {
        padding: 0.375rem 0.75rem;    /* was px-5 py-2.5 = 1.25rem 0.625rem */
        border-radius: 0.375rem;      /* was rounded-lg = 0.5rem */
    }
    .ss-route-meta-strip .page-container > .flex > .bg-primary > span {
        font-size: 14px;              /* was text-[18px] / lg:text-[20px] */
        line-height: 1.2;
    }

    /* Locatie-card + duur-pill + afstand-pill (white-bg, body-border) */
    .ss-route-meta-strip .page-container > .flex > .bg-white {
        padding: 0.375rem 0.625rem;   /* was px-4 py-2.5 = 1rem 0.625rem */
        gap: 0.3125rem;               /* was gap-2 = 0.5rem */
        border-radius: 0.375rem;      /* was rounded-lg = 0.5rem */
    }

    /* Reviews-sterren-card (gap-1.5 i.p.v. gap-2) */
    .ss-route-meta-strip .page-container > .flex > .gap-1\.5 {
        padding: 0.375rem 0.625rem;
        gap: 0.25rem;
        border-radius: 0.375rem;
    }

    /* Tekst binnen de pills — compacter */
    .ss-route-meta-strip .page-container > .flex > .bg-white > span,
    .ss-route-meta-strip .page-container > .flex > .gap-1\.5 > span {
        font-size: 13px;              /* was text-[15px] / text-[13px] */
        line-height: 1.2;
    }

    /* SVG-icons binnen de pills (16x16 → 13x13) */
    .ss-route-meta-strip .page-container > .flex > .bg-white > svg,
    .ss-route-meta-strip .page-container > .flex > .gap-1\.5 > svg {
        width: 13px;
        height: 13px;
        flex-shrink: 0;
    }

    /* "Binnenkort beschikbaar"-badge — compacter */
    .ss-route-meta-strip .page-container > .flex > .bg-muted {
        padding: 0.25rem 0.5rem;      /* was px-3 py-1.5 */
        font-size: 11px;              /* was text-[12px] */
        border-radius: 0.375rem;
    }
}