/* ── Slider Block — Frontend Styles ───────────────────────────────────────── */

/* Let WP's layout system handle alignfull/alignwide width calculation. */
.wp-block-custom-slider {
    box-sizing: border-box;
}

/* Splide ships `.splide { visibility: hidden }` and only flips it to visible
   once JS mounts (`.is-initialized` / `.is-rendered`). When the script fails
   to load — CSP, async race, view.js missing in a template-part context —
   the entire slider stays invisible. Force visibility on our wrapper so a
   missing script falls back to a static list instead of a blank screen. */
.oi-slider.splide,
.oi-slider .splide__list,
.oi-slider .splide__slide {
    visibility: visible !important;
}
/*
 * Overrides Splide's default arrow/pagination colors with palette CSS variables
 * so the slider automatically matches the site's active palette (light/dark).
 */

/* Arrows. Per-instance overrides land via CSS custom properties on the
   wrapper (set by render.php from the editor's Color settings); fall back
   to palette tokens, then a hex sentinel. */
.oi-slider .splide__arrow {
    background: var( --oi-slider-arrow-bg, var( --wp--preset--color--palette-1, rgba(0,0,0,.7) ) );
    opacity:    0.9;
}

.oi-slider .splide__arrow:hover,
.oi-slider .splide__arrow:focus-visible {
    opacity:    1;
    background: var( --oi-slider-arrow-bg, var( --wp--preset--color--palette-1, rgba(0,0,0,.7) ) );
}

.oi-slider .splide__arrow svg {
    fill: var( --oi-slider-arrow-color, var( --wp--preset--color--palette-9, #fff ) );
}

/* Font Awesome arrow icons inside the Splide arrow buttons. view.js swaps
   Splide's default <svg> for an <i class="fa-…"> element when an icon ID is
   set on the wrapper. */
.oi-slider .splide__arrow > i {
    color:       var( --oi-slider-arrow-color, var( --wp--preset--color--palette-9, #fff ) );
    font-size:   1em;
    line-height: 1;
}

/* ── Arrow position presets ────────────────────────────────────────────── */
/* Splide's default puts each arrow at `top: 50%; left/right: 1em` inside the
   .splide wrapper. The presets below override those rules. */

/* Outside — vertically centered, sitting beyond the track edges. We pad the
   wrapper so the arrows have room and don't overlap content beside it. */
.oi-slider[data-arrow-position="outside"] {
    padding-left:  3em;
    padding-right: 3em;
}
.oi-slider[data-arrow-position="outside"] .splide__arrow--prev { left:  0; }
.oi-slider[data-arrow-position="outside"] .splide__arrow--next { right: 0; }

/* Bottom — common positioning for the four bottom layouts. */
.oi-slider[data-arrow-position^="bottom-"] {
    padding-bottom: 3.5em;
}
.oi-slider[data-arrow-position^="bottom-"] .splide__arrow {
    top:       auto;
    bottom:    0;
    transform: none;
}

/* Bottom — both arrows centered together. */
.oi-slider[data-arrow-position="bottom-center"] .splide__arrow--prev {
    left:  calc( 50% - 2.5em );
    right: auto;
}
.oi-slider[data-arrow-position="bottom-center"] .splide__arrow--next {
    left:  calc( 50% + 0.5em );
    right: auto;
}

/* Bottom — prev at left edge, next at right edge. */
.oi-slider[data-arrow-position="bottom-split"] .splide__arrow--prev { left: 0; right: auto; }
.oi-slider[data-arrow-position="bottom-split"] .splide__arrow--next { right: 0; left: auto; }

/* Bottom — both arrows clustered at the right. */
.oi-slider[data-arrow-position="bottom-right"] .splide__arrow--prev {
    left:  auto;
    right: 2.5em;
}
.oi-slider[data-arrow-position="bottom-right"] .splide__arrow--next {
    left:  auto;
    right: 0;
}

/* Bottom — both arrows clustered at the left. */
.oi-slider[data-arrow-position="bottom-left"] .splide__arrow--prev {
    left:  0;
    right: auto;
}
.oi-slider[data-arrow-position="bottom-left"] .splide__arrow--next {
    left:  2.5em;
    right: auto;
}

/* Pagination dots get nudged up a bit when arrows live below the track so
   they don't overlap. */
.oi-slider[data-arrow-position^="bottom-"] .splide__pagination {
    bottom: 3.5em;
}

/* Icon-only arrows — strip the circular background so the icon stands alone.
   The arrow icon adopts the brand color by default (instead of the surface
   color it would use against the filled bg). */
.oi-slider[data-arrow-appearance="icon"] .splide__arrow,
.oi-slider[data-arrow-appearance="icon"] .splide__arrow:hover,
.oi-slider[data-arrow-appearance="icon"] .splide__arrow:focus-visible {
    background:    transparent;
    border-radius: 0;
    box-shadow:    none;
    width:         auto;
    height:        auto;
    padding:       4px;
    opacity:       1;
}
.oi-slider[data-arrow-appearance="icon"] .splide__arrow svg,
.oi-slider[data-arrow-appearance="icon"] .splide__arrow > i {
    color: var( --oi-slider-arrow-color, var( --wp--preset--color--palette-1, #000 ) );
    fill:  var( --oi-slider-arrow-color, var( --wp--preset--color--palette-1, #000 ) );
    font-size: 1.5em;
}
.oi-slider .splide__arrow--next > i {
    /* Mirror the icon for the prev arrow so a single chevron picker works. */
}
.oi-slider .splide__arrow--prev > i {
    transform: scaleX(-1);
}

/* ── Custom arrow icons (replaces Splide's default SVG) ──────────────────── */

/* Hide Splide's SVG and show a mask-image icon instead */
.oi-slider[data-arrow-style] .splide__arrow svg {
    display: none;
}

.oi-slider[data-arrow-style] .splide__arrow::after {
    content:                  '';
    display:                  block;
    width:                    1.2em;
    height:                   1.2em;
    background-color:         var(--wp--preset--color--palette-9, #fff);
    mask-size:                contain;
    mask-position:            center;
    mask-repeat:              no-repeat;
    -webkit-mask-size:        contain;
    -webkit-mask-position:    center;
    -webkit-mask-repeat:      no-repeat;
}

/* Chevron */
.oi-slider[data-arrow-style="chevron"] .splide__arrow--next::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%2710%27 height=%2718%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%271.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%2710%27 height=%2718%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%271.81818182 0 0 1.5 6.96969697 9 0 16.5 1.81818182 18 10 9%27></polygon></svg>");
}
.oi-slider[data-arrow-style="chevron"] .splide__arrow--prev::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%2710%27 height=%2718%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%278.18181818 0 10 1.5 3.03030303 9 10 16.5 8.18181818 18 0 9%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%2710%27 height=%2718%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%278.18181818 0 10 1.5 3.03030303 9 10 16.5 8.18181818 18 0 9%27></polygon></svg>");
}

/* Chevron Small */
.oi-slider[data-arrow-style="chevron-small"] .splide__arrow--next::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%277%27 height=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%271.74942015 0 7 5.99997743 1.74942015 12 0 10.5313252 3.96543734 5.99997743 0 1.46865977%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%277%27 height=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%271.74942015 0 7 5.99997743 1.74942015 12 0 10.5313252 3.96543734 5.99997743 0 1.46865977%27></polygon></svg>");
}
.oi-slider[data-arrow-style="chevron-small"] .splide__arrow--prev::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%277%27 height=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%275.25057985 0 0 5.99997743 5.25057985 12 7 10.5313252 3.03456266 5.99997743 7 1.46865977%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%277%27 height=%2712%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%275.25057985 0 0 5.99997743 5.25057985 12 7 10.5313252 3.03456266 5.99997743 7 1.46865977%27></polygon></svg>");
}

/* Arrow */
.oi-slider[data-arrow-style="arrow"] .splide__arrow--next::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%2716%27 height=%2711%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%270 4.7 13.1180124 4.7 9.44099379 1 10.4347826 0 16 5.5 10.4347826 11 9.44099379 10 13.1180124 6.3 0 6.3%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%2716%27 height=%2711%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%270 4.7 13.1180124 4.7 9.44099379 1 10.4347826 0 16 5.5 10.4347826 11 9.44099379 10 13.1180124 6.3 0 6.3%27></polygon></svg>");
}
.oi-slider[data-arrow-style="arrow"] .splide__arrow--prev::after {
    mask-image:         url("data:image/svg+xml;utf8,<svg width=%2716%27 height=%2711%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%2716 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3%27></polygon></svg>");
    -webkit-mask-image: url("data:image/svg+xml;utf8,<svg width=%2716%27 height=%2711%27 xmlns=%27http://www.w3.org/2000/svg%27><polygon points=%2716 4.7 2.88198758 4.7 6.55900621 1 5.56521739 0 0 5.5 5.56521739 11 6.55900621 10 2.88198758 6.3 16 6.3%27></polygon></svg>");
}

/* ── Dot position presets ──────────────────────────────────────────────
   Splide's default puts pagination at `position: absolute; bottom: .5em`
   inside `.splide` — overlaying the bottom of the track. That matches our
   `inside` option. For `outside` we pull pagination back into normal flow
   below the track. */
.oi-slider[data-dot-position="outside"] .splide__pagination {
    position:   relative;
    bottom:     auto;
    left:       auto;
    right:      auto;
    transform:  none;
    margin-top: 1em;
}

/* When arrows live below the track and dots stay inside, lift the dots so
   they land above the arrows instead of behind them. */
.oi-slider[data-dot-position="inside"][data-arrow-position^="bottom-"] .splide__pagination {
    bottom: 4.25em;
}

/* Pagination dots — base (used by the default circular preset). */
.oi-slider .splide__pagination__page {
    background:    var( --oi-slider-dot-color, var( --wp--preset--color--palette-6, rgba(0,0,0,.25) ) );
    opacity:       1;
    transition:    background-color 0.2s ease, transform 0.2s ease, width 0.2s ease;
}

.oi-slider .splide__pagination__page.is-active {
    background: var( --oi-slider-dot-active, var( --wp--preset--color--palette-1, #000 ) );
    transform:  scale( 1.25 );
    opacity:    1;
}

/* ── Dot presets ──────────────────────────────────────────────────────── */
/* Outline ring — transparent fill until active. */
.oi-slider[data-dot-preset="outline"] .splide__pagination__page {
    background:   transparent;
    border:       1.5px solid var( --oi-slider-dot-color, var( --wp--preset--color--palette-6, rgba(0,0,0,.45) ) );
    box-sizing:   border-box;
}
.oi-slider[data-dot-preset="outline"] .splide__pagination__page.is-active {
    background:   var( --oi-slider-dot-active, var( --wp--preset--color--palette-1, #000 ) );
    border-color: var( --oi-slider-dot-active, var( --wp--preset--color--palette-1, #000 ) );
}

/* Sharp square. */
.oi-slider[data-dot-preset="square"] .splide__pagination__page {
    border-radius: 0;
    width:         8px;
    height:        8px;
}

/* Slightly rounded square. */
.oi-slider[data-dot-preset="rounded"] .splide__pagination__page {
    border-radius: 2px;
    width:         8px;
    height:        8px;
}

/* Horizontal pill bar — wider when active. */
.oi-slider[data-dot-preset="bar"] .splide__pagination__page {
    border-radius: 2px;
    width:         16px;
    height:        4px;
    transform:     none;
}
.oi-slider[data-dot-preset="bar"] .splide__pagination__page.is-active {
    width:     28px;
    transform: none;
}

/* Thin dash line. */
.oi-slider[data-dot-preset="dash"] .splide__pagination__page {
    border-radius: 0;
    width:         14px;
    height:        2px;
    transform:     none;
}
.oi-slider[data-dot-preset="dash"] .splide__pagination__page.is-active {
    width:     22px;
    transform: none;
}