/* IVFConversion i18n styles
 * Owns: language switcher (nav-integrated + floating fallback),
 * RTL adjustments, non-Latin font fallbacks per <html lang>.
 *
 * 2026-05-08 redesign: switcher moved from a fixed-position pill at top-right
 * (which overlapped the existing primary-nav) to an inline nav-link inside
 * the existing nav. Inherits .nav-link typography. Floating fallback only
 * shows on pages without a primary-nav, positioned bottom-right so it never
 * collides with any header.
 *
 * Loaded globally from index.html. No imports of brand colour tokens for
 * the floating fallback so it renders correctly even before tokens.css loads.
 */

/* ─────────────────── Nav-integrated switcher ───────────────────
 * Sits inside <nav class="primary-nav"> as a peer of other .nav-link items.
 * Inherits color, text-transform, letter-spacing from the existing .nav-link
 * rule in main.css. We only override what's needed: align icon + code,
 * remove default <button> chrome.
 */

.lang-switcher-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  /* .nav-link supplies color (var(--color-ink-soft)), text-transform: uppercase,
     letter-spacing: .08em — we inherit those via the className "nav-link". */
}

.lang-switcher-nav:focus-visible {
  outline: 2px solid var(--color-primary, #1d9e75);
  outline-offset: 3px;
}

.lang-switcher-nav .lang-switcher-globe {
  flex: 0 0 14px;
  /* SVG uses currentColor — picks up the .nav-link colour automatically. */
  opacity: 0.85;
}

.lang-switcher-nav:hover .lang-switcher-globe { opacity: 1; }

.lang-switcher-nav > .lang-switcher-code {
  /* Locale code on the button itself, e.g. "EN" / "ES" / "AR". The
     uppercase + tracking comes from the inherited .nav-link rule. */
  font-size: inherit;
}

/* ─────────────────── Floating fallback ───────────────────
 * Only shows when no .primary-nav exists in the DOM. Positioned bottom-right
 * (out of every header's way), low-emphasis, easy to access on long pages.
 */

.lang-switcher-floating {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 9998;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  background: rgba(13, 35, 64, 0.92);
  color: #ffffff;
  border: 0;
  border-radius: 999px;
  font: 600 11px/1.2 "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.18);
  transition: background 120ms ease, transform 120ms ease;
}

.lang-switcher-floating:hover { background: #0d2340; transform: translateY(-1px); }
.lang-switcher-floating:focus-visible {
  outline: 2px solid #1d9e75;
  outline-offset: 2px;
}

[dir="rtl"] .lang-switcher-floating {
  right: auto;
  left: 16px;
}

/* ─────────────────── Dropdown menu ───────────────────
 * Position is set inline via JS (positionMenu) anchored to the switcher
 * button's getBoundingClientRect — appears just below the nav switcher,
 * right-aligned. RTL flips to left-aligned. The CSS below only handles
 * appearance.
 */

#lang-switcher-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  padding: 6px 0;
  background: #ffffff;
  border: 1px solid #ddd9d1;
  border-radius: 8px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.14);
  font: 14px/1.4 "Segoe UI", system-ui, sans-serif;
  color: #0d2340;
  letter-spacing: normal;
  text-transform: none;
}

#lang-switcher-menu button {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 9px 14px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-align: start;
  letter-spacing: normal;
  text-transform: none;
}

#lang-switcher-menu button:hover { background: #f2f0eb; }
#lang-switcher-menu button[data-active="true"] { font-weight: 700; }
#lang-switcher-menu button[data-active="true"] .lang-switcher-code { color: #1d9e75; }

#lang-switcher-menu .lang-switcher-code {
  flex: 0 0 44px;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: #7a8796;
  text-transform: uppercase;
}
#lang-switcher-menu .lang-switcher-native { flex: 1 1 auto; }

/* ─────────────────── Non-Latin font fallbacks ───────────────────
 * Use OS-native fonts only (no CDN dependency, per brand rule). The Latin
 * default is Segoe UI; below that we list per-script fallbacks the OS will
 * pick from when a glyph is needed.
 */

html[lang="ja"] body,
html[lang="ja"] input,
html[lang="ja"] button,
html[lang="ja"] textarea,
html[lang="ja"] select {
  font-family: "Segoe UI", "Yu Gothic UI", "Yu Gothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Meiryo", "MS Gothic", system-ui, sans-serif;
}

html[lang="zh-CN"] body,
html[lang="zh-CN"] input,
html[lang="zh-CN"] button,
html[lang="zh-CN"] textarea,
html[lang="zh-CN"] select {
  font-family: "Segoe UI", "Microsoft YaHei", "PingFang SC", "Source Han Sans CN", "SimHei", system-ui, sans-serif;
}

html[lang="ar"] body,
html[lang="ar"] input,
html[lang="ar"] button,
html[lang="ar"] textarea,
html[lang="ar"] select {
  font-family: "Segoe UI", "Tahoma", "Geeza Pro", "Arial", system-ui, sans-serif;
}

/* ─────────────────── RTL baseline overrides ─────────────────── */

html[dir="rtl"] body { text-align: right; }

html[dir="rtl"] .container,
html[dir="rtl"] .page,
html[dir="rtl"] .section,
html[dir="rtl"] .hero,
html[dir="rtl"] main { text-align: start; }

html[dir="rtl"] ul,
html[dir="rtl"] ol { padding-right: 1.5em; padding-left: 0; }

html[dir="rtl"] .arrow-right,
html[dir="rtl"] .chevron-right,
html[dir="rtl"] [data-arrow="next"] { transform: scaleX(-1); }

/* ─────────────────── Brand identity protection ───────────────────
 * Hard guarantee: the IVFConversion wordmark and the brand-mark logo never
 * inherit any locale-specific font, transform, or letter-spacing change.
 * They render in the brand's intended typography in every language.
 */

.brand-name,
.brand-name *,
.brand-mark,
.brand-mark *,
.brand-lockup,
.trace-mark {
  font-family: "Segoe UI", system-ui, sans-serif !important;
  letter-spacing: normal;
  text-transform: none;
  unicode-bidi: isolate;
  direction: ltr;
}

/* ════════════════════════════════════════════════════════════════════════
 * PR-B audit — per-language defensive rules
 * ════════════════════════════════════════════════════════════════════════
 *
 * These layer on top of the base CSS via the cascade. The base CSS was
 * authored for English; the rules below adapt it to each non-English
 * locale's typographic and layout needs without modifying the base.
 *
 * Source CSS files (main.css, master-brand.css, etc.) are minified
 * single-line — surgical per-selector edits there are too brittle. The
 * defensive approach below is broader but reversible: removing this
 * file restores the English-only behaviour.
 */

/* ── Long-text languages (Spanish / French / Portuguese) ───────────────
 * These typically run 25–30 % longer than the equivalent English. The base
 * CSS's tight button paddings and nav letter-spacing produce overflow.
 * Below: allow buttons and chips to wrap onto two lines instead of
 * overflowing, and trim letter-spacing in nav so 5–6 nav items still fit.
 */

html[lang="es"] button,
html[lang="es"] .button,
html[lang="es"] .btn,
html[lang="es"] .pill,
html[lang="es"] .chip,
html[lang="fr"] button,
html[lang="fr"] .button,
html[lang="fr"] .btn,
html[lang="fr"] .pill,
html[lang="fr"] .chip,
html[lang="pt"] button,
html[lang="pt"] .button,
html[lang="pt"] .btn,
html[lang="pt"] .pill,
html[lang="pt"] .chip {
  white-space: normal;
  line-height: 1.25;
  word-break: normal;
  overflow-wrap: anywhere;
}

html[lang="es"] .nav-link,
html[lang="es"] .primary-nav a,
html[lang="fr"] .nav-link,
html[lang="fr"] .primary-nav a,
html[lang="pt"] .nav-link,
html[lang="pt"] .primary-nav a {
  letter-spacing: 0.04em;
}

/* Eyebrow / kicker text (often UPPERCASE with wide letter-spacing) tends
 * to overflow most aggressively in long-text languages. Tame it. */
html[lang="es"] .eyebrow,
html[lang="es"] .kicker,
html[lang="fr"] .eyebrow,
html[lang="fr"] .kicker,
html[lang="pt"] .eyebrow,
html[lang="pt"] .kicker {
  letter-spacing: 0.05em;
  word-spacing: 0;
}

/* ── CJK (Japanese / Simplified Chinese) ─────────────────────────────────
 * CJK typography breaks several Western conventions:
 *   1. UPPERCASE + letter-spacing produces wide gaps between every
 *      character (because every CJK glyph becomes its own "letter") —
 *      makes nav and eyebrow text look spaced-out and broken.
 *   2. word-break: break-all (default browser behaviour) is wrong for
 *      readability; keep-all is preferred, with fallback for runs of
 *      Latin glyphs (brand names, codes).
 *   3. Default line-height of 1.4–1.5 is too tight for CJK.
 */

html[lang="ja"] .nav-link,
html[lang="ja"] .primary-nav a,
html[lang="ja"] .eyebrow,
html[lang="ja"] .kicker,
html[lang="ja"] .brand-name,
html[lang="zh-CN"] .nav-link,
html[lang="zh-CN"] .primary-nav a,
html[lang="zh-CN"] .eyebrow,
html[lang="zh-CN"] .kicker,
html[lang="zh-CN"] .brand-name {
  text-transform: none;
  letter-spacing: 0;
}

html[lang="ja"] body,
html[lang="ja"] p,
html[lang="ja"] li,
html[lang="zh-CN"] body,
html[lang="zh-CN"] p,
html[lang="zh-CN"] li {
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* CJK headings need slightly tighter tracking than body but still need
 * the "no letter-spacing" rule. */
html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="zh-CN"] h1,
html[lang="zh-CN"] h2,
html[lang="zh-CN"] h3 {
  letter-spacing: 0;
  line-height: 1.4;
}

/* ── Arabic — comprehensive RTL beyond the baseline ──────────────────────
 * Baseline (above) handled `body { text-align: right }` and list padding.
 * Below extends to flex containers, tables, form labels, and the dashboard
 * sidebar.
 */

html[dir="rtl"] {
  /* Logical-property fallback for older spec compliance */
  direction: rtl;
}

/* Flex containers that line up nav / actions / brand are typically
 * row-based — they should reverse their visual order in RTL. */
html[dir="rtl"] .header-inner,
html[dir="rtl"] .primary-nav,
html[dir="rtl"] .actions,
html[dir="rtl"] .toolbar,
html[dir="rtl"] [class*="row-actions"] {
  flex-direction: row-reverse;
}

/* Arabic specifically benefits from extra leading. */
html[lang="ar"] body,
html[lang="ar"] p,
html[lang="ar"] li,
html[lang="ar"] input,
html[lang="ar"] textarea,
html[lang="ar"] button {
  line-height: 1.7;
}

/* Drop letter-spacing in nav for Arabic (uppercase letter-spacing is
 * meaningless for Arabic script). */
html[dir="rtl"] .nav-link,
html[dir="rtl"] .primary-nav a,
html[dir="rtl"] .eyebrow,
html[dir="rtl"] .kicker {
  letter-spacing: 0;
  text-transform: none;
}

/* Arabic numerals stay LTR even inside RTL prose — important for the
 * recoverable-revenue figures in the dashboard. The bdi pseudo-handling
 * via `unicode-bidi: isolate` keeps mixed-direction strings sensible. */
html[lang="ar"] .number,
html[lang="ar"] .currency,
html[lang="ar"] .figure,
html[lang="ar"] [class*="metric"] {
  unicode-bidi: isolate;
  direction: ltr;
  display: inline-block;
}

/* Form labels that are above their inputs need start-anchored alignment;
 * the base CSS uses text-align: left which is wrong in RTL. */
html[dir="rtl"] label,
html[dir="rtl"] .form-label,
html[dir="rtl"] .field-label {
  text-align: start;
}

/* Tables — base CSS likely uses text-align: left on th/td. */
html[dir="rtl"] th,
html[dir="rtl"] td {
  text-align: start;
}

/* Inputs with leading icons (search box, etc.) need the icon to flip
 * sides via flex direction or padding swap. We can't surgically rewrite
 * the project's input layouts, but we can swap input padding so the
 * placeholder doesn't run under whatever icon is on the right. */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="password"],
html[dir="rtl"] input[type="search"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea {
  text-align: start;
}

/* ── Universal protection: Latin-script tokens stay LTR-styled ──────────
 * Brand names and force codes (TRACE, ACT, BRAINS, OE, FR, PS, CE, etc.)
 * should keep their original Latin appearance even when surrounded by
 * RTL or CJK text. This rule helps when those tokens are wrapped in a
 * span or used as a code element.
 */

html[dir="rtl"] code,
html[dir="rtl"] kbd,
html[dir="rtl"] [class*="brand-mark"],
html[dir="rtl"] [class*="trace-mark"],
html[lang="ja"] code,
html[lang="ja"] kbd,
html[lang="zh-CN"] code,
html[lang="zh-CN"] kbd {
  unicode-bidi: isolate;
  direction: ltr;
  font-family: "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal;
}
