/* ─── Kamba Shared Navbar ─── kamba-nav.css ──────────────────────────────── */

/* ── Base nav bar ─────────────────────────────────────────────────────────── */
#kamba-nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1100;
  height: 120px;
  padding: 0.5rem 2rem;
  display: flex;
  align-items: center;
  gap: 0;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  background: rgba(250, 249, 246, 0.96);
  border-bottom: 1px solid rgba(196, 162, 101, 0.16);
  box-sizing: border-box;
}

/* ── Logo ─────────────────────────────────────────────────────────────────── */
.kn-logo {
  text-decoration: none;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.kn-logo-img {
  height: 100px;
  width: auto;
  display: block;
}

/* ── Desktop right section (≥768px) ─────────────────────────────────────── */
.kn-right {
  flex: 1;
  display: flex;
  align-items: center;
  min-width: 0;
}

/* ── Center navigation links ─────────────────────────────────────────────── */
.kn-center {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.1rem;
}

/* ── Right actions (auth + CTA) ──────────────────────────────────────────── */
.kn-right-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* center nav text link */
.kn-nav-link {
  font-family: 'DM Sans', 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #3D2B1F;
  text-decoration: none;
  padding: 0 0.75rem;
  border-radius: 9px;
  opacity: 0.65;
  height: 36px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.kn-nav-link:hover {
  background: rgba(139, 168, 136, 0.12);
  opacity: 1;
}
.kn-nav-link.active {
  color: #8BA888;
  opacity: 1;
  background: rgba(139, 168, 136, 0.1);
  font-weight: 600;
}

/* right auth text link */
.kn-link {
  font-family: 'DM Sans', 'Space Grotesk', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  color: #3D2B1F;
  text-decoration: none;
  padding: 0 0.85rem;
  border-radius: 9px;
  opacity: 0.72;
  height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.15s, opacity 0.15s;
  white-space: nowrap;
}
.kn-link:hover {
  background: rgba(139, 168, 136, 0.12);
  opacity: 1;
}

/* CTA button */
.kn-cta {
  font-family: 'Inter', 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #fff;
  background: #8BA888;
  text-decoration: none;
  padding: 0 1.1rem;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  height: 44px;
  display: inline-flex;
  align-items: center;
  transition: background 0.2s;
  white-space: nowrap;
}
.kn-cta:hover { background: #6a8a68; }

/* ── Account dropdown ─────────────────────────────────────────────────────── */
.kn-user-wrap { position: relative; }

.kn-user-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0 0.75rem;
  border-radius: 9px;
  border: 1.5px solid rgba(196, 162, 101, 0.25);
  background: rgba(255, 255, 255, 0.7);
  font-family: 'Inter', 'DM Sans', sans-serif;
  font-size: 0.82rem;
  font-weight: 500;
  color: #3D2B1F;
  cursor: pointer;
  transition: all 0.2s;
  height: 44px;
}
.kn-user-btn:hover {
  border-color: rgba(196, 162, 101, 0.4);
  background: #fff;
}

.kn-avatar {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #8BA888;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  overflow: hidden;
  flex-shrink: 0;
}
.kn-avatar img { width: 100%; height: 100%; object-fit: cover; }

.kn-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #fff;
  border: 1px solid rgba(196, 162, 101, 0.2);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(61, 43, 31, 0.12);
  min-width: 190px;
  padding: 0.4rem;
  z-index: 1200;
}
.kn-dropdown.open { display: block; }

.kn-dropdown-email {
  padding: 0.4rem 0.85rem 0.3rem;
  font-size: 0.75rem;
  color: #9B8E82;
  font-family: 'Inter', 'DM Sans', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.kn-dropdown-item {
  display: flex;
  align-items: center;
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  font-size: 0.875rem;
  color: #3D2B1F;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  font-family: 'Inter', 'DM Sans', sans-serif;
  min-height: 44px;
}
.kn-dropdown-item:hover { background: #FAF9F6; }
.kn-dropdown-item.danger { color: #C4553E; }

.kn-dropdown-divider {
  height: 1px;
  background: rgba(196, 162, 101, 0.18);
  margin: 0.3rem 0;
}

/* ── Mobile header CTA (visible on mobile, hidden on desktop) ───────────── */
.kn-mobile-header-cta {
  display: none;
  font-family: 'DM Sans', 'Space Grotesk', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  background: #8BA888;
  text-decoration: none;
  padding: 0 0.85rem;
  border-radius: 9px;
  height: 36px;
  align-items: center;
  white-space: nowrap;
  transition: background 0.2s;
  flex-shrink: 0;
  margin-right: 0.5rem;
}
.kn-mobile-header-cta:hover,
.kn-mobile-header-cta:active { background: #6a8a68; }

/* ── Hamburger (mobile, <768px) ──────────────────────────────────────────── */
.kn-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 9px;
  transition: background 0.15s;
  flex-shrink: 0;
}
.kn-hamburger:hover { background: rgba(139, 168, 136, 0.12); }

.kn-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: #3D2B1F;
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
  transform-origin: center;
}
.kn-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kn-hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.kn-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── Mobile slide-down menu ──────────────────────────────────────────────── */
#kn-mobile-menu {
  position: fixed;
  top: 120px;
  left: 0;
  right: 0;
  z-index: 1090;
  background: rgba(250, 249, 246, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(196, 162, 101, 0.14);
  display: flex;
  flex-direction: column;
  padding: 0 1.5rem;
  /* collapsed: height 0, invisible */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transition: max-height 0.28s ease, opacity 0.2s ease;
  box-sizing: border-box;
}
#kn-mobile-menu.open {
  max-height: 520px;
  opacity: 1;
  pointer-events: auto;
  padding: 0.5rem 1.5rem 1rem;
}

.kn-mobile-link {
  font-family: 'Inter', 'DM Sans', 'Space Grotesk', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #3D2B1F;
  text-decoration: none;
  padding: 0 0.85rem;
  border-radius: 9px;
  min-height: 44px;
  display: flex;
  align-items: center;
  transition: background 0.15s;
  border: none;
  background: none;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.kn-mobile-link:hover,
.kn-mobile-link:active { background: rgba(139, 168, 136, 0.12); }
.kn-mobile-link.danger { color: #C4553E; }
.kn-mobile-link.active { color: #8BA888; font-weight: 600; background: rgba(139, 168, 136, 0.1); }

.kn-mobile-cta {
  font-family: 'Inter', 'Space Grotesk', 'DM Sans', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: #fff;
  background: #8BA888;
  text-decoration: none;
  padding: 0 1.1rem;
  border-radius: 9px;
  min-height: 44px;
  display: flex;
  align-items: center;
  margin-top: 0.25rem;
  transition: background 0.2s;
}
.kn-mobile-cta:hover,
.kn-mobile-cta:active { background: #6a8a68; }

.kn-mobile-divider {
  height: 1px;
  background: rgba(196, 162, 101, 0.18);
  margin: 0.35rem 0;
  flex-shrink: 0;
}

/* ── Body offset for fixed nav ────────────────────────────────────────────── */
body.kn-fixed-nav { padding-top: 120px !important; }

/* ── Responsive: hide desktop links, show hamburger at <768px ────────────── */
@media (max-width: 767px) {
  #kamba-nav { padding: 0 1.25rem; height: 90px; }
  #kn-mobile-menu { top: 90px; }
  body.kn-fixed-nav { padding-top: 90px !important; }
  .kn-logo-img { height: 70px; }
  .kn-right { flex: 1; }
  .kn-center { display: none; }
  .kn-right-actions { display: none; }
  .kn-hamburger { display: flex; }
  .kn-mobile-header-cta { display: inline-flex; }
}

/* ── On desktop, never show mobile menu ──────────────────────────────────── */
@media (min-width: 768px) {
  #kn-mobile-menu { display: none !important; }
}

/* ── At medium widths, compress nav links ─────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 768px) {
  .kn-nav-link { font-size: 0.82rem; padding: 0 0.55rem; }
  #kamba-nav { padding: 0 1.25rem; }
}

/* ── Prevent horizontal overflow ─────────────────────────────────────────── */
/* NOTE: overflow-x:hidden must NOT be on #kamba-nav — it forces overflow-y
   to compute as 'auto', which clips the account dropdown that extends below
   the 64px navbar.  Only the mobile menu needs the overflow guard. */
#kamba-nav, #kn-mobile-menu {
  max-width: 100vw;
}
#kn-mobile-menu {
  overflow-x: hidden;
}