/* ============================================================
   components/header.css — Navigation
   ============================================================ */

nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  padding:22px 52px;
  display:flex; align-items:center; justify-content:space-between;
  transition:all .35s;
}
nav.scrolled {
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(20px);
  padding:14px 52px;
  box-shadow:0 1px 0 rgba(22,163,74,.1), 0 4px 24px rgba(0,0,0,.06);
}
.nav-logo {
  font-family:var(--serif);
  font-size:1.1rem; font-weight:700;
  color:var(--green-deep);
  text-decoration:none;
  display:flex; flex-direction:column; gap:1px;
}
.nav-logo span {
  font-family:var(--sans);
  font-size:.58rem; font-weight:400;
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--ink-dim);
}
.nav-links { display:flex; gap:36px; list-style:none; }
.nav-links a {
  font-size:.78rem; font-weight:500; letter-spacing:.06em;
  color:var(--ink-mid); text-decoration:none;
  transition:color var(--transition);
  position:relative; padding-bottom:3px;
}
.nav-links a::after {
  content:''; position:absolute; bottom:0; left:0; right:0;
  height:2px; background:var(--green); border-radius:1px;
  transform:scaleX(0); transform-origin:left;
  transition:transform .3s ease;
}
.nav-links a:hover,
.nav-links a.active { color:var(--green); }
.nav-links a:hover::after,
.nav-links a.active::after { transform:scaleX(1); }

/* Hero-page nav (transparent bg) */
.page-home nav:not(.scrolled) .nav-logo { color:#fff; }
.page-home nav:not(.scrolled) .nav-logo span { color:rgba(255,255,255,.6); }
.page-home nav:not(.scrolled) .nav-links a { color:rgba(255,255,255,.8); }
.page-home nav:not(.scrolled) .nav-links a:hover { color:#fff; }
.page-home nav:not(.scrolled) .nav-links a::after { background:#fff; }

/* Hamburger */
.hamburger {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; padding:6px; cursor:pointer;
}
.hamburger span { width:24px; height:2px; background:var(--green-deep); border-radius:2px; display:block; transition:all .3s; }

/* Mobile Menu */
@media(max-width:960px) {
  nav { padding:18px 24px; }
  nav.scrolled { padding:12px 24px; }
  .hamburger { display:flex; }
  .nav-links {
    position:fixed; inset:0;
    background:#fff;
    flex-direction:column; align-items:center; justify-content:center;
    gap:28px; transform:translateX(100%); transition:transform .4s;
    z-index:99;
  }
  .nav-links.open { transform:translateX(0); }
  .nav-links a { font-size:1.15rem; color:var(--ink); }
  .page-home nav:not(.scrolled) .nav-logo { color:var(--green-deep); }
  .page-home nav:not(.scrolled) .nav-logo span { color:var(--ink-dim); }
  .page-home nav:not(.scrolled) .nav-links a { color:var(--ink-mid); }
}