/* ==========================================================================
   jdb-luxe-base.css: luxe-ronde okt 2026 (laadt na jdb-japandi.css)
   Design-systeem: typografie en knoppen.

   1. Tokens: Apple-achtige systeemfonts, typeschaal, tracking, knoptokens.
      Alle bestaande lagen kennen font-family toe via --jdb-font-display en
      --jdb-font-body, dus het omzetten van die twee tokens is genoeg om de
      hele JDB-site om te zetten. Daarna corrigeren we gewichten en tracking
      die op Marcellus (alleen 400) waren afgestemd.
   2. Typografie: hiërarchie in vier niveaus + cijfers, eyebrows, leads.
   3. Knoppen: één pilvorm voor alle varianten, primair gevuld, secundair
      outline, tonal (glass), tekstlinks als tertiaire knop.
   Alles is gescoped op JDB-klassen; geen regels op kale elementen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */

:root {
    --jdb-font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --jdb-font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

    /* Typeschaal (fluid) */
    --jdb-fs-display: clamp(2.5rem, 1.55rem + 4.1vw, 4.6rem);
    --jdb-fs-h2: clamp(1.95rem, 1.4rem + 2.4vw, 3.15rem);
    --jdb-fs-h3: clamp(1.35rem, 1.15rem + 0.85vw, 1.85rem);
    --jdb-fs-h4: clamp(1.1rem, 1.04rem + 0.3vw, 1.28rem);
    --jdb-fs-lead: clamp(1.05rem, 0.99rem + 0.3vw, 1.2rem);
    --jdb-fs-body: 1rem;
    --jdb-fs-small: 0.875rem;
    --jdb-fs-eyebrow: 0.75rem;

    /* Tracking: strak bij grote koppen, ruim bij kleine kapitalen */
    --jdb-ls-display: -0.035em;
    --jdb-ls-h2: -0.028em;
    --jdb-ls-h3: -0.02em;
    --jdb-ls-h4: -0.012em;
    --jdb-ls-body: -0.006em;
    --jdb-ls-eyebrow: 0.16em;

    --jdb-lh-display: 1.04;
    --jdb-lh-heading: 1.12;
    --jdb-lh-title: 1.25;
    --jdb-lh-body: 1.6;

    --jdb-fw-display: 600;
    --jdb-fw-heading: 600;
    --jdb-fw-strong: 600;
    --jdb-fw-body: 400;

    --jdb-measure-lead: 38rem;

    /* Knoppen */
    --jdb-btn-radius: 999px;
    --jdb-btn-h: 2.875rem;        /* 46px */
    --jdb-btn-h-sm: 2.5rem;       /* 40px, op touch 44px */
    --jdb-btn-h-lg: 3.375rem;     /* 54px */
    --jdb-btn-pad-x: 1.6rem;
    --jdb-btn-pad-x-sm: 1.1rem;
    --jdb-btn-pad-x-lg: 2.1rem;
    --jdb-btn-fs: 0.9375rem;
    --jdb-btn-fs-sm: 0.8125rem;
    --jdb-btn-fs-lg: 1rem;
    --jdb-btn-primary-bg: var(--mdb-ink);           /* tekst paper: 14.25:1 */
    --jdb-btn-primary-bg-hover: var(--mdb-walnut);  /* tekst paper: 9.97:1 */
    --jdb-btn-primary-fg: var(--mdb-paper);
    --jdb-btn-outline-border: var(--mdb-line-strong);
    --jdb-btn-tonal-bg: rgba(251, 249, 245, 0.78);
    --jdb-btn-shadow-hover: 0 10px 24px -14px rgba(43, 38, 33, 0.55), 0 2px 6px -3px rgba(43, 38, 33, 0.18);
    --jdb-focus-ring: 0 0 0 2px var(--mdb-paper), 0 0 0 4px var(--mdb-oak-deep); /* oak-deep op paper 5.83:1 */
    --jdb-btn-ease: cubic-bezier(0.22, 1, 0.36, 1);
}

/* --------------------------------------------------------------------------
   2. Typografie
   -------------------------------------------------------------------------- */

/* Basis op dezelfde containers die de bestaande lagen een font-family geven */
section[class^="jdb-"],
.jdbh,
.jdb-sf,
.jdb-footer,
.jdb-stickycta {
    font-weight: var(--jdb-fw-body);
    letter-spacing: var(--jdb-ls-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    font-kerning: normal;
}

/* Niveau 1: paginatitels / hero */
.jdb-vhero__title,
.jdb-hero__title,
.jdb-phero__title {
    font-size: var(--jdb-fs-display);
    font-weight: var(--jdb-fw-display);
    letter-spacing: var(--jdb-ls-display);
    line-height: var(--jdb-lh-display);
    text-wrap: balance;
}

/* Niveau 2: sectiekoppen */
.jdb-sechead__title,
.jdb-banner__title,
.jdb-pfacts__title,
.jdb-pband__title,
.jdb-pstyles__name,
.jdb-pkg__question,
.jdb-notfound__title {
    font-size: var(--jdb-fs-h2);
    font-weight: var(--jdb-fw-heading);
    letter-spacing: var(--jdb-ls-h2);
    line-height: var(--jdb-lh-heading);
    text-wrap: balance;
}

/* Niveau 3: subkoppen, formulier- en staptitels */
.jdb-style-card__name,
.jdb-process__step-title,
.jdb-proc__step-title,
.jdb-stylestrip__title,
.jdb-cfg__info-title,
.jdb-cfg__form-title,
.jdb-cfg--steps .jdb-cfg__legend-title,
.jdb-contact__form-title,
.jdb-pcontact__form-title,
.jdb-pkg__summary-title {
    font-size: var(--jdb-fs-h3);
    font-weight: var(--jdb-fw-heading);
    letter-spacing: var(--jdb-ls-h3);
    line-height: var(--jdb-lh-title);
}

/* Niveau 4: kaarttitels */
.jdb-ba__title,
.jdb-project-card__title,
.jdb-guarantees__title,
.jdb-about__mission h3,
.jdb-pfeat__title,
.jdb-psteps__step-title,
.jdb-hero__panel-title,
.jdbh-mega__cta-title,
.jdb-wp__title,
.jdb-sf__map-title {
    font-size: var(--jdb-fs-h4);
    font-weight: var(--jdb-fw-heading);
    letter-spacing: var(--jdb-ls-h4);
    line-height: var(--jdb-lh-title);
}

/* Kerncijfers en statistieken */
.jdb-why__badge-value,
.jdb-reviews__score-value,
.jdb-guarantees__value,
.jdb-about__stat-value,
.jdb-pfacts__value,
.jdb-sf__bigphone {
    font-weight: var(--jdb-fw-heading);
    letter-spacing: -0.03em;
    font-variant-numeric: tabular-nums;
}

/* Grote decoratieve cijfers: licht, Apple-achtig */
.jdb-process__step-num,
.jdb-proc__num,
.jdb-wp__index,
.jdb-notfound__code {
    font-weight: 300;
    letter-spacing: -0.045em;
    font-variant-numeric: tabular-nums;
}

/* Kleine nummers en waarden */
.jdb-pfeat__num,
.jdb-psteps__num,
.jdb-pstyles__index,
.jdb-cfg__step-num,
.jdb-proc__step-num,
.jdb-wp__pick-num,
.jdbh-drawer__num,
.jdb-vstyles__count,
.jdb-cfg__legend-value,
.jdb-cfg__float-value,
.jdb-wp__readout b {
    font-weight: 500;
    letter-spacing: 0;
    font-variant-numeric: tabular-nums;
}

/* Citaten, leads in display-font, menulabels */
.jdb-pquote__text,
.jdb-goto__lead {
    font-weight: 500;
    letter-spacing: -0.015em;
    line-height: 1.4;
}

.jdbh-drawer__label {
    font-weight: 500;
    letter-spacing: -0.02em;
}

.jdbh-mega__style span { font-weight: 500; letter-spacing: -0.005em; }

/* Footer-statement */
.jdb-sf__slogan {
    font-weight: var(--jdb-fw-display);
    letter-spacing: -0.04em;
    line-height: 1.02;
}

/* Manrope 800 was licht van karakter; SF in 800 is zwaar. Overal 600. */
.jdbh-top__reviews strong,
.jdbh-mega__heading,
.jdb-hero__proof strong,
.jdb-hero__panel-tag,
.jdb-hero__panel-phone,
.jdb-trust__value,
.jdb-why__usp-title,
.jdb-ba__tag,
.jdb-project-card__tag,
.jdb-review-card__name,
.jdb-review-card__source,
.jdb-advies__floating span,
.jdb-form__field label,
.jdb-footer__col h4,
.jdb-notfound__links-label,
.jdb-pgal__tag,
.jdb-pwall__trustoo,
.jdb-pcontact__form-wrap .wpcf7-form label,
.jdb-contact__form-wrap .wpcf7-form label {
    font-weight: var(--jdb-fw-strong);
}

/* Eyebrows: klein, kapitalen, ruime tracking */
.jdb-eyebrow,
.jdb-cfg__info-eyebrow,
.jdb-vstyles__label,
.jdb-cfg__count {
    font-family: var(--jdb-font-body);
    font-size: var(--jdb-fs-eyebrow);
    font-weight: 600;
    letter-spacing: var(--jdb-ls-eyebrow);
    line-height: 1.3;
    text-transform: uppercase;
    font-feature-settings: "case" 1;
}

.jdbh-top__tagline {
    font-family: var(--jdb-font-body);
    font-weight: 500;
    letter-spacing: 0.14em;
}

/* Leads en intro's */
.jdb-sechead__intro,
.jdb-phero__intro,
.jdb-hero__subtitle,
.jdb-vhero__text {
    font-size: var(--jdb-fs-lead);
    font-weight: var(--jdb-fw-body);
    line-height: var(--jdb-lh-body);
    letter-spacing: -0.01em;
    text-wrap: pretty;
}

.jdb-sechead__intro { max-width: var(--jdb-measure-lead); }

/* Lopende tekst in kaarten en blokken */
.jdb-pfeat__text,
.jdb-pstyles__text,
.jdb-pband__sub,
.jdb-guarantees__text,
.jdb-review-card__text,
.jdb-bacompare__text,
.jdb-pkg__text,
.jdb-notfound__text,
.jdb-banner__sub {
    line-height: var(--jdb-lh-body);
    text-wrap: pretty;
}

/* Consistente verticale ritme in sectiekoppen */
.jdb-sechead { gap: clamp(0.85rem, 0.7rem + 0.6vw, 1.25rem); }

/* --------------------------------------------------------------------------
   3. Knoppen
   -------------------------------------------------------------------------- */

/* 3a. Basis: alle .jdb-btn-varianten */
.jdb-btn {
    /* display komt uit jdb-home.css; hier niet herhalen, anders vervallen de verberg-regels per breakpoint. */
    position: relative;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    min-height: var(--jdb-btn-h);
    padding: 0.7rem var(--jdb-btn-pad-x);
    font-family: var(--jdb-font-body);
    font-size: var(--jdb-btn-fs);
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.005em;
    text-transform: none;
    border: 1px solid transparent;
    border-radius: var(--jdb-btn-radius);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.25s var(--jdb-btn-ease),
                background-color 0.25s var(--jdb-btn-ease),
                border-color 0.25s var(--jdb-btn-ease),
                color 0.25s var(--jdb-btn-ease),
                box-shadow 0.3s var(--jdb-btn-ease);
}

.jdb-btn--lg {
    min-height: var(--jdb-btn-h-lg);
    padding: 0.85rem var(--jdb-btn-pad-x-lg);
    font-size: var(--jdb-btn-fs-lg);
}

.jdb-btn--sm {
    min-height: var(--jdb-btn-h-sm);
    padding: 0.5rem var(--jdb-btn-pad-x-sm);
    font-size: var(--jdb-btn-fs-sm);
}

.jdb-stickycta__actions .jdb-btn--sm {
    padding: 0.5rem var(--jdb-btn-pad-x-sm);
    font-size: var(--jdb-btn-fs-sm);
}

@media (pointer: coarse) {
    .jdb-btn--sm { min-height: 2.75rem; }
}

.jdb-btn:hover { transform: translateY(-1px); }

.jdb-btn:active {
    transform: translateY(0) scale(0.98);
    transition-duration: 0.1s;
}

/* Iconen netjes uitgelijnd; pijl schuift subtiel mee */
.jdb-btn .jdb-icon {
    flex: none;
    width: 1.05em;
    height: 1.05em;
    transition: transform 0.3s var(--jdb-btn-ease);
}

.jdb-btn:hover .jdb-icon--arrow { transform: translateX(3px); }

/* 3b. Primair (gevuld): navy, gold en legacy anthracite/bronze */
.jdb-btn--navy,
.jdb-btn--anthracite,
.jdb-btn--gold,
.jdb-btn--bronze,
.jdbh-nav__cta,
.jdbh--overlay:not(.jdbh--open) .jdbh-nav__cta {
    background: var(--jdb-btn-primary-bg);
    border-color: var(--jdb-btn-primary-bg);
    color: var(--jdb-btn-primary-fg);
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.12) !important;
}

.jdb-btn--navy:hover,
.jdb-btn--anthracite:hover,
.jdb-btn--gold:hover,
.jdb-btn--bronze:hover,
.jdbh-nav__cta:hover,
.jdbh--overlay:not(.jdbh--open) .jdbh-nav__cta:hover {
    background: var(--jdb-btn-primary-bg-hover);
    border-color: var(--jdb-btn-primary-bg-hover);
    color: var(--jdb-btn-primary-fg);
    box-shadow: var(--jdb-btn-shadow-hover) !important;
}

/* 3c. Secundair (outline) */
.jdb-btn--ghost {
    background: transparent;
    border-color: var(--jdb-btn-outline-border);
    color: var(--mdb-ink);                          /* 14.25:1 op paper, 11.99:1 op zand */
    box-shadow: none !important;
}

.jdb-btn--ghost:hover {
    background: var(--mdb-sand-2);
    border-color: var(--mdb-ink);
    color: var(--mdb-ink);
    box-shadow: 0 8px 18px -14px rgba(43, 38, 33, 0.45) !important;
}

/* 3d. Tonal (glass): zacht gevuld, werkt op licht vlak en op beeld */
.jdb-btn--glass,
.jdb-pband .jdb-btn--glass {
    background: var(--jdb-btn-tonal-bg);
    border-color: var(--mdb-line);
    color: var(--mdb-ink);                          /* >= 13:1 op de tonal-vulling */
    -webkit-backdrop-filter: blur(10px) saturate(1.2);
    backdrop-filter: blur(10px) saturate(1.2);
    box-shadow: none !important;
}

.jdb-btn--glass:hover,
.jdb-pband .jdb-btn--glass:hover {
    background: var(--mdb-sand-2);
    border-color: var(--mdb-line-strong);
    color: var(--mdb-ink);
    box-shadow: 0 8px 18px -14px rgba(43, 38, 33, 0.45) !important;
}

/* Footer: primaire knoppen houden lichte tekst */
.jdb-sf .jdb-btn--navy,
.jdb-sf .jdb-btn--navy:hover,
.jdb-sf .jdb-btn--gold,
.jdb-sf .jdb-btn--gold:hover { color: var(--jdb-btn-primary-fg); }

/* Glans-sweep op hoofd-CTA's volgt de pilvorm */
.jdb-cfg__cta,
.jdb-goto__btn,
.jdb-sf__cta { overflow: hidden; isolation: isolate; }

/* 3e. Focus: duidelijke ring met dubbele rand (werkt op licht en donker) */
.jdb-btn:focus-visible,
.jdbh-nav__cta:focus-visible,
.jdb-swiper-prev:focus-visible,
.jdb-swiper-next:focus-visible,
.jdb-stickycta__wa:focus-visible,
.jdb-stickycta__toggle:focus-visible,
.jdb-cfg__prev:focus-visible,
.jdb-cfg__back:focus-visible,
.jdb-cfg__more:focus-visible,
.jdb-pkg__back:focus-visible,
.jdb-vstyles__all:focus-visible,
[class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:focus-visible {
    outline: 2px solid transparent !important;   /* Windows high contrast */
    outline-offset: 2px;
    box-shadow: var(--jdb-focus-ring) !important;
}

.jdb-btn:focus:not(:focus-visible) { outline: none; }

/* 3f. Contact Form 7-submit binnen JDB-onderdelen */
html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"] {
    min-height: var(--jdb-btn-h-lg);
    padding: 0.85rem var(--jdb-btn-pad-x-lg);
    font-family: var(--jdb-font-body);
    font-size: var(--jdb-btn-fs-lg);
    font-weight: 600;
    letter-spacing: -0.005em;
    line-height: 1.2;
    color: var(--jdb-btn-primary-fg);
    background: var(--jdb-btn-primary-bg);
    border: 1px solid var(--jdb-btn-primary-bg);
    border-radius: var(--jdb-btn-radius);
    box-shadow: 0 1px 2px rgba(43, 38, 33, 0.12);
    -webkit-appearance: none;
    appearance: none;
    transition: transform 0.25s var(--jdb-btn-ease),
                background-color 0.25s var(--jdb-btn-ease),
                border-color 0.25s var(--jdb-btn-ease),
                box-shadow 0.3s var(--jdb-btn-ease);
}

html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:hover {
    background: var(--jdb-btn-primary-bg-hover);
    border-color: var(--jdb-btn-primary-bg-hover);
    box-shadow: var(--jdb-btn-shadow-hover);
    transform: translateY(-1px);
}

html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:active {
    transform: translateY(0) scale(0.99);
    transition-duration: 0.1s;
}

html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 3g. Slider-pijlen: ronde icoonknoppen (46px) */
.jdb-swiper-prev,
.jdb-swiper-next {
    width: var(--jdb-btn-h);
    height: var(--jdb-btn-h);
    background: var(--mdb-paper);
    border: 1px solid var(--mdb-line-strong);
    color: var(--mdb-ink);
    transition: transform 0.25s var(--jdb-btn-ease),
                background-color 0.25s var(--jdb-btn-ease),
                border-color 0.25s var(--jdb-btn-ease),
                color 0.25s var(--jdb-btn-ease),
                box-shadow 0.3s var(--jdb-btn-ease);
}

.jdb-swiper-prev:hover,
.jdb-swiper-next:hover {
    background: var(--mdb-ink);
    border-color: var(--mdb-ink);
    color: var(--mdb-paper);
    box-shadow: var(--jdb-btn-shadow-hover);
    transform: translateY(-1px);
}

.jdb-swiper-prev:active,
.jdb-swiper-next:active { transform: scale(0.96); }

.jdb-swiper-prev.swiper-button-disabled,
.jdb-swiper-next.swiper-button-disabled { opacity: 0.35; pointer-events: none; }

/* 3h. Zwevende contactbalk */
.jdb-stickycta__wa {
    min-height: var(--jdb-btn-h-sm);
    gap: 0.45rem;
    padding: 0.5rem 0.95rem;
    font-size: var(--jdb-btn-fs-sm);
    font-weight: 600;
    letter-spacing: -0.005em;
    border-radius: var(--jdb-btn-radius);
    background: transparent;
    border: 1px solid var(--mdb-line-strong);
    color: var(--mdb-ink);
    transition: transform 0.25s var(--jdb-btn-ease),
                background-color 0.25s var(--jdb-btn-ease),
                border-color 0.25s var(--jdb-btn-ease);
}

.jdb-stickycta__wa:hover {
    background: var(--mdb-sand-2);
    border-color: var(--mdb-ink);
    color: var(--mdb-ink);
    transform: translateY(-1px);
}

.jdb-stickycta__wa:active { transform: translateY(0) scale(0.98); }

@media (pointer: coarse) {
    .jdb-stickycta__wa { min-height: 2.75rem; }
}

/* Inklapknop: zichtbaar 32px, raakvlak 44px */
.jdb-stickycta__toggle {
    transition: background-color 0.25s var(--jdb-btn-ease),
                color 0.25s var(--jdb-btn-ease),
                transform 0.25s var(--jdb-btn-ease);
}

.jdb-stickycta__toggle::before {
    content: "";
    position: absolute;
    inset: -6px;
    border-radius: 50%;
}

.jdb-stickycta__toggle:hover { background: var(--mdb-sand-2); color: var(--mdb-ink); }
.jdb-stickycta__toggle:active { transform: scale(0.94); }

/* 3i. Tertiair: tekstknoppen (vorige, terug, meer, alle stijlen) */
.jdb-cfg__prev,
.jdb-cfg__back,
.jdb-cfg__more,
.jdb-pkg__back,
.jdb-vstyles__all {
    min-height: 2.75rem;
    border-radius: var(--jdb-btn-radius);
    font-weight: 500;
}

.jdb-cfg__prev:active,
.jdb-cfg__back:active,
.jdb-pkg__back:active { transform: scale(0.98); }

/* 3j. Rustige beweging */
@media (prefers-reduced-motion: reduce) {
    .jdb-btn,
    .jdb-btn .jdb-icon,
    .jdb-swiper-prev,
    .jdb-swiper-next,
    .jdb-stickycta__wa,
    .jdb-stickycta__toggle,
    html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"] {
        transition: background-color 0.2s linear, border-color 0.2s linear, color 0.2s linear, box-shadow 0.2s linear;
    }

    .jdb-btn:hover,
    .jdb-btn:active,
    .jdb-btn:hover .jdb-icon--arrow,
    .jdb-swiper-prev:hover,
    .jdb-swiper-next:hover,
    .jdb-swiper-prev:active,
    .jdb-swiper-next:active,
    .jdb-stickycta__wa:hover,
    .jdb-stickycta__wa:active,
    .jdb-stickycta__toggle:active,
    .jdb-cfg__prev:active,
    .jdb-cfg__back:active,
    .jdb-pkg__back:active,
    html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:hover,
    html body [class*="jdb-"] .wpcf7 .wpcf7-form input[type="submit"]:active {
        transform: none;
    }

    .jdb-cfg__cta::after,
    .jdb-goto__btn::after,
    .jdb-sf__cta::after { display: none; }
}

/* --------------------------------------------------------------------------
   Layoutvangnet configurator (mobiel): de 1fr-kolom groeide mee met de
   breedste inhoud (stappenbalk/foto's) en duwde de sectie ~20px buiten beeld.
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .jdb-cfg__grid { grid-template-columns: minmax(0, 1fr); }
}
.jdb-cfg__grid > *,
.jdb-cfg__panel > * { min-width: 0; }

@media (max-width: 600px) {
    .jdb-cfg__nav { grid-template-columns: auto minmax(0, 1fr) auto; }
    .jdb-cfg__nav .jdb-cfg__next { min-width: 0; padding-inline: 1rem; }
}