/*
 Theme Name:   Bricks Child Theme
 Theme URI:    https://bricksbuilder.io/
 Description:  Use this child theme to extend Bricks.
 Author:       Bricks
 Author URI:   https://bricksbuilder.io/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/
/* ==========================================================================
   Local parity overrides - spacing + font weight
   Matches v2/styles.css. Bricks' generated CSS loads AFTER this file,
   so selectors are prefixed with `body` to win on specificity (0,1,1 vs 0,1,0)
   without resorting to !important.
   ========================================================================== */

/* 1. Global element resets Bricks omits (v2/styles.css:33-34).
      Bricks resets body + h1-h6 only, and sets figure{margin:1em 40px}. */
body p,
body ul,
body figure,
body table      { margin: 0; }
body ul         { padding: 0; list-style: none; }

/* 2. Heading weight. Local has no h4 override so it inherits 800 from
      `h1,h2,h3,h4`; the Bricks build adds `h4{font-weight:700}`. */
body h4         { font-weight: 700; } /* was 800 for local parity; see note 10 */

/* 3. Section spacing that drifted during the Bricks build. */
body .promo-inner    { row-gap: 64px; }     /* Bricks: 40px */
body .snow-split     { row-gap: 56px; }     /* Bricks: 40px */
body .hero-form-card { padding-bottom: 0; } /* Bricks: 32px */

/* 4. `gap: X` sets both axes; the Bricks build emitted only one axis. */
body .header-inner   { row-gap: 24px; }
body .header-actions { row-gap: 18px; }
body .footer-social  { row-gap: 14px; }
body .process-row    { row-gap: 28px; }
body .btn            { row-gap: 10px; }
body .snow-list      { column-gap: 10px; }
body .trust-strip    { column-gap: 0; }

/* 5. Declarations absent from the Bricks build entirely. */
body .benefit-icon      { margin-left: auto; margin-right: auto; }
body .service-link      { display: inline-flex; align-items: center; gap: 6px; }
body .hero-ctas         { flex-wrap: wrap; }
body .footer-contact li { font-size: 14.72px; } /* NB: px, not rem - see note 7a */

/* 6. Eyebrow spacing parity (v2/styles.css:73-74).
      Two Bricks behaviours stack to turn local's 16px gap into ~50px:
        a) per-element settings emit `#brxe-XXXX{margin-bottom:0}`, which beats
           `.eyebrow` on ID specificity (1,0,0 > 0,1,0) and kills the 16px;
        b) Bricks core ships
           `:where(p:last-of-type)+h1..h6{margin-block:1.2em 0}`. That is
           specificity (0,0,1) -- same as Bricks' own `h1..h6{margin:0}` reset
           but declared later, so it wins and adds 1.2em to the heading that
           follows the eyebrow (~49.92px at the h2's clamped font size).
      (a) needs !important because the Bricks element IDs are regenerated on
      rebuild, so matching them by hand would not survive. (b) only needs
      specificity (0,0,2). Local declares neither rule, so both are neutralised. */
body .eyebrow   { margin-bottom: 16px !important; }
body h1,
body h2,
body h3,
body h4         { margin-top: 0; margin-bottom: 0; }

/* 7. Footer parity (v2/styles.css:438-452).
      The Bricks footer was rebuilt with its own class names -- .footer-tagline,
      .footer-heading, .footer-list, .footer-contact-item, .footer-social-link --
      where local uses `.footer-brand p`, `.footer-col h4`, `.footer-col ul`,
      `.footer-contact li` and `.footer-social a`. The ported values are correct,
      so what follows is only what genuinely diverged. */

/* 7a. IMPORTANT: Bricks core ships `html{font-size:62.5%}`, so 1rem = 10px on
       dev but 16px locally. Never use rem in this file -- always px. */

/* 7b. Inherited text scale. Bricks core sets `body{font-size:15px}`; local has
       no body font-size and so inherits the 16px default. Everything that does
       not carry an explicit size was rendering at 15/16 of local. Bricks' own
       sizes are already baked to px off a 16px base, so they are unaffected. */
html body { font-size: 16px; }

/* 7c. `gap: 11px` sets both axes; the Bricks build emitted row-gap only. */
body .footer-list,
body .footer-contact    { column-gap: 11px; }

/* 7d. Local's `.footer-bottom` is also a `.container` (max-width 1260, auto
       margins). On dev the footer is a centered flex column, which shrink-wraps
       it to the width of its text. */
body .footer-bottom { width: 100%; max-width: 1260px; margin-left: auto; margin-right: auto; }

/* 7e. Footer logo height. Bricks wrapped it in `<a class="brand">`, so the
       header rule `.brand img{height:42px}` (0,1,1) matches and outranks
       `.brand-logo--footer{height:44px}` (0,1,0) -- the logo rendered 42px tall
       and, with width:auto, 234.8px wide instead of 246px. Local's footer logo
       sits in `.footer-brand`, so that header rule never reaches it.
       `img.brand-logo--footer` is (0,1,2), which wins outright. */
body img.brand-logo--footer { height: 60px; } /* 44px was local parity; raised in note 9 */

/* 7f. Tagline size. A per-element Bricks setting emits
       `#brxe-45a45a{font-size:20px}` (= 2rem at the 10px root); local inherits
       the 16px body size. !important for the ID-regeneration reason in note 6. */
body .footer-tagline { font-size: 16px !important; }

/* 7g. Social icons. Local renders an inline `<svg width="18" height="18">`, so
       the glyph is 18x18 regardless of the anchor's font-size. Bricks uses an
       icon font whose glyph size IS its font-size, and a per-element setting
       emits `#brxe-XXXX{font-size:20px}` on each `<i>` -- measured 20x20 vs
       local's 18x18. !important because every icon has its own generated ID.
       (The anchor's own 18px font-size is left alone: it holds no text, so it
       has no visual effect -- only the `<i>` glyph size matters.) */
body .footer-social a i { font-size: 18px !important; }

/* 7h. Contact-item label gap. Local's markup is a text node "Phone: " followed
       by the link, so the separator is a real space -- measured 2.516px at
       14.72px Plus Jakarta Sans. Bricks split the label into its own <span> and
       spaces them with a 5px flex gap instead, pushing the value ~2.5px right. */
body .footer-contact li { column-gap: 2.5px; row-gap: 2.5px; }

/* 8. Banner (hero) form submit button + the space beneath it.
      Bricks renders the submit as a bare `.bricks-button` inside
      `.form-group.submit-button-wrapper`, so none of local's
      `.btn .btn-primary .btn-lg .hero-form-submit` styling reaches it.
      Background, colour, radius, padding, font-size, font-weight and the 10px
      icon gap already matched; the rest did not -- the button measured
      155.6x48.4 against local's 336x57.6.

      8a. The wrapper is itself only 169.6px wide (local's button is a direct
          child of the 336px form), so it has to go full width first. */
body .hero-form-card .submit-button-wrapper {
  width: 100%;

  /* 8b. Space below the button. Local's form ends with an empty
         `<p class="form-status">` that still occupies 19.04px via
         `min-height:1.4em` at 13.6px, sitting 18px under the button through the
         form's `gap:18px` -- 37.04px of white space inside the card, whose
         padding-bottom is 0 on both. Bricks emits no status element, so the
         card ended flush with the button (0px). */
  margin-bottom: 37.04px;
}

body .hero-form-card button[type="submit"] {
  width: 100%;
  border: 1.5px solid transparent; /* local .btn; contributes 3px of height */
  line-height: 25.6px;             /* local inherits body 1.6; Bricks uses 1.15 */
  letter-spacing: normal;          /* Bricks adds 0.5px */
  white-space: nowrap;
  margin-top: 8px;                 /* local `.quote-form .btn` (0,2,0) outranks
                                      `.hero-form-submit{margin-top:4px}` */
}

/* 8c. Form width. Bricks gives every `.form-group` 7px of horizontal padding
       and already ships `.quote-form{width:calc(100% + 14px);margin:0 -7px}` to
       compensate -- but the form is a flex item inside `.hero-form-card` (a
       Bricks flex column), so the default `flex-shrink:1` squeezed those 350px
       straight back down to the container's 336px. The gutter therefore ate
       14px: every field and the button ended at the card's content edge minus
       14px (left edges were correct, so the form looked inset on the right
       only). Lifting the max-width cap and pinning flex-shrink let the declared
       width stand, restoring
       local's 336px fields and the 14px gap between the two side-by-side ones. */
body .hero-form-card form.quote-form {
  max-width: none;  /* the actual blocker: a 100% cap clamped the 350px back to 336px */
  flex-shrink: 0;   /* and the flex column would otherwise squeeze it again */
}

/* 9. Logo sizes -- REQUESTED CHANGE; this intentionally diverges from local.
      Local renders the header logo at 42px and the footer logo at 44px, and
      until now dev matched. Both sit inside `<a class="brand">`, so Bricks'
      `.brand img{height:42px;width:auto}` drives them; width stays `auto` so
      the 615x110 artwork keeps its aspect ratio (no distortion).
        header 42px -> 56px  (width follows to ~313px)
        footer 44px -> 60px  (width follows to ~336px, set in note 7e)
      `.header-inner` adds 18px padding top and bottom, so the header bar grows
      from 78px to 92px -- still within the 96px `--ls-header-h` reserves. */
body .site-header .brand-logo { height: 56px; }

/* 10. Heading weight -- REQUESTED CHANGE; intentionally diverges from local.
       Local and dev both ship `h1,h2,h3,h4{font-weight:800}` (with h3 and h4
       then reset to 700), and they already matched exactly -- 0 mismatches
       across all 33 headings on the page. This drops the whole set to 700 as
       asked, which changes h1 (x1), h2 (x9) and h4 (x3); h3 (x20) was 700
       already. Each comma-separated element selector is only (0,0,1), so the
       `body ` prefix at (0,0,2) is enough -- no !important needed. */
body h1,
body h2,
body h3,
body h4 { font-weight: 700; }

/* 11. Footer link + social-icon hover transitions.
       Bricks adds `.site-footer a{transition:color .2s ease}` at (0,1,1), which
       outranks `.footer-social-link{transition:background-color .2s ease,
       border-color .2s ease,color .2s ease}` at (0,1,0). Because `transition`
       is a shorthand, the winning rule REPLACES the whole list rather than
       merging -- so the social icons ended up animating only `color`:
         local -> background-color, border-color   (bg + ring fade, colour snaps)
         dev   -> color                            (bg + ring snap, colour fades)
       exactly inverted. The same rule also gives every other footer link a
       colour fade that local does not have (`.footer-col a:hover` snaps).
       Local declares no `.site-footer a` transition at all, hence `none`. */
body .site-footer a { transition: none; }
body .site-footer .footer-social a {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* 12. Footer social icon colour ON HOVER -- the icon was turning yellow on the
       yellow hover background, i.e. vanishing.
       Bricks emits two competing hover rules:
         .site-footer a:hover        { color: var(--ls-primary) }   (0,2,1)
         .footer-social-link:hover   { ... color: var(--ls-dark) }  (0,2,0)
       The generic footer-link rule is MORE specific, because renaming the
       social class to `.footer-social-link` dropped the `a` element from that
       selector and with it the element bump. So `color` resolved to the primary
       yellow while background-color and border-color (declared only on the
       social rule) also went yellow -- icon and background the same colour.
       Local wins this by accident of naming: its `.footer-social a:hover` is
       (0,2,1), tying with `.footer-col a:hover` and beating it on source order.
       (0,3,2) here settles it outright. `i` is included so the icon glyph is
       covered even if a future Bricks build sets a colour on the icon itself
       rather than letting it inherit. */
body .site-footer .footer-social a:hover,
body .site-footer .footer-social a:hover i { color: #151515; }

/* 13. MOBILE: icon/number beside the heading -- REQUESTED CHANGE, diverges
       from local (local stacks them at every width).
       Applies to the quick-link cards ("See Our Services" / "How It Works" /
       "One Team, Many Projects") and the "Getting Started" process rows.

       Both share the shape  <icon> + <div><h3/><p/></div>  and both stacked for
       a different reason:
         - .quick-link-card is `flex-direction: column` at every width.
         - .process-row is already a row, but Bricks applies
           `.brxe-block{flex-wrap:wrap}` on mobile and the text wrapper is
           `.brxe-block{width:100%}`, so the wrapper claimed a full line and
           pushed itself under the number.
       Hence both need the wrapper width parked at auto and wrapping disabled.
       767px is Bricks' mobile breakpoint and the same one where
       `.quick-links-grid` already drops to a single column -- if the
       breakpoints are ever realigned to local's 768/640, move this with them. */
@media (max-width: 767px) {
  body .quick-link-card {
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: center;
    column-gap: 16px;
  }
  body .quick-link-icon { margin-bottom: 0; flex: 0 0 auto; }

  body .process-row { flex-wrap: nowrap; align-items: center; }
  body .process-row > .process-number { flex: 0 0 auto; }

  /* the shared text wrapper: stop it demanding a full line */
  body .quick-link-card > div,
  body .process-row > div {
    width: auto;
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* 14. Service detail pages. Laid out like the homepage rather than as an
       article: a two-column intro (image left, copy right) on the same
       `container-wide` 1260px measure the homepage uses, then an alternating
       cream band for the detail copy. Sizes in px -- Bricks sets the root
       font-size to 62.5% (note 7a). */

/* 14a. Intro split. Mirrors the homepage `promo-inner` ratio so the two
        sections read as the same system. */
.service-intro {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  column-gap: 64px;
  row-gap: 40px;
  align-items: center;
}
.service-intro-media  { border-radius: 6px; overflow: hidden; }
.service-intro-copy   { text-align: left; align-items: flex-start; }
.service-intro-copy h2 { margin-bottom: 18px; }
.service-intro-copy .lede { margin-top: 0; }

/* Consecutive paragraphs in the intro column had a 0px gap: the global
   `p { margin: 0 }` reset in note 1 removes the browser default, and unlike
   .service-article this column had no replacement spacing rule, so the lede ran
   straight into the paragraph under it. `p + p` targets exactly that join and
   leaves the eyebrow (16px) and h2 (18px) spacing alone. */
.service-intro-copy p + p { margin-top: 16px; }
.service-hero-photo   { border-radius: 6px; overflow: hidden; margin: 0; max-width: none; width: 100%; }

/* 14b. Detail copy. Full container width -- no narrow centred column. */
.service-article { max-width: none; margin: 0; text-align: left; align-items: stretch; }
.service-article > * + *        { margin-top: 16px; }
.service-article h3             { margin-top: 48px; font-size: 27px; line-height: 1.25; }
.service-article h3:first-child { margin-top: 0; }
.service-article p              { color: var(--ls-muted); }
.service-article .lede          { color: var(--ls-dark); }
.service-article .snow-list-label { margin-top: 26px; }

/* 14c. Bullet lists run two-up so they fill the wider measure instead of
        making a long thin ribbon of text. The lists are native Bricks
        block[ul] > block[li] > text-basic trees, matching how the homepage
        builds them -- no raw-HTML text element, so every item stays editable
        and deletable in the builder. */
.service-article .snow-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 36px;
  margin-top: 14px;
}
.how-cta .btn { margin-top: 22px; }

@media (max-width: 991px) {
  .service-intro { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .service-article .snow-list { grid-template-columns: 1fr; }
}

/* 15. Service page banner (reference layout: a full-width title band, with the
       main title shown below it).
       The reference used a blue gradient; that is another brand, so this uses
       this site's own palette -- charcoal drifting into the warm secondary.
       Heading order is now H1 = service name in the banner, H2 = the marketing
       headline below it, H3 = the in-article subheads. That keeps exactly one
       H1 per page, which is why the article subheads moved from h2 to h3. */
.service-banner {
  background: linear-gradient(120deg, #151515 0%, #2A1F12 58%, #3D2C17 100%);
  padding-top: 104px;
  padding-bottom: 104px;
  text-align: center;
}
.service-banner .container-wide { text-align: center; align-items: center; }
.service-banner-title { color: #FFFFFF; margin: 0; }

@media (max-width: 767px) {
  .service-banner { padding-top: 64px; padding-bottom: 64px; }
}

/* 16. Service page hero image: show it uncropped.
       The homepage cards use `img.service-photo{aspect-ratio:3/2;object-fit:cover}`,
       which is right for a card grid but wrong for the page hero -- the
       snow-removal asset is a composed graphic at 16:9, so the 3:2 crop sliced
       the wordmark and the CTA off its edges. The six photos are 4:3 and were
       losing a band top and bottom. Natural ratio here; the cards are untouched.
       `body ` prefix because Bricks' inline CSS loads after this file and
       `img.service-photo` would otherwise tie on specificity. */
body img.service-hero-photo,
body .service-hero-photo img {
  aspect-ratio: auto;
  height: auto;
  object-fit: contain;
}

/* 17. Services dropdown: tighten the spacing.
       Bricks gives each submenu link `line-height: 60px`, so every row was 60px
       tall and the 7-item Services menu ran to 420px. Swapping the oversized
       line-height for real padding brings a row to ~38px and the panel to
       ~270px, and drops the link size from 16px to match the 15.2px top-level
       nav. The selector is (0,2,3), comfortably above Bricks' own. */
.main-nav .bricks-nav-menu .sub-menu > li > a {
  line-height: 1.35;
  padding: 9px 18px;
  font-size: 15px;
}
.main-nav .bricks-nav-menu .sub-menu { padding-top: 6px; padding-bottom: 6px; }

/* 18. "Services" nav item alignment.
       A menu item with children gets wrapped by Bricks in an extra
       <div class="brx-submenu-toggle">, so the site rule
       `.main-nav .bricks-nav-menu > li > a` -- a DIRECT-child selector --
       never matched it. Services alone was rendering at 16px/400 with no
       padding-block against 15.2px/600 with 4px on every sibling, which is why
       it read lighter, larger and sat on a different baseline (its box ended at
       94.4px vs 101.2px for the others).
       This repeats the same declarations down the wrapped path, including the
       hover underline, which was missing for the same reason. */
.main-nav .bricks-nav-menu > li > .brx-submenu-toggle > a {
  font-weight: 600;
  font-size: 15.2px;
  padding-block: 4px;
  color: var(--ls-dark);
  position: relative;
}
.main-nav .bricks-nav-menu > li > .brx-submenu-toggle > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--ls-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .2s ease;
}
.main-nav .bricks-nav-menu > li > .brx-submenu-toggle > a:hover::after { transform: scaleX(1); }