/* ---- 4. Navigation topbar ------------------------------------------------- */

/* Full-bleed sticky bar: the block sits inside the container, but it should
   span the viewport — pull it out with the classic 50vw trick, then re-apply
   the container's inset so its content stays aligned. */
/* The topbar is the page's real navigation bar (class `topbar` on the nav).
   Scoped tightly so other in-page `nav` elements (breadcrumbs) never get the
   full-bleed sticky bar treatment — one bar per page, matching the current
   page's mode (landing marketing nav or app nav). */
main.container>nav.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-inline: calc(50% - 50vw);
  padding-inline: max(1.5rem, calc((100vw - var(--container-max)) / 2 + 1.5rem));
  padding-block: 0.7rem;
  /* Glassy: a translucent surface with backdrop blur, so page content stays
     visible (and soft-focussed) under the bar in every scroll state. */
  background: var(--ta-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--ta-border);
}

main.container>nav.topbar ul {
  display: flex;
  align-items: center;
  gap: 0.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

main.container>nav.topbar ul:first-child {
  margin-right: auto;
}

main.container>nav.topbar .brand {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* The brand is wrapped in a link back to the app home. The generic `li a`
   nav-link styles (padding, muted colour, hover chip) must NOT apply to the
   logo — reset them so the brand renders exactly as the bare `.brand` did,
   and keep the hover clean (no background chip behind the logo). */
main.container>nav.topbar li a.brand-link {
  display: inline-flex;
  align-items: center;
  padding: 0;
  border-radius: var(--ta-r-sm);
  color: inherit;
  text-decoration: none;
  transition: none;
}

main.container>nav.topbar li a.brand-link:hover {
  color: inherit;
  background: transparent;
}

main.container>nav.topbar .brand svg {
  display: block;
  width: 1.5rem;
  height: 1.5rem;
}

main.container>nav.topbar .brand strong {
  font-size: 1rem;
  font-weight: 650;
  letter-spacing: -0.01em;
}

main.container>nav.topbar li a {
  display: inline-block;
  padding: 0.4rem 0.7rem;
  border-radius: var(--ta-r-sm);
  color: var(--ta-muted);
  font-size: 0.92rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s ease, background-color 0.12s ease;
}

main.container>nav.topbar li a:hover {
  color: var(--ta-text);
  background: var(--ta-surface-2);
}

main.container>nav.topbar li a.active {
  color: var(--ta-accent);
  background: var(--ta-accent-soft);
}

/* A public navbar that carries a "Log in" link splits into three groups:
   brand (left), the remaining links (centred), and a right-hand auth cluster
   of a "Sign in" ghost button and a solid white "Sign up" button. Navbars
   without one (internal dashboards, e.g. ending in `/logout`) keep the
   single row. */
main.container>nav.topbar ul.nav-links {
  gap: 0.25rem;
  /* Apps with many sections (e.g. Funeral Office) wrap onto a second row
     instead of overflowing or clipping the bar. */
  flex-wrap: wrap;
  row-gap: 0.3rem;
}

/* Internal navs (no auth cluster) fill the row and wrap their links when
   there are more than fit; `min-width: 0` lets the list shrink below its
   content so wrapping actually engages. */
main.container>nav.topbar:not(:has(ul.nav-auth)) ul.nav-links {
  flex: 1 1 auto;
  min-width: 0;
}

main.container>nav.topbar:has(ul.nav-auth) ul:first-child {
  margin-right: 0;
}

main.container>nav.topbar:has(ul.nav-auth) ul.nav-links {
  flex: 1;
  justify-content: center;
}

main.container>nav.topbar:has(ul.nav-auth) ul.nav-auth {
  margin-left: auto;
  gap: 0.55rem;
}

main.container>nav.topbar ul.nav-auth li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 1.1rem;
  border-radius: var(--ta-r);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}

/* "Sign up" is a solid accent-colour button so it reads as the primary auth
   CTA and matches the brand colour used everywhere else. "Sign in" is the
   ghost/outline twin — same size and radius, transparent fill. */
main.container>nav.topbar ul.nav-auth a.btn.primary {
  background: var(--ta-accent);
  color: #fff;
  border-color: var(--ta-accent);
}

main.container>nav.topbar ul.nav-auth a.btn.primary:hover {
  background: var(--ta-accent-hover);
  color: #fff;
  border-color: var(--ta-accent-hover);
}

main.container>nav.topbar ul.nav-auth a.btn.ghost {
  border: 1px solid var(--ta-border-strong);
  color: var(--ta-text);
  background: transparent;
}

main.container>nav.topbar ul.nav-auth a.btn.ghost:hover {
  border-color: var(--ta-accent);
  color: var(--ta-accent);
  background: transparent;
}

/* When the navbar sits directly above a media-backed hero it becomes a
   transparent overlay pinned to the viewport top: the hero image shows
   through, links go white, and the auth buttons adapt to the dark backdrop.
   `position: fixed` (not absolute) means the bar never scrolls away — it
   only changes surface once the page scrolls past the hero. */
main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  margin-inline: 0;
  background: linear-gradient(180deg,
      rgba(8, 10, 14, 0.55) 0%,
      rgba(8, 10, 14, 0.25) 55%,
      rgba(8, 10, 14, 0) 100%);
  border-bottom: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) .brand strong,
main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) li a.nav-link {
  color: rgba(255, 255, 255, 0.92);
}

main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) li a.nav-link:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) li a.nav-link.active {
  color: #fff;
  background: rgba(255, 255, 255, 0.22);
}

main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) ul.nav-auth a.btn.ghost {
  border-color: rgba(255, 255, 255, 0.4);
  color: #fff;
}

main.container>nav.topbar:not(.nav-scrolled):has(+ .hero.marketing) ul.nav-auth a.btn.ghost:hover {
  border-color: #fff;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
}

/* Scrolled: the runtime client adds `nav-scrolled` once the page is scrolled
   past the hero. The bar keeps its pinned position and just swaps the
   transparent overlay for a glassy shadowed surface (translucent + backdrop
   blur) — no slide, no reappear, so it never flickers out of view. */
main.container>nav.topbar.nav-scrolled:has(+ .hero.marketing) {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 70;
  margin-inline: 0;
  /* Glassy bar once scrolled: translucent surface + backdrop blur, so the
     hero/content stays softly visible through the stuck bar. */
  background: var(--ta-glass);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--ta-border);
  box-shadow: var(--ta-shadow);
}

main.container>nav.topbar.nav-scrolled:has(+ .hero.marketing) .brand strong,
main.container>nav.topbar.nav-scrolled:has(+ .hero.marketing) li a.nav-link {
  color: var(--ta-text);
}

main.container>nav.topbar.nav-scrolled:has(+ .hero.marketing) li a.nav-link:hover {
  color: var(--ta-text);
  background: var(--ta-surface-2);
}

main.container>nav.topbar.nav-scrolled:has(+ .hero.marketing) li a.nav-link.active {
  color: var(--ta-accent);
  background: var(--ta-accent-soft);
}

/* ---- 4b. Mobile hamburger + drawer (base / desktop) ----------------------- */

/* The hamburger is desktop-hidden; the links/auth wrapper is transparent to
   layout on desktop (`display: contents`) so the flex row (brand · links ·
   auth) is unchanged — the drawer only engages below 760px (section 19). */
main.container>nav.topbar .nav-toggle {
  display: none;
  flex: none;
}

main.container>nav.topbar .topbar-menu {
  display: contents;
}