/* SkillNugget languages (23 Oct 2026): the language menu, the footer language list, the "book in English" note, the
   language suggestion and the fonts and spacing for Japanese, Hindi and Arabic. Loaded only once a translation is on. */

/* Language menu in the header */
.lang-menu { position: relative; }
.lang-menu > summary { list-style: none; width: auto; min-width: 44px; padding: 0 10px; gap: 6px; grid-auto-flow: column; font: 600 .82rem/1 var(--display); letter-spacing: .04em; }
.lang-menu > summary::-webkit-details-marker { display: none; }
.lang-menu__list { position: absolute; top: calc(100% + 8px); right: 0; z-index: 70; min-width: 210px; margin: 0; padding: 8px; list-style: none; border-radius: 14px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); display: grid; gap: 2px; }
.lang-menu__list a { display: block; padding: 10px 12px; border-radius: 10px; text-decoration: none; font-weight: 600; color: var(--ink-2); }
.lang-menu__list a:hover, .lang-menu__list a:focus-visible { color: var(--ink); background: var(--bg-2); }
.lang-menu__list a[aria-current] { color: var(--blue-ink); background: var(--blue-soft); }
@media (max-width: 420px) { .lang-menu__code { display: none; } .lang-menu > summary { padding: 0; } }
/* The language button makes four items in the header: on a small phone they sit a little closer so the page never scrolls sideways */
@media (max-width: 420px) {
  .site-header .bar { gap: 10px; }
  .site-header .nav { gap: 6px; }
  .site-header .icon-btn, .site-header .lang-menu > summary { width: 40px; min-width: 40px; height: 40px; }
  .site-header .logo { gap: 7px; font-size: 1.15rem; }
  .site-header .logo svg { width: 28px; height: 25px; }
  .site-header .btn-sm { padding: 0 12px; }
}
@media (max-width: 359px) {
  .site-header .wrap { padding: 0 14px; }
  .site-header .logo { font-size: 1rem; }
  .site-header .btn-sm { padding: 0 10px; font-size: .88rem; }
}
/* Below 360 px a long one-word label ("Connexion", "Anmelden") cannot wrap: translated headers show the gem without the wordmark */
@media (max-width: 359px) { :root:not(:lang(en)) .site-header .logo > span { display: none; } }

/* Every language, in the footer (also a plain list of links for search engines) */
.lang-foot { margin-top: 40px; }
.site-footer .lang-foot ul { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.site-footer .lang-foot a[aria-current] { color: #fff; font-weight: 600; }

/* "The book is in English for now", next to every buy button on a translated page */
.edition-note { display: flex; align-items: flex-start; gap: 10px; max-width: 640px; margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; font-size: .92rem; line-height: 1.45; color: var(--ink-2); background: var(--bg-2); border: 1px solid var(--line); }
.edition-note__tag { flex: none; padding: 3px 7px; border-radius: 6px; font: 700 .7rem/1 var(--display); letter-spacing: .06em; color: var(--blue-ink); background: var(--blue-soft); }
.edition-note i { font-style: normal; font-weight: 600; color: var(--ink); }
.edition-note--card { margin: -6px 0 22px; color: var(--on-deep-2); background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .14); }
.edition-note--card i { color: #fff; }
.edition-note--card .edition-note__tag { color: var(--navy); background: var(--lime); }

/* A one-time suggestion to read the page in the visitor's own language (assets/js/i18n.js); never a redirect */
.lang-hint { position: fixed; left: 12px; right: 12px; top: 84px; z-index: 45; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; padding: 12px 12px 12px 18px; border-radius: 16px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line), var(--shadow-2); }
.lang-hint p { margin: 0; flex: 1 1 220px; font-size: .95rem; color: var(--ink); unicode-bidi: plaintext; } /* the hint is in the visitor's language: its own direction */
.lang-hint .icon-btn { width: 40px; height: 40px; }
@media (min-width: 760px) { .lang-hint { left: auto; right: 24px; max-width: 560px; flex-wrap: nowrap; } }

/* Other languages run longer than English: on a phone a button may wrap to two lines instead of widening the page */
@media (max-width: 640px) { :root:not(:lang(en)) .btn { white-space: normal; text-align: center; line-height: 1.2; padding-top: 10px; padding-bottom: 10px; max-width: 100%; } }

/* Long words (German compounds, long table cells) may break instead of widening the page on a small phone */
:root:not(:lang(en)) :is(.part, .way-group, .kit__item, .outcomes li, .ticks li, .faq, .prose, .sample figcaption, .stat, .fit, .ex-card, .lesson) { overflow-wrap: anywhere; hyphens: auto; }

/* Scripts the site's two typefaces do not cover: their own Noto family, a little more line height, no letter-spacing */
:root:lang(ja) { --sans: "Inter", "Noto Sans JP", "Hiragino Sans", "Yu Gothic", system-ui, sans-serif; --display: "Space Grotesk", "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif; }
:root:lang(hi) { --sans: "Inter", "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif; --display: "Space Grotesk", "Noto Sans Devanagari", "Nirmala UI", system-ui, sans-serif; }
:root:lang(ar) { --sans: "Noto Sans Arabic", "Inter", "Segoe UI", Tahoma, system-ui, sans-serif; --display: "Noto Sans Arabic", "Space Grotesk", "Segoe UI", system-ui, sans-serif; }
:lang(ja) h1, :lang(ja) h2, :lang(ja) h3 { word-break: auto-phrase; line-break: strict; overflow-wrap: anywhere; } /* a long katakana phrase may still break on a small phone */
:lang(ja) body, :lang(hi) body, :lang(ar) body { line-height: 1.8; }
:lang(ja) h1, :lang(ja) h2, :lang(hi) h1, :lang(hi) h2, :lang(ar) h1, :lang(ar) h2 { line-height: 1.3; }
:lang(ja) *, :lang(hi) *, :lang(ar) * { letter-spacing: 0 !important; }
:lang(ar) .eyebrow, :lang(hi) .eyebrow, :lang(ja) .eyebrow { text-transform: none; }

/* Arabic reads right to left: mirror the arrows and the few layouts placed with left/right (more in this block as found) */
[dir="rtl"] .arrow, [dir="rtl"] .icon-btn[data-prev] svg, [dir="rtl"] .icon-btn[data-next] svg { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .lang-menu__list { right: auto; left: 0; }
[dir="rtl"] .buybox .price-tag { margin-right: 0; margin-left: auto; }
@media (min-width: 760px) { [dir="rtl"] .lang-hint { right: auto; left: 24px; } }
@media (min-width: 980px) { [dir="rtl"] .buybar { right: auto; left: 24px; } }
[dir="rtl"] .btn:hover .arrow { transform: scaleX(-1) translateX(4px); }
[dir="rtl"] .pill > span[aria-hidden="true"], [dir="rtl"] .cat__count > span[aria-hidden="true"] { display: inline-block; transform: scaleX(-1); }
[dir="rtl"] .dot[aria-current="true"]::after { transform-origin: right; }
[dir="rtl"] .marquee__track { animation-name: marquee-rtl; }
@keyframes marquee-rtl { to { transform: translateX(50%); } }
[dir="rtl"] .card .badge { left: auto; right: 14px; }
[dir="rtl"] .card__notify { margin-left: 0; margin-right: auto; }
[dir="rtl"] .buybar { padding: 10px 18px 10px 10px; }
[dir="rtl"] .pb__field > span b { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .pb__field small, [dir="rtl"] .smap small { margin-left: 0; margin-right: 6px; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.3em; }
[dir="rtl"] .steps-mini, [dir="rtl"] .sk-why, [dir="rtl"] .sk-start, [dir="rtl"] .sk-sources { padding-left: 0; padding-right: 1.2em; }
[dir="rtl"] .prose .steps > li { padding-left: 0; padding-right: 44px; }
[dir="rtl"] .prose .steps > li::before { left: auto; right: 0; }
[dir="rtl"] .prose .do li, [dir="rtl"] .prose .dont li { padding-left: 0; padding-right: 30px; }
[dir="rtl"] .prose .do li::before, [dir="rtl"] .prose .dont li::before { left: auto; right: 4px; }
[dir="rtl"] .prose .callout { border-left: 0; border-right: 5px solid var(--blue); }
[dir="rtl"] .prose .callout.tip { border-right-color: var(--lime-2); }
[dir="rtl"] .prose .callout.warn { border-right-color: #FF6B4A; }
[dir="rtl"] .prose .prompt::before { left: auto; right: 14px; }
[dir="rtl"] .prose th { text-align: right; }
[dir="rtl"] .sk-start li { padding-left: 0; padding-right: 28px; }
[dir="rtl"] .sk-start li::before { content: "←"; left: auto; right: 2px; }
/* Off-screen helpers sit to the right in RTL, where overflow is clipped instead of scrollable */
[dir="rtl"] .hp { left: auto; right: -9999px; }
[dir="rtl"] .skip { left: auto; right: -999px; }
[dir="rtl"] .skip:focus { right: 12px; }
/* The pickleball court is a diagram: keep it as drawn, so "serves from the right" matches the highlighted player */
[dir="rtl"] .t2-court { direction: ltr; }