/* =============================================================================
   nav.css — sticky homeowner-first navigation + mobile drawer
   ============================================================================ */
.site-nav {
  position: sticky; top: 0; z-index: var(--z-sticky);
  background: color-mix(in srgb, var(--color-bg-primary) 88%, transparent);
  backdrop-filter: saturate(180%) blur(10px);
  border-bottom: 1px solid var(--color-border-primary);
}
.site-nav__inner {
  display: flex; align-items: center; gap: var(--space-5);
  height: 68px;
  max-width: var(--max-width-page); margin-inline: auto; padding-inline: var(--space-5);
}
.brand {
  display: inline-flex; align-items: center; gap: var(--space-2);
  font-family: var(--font-family-display); font-weight: var(--font-weight-bold);
  font-size: var(--font-size-md); color: var(--color-text-primary); letter-spacing: -0.01em;
}
.brand:hover { text-decoration: none; }
.brand__mark {
  width: 28px; height: 28px; border-radius: var(--border-radius-sm);
  background: var(--color-accent-primary);
  display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 0.9rem;
  /* foundation/structure motif: a square base, not a circle */
}

.nav-links { display: flex; align-items: center; gap: var(--space-5); margin-left: var(--space-4); }
.nav-links a { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--color-text-primary); text-decoration: none; }

.nav-right { display: flex; align-items: center; gap: var(--space-3); margin-left: auto; }
.nav-right .nav-divider { width: 1px; height: 22px; background: var(--color-border-primary); }
.nav-pros { color: var(--color-text-secondary); font-weight: var(--font-weight-medium); font-size: var(--font-size-sm); }
.nav-pros:hover { color: var(--color-text-primary); text-decoration: none; }

.theme-toggle {
  display: inline-grid; place-items: center; width: 38px; height: 38px;
  border-radius: var(--border-radius-full); border: 1px solid var(--color-border-primary);
  color: var(--color-text-secondary);
}
.theme-toggle:hover { color: var(--color-text-primary); border-color: var(--color-accent-primary); }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .icon-sun { display: block; }
  :root:not([data-theme="light"]) .theme-toggle .icon-moon { display: none; }
}

.nav-toggle { display: none; width: 40px; height: 40px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-primary); place-items: center; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--color-text-primary); border-radius: 2px; position: relative; transition: transform var(--duration-fast) var(--easing-out); }
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after  { position: absolute; top: 6px; }

/* Drawer (mobile) */
.nav-scrim { position: fixed; inset: 0; background: var(--color-surface-overlay); z-index: var(--z-drawer); opacity: 0; visibility: hidden; transition: opacity var(--duration-normal) var(--easing-out), visibility var(--duration-normal); }
.nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(86vw, 340px); z-index: calc(var(--z-drawer) + 1);
  background: var(--color-bg-primary); border-left: 1px solid var(--color-border-primary);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%); transition: transform var(--duration-normal) var(--easing-out);
  display: flex; flex-direction: column; padding: var(--space-5);
}
.nav-drawer__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-5); }
.nav-drawer__close { width: 40px; height: 40px; border-radius: var(--border-radius-md); border: 1px solid var(--color-border-primary); display: grid; place-items: center; font-size: 1.4rem; line-height: 1; color: var(--color-text-secondary); }
.nav-drawer a { display: block; padding: var(--space-3) var(--space-2); font-size: var(--font-size-md); font-weight: var(--font-weight-medium); color: var(--color-text-primary); border-radius: var(--border-radius-md); }
.nav-drawer a:hover { background: var(--color-bg-tertiary); text-decoration: none; }
.nav-drawer .drawer-cta { margin-top: var(--space-4); }
.nav-drawer .drawer-section-label { font-size: var(--font-size-xs); text-transform: uppercase; letter-spacing: var(--letter-spacing-wide); color: var(--color-text-tertiary); margin: var(--space-4) var(--space-2) var(--space-1); }

body.drawer-open { overflow: hidden; }
body.drawer-open .nav-scrim { opacity: 1; visibility: visible; }
body.drawer-open .nav-drawer { transform: translateX(0); }

@media (max-width: 860px) {
  .nav-links, .nav-right .nav-divider, .nav-right .nav-pros { display: none; }
  .nav-toggle { display: grid; }
}
@media (prefers-reduced-motion: reduce) {
  .nav-scrim, .nav-drawer { transition: none; }
}