/* ==========================================================
   spacing.css — the final word on spacing, PHONES ONLY.

   Loaded LAST on every page so it wins over the older rules
   underneath. If phone spacing looks wrong somewhere, fix it
   HERE instead of adding another override in another file.
   To undo everything: remove the <link> to this file.

   Why the selectors look odd: ":not(#_)" is a trick that
   makes a rule stronger than any class-based rule, so the
   older "html body ..." and !important rules can't beat it.

   The sizes (use only these):
     --space-s        16px  small gaps
     --space-m        24px  medium gaps (between related blocks)
     --space-l        40px  large gaps (a quote inside a section)
     --space-section  56px  space at the top and bottom of every section
   ========================================================== */

@media (max-width: 768px) {

  :root {
    --space-s: 16px;
    --space-m: 24px;
    --space-l: 40px;
    --space-section: 56px;
  }

  /* ---- 1. Every regular section: the same space top and bottom ----
     Left alone on purpose: the heroes, the trust strip, and the
     full-width photo bands (their photo runs edge to edge). */
  html body main > :not(.hero, .svc-hero, .legal-hero, .ty-hero, .trust-strip-bar, .form-modal-overlay,
      .final-cta, .cta-band, .insurance-callout, .materials, .materials-band,
      .storm-warranty-band, .hs-areas-band, .repairs-cta):not(#_) {
    padding-top: var(--space-section) !important;
    padding-bottom: var(--space-section) !important;
  }

  /* ---- 2. Nothing inside a section adds extra space at its edges ----
     The page-width wrapper gets no top/bottom padding, and the first
     and last item at any level lose their outer margin. That way the
     section alone decides the gap. */
  html body main > :not(.hero, .svc-hero, .legal-hero, .ty-hero, .trust-strip-bar, .form-modal-overlay,
      .final-cta, .cta-band, .insurance-callout, .materials, .materials-band,
      .storm-warranty-band, .hs-areas-band, .repairs-cta):not(#_) > .container {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }
  html body main > :not(.hero, .svc-hero, .legal-hero, .ty-hero, .trust-strip-bar, .form-modal-overlay,
      .final-cta, .cta-band, .insurance-callout, .materials, .materials-band,
      .storm-warranty-band, .hs-areas-band, .repairs-cta):not(#_) :first-child {
    margin-top: 0 !important;
  }
  html body main > :not(.hero, .svc-hero, .legal-hero, .ty-hero, .trust-strip-bar, .form-modal-overlay,
      .final-cta, .cta-band, .insurance-callout, .materials, .materials-band,
      .storm-warranty-band, .hs-areas-band, .repairs-cta):not(#_) :last-child {
    margin-bottom: 0 !important;
  }

  /* ---- 3. Homepage: "We know these roofs" and "How old is your roof?"
     read as one section, so they sit closer together ---- */
  html body main > .lk-band:not(#_) {
    padding-bottom: 0 !important;
  }
  html body main > .lk-band:not(#_) .lk-band-header {
    padding-top: 0 !important;
  }
  html body main > .lk-band:not(#_) + .local-knowledge {
    padding-top: var(--space-l) !important;
  }

  /* ---- 4. Review quotes that are moved to the TOP of their section
     on phones (Gutters "Why", Siding FAQ): no gap above, large gap below ---- */
  html body .why-gutters .why-pullquote:not(#_):not(#_),
  html body .siding-faq .siding-signs-quote:not(#_):not(#_) {
    margin-top: 0 !important;
    margin-bottom: var(--space-l) !important;
  }
}