/* css/nav.css */
@import url("https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;700&display=swap");

:root {
  --nav-h: 74px;
  --nav-bg: rgba(5, 43, 21, 0.62);
  --nav-border: rgba(255, 255, 255, 0.14);
  --nav-ink: rgba(255, 255, 255, 0.92);
  --nav-ink-strong: rgba(255, 255, 255, 0.98);

  /* Typography */
  --nav-font: "Roboto Slab", serif;
  --nav-font-size: 16px;
}

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-h);
  z-index: 1000;

  display: flex;
  align-items: center;

  /* Lock nav typography regardless of global styles */
  font-family: var(--nav-font);
  font-size: var(--nav-font-size);

  background: transparent;
  transition: transform 220ms ease, background 220ms ease, backdrop-filter 220ms ease;
}

/* Extra lock (safe) */
.nav,
.nav * {
  font-family: var(--nav-font);
}

.nav.nav--scrolled {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
}

.nav.nav--hidden {
  transform: translateY(-110%);
}

.nav__inner {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 clamp(18px, 4vw, 80px);

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav__brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--nav-ink-strong);
  min-width: 0;
}

.nav__logo {
  width: 34px;
  height: auto;
  display: block;
}

.nav__name {
  font-weight: 700;
  white-space: nowrap;
}

/* =========================================================
   Desktop links + Underline tracker
========================================================= */
.nav__links {
  position: relative;

  display: flex;
  align-items: center;
  gap: 18px;
  list-style: none;
  margin: 0;
  padding: 0;

  /* ensures underline color is stable */
  color: var(--nav-ink);
}

.nav__link a {
  color: var(--nav-ink);
  text-decoration: none;
  font-weight: 700;

  /* no pills */
  padding: 0;
  border-radius: 0;
  background: transparent;

  /* underline spacing */
  display: inline-block;
  padding-bottom: 10px;
}

/* Hover: use opacity shift (NOT text underline, so it won't clash) */
.nav__link a:hover {
  opacity: 0.92;
}

/* Active link (set by JS) */
.nav__link a.is-active {
  color: var(--nav-ink-strong);
  opacity: 1;
}

/* The animated underline */
.nav__underline {
  position: absolute;
  left: 0;
  bottom: 2px;

  height: 2px;
  width: 0;
  transform: translateX(0);

  /* always matches nav white (or change to var(--gold) if you want) */
  background: var(--nav-ink-strong);

  opacity: 0.9;
  border-radius: 999px;

  transition: transform 260ms ease, width 260ms ease, opacity 220ms ease;
  will-change: transform, width;
}

/* =========================================================
   Burger
========================================================= */
.nav__burger {
  display: none;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--nav-ink-strong);
  cursor: pointer;
}

.nav__burger-lines {
  display: inline-block;
  width: 24px;
  height: 2px;
  background: currentColor;
  position: relative;
}

.nav__burger-lines::before,
.nav__burger-lines::after {
  content: "";
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: currentColor;
}

.nav__burger-lines::before {
  top: -7px;
}
.nav__burger-lines::after {
  top: 7px;
}

/* =========================================================
   Drawer
========================================================= */
.nav__drawer {
  position: fixed;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(460px, 92vw);
  padding: 28px clamp(18px, 4vw, 44px);
  background: rgba(5, 43, 21, 0.96);
  transform: translateX(110%);
  transition: transform 240ms ease;
  z-index: 1001;
}

/* Full-screen on mobile */
@media (max-width: 980px) {
  .nav__drawer {
    left: 0;
    right: 0;
    width: 100vw;
  }
}

.nav--drawer-open .nav__drawer {
  transform: translateX(0);
}

.nav__drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.nav__drawer-title {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-weight: 700;
}

.nav__drawer-close {
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--nav-ink-strong);
  cursor: pointer;
  font-size: 22px;
}

/* Drawer links: paragraph breaks */
.nav__drawer-links {
  display: block;
  margin: 22px 0 0;
  padding: 0;
}

.nav__drawer-links li {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  line-height: normal;
}

.nav__drawer-links a {
  display: inline-block;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;

  color: var(--nav-ink-strong);
  text-decoration: none;
  font-weight: 700;
  font-size: clamp(1.6rem, 4.8vw, 2.4rem);
  line-height: normal;
}

.nav__drawer-links a:hover {
  opacity: 0.92;
}

/* =========================================================
   Responsive rules
========================================================= */

/* Desktop: show links, hide burger */
@media (min-width: 981px) {
  .nav__burger {
    display: none;
  }
}

/* Mobile: hide links, show burger */
@media (max-width: 980px) {
  .nav__links {
    display: none;
  }
  .nav__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}

/* Desktop “compact” mode: burger replaces links when scrolling up */
.nav--compact .nav__links {
  display: none;
}
.nav--compact .nav__burger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Utility: pad the page so fixed nav doesn't cover content */
.page {
  padding-top: var(--nav-h);
}