/* ==========================================================================
   BamPro shared header nav — mobile burger menu
   Loaded on every page. Uses CSS variables defined inline in each page.
   ========================================================================== */

.nav-toggle{
  display:none;background:none;border:none;margin:0;padding:8px;
  width:40px;height:40px;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  cursor:pointer;color:var(--ink);flex-shrink:0;
  transition:color .18s ease;
}
.nav-toggle:hover{color:var(--forest)}
.nav-toggle span{
  display:block;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform .3s ease,opacity .2s ease;
}
.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)}

.mobile-menu-backdrop{
  position:fixed;inset:0;background:rgba(30,61,40,.45);z-index:99;
  opacity:0;pointer-events:none;transition:opacity .3s ease;
  backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);
}
.mobile-menu-backdrop.is-open{opacity:1;pointer-events:auto}

.mobile-menu{
  position:fixed;top:0;right:0;bottom:0;width:min(360px,88vw);
  background:var(--white);z-index:100;
  padding:72px 32px 32px;
  transform:translateX(100%);transition:transform .32s cubic-bezier(.4,0,.2,1);
  overflow-y:auto;box-shadow:-8px 0 32px rgba(0,0,0,.12);
  display:flex;flex-direction:column;
}
.mobile-menu.is-open{transform:translateX(0)}

.menu-close{
  position:absolute;top:18px;right:22px;background:none;border:none;
  font-size:28px;font-weight:300;color:var(--ink);cursor:pointer;padding:8px;
  line-height:1;transition:color .18s ease;
}
.menu-close:hover{color:var(--forest)}

.mobile-menu ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column}
.mobile-menu li a{
  display:block;padding:16px 0;font-size:16px;font-weight:500;
  color:var(--ink);border-bottom:1px solid var(--hair);
  letter-spacing:.005em;transition:color .18s ease,padding-left .18s ease;
}
.mobile-menu li a:hover{color:var(--forest);padding-left:6px}
.mobile-menu li a.is-current{color:var(--forest);font-weight:600}
.mobile-menu .actions{
  margin-top:auto;padding-top:28px;
  display:flex;flex-direction:column;gap:12px;
}
.mobile-menu .btn{width:100%;justify-content:center;padding:14px 22px}

@media (max-width:980px){
  .nav-toggle{display:flex}
  .nav{display:none}
  /* Burger menu carries the CTAs on mobile — hide the header-desktop CTA block */
  .header .cta{display:none}
  /* Compact header padding on mobile — reclaims ~20px of top-of-screen */
  .header .wrap{padding-top:14px !important;padding-bottom:14px !important;gap:12px}
}
@media (max-width:620px){
  .header .wrap{padding-top:12px !important;padding-bottom:12px !important}
  .lockup img{height:36px !important}
}
body.menu-open{overflow:hidden}

/* ---------- Floating contact buttons ---------- */
/* No page carries a visible phone number — the only one lives in the homepage
   JSON-LD, which serves search engines and no human ever sees. WhatsApp shows at
   every breakpoint; Call is phones-only, where tapping it actually dials.
   Sits under the burger menu (z-index 99/100) and hides while the menu is open.
   Deliberately absent from /contact-us, where it would sit over the submit
   button of the enquiry form. */
.quick-contact{
  position:fixed;right:22px;bottom:22px;z-index:60;
  display:flex;flex-direction:column-reverse;align-items:flex-end;gap:12px;
}
.qc-fab{
  width:58px;height:58px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  /* white ring keeps both buttons separated from the full-bleed forest bands
     (.trust and the PDF band are var(--forest) = #1e3d28) */
  box-shadow:0 0 0 2px rgba(255,255,255,.92),0 6px 20px rgba(30,61,40,.28);
  transition:transform .18s ease,box-shadow .18s ease;
  -webkit-tap-highlight-color:transparent;
}
.qc-fab svg{width:29px;height:29px;fill:#fff;display:block}
.qc-fab--wa{background:#25d366}
/* Call was #1e3d28 — identical to the forest bands, so it vanished whenever it
   scrolled over one. White reads against both the forest sections and the cream. */
.qc-fab--call{background:#fff;width:48px;height:48px}
.qc-fab--call svg{width:23px;height:23px;fill:#1e3d28}
.qc-fab:hover,.qc-fab:focus-visible{transform:translateY(-2px);box-shadow:0 0 0 2px rgba(255,255,255,.92),0 11px 26px rgba(30,61,40,.34)}
.qc-fab:focus-visible{outline:2px solid #1e3d28;outline-offset:3px}
/* Call is only useful where tapping it dials */
@media (min-width:621px){ .qc-fab--call{display:none} }
@media (max-width:620px){
  .quick-contact{right:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));gap:10px}
  .qc-fab{width:54px;height:54px}
  .qc-fab svg{width:27px;height:27px}
}
body.menu-open .quick-contact{display:none}
@media (prefers-reduced-motion:reduce){ .qc-fab{transition:none} }