/* ============================================================
   J. CALDWELL & SONS — I18N.CSS
   Phase 3: Language Switcher + Japanese Typography
   ============================================================ */

/* --- LANGUAGE SWITCHER (HEADER DATE LINE) --- */
.header-date-line {
  position: relative;
}

.lang-switch {
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-nav);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}

.lang-switch-link {
  color: var(--color-ink-faded);
  padding: 2px 4px;
  transition: color 0.3s ease;
}

.lang-switch-link:hover {
  color: var(--color-ink);
}

.lang-switch-link.active {
  color: var(--color-ink);
}

.lang-switch-sep {
  color: var(--color-rule);
  font-size: 10px;
}


/* --- LANGUAGE SWITCHER (MOBILE NAV) --- */
.mobile-lang-switch {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--color-rule);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
}

.mobile-nav-overlay.open .mobile-lang-switch {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.3s;
}

.mobile-lang-link {
  font-family: var(--font-nav);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-ink-faded);
  transition: color 0.3s ease;
}

.mobile-lang-link.active {
  color: var(--color-ink);
}

.mobile-lang-switch .lang-switch-sep {
  color: var(--color-rule);
}


/* ============================================================
   JAPANESE TYPOGRAPHY — html[lang="ja"]
   全見出し・テキスト要素の font-size / line-height を日本語メトリクスに調整
   ============================================================ */

/* --- GLOBAL BODY --- */
html[lang="ja"] body {
  line-height: 1.9;
  letter-spacing: 0.03em;
  word-break: break-all;
  overflow-wrap: break-word;
}

/* --- ALL HEADINGS: 一括でline-heightを緩める --- */
html[lang="ja"] h1 {
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.25;
}

html[lang="ja"] h2 {
  font-feature-settings: "palt";
  letter-spacing: 0.05em;
  line-height: 1.35;
}

html[lang="ja"] h3 {
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  line-height: 1.4;
}

html[lang="ja"] h4 {
  font-feature-settings: "palt";
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* --- HERO (index-ja.html) --- */
html[lang="ja"] .hero-text h1 {
  line-height: 1.3;
}

html[lang="ja"] .hero-text h1 span {
  font-size: clamp(28px, 4.5vw, 56px);
  line-height: 1.3;
  letter-spacing: 0.08em;
}

/* --- PAGE TITLES (各ページの大見出しH1) --- */
html[lang="ja"] .about-page-header h1,
html[lang="ja"] .lookbook-page-header h1,
html[lang="ja"] .collection-page-header h1,
html[lang="ja"] .contact-page-header h1 {
  font-size: clamp(32px, 4vw, 48px);
  line-height: 1.3;
}

/* --- SECTION TITLES (H2) --- */
html[lang="ja"] .section-title {
  letter-spacing: 0.06em;
  line-height: 1.35;
}

/* --- NAV / UI ELEMENTS — Noto Sans JP --- */
html[lang="ja"] .nav-link,
html[lang="ja"] .mobile-nav-link,
html[lang="ja"] .btn-primary,
html[lang="ja"] .btn-secondary,
html[lang="ja"] .text-link,
html[lang="ja"] .footer-col-title,
html[lang="ja"] .section-label,
html[lang="ja"] .form-label,
html[lang="ja"] .product-number-label,
html[lang="ja"] .contact-detail-label,
html[lang="ja"] .contact-hours-title,
html[lang="ja"] .chapter-label,
html[lang="ja"] .collection-vol-label,
html[lang="ja"] .credit-line,
html[lang="ja"] .footer-newsletter-btn {
  font-family: var(--font-nav-jp);
  letter-spacing: 0.1em;
}

/* --- DROP CAP --- */
html[lang="ja"] .drop-cap::first-letter {
  font-family: var(--font-headline-jp);
  font-size: 3em;
  line-height: 0.85;
  margin: 0.05em 0.08em 0 0;
}

/* --- PARALLAX QUOTES --- */
html[lang="ja"] .parallax-quote blockquote {
  font-size: clamp(18px, 2.2vw, 26px);
  letter-spacing: 0.06em;
  line-height: 1.8;
}

/* --- TIMELINE --- */
html[lang="ja"] .timeline-year {
  line-height: 1.2;
}

html[lang="ja"] .timeline-desc {
  line-height: 1.85;
}

/* --- SPEC TABLE --- */
html[lang="ja"] .spec-table td:first-child {
  font-family: var(--font-nav-jp);
}

/* --- FORM ELEMENTS --- */
html[lang="ja"] input,
html[lang="ja"] textarea,
html[lang="ja"] select {
  font-family: 'Noto Sans JP', sans-serif;
}

html[lang="ja"] .form-header {
  font-family: var(--font-headline-jp);
  letter-spacing: 0.08em;
  line-height: 1.4;
}

/* --- PRODUCT OVERLAY --- */
html[lang="ja"] .product-overlay-name {
  font-family: var(--font-headline-jp);
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* --- LOOKBOOK HEADINGS --- */
html[lang="ja"] .editorial-text-block h2,
html[lang="ja"] .photo-story-text h3 {
  line-height: 1.35;
}

/* --- COLUMN TEXT (段組み) --- */
html[lang="ja"] .lookbook-preview-text,
html[lang="ja"] .behind-scenes-text,
html[lang="ja"] .legacy-text {
  line-height: 1.9;
}

/* --- PHILOSOPHY QUOTE --- */
html[lang="ja"] .philosophy-text blockquote {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.7;
}

/* --- MASTHEAD / LOADING — 英語フォントを維持 --- */
html[lang="ja"] .header-masthead-title {
  font-family: var(--font-masthead);
}

html[lang="ja"] .loading-masthead {
  font-family: var(--font-masthead);
}

/* --- FOOTER BRAND — 英語フォントを維持 --- */
html[lang="ja"] .footer-brand-name {
  font-family: var(--font-masthead);
}

/* --- CTA SECTION --- */
html[lang="ja"] .contact-cta h2 {
  line-height: 1.35;
}


/* ============================================================
   RESPONSIVE — SP
   ============================================================ */
@media (max-width: 768px) {
  .lang-switch {
    right: 16px;
  }

  html[lang="ja"] .hero-text h1 span {
    font-size: clamp(22px, 7vw, 36px);
    line-height: 1.35;
  }

  html[lang="ja"] .drop-cap::first-letter {
    font-size: 2.5em;
  }

  html[lang="ja"] h1 {
    line-height: 1.3;
  }

  html[lang="ja"] h2 {
    line-height: 1.4;
  }

  html[lang="ja"] .parallax-quote blockquote {
    font-size: clamp(16px, 4vw, 20px);
    line-height: 1.8;
  }

  html[lang="ja"] .philosophy-text blockquote {
    font-size: 16px;
    line-height: 1.7;
  }
}