/* =========================================================================
   ONE BOOST — nav.css
   Sticky navbar, logo, language button, mobile toggle,
   scroll-progress bar, back-to-top button.
   ========================================================================= */

/* Scroll progress */
.scroll-progress {
  position: fixed; top: 0; inset-inline-start: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--red-deep), var(--red-bright));
  box-shadow: 0 0 12px var(--glow); z-index: 60; transition: width .1s linear;
}

/* Navbar */
.nav {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: blur(14px);
  background: color-mix(in srgb, var(--bg) 72%, transparent);
  border-bottom: 1px solid transparent;
  transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.nav.scrolled {
  border-bottom-color: var(--line);
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  box-shadow: 0 10px 30px -18px rgba(0,0,0,.9);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.nav-links { display: flex; align-items: center; gap: 24px; }
.nav-links a { position: relative; color: var(--text-2); font-size: 15px; font-weight: 600; transition: color .18s; }
.nav-links a::after {
  content: ""; position: absolute; inset-inline-start: 0; bottom: -6px; height: 2px; width: 0;
  background: var(--red); border-radius: 2px; transition: width .25s var(--ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { width: 100%; }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* Logo */
.logo { display: inline-flex; align-items: center; gap: 11px; }
.logo-mark { width: 36px; height: 36px; flex: none; object-fit: contain; }
.logo-word { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: .5px; color: var(--text); white-space: nowrap; }
.logo-word b { color: var(--red-ink); }

/* Language toggle */
.lang-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--surface-2); border: 1px solid var(--line-2); color: var(--text-2);
  border-radius: 999px; padding: 8px 14px; font-size: 13.5px; font-weight: 700;
  cursor: pointer; transition: border-color .18s, color .18s, transform .18s;
}
.lang-btn:hover { border-color: var(--red); color: var(--text); transform: translateY(-1px); }
.nav-toggle { display: none; background: none; border: 0; color: var(--text); cursor: pointer; }

/* Back to top */
.to-top {
  position: fixed; bottom: 26px; inset-inline-end: 26px; z-index: 55;
  width: 46px; height: 46px; border-radius: 13px; cursor: pointer;
  background: linear-gradient(180deg, var(--red-bright), var(--red)); border: 0; color: #fff;
  display: grid; place-items: center; box-shadow: 0 12px 30px -8px var(--glow);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .3s, transform .3s var(--ease), visibility .3s;
}
.to-top.show { opacity: 1; visibility: visible; transform: none; }
.to-top:hover { transform: translateY(-3px); }
.to-top svg { width: 22px; height: 22px; }

/* Collapse the (now 6-item) nav into a hamburger earlier so it never crowds.
   Placed at the end so it overrides the base `.nav-toggle { display:none }`. */
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  .nav-links.open { display: flex; position: absolute; top: 70px; inset-inline: 0; flex-direction: column; gap: 0; background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 8px 24px 18px; }
  .nav-links.open a { padding: 12px 0; border-bottom: 1px solid var(--line); }
  .nav-links.open a::after { display: none; }
}