/* ==========================================================================
   i18n.css — cute fonts per language + the language picker (i18n.js)
   Latin text keeps the café fonts; Thai / Japanese / Korean / Chinese letters
   fall through to a rounded body font (--cute) and a handwritten title font
   (--cute-d). Fonts are loaded on demand by i18n.js (Google Fonts).
   ========================================================================== */
html[data-lang="th"]      { --cute: 'Mali';               --cute-d: 'Sriracha'; }
html[data-lang="ja"]      { --cute: 'Zen Maru Gothic';    --cute-d: 'Yusei Magic'; }
html[data-lang="ko"]      { --cute: 'Gowun Dodum';        --cute-d: 'Jua'; }
html[data-lang="zh-Hans"] { --cute: 'ZCOOL KuaiLe';       --cute-d: 'ZCOOL KuaiLe'; }
html[data-lang="zh-Hant"] { --cute: 'Chiron GoRound TC';  --cute-d: 'LXGW WenKai TC'; }

html[data-lang]:not([data-lang="en"]) {
    --font: 'Plus Jakarta Sans', var(--cute), 'Noto Sans Thai', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --serif: 'Fraunces', var(--cute), Georgia, serif;
    --script: 'Great Vibes', var(--cute-d), var(--cute), cursive;
    /* never slant or fake-bold Thai / CJK letters */
    font-synthesis: none;
}
html[data-lang="zh-Hans"] { font-synthesis: weight; }   /* ZCOOL KuaiLe has one weight */
html[data-lang="ko"] { font-synthesis: weight; }        /* Gowun Dodum has one weight */
html[data-lang]:not([data-lang="en"]) body { font-family: var(--font); }

/* places that name their fonts directly */
html[data-lang]:not([data-lang="en"]) :is(.cal-month .script, .fridge-title .script) { font-family: var(--script); }
html[data-lang]:not([data-lang="en"]) .cd-date { font-family: var(--cute-d), var(--cute), sans-serif; }
html[data-lang]:not([data-lang="en"]) :is(.fridge-title .sub, .fridge-stats b, .shelf-label b, .shelf-empty, .fridge-drawer .row b, .fridge-drawer .hint, .pf-full, .pf-av b) { font-family: var(--serif); }
html[data-lang]:not([data-lang="en"]) :is(.sync-badge, .pf-chip, .pf-actions .pf-logout) { font-family: var(--font); }
html[data-lang]:not([data-lang="en"]) .lp-mhead .lp-title,
html[data-lang]:not([data-lang="en"]) .lp-flag { font-family: 'Damion', var(--script); }

/* handwritten titles: Great Vibes is tiny for its size, the cute fonts are not */
html[data-lang]:not([data-lang="en"]) :is(.todo-head h1, .sc-head h2) { font-size: 30px; line-height: 1.2; }
html[data-lang]:not([data-lang="en"]) .hub-brand h2 { font-size: 26px; }
html[data-lang]:not([data-lang="en"]) .intro h2 { font-size: 30px; line-height: 1.25; }
html[data-lang]:not([data-lang="en"]) .menu-head .script { font-size: 36px; line-height: 1.2; }
html[data-lang]:not([data-lang="en"]) .cal-month .script { font-size: 40px; line-height: 1.2; }
html[data-lang]:not([data-lang="en"]) .cd-date { font-size: 24px; line-height: 1.3; }
html[data-lang]:not([data-lang="en"]) .fridge-title .script { font-size: 30px; line-height: 1.25; }
html[data-lang]:not([data-lang="en"]) .lp-divider span { font-size: 30px; line-height: 1.25; }
html[data-lang]:not([data-lang="en"]) .lp-flag { font-size: 19px; line-height: 1.3; }
html[data-lang]:not([data-lang="en"]) .lp-thanks { font-size: 19px; }
html[data-lang]:not([data-lang="en"]) .ph-card .script { font-size: 30px; line-height: 1.25; }
html[data-lang]:not([data-lang="en"]) .menu-head .script { margin-bottom: 4px; }
/* Thai vowels sit above/below the line: a little more room */
html[data-lang="th"] body { line-height: 1.55; }
/* tracking and small-caps are for Latin letters */
html[data-lang]:not([data-lang="en"]) :is(.lp-kicker, .lp-col h3, .lp-foot, .lp-brewing span, .lp-drink .st, .drink-chip .dc-tx small, .cd-dow, .lp-est) { letter-spacing: .04em; font-variant: normal; }
html[data-lang]:not([data-lang="en"]) .lp-item b { white-space: normal; }
html[data-lang]:not([data-lang="en"]) .ta-time { white-space: nowrap; }
html[data-lang]:not([data-lang="en"]) .todo-date { letter-spacing: .02em; }
html[data-lang]:not([data-lang="en"]) .matcha-caption { white-space: normal; }
html[data-lang]:not([data-lang="en"]) .intro-step span { white-space: normal; }

/* ---------- language picker ---------- */
.lang-pick { position: relative; display: inline-flex; align-self: center; }
.lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 12px 0 10px; border-radius: 999px;
    background: var(--cream, #FFFBF1); border: 1.5px solid var(--border-strong, rgba(229, 143, 163, .6));
    box-shadow: var(--shadow); color: #9A3D57; cursor: pointer;
    font: 700 12.5px/1 var(--font); white-space: nowrap;
}
.lang-btn:hover, .lang-btn[aria-expanded="true"] { background: #fff; }
.lang-btn svg { flex: none; }
.lang-cur { font-family: 'Plus Jakarta Sans', var(--cute-d), var(--cute), sans-serif; font-weight: 700; }
.lang-menu {
    position: absolute; top: calc(100% + 8px); right: 0; z-index: 70;
    min-width: 168px; padding: 8px; border-radius: 18px;
    background: var(--cream, #FFFBF1); border: 1.5px solid var(--border-strong, rgba(229, 143, 163, .6));
    box-shadow: var(--shadow-lg, 0 18px 40px -16px rgba(62, 39, 39, .35));
    display: flex; flex-direction: column; gap: 2px;
    animation: lang-pop .16s ease-out;
}
.lang-menu[hidden] { display: none; }
@keyframes lang-pop { from { opacity: 0; transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .lang-menu { animation: none; } }
.lang-opt {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 12px; border: none; border-radius: 12px; background: none; cursor: pointer;
    color: #3E2727; text-align: left; font-size: 15px; line-height: 1.2;
}
.lang-opt:hover { background: #FFF1F3; }
.lang-opt[aria-checked="true"] { background: var(--pink-line, #FFE4E9); color: #9A3D57; }
.lo-flag, .lang-flag { font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; font-size: 18px; line-height: 1; flex: none; }
.lang-flag { font-size: 16px; }
.lo-name { flex: 1; }
.lang-opt { justify-content: flex-start; }
.lo-check { opacity: 0; font-weight: 800; color: #E58FA3; }
.lang-opt[aria-checked="true"] .lo-check { opacity: 1; }
.lang-opt[data-lang="en"] .lo-name      { font: 600 15px 'Fraunces', Georgia, serif; font-style: italic; }
.lang-opt[data-lang="th"] .lo-name      { font: 600 15px 'Mali', 'Noto Sans Thai', sans-serif; }
.lang-opt[data-lang="ja"] .lo-name      { font: 700 15px 'Zen Maru Gothic', sans-serif; }
.lang-opt[data-lang="ko"] .lo-name      { font: 400 16px 'Jua', sans-serif; }
.lang-opt[data-lang="zh-Hans"] .lo-name { font: 400 16px 'ZCOOL KuaiLe', sans-serif; }
.lang-opt[data-lang="zh-Hant"] .lo-name { font: 700 15px 'LXGW WenKai TC', sans-serif; }

/* landing page: its own row above the menu sheet (reserves the space, no overlap) */
.lang-pick.on-landing { display: flex; justify-content: flex-end; align-self: stretch; width: 100%; margin: 0 0 12px; z-index: 5; }
html.phone .lang-btn { height: 30px; padding: 0 10px 0 8px; font-size: 12px; }
@media (max-width: 560px) { .lang-pick.on-landing { margin-bottom: 8px; } }

/* Japanese / Chinese: break lines between phrases, not in the middle of a word */
html[data-lang="ja"] body { word-break: auto-phrase; }
html[data-lang="ko"] body { word-break: keep-all; overflow-wrap: anywhere; }