/* cs-footer — sitewide footer. Full-bleed blue band.
   All rem values follow BB Theme's html { font-size: 10px } base — 1.6rem = 16px. */

/* Strip BB row/module wrappers around the footer so the module's own
   margin-top is the only gap above it */
.fl-row-content-wrap:has(.cs-footer) {
  padding-block: 0;
}
.fl-module-content:has(.cs-footer) {
  margin-block: 0;
}

.cs-footer {
  /* Full-bleed break-out of BB row constraint */
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  /* Gap between the page's last section and the footer */
  margin-top: 10rem; /* 100px */
  background: var(--cs-blue-soft);
  color: var(--cs-blue-dark);
  padding-block: var(--cs-space-xl);
  font-family: var(--cs-font-body);
}

.cs-footer__inner {
  max-width: var(--cs-container);
  margin: 0 auto;
  padding-inline: var(--cs-gutter);
}

/* ---------- Top grid: brand + 3 columns ---------- */
.cs-footer__grid {
  display: grid;
  grid-template-columns: minmax(0, 3.5fr) repeat(3, minmax(0, 1fr));
  gap: 4rem;
  align-items: start;
}

/* Brand column */
.cs-footer__brand {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

.cs-footer__logo {
  display: inline-block;
}

.cs-footer__logo img {
  display: block;
  max-height: 10rem; /* 100px */
  width: auto;
}

.cs-footer__tagline {
  margin: 0;
  font-size: 1.6rem; /* 16px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-blue-dark);
  max-width: 32rem;
}

.cs-footer__credentials {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--cs-space-md);
  margin-top: var(--cs-space-sm);
}

.cs-footer__credential {
  display: inline-flex;
  align-items: center;
}

.cs-footer__credential img {
  display: block;
  max-height: 5.2rem; /* 52px */
  width: auto;
  object-fit: contain;
}

/* Link columns */
.cs-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--cs-space-md);
}

.cs-footer__col-title {
  margin: 0;
  font-family: var(--cs-font-display);
  font-weight: 700;
  font-size: 2rem; /* 20px */
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  color: var(--cs-blue-dark);
}

.cs-footer__menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem; /* 16px */
}

.cs-footer__menu li {
  margin: 0;
}

.cs-footer__menu a {
  color: var(--cs-blue-dark);
  font-size: 1.6rem; /* 16px */
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  text-decoration: none;
  transition: color 200ms ease;
}

.cs-footer__menu a:hover,
.cs-footer__menu a:focus-visible {
  color: var(--cs-blue);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Divider ---------- */
.cs-footer__divider {
  height: 1px;
  background: var(--cs-white);
  opacity: 0.4;
  margin: var(--cs-space-xl) 0 var(--cs-space-md);
}

/* ---------- Bottom row: copyright + legal ---------- */
.cs-footer__bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cs-space-md);
  flex-wrap: wrap;
}

.cs-footer__copyright {
  margin: 0;
  color: var(--cs-white);
  font-weight: 700;
  font-size: 1.6rem; /* 16px */
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
}

.cs-footer__legal {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: var(--cs-space-lg);
}

.cs-footer__legal a {
  color: var(--cs-white);
  font-weight: 700;
  font-size: 1.6rem;
  line-height: 1.5;
  letter-spacing: var(--cs-tracking-tight);
  text-decoration: none;
  transition: opacity 200ms ease;
}

.cs-footer__legal a:hover,
.cs-footer__legal a:focus-visible {
  color: var(--cs-white);
  opacity: 0.8;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .cs-footer__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--cs-space-lg);
  }
  .cs-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .cs-footer {
    padding-block: var(--cs-space-lg);
  }
  .cs-footer__grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--cs-space-lg);
  }
  .cs-footer__divider {
    margin: var(--cs-space-lg) 0 var(--cs-space-md);
  }
  .cs-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--cs-space-sm);
  }
  .cs-footer__legal {
    gap: var(--cs-space-md);
    flex-wrap: wrap;
  }
}