/*
 * footer.css — Site footer chrome.
 * Structure: [CTA band] [3-column grid] [bottom bar]
 * Background: bg-secondary (#20212F), white-40 for muted text.
 */

/* ============================================================
   Footer wrapper
   ============================================================ */
.bit-footer {
  background-color: var(--wp--preset--color--bg-secondary); /* #20212F */
  color: var(--wp--preset--color--white);
}

/* ============================================================
   Inner container — constrained width + horizontal padding
   ============================================================ */
.bit-footer__inner {
  max-width: var(--wp--style--global--content-size); /* 1200px */
  margin-inline: auto;
  padding-inline: var(--wp--preset--spacing--space-xl); /* 32px */
}

/* ============================================================
   CTA band — large heading + action buttons
   ============================================================ */
.bit-footer__cta {
  padding-block: var(--wp--preset--spacing--space-5xl); /* 120px */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--wp--preset--spacing--space-xl); /* 32px */
}

.bit-footer__cta-heading {
  font-size: clamp(2rem, 4vw, var(--wp--preset--font-size--h2)); /* fluid 32px to 40px */
  font-weight: 500;
  line-height: 1.2;
  text-wrap: balance;
  color: var(--wp--preset--color--white);
  max-width: 18ch;
}

/* Buttons row inside CTA */
.bit-footer__cta .wp-block-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--space-md); /* 16px */
  align-items: center;
}

/* ============================================================
   Column grid
   WordPress .wp-block-columns defaults to flex; we override to
   grid for the precise 2fr/1fr/1fr column structure.
   ============================================================ */
.bit-footer__cols.wp-block-columns {
  display: grid !important;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--wp--preset--spacing--space-3xl); /* 60px */
  padding-block: var(--wp--preset--spacing--space-4xl) var(--wp--preset--spacing--space-xl);
  border-top: 1px solid var(--wp--preset--color--white-10);
}

/* Reset WP's flex-basis on individual columns when inside our grid */
.bit-footer__cols .wp-block-column {
  flex-basis: unset !important;
  min-width: 0;
}

/* ============================================================
   Column headings — small, uppercase, muted
   ============================================================ */
.bit-footer__col-heading {
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--wp--preset--color--white-40);
  margin-bottom: var(--wp--preset--spacing--space-lg); /* 24px */
}

/* ============================================================
   Brand column — wordmark description text
   ============================================================ */
.bit-footer__col-brand p {
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  color: var(--wp--preset--color--white-40);
  line-height: 1.65;
}

/* ============================================================
   Link list (Company column)
   ============================================================ */
.bit-footer__col-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--wp--preset--spacing--space-md); /* 16px */
}

.bit-footer__col-list a {
  color: var(--wp--preset--color--white-40);
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  text-decoration: none;
  transition: color 0.2s ease;
}

.bit-footer__col-list a:hover {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* ============================================================
   Contact column — paragraphs and links
   ============================================================ */
.bit-footer__col-contact p {
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  color: var(--wp--preset--color--white-40);
  line-height: 1.6;
  margin-bottom: var(--wp--preset--spacing--space-md); /* 16px */
}

.bit-footer__col-contact p:last-child {
  margin-bottom: 0;
}

.bit-footer__col-contact a {
  color: var(--wp--preset--color--white-40);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bit-footer__col-contact a:hover {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* ============================================================
   Bottom bar — copyright + legal links
   ============================================================ */
.bit-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--wp--preset--spacing--space-md); /* 16px */
  padding-block: var(--wp--preset--spacing--space-xl); /* 32px */
  border-top: 1px solid var(--wp--preset--color--white-10);
}

/* Copyright text */
.bit-footer__copyright,
.bit-footer__copyright p {
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  color: var(--wp--preset--color--white-40);
  margin: 0;
}

/* Legal links group */
.bit-footer__legal-links {
  display: flex;
  align-items: center;
  gap: var(--wp--preset--spacing--space-lg); /* 24px */
}

.bit-footer__legal-links a {
  font-size: var(--wp--preset--font-size--body-sm); /* 14px */
  color: var(--wp--preset--color--white-40);
  text-decoration: none;
  transition: color 0.2s ease;
}

.bit-footer__legal-links a:hover {
  color: var(--wp--preset--color--white);
  text-decoration: none;
}

/* ============================================================
   Mobile (≤ 781px) — single-column stacked layout
   ============================================================ */
@media (max-width: 781px) {
  .bit-footer__inner {
    padding-inline: var(--wp--preset--spacing--space-lg); /* 24px */
  }

  .bit-footer__cta {
    padding-block: var(--wp--preset--spacing--space-4xl); /* 80px */
  }

  .bit-footer__cols.wp-block-columns {
    grid-template-columns: 1fr;
    gap: var(--wp--preset--spacing--space-xl); /* 32px */
  }

  .bit-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--wp--preset--spacing--space-sm); /* 12px */
  }
}