/* ==========================================================================
   theme-custom.css  —  Altivate consolidated responsive + footer fixes
   Added 2026-06-21. Enqueued LAST (after style.css) so plain source order wins —
   edit responsive/footer rules HERE, in one place, instead of stacking !important.
   ========================================================================== */

/* --- 1. MOBILE ZOOM-OUT FIX --------------------------------------------------
   The page was rendering at ~1636px and shrink-to-fitting on phones because
   nothing contained horizontal overflow. Clip it so the layout honors the
   device width (viewport meta is already correct). --------------------------*/
/* overflow-x: clip (NOT hidden) — `hidden` forces overflow-y to `auto`, turning
   these into scroll containers and trapping page scroll on mobile. `clip` clips
   horizontally without establishing a scroll container. */
html, body { overflow-x: clip; max-width: 100%; }
.site-container { overflow-x: clip; }

/* Known off-canvas offender: a center piece absolutely pushed 580px left of
   centre overflows narrow screens. Neutralise it below desktop. */
@media screen and (max-width: 1024px) {
  .center-piece-noborder { position: static; width: 100%; left: auto; right: auto; }
}

/* --- 2. FOOTER COLUMN HEADINGS ----------------------------------------------
   Markup emits <span class="footer-heading"> but the brand-cyan style only
   ever targeted a <h5> that no longer exists, so headings rendered as plain
   white text. Restore the hierarchy. ---------------------------------------*/
.footer-container .col .footer-heading {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: #62cae5;
  text-transform: uppercase;
  line-height: 1.25;
  margin: 28px 0 10px;
  letter-spacing: 0.02em;
}
.footer-container .col .footer-heading a { color: #62cae5; }
.footer-container .col .footer-heading a:hover { color: #8fd9ee; text-decoration: none; }

/* --- 3. FOOTER LAYOUT: legacy floats -> flex --------------------------------
   The four columns used float:left with hard % widths (no stacking 651-767px,
   uneven heights). Flex gives balanced, gap-spaced columns that wrap cleanly. */
.footer-container .center-piece.go-left > .data-row:first-child {
  display: flex;
  flex-wrap: wrap;
  gap: 24px 40px;
  align-items: flex-start;
}
.footer-container .center-piece.go-left > .data-row:first-child > .col.floating-left {
  float: none;
  width: auto;
  flex: 1 1 180px;
  min-width: 0;            /* allow shrink; kills nowrap min-content blow-out */
}
.footer-container .center-piece.go-left > .data-row:first-child > .col.floating-left.large {
  flex: 1 1 260px;
}

/* --- 4. FOOTER MOBILE: remove 300px dead space ------------------------------
   padding-bottom:300px (a hack to clear the absolute mobile nav bar) left a
   permanent black gap. Trim it and stack columns. --------------------------*/
@media screen and (max-width: 960px) {
  .footer-container { padding-bottom: 40px; }
  .footer-container .center-piece.go-left > .data-row:first-child {
    flex-direction: column;
    gap: 18px;
  }
}

/* --- 5. TAP TARGETS (>=44px on touch) ---------------------------------------
   65/80 interactive elements were under the 44px minimum on mobile. ---------*/
@media screen and (max-width: 768px) {
  .footer-container a,
  .mobile-menu .hover-menu a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }
  .footer-social-wrapper { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .footer-social-link {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
}