/* ============================================================
   英文版排版覆寫 — 疊在 main.css 之上，只調整與語言有關的部分
   結構、色彩、元件一律沿用中文版，不另立一套。
   ============================================================ */

:root {
    /* 中文版所有規則都透過這兩個變數取字體，改變數即可整站換字，
       不必逐條覆寫。--serif-tc → 英文襯線；--sans-tc → 英文無襯線。 */
    --serif-tc: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
    --sans-tc:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
}

/* ── 字距 ─────────────────────────────────────────────
   中文靠字距製造疏朗感；英文正文加字距會破壞單字辨識，一律歸零。
   全大寫的小標則相反，需要字距才不擁擠。 */
body, p, li, td, th, .section-subtitle, .faq-a, .jury-bio, .song-credit {
    letter-spacing: 0;
}
h1, h2, h3, h4, .brand-zh, .jury-name, .timeline-title, .song-name {
    letter-spacing: -0.008em;   /* 英文標題微負字距較緊實 */
}
.eyebrow, .hero-tag, .label, .badge, .footer-social-label,
.nav-menu a, .nav-group-toggle, .btn, .timeline-stage {
    letter-spacing: 0.14em;     /* 全大寫／小標仍需字距 */
}

/* ── 行高與字級 ────────────────────────────────────────
   Cormorant Garamond 的 x-height 偏小，同樣 px 值在視覺上比中文襯線小一號，
   因此英文標題級距上調約 10%。此舉會超出規格 §2.2 的 32–40px（H2 上限 44px），
   經主辦方 2026-08-13 確認可接受——該區間是為中文字體訂的。
   Inter 的 x-height 偏大，正文維持原級距。 */
h1 { font-size: clamp(2.25rem, 5.4vw, 4rem); line-height: 1.08; }
h2 { font-size: clamp(1.875rem, 3.8vw, 2.75rem); line-height: 1.15; }
h3 { font-size: clamp(1.3rem, 2.3vw, 1.75rem); line-height: 1.25; }
p  { line-height: 1.6; }

.hero h1 { font-size: clamp(2.25rem, 5.6vw, 4rem); line-height: 1.1; }
.hero.page-hero h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); }

/* 英文不需要「首屏副標用中文襯線」那條，改回英文襯線斜體 */
.hero-sub-zh {
    font-family: var(--serif-en);
    font-style: italic;
    letter-spacing: 0.02em;
}

/* ── 斷詞 ─────────────────────────────────────────────
   中文可任意換行，英文長字需連字符避免窄欄爆版。 */
p, li, .faq-a, .jury-bio, .card p, .advantage-card p {
    hyphens: auto;
    -webkit-hyphens: auto;
    overflow-wrap: break-word;
}

/* ── 導覽 ─────────────────────────────────────────────
   英文選單字串較長（About / Participate / Awards & Jury…），
   縮小字級與間距才容納得下，否則品牌文字會被擠成兩行。 */
.nav-menu { gap: 1.35rem; }
.nav-menu a, .nav-group-toggle { font-size: 0.86rem; }
.nav-brand .brand-zh { font-size: 0.92rem; letter-spacing: 0.02em; }
.nav-brand .brand-en { font-size: 0.62rem; }

/* ── 元件微調 ──────────────────────────────────────── */
.song-name::before, .song-name::after { content: none; }   /* 英文不用書名號 */
.song-name { font-style: italic; }
.jury-name { font-size: 1.5rem; }
.value-sub.en { font-style: italic; }

/* 語言切換 */
.nav-lang {
    font-family: var(--sans-en);
    font-size: 0.78rem !important;
    letter-spacing: 0.16em;
    opacity: 0.85;
}
.nav-lang:hover { opacity: 1; }

@media (max-width: 1024px) {
    .nav-menu { gap: 1.6rem; }
    .nav-menu a, .nav-group-toggle { font-size: 1.05rem; }
}
