/* ─── Structural CSS — required for Embla to function ─── */

.embla-slider {
    --slide-height:        auto;
    --slide-min-height:    250px;
    --slide-gap:           0px;
    --transition-speed:    300ms;
    --slide-border-radius: 0px;
    --dot-color:           rgba(255, 255, 255, 0.5);
    --dot-color-active:    #ffffff;
    --nav-btn-bg:          rgba(0, 0, 0, 0.45);
    --nav-btn-color:       #ffffff;
    --nav-btn-size:        44px;
    --slides-per-view:     1;
    --progress-height:     3px;
    --nav-offset-x:        12px;
    --nav-offset-y:        12px;

    position: relative;
    overflow: hidden;
}

/* Box-sizing protection — prevents theme CSS from breaking calc() expressions */
.embla-slider,
.embla-slider *,
.embla-slider *::before,
.embla-slider *::after {
    box-sizing: border-box;
}

/* Remove click/focus outline — keep focus-visible for keyboard a11y */
.embla-slider:focus {
    outline: none;
}
.embla-slider:focus-visible {
    outline: 2px solid var(--wp--preset--color--primary, #0070f3);
    outline-offset: 2px;
}

/* Outside placement: allow nav-bar to extend below the clipped viewport */
.embla-slider[data-nav-placement="outside"] {
    overflow: visible;
}
.embla-slider[data-nav-placement="outside"] .embla {
    overflow: hidden;
}

/* Custom height override */
.embla-slider[style*="--slider-height"] {
    height: var(--slider-height);
}

.embla { position: relative; }

.embla__viewport { overflow: hidden; }

.embla__container {
    display:      flex;
    touch-action: pan-y pinch-zoom;
    margin-left:  calc(var(--slide-gap) * -1);
}

/* RTL — flip the gap margin */
[dir="rtl"] .embla__container {
    margin-left:  0;
    margin-right: calc(var(--slide-gap) * -1);
}

.embla__slide {
    flex:          0 0 calc(100% / var(--slides-per-view, 1));
    min-width:     0;
    min-height:    var(--slide-min-height, 250px);
    height:        var(--slide-height, auto);
    padding-left:  var(--slide-gap);
    border-radius: var(--slide-border-radius, 0px);
    overflow:      hidden;
}

/* RTL — flip the gap padding */
[dir="rtl"] .embla__slide {
    padding-left:  0;
    padding-right: var(--slide-gap);
}

/* Hidden slides (data-hide="true") */
.embla__slide[data-hide="true"] {
    display: none;
}

/* ─── No-JS progressive enhancement ─── */
.no-js .embla__viewport  { overflow: visible; }
.no-js .embla__container { flex-direction: column; }
.no-js .embla-btn        { display: none; }
.no-js .embla-dots       { display: none; }

/* ─── Reduced motion ─── */
@media (prefers-reduced-motion: reduce) {
    .embla-slider { --transition-speed: 0ms; }
}