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

/* Safety net: nothing should ever force horizontal scroll */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
img, svg, .wp-block-image img {
  max-width: 100%;
  height: auto;
}
h1, h2, h3, h4, h5, h6, p, li {
  overflow-wrap: break-word;
}

/* Full-bleed (alignfull) sections cancel the root padding on purpose
   (that's how they achieve edge-to-edge background color) — but their
   inner content wrapper needs its OWN gutter, otherwise text sits flush
   against the viewport edge below the section's max-width breakpoint. */
.alignfull > .is-layout-constrained,
.alignfull > .is-layout-flow {
  padding-left: 1.25rem;
  padding-right: 1.25rem;
}

/* Header: mobile-first. Default = compact (logo + hamburger only).
   Desktop actions (phone + CTA button) only appear at wider viewports;
   on mobile they live inside the nav overlay instead. */
.site-badge {
  flex-shrink: 0;
}
.site-logo-lockup {
  flex-shrink: 0;
}
.site-logo-lockup .word {
  display: inline-flex !important;
  flex-direction: column;
  align-items: stretch;
}
.wordmark-top {
  white-space: nowrap;
}
.wordmark-bottom {
  display: flex;
  justify-content: space-between;
  text-transform: uppercase;
}
.header-nav,
header .header-actions.wp-block-group {
  flex-shrink: 0;
}

/* Small tappable phone icon shown next to the hamburger on mobile only —
   the full number + CTA button (.header-actions) covers this at desktop. */
.mobile-phone-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--ink);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .mobile-phone-icon {
    display: none;
  }
}

/* WP core's default toggle icon is only 2 bars; replace with a
   conventional 3-bar hamburger so it reads correctly at a glance. */
.wp-block-navigation__responsive-container-open {
  width: 24px;
  height: 24px;
  position: relative;
}
.wp-block-navigation__responsive-container-open svg {
  display: none;
}
.wp-block-navigation__responsive-container-open::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 20px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor;
}
header .header-actions.wp-block-group {
  display: none;
}
.wp-block-navigation__responsive-container-open {
  flex-shrink: 0;
}

@media (min-width: 1024px) {
  header .header-actions.wp-block-group {
    display: flex;
  }
  /* On desktop the nav shows inline, so the "Schedule Estimate" /
     phone duplicates already living in the mobile overlay can hide. */
  .header-nav .wp-block-navigation-item.mobile-only-action {
    display: none;
  }
}

/* WordPress core's navigation block has its OWN hardcoded 600px breakpoint
   (wp-includes/blocks/navigation/style.css) that un-collapses the inline nav
   and hides the hamburger toggle — independent of the 1024px switch above.
   Landscape phones (667–932px wide) sit inside that gap: core shows the full
   inline nav + our .header-actions row still wasn't ready to appear, and
   even once .header-actions did appear (at the old 600px), there wasn't
   enough width for logo + 5 nav links + phone number + button in one
   nowrap row, so the button got clipped. Overriding core's breakpoint here
   keeps the compact hamburger header through the same 1024px range our own
   rules use, so the two switches move together. */
@media (max-width: 1023.98px) {
  header .wp-block-navigation__responsive-container-open:not(.always-shown) {
    display: flex;
  }
  header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
    display: none;
  }
}

/* Hero CTA buttons ("Schedule a Free Estimate" / phone number): the block
   editor's "100% width" setting on each button makes them stack full-width
   at every viewport, which is right for mobile but wrong for desktop —
   there they should sit side by side on one line at their natural width. */
@media (min-width: 600px) {
  .hero-buttons.wp-block-buttons {
    flex-wrap: nowrap;
  }
  .hero-buttons .wp-block-button.wp-block-button__width-100 {
    width: auto;
    flex: 0 0 auto;
  }
  .hero-buttons .wp-block-button.wp-block-button__width-100 .wp-block-button__link {
    width: auto;
  }
}

/* Footer: 4 columns spread across the full wide section width (matching
   the CTA band / hero above, not the narrow reading-width text column) —
   first column flush left, last flush right, middle two evenly spaced
   between via space-between. */
.footer-grid {
  justify-content: space-between !important;
  align-items: start;
}
.footer-col {
  flex: 0 1 auto;
}
@media (max-width: 700px) {
  /* Collapse to a 2-column grid instead of stacking one-per-row: source
     order is [Brand+Desc, Services, Company, Get In Touch], so a 2-col
     grid naturally pairs Brand+Services on row 1 and Company+Get In Touch
     on row 2, each pair staying lined up like the desktop columns do. */
  .footer-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr;
    row-gap: 32px;
  }
  .footer-col {
    width: auto;
    max-width: none !important;
  }
}

/* Service cards (What We Do): pin the "See ... services" link to the
   bottom of each card so both links align on the same row regardless
   of how many lines the description above happens to wrap to. */
.service-card {
  display: flex;
  flex-direction: column;
}
.service-card-link {
  margin-top: auto !important;
  padding-top: 1rem;
}
.service-card-link a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--wp--preset--color--ember-deep);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.service-card-link a:hover,
.service-card-link a:focus-visible {
  border-bottom-color: currentColor;
}
.service-card-link a .arrow {
  stroke: var(--wp--preset--color--ember-deep);
  flex: none;
}

/* Closing CTA links near the bottom of every content page ("Schedule a Free
   Estimate", "See all X services") — same treatment as the homepage's
   service-card links, just stacked since there are usually two. */
.closing-links {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
/* .arrow-link: same recipe, usable directly on a single <a> embedded inline
   within a sentence (e.g. "See our full service area →") where a whole
   paragraph isn't a dedicated link block. */
.closing-links a,
.arrow-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--wp--preset--color--ember-deep);
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  padding-bottom: 2px;
  transition: border-color 0.15s ease;
}
.closing-links a:hover,
.closing-links a:focus-visible,
.arrow-link:hover,
.arrow-link:focus-visible {
  border-bottom-color: currentColor;
}
.closing-links a .arrow,
.arrow-link .arrow {
  stroke: var(--wp--preset--color--ember-deep);
  flex: none;
}

@media (max-width: 1023.98px) {
  /* Keep the mobile overlay's own header (close button, etc.) tidy */
  .wp-block-navigation__responsive-dialog {
    padding: 24px;
  }

  /* Full-screen mobile menu: bigger type and taller tap targets than the
     compact desktop nav needs, since this is the only thing on screen and
     has to be easy to hit with a thumb. Scoped to the dialog only, so the
     inline desktop nav stays at its own smaller size. */
  .wp-block-navigation__responsive-dialog .wp-block-navigation-item {
    font-size: 1.25rem !important;
  }
  .wp-block-navigation__responsive-dialog .wp-block-navigation-item__content {
    padding-top: 0.65rem;
    padding-bottom: 0.65rem;
  }
}

/* Mobile quick-access "Schedule Estimate" icon, shown next to the existing
   mobile-phone-icon in the compact header. Same show/hide pattern — visible
   on mobile only, hidden once the full header-actions (phone number + button)
   appear at desktop width. Replaces the sticky-bottom-bar approach: the phone
   icon already covered "call," so this only needed to add the missing
   quick-access estimate action, not a permanent full-width fixed bar. */
.mobile-estimate-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--wp--preset--color--ink);
  flex-shrink: 0;
}
@media (min-width: 1024px) {
  .mobile-estimate-icon {
    display: none;
  }
}

/* WPForms ships its own bare default button style (outline box, no fill) --
   override it to match the site's primary button (theme.json elements.button)
   so the contact form's submit button doesn't read as unstyled/default. */
.wpforms-submit-container button.wpforms-submit {
  background: var(--wp--preset--color--ember);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  border: none;
  border-radius: 8px;
  padding: 14px 28px;
  box-shadow: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.wpforms-submit-container button.wpforms-submit:hover,
.wpforms-submit-container button.wpforms-submit:focus-visible {
  background: var(--wp--preset--color--ember-deep);
}