/* ============================================
   BLYDE - Layout: Nav, Footer, Grid
   ============================================ */

/* ---- Navigation ---- */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  transform: none;
  z-index: 100;
  width: 100%;
  max-width: none;
  height: var(--nav-h);
  background: rgba(250, 248, 243, 0.97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  box-shadow: var(--shadow-md);
}

.nav-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.nav-logo {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: 1.5rem;
  color: var(--ink);
  letter-spacing: -0.5px;
  cursor: pointer;
  text-decoration: none;
  transition: color var(--ease);
}

.nav-logo .dot { color: var(--gold); }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.nav-menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition: all var(--ease);
  flex-shrink: 0;
}

.nav-menu-toggle:hover {
  border-color: var(--ink);
  background: var(--cream-dark);
}

body.nav-lock {
  overflow: hidden;
}

.nav-link {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--ink-soft);
  text-decoration: none;
  padding: 8px 16px;
  border-radius: var(--radius-full);
  transition: all var(--ease);
  cursor: pointer;
  border: none;
  background: none;
}

.nav-link:hover,
.nav-link.active {
  background: var(--cream-dark);
  color: var(--ink);
}

.nav-link.nav-cta {
  background: var(--ink);
  color: var(--white);
  margin-left: 4px;
}

.nav-link.nav-cta:hover {
  background: var(--gold);
}

/* ---- Page wrapper (offset for fixed nav) ---- */
.page-content {
  padding-top: var(--nav-h);
  min-height: 100vh;
}

/* ---- Container ---- */
.container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

/* ---- Grid Utilities ---- */
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-lg); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-lg); }
.grid-5 { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-md); }

/* ---- Flex Utilities ---- */
.flex { display: flex; }
.flex-col { display: flex; flex-direction: column; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-start { display: flex; align-items: flex-start; }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ---- Dark Section ---- */
.section-dark {
  background: var(--ink);
  color: var(--white);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.section-dark .section-label { color: var(--gold-light); }
.section-dark .section-title { color: var(--white); }
.section-dark .section-sub { color: rgba(255,255,255,0.65); max-width: 480px; margin: 10px auto 0; }

/* ---- Light Band ---- */
.section-light {
  background: var(--white);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- Cream Band ---- */
.section-cream {
  background: var(--cream-dark);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* ---- Footer ---- */
.footer {
  background: var(--ink);
  color: var(--white);
  padding: 56px var(--space-xl) 28px;
}

.footer-inner {
  max-width: var(--container);
  margin: 0 auto;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 48px;
  margin-bottom: 48px;
}

.footer-brand p {
  font-size: 0.88rem;
  opacity: 0.55;
  margin-top: 12px;
  max-width: 220px;
  line-height: 1.6;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.footer-social a {
  width: 34px; height: 34px;
  border-radius: var(--radius);
  background: rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.88rem;
  text-decoration: none;
  color: rgba(255,255,255,0.7);
  transition: background var(--ease);
}

.footer-social a:hover { background: rgba(255,255,255,0.16); }

.footer-col h4 {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  opacity: 0.45;
  margin-bottom: 18px;
}

.footer-col ul li { margin-bottom: 12px; }

.footer-col ul li a {
  text-decoration: none;
  color: rgba(255,255,255,0.65);
  font-size: 0.9rem;
  transition: color var(--ease);
  cursor: pointer;
}

.footer-col ul li a:hover { color: var(--gold-light); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.1);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  opacity: 0.45;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-5 { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
}

@media (max-width: 768px) {
  .container { padding: 0 var(--space-md); }
  .section { padding: var(--space-xl) var(--space-md); }
  .section-dark { padding: var(--space-xl) var(--space-md); }
  .grid-2 { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .grid-4 { grid-template-columns: 1fr; }
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .footer { padding: var(--space-xl) var(--space-md) var(--space-lg); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--space-lg); }
  .section-title { font-size: 1.9rem; }
}

@media (max-width: 720px) {
  .nav { height: 72px; }
  .nav-inner { gap: 14px; }
  .nav-menu-toggle { display: inline-flex; }
  .nav-links {
    position: absolute;
    top: calc(100% + 1px);
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    padding: 16px;
    background: rgba(250, 248, 243, 0.99);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(-8px);
    transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
    max-height: calc(100vh - 72px);
    overflow-y: auto;
  }
  .nav-links.open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  .nav-links .nav-link:not(.nav-cta) { display: flex; }
  .nav-link,
  .nav-link.nav-cta {
    width: 100%;
    justify-content: flex-start;
    margin-left: 0;
    padding: 12px 14px;
    background: var(--white);
    border: 1px solid var(--border);
  }
  .nav-link.nav-cta {
    justify-content: center;
    /* Re-assert the dark CTA style on mobile — the combined rule above resets
       the background to white but leaves color:white, which rendered "Create
       Account" as white-on-white (an apparent blank box below Sign In). */
    background: var(--ink);
    color: var(--white);
    border-color: var(--ink);
  }
  .nav-user-menu {
    width: 100%;
  }
  .nav-user-btn {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    padding: 8px 12px 8px 8px;
  }
  .nav-dropdown {
    position: static;
    width: 100%;
    margin-top: 8px;
    box-shadow: none;
    border-radius: var(--radius);
    transform: none;
    /* Base .nav-dropdown sets visibility:hidden; with position:static on mobile
       that still reserves layout space — appearing as a blank block inside the
       open hamburger menu before the user-dropdown is tapped. Collapse it with
       display:none when closed, restored to block via .open below. */
    display: none;
  }
  .nav-dropdown.open { display: block; }
  .nav-user-name-full { display: none; }
  .nav-user-name-short { display: inline; max-width: 92px; }
  /* On mobile the avatar dropdown is replaced by flat drawer links so the
     dashboard is always reachable in one tap (the dropdown was unreliable).
     Descendant selectors keep these winning regardless of source order. */
  .nav-links .nav-user-menu { display: none; }
  .nav-links .nav-mobile-account { display: flex; flex-direction: column; gap: 10px; width: 100%; }
}

/* Flat mobile-only account links — hidden on desktop (avatar dropdown is used). */
.nav-mobile-account { display: none; }

@media (max-width: 480px) {
  .grid-5 { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-logo { font-size: 1.3rem; }
  .nav-link.nav-cta { padding-inline: 14px; }
}

/* ============================================
   NAV USER MENU (logged-in state)
   ============================================ */
.nav-user-menu {
  position: relative;
  min-width: 0;
}

.nav-user-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  max-width: min(100%, 340px);
  padding: 5px 12px 5px 5px;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--border);
  background: var(--white);
  cursor: pointer;
  font-family: var(--font-body);
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--ink);
  transition: all var(--ease);
  white-space: nowrap;
  justify-content: flex-start;
}

.nav-user-btn:hover {
  border-color: var(--ink);
  background: var(--cream-dark);
}

.nav-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.78rem;
  flex-shrink: 0;
}

.nav-user-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.nav-user-name-full {
  max-width: clamp(120px, 18vw, 200px);
}

.nav-user-name-short {
  display: none;
  max-width: 110px;
}

.nav-chevron {
  color: var(--muted);
  transition: transform var(--ease);
  flex-shrink: 0;
  margin-left: auto;
}

.nav-user-btn[aria-expanded="true"] .nav-chevron {
  transform: rotate(180deg);
}

/* Dropdown */
.nav-dropdown {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  width: min(280px, calc(100vw - 24px));
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 200;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity var(--ease), transform var(--ease), visibility var(--ease);
}

.nav-dropdown.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav-dropdown-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px 12px;
  min-width: 0;
}

.nav-dropdown-header > div:last-child {
  min-width: 0;
  flex: 1 1 auto;
}

.nav-dropdown-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--gold);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 0.88rem;
  flex-shrink: 0;
}

.nav-dropdown-header strong {
  display: block;
  font-size: 0.9rem;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-header span {
  display: block;
  font-size: 0.75rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.nav-dropdown-divider {
  height: 1px;
  background: var(--border);
  margin: 4px 0;
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--radius);
  text-decoration: none;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  transition: background var(--ease), color var(--ease);
}

.nav-dropdown-item span {
  font-size: 1rem;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.nav-dropdown-item:hover {
  background: var(--cream);
  color: var(--ink);
}

.nav-dropdown-logout {
  color: var(--error);
}

.nav-dropdown-logout:hover {
  background: var(--error-bg);
  color: var(--error);
}

/* Overlay to close dropdown */
.nav-overlay {
  position: fixed;
  inset: 0;
  /*
    Must sit ABOVE page content but BELOW the fixed nav + dropdown.
    If this is higher than .nav (z-index:100), it will block clicks on
    the dropdown items (Dashboard, Bookings, etc.).
  */
  z-index: 90;
  display: none;
}

.nav-overlay.active { display: block; }