/* Progressive-enhancement layer for the static Ecoastix build.
   Uses the site's existing palette; does not alter the original look. */
html { scroll-behavior: smooth; }

/* Call modal: hidden until shown by app.js */
#callModal { display: none !important; }
#callModal.show { display: flex !important; }

/* Mobile menu panel */
.site-mobile-menu {
  position: fixed;
  top: 0; right: 0;
  height: 100%;
  width: min(84vw, 320px);
  background: #ffffff;
  box-shadow: -8px 0 30px rgba(15, 23, 42, 0.18);
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 84px 20px 28px;
  transform: translateX(100%);
  transition: transform .28s ease;
  overflow-y: auto;
}
.site-mobile-menu:not([hidden]) { transform: translateX(0); }
.site-mobile-menu[hidden] { display: flex !important; } /* keep for slide transition */
.site-mobile-menu button,
.site-mobile-menu a {
  text-align: left;
  font-size: 15px;
  font-weight: 600;
  color: #0f172a;
  padding: 13px 10px;
  border: 0;
  background: transparent;
  border-bottom: 1px solid #eef2f7;
  text-decoration: none;
  cursor: pointer;
  width: 100%;
  display: block;
}
.site-mobile-menu button:hover,
.site-mobile-menu a:hover { color: #0284c7; }
.site-mobile-menu .mm-call {
  margin-top: 16px;
  text-align: center;
  background: linear-gradient(90deg,#0284c7,#0ea5e9);
  color: #fff;
  border-radius: 10px;
  border-bottom: 0;
  padding: 14px;
  box-shadow: 0 8px 20px rgba(2,132,199,.35);
}
/* dim backdrop behind mobile menu */
#menuBackdrop {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  z-index: 55;
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
#menuBackdrop.show { opacity: 1; pointer-events: auto; }

/* Respect users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-mobile-menu { transition: none; }
}

/* ---- Mobile header fix ----
   On phones/tablets the full nav is collapsed into the hamburger. The header
   phone button is redundant there (CALL NOW sits in the top bar and the menu)
   and was colliding with the logo as the viewport narrowed, so hide it below
   the desktop breakpoint. */
@media (max-width: 1023px) {
  .hdr-phone { display: none !important; }
}

/* ---- Legal / content pages ---- */
.legal{background:#f1f5f9;padding:48px 16px 72px;}
.legal-inner{max-width:760px;margin:0 auto;background:#fff;border:1px solid #e8edf3;border-radius:14px;padding:clamp(24px,5vw,44px);box-shadow:0 10px 30px rgba(15,23,42,.05);}
.legal-eyebrow{font-size:11px;font-weight:700;letter-spacing:.14em;color:#0284c7;text-transform:uppercase;margin-bottom:10px;}
.legal-inner h1{font-family:'Plus Jakarta Sans',sans-serif;font-weight:800;font-size:clamp(26px,5vw,38px);color:#0f1a2e;line-height:1.15;margin:0 0 8px;}
.legal-updated{font-size:13px;color:#64748b;margin-bottom:28px;}
.legal-inner h2{font-family:'Plus Jakarta Sans',sans-serif;font-weight:700;font-size:19px;color:#0f1a2e;margin:30px 0 10px;}
.legal-inner p{color:#334155;line-height:1.7;margin:0 0 14px;font-size:15.5px;}
.legal-inner ul{margin:0 0 16px;padding-left:22px;}
.legal-inner li{color:#334155;line-height:1.7;margin-bottom:8px;font-size:15.5px;}
.legal-inner a{color:#0284c7;text-decoration:underline;}
.legal-inner a:hover{color:#0369a1;}
.legal-cta{margin-top:36px;padding-top:24px;border-top:1px solid #e8edf3;text-align:center;}
.legal-cta p{font-weight:600;color:#0f1a2e;margin-bottom:12px;}
.legal-call{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:linear-gradient(90deg,#16a34a,#15803d);color:#fff !important;font-weight:700;padding:14px 28px;border-radius:10px;text-decoration:none !important;box-shadow:0 8px 20px rgba(22,163,74,.3);}
.legal-contactgrid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin:8px 0 10px;}
@media(max-width:600px){.legal-contactgrid{grid-template-columns:1fr;}}
.legal-contactcard{background:#f0f6ff;border:1px solid #dbeafe;border-radius:12px;padding:22px;}
.legal-contactcard h2{margin-top:0;}
.legal-bigphone{font-size:24px;font-weight:800;color:#0284c7 !important;text-decoration:none !important;}
.legal-bigemail{font-weight:700;color:#0284c7 !important;text-decoration:none !important;word-break:break-all;}
.legal-muted{color:#64748b;font-size:13px;}

/* ---- Persistent mobile call bar (call-campaign CTA) ----
   Always-visible tap-to-call on phones/tablets, where the header phone
   button is hidden. Keeps the primary conversion action one tap away. */
.mobile-call-bar{ display:none; }
@media (max-width: 1023px){
  .mobile-call-bar{
    display:flex; align-items:center; justify-content:center; gap:10px;
    position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:linear-gradient(90deg,#16a34a,#15803d);
    color:#fff !important; font-weight:800; font-size:17px; letter-spacing:.01em;
    padding:15px 16px; padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));
    text-decoration:none !important;
    box-shadow:0 -4px 22px rgba(2,6,23,.22);
  }
  .mobile-call-bar svg{ width:20px; height:20px; }
  /* keep footer/content clear of the fixed bar */
  body{ padding-bottom:62px; }
}