/* ==========================================================
   Kai Mana shared navigation (music-page style)
   Sticky header + hamburger toggle on mobile.
   Scoped: only header/nav rules so it can layer on top of
   assets/css/main.css without disturbing page base styles.
   ========================================================== */

:root {
  --knm-bg-0: #050b14;
  --knm-ink-0: #f6f0e1;
  --knm-ink-1: #d8c89c;
  --knm-gold: #e9c46a;
  --knm-line: rgba(246,240,225,0.08);
  --knm-line-strong: rgba(246,240,225,0.18);
  --knm-serif: 'Cormorant Garamond', 'Playfair Display', Georgia, serif;
}

/* ============== HEADER ============== */
.km-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  background: rgba(5, 11, 20, 0.78);
  border-bottom: 1px solid var(--knm-line);
}
.km-header-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.km-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--knm-ink-0);
  font-family: var(--knm-serif);
  font-weight: 600;
  font-size: 22px;
  text-decoration: none;
}
.km-logo:hover { text-decoration: none; opacity: 1; }
.km-mark { font-size: 24px; line-height: 1; filter: drop-shadow(0 0 12px rgba(233,196,106,0.5)); }
.km-wordmark { letter-spacing: 0.5px; }

.km-nav { display: flex; gap: 26px; align-items: center; }
.km-nav a {
  color: var(--knm-ink-1);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  text-decoration: none;
  padding: 6px 0;
  margin-left: 0; /* override main.css .main-nav spacing if cascaded */
  border-bottom: 1px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.km-nav a:hover { color: var(--knm-gold); border-color: var(--knm-gold); text-decoration: none; opacity: 1; }

/* ---- Current-page indicator ---- */
.km-nav a.is-current { color: var(--knm-gold); border-bottom-color: var(--knm-gold); }

/* ---- Hamburger toggle (hidden on desktop) ---- */
.km-nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--knm-line-strong);
  border-radius: 10px;
  padding: 8px 10px;
  cursor: pointer;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 42px;
  height: 42px;
  transition: border-color 0.18s, background 0.18s;
}
.km-nav-toggle:hover, .km-nav-toggle:focus-visible {
  border-color: var(--knm-gold);
  background: rgba(233,196,106,0.08);
  outline: none;
}
.km-nav-toggle span {
  display: block;
  width: 18px;
  height: 2px;
  background: var(--knm-ink-0);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

/* ---- Mobile behavior (same breakpoint as music page) ---- */
@media (max-width: 820px) {
  .km-header-inner { padding: 12px 18px; position: relative; }
  .km-nav { display: none; }
  .km-nav.is-open {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 18px 14px;
    background: rgba(5, 11, 20, 0.96);
    border-bottom: 1px solid var(--knm-line);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }
  .km-nav.is-open a {
    padding: 10px 4px;
    border-bottom: 1px solid var(--knm-line);
  }
  .km-nav.is-open a:last-child { border-bottom: none; }
  .km-nav-toggle { display: flex; }
}