/* ==========================================================================
   Shared Header & Footer Styles — Roam Free VHR
   All pages link this file so nav + footer stay consistent site-wide.
   ========================================================================== */

/* ---- Site Nav ---- */
.site-nav{position:sticky;top:0;z-index:100;background:rgba(253,251,247,0.97);backdrop-filter:blur(8px);border-bottom:1px solid var(--color-neutral-200);padding:0 1.5rem}
.site-nav .nav-inner{max-width:1200px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;height:64px}
.site-nav-brand{display:flex;align-items:center;text-decoration:none}.site-nav-brand img{height:36px;width:auto}
.site-nav .nav-links{display:flex;gap:1.75rem;list-style:none}
.site-nav .nav-links a{font-family:var(--font-family-display,'Sora',sans-serif);font-size:.9rem;font-weight:600;color:var(--color-text);text-decoration:none;transition:color .2s}
.site-nav .nav-links a:hover{color:var(--color-brand)}
.site-nav .nav-btn{display:inline-block;padding:.65rem 1.4rem;border-radius:8px;font-family:var(--font-family-display,'Sora',sans-serif);font-weight:600;font-size:.9rem;background:var(--color-brand);color:var(--color-white);text-decoration:none;transition:all .2s}
.site-nav .nav-btn:hover{background:var(--color-brand-strong)}

/* Hamburger */
.hamburger{display:none;background:none;border:none;cursor:pointer;padding:4px}
.hamburger span{display:block;width:22px;height:2px;background:var(--color-text);margin:5px 0;border-radius:2px;transition:all .3s}

/* Mobile Menu */
.mobile-menu{display:none;background:var(--color-surface,#FDFBF7);border-bottom:1px solid var(--color-neutral-200);padding:1rem 1.5rem}
.mobile-menu a{display:block;font-family:var(--font-family-display,'Sora',sans-serif);font-size:.95rem;font-weight:600;color:var(--color-text);padding:.6rem 0;border-bottom:1px solid #f0f0f0;transition:color .2s;text-decoration:none}
.mobile-menu a:last-child{border:none}
.mobile-menu a:hover{color:var(--color-brand)}
.mobile-menu .nav-btn{display:block;text-align:center;margin-top:.75rem;color:var(--color-white);border-bottom:none}

/* Nav responsive */
@media(max-width:640px){
  .site-nav .nav-links{display:none}
  .site-nav .nav-btn{display:none}
  .hamburger{display:block}
  .mobile-menu.open{display:block}
}

/* ---- Footer ---- */
footer{background:var(--color-brand-strong,#1f5c55);color:rgba(255,255,255,.85);padding:2.5rem 1.5rem;text-align:center}
footer a{color:inherit;text-decoration:none}
.footer-inner{max-width:900px;margin:0 auto}
.footer-brand{font-size:1.5rem;margin-bottom:.75rem;display:flex;align-items:center;justify-content:center}
.footer-brand img{height:36px;width:auto;filter:brightness(0) invert(1)}
.footer-links{display:flex;gap:1.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:1.25rem;font-size:.875rem}
.footer-links a{color:rgba(255,255,255,.85);text-decoration:none;opacity:1;transition:opacity .2s}
.footer-links a:hover{opacity:1}
.footer-copy{font-size:.8rem;opacity:.85}

/* Footer padding on mobile, to clear the sticky CTA bar.
   Scoped with :has() so the 5 pages that link this file but ship no
   .sticky-cta (about, calculator, get-started, and both legal pages)
   stop rendering 4rem of dead space under the footer. */
@media(max-width:640px){
  body:has(.sticky-cta) footer{padding-bottom:4rem}
}