/* ============================================================
   Language switcher + layout tolerances for translated pages.
   Loaded only under /es/ /pt/ /ar/ /ru/ /de/ /ja/ /ko/.
   Uses the tokens already defined in the page's own stylesheet.
   ============================================================ */

/* --- switcher ------------------------------------------------
   It rides in .topbar__list, which hides everything after the
   first item on small screens; the switcher is the exception. */
.topbar__list li.langsw-item { display: block; }

.langsw { position: relative; display: inline-flex; }

.langsw__btn {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 0.25rem 0.5rem;
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--brand-200);
  font-family: inherit;
  font-size: var(--fs-xs);
  letter-spacing: 0.01em;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--t-base) var(--ease), background var(--t-base) var(--ease);
}
.langsw__btn svg { width: 1em; height: 1em; flex: none; }
.langsw__btn:hover,
.langsw__btn:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }

.langsw__menu {
  position: absolute;
  top: 100%;
  right: 0;
  z-index: var(--z-menu);
  min-width: 10rem;
  margin: 0;
  padding: var(--sp-1) 0;
  list-style: none;
  background: var(--paper);
  border: var(--bw) solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--sh-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity var(--t-base) var(--ease), transform var(--t-base) var(--ease),
              visibility 0s linear var(--t-base);
}
.langsw:hover .langsw__menu,
.langsw:focus-within .langsw__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition-delay: 0s;
}
.langsw__menu li { margin: 0; }
.langsw__menu a {
  display: block;
  padding: 0.4rem 0.9rem;
  color: var(--c-text);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.langsw__menu a:hover,
.langsw__menu a:focus-visible { background: var(--brand-100); color: var(--c-accent); }
.langsw__menu a[aria-current="true"] { font-weight: var(--fw-semi); color: var(--c-accent); }

/* Touch devices get no hover, so the menu opens on focus only. */
@media (hover: none) {
  .langsw__menu { transition: none; }
}

/* --- long translated labels ---------------------------------
   "Request A Quote" becomes "Angebot anfordern" / "Запросить
   коммерческое предложение", which overflows a header sized for
   the English original. Tighten it through the range where the
   single row stops fitting. */
@media (min-width: 900px) and (max-width: 1240px) {
  .site-header__in { gap: var(--sp-3); }
  .nav__list { gap: 0; }
  .nav__link { padding: 0.6rem 0.45rem; font-size: var(--fs-xs); }
  .header__cta { padding: 0.55rem 0.8rem; font-size: var(--fs-2xs); }
  .brand img { height: 38px; width: auto; }
}
@media (min-width: 1241px) and (max-width: 1420px) {
  .nav__list { gap: 0; }
  .nav__link { padding: 0.62rem 0.55rem; }
}

/* The topbar now carries contact details and the switcher. */
.topbar__in { flex-wrap: wrap; row-gap: var(--sp-2); }
.topbar__list { flex-wrap: wrap; }

/* German and Russian compounds must not punch out of cards,
   mega-menu columns or table cells. */
.mega__name, .mega__cats a, .card h3, .card p, .tile h3, .tile p,
.spec-table th, .spec-table td, .faq summary, .chip, .crumbs li {
  overflow-wrap: break-word;
}

/* Longer headlines need a lower starting size before the
   responsive steps take over. */
.hero__body h1 { font-size: clamp(1.9rem, 4.2vw, var(--fs-5xl)); }
.page-hero h1 { max-width: 24ch; }

/* CJK reads better with looser leading and no tracking. */
:root:lang(ja), :root:lang(ko) { --lh-normal: 1.85; --ls-tight: 0; --ls-wide: 0.02em; }
:lang(ja) h1, :lang(ja) h2, :lang(ko) h1, :lang(ko) h2 { line-height: 1.3; }
:lang(ja) .btn, :lang(ko) .btn { text-transform: none; }

/* cify-nav-bullets-fix-20260924 */
nav ul, .nav ul, .nav-list, .nav-ul, .nav__list, ul.nav {
  list-style: none;
}
.nav-list {
  list-style: none;
  position: relative;
}
nav li, .nav li, .nav-list > li, .nav-ul > li, .nav__list > li, ul.nav > li {
  list-style: none;
}
.nav-list > li {
  list-style: none;
  margin: 0;
}

/* cify-langsw-navrow-fix-20260924 */
header{position:relative;z-index:50}
.nav-row,.header-row,.header__inner{display:flex;align-items:center;gap:16px;flex-wrap:nowrap}
.langsw{position:relative;flex:0 0 auto;margin-inline-start:0}
.langsw__menu{list-style:none;padding-left:0;z-index:200;inset-inline-end:0;inset-inline-start:auto}

/* cify-langsw-flash-fix-20260924 */
.langsw__menu{top:calc(100% + .35rem)!important;z-index:300!important}
.langsw__menu::before{content:"";position:absolute;left:0;right:0;bottom:100%;height:.55rem}
.langsw:hover .langsw__menu,.langsw:focus-within .langsw__menu,.langsw.is-open .langsw__menu,.langsw__btn[aria-expanded="true"]+.langsw__menu{display:block!important}
/* cify-langsw-pretty-20260924 */
.site-header,.site-header .header__inner,.header__inner,.nav-row,.header-row,
.header__row,.header-inner,.header__in,.header__bar,.site-header__in,.head-row,.navrow,
.hdr-bar,.hdr-shell,.wrap.hdr,.wrap.head-row,.wrap.header__bar,.wrap.hdr-shell{overflow:visible!important}
.header__inner,.nav-row,.header-row,.header__row,.header-inner,.header__in,.header__bar,
.site-header__in,.head-row,.navrow,.hdr-bar,.hdr-shell,.wrap.hdr,.wrap.head-row,
.wrap.header__bar,.wrap.hdr-shell{
  display:flex!important;
  align-items:center!important;
  flex-wrap:nowrap!important;
}
.header__inner{height:var(--header-h,76px);gap:var(--sp-6,1.5rem)}
.header__inner > .nav,.nav-row > .nav,.header-row > .nav,.header__inner .nav,
.nav-row .nav,.header-row .nav{
  min-width:0;
  flex:1 1 auto;
}
.langsw{
  position:relative;
  flex:0 0 auto!important;
  flex-shrink:0!important;
  margin-inline-start:.5rem;
  z-index:80;
  font-size:.8125rem;
  order:initial;
}
.langsw__btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  padding:.45rem .9rem .45rem .75rem;
  border:1px solid var(--line,#e2e8e5);
  border-radius:999px;
  background:var(--bg-soft,#f6f9f7);
  color:var(--ink,#14201b);
  cursor:pointer;
  font:inherit;
  font-weight:600;
  line-height:1.2;
  box-shadow:var(--sh-1,0 1px 2px rgba(16,32,26,.06));
  transition:background .15s ease,border-color .15s ease,box-shadow .15s ease,color .15s ease;
  white-space:nowrap;
}
.langsw__btn:hover,
.langsw.is-open .langsw__btn,
.langsw__btn[aria-expanded="true"]{
  background:var(--brand-light,#e8f2ed);
  border-color:var(--brand-mid,#2f7f65);
  color:var(--brand-dark,#14402f);
  box-shadow:var(--sh-2,0 4px 16px rgba(16,32,26,.08));
}
.langsw__btn::after{
  content:"";
  width:.35em;height:.35em;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(45deg);
  margin-block-end:.15em;
  opacity:.7;
  transition:transform .15s ease;
}
.langsw.is-open .langsw__btn::after,
.langsw__btn[aria-expanded="true"]::after{
  transform:rotate(225deg);
  margin-block-end:-.1em;
}
.langsw__menu{
  position:absolute;
  inset-inline-end:0!important;
  inset-inline-start:auto!important;
  top:100%!important;
  z-index:300!important;
  min-width:12rem;
  margin:0;
  padding:.4rem;
  list-style:none!important;
  padding-left:.4rem!important;
  border-radius:12px;
  background:#fff;
  border:1px solid var(--line,#e2e8e5);
  box-shadow:0 16px 40px rgba(16,32,26,.16);
  display:none;
}
.langsw__menu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  bottom:100%;
  height:.55rem;
}
.langsw:hover .langsw__menu,
.langsw:focus-within .langsw__menu,
.langsw.is-open .langsw__menu,
.langsw__btn[aria-expanded="true"]+.langsw__menu{display:block!important}
.langsw__menu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.75rem;
  padding:.55rem .75rem;
  border-radius:8px;
  color:var(--ink,#14201b);
  text-decoration:none;
  white-space:nowrap;
  font-weight:500;
  transition:background .12s ease,color .12s ease;
}
.langsw__menu a:hover,
.langsw__menu a:focus-visible{
  background:var(--brand-light,#e8f2ed);
  color:var(--brand-dark,#14402f);
}
.langsw__menu a[aria-current="true"]{
  font-weight:700;
  background:var(--brand-light,#e8f2ed);
  color:var(--brand,#1f5f4b);
}
.langsw__menu a[aria-current="true"]::after{
  content:"✓";
  font-size:.85em;
  color:var(--brand,#1f5f4b);
}
@media (max-width:768px){
  .langsw{margin-inline-start:.25rem}
  .langsw__menu{inset-inline-end:0!important;inset-inline-start:auto!important;min-width:11rem}
}
[dir="rtl"] .langsw__menu{inset-inline-end:0!important;inset-inline-start:auto!important}