/*
V7-HEADER
Title:    Buktika – Language Switcher Styles
File:     language-switcher.css
Path:     /assets/css/partials/language-switcher.css
Version:  v1.7.0
Issued:   2026-03-25
Author:   Buktika Webdesk (Binka)
Purpose:  Globe pill trigger + grouped language overlay.
          Trigger: globe SVG + language name + chevron. No flag in collapsed state.
          Overlay: position:fixed, positioned by JS positionOverlay() against
          #utility-panel getBoundingClientRect(). Grouped sections:
          Suggested / South Africa (flag once in header) / International / Klingon.
          Surface colours scoped to always-dark utility panel context.
          Theme-sensitive fallback tokens retained for any future non-panel usage.

ChangeLog:
  v1.7.0 (2026-03-25): POSITION FIX + EQUAL HEIGHT.
    FIXED    - .options-list: position:fixed → position:absolute.
               ROOT CAUSE: #utility-panel has transform:translateY() when open.
               CSS spec: transform on ancestor creates new containing block for
               position:fixed children. JS positionOverlay() was setting viewport
               coordinates that were wrong in this context — overlay appeared
               off-screen. position:absolute relative to .custom-select
               (position:relative) is correct. positionOverlay() no longer needed.
    FIXED    - .selected-option: padding:0.4375rem → height:2.75rem.
               Matches theme toggle (B.4.3: 2.75rem) and Sign In button height.
    ADDED    - .options-list: top:calc(100% + 0.375rem); left:0; min-width:16rem.
               Overlay drops naturally below pill — no JS positioning required.
  v1.6.0 (2026-03-25): GLOBE PILL TRIGGER + GROUPED OVERLAY REDESIGN.
    CHANGED  - .custom-select: removed min-width, background, border, box-shadow.
               Now a minimal transparent positioned container.
    CHANGED  - .selected-option: styled as the globe pill trigger.
               Flex row: globe SVG + lang-label + chevron SVG.
               Transparent background, solid border, full-strength text.
    REMOVED  - .custom-select::after chevron pseudo-element. Chevron now inline SVG in JS.
    CHANGED  - .options-list: position:fixed (positioned by JS). Grouped overlay.
               max-height increased. Padding adjusted for sections.
    ADDED    - .lang-section-head: amber uppercase section label.
    ADDED    - .lang-section-head--za: flex row with .section-flag + label.
    ADDED    - .lang-divider: thin separator between sections.
    ADDED    - .lang-divider--amber: slightly more visible amber divider above Klingon.
    ADDED    - .active-dot: amber dot on the active language option.
    ADDED    - .lang-indent: spacing placeholder for SA rows (no flag per row).
    ADDED    - .globe-icon: amber stroke, inherits from .selected-option color.
    ADDED    - .chevron-icon: muted, transitions on open.
    ADDED    - .flag-icon: 24x16 flag image style.
    ADDED    - .lang-name: option text style.
  v1.5.0: Dark mode surface fixes.
  v1.4.1: Path update.
  v1.4.0: Colour Map v2.7.0 compliance pass.
  v1.3.1: Compact pill style with flag and dropdown.
*/

/* ===== Base wrapper ================================================= */

.language-switcher {
  display: inline-flex;
  align-items: center;
}

/* ===== Globe pill trigger =========================================== */

.custom-select {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  transition: border-color 0.18s ease;
}

.custom-select:focus {
  outline: none;
}

/* The pill is the .selected-option element */
.selected-option {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 0.625rem;
  height: 2.75rem;              /* matches theme toggle and Sign In height */
  border-radius: 0.5rem;
  border: 1px solid rgba(240, 235, 227, 0.22);
  background: transparent;
  color: var(--sdx-color-livingtower-light-text, #f0ebe3);
  line-height: 1;
  white-space: nowrap;
  transition: border-color 0.18s ease, background 0.18s ease;
  user-select: none;
}

.custom-select:hover .selected-option,
.custom-select[aria-expanded="true"] .selected-option {
  border-color: rgba(245, 176, 20, 0.45);
  background: rgba(245, 176, 20, 0.06);
}

/* Globe icon — amber */
.selected-option .globe-icon {
  flex-shrink: 0;
  color: var(--sdx-color-mama-amber, #f5b014);
}

/* Language name */
.selected-option .lang-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sdx-color-livingtower-light-text, #f0ebe3);
}

/* Chevron — rotates on open */
.selected-option .chevron-icon {
  flex-shrink: 0;
  color: var(--sdx-color-livingtower-warm-sand, #c4b89a);
  transition: transform 0.2s ease;
}

.custom-select[aria-expanded="true"] .selected-option .chevron-icon {
  transform: rotate(180deg);
}

/* Focus ring on the trigger */
.custom-select:focus-visible .selected-option {
  outline: 2px solid rgba(47, 92, 104, 0.55);
  outline-offset: 2px;
}

/* ===== Grouped overlay ============================================== */

.options-list {
  position: absolute;           /* ROOT CAUSE FIX: position:fixed inside a transformed
                                   ancestor (#utility-panel has transform) makes fixed
                                   positioning relative to the panel, not the viewport.
                                   Absolute positioning relative to .custom-select
                                   (position:relative) is correct and simpler. */
  top: calc(100% + 0.375rem);  /* drops below the pill */
  left: 0;
  min-width: 16rem;             /* wide enough for all language names */
  z-index: 1100;

  background: var(--sdx-color-ui-popup-surface, #123543);
  border: 1px solid rgba(245, 176, 20, 0.22);
  border-radius: 0.75rem;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 4px 12px rgba(0, 0, 0, 0.35);

  list-style: none;
  margin: 0;
  padding: 0.375rem 0.375rem;
  max-height: 22rem;
  overflow-y: auto;
  overflow-x: hidden;

  display: none;
}

.custom-select[aria-expanded="true"] .options-list {
  display: block;
}

/* Scrollbar */
.options-list::-webkit-scrollbar       { width: 4px; }
.options-list::-webkit-scrollbar-track { background: transparent; }
.options-list::-webkit-scrollbar-thumb {
  background: rgba(196, 184, 154, 0.25);
  border-radius: 999px;
}

/* ===== Section headers ============================================== */

.lang-section-head {
  display: flex;
  align-items: center;
  gap: 0.4375rem;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--sdx-color-mama-amber, #f5b014);
  padding: 0.5rem 0.625rem 0.25rem;
  pointer-events: none;
  user-select: none;
}

.section-flag {
  width: 1.125rem;
  height: 0.75rem;
  object-fit: cover;
  border-radius: 0.1875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
}

/* ===== Section dividers ============================================= */

.lang-divider {
  height: 1px;
  background: rgba(196, 184, 154, 0.12);
  margin: 0.25rem 0.375rem;
  pointer-events: none;
}

.lang-divider--amber {
  background: rgba(245, 176, 20, 0.18);
  margin: 0.375rem 0.375rem;
}

/* ===== Option rows ================================================== */

.options-list li:not(.lang-section-head):not(.lang-divider) {
  display: flex;
  align-items: center;
  gap: 0.5625rem;
  padding: 0.5rem 0.625rem;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background 0.14s ease;
}

.options-list li:not(.lang-section-head):not(.lang-divider):hover {
  background: rgba(245, 176, 20, 0.08);
}

.options-list li.active {
  background: rgba(245, 176, 20, 0.12);
}

/* Flag in option rows */
.flag-icon {
  width: 1.5rem;
  height: 1rem;
  object-fit: cover;
  border-radius: 0.1875rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  flex-shrink: 0;
  display: inline-block;
}

/* SA section indent — no flag per row */
.lang-indent {
  display: inline-block;
  width: 0.75rem;
  flex-shrink: 0;
}

/* Language name in option */
.lang-name {
  flex: 1;
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--sdx-color-livingtower-light-text, #f0ebe3);
  line-height: 1.3;
}

/* Active dot */
.active-dot {
  width: 0.375rem;
  height: 0.375rem;
  border-radius: 50%;
  background: var(--sdx-color-mama-amber, #f5b014);
  flex-shrink: 0;
}

/* Focus-visible on option rows */
.options-list li:not(.lang-section-head):not(.lang-divider):focus-visible {
  outline: 2px solid rgba(47, 92, 104, 0.55);
  outline-offset: -2px;
}

/* ===== RTL support ================================================== */

body[dir="rtl"] .language-switcher {
  flex-direction: row-reverse;
}

/* ===== Small screens =============================================== */

@media (max-width: 640px) {
  .language-switcher {
    margin: 0.625rem auto 0;
    justify-content: center;
  }
}