/* clarity-nav.css — Navigation styles for clarity landing pages
   Revision: 2026-04-29 – Created: extracted from clarity-landing.css nav sections
   Loaded by: views/partials/clarity-nav.pug
   Contains: landing-header, logo, landing-nav, nav-dropdowns, theme-toggle, btn-nav-cta */

/* ── Nav (clarity-nav partial: header.landing-header > nav.landing-nav) ────── */
.landing-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 48px;
  border-bottom:   1px solid var(--rule);
  background:      var(--accent);
  position:        sticky;
  top:             0;
  z-index:         100;
}
[data-theme="light"] .landing-header { background: var(--paper); }
[data-theme="light"] .theme-logo-dark       { display: none; }
[data-theme="light"] .theme-logo-light      { display: inline-block; }
[data-theme="dark"]  .landing-header { background: var(--paper); }
[data-theme="dark"]  .theme-logo-light      { display: none; }
[data-theme="dark"]  .theme-logo-dark       { display: inline-block; }
.theme-logo-dark { display: none; }

.landing-header .logo {
  display:         flex;
  align-items:     center;
  text-decoration: none;
}
.landing-header .logo img { height: 36px; }

.landing-nav {
  display:     flex;
  align-items: center;
  gap:         6px;
}

/* ── Nav dropdowns ─────────────────────────────────────────────────────────── */
.nav-dropdown { position: relative; }

.nav-dropdown > .nav-drop-trigger {
  display:     flex;
  align-items: center;
  gap:         4px;
  color:       var(--ink-3);
  font-size:   13px;
  font-weight: 500;
  cursor:      pointer;
  padding:     6px 10px;
  background:  none;
  border:      none;
  font-family: inherit;
  border-radius: 6px;
  transition:  color .15s, background .15s;
}
.nav-dropdown > .nav-drop-trigger:hover,
.nav-dropdown.is-open > .nav-drop-trigger {
  color:       var(--ink);
  background:  var(--surface);
}
.nav-drop-trigger .caret {
  font-size:  9px;
  opacity:    .6;
  transition: transform .2s;
  display:    inline-block;
}
.nav-dropdown.is-open .caret { transform: rotate(180deg); }

.nav-drop-menu {
  display:      block;
  position:     absolute;
  top:          calc(100% + 8px);
  left:         50%;
  transform:    translateX(-50%);
  background:   #111a14;
  border:       1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  padding:      8px;
  min-width:    210px;
  box-shadow:   0 8px 32px rgba(0,0,0,.4);
  z-index:      200;
  opacity:      0;
  pointer-events: none;
  transition:   opacity .15s ease, visibility .15s ease;
  visibility:   hidden;
}
.nav-dropdown.is-open .nav-drop-menu {
  opacity:        1;
  pointer-events: auto;
  visibility:     visible;
}
.nav-drop-menu a {
  display:         flex;
  flex-direction:  column;
  padding:         9px 12px;
  border-radius:   7px;
  text-decoration: none;
  transition:      background .15s;
  color:           #f9fafb;
}
.nav-drop-menu a:hover { background: rgba(255,255,255,.07); }
.nav-drop-menu .drop-label  { display: block; font-size: 13px; font-weight: 600; color: #f9fafb; }
.nav-drop-menu .drop-sub    { display: block; font-size: 11px; color: #6b7280; margin-top: 2px; }
.nav-drop-menu a:first-child .drop-label { color: var(--tr-green); }
.nav-drop-divider { display: block; border: none; border-top: 1px solid rgba(255,255,255,.06); margin: 6px 4px; }

/* Standalone nav links (Pricing, Login) */
.landing-nav > a {
  font-size:       13px;
  color:           var(--ink-3);
  text-decoration: none;
  padding:         6px 10px;
  border-radius:   6px;
  transition:      color .15s, background .15s;
}
.landing-nav > a:hover { color: var(--ink); background: var(--surface); }

/* ── Theme toggle ──────────────────────────────────────────────────────────── */
.theme-toggle {
  background:    none;
  border:        1px solid var(--rule);
  border-radius: 99px;
  padding:       6px 12px;
  cursor:        pointer;
  font-size:     13px;
  color:         var(--ink-2);
  display:       flex;
  align-items:   center;
  gap:           6px;
  font-family:   'DM Sans', sans-serif;
  transition:    border-color .2s, color .2s;
  white-space:   nowrap;
}
.theme-toggle:hover { border-color: var(--ink-3); color: var(--ink); }
.toggle-icon { font-size: 14px; }

/* ── Nav CTA button ────────────────────────────────────────────────────────── */
.btn-nav-cta {
  background:      var(--tr-dark);
  color:           #ffffff !important;
  padding:         8px 18px;
  border-radius:   6px;
  font-size:       13px;
  font-weight:     600;
  text-decoration: none;
  white-space:     nowrap;
  transition:      background .15s;
}
.btn-nav-cta:hover { background: var(--accent) !important; color: #fff !important; }

/* Inline nav variant (account-clarity — uses plain <nav>, not .landing-header) */
nav {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         16px 48px;
  background:      var(--paper);
  position:        sticky;
  top:             0;
  z-index:         100;
}
[data-theme="dark"] .landing-header nav { background: var(--paper); }

.logo {
  font-family:     'DM Serif Display', serif;
  font-size:       20px;
  color:           var(--ink);
  letter-spacing:  -.01em;
  text-decoration: none;
}
.logo span { color: var(--accent); }

.nav-links { display: flex; gap: 24px; align-items: center; list-style: none; }
.nav-links a {
  font-size:       13px;
  color:           var(--ink-3);
  text-decoration: none;
  cursor:          pointer;
}
.nav-links a:hover { color: var(--ink); }

.nav-back       { font-size: 13px; color: var(--ink-3); text-decoration: none; }
.nav-back:hover { color: var(--ink); }

.nav-cta {
  background:      var(--ink);
  color:           var(--paper);
  padding:         9px 22px;
  border-radius:   6px;
  font-size:       14px;
  font-weight:     500;
  text-decoration: none;
  cursor:          pointer;
  border:          none;
  font-family:     'DM Sans', sans-serif;
}
.nav-cta:hover { opacity: .85; }


/* ── Theme icon (inside toggle button) ─────────────────────────────────────── */
[data-theme="light"] .theme-icon-light { display: inline; }
[data-theme="light"] .theme-icon-dark  { display: none; }

/* ── Responsive ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .landing-header { padding: 12px 20px; }
  nav             { padding: 12px 20px; }
  .landing-nav    { gap: 2px; }
  .nav-dropdown > .nav-drop-trigger,
  .landing-nav > a { padding: 4px 6px; font-size: 12px; }
  .btn-nav-cta    { padding: 6px 12px; font-size: 12px; }
}