/* viralizi.ai: language menu, notes on English-only links, type per script and right-to-left fixes. Loaded on every
   page after the page sheets (build.py copies it to /assets/css/lang.css). Menu markup: build.py lang_switch()
   (a <details>, works without JS); behaviour: src/js/lang-menu.js. */

/* ---------- language menu: the button shows the current language, the list has all of them ---------- */
.lang-menu { position: relative; flex: none; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding-inline: 10px; box-sizing: border-box;
  border-radius: var(--radius-md); border: 1px solid var(--line-strong); color: var(--ink-muted);
  font: 600 15px/1 var(--font-sans); white-space: nowrap; list-style: none; cursor: pointer; -webkit-user-select: none; user-select: none;
}
.lang-switch::-webkit-details-marker { display: none; }
.lang-switch::marker { content: ""; }
.lang-switch:hover, .lang-menu[open] > .lang-switch { color: var(--ink); border-color: var(--ink-muted); }
.lang-switch:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.lang-flag { width: 20px; height: 20px; flex: none; clip-path: circle(50%); }
.lang-code { display: none; }
.lang-caret { width: 16px; height: 16px; flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.lang-menu[open] .lang-caret { transform: rotate(180deg); }
.lang-list {
  position: absolute; z-index: 70; top: calc(100% + 8px); inset-inline-end: 0; display: grid; gap: 2px;
  width: max-content; min-width: 228px; max-height: min(600px, calc(100dvh - 110px)); overflow-y: auto; overscroll-behavior: contain;
  margin: 0; padding: 6px; list-style: none; box-sizing: border-box;
  border-radius: var(--radius-lg); background: var(--surface); border: 1px solid var(--line-strong); box-shadow: var(--shadow-float);
}
.lang-list a {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding-inline: 12px; border-radius: var(--radius-md);
  color: var(--ink); font: 500 16px/1.2 var(--font-sans); text-decoration: none;
}
.lang-list a:hover { background: var(--surface-2); }
.lang-list a:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; background: var(--surface-2); }
.lang-list a[aria-current] { font-weight: 700; }
.lang-check { width: 18px; height: 18px; flex: none; margin-inline-start: auto; color: var(--scan); }
footer .lang-list { top: auto; bottom: calc(100% + 8px); } /* the footer menu opens upwards */
@media (prefers-reduced-motion: no-preference) {
  .lang-menu[open] .lang-list { animation: lang-in var(--dur-fast) var(--ease-out) both; }
  footer .lang-menu[open] .lang-list { animation-name: lang-in-up; }
  @keyframes lang-in { from { opacity: 0; transform: translateY(-6px); } }
  @keyframes lang-in-up { from { opacity: 0; transform: translateY(6px); } }
}
/* narrow phone, header: flag + short code (the full name stays for screen readers) */
@media (max-width: 560px) {
  .nav-actions .lang-switch { gap: 6px; padding-inline: 9px; }
  .nav-actions .lang-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .nav-actions .lang-code { display: inline; }
  .nav-actions .lang-caret { display: none; }
}

/* narrowest phones: the header fits the longer button labels of some languages (two lines when needed) */
@media (max-width: 420px) {
  .vz-nav { gap: 10px; }
  .vz-nav__logo svg { height: 19px; }
  .nav-actions { flex: 0 1 auto; min-width: 0; }
  .nav-actions .vz-nav__cta { min-width: 0; padding-inline: 12px; font-size: 14px; line-height: 1.15; text-align: center; white-space: normal; text-wrap: balance; }
}

/* ---------- links to pages that only exist in English (legal documents): "(in English)" in the page language ---------- */
.in-en { font-size: 0.875em; font-weight: 400; }
a:has(> .in-en) { white-space: normal; } /* a no-wrap link (.promise a) would push the page sideways with the note */
:root:is(:lang(zh-CN), :lang(ja), :lang(ko)) a:has(> .in-en) { word-break: keep-all; } /* the line breaks before the note, not inside a word */
.foot-legal a, .foot-nav a { flex-wrap: wrap; column-gap: 0.3em; } /* these links are flex: the note wraps as a whole */

/* ---------- type per script ----------
   Schibsted Grotesk keeps the Latin letters and digits; the script's Noto font (loaded only on that language's pages,
   build.py SCRIPT_FONTS) and the system fonts draw the rest. */
:root:lang(ar) { --font-sans: 'Schibsted Grotesk', 'Noto Sans Arabic', 'Geeza Pro', 'Segoe UI', Tahoma, sans-serif; }
:root:lang(hi) { --font-sans: 'Schibsted Grotesk', 'Noto Sans Devanagari', 'Kohinoor Devanagari', 'Nirmala UI', Mangal, sans-serif; }
:root:lang(zh-CN) { --font-sans: 'Schibsted Grotesk', 'Noto Sans SC', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif; }
:root:lang(ja) { --font-sans: 'Schibsted Grotesk', 'Noto Sans JP', 'Hiragino Sans', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif; }
:root:lang(ko) { --font-sans: 'Schibsted Grotesk', 'Noto Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
/* The negative tracking of the display type is made for Latin letters: it breaks joined Arabic letters and crowds
   Devanagari and CJK. These scripts also need more room between lines than the 0.98 to 1.15 of the big titles. */
:root:is(:lang(ar), :lang(hi), :lang(zh-CN), :lang(ja), :lang(ko)) body * { letter-spacing: normal !important; }
:root:is(:lang(ar), :lang(hi)) :is(h1, h2, h3, h1 *, h2 *, h3 *, .promise strong, .story-quote p, .plan-guar strong) { line-height: 1.38 !important; }
:root:is(:lang(zh-CN), :lang(ja), :lang(ko)) :is(h1, h2, h3, h1 *, h2 *, h3 *, .promise strong, .story-quote p, .plan-guar strong) { line-height: 1.3 !important; }
:root:is(:lang(ar), :lang(hi), :lang(zh-CN), :lang(ja), :lang(ko)) .guar-num { line-height: 1 !important; }
:root:lang(ko) body { word-break: keep-all; } /* Korean breaks between words, like the Latin languages */
:root:is(:lang(zh-CN), :lang(ja)) body { line-break: strict; }
:root:lang(ja) :is(h1, h2, h3) { word-break: auto-phrase; overflow-wrap: anywhere; } /* Chrome: break Japanese titles between phrases, inside one only when it does not fit */
/* Long words (German compounds, a long @ or e-mail) wrap instead of pushing the page sideways. */
h1, h2, h3, p, li, dd, dt, summary, label { overflow-wrap: break-word; }
:root:lang(de) :is(h1, h2, h3) { -webkit-hyphens: auto; hyphens: auto; }

/* ---------- right to left (Arabic, <html dir="rtl">) ----------
   The page sheets use logical properties (inset-inline, margin-inline, padding-inline, text-align: start); these are
   the pieces that still need an explicit mirror. */
[dir="rtl"] { --flip: -1; } /* used by transforms that point forward (funil.css .rx-anim) */
/* arrows point the way the text reads (the play icon does not turn: media controls stay as they are) */
[dir="rtl"] svg:has(> path[d^="M5 12h14"]), [dir="rtl"] svg:has(> path[d^="M19 12H5"]) { transform: scaleX(-1); }
/* design-system pieces with physical padding (packages/design-system/components/bundle.css) */
:where([dir="rtl"]) .vz-nav { padding-inline: var(--space-5) 10px; }
@media (max-width: 560px) { :where([dir="rtl"]) .vz-nav { padding-inline-start: var(--space-4); } }
:where([dir="rtl"]) .vz-event { padding-inline: 12px 18px; }
[dir="rtl"] .vz-btn--primary::after { transform: translateX(120%); }
[dir="rtl"] .vz-btn--primary:hover::after { transform: translateX(-120%); }
/* the reel wall moves the other way (its track overflows to the left) */
[dir="rtl"] .wall.is-running .wall-track { animation-name: wall-move-rtl; }
@keyframes wall-move-rtl { to { transform: translateX(calc(50% + 8px)); } }
/* bars and lines that grow from the start */
[dir="rtl"] .rx-progress i { transform-origin: right; }
[dir="rtl"] .af-flow::before { transform-origin: right; background: linear-gradient(270deg, var(--warm), var(--scan)); }
@media (max-width: 960px) { [dir="rtl"] .af-flow::before { transform-origin: top; background: linear-gradient(180deg, var(--warm), var(--scan)); } }
/* the knob of the cookie switch */
[dir="rtl"] .ck-switch:checked::after { transform: translateX(-20px); }
/* what people type here is always left to right: phone (with the country code first), e-mail, Instagram @ */
[dir="rtl"] :is(.fld-phone, .fld-ig) { direction: ltr; }
[dir="rtl"] input[type="email"] { direction: ltr; text-align: right; }