/*
 * The language switcher.
 *
 * Direction 2 was drawn as a single-language site — the trilingual requirement
 * comes from the client's own sitemap — so this control has no approved design
 * to inherit. It is deliberately the quietest thing that can work: the nav's own
 * type and colours, a hairline between it and the CTA, no flags and no dropdown.
 * If Key wants it drawn differently, this file and agc_language_switcher() are
 * the only two places to change.
 *
 * Loaded only when more than one language exists.
 */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0 4px 0 0;
  padding: 0 14px 0 0;
  border-right: 1px solid var(--line-strong);
}
.lang-switch a {
  display: block;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink-faint);
  padding: 7px 7px;
  border-radius: var(--radius-sm);
  transition: color .2s var(--ease), background .2s var(--ease);
}
.lang-switch a:hover {
  color: var(--ink);
  background: color-mix(in oklch, var(--ink) 6%, transparent);
}
.lang-switch a.on {
  color: var(--red);
  font-weight: 700;
}

/* 1000px is where site.css hides .nav-links and shows the burger — the switcher
   goes with them, and reappears inside the menu panel. */
@media (max-width: 1000px) {
  .nav-inner > .lang-switch { display: none; }
}

.lang-switch-mobile {
  justify-content: center;
  gap: 6px;
  margin: 0 0 14px;
  padding: 14px 0 0;
  border-right: 0;
  border-top: 1px solid var(--line-strong);
}
.lang-switch-mobile a {
  font-size: 15px;
  padding: 10px 16px;
}

/*
 * 多語版嘅導覽：標籤唔准斷行。
 *
 * 頂欄係照繁中畫嘅 —— 六個三、四個字嘅標籤。英文完整頁名（Catering Insurance、
 * Elderly Home Insurance…）擺落去要 742px，但淨係得約 714px，於是每項斷開兩行，
 * 成條 nav 高低唔齊、底線走位。標籤本身已經縮短（見 content/chrome.json），呢條
 * 規則係第二道保險：寧願逼爆都唔好斷開一個詞組，因為斷行係靜靜地醜，溢出係即刻
 * 睇得出、修得返。
 *
 * 1000px 以下桌面版 nav 本來就收起變漢堡，所以呢條規則只影響有位嗰個範圍。
 */
.nav-links a { white-space: nowrap; }

/*
 * 品牌名唔准斷字，導覽間距收窄，英文版早啲轉漢堡。
 *
 * 頂欄係照繁中畫嘅：品牌兩行（中文一行、英文一行）、六個短標籤、切換器、按鈕。
 * 英文標籤長好多，flex 就去擠品牌嗰格，結果「信言保險代／理有限公司」喺半路斷開
 * 變三行 —— 公司名斷錯位比任何排版問題都失禮。
 *
 * 所以：
 *   1. 兩行品牌各自 nowrap —— 可以兩行，但唔可以一個名斷開兩截。
 *   2. 導覽間距由 30px 收到 20px，喺 1100px 啱啱夠位排一行。
 *   3. 1140px 以下，英文版直接轉漢堡選單。實測 1000–1100px 嗰段，英文無論點收都
 *      塞唔落（標籤 563 + 切換器 105 + 按鈕 124 + 品牌 169，連間距超過可用寬度），
 *      硬塞就一定有嘢被擠爛。轉漢堡係正常響應式做法，好過扮到落。繁中同简中標籤短，
 *      維持原本 1000px 斷點。
 */
.brand-zh,
.brand-en { white-space: nowrap; }
.nav-links { gap: 20px; }

@media (max-width: 1140px) {
  html[lang="en-US"] .nav-links,
  html[lang="en"] .nav-links { display: none; }
  html[lang="en-US"] .nav-toggle,
  html[lang="en"] .nav-toggle { display: inline-flex; }
}