/* ============================================================================
   HAUL ADZ — SHARED PUBLIC HEADER + FOOTER COMPONENT  (PX-1)
   Canonical public nav (FD-2 spaced wordmark, FD-4 "Get My Recommendation"
   primary CTA) + working mobile drawer + footer. Mirrors the index/plans
   anchor pages exactly, so every public page renders one identical header.

   Namespaced under .ha-nav / .ha-drawer / .ha-footer and one class level
   deeper than a bare element selector, so it overrides any page-local
   nav{}/footer{} inline rules by SPECIFICITY — adopting pages do not need to
   delete their old header CSS. Consumes foundation tokens only.
   ============================================================================ */

/* --- Header ---------------------------------------------------------------- */
nav.ha-nav{position:fixed;top:0;left:0;right:0;z-index:9999;height:62px;display:flex;align-items:center;padding:0 40px;gap:30px;background:rgba(10,9,8,.92);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border)}
.ha-nav .nav-logo{font-family:var(--font-display);font-size:1.5rem;letter-spacing:3px;color:var(--yellow);text-decoration:none;white-space:nowrap}
.ha-nav .nav-logo span{color:var(--white)}
.ha-nav .nav-links{display:flex;gap:26px;margin-left:auto}
.ha-nav .nav-links a{font-size:.78rem;font-weight:600;letter-spacing:.5px;color:var(--muted);text-decoration:none;transition:color .18s}
.ha-nav .nav-links a:hover,.ha-nav .nav-links a.active{color:var(--yellow)}
.ha-nav .nav-actions{display:flex;gap:10px;align-items:center;margin-left:0}

/* Buttons (shared by header + drawer) */
.ha-nav .btn,.ha-drawer .btn{font-family:var(--font-text);font-size:.86rem;font-weight:700;letter-spacing:.2px;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:8px;border-radius:11px;padding:13px 24px;transition:background .18s,border-color .18s,transform .1s;border:1px solid transparent;text-transform:none;line-height:1}
.ha-nav .btn:active,.ha-drawer .btn:active{transform:translateY(1px)}
.ha-nav .btn-primary,.ha-drawer .btn-primary{background:var(--yellow);color:#000}
.ha-nav .btn-primary:hover,.ha-drawer .btn-primary:hover{background:var(--yellow2)}
.ha-nav .btn-ghost,.ha-drawer .btn-ghost{background:transparent;color:var(--white);border-color:var(--border)}
.ha-nav .btn-ghost:hover,.ha-drawer .btn-ghost:hover{border-color:var(--border-y)}

/* Burger */
.ha-nav .nav-burger{display:none;flex-direction:column;gap:4px;background:none;border:none;cursor:pointer;padding:8px;margin-left:auto}
.ha-nav .nav-burger span{width:22px;height:2px;background:var(--yellow);display:block}

/* --- Mobile drawer --------------------------------------------------------- */
.ha-drawer{display:none;position:fixed;top:62px;left:0;right:0;z-index:9990;background:rgba(10,9,8,.98);-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-bottom:1px solid var(--border);padding:16px 24px 24px;flex-direction:column;gap:2px}
.ha-drawer.open{display:flex}
.ha-drawer a{color:var(--muted);text-decoration:none;font-size:.85rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:12px 0;border-bottom:1px solid var(--border)}
.ha-drawer a:hover{color:var(--yellow)}
.ha-drawer .drawer-actions{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.ha-drawer .drawer-actions a{justify-content:center;text-align:center;border-bottom:none;padding:13px 16px}

@media(max-width:980px){
  nav.ha-nav{padding:0 20px}
  .ha-nav .nav-links,.ha-nav .nav-actions{display:none}
  .ha-nav .nav-burger{display:flex}
}

/* --- Footer ---------------------------------------------------------------- */
footer.ha-footer{background:var(--surface-raised);border-top:1px solid var(--border);padding:44px 40px;text-align:left}
.ha-footer .footer-grid{max-width:1180px;margin:0 auto;display:flex;flex-wrap:wrap;gap:32px;justify-content:space-between}
.ha-footer .footer-col{min-width:150px}
/* PX-12/WS16 — footer column labels are semantically h3 (an h5 after an h2 skips
   two levels). Both selectors are styled identically so the visual label is
   unchanged on pages that have migrated and on any that have not yet. */
.ha-footer .footer-col h5,.ha-footer .footer-col h3{font-size:.6rem;letter-spacing:2px;text-transform:uppercase;color:var(--muted2);margin-bottom:12px}
.ha-footer .footer-col a{display:block;font-size:.82rem;color:var(--muted);text-decoration:none;margin-bottom:8px}
.ha-footer .footer-col a:hover{color:var(--yellow)}
.ha-footer .footer-col .nav-logo{font-family:var(--font-display);font-size:1.3rem;letter-spacing:2px;color:var(--yellow);text-decoration:none;margin-bottom:0}
.ha-footer .footer-col .nav-logo span{color:var(--white)}
.ha-footer .footer-col p{font-size:.8rem;color:var(--muted2);max-width:240px;margin-top:12px;line-height:1.6}
.ha-footer .footer-bottom{max-width:1180px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--border);font-size:.72rem;color:var(--muted2)}
.ha-footer .footer-bottom a{color:inherit}

@media(max-width:980px){footer.ha-footer{padding:32px 20px}}