/* ==========================================================================
   Widget: Divided Menu Accordion
   BEM root: .gtea-div-menu
   ==========================================================================
   Per-breakpoint sidebar switching:

     Three independent switcher controls on the PHP side
     (`show_sidebar_desktop`, `show_sidebar_tablet`, `show_sidebar_mobile`)
     use `prefix_class` to inject one of these classes on the Elementor
     widget wrapper when set to "yes":

       - .gtea-div-menu-desktop-sidebar-yes
       - .gtea-div-menu-tablet-sidebar-yes
       - .gtea-div-menu-mobile-sidebar-yes

     When a switch is OFF, no class is added — the default inline-accordion
     behavior applies at that breakpoint.

   Strategy:

     The default state on `.gtea-div-menu` sets variables for the inline
     mode (CTA / backdrop / close hidden, sidebar wrapper static and
     in-flow). Each `@media` block below pairs ONE breakpoint range with
     its corresponding switch class and overrides the SAME variables to
     activate the canvas behavior at that viewport only. The BEM rules
     at the bottom consume the variables — declared exactly once.
   ========================================================================== */

/* ── Root ─────────────────────────────────────────────────────────── */
.gtea-div-menu {
    width: 100%;
    box-sizing: border-box;

    /* Default: inline accordion — sidebar / CTA / backdrop / close hidden */
    --gtea-dma-cta-display:        none;
    --gtea-dma-backdrop-display:   none;
    --gtea-dma-close-display:      none;
    --gtea-dma-sidebar-position:   static;
    --gtea-dma-sidebar-left:       auto;
    --gtea-dma-sidebar-width:      100%;
    --gtea-dma-sidebar-height:     auto;
    --gtea-dma-sidebar-overflow-y: visible;
    --gtea-dma-sidebar-z:          auto;
    --gtea-dma-sidebar-transition: none;
    --gtea-dma-backdrop-opacity:   0;
    --gtea-dma-backdrop-pointer:   none;
}

/* ============================================================
   Breakpoint switches — each @media activates the canvas mode
   only when the matching `*-sidebar-yes` class is present on
   the Elementor wrapper.
   ============================================================ */

/* ─── DESKTOP ─── (≥ 1025 px) ─────────────────────────────────────── */
@media (min-width: 1025px) {
    .gtea-div-menu-desktop-sidebar-yes .gtea-div-menu {
        --gtea-dma-cta-display:        flex;
        --gtea-dma-backdrop-display:   block;
        --gtea-dma-close-display:      flex;
        --gtea-dma-sidebar-position:   fixed;
        --gtea-dma-sidebar-left:       calc(-1 * var(--gtea-div-menu-sidebar-w, 300px) - 20px);
        --gtea-dma-sidebar-width:      var(--gtea-div-menu-sidebar-w, 300px);
        --gtea-dma-sidebar-height:     100dvh;
        --gtea-dma-sidebar-overflow-y: auto;
        --gtea-dma-sidebar-z:          var(--gtea-div-menu-sidebar-z, 99999);
        --gtea-dma-sidebar-transition: left 0.3s ease;
    }

    .gtea-div-menu-desktop-sidebar-yes .gtea-div-menu.is-open {
        --gtea-dma-sidebar-left:     0;
        --gtea-dma-backdrop-opacity: 1;
        --gtea-dma-backdrop-pointer: auto;
    }
}

/* ─── TABLET ─── (768–1024 px) ────────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 768px) {
    .gtea-div-menu-tablet-sidebar-yes .gtea-div-menu {
        --gtea-dma-cta-display:        flex;
        --gtea-dma-backdrop-display:   block;
        --gtea-dma-close-display:      flex;
        --gtea-dma-sidebar-position:   fixed;
        --gtea-dma-sidebar-left:       calc(-1 * var(--gtea-div-menu-sidebar-w, 300px) - 20px);
        --gtea-dma-sidebar-width:      var(--gtea-div-menu-sidebar-w, 300px);
        --gtea-dma-sidebar-height:     100dvh;
        --gtea-dma-sidebar-overflow-y: auto;
        --gtea-dma-sidebar-z:          var(--gtea-div-menu-sidebar-z, 99999);
        --gtea-dma-sidebar-transition: left 0.3s ease;
    }

    .gtea-div-menu-tablet-sidebar-yes .gtea-div-menu.is-open {
        --gtea-dma-sidebar-left:     0;
        --gtea-dma-backdrop-opacity: 1;
        --gtea-dma-backdrop-pointer: auto;
    }
}

/* ─── MOBILE ─── (≤ 767 px) ───────────────────────────────────────── */
@media (max-width: 767px) {
    .gtea-div-menu-mobile-sidebar-yes .gtea-div-menu {
        --gtea-dma-cta-display:        flex;
        --gtea-dma-backdrop-display:   block;
        --gtea-dma-close-display:      flex;
        --gtea-dma-sidebar-position:   fixed;
        --gtea-dma-sidebar-left:       calc(-1 * var(--gtea-div-menu-sidebar-w, 300px) - 20px);
        --gtea-dma-sidebar-width:      var(--gtea-div-menu-sidebar-w, 300px);
        --gtea-dma-sidebar-height:     100dvh;
        --gtea-dma-sidebar-overflow-y: auto;
        --gtea-dma-sidebar-z:          var(--gtea-div-menu-sidebar-z, 99999);
        --gtea-dma-sidebar-transition: left 0.3s ease;
    }

    .gtea-div-menu-mobile-sidebar-yes .gtea-div-menu.is-open {
        --gtea-dma-sidebar-left:     0;
        --gtea-dma-backdrop-opacity: 1;
        --gtea-dma-backdrop-pointer: auto;
    }
}

/* ============================================================
   BEM elements — consume the layout variables
   ============================================================ */

/* ── CTA wrap — flex container so alignment controls work ────────── */
.gtea-div-menu__cta-wrap {
    display: var(--gtea-dma-cta-display, none);
    align-items: center;
    box-sizing: border-box;
}

/* ── CTA toggle button ───────────────────────────────────────────── */
.gtea-div-menu__cta-toggle {
    display: var(--gtea-dma-cta-display, none);
    align-items: center;
    gap: 8px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1;
}

/* CTA toggle icon wrapper
 * ----------------------
 * Hosts whatever `Icons_Manager::render_icon()` emits: a FontAwesome
 * `<i>` (icon-font glyph that inherits `color`) or an inline `<svg>`
 * (whose `path`s read from `fill`). The Elementor controls
 * `cta_icon_color` / `cta_icon_color_hover` write to BOTH this
 * wrapper (for `<i>`) and the inner `<svg>` directly, so a single
 * control paints the icon regardless of the renderer's output.
 *
 * The transitions below smooth the change between Normal and Hover
 * states. The transition duration matches the `cta_transition`
 * control's default (300 ms); the user-configured value still wins
 * because it writes `transition: all ...ms ease-in-out` on the
 * `:hover` target via Elementor's selector. */
.gtea-div-menu__cta-icon {
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    transition: color 0.3s ease, fill 0.3s ease;
}

.gtea-div-menu__cta-icon i,
.gtea-div-menu__cta-icon svg {
    display: block;
}

/* Make inline SVGs follow `color` when no explicit `fill` is set,
 * so the Elementor control's value reaches the rendered glyph
 * whether it was authored with `fill="currentColor"` or no fill
 * attribute at all. The `cta_icon_color` control also writes
 * `fill` directly, but `currentColor` is the safety net for
 * SVG libraries that depend on the cascade. */
.gtea-div-menu__cta-icon svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
    transition: fill 0.3s ease, color 0.3s ease;
}

/* ── Backdrop overlay ────────────────────────────────────────────── */
.gtea-div-menu__backdrop {
    display: var(--gtea-dma-backdrop-display, none);
    position: fixed;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: calc(var(--gtea-div-menu-sidebar-z, 99999) - 1);
    opacity: var(--gtea-dma-backdrop-opacity, 0);
    pointer-events: var(--gtea-dma-backdrop-pointer, none);
    transition: opacity 0.3s ease;
    box-sizing: border-box;
}

/* ── Sidebar panel ──────────────────────────────────────────────── */
.gtea-div-menu__sidebar {
    position:   var(--gtea-dma-sidebar-position, static);
    top:        0;
    left:       var(--gtea-dma-sidebar-left, auto);
    width:      var(--gtea-dma-sidebar-width, 100%);
    height:     var(--gtea-dma-sidebar-height, auto);
    overflow-y: var(--gtea-dma-sidebar-overflow-y, visible);
    z-index:    var(--gtea-dma-sidebar-z, auto);
    transition: var(--gtea-dma-sidebar-transition, none);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

/* ── Close button (inside sidebar) ───────────────────────────────── */
.gtea-div-menu__close {
    display: var(--gtea-dma-close-display, none);
    align-items: center;
    justify-content: flex-end;
    width: 100%;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    box-sizing: border-box;
    line-height: 1;
}

.gtea-div-menu__close i,
.gtea-div-menu__close svg {
    display: block;
}

/* ── Accordion group ─────────────────────────────────────────────── */
.gtea-div-menu__accordion-group {
    box-sizing: border-box;
}

/* ── Accordion header button ─────────────────────────────────────── */
.gtea-div-menu__accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    cursor: pointer;
    background: none;
    border: none;
    padding: 12px 16px;
    box-sizing: border-box;
    font-family: inherit;
    text-align: left;
}

/* ── Accordion title ─────────────────────────────────────────────── */
.gtea-div-menu__accordion-title {
    flex: 1;
    box-sizing: border-box;
}

/* ── Accordion icon wrapper ──────────────────────────────────────── */
.gtea-div-menu__accordion-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    box-sizing: border-box;
}

.gtea-div-menu__accordion-icon i,
.gtea-div-menu__accordion-icon svg {
    display: block;
}

/* Icon swap: closed icon by default, open icon when group is expanded */
.gtea-div-menu__accordion-icon-open {
    display: none;
}

.gtea-div-menu__accordion-group.is-open .gtea-div-menu__accordion-icon-closed {
    display: none;
}

.gtea-div-menu__accordion-group.is-open .gtea-div-menu__accordion-icon-open {
    display: inline-flex;
    align-items: center;
}

/* ── Accordion content — animated via grid-template-rows ─────────── */
/*
 * grid-template-rows: 0fr → 1fr animates height smoothly without JS
 * measuring the element. The inner wrapper needs min-height: 0 for
 * the collapse to work.
 */
.gtea-div-menu__accordion-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms ease;
    box-sizing: border-box;
}

.gtea-div-menu__accordion-group.is-open .gtea-div-menu__accordion-content {
    grid-template-rows: 1fr;
}

/* ── Content inner wrapper ───────────────────────────────────────── */
.gtea-div-menu__accordion-content-inner {
    min-height: 0;
    overflow: hidden;
    box-sizing: border-box;
}

/* ── Menu list ───────────────────────────────────────────────────── */
.gtea-div-menu__menu-list {
    list-style: none;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

/* ── Menu item ───────────────────────────────────────────────────── */
.gtea-div-menu__menu-item {
    box-sizing: border-box;
    padding: 8px 16px;
}

/* ── Menu link ───────────────────────────────────────────────────── */
.gtea-div-menu__link {
    display: block;
    text-decoration: none;
    color: inherit;
    box-sizing: border-box;
}

/* ── Empty state ─────────────────────────────────────────────────── */
.gtea-div-menu__empty {
    padding: 16px;
    font-style: italic;
    opacity: 0.6;
    box-sizing: border-box;
}