/* Shared layout for the 24 static language editions. */
html { scroll-padding-top: 148px; }
body { overflow-wrap: anywhere; }
header { position: sticky; top: 0; z-index: 20; background: #fff; }
body > .site-language-row { position: sticky; top: 0; z-index: 20; }
.site-language-row { border-top: 1px solid #e0e7e2; background: #fff; color: #34453b; font: 14px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
.site-language-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; max-width: 1000px; margin: auto; padding: 8px 22px; }
.site-language-label { font-size: 13px; }
.site-language-picker { position: relative; margin: 0; padding: 0; border: 0; border-radius: 0; }
.site-language-picker summary { cursor: pointer; list-style: none; border: 1px solid #cdd9d0; border-radius: 8px; padding: 7px 12px; min-height: 38px; font-size: 14px; font-weight: 650; color: #273e30; background: #f4f8f4; white-space: nowrap; }
.site-language-picker summary::-webkit-details-marker { display: none; }
.site-language-picker summary::after { content: " ▾"; }
.site-language-picker nav { position: absolute; z-index: 100; inset-inline-end: 0; top: calc(100% + 6px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; width: min(560px, calc(100vw - 44px)); max-height: min(65vh, 460px); overflow: auto; padding: 10px; border: 1px solid #cdd9d0; border-radius: 12px; background: #fff; box-shadow: 0 10px 30px #203a2426; }
.site-language-picker nav a { display: flex; align-items: center; min-height: 44px; color: #284a32; border-radius: 6px; padding: 9px 10px; text-align: start; text-decoration: none; font: 14px/1.5 system-ui, sans-serif; }
.site-language-picker nav a:hover, .site-language-picker nav a[aria-current] { background: #e8f1df; color: #223e2a; }
.site-language-picker a:focus-visible, .site-language-picker summary:focus-visible { outline: 3px solid #367858; outline-offset: 2px; }
.nav { height: auto; min-height: 62px; padding-block: 10px; flex-wrap: wrap; }
.nav .brand { max-width: 100%; }
.nav a.lnk, .nav a.cta { white-space: normal; }
.grid, .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.two, .videos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.card, .box, .step, .note, .vcard { min-width: 0; }
.site-hero-heading { margin: 0 auto 16px; max-width: 760px; color: #26303a; font-size: clamp(25px, 4vw, 36px); line-height: 1.3; font-weight: 800; }
.site-media-note { margin: 8px auto 24px; max-width: 760px; color: #56646c; font-size: 13px; line-height: 1.7; text-align: center; }
.site-brand-banner { display: flex; align-items: center; justify-content: center; gap: clamp(16px, 4vw, 54px); aspect-ratio: 1488 / 724; padding: clamp(20px, 4vw, 50px); background: radial-gradient(ellipse at 100% 0, #ecf3d6 0, #f8faef 25%, #fff 62%); }
.site-brand-banner > img { width: 28%; max-width: 240px; height: auto; flex-shrink: 0; border-radius: 16%; }
.site-brand-wording { min-width: 0; text-align: start; }
.site-brand-name { display: block; font-size: clamp(22px, 4.8vw, 52px); font-weight: 800; line-height: 1.2; color: #202322; letter-spacing: -.035em; }
.site-brand-tagline { display: block; margin-top: 10px; font-size: clamp(13px, 2.1vw, 24px); font-weight: 650; line-height: 1.4; color: #667064; }
.site-language-picker nav { max-height: min(65vh, calc(100dvh - 190px), 460px); }
html[dir="rtl"] :is(ul, ol) { padding-left: 0; padding-right: 24px; }
html[dir="rtl"] :is(h1, h2, h3) { line-height: 1.5; letter-spacing: normal; }
html[lang="lo"] :is(h1, h2, h3, p, li, a), html[lang="th"] :is(h1, h2, h3) { line-height: 1.65; }
bdi { unicode-bidi: isolate; }
@media (max-width: 780px) { .grid, .steps, .two, .videos { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 640px) {
  .site-language-inner { padding-inline: 18px; }
  .site-language-picker nav { grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(360px, calc(100vw - 36px)); }
  .nav .brand { font-size: 14px; gap: 7px; }
  .nav .brand img { flex: 0 0 25px; width: 25px; height: 25px; }
  .nav a.cta { font-size: 13px; max-width: 45%; text-align: center; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }