/**
 * lang/lang.css
 * ─────────────────────────────────────────────────────────────────────────────
 * Wattsonic i18n — Apple-Style Region Selector + CJK Typography
 *
 * Design: dark panel · three-column text list · bold region + inline languages
 * Active language: platinum/white, distinct from muted inactive text
 * No cards, no dividers, no color — pure typographic hierarchy
 *
 * CJK Typography (zh/ja/ko): Apple design language
 *   Primary: PingFang SC (Apple devices, iOS/macOS)
 *   Fallback: Hiragino Sans GB (older macOS), Noto Sans SC (cross-platform)
 *   Windows: Microsoft YaHei UI
 * ─────────────────────────────────────────────────────────────────────────────
 */

/* ─── Noto Sans SC — cross-platform CJK fallback (weights: 300 400 500 700) ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');

/* ─── Design tokens ─────────────────────────────────────────────────────────── */
:root {
  /* Panel */
  --lang-panel-bg:       #17191d;
  --lang-panel-top:      clamp(58px, 7vw, 78px);
  --lang-panel-line:     rgba(255, 255, 255, 0.08);
  --lang-panel-divider:  rgba(255, 255, 255, 0.06);
  --lang-panel-sheen:    rgba(203, 162, 88, 0.16);

  /* Text — on dark panel */
  --lang-region:         rgba(255, 255, 255, 0.92);   /* bold region name */
  --lang-inactive:       rgba(255, 255, 255, 0.44);   /* unselected language */
  --lang-active:         rgba(255, 255, 255, 0.95);   /* selected language — bright */
  --lang-hover-row:      rgba(255, 255, 255, 0.035);  /* row hover tint */
  --lang-active-border:  rgba(202, 138, 4, 0.42);
  --lang-active-bg:      rgba(202, 138, 4, 0.12);

  /* Easing */
  --lang-ease:           cubic-bezier(0.22, 0.72, 0.14, 1);
}

/* ─────────────────────────────────────────────────────────────────────────────
   TRIGGER BUTTON
   ─────────────────────────────────────────────────────────────────────────── */

.lang-switch {
  position: relative;
}

.lang-trigger {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px 6px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px;
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  backdrop-filter: blur(12px) saturate(160%);
  -webkit-backdrop-filter: blur(12px) saturate(160%);
  color: rgba(255, 255, 255, 0.9);
  font-size: 0.72rem;
  font-weight: 580;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  white-space: nowrap;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.22);
  transition:
    border-color 200ms ease,
    background   200ms ease,
    transform    180ms ease,
    box-shadow   200ms ease,
    color        200ms ease;
}

.lang-trigger:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.22),
    0 8px 22px rgba(0, 0, 0, 0.28);
}

.lang-trigger svg {
  width: 13px;
  height: 13px;
  stroke: currentColor;
  stroke-width: 1.65;
  fill: none;
  flex: 0 0 auto;
  opacity: 0.75;
}

/* Subpage theme-light: dark lang-trigger by default */
.subpage.theme-light .lang-trigger {
  color: #101828;
  border-color: rgba(16, 24, 40, 0.13);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(248, 250, 255, 0.68) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* hero-dark override: revert lang-trigger to white style */
.subpage.hero-dark .site-header:not(.is-scrolled) .lang-trigger {
  color: rgba(255, 255, 255, 0.9);
  border-color: rgba(255, 255, 255, 0.2);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.13) 0%,
    rgba(255, 255, 255, 0.04) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    0 4px 16px rgba(0, 0, 0, 0.22);
}

/* Scrolled header: frosted light pill */
.site-header.is-scrolled .lang-trigger {
  color: #101828;
  border-color: rgba(16, 24, 40, 0.13);
  background: linear-gradient(
    145deg,
    rgba(255, 255, 255, 0.88) 0%,
    rgba(248, 250, 255, 0.68) 100%
  );
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 4px 12px rgba(0, 0, 0, 0.08);
}

/* Caret */
.lang-caret {
  transition: transform 220ms var(--lang-ease);
}

.lang-switch.is-open .lang-caret {
  transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────────────────────
   DESKTOP PANEL
   ─────────────────────────────────────────────────────────────────────────── */

.lang-panel {
  position: fixed;
  inset-inline: 0;
  top: var(--lang-panel-top);
  z-index: 155;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% -12%, var(--lang-panel-sheen), transparent 32%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(255, 255, 255, 0) 100%),
    var(--lang-panel-bg);
  border-top: 1px solid var(--lang-panel-line);
  border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  box-shadow:
    0 32px 64px rgba(0, 0, 0, 0.55),
    0 8px 24px rgba(0, 0, 0, 0.35);
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition:
    opacity  260ms ease,
    transform 260ms var(--lang-ease);
}

.lang-switch.is-open .lang-panel {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─── Panel inner ───────────────────────────────────────────────────────────── */

.lang-panel-inner {
  width: min(1120px, calc(100% - 72px));
  margin: 0 auto;
  padding: 34px 0 42px;
}

.lang-panel-inner h3 {
  margin: 0 0 26px;
  font-size: clamp(0.74rem, 0.84vw, 0.82rem);
  font-weight: 620;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.34);
}

/* ─────────────────────────────────────────────────────────────────────────────
   THREE-COLUMN REGION LIST
   ─────────────────────────────────────────────────────────────────────────── */

.lang-region-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0 56px;
}

.lang-region-col {
  display: flex;
  flex-direction: column;
}

/* ─── Single region row ─────────────────────────────────────────────────────── */

.lang-region-row {
  display: grid;
  grid-template-columns: minmax(132px, 156px) minmax(0, 1fr);
  align-items: start;
  gap: 12px;
  padding: 10px 0 11px;
  border-bottom: 1px solid var(--lang-panel-divider);
  transition: background 160ms ease, border-color 160ms ease;
  cursor: default;
}

.lang-region-row:hover {
  background: var(--lang-hover-row);
  border-color: rgba(255, 255, 255, 0.1);
}

/* Region name — bold, white */
.lang-region-name {
  padding-top: 1px;
  font-size: 0.9rem;
  font-weight: 610;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--lang-region);
}

.lang-region-langs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  min-width: 0;
}

/* ─── Language option buttons ───────────────────────────────────────────────── */

.lang-option {
  appearance: none;
  -webkit-appearance: none;
  border: none;
  background: none;
  position: relative;
  padding: 2px 0;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 430;
  letter-spacing: 0.005em;
  line-height: 1.35;
  color: var(--lang-inactive);
  cursor: pointer;
  white-space: nowrap;
  transition: color 150ms ease, opacity 150ms ease;
}

.lang-option:hover {
  color: rgba(255, 255, 255, 0.78);
}

/* Active/selected language — noticeably brighter, slightly bolder */
.lang-option.is-active {
  color: var(--lang-active);
  font-weight: 520;
}

.lang-option.is-active::after {
  content: "";
  position: absolute;
  left: -6px;
  right: -6px;
  bottom: -4px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(90deg, transparent 0%, var(--lang-active-border) 18%, var(--lang-active-border) 82%, transparent 100%);
}

/* ─── Focus ring ────────────────────────────────────────────────────────────── */

.lang-option:focus-visible,
.lang-trigger:focus-visible,
.drawer-lang-option:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 2px;
}

/* ─────────────────────────────────────────────────────────────────────────────
   MOBILE DRAWER
   ─────────────────────────────────────────────────────────────────────────── */

.drawer-lang {
  display: none;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(21, 25, 34, 0.1);
}

.drawer-lang p {
  margin: 0 0 10px;
  font-size: 0.7rem;
  font-weight: 640;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: rgba(21, 25, 34, 0.55);
}

.drawer-lang-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.drawer-lang-option {
  appearance: none;
  -webkit-appearance: none;
  padding: 5px 12px;
  border: 1px solid rgba(21, 25, 34, 0.12);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.68);
  color: #18202e;
  font-size: 0.72rem;
  font-weight: 560;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background   180ms ease,
    transform    150ms ease,
    box-shadow   150ms ease;
}

.drawer-lang-option:hover {
  transform: translateY(-1px);
  border-color: rgba(21, 25, 34, 0.24);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.09);
}

.drawer-lang-option.is-active {
  color: #ffffff;
  border-color: transparent;
  background: #18202e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.22);
}

/* ─────────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 980px) {
  .lang-panel-inner {
    width: calc(100% - 40px);
    padding: 28px 0 32px;
  }

  .lang-region-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0 32px;
  }

  .lang-region-row {
    grid-template-columns: minmax(118px, 144px) minmax(0, 1fr);
  }
}

@media (max-width: 760px) {
  .lang-switch  { display: none; }
  .drawer-lang  { display: block; }
}

/* ─────────────────────────────────────────────────────────────────────────────
   CJK TYPOGRAPHY — Apple design language for Chinese / Japanese / Korean
   Activated by html[lang="zh"], html[lang="ja"], html[lang="ko"]
   ─────────────────────────────────────────────────────────────────────────── */

/*
 * Font stack priority order (Apple philosophy — system-native first):
 *
 *  1. PingFang SC         — Apple system font, all iOS/macOS devices
 *  2. Hiragino Sans GB    — Ships on older macOS, excellent legibility
 *  3. Noto Sans SC        — Loaded above via Google Fonts (universal fallback)
 *  4. Microsoft YaHei UI  — Windows / Android
 *  5. sans-serif          — OS default
 */

:root {
  --font-cjk-text:
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
  --font-cjk-display:
    "PingFang SC", "Hiragino Sans GB", "Noto Sans SC",
    "Microsoft YaHei UI", "Microsoft YaHei", sans-serif;
}

/* ─── Override site font tokens when locale is Chinese ──────────────────────── */

html[lang="zh"],
html[lang="zh-TW"],
html[lang="zh-HK"] {
  /* Replace the SF Pro stack with PingFang SC */
  --font-text:    var(--font-cjk-text);
  --font-display: var(--font-cjk-display);
  --font-sans:    var(--font-cjk-text);
}

/*
 * Body copy: Chinese needs slightly more breathing room between lines.
 * Apple uses ~1.7 for body in Chinese across apple.com/cn.
 */
html[lang="zh"] body,
html[lang="zh-TW"] body,
html[lang="zh-HK"] body {
  font-family: var(--font-cjk-text);
  line-height: 1.75;
  /* CJK characters have no kerning — zero letter-spacing is correct */
  letter-spacing: 0;
  /* Render CJK at slightly heavier weight for readability at small sizes */
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/*
 * Display headings: tighter line-height but still wider than Latin
 * Apple uses ~1.1–1.15 for large display headings on apple.com/cn
 */
html[lang="zh"] h1,
html[lang="zh"] h2,
html[lang="zh"] h3,
html[lang="zh"] h4,
html[lang="zh"] h5,
html[lang="zh"] h6,
html[lang="zh"] .section-title,
html[lang="zh"] .feature-title,
html[lang="zh"] .headline,
html[lang="zh-TW"] h1,
html[lang="zh-TW"] h2,
html[lang="zh-TW"] h3,
html[lang="zh-TW"] h4,
html[lang="zh-TW"] h5,
html[lang="zh-TW"] h6,
html[lang="zh-TW"] .section-title,
html[lang="zh-TW"] .feature-title,
html[lang="zh-TW"] .headline {
  font-family: var(--font-cjk-display);
  /* CJK headings: no letter-spacing (not meaningful for logographic scripts) */
  letter-spacing: 0;
  /* Apple CN headings use weight 500 for display clarity */
  font-weight: 500;
  line-height: 1.25;
  -webkit-font-smoothing: antialiased;
}

/*
 * Captions, labels, UI text: Apple uses weight 400 for most small CJK text.
 * Uppercase + wide tracking are Latin conventions — disable for CJK.
 */
html[lang="zh"] p,
html[lang="zh"] span,
html[lang="zh"] li,
html[lang="zh"] a,
html[lang="zh"] button,
html[lang="zh"] label,
html[lang="zh"] input,
html[lang="zh"] textarea,
html[lang="zh-TW"] p,
html[lang="zh-TW"] span,
html[lang="zh-TW"] li,
html[lang="zh-TW"] a,
html[lang="zh-TW"] button,
html[lang="zh-TW"] label,
html[lang="zh-TW"] input,
html[lang="zh-TW"] textarea {
  font-family: var(--font-cjk-text);
  letter-spacing: 0;
}

/*
 * UI chrome — nav, buttons, tags: text-transform uppercase is meaningless
 * for CJK; reset it. Also reduce letter-spacing on any component that
 * hardcodes it.
 */
html[lang="zh"] .site-nav a,
html[lang="zh"] .nav-link,
html[lang="zh"] .btn,
html[lang="zh"] .tag,
html[lang="zh"] .lang-trigger,
html[lang="zh"] .drawer-lang-option,
html[lang="zh-TW"] .site-nav a,
html[lang="zh-TW"] .nav-link,
html[lang="zh-TW"] .btn,
html[lang="zh-TW"] .tag,
html[lang="zh-TW"] .lang-trigger,
html[lang="zh-TW"] .drawer-lang-option {
  font-family: var(--font-cjk-text);
  letter-spacing: 0;
  text-transform: none;
}

/* ─── WattCision app card vertical label — suppress uppercase & tracking for CJK ── */
html[lang="zh"] .wc-app-card::after,
html[lang="zh-TW"] .wc-app-card::after,
html[lang="ja"] .wc-app-card::after,
html[lang="ko"] .wc-app-card::after {
  text-transform: none;
  letter-spacing: 0;
  font-family: var(--font-cjk-display, var(--font-cjk-text));
}

/* ─── Japanese ──────────────────────────────────────────────────────────────── */

html[lang="ja"] {
  --font-text:    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo UI", sans-serif;
  --font-display: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo UI", sans-serif;
  --font-sans:    "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", "Yu Gothic UI", "Meiryo UI", sans-serif;
}

html[lang="ja"] body {
  font-family: var(--font-text);
  line-height: 1.8;
  letter-spacing: 0;
  -webkit-font-smoothing: antialiased;
}

html[lang="ja"] h1,
html[lang="ja"] h2,
html[lang="ja"] h3,
html[lang="ja"] h4,
html[lang="ja"] h5,
html[lang="ja"] h6 {
  font-family: var(--font-display);
  letter-spacing: 0;
  line-height: 1.3;
  font-weight: 600;
}

/* ─── Korean ────────────────────────────────────────────────────────────────── */

html[lang="ko"] {
  --font-text:    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-display: "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-sans:    "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

html[lang="ko"] body {
  font-family: var(--font-text);
  line-height: 1.75;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

html[lang="ko"] h1,
html[lang="ko"] h2,
html[lang="ko"] h3,
html[lang="ko"] h4,
html[lang="ko"] h5,
html[lang="ko"] h6 {
  font-family: var(--font-display);
  letter-spacing: -0.02em;
  line-height: 1.2;
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────────────────────────────
   ACCESSIBILITY
   ─────────────────────────────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .lang-trigger,
  .lang-panel,
  .lang-option,
  .lang-caret,
  .drawer-lang-option,
  .lang-region-row {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }
}