/**
 * Adaptive Container - front-end layout engine.
 *
 * Scope
 * -----
 * This file styles ONE thing: what a native Elementor Grid container looks like
 * at a breakpoint the author switched to Horizontal Scroll. It has no grid
 * rules, no gap rule, no alignment rules and no column rules, because Elementor
 * already ships responsive controls for all of those and they are left running.
 * `--display: flex` is written by the Layout Mode control, and grid properties
 * simply do not apply to a flex container - so the native declarations go inert
 * on their own with nothing here to override them.
 *
 * This file is 100% static. Every per-breakpoint value arrives as a CSS custom
 * property written by Elementor's own CSS engine (which also generates the
 * media queries for whatever breakpoints the site has active).
 *
 * Terminology
 * -----------
 * "scroller" = the element that actually lays the children out:
 *   - Content Width: Full Width  -> the container itself   (.e-con-full)
 *   - Content Width: Boxed       -> its inner wrapper      (> .e-con-inner)
 *
 * "item" = a direct child element of the scroller. Children are matched by
 * `.elementor-element`, which covers both widgets and nested containers, and
 * deliberately excludes Elementor's own background/overlay/empty-view helpers
 * and this plugin's navigation anchors.
 *
 * Custom properties
 * -----------------
 * Elementor's own, written by the Layout Mode control:
 *              --display --container-widget-width
 * Mode bundle: --cda-ac-flex-direction --cda-ac-flex-wrap
 *              --cda-ac-overflow-x --cda-ac-overflow-y --cda-ac-snap-type
 *              --cda-ac-item-basis --cda-ac-item-grow --cda-ac-item-shrink
 *              --cda-ac-item-snap --cda-ac-nav-display
 * Scroll:      --cda-ac-item-width --cda-ac-snap --cda-ac-snap-align
 *              --cda-ac-scroll-padding --cda-ac-scroll-behavior
 * Navigation:  --cda-ac-nav-size --cda-ac-nav-icon-size --cda-ac-nav-offset
 *              --cda-ac-nav-radius --cda-ac-nav-color --cda-ac-nav-bg
 *              --cda-ac-nav-border-width --cda-ac-nav-border-color
 *              --cda-ac-nav-color-hover --cda-ac-nav-bg-hover
 */

/* ---------------------------------------------------------------------------
 * 1. The scroller
 *
 * Specificity note: `.elementor-element.e-con.cda-ac-on...` is (0,4,0), which
 * clears Elementor's own `.e-con.e-grid` rules (0,2,0) and its `.e-con` base
 * rule (0,1,0) without a single `!important`.
 *
 * Verified against Elementor 4.2.4 (assets/css/frontend.css):
 *   - `.e-con, .e-con > .e-con-inner { display: var(--display) }` - the lever
 *     the Layout Mode control pulls. The `display` line below is belt-and-
 *     braces for a build that stops routing through the variable.
 *   - `.e-con { overflow: var(--overflow) }` - outranked here, which is why
 *     both overflow fallbacks defer back to `--overflow` rather than assuming
 *     `visible`. Elementor's Overflow control keeps working at Grid
 *     breakpoints.
 *   - gap is `var(--row-gap) var(--column-gap)` on BOTH `.e-con-full` and
 *     `.e-con > .e-con-inner`, ungated by `.e-flex`/`.e-grid`, and the grid
 *     Gaps control writes that same pair. So the author's gap carries into
 *     scroll mode by itself and this file must not declare `gap` at all.
 *
 * Every fallback is the value the property would have had anyway, so a
 * container sitting at a Grid breakpoint is byte-for-byte what Elementor
 * renders on its own.
 * ------------------------------------------------------------------------- */
.elementor-element.e-con.cda-ac-on.e-con-full,
.elementor-element.e-con.cda-ac-on > .e-con-inner {
    display: var(--display, grid);

    /* Inert under `display: grid`; these are the scroll mode's layout. */
    flex-direction: var(--cda-ac-flex-direction, row);
    flex-wrap: var(--cda-ac-flex-wrap, nowrap);

    /* Scrolling. Both axes are set explicitly: leaving overflow-y at `visible`
       while overflow-x is `auto` makes the browser compute it to `auto` too,
       which produces a stray vertical scrollbar. */
    overflow-x: var(--cda-ac-overflow-x, var(--overflow, visible));
    overflow-y: var(--cda-ac-overflow-y, var(--overflow, visible));
    scroll-snap-type: var(--cda-ac-snap-type, none);
    scroll-behavior: var(--cda-ac-scroll-behavior, auto);
    scroll-padding-inline: var(--cda-ac-scroll-padding, 0px);
    overscroll-behavior-x: var(--cda-ac-overscroll-x, contain);
    -webkit-overflow-scrolling: touch;
}

/* ---------------------------------------------------------------------------
 * 1b. Room for the "Below, aligned right" arrow strip.
 *
 * Added to Elementor's own `--padding-block-end` rather than replacing it -
 * this rule outranks the `.e-con-full, .e-con > .e-con-inner` rule that applies
 * the author's Padding setting, so overwriting it here would silently discard
 * their value.
 *
 * `--cda-ac-nav-space` comes from the Layout Mode bundle: a real height at a
 * Horizontal Scroll breakpoint, and 0px at a Grid one, so a Grid breakpoint
 * never carries a band of empty space for arrows it does not show.
 * ------------------------------------------------------------------------- */
.elementor-element.e-con.cda-ac-on.cda-ac-nav-on.e-con-full,
.elementor-element.e-con.cda-ac-on.cda-ac-nav-on > .e-con-inner {
    padding-block-start: calc(var(--padding-block-start, 0px) + var(--cda-ac-nav-space-top, 0px));
    padding-block-end: calc(var(--padding-block-end, 0px) + var(--cda-ac-nav-space-bottom, 0px));
}

/* Which edge gets the reserved strip. `--cda-ac-nav-space` is the height and
   comes from the Layout Mode bundle, so it collapses to 0px at a Grid
   breakpoint; these two only choose the side. The edge-overlay placement sets
   neither, so both calcs above resolve to the author's own padding + 0px.

   These have to be declared on the LAYOUT NODE, not on the container. A
   `var()` is substituted using the value in scope at the element where the
   declaration sits, and the Layout Mode bundle writes `--cda-ac-nav-space` to
   the layout node - declaring these on `.e-con` would resolve it against a
   container that has no such value and silently collapse to the 0px fallback. */
.cda-ac-navpos-top-start.e-con-full,
.cda-ac-navpos-top-start > .e-con-inner,
.cda-ac-navpos-top-end.e-con-full,
.cda-ac-navpos-top-end > .e-con-inner {
    --cda-ac-nav-space-top: var(--cda-ac-nav-space, 0px);
}

.cda-ac-navpos-bottom-start.e-con-full,
.cda-ac-navpos-bottom-start > .e-con-inner,
.cda-ac-navpos-bottom-end.e-con-full,
.cda-ac-navpos-bottom-end > .e-con-inner {
    --cda-ac-nav-space-bottom: var(--cda-ac-nav-space, 0px);
}

/* ---------------------------------------------------------------------------
 * 2. The items
 *
 * Grid mode resets these to `0 1 auto` / `none`, i.e. the initial values, so
 * grid track sizing is left entirely to Elementor.
 * ------------------------------------------------------------------------- */
.elementor-element.e-con.cda-ac-on.e-con-full > .elementor-element,
.elementor-element.e-con.cda-ac-on > .e-con-inner > .elementor-element {
    /* Ignored in grid mode; drives the item width in scroll mode.
     *
     * These read *inherited* custom properties rather than being hard-coded, so
     * a single child can opt out of the uniform width by declaring its own
     * `--cda-ac-item-basis` (Advanced > Custom CSS on that child:
     * `selector { --cda-ac-item-basis: 60%; }`). Inheritance beats the parent's
     * value with no specificity battle and works per breakpoint. */
    flex-grow: var(--cda-ac-item-grow, 0);
    flex-shrink: var(--cda-ac-item-shrink, 1);
    flex-basis: var(--cda-ac-item-basis, auto);
    scroll-snap-align: var(--cda-ac-item-snap, none);
    min-width: 0;
}

/* Elementor's "drag widget here" placeholder must never be treated as an item. */
.elementor-element.e-con.cda-ac-on .elementor-empty-view {
    flex: 1 0 100%;
    grid-column: 1 / -1;
}

/* ---------------------------------------------------------------------------
 * 3. Scrollbar visibility
 *
 * `scrollbar-width: none` is the standard property; the ::-webkit-scrollbar
 * rule keeps older Safari/Chrome in line. Hiding is purely cosmetic - pointer,
 * touch, wheel and keyboard scrolling are all untouched, and the JS adds the
 * focusable-region semantics a hidden scrollbar would otherwise cost.
 * ------------------------------------------------------------------------- */
.elementor-element.e-con.cda-ac-on.cda-ac-sb-hide.e-con-full,
.elementor-element.e-con.cda-ac-on.cda-ac-sb-hide > .e-con-inner {
    scrollbar-width: none;
}

.elementor-element.e-con.cda-ac-on.cda-ac-sb-hide.e-con-full::-webkit-scrollbar,
.elementor-element.e-con.cda-ac-on.cda-ac-sb-hide > .e-con-inner::-webkit-scrollbar {
    display: none;
    height: 0;
    width: 0;
}

/* ---------------------------------------------------------------------------
 * 4. Navigation arrows (optional, JS-injected)
 *
 * Each arrow lives in a zero-sized `position: sticky` anchor that sits at the
 * very start / very end of the flex row. Sticky pins the anchor to the edge of
 * the scrollport, so the button stays put while the content scrolls - without
 * a wrapper element, without JS positioning, and without contributing any
 * scrollable width of its own. `order` keeps them at the ends regardless of
 * where the editor re-renders them, and the negative inline margin cancels the
 * extra `gap` the anchor would otherwise introduce - reading Elementor's own
 * gap variables, since this module no longer owns a gap control.
 * ------------------------------------------------------------------------- */
.cda-ac-nav {
    display: var(--cda-ac-nav-display, none);
    position: sticky;
    z-index: 3;
    flex: 0 0 0px;
    width: 0;
    height: 0;
    align-self: center;
    overflow: visible;
    pointer-events: none;
    scroll-snap-align: none;
}

.cda-ac-nav[hidden] {
    display: none !important;
}

.cda-ac-nav--prev {
    inset-inline-start: 0;
    order: -1;
    margin-inline-end: calc(-1 * var(--column-gap, 0px));
}

.cda-ac-nav--next {
    inset-inline-end: 0;
    order: 1;
    margin-inline-start: calc(-1 * var(--column-gap, 0px));
}

/* The bar anchor stretches to the row's content height so the group can be
   placed just past its top or bottom edge, inside the reserved strip. Which
   edge of the scrollport it sticks to depends on the alignment, so the JS adds
   the matching --bar-start / --bar-end class. */
.cda-ac-nav--bar {
    align-self: stretch;
    height: auto;
}

.cda-ac-nav--bar-start {
    order: -1;
    inset-inline-start: 0;
    margin-inline-end: calc(-1 * var(--column-gap, 0px));
}

.cda-ac-nav--bar-end {
    order: 1;
    inset-inline-end: 0;
    margin-inline-start: calc(-1 * var(--column-gap, 0px));
}

.cda-ac-nav__group {
    position: absolute;
    display: flex;
    gap: var(--cda-ac-nav-gap, 8px);
    pointer-events: auto;
}

/* Vertical side: just past the row's content box, in the reserved strip. */
.cda-ac-navpos-bottom-start .cda-ac-nav__group,
.cda-ac-navpos-bottom-end .cda-ac-nav__group {
    top: 100%;
    margin-block-start: var(--cda-ac-nav-bar-offset, 16px);
}

.cda-ac-navpos-top-start .cda-ac-nav__group,
.cda-ac-navpos-top-end .cda-ac-nav__group {
    bottom: 100%;
    margin-block-end: var(--cda-ac-nav-bar-offset, 16px);
}

/* Horizontal side. Logical properties, so RTL mirrors for free. */
.cda-ac-navpos-top-start .cda-ac-nav__group,
.cda-ac-navpos-bottom-start .cda-ac-nav__group {
    inset-inline-start: 0;
}

.cda-ac-navpos-top-end .cda-ac-nav__group,
.cda-ac-navpos-bottom-end .cda-ac-nav__group {
    inset-inline-end: 0;
}

/* Inside the group the buttons are ordinary flex children, not absolutely
   positioned against an edge anchor. */
.cda-ac-nav__group .cda-ac-nav__btn {
    position: static;
    transform: none;
}

/* Apple's arrows are flat grey discs, no shadow. These are only defaults - the
   Adaptive Navigation style controls generate (0,3,0) selectors and still win. */
.cda-ac-nav__group .cda-ac-nav__btn {
    background-color: var(--cda-ac-nav-bg, #e8e8ed);
    box-shadow: none;
}

.cda-ac-nav__group .cda-ac-nav__btn:hover,
.cda-ac-nav__group .cda-ac-nav__btn:focus-visible {
    background-color: var(--cda-ac-nav-bg-hover, var(--cda-ac-nav-bg, #dededf));
}

.cda-ac-nav__btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    inline-size: var(--cda-ac-nav-size, 40px);
    block-size: var(--cda-ac-nav-size, 40px);
    padding: 0;
    margin: 0;
    pointer-events: auto;
    cursor: pointer;
    color: var(--cda-ac-nav-color, #1a1a1a);
    background-color: var(--cda-ac-nav-bg, #ffffff);
    border: var(--cda-ac-nav-border-width, 0px) solid var(--cda-ac-nav-border-color, currentColor);
    border-radius: var(--cda-ac-nav-radius, 50%);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.18);
    transition: color 0.2s ease, background-color 0.2s ease, opacity 0.2s ease;
}

.cda-ac-nav--prev .cda-ac-nav__btn {
    inset-inline-start: var(--cda-ac-nav-offset, 8px);
}

.cda-ac-nav--next .cda-ac-nav__btn {
    inset-inline-end: var(--cda-ac-nav-offset, 8px);
}

.cda-ac-nav__btn:hover,
.cda-ac-nav__btn:focus-visible {
    color: var(--cda-ac-nav-color-hover, var(--cda-ac-nav-color, #1a1a1a));
    background-color: var(--cda-ac-nav-bg-hover, var(--cda-ac-nav-bg, #ffffff));
}

.cda-ac-nav__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.cda-ac-nav__btn[aria-disabled="true"] {
    opacity: 0.35;
    cursor: default;
}

.cda-ac-nav__icon {
    inline-size: var(--cda-ac-nav-icon-size, 60%);
    block-size: var(--cda-ac-nav-icon-size, 60%);
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    pointer-events: none;
}

/* Mirror the chevrons in RTL. */
[dir="rtl"] .cda-ac-nav__icon,
.rtl .cda-ac-nav__icon {
    transform: scaleX(-1);
}

/* ---------------------------------------------------------------------------
 * 5. Reduced motion
 *
 * Same selector as rule 1 but later in the file, so it wins the cascade
 * without `!important`. The JS falls back to instant scrolling too.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .elementor-element.e-con.cda-ac-on.e-con-full,
    .elementor-element.e-con.cda-ac-on > .e-con-inner {
        scroll-behavior: auto;
    }

    .cda-ac-nav__btn {
        transition: none;
    }
}