/* A real dropdown, not a native <select>: the trigger shows a short badge while
   the menu shows full names, which one <select> cannot do (its button always
   mirrors the chosen option). Styled to match the nav's own mega menu. */
.hc-lang{position:relative;display:inline-flex;flex:0 0 auto}
/* HOVER BRIDGE across the 8px gap between trigger and menu — that gap belongs to
   neither, so crossing it left the wrapper and closed the menu mid-journey.
   It must live on the WRAPPER, not the menu: the menu has overflow-y:auto for long
   language lists, which CLIPS any pseudo-element positioned outside its box.
   It spans the MENU's width, not the trigger's: the menu is ~190px and hangs to the
   left of a ~49px trigger, so a bridge sized to the trigger left the whole
   down-and-left diagonal unprotected. Gated on is-open so it never sits invisibly
   over the page swallowing clicks. The JS grace period is the real safety net —
   this only stops the flicker on the direct path. */
.hc-lang.is-open::after{content:'';position:absolute;top:100%;right:0;
  width:max(100%,200px);max-width:70vw;height:12px}
[dir="rtl"] .hc-lang.is-open::after{right:auto;left:0}
/* NO PILL: flag + code + caret, nothing behind them. The padded, rounded, hover-filled
   box read as a button sitting among plain nav links. Hover recolours instead. */
.hc-lang-btn{display:inline-flex;align-items:center;gap:7px;cursor:pointer;
  padding:0;border-radius:0;background:none;border:0;
  color:var(--text-secondary,#475569);font:700 12.5px/1 var(--font);
  -webkit-appearance:none;appearance:none;
  transition:color .18s var(--ease)}
.hc-lang-btn:hover{background:none;color:var(--brand)}
.hc-lang-btn:focus{outline:none}
.hc-lang-btn:focus-visible{outline:2px solid rgba(var(--br),.55);outline-offset:2px}
/* Real SVG files now, so there is no emoji font to fail and nothing to detect. */
.hc-lang-flag{flex:0 0 auto;display:block;width:18px;height:14px;object-fit:cover;
  border-radius:2.5px;box-shadow:0 0 0 1px rgba(15,23,42,.10)}
.hc-lang-code{letter-spacing:.04em}
.hc-lang-caret{opacity:.6;transition:transform .18s var(--ease)}
.hc-lang-btn[aria-expanded="true"] .hc-lang-caret{transform:rotate(180deg)}

.hc-lang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:60;
  min-width:190px;max-height:min(60vh,420px);overflow-y:auto;padding:6px;
  border-radius:14px;background:var(--card-bg,#fff);
  border:1px solid var(--card-border,#e6e9f0);
  box-shadow:0 22px 60px rgba(15,23,42,.18);
  scrollbar-width:thin;scrollbar-color:rgba(var(--br),.34) transparent}
.hc-lang-menu[hidden]{display:none}
/* Opens toward the middle of the page, so it never runs off the edge. */
[dir="rtl"] .hc-lang-menu{right:auto;left:0}
.hc-lang-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-lang-tick{flex:none;margin-left:auto}
.hc-lang-item{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;
  text-decoration:none;color:var(--text-primary,#0f172a);font:600 13.5px/1.25 var(--font);
  transition:background .14s var(--ease)}
.hc-lang-item:hover{background:rgba(var(--br),.09)}
/* The active row is marked by the tick and the brand colour — a filled pill on top of
   both is one signal too many. */
.hc-lang-item.is-active{background:none;color:var(--brand);font-weight:800}
.hc-lang-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hc-lang-tick{flex:0 0 auto;color:var(--brand)}
/* Each name is written in its own script, so it must render in its own direction —
   Arabic in an LTR nav still has to read right-to-left. */
.hc-lang-item[dir="rtl"] .hc-lang-name{text-align:right}

html[data-theme="dark"] .hc-lang-btn{color:var(--hc-d-ink-2,#a9b4c4)}
html[data-theme="dark"] .hc-lang-btn:hover{background:rgba(var(--br),.18);color:#fff}
html[data-theme="dark"] .hc-lang-menu{
  background:var(--hc-d-card,#151b25);border-color:var(--hc-d-line,#2b3646);
  box-shadow:0 24px 60px rgba(0,0,0,.55)}
html[data-theme="dark"] .hc-lang-item{color:var(--hc-d-ink,#e8edf5)}
html[data-theme="dark"] .hc-lang-item:hover{background:var(--hc-d-hover,#243040)}

/* In the burger menu it is a full-width row and the list opens inline, because a
   floating popup inside a scrolling drawer gets clipped. */
@media(max-width:920px){
  .hc-hdr.hc-nav-open .hc-lang{width:100%}
  .hc-hdr.hc-nav-open .hc-lang-btn{width:100%;justify-content:flex-start;padding:13px 12px;font-size:14px}
  .hc-hdr.hc-nav-open .hc-lang-menu{position:static;width:100%;box-shadow:none;margin-top:4px;max-height:240px}
}