/* ============================================================
   Language switcher — Option A (developer-premium dark).
   Shared by index.php, about.php, overview.php: navbar (desktop +
   mobile) and footer, all three pages — one canonical implementation
   instead of three hand-copied ones. Also loaded by the client portal
   (client/includes/header.php) for the sidebar-bottom instance — see
   the ".sidebar-lang" block near the end of this file.

   Guardrail: the actual language switch is <a href="?lang=xx"> (a plain
   link, read server-side) and open/close is driven by onclick handlers
   that toggle .open by element id, plus an outside-click handler that
   depends on the literal class .lang-dropdown (e.target.closest(
   '.lang-dropdown') / querySelectorAll('.lang-dropdown')) in every
   page's own <script>. None of that JS/PHP changed — only the CSS below
   and the inner markup of the button/rows (SVG chevron+check replacing
   Font Awesome) changed. The wrapper keeps class="lang-dropdown", the
   trigger keeps class="lang-dropdown-btn", the panel keeps class=
   "lang-dropdown-menu", and the open state is still the .open class.
   ============================================================ */

.lang-dropdown { position: relative; margin-left: 15px; }
/* width:fit-content is load-bearing, not cosmetic. .lang-dropdown is a block
   <div>, so in the footer column it stretched the full ~300px width while the
   button inside is only ~60px. The menu is positioned right:0 against that
   wrapper, so it anchored to the COLUMN edge instead of the button — pushing it
   far to the right in LTR. It looked correct in RTL only by coincidence: there
   the button sits flush against the wrapper's right edge anyway. Shrinking the
   wrapper to its content makes right:0 mean "the button" in both directions. */
.footer-brand .lang-dropdown { margin-left: 0; margin-top: 15px; width: fit-content; }

/* In the footer the trigger sits at the column's INLINE-START, so the menu has
   to open toward the content (start-anchored), not right:0 as elsewhere — with
   the wrapper now hugging the button, right:0 threw the 168px menu off the left
   edge of the page. RTL is deliberately handled in rtl.css (:132-135), whose
   [dir="rtl"] selectors out-specify these, so the RTL footer keeps right:0. */
.footer-brand .lang-dropdown-menu { right: auto; left: 0; transform-origin: top left; }
.footer-brand .lang-dropdown--up .lang-dropdown-menu { transform-origin: bottom left; }

.lang-dropdown-btn {
    display: flex; align-items: center; gap: 7px;
    padding: 7px 12px;
    border-radius: 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px; font-weight: 500; letter-spacing: .02em;
    color: #e6e8ee;
    background: rgba(255,255,255,.02);
    border: 1px solid rgba(255,255,255,.09);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}
.lang-dropdown-btn:hover { border-color: rgba(255,255,255,.2); background: rgba(255,255,255,.04); }
.lang-dropdown-btn .lang-flag { font-size: 14px; line-height: 1; }
.lang-dropdown-btn .lang-code { line-height: 1; }
.lang-chevron { color: #5a5f6e; transition: transform .22s cubic-bezier(.22,1,.36,1); flex-shrink: 0; }
.lang-dropdown.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown-menu {
    position: absolute; top: calc(100% + 8px); right: 0;
    min-width: 168px;
    background: #0e1016;
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 12px;
    box-shadow: 0 20px 50px -12px rgba(0,0,0,.7);
    padding: 6px;
    opacity: 0; visibility: hidden;
    transform: translateY(-6px) scale(.98);
    transform-origin: top right;
    transition: opacity .22s cubic-bezier(.22,1,.36,1), transform .22s cubic-bezier(.22,1,.36,1), visibility .22s;
    z-index: 1000;
}
.lang-dropdown.open .lang-dropdown-menu {
    opacity: 1; visibility: visible;
    transform: translateY(0) scale(1);
}
.lang-dropdown-menu a {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    text-decoration: none;
    font-family: 'Inter Tight', sans-serif;
    font-size: 13px; font-weight: 500;
    color: #8b90a0;
    transition: background .18s ease, color .18s ease;
}
.lang-dropdown-menu a .lang-flag { font-size: 15px; line-height: 1; }
.lang-dropdown-menu a .lang-name { flex: 1; }
.lang-dropdown-menu a:hover { background: rgba(255,255,255,.04); color: #e6e8ee; }
.lang-dropdown-menu a.active { color: #e6e8ee; }
.lang-check { flex-shrink: 0; }

/* Footer variant — opens upward (page-bottom placement, so the panel
   doesn't get cut off by the viewport edge). Added via a modifier class
   on the same wrapper, not a new selector for the JS to know about. */
.lang-dropdown.lang-dropdown--up .lang-dropdown-menu {
    top: auto; bottom: calc(100% + 8px);
    transform: translateY(6px) scale(.98);
    transform-origin: bottom right;
}
.lang-dropdown.lang-dropdown--up.open .lang-dropdown-menu {
    transform: translateY(0) scale(1);
}

/* Mobile nav: full-width trigger. The mobile panel itself is already a
   dark gradient (unrelated to this round), so Option A's dark tokens
   read fine there as-is — no color adaptation needed, only layout. */
.mobile-nav .lang-dropdown { margin: 15px 0 0; }
.mobile-nav .lang-dropdown-btn { width: 100%; justify-content: center; }
.mobile-nav .lang-dropdown-menu { position: relative; top: 8px; bottom: auto; width: 100%; transform-origin: top center; }

/* Scrolled desktop navbar — the navbar itself is still deferred
   (unscrolled: transparent, over the dark hero; scrolled: goes white,
   pre-existing behavior via .navbar.scrolled, untouched here). Same
   adaptive pattern the old design already had: keep Option A's pill
   shape/spacing/chevron, just swap to light-legible colors so the
   trigger doesn't wash out against the white scrolled bar. */
.navbar.scrolled .lang-dropdown-btn {
    color: #1e293b;
    background: #f8fafc;
    border-color: #e2e8f0;
}
.navbar.scrolled .lang-dropdown-btn:hover { background: #eef2f7; border-color: #cbd5e1; }
.navbar.scrolled .lang-chevron { color: #64748b; }

/* Client portal sidebar (client/includes/header.php): full-width trigger,
   last block in the sidebar column, same "opens upward" treatment as the
   footer variant since there's nothing below it to open into. The portal
   loads 'Inter' (not 'Inter Tight'), so re-pin the menu-row font to match
   the rest of the sidebar instead of falling back to a generic sans-serif.
   flex-shrink:0 keeps it (and .sidebar-header/.sidebar-footer) pinned and
   always visible — only .sidebar-nav scrolls internally when the nav list
   is taller than the viewport (see .sidebar-nav in portal.css), so the
   language selector is never scrolled out of view on mobile. */
.sidebar-lang {
    padding: 14px 20px 20px;
    border-top: 1px solid var(--sidebar-border);
    flex-shrink: 0;
}
.sidebar-lang .lang-dropdown { margin: 0; }
.sidebar-lang .lang-dropdown-btn { width: 100%; justify-content: center; }
.sidebar-lang .lang-dropdown-menu { width: 100%; }
.sidebar-lang .lang-dropdown-menu a { font-family: 'Inter', sans-serif; }