/**
 * Global mobile-first responsive layer (nationwide / template1 + generated sites).
 * Loaded last so shared components inherit fluid layout, touch targets, and
 * overflow guards without changing brand colors or desktop composition.
 */

:root {
  --rp-container: min(1200px, calc(100% - clamp(1.25rem, 4vw, 2.5rem)));
  --rp-space-1: clamp(0.5rem, 1.5vw, 0.75rem);
  --rp-space-2: clamp(0.75rem, 2vw, 1.25rem);
  --rp-space-3: clamp(1rem, 3vw, 2rem);
  --rp-space-4: clamp(1.5rem, 4vw, 3rem);
  --rp-touch: 44px;
  --rp-header-offset: 0px;
  --rp-safe-bottom: env(safe-area-inset-bottom, 0px);
  --rp-safe-top: env(safe-area-inset-top, 0px);
}

/* ---------- Base / box model ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  width: 100%;
  max-width: 100%;
  overflow-x: clip;
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

img,
video,
svg,
canvas,
iframe,
embed,
object {
  max-width: 100%;
  height: auto;
}

iframe {
  width: 100%;
  max-width: 100%;
  border: 0;
}

picture,
figure {
  max-width: 100%;
}

/* ---------- Containers & layout primitives ---------- */
.container,
.header-inner,
.footer-inner,
.topbar__inner {
  width: var(--rp-container);
  max-width: 100%;
  margin-inline: auto;
}

.row,
.grid,
.services-grid,
.serveGrid,
.areaGrid,
.citiesGrid,
.metric-grid,
.trust-grid,
.faq-grid,
.contact-grid,
.hero__grid,
.locationIntro__inner {
  min-width: 0;
}

/* Long strings must not force horizontal scroll */
a,
p,
h1, h2, h3, h4, h5, h6,
li,
span,
label,
td,
th,
.nav__areaLabel,
.breadcrumb,
.breadcrumbs {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ---------- Typography (fluid) ---------- */
h1, .hero h1, .page-banner h1, .templatePageBanner h1 {
  font-size: clamp(1.65rem, 1.1rem + 2.4vw, 3rem);
  line-height: 1.15;
}

h2, .section-title, .landmarkHub__title {
  font-size: clamp(1.35rem, 1rem + 1.5vw, 2.25rem);
  line-height: 1.2;
}

h3 {
  font-size: clamp(1.1rem, 0.95rem + 0.8vw, 1.5rem);
  line-height: 1.25;
}

p, li, .hero__sub, .landmarkHub__sub {
  font-size: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem);
  line-height: 1.6;
}

/* ---------- Touch targets & controls ---------- */
a.btn,
.btn,
button.btn,
.header-call-btn,
.mobile-toggle,
.nav-link,
input[type="submit"],
button[type="submit"] {
  min-height: var(--rp-touch);
}

input,
select,
textarea,
button {
  max-width: 100%;
  font-size: 16px; /* prevents iOS focus zoom */
}

textarea {
  min-height: 7rem;
  resize: vertical;
}

form {
  max-width: 100%;
}

/* ---------- Media / maps ---------- */
.map iframe,
.contact-map iframe,
.contactEmbeddedMap iframe,
[class*="map"] iframe {
  width: 100%;
  max-width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  min-height: 220px;
}

/* ---------- Tables ---------- */
table {
  max-width: 100%;
}

.table-wrap,
.table-responsive,
.responsive-table {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.container > table,
.locationIntro table,
.prose table,
article table {
  display: block;
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Fixed / sticky / overlays ---------- */
.site-header-sticky,
.main-header,
.sticky-header {
  max-width: 100%;
}

.fab-call,
.fabCall,
[class*="fab"],
.cookie-consent,
.cookieConsent,
.scroll-navigator,
.back-to-top {
  max-width: calc(100vw - 1.5rem);
  bottom: max(0.75rem, var(--rp-safe-bottom));
}

.modal,
.dialog,
[role="dialog"] {
  max-width: min(100%, 100vw);
}

.dropdown,
.nav-dropdown-content,
.areasServeZipFlyout {
  max-width: min(100vw - 1rem, 100%);
}

/* ---------- Areas We Serve hierarchy (mobile drawer) ---------- */
@media (max-width: 1100px) {
  .main-header .nav-item.has-dropdown.active .dropdown.nav-dropdown-content {
    max-height: min(70vh, 520px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  .areasServeHierarchy,
  .areasServeZipFlyout {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  .areasServeHierarchy .areasServeZipFlyout__list {
    max-height: min(48vh, 360px);
  }

  .areasServeDrill__row > .nav__areaLink {
    min-height: var(--rp-touch);
  }

  .areasServeDrill__toggle {
    min-width: var(--rp-touch);
    min-height: var(--rp-touch);
  }
}

/* ---------- Topbar: allow wrap on small screens ---------- */
@media (max-width: 768px) {
  .topbar__tagline {
    white-space: normal;
  }

  .topbar__inner {
    grid-template-columns: 1fr;
    gap: 0.5rem;
    text-align: center;
  }

  .topbar__left,
  .topbar__center,
  .topbar__right {
    justify-self: center;
  }
}

/* ---------- Hero / banners ---------- */
.hero,
.page-banner,
.templatePageBanner {
  max-width: 100%;
  overflow: hidden;
}

.hero__content,
.hero__copy,
.hero__form,
.hero-contact-form {
  min-width: 0;
  max-width: 100%;
}

@media (max-width: 900px) {
  .hero__grid,
  .hero-grid,
  .hero .grid-2,
  .contact-grid,
  .about-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--rp-space-3);
  }

  .hero__form,
  .hero-contact-form,
  .contact-form,
  .contactDockForm {
    width: 100%;
    max-width: 100%;
  }
}

/* ---------- Grids / cards collapse ---------- */
@media (max-width: 1024px) {
  .services-grid,
  .serveGrid,
  .metric-grid,
  .trust-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 640px) {
  .services-grid,
  .serveGrid,
  .metric-grid,
  .trust-grid,
  .areaGrid,
  .citiesGrid,
  .faq-grid,
  .provincesGrid,
  .serveGrid__grid {
    grid-template-columns: 1fr !important;
  }

  .container {
    width: min(100% - 1.5rem, 1200px);
  }

  .btn,
  a.btn,
  .header-call-btn {
    width: auto;
    max-width: 100%;
  }

  .btn-full,
  .btn--full {
    width: 100%;
  }
}

/* ---------- Landmark hub ---------- */
@media (max-width: 640px) {
  .landmarkHub--zip {
    padding: var(--rp-space-3) 0;
  }

  .landmarkHub__zipTabs {
    gap: 0.5rem;
  }

  .landmarkHub--zip .landmarkHub__zipTab {
    min-height: var(--rp-touch);
  }

  .landmarkHub__zipPanelBody {
    padding: 1.25rem 1rem 1.5rem;
  }
}

/* ---------- Footer ---------- */
@media (max-width: 768px) {
  .footer-grid,
  .site-footer .grid,
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: var(--rp-space-3);
  }

  .footer-logo,
  .site-footer img {
    max-width: min(220px, 70vw);
    height: auto;
  }
}

/* ---------- Breadcrumbs ---------- */
.breadcrumbs,
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem 0.5rem;
  max-width: 100%;
}

/* ---------- Very small phones ---------- */
@media (max-width: 360px) {
  .main-header .logo img {
    width: min(160px, 48vw);
    max-height: 44px;
  }

  .header-call-btn__number {
    font-size: 0.8rem;
  }
}

/* ---------- Large monitors: keep readable measure ---------- */
@media (min-width: 1440px) {
  .container {
    width: min(1200px, calc(100% - 4rem));
  }
}

/* ---------- Landscape phones ---------- */
@media (max-height: 480px) and (orientation: landscape) {
  .main-header .main-nav.active {
    padding-top: 4.5rem !important;
  }

  .areasServeHierarchy .areasServeZipFlyout__list {
    max-height: min(40vh, 220px);
  }
}