/* ===== Eulogy nav — shared across all pages ===== */
:root{
  --brand-500:#764ba2;                /* pill + brand */
  --brand-600:#5a3d7a;                /* hover */
  --divider:#e6e3ef;
  --nav-surface:#ffffff;              /* opaque so divider reads cleanly */
  --nav-gutter:100px;                  /* side padding; 24–40px is typical */
  --nav-h:64px;                       /* nav height */
  --divider-pop:rgba(118,75,162,.50); /* soft fade below the 1px line */
  --brand-purple: #7c5acb;
  --page-bg: #f9f9fb;
}

/* We don't need a visible border or band anywhere */
.site-nav, .site-nav-container, .site-nav::before, .site-nav::after,
.hero, .hero::before, .hero::after, body::before {
  border: 0 !important;
  box-shadow: none !important;
  content: none !important;
}

.hero { border-bottom: 0 !important; }
.hero::before, .hero::after { content: none !important; }

/* The mount element must exist and use the right var */
#navMount { display:block; min-height: var(--nav-h); }

/* Opt-out on pages that don’t want the fade */
body.no-vignette::before{ display:none; }

/* Nav bar (single source of truth) */
.site-nav{
  position: fixed; top:0; left:0; right:0;
  display: flex; align-items: center;
  background: var(--nav-surface);
  z-index: 1000;
  padding: 0;

  /* correct vars + no hard height */
  height: auto !important;
  min-height: var(--nav-h);
}

/* nav.css – put near the end, after your .site-nav link rules */
.site-nav .disabled-link{
  cursor: not-allowed;
  opacity: 1;
  pointer-events: auto;            /* still allow hover for tooltip */
  color: inherit !important;
  background: transparent !important;
}

.site-nav .disabled-link::after{
  content: attr(data-tooltip);
  position: absolute;
  top: 140%;
  left: 0;
  font-size: 11px; line-height: 1.3;
  white-space: nowrap;
  padding: 3px 6px;
  background: rgba(255,255,255,.95);
  border-radius: 6px;
  box-shadow: 0 2px 10px rgba(0,0,0,.08);
  color: #764ba2;
  display: none;
}

.site-nav .disabled-link:hover::after{ display: block; }

/* Inner container: brand | menu with side gutters */
.site-nav .site-nav-container{
  width:100%; max-width:none; margin:0;
  padding:0;
  padding-left:  calc(var(--nav-gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--nav-gutter) + env(safe-area-inset-right));
  display:grid; grid-template-columns:auto 1fr;
  align-items:center; text-align:initial;
}



/* Brand (left) */
.site-nav .site-nav-left{ justify-self:start; }
.site-nav .site-nav-left a{
  font-size:1.8rem; font-weight:700;
  color:var(--brand-500); text-decoration:none;
}

/* Menu (right) */
.site-nav .site-nav-right{
  justify-self:end;
  display:inline-flex; align-items:center; gap:12px;
}

/* Menu links (non-pill) */
.site-nav .site-nav-right a,
.site-nav .site-nav-right a:visited{
  text-decoration:none; color:#333;
  padding:8px 10px; border-radius:6px; font-weight:500; line-height:1;
}
.site-nav .site-nav-right a:hover,
.site-nav .site-nav-right a:focus-visible{
  background:rgba(0,0,0,0.06);
  color:var(--brand-600);
}

/* filled purple pill; size comes from .pill-sm */
#loginRegisterLink, #logoutButton,
#loginRegisterLink:visited, #logoutButton:visited{
  background: var(--brand-500, #764ba2) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.7);
  border-radius:9999px; font-weight:600;
  box-shadow:0 6px 18px rgba(118,75,162,.25);
}

#loginRegisterLink:hover,#loginRegisterLink:focus,
#logoutButton:hover,#logoutButton:focus{
  background:var(--brand-600) !important;
  transform:translateY(-2px);
}

/* Flicker guard: show guest by default, reveal authed once JS sets .logged-in */
.auth-slot [data-auth="authed"]{ display:none !important; }
html.logged-in  .auth-slot [data-auth="authed"] { display:inline-flex !important; }
html.logged-in  .auth-slot [data-auth="guest"]  { display:none !important; }
html.logged-out .auth-slot [data-auth="guest"]  { display:inline-flex !important; }
html.logged-out .auth-slot [data-auth="authed"] { display:none !important; }

/* Reserve space so nothing jumps */
.site-nav-right .auth-slot{
  display:inline-flex; align-items:center; gap:12px;
  min-width:230px; justify-content:flex-end;
}

/* Hide both Login/Register and Logout until auth resolves */
html.auth-pending .auth-slot > * { visibility: hidden; }

/* Optional: block clicks until auth is known to prevent wrong-page flashes */
html.auth-pending [data-auth="gate"]{ pointer-events:none; opacity:.9; }

/* Active (current) page link */
.site-nav .site-nav-right a[aria-current="page"]:not(#loginRegisterLink):not(#logoutButton){
  pointer-events:none; cursor:default;
  color:var(--brand-600);
  background:rgba(118,75,162,.10);
  font-weight:600; box-shadow:none;
}

/* Treat .active the same as [aria-current="page"] (belt & suspenders) */
.site-nav .site-nav-right a.active:not(#loginRegisterLink):not(#logoutButton){
  pointer-events: none;
  cursor: default;
  color: var(--brand-600);
  background: rgba(118,75,162,.10);
  font-weight: 600;
  box-shadow: none;
}

/* Mobile tweaks */
@media (max-width:900px){
  :root{ --nav-gutter:20px; }
  .site-nav .site-nav-left a{ font-size:1.4rem; }
  .site-nav .disabled-link::after { display:none !important; }

  /* from the pill+email update */
  .nav-auth{ align-items:flex-start; min-width:0; }
  .nav-email{display: none !important;}
}

/* Give the whole nav a little vertical padding so nothing hugs the top edge */
.site-nav .site-nav-container {
  padding-block: 6px;                 /* top & bottom padding */
}

/* The right side stays a single row of links plus the auth stack */
.site-nav .site-nav-right { align-items: center; }

/* compact size (keep one definition) */
.pill-sm{
  padding:6px 14px;               /* a bit larger so it “reads” as a button */
  font-size:.9rem; line-height:1.1; border-radius:9999px;
}

/* Stack the auth pill and the email neatly on the right */
.nav-auth {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 7px;
}

/* Email under the pill: darker color so it shows on white nav */
.nav-email {
  display: none;                      /* JS toggles to block when authed */
  color: #666;                        /* was too light (#eee) on white */
  font-size: 12px;
  line-height: 1.1;
  max-width: 200px;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  cursor: help;
}

.pill { 
  border: none;              /* shared look */
  text-decoration: none;
}

/* reset native button border so it matches the <a> */
button.pill{ appearance:none; -webkit-appearance:none; border:none; background:inherit; }