/* ==========================================================================
   Responsive layer — loaded LAST so it wins without !important wars.

   The ReRoof Figma has NO mobile or tablet frame; every frame is 1920px wide.
   So every rule in this file is our judgment, not the template's. It is kept
   in one file so the whole responsive story can be read and audited in one
   place rather than hunted across five stylesheets.

   Breakpoints match the Elementor kit: 1024 tablet, 767 mobile.
   ========================================================================== */

/* ==========================================================================
   <= 1024px — two-column content sections stack.
   At 768 the 64/36 CTA split left 276px for a 307px button, which pushed the
   page to 818px wide. Measured, not guessed.
   ========================================================================== */

@media (max-width: 1024px) {

  :root { --hbr-section-y: 72px; }

  /* Every two-column section becomes one column. */
  #hbr-hero > .e-con-inner,
  #hbr-about > .e-con-inner,
  #hbr-split > .e-con-inner,
  #hbr-inspect > .e-con-inner,
  #hbr-faq > .e-con-inner,
  #hbr-cta > .e-con-inner,
  #hbr-svcbody > .e-con-inner,
  #hbr-aboutmain > .e-con-inner,
  #hbr-contactbody > .e-con-inner {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #hbr-hero .e-con-inner > .e-con,
  #hbr-about .e-con-inner > .e-con,
  #hbr-split .e-con-inner > .e-con,
  #hbr-inspect .e-con-inner > .e-con,
  #hbr-faq .e-con-inner > .e-con,
  #hbr-cta .e-con-inner > .e-con,
  #hbr-svcbody .e-con-inner > .e-con,
  #hbr-aboutmain .e-con-inner > .e-con,
  #hbr-contactbody .e-con-inner > .e-con {
    width: 100% !important;
  }

  /* CTA action goes under the copy, left aligned, button no longer squeezed. */
  .hbr-cta__action { justify-content: flex-start !important; margin-top: var(--hbr-space-4); }
  #hbr-cta .hbr-cta__action .elementor-button { white-space: normal; }

  /* Sidebar stops being sticky once it is full width. */
  .hbr-svc__side { position: static !important; }
  .hbr-svc__side, .hbr-contact__side { margin-top: var(--hbr-space-6); }

  /* Card rows: two up. */
  #hbr-features > .e-con-inner,
  #hbr-process > .e-con-inner,
  #hbr-projects > .e-con-inner,
  #hbr-blog > .e-con-inner,
  #hbr-related > .e-con-inner,
  .hbr-cardrow > .e-con-inner {
    flex-wrap: wrap !important;
  }
  #hbr-features .e-con-inner > .e-con,
  #hbr-process .e-con-inner > .e-con,
  #hbr-projects .e-con-inner > .e-con,
  #hbr-related .e-con-inner > .e-con,
  .hbr-cardrow .e-con-inner > .e-con {
    width: calc(50% - 12px) !important;
  }
  #hbr-blog .e-con-inner > .e-con { width: 100% !important; }

  /* The overlapping card row has nothing to overlap once the hero stacks. */
  #hbr-features { margin-top: 0 !important; padding-top: 64px !important; }

  /* About badge cannot float over a full-width image on a narrow screen. */
  .hbr-badge { position: static !important; display: inline-block; margin-top: var(--hbr-space-3); }
  .hbr-about__media { margin-bottom: var(--hbr-space-5); }

  /* Stat grid stays two up but needs breathing room under the FAQ. */
  .hbr-faq__stats { margin-top: var(--hbr-space-6); }
}

/* ==========================================================================
   <= 1024px — the utility bar's two halves no longer fit side by side.
   ========================================================================== */

@media (max-width: 1024px) {
  #hbr-utilitybar > .e-con-inner { flex-direction: column; gap: 4px; text-align: center; }
  .hbr-utility-left, .hbr-utility-right { text-align: center !important; }
  .hbr-utility-left { font-size: 13px; }
}

/* ==========================================================================
   <= 767px — single column throughout.
   ========================================================================== */

@media (max-width: 767px) {

  :root { --hbr-section-y: 56px; }

  /* Header rows */
  #hbr-header > .e-con-inner { gap: 16px; }
  #hbr-header .hbr-logo img, #hbr-header-logo img { max-width: 220px; }
  #hbr-header-cta .elementor-button { padding: 14px 20px; font-size: 16px; }

  /* Every card row goes single column. */
  #hbr-features .e-con-inner > .e-con,
  #hbr-process .e-con-inner > .e-con,
  #hbr-projects .e-con-inner > .e-con,
  #hbr-blog .e-con-inner > .e-con,
  #hbr-related .e-con-inner > .e-con,
  .hbr-cardrow .e-con-inner > .e-con,
  .hbr-stat__cell {
    width: 100% !important;
  }

  /* Inspection page's paired checklists stack. */
  .hbr-inspect__lists .e-con-inner > .e-con,
  .hbr-inspect__lists > .e-con { width: 100% !important; }
  .hbr-inspect__lists .e-con { flex-direction: column !important; }

  /* Split section's two feature points stack. */
  .hbr-split__points { flex-direction: column !important; }
  .hbr-split__points > .e-con { width: 100% !important; }

  /* Full-width buttons are easier to hit than inline ones. */
  .hbr-hero__actions { flex-direction: column; }
  .hbr-hero__actions .elementor-button { width: 100%; justify-content: center; }
  #hbr-cta .hbr-cta__action .elementor-button { width: 100%; justify-content: center; }

  /* Panels lose some padding so content is not squeezed into a gutter. */
  .hbr-formpanel { padding: var(--hbr-space-4); }
  #hbr-contactbody #hbr-form { padding: var(--hbr-space-4); }
  .hbr-sidecard { padding: var(--hbr-space-4); }
  .hbr-inlinecta { padding: var(--hbr-space-4); }
  .hbr-inlinecta a { display: block; text-align: center; }

  /* Interior page banner */
  #hbr-pagehero { padding-top: 48px !important; padding-bottom: 48px !important; }
  .hbr-crumb { font-size: 13px; }

  /* Inline numbered steps: keep the marker but tighten the indent. */
  ol.hbr-steps-inline li { padding-left: 48px; }
  ol.hbr-steps-inline li::before { width: 34px; height: 34px; font-size: 17px; }

  /* Services index group headings */
  .hbr-grouptitle .elementor-heading-title { font-size: 18px; }
  .hbr-grphead { padding-top: var(--hbr-space-5) !important; }

  /* Footer columns pair up rather than stacking one per row; the two-column
     rules live in the footer block further down. Forcing flex-direction:column
     here made each 159px column take a full row and the footer 991px tall. */
  #hbr-footer-bar > .e-con-inner,
  .hbr-footer-bar > .e-con-inner { flex-direction: column; gap: 8px; text-align: center; }
}

/* ==========================================================================
   Touch targets — WCAG 2.5.8 asks for 24px minimum; 44px is the comfortable
   figure on a phone. Applies to any pointer that is not a fine mouse.
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {
  .elementor-button,
  .hbr-sidecard__btn,
  .hbr-inlinecta a,
  ul.hbr-svcnav a,
  ul.hbr-footer-links a,
  #mega-menu-wrap-menu-1 .mega-menu-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  ul.hbr-footer-links a { min-height: 40px; }
  .hbr-crumb a { padding-block: 4px; display: inline-block; }
}

/* ==========================================================================
   Mobile navigation panel — Max Mega Menu's own markup, brand-styled.
   ========================================================================== */

/* Matches Max Mega Menu's responsive_breakpoint, which is set to 1024px. Keep
   the two in step: below it MMM swaps to the hamburger, and at 820px the full
   horizontal nav needed 951px and pushed the page to 1020px wide. */
@media (max-width: 1024px) {
  #hbr-navbar { padding-block: 0 !important; }

  #mega-menu-wrap-menu-1 .mega-menu-toggle {
    background: var(--hbr-white);
    height: 56px;
  }
  /* Hamburger and close icons: MMM defaults are light, which disappeared once
     the toggle bar became white. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner,
  #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::before,
  #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-animated-inner::after {
    background-color: var(--hbr-charcoal) !important;
  }
  #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner,
  #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::before,
  #mega-menu-wrap-menu-1 .mega-menu-toggle.mega-menu-open .mega-toggle-animated-inner::after {
    background-color: var(--hbr-accent) !important;
  }
  #mega-menu-wrap-menu-1 .mega-menu-toggle .mega-toggle-label {
    font-family: var(--hbr-font-head);
    font-weight: var(--hbr-w-bold);
    color: var(--hbr-charcoal);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 14px;
  }

  /* Do NOT set display here. Max Mega Menu's JS drives open/closed on this
     element, and forcing display:block or :none fights its state machine.

     The selector below deliberately mirrors MMM's own
     `#wrap .mega-menu-toggle + #menu`, which is two IDs plus a class. A plain
     two-ID selector loses to it, which is why the open panel was rendering on
     MMM's default #222 instead of white. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 {
    background-color: var(--hbr-white);
    border-top: 1px solid var(--hbr-hairline);
  }
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-item {
    width: 100%;
    border-bottom: 1px solid var(--hbr-hairline);
  }
  /* MMM pins mobile links to height:40px / line-height:40px, which fights both
     the padding below and the 44px touch target. Same-specificity override. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 > li.mega-menu-item > a.mega-menu-link {
    padding: 14px 18px;
    height: auto;
    line-height: 1.4;
    font-size: 16px;
    color: var(--hbr-charcoal);
    background: transparent;
    border-radius: 0;
  }
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 > li.mega-menu-item {
    border-bottom: 1px solid var(--hbr-hairline);
  }
  /* Current page stays marked on mobile, as it is on desktop. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 > li.mega-menu-item.mega-current-menu-item > a.mega-menu-link,
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 > li.mega-menu-item.mega-toggle-on > a.mega-menu-link {
    color: var(--hbr-accent);
    background: var(--hbr-roofline);
  }
  /* Sub-panel ground, also matching MMM's specificity. */
  #mega-menu-wrap-menu-1 .mega-menu-toggle + #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
    background-color: var(--hbr-roofline);
  }
  /* Sub-panels are plain stacked lists on a phone, not a grid. */
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 > li.mega-menu-megamenu > ul.mega-sub-menu {
    border: 0; box-shadow: none; padding: 0 0 var(--hbr-space-3);
    background: var(--hbr-roofline); border-radius: 0;
  }
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item {
    width: 100% !important;
  }
  #mega-menu-wrap-menu-1 #mega-menu-menu-1 li.mega-menu-megamenu ul.mega-sub-menu li.mega-menu-item ul.mega-sub-menu li.mega-menu-item > a.mega-menu-link {
    padding: 12px 26px;
  }
}

/* ==========================================================================
   Fluid type — stops headings from being oversized on a narrow screen while
   keeping the template's desktop sizes intact above 1290px.
   ========================================================================== */

@media (max-width: 1290px) {
  :root {
    --hbr-size-d1: clamp(34px, 4.6vw, 60px);
    --hbr-size-h1: clamp(30px, 3.9vw, 50px);
    --hbr-size-h2: clamp(26px, 3.1vw, 40px);
    --hbr-size-h3: clamp(21px, 2.3vw, 30px);
  }
}

/* Never let a long word or a URL push the page sideways. */
h1, h2, h3, h4, p, li, a { overflow-wrap: break-word; }
img, svg, video, iframe { max-width: 100%; }
.hbr-ph { max-width: 100%; }

/* ==========================================================================
   Spacing pass — 2026-09-12

   Measured before changing anything:
     desktop  header 230px; cards OVERLAPPED the hero by 70px; cards -> About 0px
     mobile   header 352px (42% of an 844px viewport before any content)
   ========================================================================== */

/* --- Hero -> cards -> About ----------------------------------------------
   The overlap was mine, not the template's: ReRoof 01_Home puts the feature
   cards fully below the hero on white. Removing it is both more spacing and
   closer to the template.
   -------------------------------------------------------------------------- */

#hbr-features {
  margin-top: 0 !important;
  padding-top: 88px !important;
  padding-bottom: 96px !important;
}

/* The About section had zero clearance under the cards. */
#hbr-about { padding-top: 24px !important; }

/* Give every card row room to breathe from its own heading and neighbour. */
#hbr-servicecards,
#hbr-grp1a, #hbr-grp1b, #hbr-grp2,
#hbr-values, #hbr-contactcards,
#hbr-related {
  padding-bottom: 32px !important;
}

@media (max-width: 1024px) {
  #hbr-features { padding-top: 72px !important; padding-bottom: 72px !important; }
}
@media (max-width: 767px) {
  #hbr-features { padding-top: 56px !important; padding-bottom: 56px !important; }
  #hbr-about { padding-top: 8px !important; }
}

/* ==========================================================================
   Header height.
   Desktop 230px -> ~190px. Mobile 352px -> target under 170px.
   The logo never drops below 220px wide (brand guide page 4 digital minimum),
   so the height comes out of padding and the utility bar instead.
   ========================================================================== */

#hbr-utilitybar { padding-top: 8px !important; padding-bottom: 8px !important; }
#hbr-header { padding-top: 12px !important; padding-bottom: 12px !important; }
#hbr-header .hbr-logo img, #hbr-header-logo img { max-width: 240px; }

@media (max-width: 1024px) {
  /* One line, not two: the serving-area line is the first thing to go. */
  #hbr-utilitybar > .e-con-inner { flex-direction: row; justify-content: center; gap: 12px; }
  .hbr-utility-left { display: none; }
  .hbr-utility-right { text-align: center !important; }
}

@media (max-width: 767px) {
  #hbr-utilitybar { padding-top: 6px !important; padding-bottom: 6px !important; }
  #hbr-utilitybar p { font-size: 13px; }
  .hbr-phone { font-size: 16px; }

  /* Logo and CTA share one row. 220px logo + 16 gap + ~130px button fits 390. */
  #hbr-header { padding-top: 10px !important; padding-bottom: 10px !important; }
  #hbr-header > .e-con-inner {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  #hbr-header .e-con-inner > .e-con,
  #hbr-header .e-con-inner > .elementor-widget { width: auto !important; }
  #hbr-header .hbr-logo img, #hbr-header-logo img {
    min-width: 220px;   /* brand minimum — do not reduce */
    max-width: 220px;
  }
  #hbr-header-cta .elementor-button {
    padding: 10px 14px;
    font-size: 13px;
    line-height: 1.2;
    letter-spacing: 0;
    text-align: center;
  }
  #hbr-navbar { padding-top: 0 !important; padding-bottom: 0 !important; }
  #mega-menu-wrap-menu-1 .mega-menu-toggle { height: 48px; }
}

/* --- Header: remove Elementor's inter-widget gap ---------------------------
   The kit sets space_between_widgets: 24px, which is right for page content
   and wrong inside a header row. Measured: an 86px logo sat in a 151px row.
   -------------------------------------------------------------------------- */

#hbr-utilitybar > .e-con-inner,
#hbr-header > .e-con-inner,
#hbr-navbar > .e-con-inner {
  padding-block: 0;
  row-gap: 0;
}
#hbr-utilitybar > .e-con-inner > *,
#hbr-header > .e-con-inner > *,
#hbr-navbar > .e-con-inner > *,
#hbr-header .e-con-inner .elementor-widget {
  margin-block: 0 !important;
}
#hbr-utilitybar .elementor-widget-text-editor,
#hbr-header .elementor-widget-image,
#hbr-header .elementor-widget-button { margin-bottom: 0 !important; }

#hbr-utilitybar p { line-height: 1.3; }
#hbr-header-logo img { display: block; }

/* --- "Read More ->" arrow ------------------------------------------------
   The generated ::after arrow was wrapping to its own line because Elementor
   wraps button text in a block-level span.
   -------------------------------------------------------------------------- */

.hbr-iconcard .elementor-widget-button .elementor-button,
.hbr-blogcard .elementor-widget-button .elementor-button,
.hbr-card > .elementor-widget-button .elementor-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}
.hbr-iconcard .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
.hbr-blogcard .elementor-widget-button .elementor-button .elementor-button-content-wrapper,
.hbr-card > .elementor-widget-button .elementor-button .elementor-button-content-wrapper {
  display: inline-flex;
  align-items: center;
}
.hbr-iconcard .elementor-widget-button .elementor-button::after,
.hbr-blogcard .elementor-widget-button .elementor-button::after,
.hbr-card > .elementor-widget-button .elementor-button::after {
  display: inline-block;
  line-height: 1;
}

/* --- Very small phones (<= 400px) ----------------------------------------
   220px logo + 12px gap + ~141px button + 24px padding = 397px, so on a 320px
   screen they cannot share a row. The logo minimum is a brand rule (guide
   page 4), so the button is what gives way.
   -------------------------------------------------------------------------- */

@media (max-width: 400px) {
  #hbr-header > .e-con-inner {
    flex-wrap: wrap !important;
    justify-content: center;
    gap: 10px;
  }
  #hbr-header-cta { width: 100% !important; }
  #hbr-header-cta .elementor-button { width: 100%; justify-content: center; padding: 12px 16px; }
  #hbr-utilitybar p { font-size: 12px; }
}

/* --- Footer on tablet and phone -------------------------------------------
   Stacking four full-width columns made a 1440px mobile footer. Two columns
   keeps it readable and roughly halves the height.
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
  #hbr-footer > .e-con-inner { flex-wrap: wrap !important; gap: 28px 24px; }
  #hbr-footer .e-con-inner > .e-con { width: calc(50% - 12px) !important; }
  #hbr-footer { padding-top: 48px !important; padding-bottom: 24px !important; }
}

@media (max-width: 767px) {
  /* The brand blurb spans the full width; the three link columns pair up. */
  #hbr-footer .e-con-inner > .e-con:first-child { width: 100% !important; }
  #hbr-footer .e-con-inner > .e-con:not(:first-child) { width: calc(50% - 12px) !important; }
  #hbr-footer { padding-top: 40px !important; padding-bottom: 20px !important; }
  #hbr-footer > .e-con-inner { gap: 24px 16px; }
  #hbr-footer .elementor-widget-image img { width: 170px; max-width: 170px; }
  .hbr-footer-about p { font-size: 14px; line-height: 22px; }
  ul.hbr-footer-links a, .hbr-footer-contact { font-size: 14px; line-height: 22px; }
  .hbr-footer-heading { font-size: 13px; margin-bottom: var(--hbr-space-2) !important; margin-top: 0 !important; }
  .hbr-footer-bar > .e-con-inner { flex-direction: column; gap: 4px; text-align: center; }
  .hbr-footer-bar p { font-size: 12px; }
}