/**
 * CZ Innovation site footer.
 */

.site-footer {
  --site-footer-bg: #010405;
  --site-footer-text: var(--czinn-steel-300, #9fa6a3);
  --site-footer-link: var(--czinn-steel-100, #dde3e3);
  --site-footer-accent: var(--czinn-color-accent, #69cb6b);
  --site-footer-border: rgba(var(--czinn-white-rgb, 255, 255, 255), 0.1);

  position: relative;
  margin-block-start: clamp(2rem, 4vw, 4rem);
  padding-block: clamp(2.5rem, 5vw, 4rem);
  color: var(--site-footer-text);
  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(var(--czinn-green-rgb, 46, 147, 70), 0.1),
      transparent 35%
    ),
    var(--site-footer-bg);
  border-top: 1px solid var(--site-footer-border);
}

.site-footer::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 0.1875rem;
  content: "";
  background: var(
    --czinn-gradient-brand,
    linear-gradient(90deg, #69cb6b, #2e9346, #084e2b)
  );
  opacity: 0.85;
}

.site-footer__container {
  display: block;
}

.site-footer .region-footer {
  --bs-gutter-x: clamp(1.5rem, 4vw, 3rem);
  --bs-gutter-y: 2rem;

  /* Override Bootstrap5 base theme's `footer .region-footer` column layout so
     the Bootstrap row/row-cols utilities can distribute blocks horizontally. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}

.site-footer .region-footer > .block {
  /* Keep Bootstrap row's margin-top gutter; only neutralize legacy block
     spacing below each item. */
  margin-block-end: 0;
}

.site-footer h2,
.site-footer h3 {
  margin: 0 0 1rem;
  color: var(--czinn-white, #fff);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.site-footer .nav,
.site-footer .menu {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: flex-start;
  margin: 0;
  padding: 0;
  text-align: left;
  list-style: none;
}

.site-footer a.b5-menu-link--has-icon,
.site-footer .nav-link.b5-menu-link--has-icon {
  display: flex;
  gap: 0.625rem;
  align-items: center;
  justify-content: flex-start;
}

.site-footer a,
.site-footer .nav-link {
  padding: 0.25rem 0;
  color: var(--site-footer-link);
  text-decoration: none;
  text-underline-offset: 0.3em;
  transition:
    color 160ms ease,
    text-decoration-color 160ms ease;
}

.site-footer a:hover,
.site-footer .nav-link:hover {
  color: var(--site-footer-accent);
  text-decoration: underline;
  text-decoration-color: var(--site-footer-accent);
}

.site-footer a:focus-visible,
.site-footer .nav-link:focus-visible {
  color: var(--czinn-white, #fff);
  outline: 0.1875rem solid var(--czinn-color-focus, #69cb6b);
  outline-offset: 0.25rem;
  border-radius: 0.125rem;
}

.site-footer p,
.site-footer .field--name-body {
  margin: 0;
  color: var(--site-footer-text);
  line-height: 1.65;
}

@media (max-width: 575.98px) {
  .site-footer {
    padding-block: 2rem 2.25rem;
  }

  .site-footer .region-footer {
    --bs-gutter-x: 1.5rem;
    --bs-gutter-y: 2rem;
  }

  .site-footer .nav,
  .site-footer .menu {
    flex-direction: column;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer a,
  .site-footer .nav-link {
    transition: none;
  }
}