/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border-hair);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  height: 72px; gap: 16px;
}

/* Logo */
.logo { display: inline-flex; align-items: center; flex: none; }
.logo__svg { height: 30px; width: auto; display: block; }
.logo__svg .cls-3 { fill: var(--logo-red, #e30427); }
.logo__svg .cls-2 { fill: var(--logo-2, #6b6a6a); }
.logo__svg .cls-1 { isolation: isolate; }

.logo .logo__svg--compact { display: none; }
@media (max-width: 960px) {
  .logo .logo__svg--full { display: none; }
  .logo .logo__svg--compact { display: block; height: 40px; }
}
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link — visible only when focused via keyboard */
.skip-link {
  position: absolute; left: 16px; top: -60px; z-index: 100;
  padding: 10px 18px; border-radius: 8px;
  background: var(--blue); color: #fff; font-weight: 600;
  transition: top .15s ease;
}
.skip-link:focus { top: 16px; }

/* Nav */
.main-nav { display: flex; align-items: center; gap: 4px; }
.main-nav a {
  padding: 7.5px 12px;
  font-size: 15px; font-weight: 500; line-height: 21px;
  white-space: nowrap;
  border-radius: 8px;
  transition: color .15s, background .15s;
}
.main-nav a:hover { color: var(--red); }
.main-nav a.is-active { color: var(--red); }

/* Actions */
.site-header__actions { display: flex; align-items: center; gap: 12px; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--gray-6b);
  transition: background .15s, color .15s, transform .2s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { background: var(--border-hair); color: var(--red); }

.theme-toggle__sun { display: none; }
[data-theme="dark"] .theme-toggle__moon { display: none; }
[data-theme="dark"] .theme-toggle__sun { display: block; }

/* Language dropdown */
.lang-switch { position: relative; display: inline-flex; }
.lang-switch__btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px; border-radius: 8px;
  color: var(--gray-6b); font-size: 14px; font-weight: 500;
  cursor: pointer; transition: background .15s, color .15s;
}
.lang-switch__btn svg { width: 16px; height: 16px; }
.lang-switch__btn:hover { color: var(--red); }

.lang-switch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  min-width: 184px; margin: 0; padding: 6px; list-style: none;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-md);
  opacity: 0; transform: translateY(-6px); visibility: hidden; pointer-events: none;
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
/* Desktop: open on hover (bridge keeps hover across the gap) */
.lang-switch::after { content: ""; position: absolute; top: 100%; right: 0; width: 100%; height: 10px; }
.lang-switch:hover .lang-switch__menu,
.lang-switch:focus-within .lang-switch__menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; }
.lang-switch__opt {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 8px;
  font-size: 15px; color: var(--text);
}
.lang-switch__opt:hover { background: var(--border-hair); }
.lang-switch__code { width: 22px; flex: none; font-size: 12px; font-weight: 700; color: var(--text-mute); }
.lang-switch__name { font-weight: 500; }
.lang-switch__opt.is-active .lang-switch__code { color: var(--red); }
.lang-switch__opt.is-active .lang-switch__name { font-weight: 700; color: var(--heading); }

.nav-toggle { display: none; width: 40px; height: 40px; flex-direction: column; gap: 5px; align-items: center; justify-content: center; }
.nav-toggle span { width: 22px; height: 2px; background: var(--text); border-radius: 2px; transition: .2s; }

/* Menu controls */
.nav__controls {
  display: none; flex-direction: column; gap: 16px;
  margin-top: 8px; padding-top: 16px;
  border-top: 1px solid var(--border-hair);
}
.theme-toggle__label { display: none; }
.nav__controls .nav__cta  { margin-top: 2px; font-size: 12px; }

/* Mobile language pills */
.nav__lang { display: flex; flex-direction: column; gap: 10px; }
.nav__lang-label {
  font-size: 12px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--text-mute);
}
.nav__lang-row { display: flex; align-items: center; gap: 8px; }
.nav__lang-row .lang-pill {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; padding: 9px 14px; border-radius: 8px;
  background: var(--surface-muted); color: var(--text);
  font-size: 14px; font-weight: 600;
  transition: background .15s, color .15s;
}
.nav__lang-row .lang-pill:hover { background: var(--border-hair); color: var(--text); }
.nav__lang-row .lang-pill.is-active { background: var(--blue); color: #fff; }
.nav__theme { margin-left: auto; }

/* Hamburger → X */
.nav-toggle span { transition: transform .25s ease, opacity .2s ease; transform-origin: center; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu open animation */
.main-nav.is-open {
  border-radius: 0 0 16px 16px;
  transform-origin: top center;
  animation: navDrop .26s cubic-bezier(.2, .8, .2, 1) both;
}
@keyframes navDrop { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.main-nav.is-open > a,
.main-nav.is-open .nav__controls { animation: navItem .32s ease both; }
.main-nav.is-open > *:nth-child(1) { animation-delay: .05s; }
.main-nav.is-open > *:nth-child(2) { animation-delay: .09s; }
.main-nav.is-open > *:nth-child(3) { animation-delay: .13s; }
.main-nav.is-open > *:nth-child(4) { animation-delay: .17s; }
.main-nav.is-open > *:nth-child(5) { animation-delay: .21s; }
.main-nav.is-open > *:nth-child(6) { animation-delay: .25s; }
@keyframes navItem { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .main-nav.is-open,
  .main-nav.is-open > a,
  .main-nav.is-open .nav__controls { animation: none; }
  .nav-toggle span { transition: none; }
}