/* ─────────────────────────────────────────────────────────────────
   site-nav.css — Shared navigation for all language pages
   Mirrors the EN Navbar.tsx visually. Used by 8 static HTML pages.
   ───────────────────────────────────────────────────────────────── */

/* ── HEADER ─────────────────────────────────────────── */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #000;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  transition: background 0.3s, backdrop-filter 0.3s;
}
.site-header.transparent {
  background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent);
  border-bottom: none;
}
.site-header.scrolled {
  background: rgba(0,0,0,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.header-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}

.header-logo { display: flex; align-items: center; flex-shrink: 0; text-decoration: none; }
.header-logo img { height: 64px; width: auto; object-fit: contain; display: block; }

.header-nav { display: none; align-items: center; gap: 32px; }
@media (min-width: 1024px) { .header-nav { display: flex; } }
.header-nav a, .header-nav button {
  color: rgba(255,255,255,0.8); font-size: 14px; font-weight: 500;
  text-decoration: none; transition: color 0.2s, text-decoration-color 0.2s;
  background: none; border: none; cursor: pointer;
  font-family: inherit; padding: 4px 0;
  text-underline-offset: 4px;
  text-decoration-thickness: 2px;
  text-decoration-color: #DBFF26;
}
.header-nav a:hover, .header-nav button:hover {
  color: #fff; text-decoration: underline;
}
.header-nav a.active { color: #fff; }

.header-actions { display: none; align-items: center; gap: 12px; }
@media (min-width: 1024px) { .header-actions { display: flex; } }

.lang-pill { display: flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 500; }
.lang-pill > span { color: rgba(255,255,255,0.3); }
.lang-pill a {
  padding: 4px 8px; border-radius: 4px;
  color: rgba(255,255,255,0.5); text-decoration: none;
  transition: color 0.2s;
}
.lang-pill a:hover { color: #DBFF26; }

.header-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 24px; border-radius: 999px;
  font-weight: 700; font-size: 14px;
  text-decoration: none; transition: all 0.2s;
  background: #DBFF26; color: #000;
  border: 1px solid #DBFF26;
  font-family: inherit;
}
.header-cta:hover { background: #c8eb1f; }
.site-header.transparent .header-cta {
  background: rgba(255,255,255,0.1); color: #fff;
  border-color: rgba(255,255,255,0.2);
  backdrop-filter: blur(8px);
}
.site-header.transparent .header-cta:hover {
  background: #DBFF26; color: #000; border-color: #DBFF26;
}
.site-header.transparent.scrolled .header-cta {
  background: #DBFF26; color: #000; border-color: #DBFF26;
}

.mobile-toggle {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; cursor: pointer;
  color: #fff; padding: 8px;
}
@media (min-width: 1024px) { .mobile-toggle { display: none; } }

/* ── MOBILE MENU ────────────────────────────────────── */
.mobile-menu {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.95); backdrop-filter: blur(20px);
  z-index: 2000;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 32px;
}
.mobile-menu.open { display: flex; }
.mobile-menu a, .mobile-menu button {
  color: rgba(255,255,255,0.9); font-size: 28px; font-weight: 300;
  text-decoration: none; font-family: 'Outfit', system-ui, sans-serif;
  letter-spacing: -0.01em;
  background: none; border: none; cursor: pointer;
  transition: color 0.2s;
}
.mobile-menu a:hover, .mobile-menu button:hover { color: #DBFF26; }
.mobile-menu a.active { color: #fff; }
.mobile-close {
  position: absolute; top: 20px; right: 20px;
  background: none; border: none; cursor: pointer;
  color: #fff; padding: 8px;
}
.mobile-lang {
  position: absolute; top: 20px; left: 20px;
  display: inline-flex; align-items: center;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px; overflow: hidden;
}
.mobile-lang a {
  padding: 6px 16px;
  font-size: 11px !important; font-weight: 600 !important;
  letter-spacing: 0.15em !important; text-transform: uppercase !important;
  color: rgba(255,255,255,0.4) !important;
  font-family: 'Outfit', system-ui, sans-serif !important;
  transition: color 0.2s, background 0.2s !important;
}
.mobile-lang a:hover {
  color: #fff !important;
  background: rgba(255,255,255,0.06) !important;
}
.mobile-lang .sep { color: rgba(255,255,255,0.15); font-size: 11px; }