/**
 * Site Footer styles.
 *
 * Layout strategy:
 *   .site-footer        — full viewport width, owns the background color.
 *   .site-footer__inner — content-width container, centered.
 *
 * --site-footer-max-width can be overridden by the active theme to match
 * its content-width wrapper. Default 1200px is a sensible fallback.
 */

.site-footer {
  /* Full-bleed: break out of any constrained parent (Layout Builder wrapper,
     theme container, etc.) and span the full viewport width. The negative
     margins offset the parent's padding/centering so the element starts at
     viewport edge 0 and ends at viewport edge 100vw. */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Breathing room above the footer, separating it from page content. */
  margin-top: 4rem;
  /* Remove any inherited bottom gap so the bg color reaches the viewport
     bottom when the footer is the last element on the page. */
  margin-bottom: 0;
  background-color: var(--site-footer-bg, #f4f9fd);
  padding: 3rem 1rem;
  box-sizing: border-box;
}

.site-footer__inner {
  max-width: var(--site-footer-max-width, 1200px);
  margin: 0 auto;
  font-family: sans-serif;
  color: #222;
}

.site-footer__logo {
  margin-bottom: 1.5rem;
}

.site-footer__logo img {
  display: block;
  max-width: 240px;
  height: auto;
}

.site-footer__divider {
  border: 0;
  border-top: 0px solid rgba(0, 0, 0, 0.15);
  margin: 1.5rem 0;
}

.site-footer__row {
  display: grid;
  gap: 1.5rem;
  /* Mobile-first: stack to one column. */
  grid-template-columns: 1fr;
}

.site-footer__col {
  min-width: 0; /* lets grid items shrink without overflowing. */
}

.site-footer__col h1,
.site-footer__col h2,
.site-footer__col h3,
.site-footer__col h4,
.site-footer__col h5,
.site-footer__col h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.site-footer__col p {
  margin: 0 0 0.5rem;
  line-height: 1.4;
}

/* ~640px: split rows into 2 columns. */
@media (min-width: 40em) {
  .site-footer__row--top,
  .site-footer__row--bottom {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ~960px: top row stays 2-up paired, bottom row goes 3-up. */
@media (min-width: 60em) {
  .site-footer__row--top {
    /* First column shrinks to fit the logo; remaining 3 share the rest. */
    grid-template-columns: auto repeat(3, 1fr);
  }
  .site-footer__row--bottom {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ~1200px: full layout — 4 across the top, 6 across the bottom. */
@media (min-width: 75em) {
  .site-footer__row--bottom {
    grid-template-columns: repeat(6, 1fr);
  }
}