/* Shared layout for the 24 static language editions. */
html { scroll-padding-top: 88px; }
body { overflow-wrap: anywhere; }
header { position: sticky; top: 0; z-index: 20; background: #fff; }
/* One header row; the native details control keeps keyboard support without a framework. */
.site-nav-actions { display:flex; align-items:center; gap:6px; flex:0 0 auto; }
.site-language-toolbar { display:flex; justify-content:flex-end; position:relative; margin:0 0 12px; }
.site-language-toolbar .site-language-picker { position:static; }
.site-language-picker { position:relative; margin:0; padding:0; border:0; border-radius:0; flex:0 0 auto; }
.site-language-picker summary { display:flex; align-items:center; justify-content:center; cursor:pointer; list-style:none; width:44px; height:44px; min-height:44px; margin:0; padding:0; border:0; border-radius:9px; color:var(--title,#34453b); background:transparent; line-height:1; }
.site-language-picker summary::-webkit-details-marker { display:none; }
.site-language-picker summary::after { content:none; }
.site-language-picker summary:hover, .site-language-picker[open] summary { background:#eef4e9; }
.site-language-picker summary svg { display:block; flex:0 0 auto; }
.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-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; } }

/* Keep Download and the globe together, including long translated navigation labels. */
header .nav { flex-wrap:nowrap; gap:12px; }
header .nav .brand { min-width:0; flex:0 1 auto; }
.site-nav-brand-text { min-width:0; line-height:1.25; }
header .nav a.lnk { min-width:0; flex:0 1 auto; text-align:center; }
header .nav .site-nav-actions > a { white-space:nowrap; max-width:none; }
.site-language-picker nav { text-align:start; }
.site-language-picker summary, .site-language-picker nav { box-sizing:border-box; }
.site-language-toolbar .site-language-picker nav { width:min(560px,100%); }
@media (max-width:640px) {
  header .nav { gap:8px; padding-inline:16px; }
  header .nav .spacer { display:none; }
  header .nav .brand { flex:1 1 auto; font-size:13px; gap:7px; }
  header .nav .brand img { width:25px; height:25px; flex:0 0 25px; }
  header .nav .site-nav-actions { gap:2px; }
  header .nav .site-nav-actions > a { font-size:12px; padding-inline:10px; }
  .site-language-picker nav { width:min(360px,calc(100vw - 48px)); }
}