/* jdb-luxe-merk.css: luxe-ronde okt 2026 (laadt na jdb-japandi.css).
 *
 * 1. Merkteken (jdb_merk_svg in inc/jdb/merk.php): basis en kleuren.
 * 2. Logo: inline SVG in plaats van png, zelfde maten als voorheen.
 * 3. Eyebrow: het merkteken vervangt het streepje voor de eyebrow.
 * 3b. Footerstatus: het merkteken vervangt de status-stip.
 * 4. Topbalk: sterren en iconen uit de nieuwe jdb_icon-set.
 * 5. Animatie: lijnen tekenen zichzelf, daarna vervaagt de voetlijn in.
 *    Alleen onder html.jdb-anim (JS actief, geen reduced motion); zonder
 *    JS staat het teken direct volledig in beeld.
 */

/* --------------------------------------------------------------------------
   1. Merkteken
   -------------------------------------------------------------------------- */

.jdb-merk-svg {
    display: block;
    flex: none;
    height: auto;
    aspect-ratio: 348 / 112;
    overflow: visible;
}

/* --------------------------------------------------------------------------
   2. Logo (jdb_logo_mark / jdb_logo_tag)
   -------------------------------------------------------------------------- */

.jdb-merk__teken-wrap { line-height: 0; }

.jdb-merk svg.jdb-merk__teken {
    width: 3.5rem;
    stroke-width: 7;
    color: var(--jdb-gold);
    transition: width 0.3s var(--jdb-ease);
}

.jdb-merk__teken-wrap--licht svg.jdb-merk__teken { color: var(--jdb-gold-light); }

.jdbh-logo svg.jdb-merk__teken { width: 4.4rem; stroke-width: 6.5; }
.jdb-footer__merk svg.jdb-merk__teken { width: 4.6rem; stroke-width: 6.5; }
.jdb-stickycta__merk svg.jdb-merk__teken { width: 2.6rem; stroke-width: 9; }

@media (max-width: 700px) {
    .jdb-stickycta__merk svg.jdb-merk__teken { width: 2.3rem; }
    .jdbh-logo svg.jdb-merk__teken { width: 3.1rem; stroke-width: 8; }
}

/* --------------------------------------------------------------------------
   3. Eyebrow
   -------------------------------------------------------------------------- */

.jdb-eyebrow__merk {
    width: 2.4rem;
    stroke-width: 11;
    color: inherit;
    transform: translateY(-0.08em);
}

/* Het merkteken neemt de plaats van het streepje in, één accent per kop. */
.jdb-eyebrow:has(> .jdb-eyebrow__merk)::before { display: none; }

/* --------------------------------------------------------------------------
   3b. Footerstatus ("Nu bereikbaar / gesloten")
   -------------------------------------------------------------------------- */

.jdb-sf__status-merk {
    width: 1.4rem;
    stroke-width: 12;
    color: var(--mdb-taupe);
    transform: translateY(-0.06em);
}

.jdb-sf__status.is-open .jdb-sf__status-merk { color: #5E7A55; }

/* --------------------------------------------------------------------------
   4. Topbalk
   -------------------------------------------------------------------------- */

.jdbh-top__stars {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    letter-spacing: 0;
    line-height: 0;
}

.jdbh-top__stars .jdb-icon,
.jdbh-top__usps .jdb-icon,
.jdbh-top__contact .jdb-icon { flex: none; display: block; }

/* --------------------------------------------------------------------------
   5. Animatie
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {

    /* a. Bij in beeld komen: trigger is .jdb-revealed op een voorouder. */

    .jdb-anim .jdb-merk-svg--anim path:not(.jdb-merk-svg__voet) {
        stroke-dasharray: 1 1;
        stroke-dashoffset: 0;
        transition:
            stroke-dashoffset 0.85s cubic-bezier(0.65, 0, 0.35, 1),
            opacity 0.2s ease;
    }

    .jdb-anim .jdb-merk-svg--anim path.jdb-merk-svg__links { transition-delay: 0.25s; transition-duration: 0.7s, 0.2s; }
    .jdb-anim .jdb-merk-svg--anim path.jdb-merk-svg__rug { transition-delay: 0.35s; transition-duration: 0.8s, 0.2s; }

    .jdb-anim .jdb-merk-svg--anim .jdb-merk-svg__voet {
        opacity: 0.55;
        transition: opacity 0.5s ease 0.9s;
    }

    .jdb-anim [data-jdb-reveal]:not(.jdb-revealed) .jdb-merk-svg--anim path {
        stroke-dashoffset: 1;
        opacity: 0;
        transition: none;
    }

    /* b. Logo op de homepage: eenmalig tekenen bij het laden. */

    .jdb-anim .home .jdbh-logo .jdb-merk-svg path:not(.jdb-merk-svg__voet) {
        stroke-dasharray: 1 1;
        animation: jdb-merk-draw 0.9s cubic-bezier(0.65, 0, 0.35, 1) 0.2s both;
    }

    .jdb-anim .home .jdbh-logo .jdb-merk-svg path.jdb-merk-svg__links { animation-delay: 0.4s; }
    .jdb-anim .home .jdbh-logo .jdb-merk-svg path.jdb-merk-svg__rug { animation-delay: 0.5s; }

    .jdb-anim .home .jdbh-logo .jdb-merk-svg__voet {
        animation: jdb-merk-voet 0.5s ease 1s both;
    }
}

@media (prefers-reduced-motion: no-preference) {

    /* c. Footerstatus: tekent zich zodra de JS het label toont (hidden eraf),
          daarna ademt de voetlijn zolang het bedrijf bereikbaar is. */

    .jdb-sf__status-merk path:not(.jdb-merk-svg__voet) {
        stroke-dasharray: 1 1;
        animation: jdb-merk-draw 0.8s cubic-bezier(0.65, 0, 0.35, 1) 0.15s both;
    }

    .jdb-sf__status-merk path.jdb-merk-svg__links { animation-delay: 0.35s; }
    .jdb-sf__status-merk path.jdb-merk-svg__rug { animation-delay: 0.45s; }
    .jdb-sf__status-merk .jdb-merk-svg__voet { animation: jdb-merk-voet 0.5s ease 0.9s both; }

    .jdb-sf__status.is-open .jdb-sf__status-merk .jdb-merk-svg__voet {
        animation:
            jdb-merk-voet 0.5s ease 0.9s both,
            jdb-merk-adem 2.4s ease-in-out 1.4s infinite;
    }
}

@keyframes jdb-merk-draw {
    from { stroke-dashoffset: 1; opacity: 0; }
    12% { opacity: 1; }
    to { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes jdb-merk-voet {
    from { opacity: 0; }
    to { opacity: 0.55; }
}

@keyframes jdb-merk-adem {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 0.15; }
}