/* XN Car Detailing — shared site chrome (nav drawer + top CTAs).
   Loaded after each page's inline <style> so it wins on cascade. */

/* ── NAV: call button + hamburger ── */
.nav-call,.nav-toggle{display:none}

.nav-call{
  align-items:center;gap:.4rem;
  padding:.55rem .95rem;border-radius:6px;
  font-weight:800;font-size:.8rem;letter-spacing:.03em;text-transform:uppercase;
  border:2px solid currentColor;color:var(--orange,var(--blue,#c9a227));
  background:transparent;transition:background .2s;
}
.nav-call svg{width:15px;height:15px;flex-shrink:0;fill:currentColor}

.nav-toggle{
  flex-direction:column;justify-content:center;gap:5px;
  width:42px;height:42px;padding:0 9px;margin-left:.15rem;
  background:transparent;border:1px solid var(--border,rgba(0,0,0,.12));border-radius:9px;
  cursor:pointer;flex-shrink:0;
}
.nav-toggle span{
  display:block;height:2px;width:100%;border-radius:2px;
  background:currentColor;color:inherit;
  transition:transform .25s ease,opacity .2s ease;
}
.nav-toggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.open span:nth-child(2){opacity:0}
.nav-toggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:768px){
  .nav-call,.nav-toggle{display:flex}
  .nav-book{padding:.55rem 1rem !important;font-size:.8rem !important}

  /* turn the existing link list into a drop-down drawer */
  nav .nav-links{
    display:flex !important;flex-direction:column;align-items:stretch;gap:0;
    position:absolute;top:100%;left:0;right:0;
    padding:.5rem 1.25rem 1.1rem;
    background:var(--black,#0a0a0a);
    border-bottom:1px solid var(--border,rgba(0,0,0,.12));
    box-shadow:0 14px 28px rgba(0,0,0,.18);
    max-height:calc(100vh - 100%);overflow-y:auto;
    transform:translateY(-8px);opacity:0;visibility:hidden;pointer-events:none;
    transition:transform .24s ease,opacity .2s ease,visibility .24s;
  }
  nav .nav-links.open{transform:translateY(0);opacity:1;visibility:visible;pointer-events:auto}
  nav .nav-links a{
    padding:.95rem .2rem;font-size:.98rem;font-weight:600;
    border-bottom:1px solid var(--border,rgba(0,0,0,.09));
  }
  nav .nav-links a:last-child{border-bottom:0}

  /* the old bottom bar is replaced by the top CTAs */
  .sticky-cta{display:none !important}
  body{padding-bottom:0 !important}
}

/* very small phones: keep the bar from wrapping */
@media(max-width:400px){
  .nav-call{padding:.5rem .7rem;font-size:.72rem}
  .nav-call .nav-call-txt{display:none}
  .nav-logo img{width:34px !important;height:34px !important}
  .nav-logo-text{font-size:.95rem !important}
}