/* ==========================================================================
   Fipron Canarias — i18n (language switcher + Arabic RTL + Ukrainian)
   Brand-consistent typography: the brand faces (Bebas Neue / Barlow /
   Barlow Condensed) are EXTENDED with Arabic + Cyrillic coverage via
   unicode-range, so all Latin text keeps the brand fonts in every language
   and only Arabic/Cyrillic glyphs fall back to a script face — per glyph.
   ========================================================================== */

/* ---------- Language switcher (desktop, inside #nav) ---------- */
.lang-switch{position:relative;display:flex;align-items:center;margin:0 .35rem;flex-shrink:0}
.lang-toggle{
  display:flex;align-items:center;gap:.4rem;cursor:pointer;
  font-family:'Barlow Condensed',sans-serif;font-size:.88rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:#B0B0C0;
  background:transparent;border:1px solid rgba(255,255,255,.16);
  padding:.5rem .7rem;line-height:1;transition:color .25s,border-color .25s;
}
.lang-toggle:hover,.lang-toggle[aria-expanded="true"]{color:#fff;border-color:rgba(255,255,255,.4)}
.lang-toggle svg{width:15px;height:15px;fill:currentColor;flex-shrink:0}
.lang-caret{font-size:.7rem;line-height:1;transition:transform .25s}
.lang-toggle[aria-expanded="true"] .lang-caret{transform:rotate(180deg)}
.lang-menu{
  position:absolute;top:calc(100% + .5rem);right:0;min-width:170px;
  list-style:none;margin:0;padding:.35rem;z-index:300;
  background:#010937;border:1px solid rgba(255,255,255,.12);
  box-shadow:0 18px 50px rgba(1,9,55,.5);
  opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .2s ease,transform .2s ease,visibility .2s;
}
.lang-switch.open .lang-menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang-menu li{margin:0}
.lang-menu button{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:1rem;
  background:transparent;border:none;cursor:pointer;text-align:left;
  font-family:'Barlow Condensed',sans-serif;font-size:.92rem;font-weight:600;
  letter-spacing:.06em;text-transform:uppercase;color:#B0B0C0;
  padding:.6rem .75rem;transition:background .2s,color .2s;
}
.lang-menu button:hover{background:rgba(192,0,0,.14);color:#fff}
.lang-menu button[aria-selected="true"]{color:#fff}
.lang-menu button .lang-native{font-family:'Barlow',sans-serif;font-weight:500;font-size:.9rem}
.lang-menu button .lang-check{color:#C00000;font-size:.9rem;opacity:0}
.lang-menu button[aria-selected="true"] .lang-check{opacity:1}

/* Hide desktop switcher on mobile (mobile menu carries its own) */
@media (max-width:900px){ .lang-switch{display:none} }

/* ---------- Language switcher (mobile, inside #mobileMenu) ---------- */
.mobile-lang{margin-top:1.6rem;padding-top:1.4rem;border-top:1px solid rgba(255,255,255,.12)}
.mobile-lang-label{
  font-family:'Barlow Condensed',sans-serif;font-size:.72rem;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#8888a0;margin-bottom:.7rem;
  display:flex;align-items:center;gap:.5rem;
}
.mobile-lang-label svg{width:14px;height:14px;fill:currentColor}
.mobile-lang-options{display:flex;flex-wrap:wrap;gap:.5rem}
.mobile-lang-options button{
  cursor:pointer;background:transparent;color:#B0B0C0;
  border:1px solid rgba(255,255,255,.18);
  font-family:'Barlow Condensed',sans-serif;font-size:.9rem;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;padding:.5rem .9rem;
  transition:background .2s,color .2s,border-color .2s;
}
.mobile-lang-options button[aria-selected="true"]{background:#C00000;color:#fff;border-color:#C00000}

/* ==========================================================================
   BRAND FONT EXTENSION — add Arabic (Cairo) + Cyrillic (Oswald/Roboto)
   coverage to the three brand families. Latin ranges are already served by
   the site's Google Fonts link; these only cover the non-Latin ranges.
   ========================================================================== */
/* Arabic */
@font-face{font-family:'Bebas Neue';src:url('fonts/cairo-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'Barlow';src:url('fonts/cairo-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
@font-face{font-family:'Barlow Condensed';src:url('fonts/cairo-arabic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0600-06FF,U+0750-077F,U+0870-089F,U+08A0-08FF,U+FB50-FDFF,U+FE70-FEFF,U+200C-200E,U+2010-2011,U+204F,U+2E41}
/* Cyrillic — Oswald (condensed) for display families, Roboto for body */
@font-face{font-family:'Bebas Neue';src:url('fonts/oswald-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow Condensed';src:url('fonts/oswald-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Barlow';src:url('fonts/roboto-cyrillic.woff2') format('woff2');font-weight:100 900;font-display:swap;unicode-range:U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ==========================================================================
   ARABIC (lang="ar") — letter-spacing and uppercase must not apply to the
   cursive Arabic script (it breaks letter joining). Brand wordmarks are
   Latin, so they KEEP their tracking + caps.
   ========================================================================== */
html[lang="ar"] *{letter-spacing:normal !important}
html[lang="ar"] .nav-logo-name{letter-spacing:.08em !important}
html[lang="ar"] .footer-logo,html[lang="ar"] .footer-logo a{letter-spacing:.1em !important}

/* ==========================================================================
   NAV FIT — concise per-language nav labels are set in i18n.js
   (applyNavLabels), so the nav wording stays short like English while page
   headings keep their full translations. Here we just keep each on one line.
   ========================================================================== */
html[lang="uk"] .nav-links a,html[lang="ar"] .nav-links a,
html[lang="uk"] .nav-btn,html[lang="ar"] .nav-btn,
html[lang="uk"] .mobile-menu ul li a,html[lang="ar"] .mobile-menu ul li a{white-space:nowrap}
/* fit the desktop bar: drop the Latin tracking on Cyrillic + tighten gutters (no font shrink) */
html[lang="uk"] .nav-links a{letter-spacing:normal}
html[lang="uk"] .nav-links a,html[lang="ar"] .nav-links a{padding-left:.4rem;padding-right:.4rem}
html[lang="uk"] .nav-links,html[lang="ar"] .nav-links{gap:0;margin-right:.5rem}
html[lang="uk"] .lang-switch,html[lang="ar"] .lang-switch{margin-left:0;margin-right:0}
html[lang="uk"] #nav,html[lang="ar"] #nav{padding-left:1.1rem;padding-right:1.1rem}

/* ==========================================================================
   RTL — applies only when dir="rtl" (Arabic). Mirrors reading direction
   while keeping the existing design intact.
   ========================================================================== */
html[dir="rtl"] body{text-align:right}
html[dir="rtl"] .nav-logo{margin-right:0;margin-left:auto}
html[dir="rtl"] .nav-links{margin-right:0;margin-left:1.1rem}
html[dir="rtl"] .lang-menu{right:auto;left:0}
html[dir="rtl"] .lang-menu button{text-align:right}
html[dir="rtl"] .hero-list li,
html[dir="rtl"] .activities-list li,
html[dir="rtl"] .checklist li,
html[dir="rtl"] .prose li,
html[dir="rtl"] .sources li{padding-left:0;padding-right:1.7rem}
html[dir="rtl"] .hero-list li::before,
html[dir="rtl"] .activities-list li::before,
html[dir="rtl"] .checklist li::before,
html[dir="rtl"] .prose li::before,
html[dir="rtl"] .sources li::before{left:auto;right:0}
html[dir="rtl"] .cp-list li strong{margin-right:0;margin-left:.2rem}
html[dir="rtl"] .compare-table td .tick,
html[dir="rtl"] .compare-table td .cross{margin-right:0;margin-left:.3rem}
html[dir="rtl"] .founder-card,
html[dir="rtl"] .partners-block{border-left:none;border-right:4px solid var(--red,#C00000)}
html[dir="rtl"] .statement{border-left:none;border-right:4px solid var(--red,#C00000);padding-left:0;padding-right:1.5rem}
html[dir="rtl"] .chip,
html[dir="rtl"] .section:not(.section-navy) .chip{border-left:none;border-right:3px solid var(--red,#C00000)}
html[dir="rtl"] .stat-card{border-right:none;border-left:1px solid rgba(255,255,255,.06)}
html[dir="rtl"] .stat-card:last-child{border-left:none}
html[dir="rtl"] .stat{border-right:none;border-left:1px solid rgba(255,255,255,.14)}
html[dir="rtl"] .stat:last-child{border-left:none}
html[dir="rtl"] .compare-table thead tr th,
html[dir="rtl"] .compare-table tbody td{text-align:right}
html[dir="rtl"] .compare-table thead tr th:first-child,
html[dir="rtl"] .compare-table tbody td:first-child{border-right:none;border-left:1px solid rgba(255,255,255,.06)}
html[dir="rtl"] .spec-table th,
html[dir="rtl"] .spec-table td,
html[dir="rtl"] .fc-table th,
html[dir="rtl"] .factstat{text-align:right}
html[dir="rtl"] .fc-table th:first-child,
html[dir="rtl"] .fc-class{border-left:none;border-right:4px solid var(--red,#C00000)}
html[dir="rtl"] .factstat{border-top:3px solid var(--red,#C00000)}
html[dir="rtl"] .bar-label{text-align:left}
html[dir="rtl"] .bar-val{text-align:right}
html[dir="rtl"] .products-note{text-align:left}
html[dir="rtl"] .mobile-menu{text-align:right}
html[dir="rtl"] .mobile-lang-label{flex-direction:row}
html[dir="rtl"] .stat-card,
html[dir="rtl"] .stat,
html[dir="rtl"] .cta-band,
html[dir="rtl"] .about-numbers-label,
html[dir="rtl"] .world-caption,
html[dir="rtl"] .ticker-item{text-align:center}