/* ============================================================
   NAV.CSS — canonical site navigation styles
   ------------------------------------------------------------
   Single source of truth for the masthead, the mobile menu and
   the sticky bottom action bar. Every page links this file and
   pairs it with /assets/js/nav.js; no page should re-declare
   .nav-* rules inline. Add a page by including the two tags:

     <link rel="stylesheet" href="/assets/css/nav.css?v=1">
     <script src="/assets/js/nav.js?v=1" defer></script>

   Depends on the design tokens declared in each page's :root
   (--ink, --bone, --cream, --rule, --rule-strong, --stone,
   --stone-2, --terracotta, --terracotta-deep, --pad, --display,
   --body).
   ============================================================ */

/* ---------- Masthead layout hardening ----------
   The bar is a single flex row holding brand + links + phone +
   CTA. Without min-width:0 on the flex children the phone number
   (white-space:nowrap) refuses to shrink and pushes the CTA out
   of the viewport, overlapping the brand on narrow screens. */
.nav-inner{gap:16px;min-width:0}
.brand{flex:0 0 auto;min-width:0}
.nav-phone{flex:0 1 auto;min-width:0;white-space:nowrap}
.nav-cta{flex:none;white-space:nowrap}

/* ---------- Mobile menu trigger ---------- */
.nav-toggle{display:none;flex:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;flex-direction:column;gap:5px;border:1px solid var(--rule-strong);background:var(--cream);cursor:pointer}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--ink);transition:transform .25s,opacity .2s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Desktop: the panel and the sticky bar do not exist. */
.nav-mobile{display:none}
.mobile-bar{display:none}

/* Collapse verbose labels so the bar never overruns the viewport. */
@media(max-width:640px){
  .nav-inner{height:62px;gap:10px}
  .brand-sub{display:none}
  .nav-cta{padding:10px 15px;font-size:12px}
}
@media(max-width:430px){
  .nav-cta svg{display:none}
}

/* ---------- Phone / tablet ----------
   Below 820px the inline links, the phone and the CTA all give
   way to the hamburger: the phone number and the quote CTA stay
   reachable through the panel and the sticky bottom bar. */
@media(max-width:820px){
  .nav-links{display:none}
  .nav-phone,.nav-cta{display:none}
  .nav-toggle{display:flex}

  .nav-mobile{display:block;position:absolute;top:100%;left:0;right:0;background:var(--cream);border-bottom:1px solid var(--rule);box-shadow:0 26px 44px -26px rgba(15,17,21,.5);max-height:calc(100vh - 64px);overflow-y:auto;visibility:hidden;opacity:0;transform:translateY(-10px);transition:transform .25s ease,opacity .2s ease,visibility .2s}
  .nav-mobile.open{visibility:visible;opacity:1;transform:none}
  .nav-mobile nav{display:flex;flex-direction:column;padding:6px var(--pad) 88px}
  .nav-mobile a{padding:15px 2px;border-bottom:1px solid var(--rule);font-size:17px;font-weight:600;color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:.01em}
  .nav-mobile a:hover{color:var(--terracotta-deep)}

  /* Services collapse behind a <details> accordion rather than
     dumping all eleven service links into the panel. */
  .nav-m-acc{border-bottom:1px solid var(--rule)}
  .nav-m-acc summary{list-style:none;cursor:pointer;padding:15px 2px;font-size:17px;font-weight:600;color:var(--ink);font-family:var(--display);text-transform:uppercase;letter-spacing:.01em;display:flex;align-items:center;justify-content:space-between}
  .nav-m-acc summary::-webkit-details-marker{display:none}
  .nav-m-acc summary::after{content:"+";font-size:24px;font-weight:300;line-height:1;color:var(--terracotta-deep)}
  .nav-m-acc[open] summary::after{content:"\2013"}
  .nav-m-sub{display:flex;flex-direction:column;padding:2px 0 10px}
  .nav-m-sub a{padding:12px 0 12px 18px;font-size:14px;font-family:var(--body);text-transform:none;letter-spacing:0;color:var(--stone);font-weight:500;border-bottom:1px dashed var(--rule)}
  .nav-m-sub a:last-child{border-bottom:0}
  .nav-mobile-call{color:var(--terracotta-deep) !important}

  /* ---------- Sticky bottom action bar ---------- */
  .mobile-bar{display:grid;grid-template-columns:1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--ink);box-shadow:0 -8px 24px rgba(15,17,21,.28);padding-bottom:env(safe-area-inset-bottom)}
  .mobile-bar a{display:flex;align-items:center;justify-content:center;gap:9px;padding:16px 10px;font-size:14px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:var(--bone)}
  .mobile-bar a svg{width:17px;height:17px;flex:none}
  .mobile-bar .mb-call{border-right:1px solid rgba(255,255,255,.14)}
  .mobile-bar .mb-quote{background:var(--terracotta);color:var(--ink)}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom))}
}