/**
 * qke-lang-switcher.css — language dropdown visibility + positioning.
 *
 * Destination: assets/qke-lang-switcher.css
 *
 * WHY THIS FILE EXISTS
 * --------------------
 * The toggle JS (assets/qke-lang-switcher.js) was already bound and already
 * removing the [hidden] attribute on click. The menu *was* opening — it was
 * simply never visible, for two reasons:
 *
 *   1. CLIPPING — ancestor wrappers (.qke-dark-wrapper, .entry-content,
 *      #content, #primary) carry overflow:hidden, which cuts off any child
 *      that escapes their box. An absolutely-positioned dropdown is exactly
 *      that.
 *   2. STACKING — the hero banner creates its own stacking context and paints
 *      over the menu, so even the unclipped part sat behind the banner.
 *
 * Loaded with a dependency on qke-layer0 so it always cascades LAST and its
 * !important declarations reliably win over the base sheet.
 */

/* 1. Stop ancestors from clipping the open menu. */
.qke-dark-wrapper,
.entry-content,
#content,
#primary {
    overflow: visible !important;
}

/* 2. Positioning context + lift the whole widget above the hero banner. */
.qke-lang-switcher {
    position: relative !important;
    display: inline-block !important;
    z-index: 999999 !important;
}

/* 3. The menu panel itself. */
.qke-dark-wrapper .qke-lang-dropdown,
.qke-lang-switcher .qke-lang-dropdown {
    position: absolute !important;
    top: calc(100% + 5px) !important;
    left: 0 !important;
    min-width: 170px !important;
    background: #181d28 !important;
    border: 1px solid #2e384d !important;
    border-radius: 8px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6) !important;
    padding: 6px 0 !important;
    z-index: 9999999 !important;
}

/* RTL: anchor the panel to the right edge for ar / ur pages. */
.qke-lang-switcher[dir="rtl"] .qke-lang-dropdown {
    left: auto !important;
    right: 0 !important;
}

/* 4. Closed state. [hidden] alone is not enough once display is forced. */
.qke-lang-switcher .qke-lang-dropdown[hidden]:not(.qke-show) {
    display: none !important;
}

/* 5. Open state — via JS class, via aria-expanded, or via keyboard focus. */
.qke-lang-dropdown.qke-show,
.qke-lang-switcher:focus-within .qke-lang-dropdown,
.qke-lang-btn[aria-expanded="true"] + .qke-lang-dropdown {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

/* 5b. Desktop hover-to-open. Gated to real pointers so a tap on a phone does
       not leave the menu stuck open under a phantom :hover state. */
@media (hover: hover) and (pointer: fine) {
    .qke-lang-switcher:hover .qke-lang-dropdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* 6. The individual language links. */
.qke-lang-dropdown .qke-lang-option {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 9px 16px !important;
    color: #e2e8f0 !important;
    font-size: 14px !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    background: transparent !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}

.qke-lang-dropdown .qke-lang-option:hover,
.qke-lang-dropdown .qke-lang-option:focus {
    background-color: #273142 !important;
    color: #ffffff !important;
}

.qke-lang-dropdown .qke-lang-option.qke-lang-active {
    background-color: rgba(56, 189, 248, 0.15) !important;
    color: #38bdf8 !important;
    font-weight: 600 !important;
}