/**
 * Beekom — JOOOL Container Switcher
 * Styles for the pill-shaped button row and the target container animation.
 *
 * Structure:
 *   .bk-jsw                 — the pill wrapper (flex row of buttons)
 *   .bk-jsw__btn            — individual tab button
 *   .bk-jsw__btn.is-active  — currently-selected tab
 *
 * Target containers are external to this widget. JS toggles the `hidden`
 * attribute on them plus a short fade, handled via the selectors below.
 */

/* --- Wrapper ("pill") ------------------------------------------------ */

.bk-jsw {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    box-sizing: border-box;
    max-width: 100%;
}

/* When the user picks "stretch" alignment, make each button grow equally.
   We detect stretch via the parent's computed justify-content through a
   wrapper modifier driven by Elementor's control — simplest is to make
   stretch behaviour kick in when the flex container is given width:100%,
   so we pair alignment=stretch with a full-width rule via custom CSS. */

/* --- Buttons --------------------------------------------------------- */

.bk-jsw__btn {
    appearance: none;
    -webkit-appearance: none;
    border: 0;
    margin: 0;
    cursor: pointer;
    font: inherit;
    line-height: 1.3;
    text-align: center;
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease;
}

.bk-jsw__btn:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

.bk-jsw__btn.is-active {
    cursor: default;
}

/* =====================================================================
   TARGET CONTAINERS
   ---------------------------------------------------------------------
   When a container is controlled by a switcher, JS sets
   `data-switcher-controlled="true"` on it. We use this attribute to
   apply the fade transition only to switcher-controlled elements —
   never to unrelated `[hidden]` elements elsewhere on the page.

   v1.2.1: Elementor containers (.e-con, .e-flex) declare `display: flex`
   with higher CSS specificity than the built-in `[hidden]` user-agent
   rule, which means setting the `hidden` attribute alone doesn't
   actually hide them. We force display:none with !important on any
   switcher-controlled element that has the `hidden` attribute. Scoped
   to `[data-switcher-controlled]` so we never touch unrelated elements
   on the page.
   ===================================================================== */

[data-switcher-controlled="true"][hidden] {
    display: none !important;
}

[data-switcher-controlled="true"] {
    transition: opacity 250ms ease;
}

/* During the fade-out phase, JS adds .bk-jsw-hiding to start the
   opacity transition before setting `hidden`. */
[data-switcher-controlled="true"].bk-jsw-hiding {
    opacity: 0;
    pointer-events: none;
}

/* During the fade-in phase, JS removes `hidden` then removes .bk-jsw-pre
   on the next frame so the transition plays. */
[data-switcher-controlled="true"].bk-jsw-pre {
    opacity: 0;
}

/* Respect users who asked for reduced motion — disable the fade,
   keep the instant swap. */
@media (prefers-reduced-motion: reduce) {
    [data-switcher-controlled="true"] {
        transition: none;
    }
}