/* The site nav's hover and focus states, shared by every page with the marketing nav (owner, 2026-10-11: "better
 * mouseover effects on the links and buttons in the nav bar"). The links get an underline that draws in from the left;
 * Log in fills a shade darker; Start Free lifts with a soft shadow. Over the hero photo (the nav still clear) the same
 * moves in white. Loaded after each page's own styles. */
.nav-links a{position:relative;}
.nav-login,.nav-cta{transition:background .2s ease,border-color .2s ease,box-shadow .2s ease,transform .2s ease,color .2s ease;}
.nav-links a:focus-visible,.nav-login:focus-visible,.nav-cta:focus-visible{outline:2px solid #2F5FEA;outline-offset:3px;border-radius:999px;}

@media (hover:hover) and (min-width:861px){
  .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-5px;height:2px;border-radius:2px;background:currentColor;transform:scaleX(0);transform-origin:right center;transition:transform .28s cubic-bezier(.2,.7,.2,1);}
  .nav-links a:hover::after,.nav-links a:focus-visible::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left center;}
  .nav-links a:hover{color:var(--brand,#2F5FEA);} /* blue; the home page keeps its own, below */
  .nav-over-hero .nav-links a:hover{color:var(--ink);}
  .nav-over-hero:not(.scrolled):not(.open) .nav-links a:hover{color:#fff;}

  .nav-login:hover{background:color-mix(in srgb,var(--panel) 90%,var(--ink));}
  .nav-over-hero:not(.scrolled):not(.open) .nav-login:hover{background:rgba(255,255,255,.28);}

  .nav-cta:hover{transform:translateY(-1px);box-shadow:0 6px 16px -6px rgba(47,95,234,.65);}
  .nav-cta:active,.nav-login:active{transform:translateY(0);box-shadow:none;}
  .nav-over-hero:not(.scrolled):not(.open) .nav-cta:hover{background:#fff;color:var(--ink);border-color:#fff;box-shadow:0 6px 18px -6px rgba(0,0,0,.45);}
}

/* The open menu on a phone or a narrow window: rows that shade when touched or hovered. */
@media (max-width:860px){
  .nav-links a{transition:background .15s ease,padding .15s ease;}
  .nav-links a:hover,.nav-links a:active{background:rgba(22,21,15,.04);padding-left:8px;}
  .nav-login:hover,.nav-login:active{background:color-mix(in srgb,var(--panel) 90%,var(--ink));}
}

@media (prefers-reduced-motion:reduce){
  .nav-links a::after,.nav-login,.nav-cta,.nav-links a{transition:none;}
  .nav-cta:hover{transform:none;}
  nav.nav.nav-match-hero{transition:none;}
}

/* Once the page scrolls under it, the bar is frosted glass: a shade lighter than the page panel, the page blurred
 * through it (owner, 2026-10-11: "On scroll, make the top bar bg color be a little lighter and add a blur effect").
 * A sticky bar sits over the page only after it scrolls; the home page's bar stays clear over the hero photo until
 * .scrolled. The open phone menu stays solid. */
nav.nav{--nav-glass:rgba(251,250,247,.72);}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) nav.nav{--nav-glass:rgba(48,46,42,.72);}}
:root[data-theme="dark"] nav.nav{--nav-glass:rgba(48,46,42,.72);}
nav.nav:not(.open){background:var(--nav-glass);-webkit-backdrop-filter:saturate(1.6) blur(14px);backdrop-filter:saturate(1.6) blur(14px);}
nav.nav.nav-over-hero:not(.scrolled):not(.open){background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;}
nav.nav.open{background:var(--panel);}
/* /backyard-houses, /garages, /spaces only (the class is on those bars). At the top the bar is the
 * hero's own panel, so the two read as one block. The class is in the markup, so the first paint is
 * already that color. Once the hero has scrolled past, .scrolled returns the frosted bar. */
nav.nav.nav-match-hero{transition:background .35s ease,backdrop-filter .35s ease,-webkit-backdrop-filter .35s ease;}
nav.nav.nav-match-hero:not(.scrolled):not(.open){background:var(--panel);-webkit-backdrop-filter:none;backdrop-filter:none;}

/* Log in keeps its fill and text. The outline is the only change: a 1.5px edge in the ink color. */
nav.nav a.nav-login{border:1.5px solid rgba(22,21,15,.5);}

/* Full-viewport shade behind the open phone menu. It lives on <html>, not inside the bar, so no
 * overflow or transform on the nav can clip it to a strip. The open bar (and its panel) sit just above it. */
.nav-backdrop{
  position:fixed;inset:0;width:100%;height:100%;height:100dvh;z-index:80;
  background:rgba(0,0,0,.45);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;
}
.nav-backdrop.on{
  opacity:1;visibility:visible;pointer-events:auto;
  transition:opacity .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s;
}
html.nav-menu-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none;}

@media (max-width:860px){
  nav.nav.open{z-index:90;}
  html.nav-menu-open nav.nav{position:fixed;top:0;left:0;right:0;}
  /* Keep the panel in the tree so it can fade. Only opacity and transform move. */
  .nav-menu{
    display:flex;
    opacity:0;visibility:hidden;pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .24s cubic-bezier(.2,.8,.2,1),transform .24s cubic-bezier(.2,.8,.2,1),visibility 0s linear .24s;
  }
  .nav.open .nav-menu{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translateY(0);
    transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1),visibility 0s linear 0s;
  }
  .nav.open .nav-menu .nav-links a,
  .nav.open .nav-menu .nav-actions a{animation:nav-item-in .3s cubic-bezier(.2,.8,.2,1) both;}
  .nav.open .nav-menu .nav-links a:nth-child(1){animation-delay:.03s;}
  .nav.open .nav-menu .nav-links a:nth-child(2){animation-delay:.06s;}
  .nav.open .nav-menu .nav-links a:nth-child(3){animation-delay:.09s;}
  .nav.open .nav-menu .nav-links a:nth-child(4){animation-delay:.12s;}
  .nav.open .nav-menu .nav-links a:nth-child(5){animation-delay:.15s;}
  .nav.open .nav-menu .nav-actions a:nth-child(1){animation-delay:.18s;}
  .nav.open .nav-menu .nav-actions a:nth-child(2){animation-delay:.21s;}

  .nav-toggle{position:relative;}
  .nav-toggle .bar-open,.nav-toggle .bar-close{
    position:absolute;inset:0;margin:auto;display:block;
    transition:opacity .3s cubic-bezier(.2,.8,.2,1),transform .3s cubic-bezier(.2,.8,.2,1);
  }
  .nav-toggle .bar-open{opacity:1;transform:rotate(0deg);}
  .nav-toggle .bar-close{opacity:0;transform:rotate(-90deg);}
  .nav.open .nav-toggle .bar-open{display:block;opacity:0;transform:rotate(90deg);}
  .nav.open .nav-toggle .bar-close{display:block;opacity:1;transform:rotate(0deg);}
}
@keyframes nav-item-in{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

@media (prefers-reduced-motion:reduce){
  .nav-backdrop,
  .nav-backdrop.on,
  .nav-menu,
  .nav.open .nav-menu,
  .nav-toggle .bar-open,
  .nav-toggle .bar-close,
  .nav.open .nav-toggle .bar-open,
  .nav.open .nav-toggle .bar-close,
  .nav.open .nav-menu .nav-links a,
  .nav.open .nav-menu .nav-actions a{
    transition:none !important;animation:none !important;
  }
  .nav-menu,.nav.open .nav-menu{transform:none;}
}