/* ==========================================================================
   Footer — Mobile (Site-Wide)
   The footer is rendered by the Astra Footer Builder and shared across every
   page. On desktop/tablet the parent theme's layout is fine; on phones the
   default rendering squishes the contact info and keeps the "Quick Links" /
   "Services" lists side-by-side. These rules only apply at <=768px and leave
   desktop/tablet untouched.

   Reading order on mobile: logo -> phone -> email -> Quick Links -> Services
   -> Get a Quote -> copyright. Contact items become large tappable buttons.
   Scoped to .site-footer so nothing leaks elsewhere.
   ========================================================================== */

@media (max-width: 768px) {

  /* Single spacing token drives the whole mobile footer rhythm so every gap
     between stacked groups (logo -> phone -> email -> Quick Links -> Services
     -> Get a Quote) is identical. Tune here. */
  .site-footer {
    --footer-mobile-gap: 24px;
  }

  /* Force the above-footer columns into a single stacked column across the
     whole phone/small-tablet range. By default Astra only stacks the footer
     at <=544px and keeps a cramped 3-column grid from 545-768px (where the
     CTA and contact text wrap badly). Extending the stack up to 768px gives
     one consistent, readable footer on all narrow screens. */
  .site-footer .site-above-footer-wrap .ast-builder-grid-row {
    /* minmax(0,1fr) (not 1fr) so the column can shrink below the carousel's
       content width — otherwise the wide swipe track widens the whole footer. */
    grid-template-columns: minmax(0, 1fr) !important;
  }

  /* Break the min-content chain so the carousel scrolls instead of widening
     the footer. Grid/flex items default to min-width:auto. */
  .site-footer .site-footer-section,
  .site-footer .footer-widget-area,
  .site-footer #block-372,
  .site-footer #block-372 .uagb-layout-flex {
    min-width: 0 !important;
  }

  /* --- Above-footer: center everything, even spacing between groups --- */
  .site-footer .site-above-footer-wrap {
    padding: 8px 16px 4px;
  }

  /* One consistent gap between the three stacked grid sections (contact block,
     link lists, Get a Quote). Replaces the old per-section margins that mixed
     32px section gaps with element margins and produced uneven whitespace. */
  .site-footer .site-above-footer-inner-wrap {
    row-gap: var(--footer-mobile-gap);
  }

  .site-footer .site-footer-section {
    text-align: center;
    /* !important to beat Astra's default 10px section margin so the grid
       row-gap is the single source of between-section spacing. */
    margin-bottom: 0 !important;
  }

  /* Astra puts a top margin on footer widget areas (~64px on the link-lists
     area), which was the big gap above "Quick Links". Spacing between groups is
     handled by the grid row-gap below, so zero this default out. */
  .site-footer .footer-widget-area {
    text-align: center;
    margin-top: 0;
  }

  /* Center the UAGB info-box content (phone/email) and icon-list wrappers */
  .site-footer .uagb-ifb-content,
  .site-footer .uagb-ifb-left-title-image {
    justify-content: center;
    text-align: center;
  }

  /* --- Contact block (section 1): logo + phone + email evenly spaced --- */
  /* Each widget is wrapped in its own .footer-widget-area; space those by the
     shared gap, last one clears it so it doesn't stack onto the grid row-gap
     before the link lists. */
  .site-footer .site-footer-above-section-1 .footer-widget-area {
    margin-bottom: var(--footer-mobile-gap);
  }

  .site-footer .site-footer-above-section-1 .footer-widget-area:last-child {
    margin-bottom: 0;
  }

  /* --- Logo (widget-4) --- */
  .site-footer .site-footer-above-section-1 .wp-block-image img {
    max-width: 180px;
    height: auto;
    margin: 0 auto;
  }

  /* --- Phone (block-348) & Email (block-350) -> large tappable buttons --- */
  .site-footer #block-348 .wp-block-uagb-info-box,
  .site-footer #block-350 .wp-block-uagb-info-box {
    max-width: 320px;
    margin: 0 auto;
    padding: 14px 20px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--ast-global-color-0);
    border-radius: 9rem;
    background: var(--ast-global-color-0);
    transition: background-color 0.3s ease;
  }

  /* Make the whole button tappable (UAGB overlays an absolute link) */
  .site-footer #block-348 .uagb-infobox-link-wrap,
  .site-footer #block-350 .uagb-infobox-link-wrap {
    z-index: 1;
  }

  .site-footer #block-348 .uagb-ifb-content,
  .site-footer #block-350 .uagb-ifb-content {
    width: 100%;
  }

  /* Icon + label sit on one centered row, white on the colored button */
  .site-footer #block-348 .uagb-ifb-left-title-image,
  .site-footer #block-350 .uagb-ifb-left-title-image {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  .site-footer #block-348 .uagb-ifb-icon-wrap svg,
  .site-footer #block-350 .uagb-ifb-icon-wrap svg {
    fill: #ffffff;
    width: 18px;
    height: 18px;
  }

  .site-footer #block-348 .uagb-ifb-title,
  .site-footer #block-350 .uagb-ifb-title {
    color: #ffffff;
    font-size: 18px;
    margin: 0;
  }

  /* Mobile Safari / Chrome-Android auto-detect the phone number text and wrap
     it in their own tel: link, which repaints it in the OS default link color
     — overriding the inherited white and leaving the number invisible on the
     red button (still present and tappable, just unreadable). Force white via
     -webkit-text-fill-color (what Safari uses for the detected link) plus an
     !important color, scoped to the phone block. Email is not auto-detected,
     so it's unaffected and left alone. */
  .site-footer #block-348 .uagb-ifb-title,
  .site-footer #block-348 .uagb-ifb-title a {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff;
    text-decoration: none;
  }

  /* Hide the empty UAGB button slot so it doesn't add stray spacing */
  .site-footer #block-348 .uagb-ifb-button-wrapper:empty,
  .site-footer #block-350 .uagb-ifb-button-wrapper:empty {
    display: none;
  }

  /* --- Link lists (widget-2 / block-372): stack instead of side-by-side --- */
  /* UAGB sets flex-direction:row inline-ish; override to stack the two lists. */
  .site-footer #block-372 .uagb-layout-flex {
    flex-direction: column !important;
    gap: var(--footer-mobile-gap);
    /* The block carries an explicit min-height + space-around, which padded
       empty space above "Quick Links". Hug the content and pack to the top so
       the gap is just the row-gap. */
    min-height: 0 !important;
    justify-content: flex-start !important;
  }

  /* Full-width, centered widget-2 content. The headings and lists live in UAGB
     flex containers, so centering means the cross-axis (align-items), not
     text-align. UAGB only does this itself below ~767px; these rules extend
     it consistently through 768px (iPad portrait). */
  .site-footer #block-372 .wp-block-uagb-container {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;   /* let children scroll instead of widening the footer */
    align-items: center !important;
    text-align: center !important;
  }

  /* Section headings ("Quick Links" / "Services") centered. Explicit size +
     weight (UAGB renders them as a small unstyled h5 by default) so they read as
     real section headers, matching the prominent text elsewhere in the footer.
     !important beats UAGB's generated heading CSS. */
  .site-footer #block-372 .wp-block-uagb-advanced-heading,
  .site-footer #block-372 .uagb-heading-text {
    width: 100% !important;
    text-align: center !important;
    margin-bottom: 12px;
    font-size: 20px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
  }

  /* Icon lists -> horizontal swipe carousels.
     Each list becomes a single row of link "chips" scrolled sideways with a
     finger (native touch scroll + scroll-snap, no JS). Chips size to their
     content so every label stays on one line — no wrap, no truncation. */

  /* Let the list block + track span the full width of the centered column.
     min-width:0 is essential: without it the flex track keeps its content
     (min-)width and widens the whole footer instead of scrolling internally. */
  .site-footer #block-372 .wp-block-uagb-icon-list {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* Scroll track */
  .site-footer #block-372 .uagb-icon-list__wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    /* center the chips when they fit, but fall back to start-aligned (first
       chip visible, never clipped) once the row overflows and scrolls */
    justify-content: safe center !important;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    gap: 10px;
    padding: 4px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    /* hide scrollbar */
    scrollbar-width: none;
    /* soft right-edge fade hints there's more to swipe */
    -webkit-mask-image: linear-gradient(to right, #000 90%, transparent);
            mask-image: linear-gradient(to right, #000 90%, transparent);
  }

  .site-footer #block-372 .uagb-icon-list__wrap::-webkit-scrollbar {
    display: none;
  }

  /* Chip */
  .site-footer #block-372 .wp-block-uagb-icon-list-child {
    flex: 0 0 auto !important;
    scroll-snap-align: start;
    display: inline-flex !important;
    align-items: center;
    justify-content: center !important;
    gap: 8px;
    margin: 0 !important;
    padding: 10px 16px;
    min-height: 44px;
    white-space: nowrap;
    background: #ffffff;
    border: 2px solid var(--ast-global-color-0);
    border-radius: 9rem;
  }

  /* Full label on one line; icon + text share the brand color */
  .site-footer #block-372 .uagb-icon-list__label {
    white-space: nowrap;
    color: var(--ast-global-color-0);
  }

  .site-footer #block-372 .wp-block-uagb-icon-list-child svg {
    fill: var(--ast-global-color-0);
  }

  /* --- Get a Quote button --- */
  /* Spacing above is handled by the grid row-gap; no extra margin needed. */
  .site-footer .ast-footer-button-1 {
    display: flex;
    justify-content: center;
  }

  /* --- Below-footer: copyright wraps gracefully --- */
  .site-footer .ast-footer-copyright {
    text-align: center;
  }

  .site-footer .ast-footer-copyright p {
    font-size: 13px;
    line-height: 1.8;
  }
}