/* ARKIE LifeStyle · Immersive — multilingual additions (loaded after main.css on every page).
   main.css is the Figma export and stays untouched; everything language-related lives here. */

/* ---------- fonts ----------
   The self-hosted Noto Sans SC is subset to the Chinese page's own characters, and Manrope to basic Latin.
   Accented Latin (Vietnamese, ỹ/ệ …) comes from these extra Manrope faces — downloaded only when such a
   character is on the page. Japanese and Korean pages also load Noto Sans JP / KR (see src/build.mjs). */
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-latin-ext-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Manrope"; src: url("../assets/fonts/manrope-vietnamese-var.woff2") format("woff2"); font-weight: 400 800; font-display: swap;
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }

/* languages written in Latin script: the "Chinese copy" font stack becomes Manrope */
:root:is([data-lang="en"], [data-lang="id"], [data-lang="vi"]) { --cjk: "Manrope", var(--noto); }
:root[data-lang="ja"] { --noto: "Noto Sans JP", "Hiragino Sans", "Yu Gothic", "Meiryo", sans-serif; }
:root[data-lang="ko"] { --noto: "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }

/* ---------- layout for translated copy ----------
   The design is set for Chinese, whose characters are compact and need no spaces. Translations run
   longer, so the scenes below get a little more room or a little less type — only on those pages. */
:root:not([data-lang="zh-CN"]) {
  /* line breaks: keep Korean words whole, break Japanese between phrases (Chrome; others: normal) */
  &[data-lang="ko"] body { word-break: keep-all; overflow-wrap: break-word; }
  &[data-lang="ja"] :is(h1, h2, h3, .t-h2, .t-h3, .t-h4, .btn, .chip, .fc-links a) { word-break: auto-phrase; }   /* headings only: phrase breaks make body text ragged */

  /* even out headings and statements that wrap (no lone word on the last line) */
  & :is(.t-h1, .t-h2, .t-h3, .t-h4, .man-statement, .quote blockquote, .oc-cn) { text-wrap: balance; }

  /* the Chinese layout breaks these lines by hand; other languages wrap naturally */
  & :is(.man-statement, .quote blockquote, .infra-panel .t-h3) br { display: none; }

  /* finale tagline: the wide Chinese tracking reads as s p a c e d  l e t t e r s in other scripts */
  & .oc-cn { letter-spacing: .04em; padding-left: .04em; }
  &:is([data-lang="ja"], [data-lang="ko"]) .oc-cn { letter-spacing: .12em; padding-left: .12em; }

  /* footer links: two columns per group instead of four in a row (desktop), so long names don't wrap */
  & .fc-links { grid-template-columns: repeat(2, max-content); column-gap: 6.4rem; row-gap: 1.2rem; }
}

@media (min-width: 1200px) {
  /* 00 hero: the headline must stay left of the mascot (≈ the Chinese line width, 78rem) */
  :root[data-lang="en"] .hero-display, :root[data-lang="vi"] .hero-display { font-size: 8rem; line-height: 9.2rem; }
  :root[data-lang="id"] .hero-display { font-size: 7.2rem; line-height: 8.4rem; }
  :root:is([data-lang="ja"], [data-lang="ko"]) .hero-display { font-size: 9.2rem; line-height: 10.6rem; }

  /* 03 infra panel: a slightly smaller title so it keeps to two lines and the panel fits the screen */
  :root:not([data-lang="zh-CN"]) .infra-panel .sh .t-h1 { font-size: 4.4rem; line-height: 5.6rem; }
  :root:not([data-lang="zh-CN"]) .infra-panel .t-h3 { font-size: 2.4rem; line-height: 3.4rem; }
  :root:is([data-lang="id"], [data-lang="vi"]) .infra-panel { gap: 2.4rem; }
  :root:is([data-lang="id"], [data-lang="vi"]) .infra-panel .t-body-l { font-size: 1.8rem; line-height: 2.8rem; }

  /* 04 global: a wider heading block and the quote card a little lower, so a two-line title never
     pushes the paragraph behind the card; the quote itself in a size that fits the card */
  :root:not([data-lang="zh-CN"]) .global-head { width: 96rem; }
  :root:not([data-lang="zh-CN"]) .global-head .t-h1 { font-size: 4.8rem; line-height: 6rem; }
  :root:not([data-lang="zh-CN"]) .quote { top: 55rem; }
  :root:not([data-lang="zh-CN"]) .quote blockquote { top: 50%; transform: translateY(-50%); font-size: 2.4rem; line-height: 3.4rem; }
}

@media (max-width: 1199.98px) {
  /* hero subtitle: the Chinese line is short enough never to wrap; translations must be allowed to */
  :root:not([data-lang="zh-CN"]) .hero-sub { white-space: normal; }
}
@media (max-width: 599.98px) {
  :root[data-lang="id"] .hero-display { font-size: min(38px, 10.8vw); line-height: 1.26; }   /* "Menghubungkan" must fit 320px */
  :root:not([data-lang="zh-CN"]) .fc-links { column-gap: 24px; }
}

/* ---------- language menu ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lang { position: relative; flex: none; }
.lang-btn img, .lang-btn svg { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
.lang.is-open .lang-btn > img { transform: rotate(180deg); }
.lang-list {
  position: absolute; z-index: 60; right: 0; top: calc(100% + .8rem); min-width: 24rem; padding: .6rem 0; list-style: none;
  border-radius: 1.6rem; background: rgba(34, 35, 39, .96); border: var(--hair) solid var(--border);
  box-shadow: 0 2.4rem 4.8rem rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); overflow: hidden;
}
.lang-list[hidden] { display: none; }
.lang-footer .lang-list { top: auto; bottom: calc(100% + .8rem); }
.lang-item {
  display: flex; align-items: center; gap: 1.4rem; padding: 1.1rem 2rem; white-space: nowrap;
  font: 500 1.6rem/2.4rem "Manrope", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", sans-serif; color: var(--t2);
  transition: background-color .2s, color .2s;
}
.lang-item img { width: 2.4rem; height: 2.4rem; flex: none; }
.lang-item:hover { background: rgba(255, 255, 255, .06); color: var(--t1); }
.lang-item[aria-current="true"] { background: var(--nav-fill); color: var(--t1); font-weight: 700; }
.lang-item:focus-visible { outline: var(--line) solid var(--gold); outline-offset: -.3rem; }

@media (max-width: 1199.98px) {
  .lang-list { min-width: 240px; top: calc(100% + 8px); border-radius: 16px; padding: 6px 0; }
  .lang-footer .lang-list { bottom: calc(100% + 8px); }
  .lang-item { gap: 14px; padding: 11px 20px; font-size: 16px; line-height: 24px; }
  .lang-item img { width: 24px; height: 24px; }
}
@media (max-width: 599.98px) {
  .nav-actions .lang-nav { display: none; }              /* phones: the language menu lives in the ☰ menu */
  .menu-actions .lang-menu { width: 100%; }
  .menu-actions .lang-menu .lang-list { left: 0; right: 0; top: auto; bottom: calc(100% + 8px); }
  .footer-bottom .lang-footer .lang-list { right: auto; left: 0; }
}