/* ================================================================
   nav.css — Shared Gruvora Living navigation & layout styles
   Extracted to avoid 15KB inline duplication on every page.
   Include with: <link href="/css/nav.css" rel="stylesheet"/>
   ================================================================ */

/* ── FOUC Guard: hide offcanvas before bootstrap loads ─────────── */
.offcanvas:not(.show),
.offcanvas-end:not(.show),
#mobileMenu {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ── Nav links ──────────────────────────────────────────────────── */
.nav-links {
  gap: 32px !important;
  position: relative !important;
}
.nav-links .nav-item {
  display: flex;
  align-items: center;
}
.nav-links .dropdown-toggle-custom {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 0 !important;
  text-decoration: none !important;
  border: none !important;
  background: transparent !important;
  cursor: pointer;
  color: #717171 !important;
  opacity: 0.65;
  transition: color 0.2s, opacity 0.2s !important;
}
.nav-links .dropdown-toggle-custom span {
  font-family: 'Plus Jakarta Sans', sans-serif !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: inherit !important;
  padding-bottom: 6px !important;
}
.nav-links .dropdown-toggle-custom:hover,
.nav-links .dropdown-toggle-custom.active {
  color: #222222 !important;
  opacity: 1;
}

/* ── Sliding underline indicator ───────────────────────────────── */
.nav-underline-indicator {
  position: absolute;
  bottom: 0;
  height: 2px;
  background: #222222;
  border-radius: 999px;
  transition: left 0.3s ease, width 0.3s ease, opacity 0.25s ease;
  opacity: 0;
}

/* ── Profile button ─────────────────────────────────────────────── */
.btn-profile {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px solid #dddddd !important;
  border-radius: 24px;
  padding: 6px 6px 6px 14px;
  background: #fff;
  color: #222222;
  transition: box-shadow 0.2s ease;
  text-decoration: none;
}
.btn-profile:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.15);
}

/* ── Profile dropdown ────────────────────────────────────────────── */
.profile-dropdown-menu {
  position: absolute;
  top: 110%;
  right: 0;
  background: #fff;
  width: 240px;
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(0,0,0,.15);
  padding: 8px 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 1000;
  border: 1px solid #ebebeb;
}
.profile-dropdown-menu.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.profile-dropdown-item {
  display: block;
  padding: 12px 16px;
  color: #222;
  text-decoration: none;
  font-size: 14px;
  transition: background-color 0.2s;
}
.profile-dropdown-item:hover { background-color: #f7f7f7; }
.profile-dropdown-divider {
  height: 1px;
  background-color: #ebebeb;
  margin: 8px 0;
}

/* ── Become host link ───────────────────────────────────────────── */
.become-host {
  font-size: 13.5px !important;
  font-weight: 600 !important;
  color: #222 !important;
  text-decoration: none;
  padding: 10px 14px !important;
  border-radius: 24px !important;
  transition: background .15s ease !important;
  white-space: nowrap;
}
.become-host:hover { background: #f7f7f7 !important; }

/* ── Mobile bottom navigation ───────────────────────────────────── */
.mobile-bottom-nav { display: none; }

@media (max-width: 767px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0; left: 0;
    width: 100%;
    background: #fff;
    border-top: 1px solid #ebebeb;
    padding: 12px 0 24px;
    z-index: 1000;
  }
  body { padding-bottom: 80px; }
}

.bottom-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  color: #717171;
  font-size: 10px;
  font-weight: 500;
  gap: 4px;
  transition: color 0.2s;
}
.bottom-nav-item.active,
.bottom-nav-item:hover { color: #ff385c; }

/* ── Fade-in animations ─────────────────────────────────────────── */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.fade-in-up.in-view { opacity: 1; transform: translateY(0); }

/* ── Stagger card animations ────────────────────────────────────── */
.listing-card {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .6s cubic-bezier(.16,1,.3,1), transform .6s cubic-bezier(.16,1,.3,1);
}
.stagger-container.in-view .listing-card { opacity: 1; transform: translateY(0); }
.stagger-container.in-view .listing-card:nth-child(1)  { transition-delay: .05s; }
.stagger-container.in-view .listing-card:nth-child(2)  { transition-delay: .10s; }
.stagger-container.in-view .listing-card:nth-child(3)  { transition-delay: .15s; }
.stagger-container.in-view .listing-card:nth-child(4)  { transition-delay: .20s; }
.stagger-container.in-view .listing-card:nth-child(5)  { transition-delay: .25s; }
.stagger-container.in-view .listing-card:nth-child(6)  { transition-delay: .30s; }
.stagger-container.in-view .listing-card:nth-child(7)  { transition-delay: .35s; }
.stagger-container.in-view .listing-card:nth-child(8)  { transition-delay: .40s; }
.stagger-container.in-view .listing-card:nth-child(9)  { transition-delay: .45s; }
.stagger-container.in-view .listing-card:nth-child(10) { transition-delay: .50s; }

/* ── Ripple effect ──────────────────────────────────────────────── */
.btn-ripple { position: relative; overflow: hidden; }
.ripple {
  position: absolute;
  border-radius: 50%;
  transform: scale(0);
  animation: ripple-anim 600ms linear;
  background-color: rgba(255,255,255,.4);
  pointer-events: none;
}
@keyframes ripple-anim { to { transform: scale(4); opacity: 0; } }

/* ── Dropdown hover utility ─────────────────────────────────────── */
.dropdown-hover:hover > .dropdown-menu { display: block; margin-top: 0; }
.dropdown-toggle-custom::after { display: none; }
.dropdown-item:hover { background-color: #f7f7f7; color: var(--text-dark); }