/* ═══════════════════════════════════════════════════════════
   THE CHILL SQUAD — NAV DROPDOWN MENUS
   Hover / focus panels for Services, Areas and Blog.
   Loaded last on every page so these rules win over the nav
   styles in city.css and the inline <style> block in index.html.
   ═══════════════════════════════════════════════════════════ */

/* The links row is stretched to the full height of the bar. Without this it
   is only as tall as the text and sits centred, leaving ~20px of dead space
   between the bottom of a link and the top of its panel — the pointer loses
   the link on the way down and the panel closes before it can be reached.
   Also unifies the desktop link spacing with the home page (2.5rem). */
.nav-links{align-items:center;align-self:stretch;gap:2.5rem}
/* index.html's inline nav styles omit this, so the current-section highlight
   is defined here where every page picks it up. */
.nav-links a.active{color:var(--red)}

/* A nav link that owns a panel. Kept position:static on purpose so the
   panel positions against <nav> itself and can span the full bar. The
   item stretches to the full height of the bar so there is no dead gap
   between the link and the panel for the pointer to fall through. */
.nav-item{
  position:static;
  align-self:stretch;
  display:flex;align-items:center;gap:.3rem;
}
/* Full-bar-height hit areas, so the item is hovered edge to edge and the
   panel opens flush against it. */
.nav-item > a,
.nav-item > .nav-sub-toggle{align-self:stretch}
.nav-item > a{display:flex;align-items:center;white-space:nowrap}

/* Caret. Hover opens the panel on its own; the caret is the click and
   keyboard route to the same panel, on desktop and in the drawer alike. */
.nav-sub-toggle{
  display:flex;align-items:center;justify-content:center;
  padding:0;margin:0;background:none;border:none;
  color:var(--muted);cursor:pointer;
  transition:color .2s,transform .2s;
}
.nav-caret{
  display:block;width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
}
.nav-item:hover .nav-sub-toggle,
.nav-item:focus-within .nav-sub-toggle,
.nav-item.open .nav-sub-toggle{color:var(--white);transform:rotate(180deg)}

/* ─────────── Panel ─────────── */
.nav-menu{
  position:absolute;top:100%;left:50%;
  transform:translateX(-50%) translateY(-8px);
  width:min(1020px,calc(100vw - 3rem));
  padding:1.75rem 2rem;
  background:rgba(9,9,11,0.98);
  backdrop-filter:blur(20px);
  border:1px solid var(--border2);border-top:none;
  border-radius:0 0 4px 4px;
  box-shadow:0 26px 60px rgba(0,0,0,0.55);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .18s ease,transform .18s ease,visibility .18s;
  z-index:99;
}
.nav-menu.narrow{width:min(600px,calc(100vw - 3rem))}
.nav-item:hover > .nav-menu,
.nav-item:focus-within > .nav-menu,
.nav-item.open > .nav-menu{
  opacity:1;visibility:visible;pointer-events:auto;
  transform:translateX(-50%) translateY(0);
}

.nav-menu-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem 2rem}
.nav-menu.narrow .nav-menu-grid{grid-template-columns:1fr}
.nav-menu-col{display:flex;flex-direction:column;min-width:0}
.nav-menu-head{
  font-family:'Barlow Condensed',sans-serif;
  font-size:15px;font-weight:700;
  letter-spacing:0.2em;text-transform:uppercase;
  color:var(--red);
  padding-bottom:.5rem;margin-bottom:.45rem;
  border-bottom:1px solid var(--border2);
}

/* Panel links. Two classes deep so they beat .nav-links a everywhere,
   including inside the 640px drawer rules. */
.nav-links .nav-menu a{
  font-family:'Barlow Condensed',sans-serif;
  font-size:18px;font-weight:600;
  letter-spacing:0.06em;text-transform:none;
  color:var(--white);text-decoration:none;
  padding:.38rem .5rem;margin-left:-.5rem;
  border:none;border-radius:3px;
  transition:color .15s,background .15s;
}
.nav-links .nav-menu a:hover,
.nav-links .nav-menu a:focus-visible{color:var(--red);background:rgba(255,255,255,0.05)}
.nav-links .nav-menu a[aria-current="page"]{color:var(--red)}

.nav-menu-posts{
  display:grid;grid-template-columns:1fr 1fr;gap:0 1.75rem;
  max-height:min(58vh,430px);overflow-y:auto;overscroll-behavior:contain;
}
.nav-menu-note{
  grid-column:1 / -1;
  font-family:'Barlow',sans-serif;font-size:15px;
  color:var(--muted);padding:.5rem 0;
}

.nav-menu-foot{margin-top:1.25rem;padding-top:1rem;border-top:1px solid var(--border2)}
.nav-links .nav-menu-foot a{
  color:var(--red);font-size:18px;font-weight:700;
  letter-spacing:0.14em;text-transform:uppercase;
  margin-left:-.5rem;
}
.nav-links .nav-menu-foot a:hover{color:var(--red2);background:none}

/* Narrower bars: keep the panel inside the viewport. */
@media(max-width:1100px){
  .nav-menu-grid{gap:1.25rem 1.5rem}
  .nav-links .nav-menu a{font-size:17px}
}
@media(max-width:900px){
  .nav-menu-grid{grid-template-columns:repeat(2,1fr)}
}

/* Six sections in the bar (Services, About Us, Financing, Areas, Blog,
   Contact) need more room than the original five, so the bar tightens in
   steps on the way down to the 640px drawer instead of overflowing. */
@media(max-width:1200px){
  nav{padding:0 1.5rem}
  .nav-links{gap:1.35rem}
  .nav-links a{font-size:20px;letter-spacing:.1em}
  .nav-right{gap:.9rem}
  .nav-phone{font-size:20px}
  .nav-cta{font-size:20px;padding:.5rem 1.1rem;letter-spacing:.1em}
}
@media(max-width:980px){
  nav{padding:0 1.25rem}
  .nav-links{gap:1rem}
  .nav-links a{font-size:18px;letter-spacing:.06em}
  .nav-phone{display:none}
  .nav-cta{font-size:18px;padding:.45rem .95rem;letter-spacing:.08em}
}
@media(max-width:820px){
  .nav-links{gap:.7rem}
  .nav-links a{font-size:17px;letter-spacing:.03em}
  .nav-cta{font-size:17px;padding:.45rem .8rem;letter-spacing:.06em}
}

/* ─────────── Mobile drawer ─────────── */
@media(max-width:640px){
  nav.open .nav-links{
    max-height:calc(100vh - 64px);
    overflow-y:auto;overscroll-behavior:contain;
  }
  /* The step-downs above are for the desktop bar only. Inside the drawer the
     links go back to their full size. */
  .nav-links{align-self:auto;gap:0}
  .nav-links a{font-size:24px;letter-spacing:.18em}
  .nav-cta{font-size:18px;padding:.5rem 1rem;letter-spacing:.1em}

  .nav-item{
    align-self:auto;
    display:flex;flex-wrap:wrap;align-items:center;gap:0;
    border-bottom:1px solid var(--border2);
  }
  .nav-links .nav-item > a{flex:1 1 auto;border-bottom:none}
  .nav-sub-toggle{
    flex:0 0 auto;width:44px;align-self:stretch;
    color:var(--white);
  }
  .nav-caret{border-left-width:6px;border-right-width:6px;border-top-width:8px}
  .nav-item:hover .nav-sub-toggle,
  .nav-item:focus-within .nav-sub-toggle{transform:none}
  .nav-item.open .nav-sub-toggle{transform:rotate(180deg)}

  .nav-menu,.nav-menu.narrow{
    display:none;
    flex:0 0 100%;order:3;
    position:static;width:auto;transform:none;
    padding:0 0 1rem;
    background:none;backdrop-filter:none;
    border:none;border-radius:0;box-shadow:none;
    opacity:1;visibility:visible;pointer-events:auto;
  }
  .nav-item:hover > .nav-menu,
  .nav-item:focus-within > .nav-menu,
  .nav-item.open > .nav-menu{transform:none}
  .nav-item.open > .nav-menu{display:block}

  .nav-menu-grid,.nav-menu.narrow .nav-menu-grid{grid-template-columns:1fr;gap:1.25rem}
  .nav-menu-posts{grid-template-columns:1fr;max-height:none;overflow:visible}
  .nav-menu-head{font-size:14px;padding-bottom:.35rem;margin-bottom:.2rem}
  .nav-links .nav-menu a{font-size:19px;padding:.5rem}
  .nav-menu-foot{margin-top:.85rem;padding-top:.75rem}
  .nav-links .nav-menu-foot a{font-size:17px}
}