/* ==========================================================================
   settings-popup.css — header gear popup + top-bar language menu

   Two independent components that share a visual language:
     1. .lang-menu        top-bar globe button + anchored locale list
     2. .settings-popup   gear button + anchored quick-settings panel

   They are deliberately NOT a shared component: the top-bar list is a
   hover-free SSR anchor menu that must stay lightweight, while the popup is a
   stacked control panel with an inline-expanding language sub-list. Keeping
   the class prefixes separate (.lang-menu-* vs .sp-*) means a change to one
   cannot silently restyle the other.

   Every colour, radius, shadow and font resolves to a variables.css token that
   exists in BOTH the dark and light theme blocks. Directional spacing uses
   logical properties (inset-inline-*, margin-inline-*, text-align: start) so
   the Arabic RTL layout mirrors correctly without extra rtl.css rules.
   ========================================================================== */

/* ==========================================================================
   1. Top-bar language menu
   ========================================================================== */
.lang-menu {
    position: relative;
}

.lang-menu-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 9px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-pill);
    /* Matches the adjacent .top-bar-link metrics so the menu button sits on the
       same baseline as the Privacy / About / Contact links. */
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 11px;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background var(--transition-fast);
}

.lang-menu-btn:hover,
.lang-menu.is-open .lang-menu-btn {
    color: var(--text-primary);
    background: var(--bg-pill);
}

.lang-menu-btn .bi-globe2 {
    font-size: 15px;
}

.lang-menu-code {
    letter-spacing: 0.04em;
}

.lang-menu-caret {
    font-size: 10px;
    transition: transform var(--transition-fast);
}

.lang-menu.is-open .lang-menu-caret {
    transform: rotate(180deg);
}

.lang-menu-list {
    position: absolute;
    top: calc(100% + 8px);
    inset-inline-end: 0;
    z-index: 1060;
    min-width: 194px;
    padding: 6px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-btn);
    box-shadow: var(--shadow-popover);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast),
                transform var(--transition-fast);
}

.lang-menu.is-open .lang-menu-list {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ==========================================================================
   2. Language option row — shared shape for BOTH menus.
      Layout is [endonym] [code badge] [check slot]; the check element is
      always rendered so every row keeps the same width and the endonyms stay
      vertically aligned whether or not the locale is active.
   ========================================================================== */
.lang-menu-item,
.sp-lang-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: var(--border-radius-btn);
    text-decoration: none;
    color: var(--text-secondary);
    transition: background var(--transition-fast), color var(--transition-fast);
}

.lang-menu-item:hover,
.sp-lang-item:hover {
    background: var(--bg-card-hover);
    color: var(--text-primary);
}

.lang-menu-item.is-active,
.sp-lang-item.is-active {
    color: var(--text-primary);
    font-weight: 600;
}

.lang-menu-name,
.sp-lang-name {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-base);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.lang-menu-badge,
.sp-lang-badge {
    flex: 0 0 auto;
    padding: 1px 6px;
    border-radius: 5px;
    background: var(--bg-pill);
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-xs);
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
}

.lang-menu-item.is-active .lang-menu-badge,
.sp-lang-item.is-active .sp-lang-badge {
    background: var(--accent-primary-bg);
    color: var(--accent-primary);
}

.lang-menu-check,
.sp-lang-check {
    /* Fixed-width slot so inactive rows reserve the same space as active ones. */
    flex: 0 0 16px;
    width: 16px;
    font-size: 15px;
    text-align: end;
    color: var(--accent-primary);
    opacity: 0;
}

.lang-menu-item.is-active .lang-menu-check,
.sp-lang-item.is-active .sp-lang-check {
    opacity: 1;
}

/* ==========================================================================
   3. Gear popup panel
   ========================================================================== */
.settings-popup-wrap {
    position: relative;
}

/* The gear keeps its .btn-settings chrome from style.css; this only adds the
   open-state accent so the trigger reads as "pressed" while the panel is up.
   Specificity (0,3,0) beats style.css's `.site-header .btn-settings`. */
.site-header .btn-settings.is-open {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: var(--text-on-accent);
}

.settings-popup {
    position: absolute;
    top: calc(100% + 10px);
    inset-inline-end: 0;
    z-index: 1060;
    width: 320px;
    background: var(--bg-card);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-card);
    box-shadow: var(--shadow-popover);
    /* Clips nothing that needs to escape: the language sub-list expands the
       panel's own height rather than overflowing it. */
    overflow: hidden;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--transition-fast), visibility var(--transition-fast),
                transform var(--transition-fast);
}

/* The open class lands on the WRAPPER, not on the panel: settings-popup.js
   registers #settingsPopupWrap as the menu root because that is the element
   the outside-click hit-test needs (it contains both the gear button and the
   panel). Mirrors the .lang-menu.is-open .lang-menu-list pattern below. */
.settings-popup-wrap.is-open .settings-popup {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* ── Row shell ─────────────────────────────────────────────────────────────
   flex-wrap lets the control drop below its label in locales with long labels
   (French "Format de l'heure", Arabic "12 ساعة") instead of overflowing the
   fixed 320px panel. */
.sp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 12px;
    padding: 12px 16px;
}

.sp-row + .sp-row {
    border-top: 1px solid var(--border-color);
}

.sp-row-head {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
}

.sp-row-icon {
    flex-shrink: 0;
    font-size: 15px;
    color: var(--text-tertiary);
}

.sp-row-label {
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-base);
    color: var(--text-primary);
}

/* ── Segmented pill (Appearance, Time Format) ──────────────────────────────
   Two labelled halves; both states are named so the current value is never
   ambiguous. Equal-width halves via flex: 1 1 0. */
.sp-seg {
    display: flex;
    flex: 0 1 auto;
    /* Pushes the pill to the trailing edge on the shared line AND when it has
       wrapped onto its own line (space-between alone would leave it at start). */
    margin-inline-start: auto;
    padding: 3px;
    gap: 2px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-pill);
}

.sp-seg-opt {
    display: inline-flex;
    flex: 1 1 0;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 12px;
    background: transparent;
    border: none;
    border-radius: var(--border-radius-pill);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
    cursor: pointer;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.sp-seg-opt:hover {
    color: var(--text-primary);
}

.sp-seg-opt.is-active {
    background: var(--accent-primary);
    color: var(--text-on-accent);
}

.sp-seg-opt.is-active:hover {
    color: var(--text-on-accent);
}

.sp-seg-opt i {
    font-size: 12px;
}

/* ── Expandable language row ───────────────────────────────────────────── */
.sp-row-stack {
    display: block;
    padding: 0;
}

.sp-row-toggle {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 12px 16px;
    background: none;
    border: none;
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: background var(--transition-fast);
}

.sp-row-toggle:hover {
    background: var(--bg-card-hover);
}

/* The label absorbs the free space so the current value + caret sit at the
   trailing edge. */
.sp-row-toggle .sp-row-label {
    flex: 1 1 auto;
}

.sp-row-value {
    flex: 0 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: var(--font-size-sm);
    color: var(--text-tertiary);
}

.sp-caret {
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-tertiary);
    transition: transform var(--transition-fast);
}

.sp-row-stack.is-open .sp-caret {
    transform: rotate(180deg);
}

/* max-height (rather than grid-template-rows interpolation) keeps the expand
   animation working on older Safari/Chrome. 4 rows x ~38px + inner padding
   fits comfortably inside 260px. */
.sp-sublist {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.22s ease;
}

.sp-row-stack.is-open .sp-sublist {
    max-height: 260px;
}

.sp-sublist-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 8px 8px;
}

/* ==========================================================================
   4. Mobile — panel spans the full width below the header
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Dropping the wrapper out of flow makes .site-header (position: sticky
       from Bootstrap's .sticky-top) the nearest positioned ancestor, so the
       panel can span the viewport instead of squeezing under the 36px gear.
       No ancestor between the two sets position or overflow, which is what
       would otherwise clip it. */
    .settings-popup-wrap {
        position: static;
    }

    .settings-popup {
        top: 100%;
        inset-inline: 0;
        width: auto;
        border-inline: none;
        border-radius: 0;
    }

    /* Full-width rows have room, so let the pill sit on the label's line. */
    .sp-seg {
        flex: 1 1 auto;
    }

    /* Meet the 44px touch-target guideline: the desktop 8px vertical padding
       yields only a 40px row, which is easy to miss with a thumb. */
    .lang-menu-item,
    .sp-lang-item {
        padding-block: 11px;
    }
}

/* ==========================================================================
   5. Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    .settings-popup,
    .lang-menu-list,
    .sp-sublist,
    .sp-caret,
    .lang-menu-caret,
    .lang-menu-btn,
    .sp-seg-opt,
    .lang-menu-item,
    .sp-lang-item {
        transition: none;
    }
}