/* Language switcher (LIVEOP.Website, not part of the prototype): the flags, the header dropdown,
   the footer line and the mobile-menu row (LanguageSwitcher.astro, Flag.astro). Uses the prototype's
   tokens only; font sizes are role tokens (rem), or em where a size tracks the surrounding text. */

/* ---------- flag ---------- */
.lo-flag{position:relative;display:inline-block;flex-shrink:0;width:1.375em;height:.9375em;border-radius:3px;overflow:hidden;vertical-align:-.125em}
.lo-flag svg{display:block;width:100%;height:100%}
/* Hairline edge so white stripes stay visible on a white menu */
.lo-flag::after{content:"";position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px rgba(127,127,127,.32)}
/* Arabic: a neutral glyph instead of a flag. font-size .75em, so the box is the flag box / .75 */
.lo-flag--glyph{display:inline-grid;place-items:center;width:1.8333em;height:1.25em;background:rgba(127,127,127,.22);font-family:"Geeza Pro","Noto Sans Arabic",system-ui,sans-serif;font-size:.75em;font-weight:600;line-height:1}

/* ---------- header: compact dropdown ---------- */
.lo-lang{position:relative;display:flex;align-items:center}
.lo-lang__toggle{list-style:none;gap:7px;padding-inline:12px;user-select:none}
.lo-lang__toggle::-webkit-details-marker{display:none}
.lo-lang__toggle::marker{content:""}
.lo-lang__code{font-size:var(--fs-meta);letter-spacing:.04em}
.lo-lang__chevron{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;opacity:.6;transition:transform var(--dur-state)}
.lo-lang__details[open] > .lo-lang__toggle{opacity:1;background:rgba(127,127,127,.10)}
.lo-lang__details[open] .lo-lang__chevron{transform:rotate(180deg)}
.lo-lang__menu{
  position:absolute;top:calc(100% + 14px);inset-inline-end:0;z-index:2;min-width:210px;padding:8px;display:grid;gap:2px;
  border-radius:var(--r-lg);background:rgba(255,255,255,.9);backdrop-filter:blur(24px) saturate(1.5);-webkit-backdrop-filter:blur(24px) saturate(1.5);
  border:1px solid var(--hairline);box-shadow:0 30px 60px -20px rgba(0,0,0,.35);color:var(--fg);
  animation:lo-lang-in .2s var(--ease)
}
.lo-lang__item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:var(--r-md);font-size:var(--fs-small);font-weight:500;transition:background var(--dur-state)}
a.lo-lang__item:hover,a.lo-lang__item:focus-visible{background:var(--accent-soft)}
.lo-lang__item[aria-current]{color:var(--fg-muted)}
.lo-lang__item[aria-current]::after{content:"";margin-inline-start:auto;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@keyframes lo-lang-in{from{opacity:0;transform:translateY(-4px)}}
@media (prefers-reduced-motion:reduce){.lo-lang__menu{animation:none}.lo-lang__chevron{transition:none}}
/* The bar has no room to spare below 1240px (the links run close to the actions): flag only, then not
   in the bar at all. Between 1081 and 1149px the footer carries it; at 1080px and below the mobile
   menu does. */
@media (max-width:1239px){.lo-lang__code,.lo-lang__chevron{display:none}.lo-lang__toggle{padding-inline:10px}}
@media (max-width:1149px){.lo-nav__actions .lo-lang{display:none}}

/* ---------- footer: one line of flags and names ----------
   Direct children only: a descendant selector would also match the flag's own span. */
.lo-lang-list > a,.lo-lang-list > span{display:inline-flex;align-items:center;gap:8px}
.lo-lang-list > [aria-current]{color:#fff}

/* ---------- mobile menu: a row of pills ---------- */
.lo-mobile__lang{display:flex;flex-wrap:wrap;gap:8px;padding:20px 8px 4px}
.lo-mobile .lo-mobile__lang > a,.lo-mobile__lang > span{display:inline-flex;align-items:center;gap:8px;padding:10px 14px;border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);font-size:var(--fs-small);font-weight:500;color:#c3cad4}
.lo-mobile__lang > [aria-current]{background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.32);color:#fff}