/* nav.css — canonical top navigation, Kindred-inspired layout.
 *
 * Layout (grid, 3 columns):
 *   [Brand]        [Stays  Standard  Hosts  FAQ]        [Right cluster]
 *
 * Right cluster shows:
 *   Signed-out → "Log in" text link + "Get certified" pill CTA
 *   Signed-in  → ♥ saved + first-name link → /account + "Get certified" pill
 *
 * Page-level <style> blocks should NOT redefine .nav / .navInner /
 * .brand / .navRight or their descendants — let this file own them.
 *
 * Transparent-over-hero variant:
 *   When <body class="nav-transparent">: nav is transparent, text is light.
 *   When <body class="nav-scrolled">:    paper background re-engages, text is dark.
 *   The two states are managed by an IntersectionObserver on the hero element
 *   (see inline script in index.html).
 */

:where(:root) { --navH: 80px; }

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  height: var(--navH, 80px);
  /* Paper #fbfaf7 at 94% opacity — matches brand.css --paper so the
   * nav doesn't read as a different shade against the page. The rgba
   * fallback covers browsers without color-mix support. */
  background: rgba(251, 250, 247, .94);
  background: color-mix(in srgb, var(--bg, #fbfaf7) 94%, transparent);
  border-bottom: 1px solid var(--border, #dbd3c2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.navInner {
  margin: 0;
  height: 100%;
  max-width: 100%;
  /* Asymmetric: 36px left for the brand's breathing room, 12px right
     so the Log in / Get certified cluster sits close to the edge. */
  padding: 0 12px 0 36px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 32px;
}

/* ─── Brand ─── (Homadic — pinwheel mark + EB Garamond Medium wordmark) */
.brand { display: inline-flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; }
.brand .brandMark { width: 28px; height: 28px; display: block; }
.brand .word {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 22px; letter-spacing: -.005em; font-weight: 500;
  line-height: 0.95;
  color: var(--text, #1c1b16);
  transition: color .25s ease;
}
@media (max-width: 880px) {
  .brand .brandMark { width: 26px; height: 26px; }
  .brand .word { font-size: 20px; }
}

/* ─── Right cluster ─── */
.navRight {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 18px;
}
.navRight a { text-decoration: none; }

/* Saved heart (signed-in only) — keep the existing dot-badge for unread state */
.navRight .iconBtn {
  width: 36px; height: 36px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text, #1c1b16); position: relative;
  transition: background .15s, color .15s;
}
.navRight .iconBtn:hover { background: rgba(28, 27, 22, .06); }
.navRight .iconBtn svg { width: 20px; height: 20px; }
.navRight .iconBtn .badge {
  position: absolute; top: 5px; right: 5px;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brand-ink, #0a5f53); display: none;
}
.navRight .iconBtn .badge.is-on { display: block; }

/* navAuthLink — two states via data-auth-cta attribute (auth.js toggles):
 *   data-auth-cta="signin"  → "Log in" text link (signed-out)
 *   no attribute            → user's first name → /account (signed-in)
 * Both are quiet text links (no button background). Color matches brand text. */
.navRight .signInBtn {
  font-family: var(--font-body, "DM Sans", -apple-system, system-ui, sans-serif);
  font-size: 14px; font-weight: 500;
  color: var(--text, #1c1b16);
  background: transparent;
  border: none; border-radius: 0;
  padding: 0;
  height: auto;
  display: inline-flex; align-items: center;
  text-decoration: none;
  transition: color .15s;
}
.navRight .signInBtn:hover { color: var(--brand-ink, #0a5f53); }

/* Primary pill CTA — "Get certified". Always visible regardless of auth state. */
.navRight .navCta {
  font-family: var(--font-body, "DM Sans", -apple-system, system-ui, sans-serif);
  font-size: 14.5px; font-weight: 500; letter-spacing: .01em;
  color: var(--bg, #ede7d9);
  background: var(--text, #1c1b16);
  padding: 0 22px;
  height: 44px;
  border-radius: 999px;
  display: inline-flex; align-items: center;
  transition: background .15s, transform .15s, color .25s ease;
}
.navRight .navCta:hover { background: var(--brand-ink, #0a5f53); }

/* ─── Account avatar widget ──────────────────────────────────────
 * Signed-in users see a clean circular avatar instead of the "Log in"
 * text link. The avatar carries either the user's photo (when
 * profile.avatar_url is set) or the first-name initial on a dark
 * circle. The hamburger icon child (.menu) is hidden — that was a
 * leftover from an earlier menu-drawer design. */
.navRight .acct {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  cursor: pointer;
}
.navRight .acct .menu { display: none; }
.navRight .acct .av {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--text, #1c1b16); color: var(--bg, #ede7d9);
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
  /* font-style intentionally normal — brand decision is no italics
     anywhere. brand.css overrides this with !important on the same
     selector, but the dropdown twin (.acctMenu__head .av) wasn't
     covered there, so both avatars now sit upright by source. */
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  letter-spacing: -.005em;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-size: cover;
  background-position: center;
  transition: box-shadow .15s, transform .15s;
}
.navRight .acct:hover .av {
  box-shadow: 0 0 0 3px rgba(28, 27, 22, .08);
}

/* ─── Signed-in / signed-out visibility ───
 * Signed-in: hide "Log in", show avatar.
 * Signed-out: hide avatar, show "Log in".
 * First-paint (no body class yet): hide both so neither flashes. */
body.is-signed-in  .navRight .signInBtn { display: none; }
body.is-signed-out .navRight .acct      { display: none; }
body.is-signed-out .navRight .iconBtn[aria-label="Saved"] { display: none; }
body:not(.is-signed-in):not(.is-signed-out) .navRight .signInBtn,
body:not(.is-signed-in):not(.is-signed-out) .navRight .acct      { display: none; }

/* ─── Transparent-over-hero variant ───────────────────────────────────
 * On the homepage (or any page that opts in with body.nav-transparent),
 * the nav sits over the dark hero photo: no background, no border, all
 * text + icons flip to ivory. Once the hero scrolls out of view we add
 * body.nav-scrolled which restores the paper background and dark text.
 * Defaults are paper+dark so pages without a hero are unaffected. */
body.nav-transparent .nav {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
body.nav-transparent:not(.nav-scrolled) .brand .word,
body.nav-transparent:not(.nav-scrolled) .navRight .signInBtn,
body.nav-transparent:not(.nav-scrolled) .navRight .iconBtn {
  color: var(--bg, #fbfaf7);
}
body.nav-transparent:not(.nav-scrolled) .navRight .iconBtn:hover {
  background: rgba(251, 250, 247, .15);
}
body.nav-transparent:not(.nav-scrolled) .navRight .signInBtn:hover {
  color: var(--accent, #00907d);
}
/* Avatar over dark hero — soft ivory ring lifts the circle off the
 * photo so it doesn't blend into darker patches. */
body.nav-transparent:not(.nav-scrolled) .navRight .acct .av {
  box-shadow: 0 0 0 1px rgba(251, 246, 236, .28);
}
body.nav-transparent:not(.nav-scrolled) .navRight .acct:hover .av {
  box-shadow: 0 0 0 3px rgba(251, 246, 236, .18);
}
/* Inverted pill on dark hero — paper background, dark ink text, flip on hover */
body.nav-transparent:not(.nav-scrolled) .navRight .navCta {
  background: var(--bg, #ede7d9);
  color: var(--text, #1c1b16);
}
body.nav-transparent:not(.nav-scrolled) .navRight .navCta:hover {
  background: var(--brand-ink, #0a5f53);
  color: var(--bg, #ede7d9);
}
/* Once scrolled past hero, .nav-scrolled re-engages the paper background. */
body.nav-transparent.nav-scrolled .nav {
  background: rgba(237, 231, 217, .94);
  background: color-mix(in srgb, var(--bg, #ede7d9) 94%, transparent);
  border-bottom-color: var(--border, #dbd3c2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* ─── Search-pinned handoff (homepage only) ────────────────────────────
 * When the user scrolls past the hero, the search pill collapses into a
 * compact bar that floats at the top of the page. While it's pinned we
 * fade the brand wordmark so the search pill owns the visual centre.
 * The Homadic icon stays as the home link; Log in + Get certified stay
 * on the right. Smooth opacity transition — no layout shift. */
.brand .word {
  transition: opacity .28s cubic-bezier(.32,.72,0,1);
}
body.search-pinned .brand .word {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .22s cubic-bezier(.32,.72,0,1), visibility 0s linear .22s;
}

/* ─── Account dropdown menu ─────────────────────────────────
 * Opens on click of the avatar. Anchored to the viewport's right
 * edge (mirrors the nav's padding-right), hangs below the nav.
 * Rendered by auth.js via injected markup so every page that loads
 * auth.js gets it for free — no per-page wiring needed.
 *
 * Header: avatar + first name + email.
 * Items:  Account / Saved stays / Edit profile / List your property
 *         · Log out (destructive variant).
 */
.acctMenu {
  position: fixed;
  top: calc(var(--navH, 80px) + 6px);
  right: 32px;
  z-index: 90;
  min-width: 260px;
  padding: 8px;
  background: var(--bg, #ede7d9);
  border: 1px solid var(--border, #dbd3c2);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(28, 27, 22, .12), 0 2px 6px rgba(28, 27, 22, .06);
  opacity: 0;
  transform: translateY(-6px);
  pointer-events: none;
  transition: opacity .15s ease, transform .18s cubic-bezier(.2,.8,.2,1);
}
.acctMenu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
@media (max-width: 880px) { .acctMenu { right: 16px; } }

.acctMenu__head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px 14px;
  border-bottom: 1px solid var(--border-strong, #d9cfbc);
  margin-bottom: 6px;
}
.acctMenu__head .av {
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--text, #1c1b16); color: var(--bg, #ede7d9);
  background-size: cover; background-position: center;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
  /* font-style normal — matches .navRight .acct .av; brand decision is
     no italics. Was previously italic and clashed with the upright nav
     avatar that brand.css forced via !important. */
  font-size: 16px;
  flex-shrink: 0;
}
.acctMenu__head .info { min-width: 0; }
.acctMenu__head .name {
  font-family: var(--font-display, "EB Garamond", Georgia, serif);
  font-size: 15px; font-weight: 500;
  color: var(--text, #1c1b16); line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acctMenu__head .email {
  font-family: var(--font-body, "DM Sans", -apple-system, system-ui, sans-serif);
  font-size: 12px; color: var(--text-muted, #4e6a63);
  margin-top: 3px; line-height: 1.2;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  max-width: 200px;
}

.acctMenu__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text, #1c1b16);
  font-family: var(--font-body, "DM Sans", -apple-system, system-ui, sans-serif);
  font-size: 14px; font-weight: 400;
  text-decoration: none;
  background: none; border: none;
  width: 100%;
  text-align: left;
  transition: background .12s, color .12s;
}
.acctMenu__item:hover { background: var(--surface-2, #f1ecdf); }
.acctMenu__item i, .acctMenu__item svg {
  width: 16px; height: 16px;
  stroke-width: 1.7;
  color: var(--text-muted, #4e6a63);
  flex-shrink: 0;
}
.acctMenu__item:hover i, .acctMenu__item:hover svg { color: var(--text, #1c1b16); }
.acctMenu__sep { height: 1px; background: var(--border-strong, #d9cfbc); margin: 6px -4px; }
.acctMenu__item.is-danger:hover { background: rgba(161,62,21,.06); color: var(--danger, #c8453b); }
.acctMenu__item.is-danger:hover i, .acctMenu__item.is-danger:hover svg { color: var(--danger, #c8453b); }

/* ─── Mobile (≤880px) ───────────────────────────────────────
 * Center nav collapses (the four links would crowd the viewport).
 * Brand wordmark shrinks, the pill CTA stays as the right anchor. */
@media (max-width: 880px) {
  .navInner { padding: 0 20px; gap: 16px; grid-template-columns: auto auto; }
  .navRight { gap: 12px; }
  .navRight .navCta { padding: 0 14px; height: 36px; font-size: 12.5px; }
}
@media (max-width: 480px) {
  .navRight .signInBtn { display: none; }
  .brand .word { font-size: 15px; }
}

/* ─── Mobile burger + menu sheet ─────────────────────────────
 * Burger button is desktop-hidden; visible only ≤680px where
 * the inline nav CTAs would otherwise crowd the row. Opens a
 * paper-tinted sheet directly under the nav with links duplicated
 * from the inline row + editorial jumps that don't fit up top. */
.navBurger { display: none; }
@media (max-width: 680px) {
  .navBurger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 4px;
    width: 40px;
    height: 40px;
    padding: 10px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text, #1c1b16);
    transition: color .15s;
  }
  .navBurger__bar {
    display: block;
    width: 20px;
    height: 1.5px;
    background: currentColor;
    border-radius: 1px;
    transition: transform .2s cubic-bezier(.4,0,.2,1), opacity .15s;
  }
  .navBurger[aria-expanded="true"] .navBurger__bar:nth-child(1) {
    transform: translateY(5.5px) rotate(45deg);
  }
  .navBurger[aria-expanded="true"] .navBurger__bar:nth-child(2) {
    opacity: 0;
  }
  .navBurger[aria-expanded="true"] .navBurger__bar:nth-child(3) {
    transform: translateY(-5.5px) rotate(-45deg);
  }
  /* Inline sign-in + get-certified move into the burger menu on mobile */
  .navRight .navCta,
  .navRight .signInBtn {
    display: none;
  }
}

.mobileMenu {
  position: fixed;
  top: var(--navH, 64px);
  left: 0;
  right: 0;
  background: var(--paper, #fbfaf7);
  border-bottom: 1px solid var(--border, #dbd3c2);
  box-shadow: 0 18px 40px rgba(28, 27, 22, .08);
  padding: 8px 0 12px;
  max-height: calc(100vh - var(--navH, 64px));
  overflow-y: auto;
  z-index: 88;
  transform: translateY(-8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .18s ease, transform .22s cubic-bezier(.2,.8,.2,1);
  visibility: hidden;
}
.mobileMenu.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
  visibility: visible;
}
@media (min-width: 681px) {
  .mobileMenu { display: none; }
}
.mobileMenu__item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 24px;
  color: var(--text, #1c1b16);
  font-family: var(--font-body, "DM Sans", -apple-system, system-ui, sans-serif);
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  transition: background .12s;
}
.mobileMenu__item:hover { background: var(--surface-2, #f4eee2); }
.mobileMenu__item i, .mobileMenu__item svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.6;
  color: var(--text-muted, #6b6557);
  flex-shrink: 0;
}
.mobileMenu__item--accent { color: var(--brand-strong, #0a5f53); }
.mobileMenu__item--accent i, .mobileMenu__item--accent svg { color: var(--brand, #00907d); }
.mobileMenu__item--danger { color: var(--danger, #c8453b); }
.mobileMenu__item--danger:hover { background: rgba(161,62,21,.06); }
.mobileMenu__item--danger i, .mobileMenu__item--danger svg { color: var(--danger, #c8453b); }
.mobileMenu__sep {
  height: 1px;
  background: var(--border, #dbd3c2);
  margin: 6px 24px;
}
/* Hide signed-in-only items when signed out, and vice versa */
body.is-signed-in [data-mobilemenu-when="signed-out"] { display: none; }
body.is-signed-out [data-mobilemenu-when="signed-in"] { display: none; }
/* Belt-and-braces: hide items with a "when" attribute during the
 * brief moment before auth.js sets the body class, so we don't
 * flash the wrong state on first paint. */
body:not(.is-signed-in):not(.is-signed-out) [data-mobilemenu-when] { display: none; }
