/* assets/css/nav.css */

/* ---- Reset-ish ---- */
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Header ---- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0,0,0,.08);
}

.nav-wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

/* ---- Brand ---- */
.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 220px;
}
.brand-mark {
  font-weight: 800;
  letter-spacing: .5px;
  font-size: 18px;
}
.brand-sub {
  font-size: 12px;
  opacity: .75;
}

/* ---- Nav ---- */
.nav { margin-left: auto; }
.nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 18px;
}

.nav-item { position: relative; }
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  font-weight: 600;
  opacity: .92;
}
.nav-link:hover { background: rgba(0,0,0,.05); }
.nav-link.is-active { background: rgba(0,0,0,.07); }

.nav-cta { margin-left: 6px; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 14px;
  border-radius: 12px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.14);
}
.btn-primary {
  background: #111;
  color: #fff;
  border-color: #111;
}
.btn-primary:hover { filter: brightness(1.05); }

/* ---- Dropdown ---- */
.has-dropdown .dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.10);
  border-radius: 14px;
  box-shadow: 0 12px 30px rgba(0,0,0,.12);
  display: none;
}
.has-dropdown .dropdown a {
  display: block;
  padding: 10px 10px;
  border-radius: 10px;
  font-weight: 600;
  opacity: .9;
}
.has-dropdown .dropdown a:hover { background: rgba(0,0,0,.06); }

/* Hover dropdown on desktop */
@media (min-width: 920px) {
  .has-dropdown:hover .dropdown { display: block; }
}

/* ---- Mobile toggle ---- */
.nav-toggle {
  margin-left: auto;
  display: none;
  width: 44px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.14);
  background: #fff;
}
.nav-toggle:hover { background: rgba(0,0,0,.04); }
.burger {
  display: inline-block;
  width: 18px;
  height: 2px;
  background: #111;
  position: relative;
}
.burger::before, .burger::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 2px;
  background: #111;
}
.burger::before { top: -6px; }
.burger::after  { top:  6px; }

/* ---- Responsive ---- */
@media (max-width: 919px) {
  .brand-sub { display: none; }
  .nav-toggle { display: inline-flex; align-items: center; justify-content: center; }

  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    background: #fff;
    border-bottom: 1px solid rgba(0,0,0,.08);
    display: none;
  }

  .nav.is-open { display: block; }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    padding: 10px 14px 14px;
  }

  .nav-link { width: 100%; justify-content: space-between; }

  /* Mobile dropdown becomes collapsible */
  .has-dropdown .dropdown {
    position: static;
    box-shadow: none;
    border: 0;
    padding: 0 0 0 10px;
    display: none;
  }
  .has-dropdown.is-open .dropdown { display: block; }

  .nav-cta { margin-left: 0; }
  .btn { width: 100%; }
}