/* CJ Animated Site Logo – stylesheet
   Transitie wordt getriggerd door .elementor-sticky--effects op de header.
   ------------------------------------------------------------------ */

/* ── Elementor widget-element: breedte-animatie op scroll ──────────── */

.elementor-widget-cjasl_animated_site_logo {
    --cjasl-duration:  200ms;
    --cjasl-easing:    ease-in-out;
    --cjasl-favicon-w: 32px;

    transition: width var(--cjasl-duration) var(--cjasl-easing);
    overflow:   visible;
}

.elementor-sticky--effects .elementor-widget-cjasl_animated_site_logo {
    width: var(--cjasl-favicon-w) !important;
}

/* ── Wrapper ───────────────────────────────────────────────────────── */

.cjasl-wrap {
    --cjasl-duration: 200ms;
    --cjasl-easing:   ease-in-out;

    display:  block;
    position: relative;
}

.cjasl-link {
    display:         block;
    text-decoration: none;
    position:        relative;
}

/* ── Logo-wrapper (bepaalt uitlijning via text-align op wrapper) ─── */

.cjasl-logo-wrap {
    display: block;
    width:   100%;
}

.cjasl-logo {
    display: inline-block;
    max-width: 100%;
    height:    auto;

    opacity:   1;
    transform: scale(1);
    transition:
        opacity   var(--cjasl-duration) var(--cjasl-easing),
        transform var(--cjasl-duration) var(--cjasl-easing);
}

/* ── Favicon-wrapper (absoluut over logo, flex voor uitlijning) ───── */

.cjasl-favicon-wrap {
    position:        absolute;
    top:             0;
    left:            0;
    right:           0;
    bottom:          0;
    display:         flex;
    align-items:     center;
    justify-content: center; /* standaard: midden, overschrijfbaar via control */
    pointer-events:  none;
}

.cjasl-favicon {
    display:    block;
    width:      32px;
    height:     32px;
    object-fit: contain;

    opacity:    0;
    transform:  scale(0.75);
    transition:
        opacity   var(--cjasl-duration) var(--cjasl-easing),
        transform var(--cjasl-duration) var(--cjasl-easing);
}

/* ── Scroll-staat: Elementor voegt deze class toe bij sticky header ─ */

.elementor-sticky--effects .cjasl-logo {
    opacity:   0;
    transform: scale(0.75);
}

.elementor-sticky--effects .cjasl-favicon {
    opacity:   1;
    transform: scale(1);
}

/* ── Elementor editor: logo + favicon gestapeld tonen ─────────────── */

.elementor-editor-active .cjasl-favicon-wrap {
    position:      static;           /* niet absoluut, gewoon onder het logo */
    display:       flex;
    margin-top:    6px;
    padding-top:   6px;
    border-top:    1px dashed rgba(128, 128, 128, 0.35);
    opacity:       0.55;             /* geeft aan: dit is de scroll-staat */
    pointer-events: none;
}

.elementor-editor-active .cjasl-favicon {
    opacity:   1;                    /* zichtbaar binnen de al-gedimde wrapper */
    transform: scale(1);
    transition: none;
}