/* ============================================================
 * Magenest "stack-tabs" skin.
 *
 * Turns a NATIVE Elementor Tabs widget into the sotatek sticky-nav +
 * stacked-cards layout — no custom widget. Opt-in per widget: add the CSS
 * class `magenest-stack-tabs` to the Tabs widget (Advanced → CSS Classes).
 * Everything is scoped under that class, so other Tabs widgets are untouched.
 *
 * Native markup it targets:
 *   .e-n-tabs > .e-n-tabs-heading > .e-n-tab-title   (the nav buttons)
 *             > .e-n-tabs-content > .e-con            (the panels = cards)
 *
 * JS-set vars: --mgn-tabs-auto-top (header+admin bar), --mgn-stack-top.
 * Tunables:    --mgn-tabs-extra-top, --mgn-stack-cards-gap.
 * ============================================================ */

/* Force a vertical (nav-on-top) layout regardless of the widget's Direction. */
.magenest-stack-tabs .e-n-tabs {
    --n-tabs-direction: column;
    --n-tabs-content-display: block;
}

/* ---------------- Sticky nav (tab headings) ---------------- */
.magenest-stack-tabs .e-n-tabs-heading {
    position: -webkit-sticky;
    position: sticky;
    top: calc(var(--mgn-tabs-auto-top, 0px) + var(--mgn-tabs-extra-top, 0px));
    z-index: 30;
    /* Nav fills the full column width (cross-axis stretch + explicit width).
     * Do NOT set --n-tabs-heading-width here: in our forced column layout that
     * var is the heading's flex-basis on the VERTICAL axis, so 100% would force
     * the nav to full container height and it vanishes (e.g. in the full-height
     * Elementor library preview). Width is handled by `width` below. */
    width: 100%;
}

/* Every tab title is the same width and together they fill the nav, no matter
 * how long each label is (overrides the native content-sized flex vars). */
.magenest-stack-tabs .e-n-tabs-heading > .e-n-tab-title {
    flex-grow: 1 !important;
    flex-shrink: 1 !important;
    flex-basis: 0 !important;
    width: auto !important;
}

/* ---------------- Show ALL panels, stacked ---------------- */
.magenest-stack-tabs .e-n-tabs-content {
    display: block !important;
    position: relative;
    --mgn-stack-cards-gap: 16px;
    /* Breathing room between the nav and the cards. The JS reads this same var
     * for the docked offset so the gap is identical at rest and while scrolling. */
}

/* Each panel becomes a sticky, stacking card. `display:flex !important` beats
 * the native rule `.e-n-tabs-content > .e-con:not(.e-active){display:none}`. */
.magenest-stack-tabs .e-n-tabs-content > .e-con {
    display: flex !important;
    order: 0 !important;
    position: -webkit-sticky;
    position: sticky;
    top: var(--mgn-stack-top, 160px);
    transform-origin: center top;
    will-change: transform;
    /* Elementor adds `transform .4s` to .e-con — kill it so the scale follows
     * the scroll instantly (no shrink delay), exactly like sotatek. */
    --e-con-transform-transition-duration: 0s;
}

/* In the Elementor editor the scroll effect is off — let panels flow so every
 * card (and its drop zone) is reachable. */
.elementor-editor-active .magenest-stack-tabs .e-n-tabs-content > .e-con {
    position: relative;
    top: auto;
    margin-bottom: 16px;
    transform: none !important;
}

/* ---------------- Mobile: keep the horizontal nav on top ---------------- */
/* Below 767px Elementor flips nested Tabs into a vertical "accordion"
 * (`--n-tabs-heading-display: contents`), which drops the tab titles into the
 * content flow. Disable that and keep a sticky, horizontally-scrollable nav
 * bar on top with the icon beside the label (see error-2.png). */
@media (max-width: 1024px) {
    .magenest-stack-tabs.elementor-widget-n-tabs {
        --n-tabs-heading-display: flex !important;
        --n-tabs-content-display: block !important;
        --n-tabs-title-direction: row !important;

    }
    .magenest-stack-tabs .e-n-tabs-heading {
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start;
    }

    /* Tabs sized to their content and scroll horizontally (not squished). */
    .magenest-stack-tabs .e-n-tabs-heading > .e-n-tab-title {
        margin-block-start: 0 !important;
        margin-block-end: 0 !important;
        min-width: 220px !important;
    }

    .magenest-stack-tabs .e-n-tabs-heading > .e-n-tab-title .e-n-tab-title-text {
        text-align: left;
    }
}