/* ================================================================
   sections/navbar.css
   ─────────────────────────────────────────────────────────────────
   Fixed top navigation bar.
   States:
     - Default      : transparent background (over hero)
     - .scrolled    : frosted glass blur + dark tint (after 60px scroll)
     - Mobile       : hamburger toggle, fullscreen overlay menu
   ================================================================ */


/* ── Navbar wrapper ──────────────────────────────────────────────
   Fixed to top of viewport, above all content (z-index: 1000).
   Padding shrinks when .scrolled is applied by navbar.js.
   ─────────────────────────────────────────────────────────────── */
.navbar {
  position:   fixed;
  top:        0;
  left:       0;
  right:      0;
  z-index:    1000;
  padding:    22px 0;
  transition: background 0.4s ease, padding 0.3s ease, box-shadow 0.3s ease;
}

/* Frosted glass state — applied once user scrolls past 60px */
.navbar.scrolled {
  background:             rgba(6, 14, 31, 0.93);
  backdrop-filter:        blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding:                13px 0;
  box-shadow:             0 1px 0 rgba(255, 255, 255, 0.08);
}


/* ── Inner flex container ─────────────────────────────────────── */
.nav-container {
  max-width:       1200px;
  margin:          0 auto;
  padding:         0 48px;
  display:         flex;
  align-items:     center;
  justify-content: space-between;
}


/* ── Logo / monogram ─────────────────────────────────────────────
   Square bordered monogram "CR" that links back to hero.
   ─────────────────────────────────────────────────────────────── */
.nav-logo {
  text-decoration: none;
  display:         flex;
  align-items:     center;
}

.logo-monogram {
  font-family:    var(--font-display);
  font-size:      1rem;
  letter-spacing: 0.12em;
  color:          var(--accent-primary);
  border:         1px solid rgba(232, 197, 71, 0.6);
  width:          38px;
  height:         38px;
  display:        grid;
  place-items:    center;
  transition:     border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.nav-logo:hover .logo-monogram {
  border-color: var(--accent-primary);
  box-shadow:   0 0 12px rgba(232, 197, 71, 0.2);
}


/* ── Navigation links list ───────────────────────────────────────
   Horizontal flex list on desktop.
   Hidden on mobile (replaced by fullscreen overlay — see below).
   ─────────────────────────────────────────────────────────────── */
.nav-list {
  display:     flex;
  align-items: center;
  list-style:  none;
  gap:         32px;
}

/* Individual nav link */
.nav-link {
  font-family:     var(--font-display);
  font-size:       0.62rem;
  letter-spacing:  0.18em;
  text-transform:  uppercase;
  text-decoration: none;
  color:           rgba(255, 255, 255, 0.75);
  transition:      color var(--transition-fast);
}

.nav-link:hover {
  color: var(--accent-primary);
}

/* CTA variant — bordered gold link for "Contact" */
.nav-link--cta {
  color:        var(--accent-primary);
  border:       1px solid rgba(232, 197, 71, 0.5);
  padding:      7px 16px;
}

.nav-link--cta:hover {
  background:   var(--accent-primary);
  color:        var(--bg-dark);
  border-color: var(--accent-primary);
}


/* ── Hamburger toggle (mobile only) ──────────────────────────────
   Three-line button visible below 768px.
   Display toggled via media query in responsive.css.
   ─────────────────────────────────────────────────────────────── */
.nav-toggle {
  display:         none;   /* hidden on desktop */
  flex-direction:  column;
  gap:             5px;
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         8px;
}

.nav-toggle span {
  display:    block;
  width:      24px;
  height:     1.5px;
  background: rgba(255, 255, 255, 0.85);
  transition: all 0.3s;
}