/* ==========================================================================
   i18n layer — language switcher, non-Latin typography, RTL adjustments.
   Loaded after styles.css on every localized page.
   ========================================================================== */

/* ---------- Language switcher ---------- */
.lang{
  position:relative;flex-shrink:0;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.lang > summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:7px;
  padding:8px 10px;border:1px solid var(--rule-3);color:var(--ink);
  transition:border-color .25s var(--ease),color .25s var(--ease);
}
.lang > summary::-webkit-details-marker{display:none}
.lang > summary:hover{border-color:var(--ink)}
.lang > summary::after{
  content:'';width:5px;height:5px;margin-top:-3px;
  border-right:1px solid currentColor;border-bottom:1px solid currentColor;
  transform:rotate(45deg);
}
.lang[open] > summary{border-color:var(--ink)}
.lang-menu{
  position:absolute;top:calc(100% + 7px);right:0;z-index:80;
  min-width:164px;padding:6px;
  background:var(--white);border:1px solid var(--rule-2);
  display:flex;flex-direction:column;
}
.lang-menu a{
  padding:8px 10px;font-size:11px;letter-spacing:.04em;text-transform:none;
  color:var(--ink-2);white-space:nowrap;
  transition:background .2s var(--ease),color .2s var(--ease);
}
.lang-menu a:hover{background:var(--paper-2);color:var(--ink)}
.lang-menu a.on{color:var(--red)}
.lang-menu a.on::before{content:'· ';font-weight:700}

/* Over the transparent hero nav */
.nav:not(.scrolled):not(.menu-open) .lang > summary{color:#fff;border-color:rgba(255,255,255,.28)}
.nav:not(.scrolled):not(.menu-open) .lang > summary:hover{border-color:#fff}

/* ---------- Non-Latin type stacks ---------- */
html[lang="ru"]{
  --sans:'IBM Plex Sans','Archivo',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
html[lang="ar"]{
  --sans:'IBM Plex Sans Arabic','IBM Plex Sans',-apple-system,BlinkMacSystemFont,sans-serif;
}

/* Cyrillic runs slightly wider — ease the display sizes a touch */
html[lang="ru"] .hero-title{font-size:clamp(40px,5.2vw,80px);letter-spacing:-.03em}
html[lang="ru"] .section-title{letter-spacing:-.025em}

/* Arabic has no case and must not be letter-spaced */
html[lang="ar"] body,
html[lang="ar"] .section-title,
html[lang="ar"] .hero-title,
html[lang="ar"] .entry-card h3,
html[lang="ar"] .custom-body h3,
html[lang="ar"] .door-body h4{
  letter-spacing:0;
}
html[lang="ar"] .section-tag,
html[lang="ar"] .entry-num,
html[lang="ar"] .entry-go,
html[lang="ar"] .door-go,
html[lang="ar"] .more-link,
html[lang="ar"] .lang,
html[lang="ar"] .nav-link,
html[lang="ar"] .nav-cta,
html[lang="ar"] .btn,
html[lang="ar"] .brand-index-head,
html[lang="ar"] .cert-code{
  letter-spacing:0;
  text-transform:none;
}
html[lang="ar"] body{line-height:1.75}
html[lang="ar"] .hero-title{font-size:clamp(34px,4.6vw,68px);line-height:1.25}
html[lang="ar"] .section-title{line-height:1.3}
html[lang="ar"] .section-desc,
html[lang="ar"] .about-text p,
html[lang="ar"] .custom-body p,
html[lang="ar"] .faq-a-inner{line-height:1.95}
html[lang="ar"] .brand-index p{
  font-family:var(--sans);font-size:12.5px;line-height:2.1;
}

/* ---------- RTL ---------- */
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .brand-note{border-left:none;border-right:2px solid var(--red)}
html[dir="rtl"] .entry-card::after{left:auto;right:-1px}
html[dir="rtl"] .entry-go span,
html[dir="rtl"] .door-go span,
html[dir="rtl"] .more-link span{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .entry-card:hover .entry-go span,
html[dir="rtl"] .door-card:hover .door-go span,
html[dir="rtl"] .more-link:hover span{transform:scaleX(-1) translateX(-4px)}
html[dir="rtl"] .custom-btn span{display:inline-block;transform:scaleX(-1)}
html[dir="rtl"] .nav-progress{transform-origin:right center}
html[dir="rtl"] .faq-icon{margin-left:0;margin-right:auto}
html[dir="rtl"] .quote-form .form-field label{left:auto;right:0;transform-origin:right top}
html[dir="rtl"] .form-field input,
html[dir="rtl"] .form-field select,
html[dir="rtl"] .form-field textarea{text-align:right}
html[dir="rtl"] .footer-col a,
html[dir="rtl"] .footer-col h4{text-align:right}

/* A list of Latin brand names reads left-to-right even inside an RTL page */
html[dir="rtl"] .brand-index p{direction:ltr;text-align:left}
html[dir="rtl"] .factory-media-label{left:auto;right:14px}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .lang > summary{padding:7px 8px;font-size:9.5px}
  .lang-menu{min-width:150px}
}