footer {
  color: var(--footer-color-text);
  background-color: var(--footer-color-background);
  font-size: var(--footer-font-size);
  padding-block: var(--footer-padding-block);
  padding-block: 1.5rem;

  .spr-rich-text {
    color: var(--footer-color-text);
    font-size: var(--footer-font-size);

    h3:not(:empty) {
      margin-block-end: 0.625rem;
      font-size: 1.5rem;
      font-weight: 900;
      line-height: 120%;
    }

    ul:not(.contextual-links) {
      padding-inline-start: 0;
      li::before {
        display: none;
        content: "";
      }
      li::marker {
        content: none;
      }
    }

    a:not(.spr-button, .spr-button) {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      text-decoration: none;
      text-underline-offset: 0.25rem;
      color: var(--footer-link-color);
      &:hover {
        text-decoration: underline;
        color: var(--footer-link-hover-color);
        text-underline-offset: 0.25rem;
        text-decoration-thickness: 0.125rem;
        text-decoration-color: var(--footer-link-hover-color);
      }
      &:focus-visible {
        outline-offset: 0.125rem;
      }
      &[href^="tel:"]::before {
        display: block;
        content: "";
        background: transparent var(--footer-icon-phone) no-repeat center;
        background-size: contain;
        inline-size: 1.25rem;
        block-size: 1.25rem;
      }
      &[href^="mailto:"]::before {
        display: block;
        content: "";
        background: transparent var(--footer-icon-mail) no-repeat center;
        background-size: contain;
        inline-size: 1.25rem;
        block-size: 1.25rem;
      }
    }
    .spr-icon-link:not(.spr-button) {
      transition: color 0.3s ease-in-out;
      color: var(--color-gray-80);
      &:hover {
        color: var(--color-secondary-dark);
      }
    }
  }

  .spr-icon-link:not(.spr-button) {
    transition: color 0.3s ease-in-out;
    color: var(--color-gray-80);
    &:hover {
      color: var(--color-secondary-dark);
    }
  }

  .spr-block {
    margin-block-end: 1.5rem;
    padding: 0;
  }

  .spr-block .spr-block__content {
    padding-block: unset;
  }

  .spr-logo {
    margin-block: 0 1rem;
  }

  h3,
  ul,
  p {
    margin-block: 0 1rem;
  }

  a {
    color: var(--footer-link-color);
  }

  .grid {
    @media screen and (max-width: 62rem) {
      gap: 0;
    }
  }

  @media screen and (min-width: 62rem) {
    /* Breakpoint LG */
    padding-block: var(--footer-padding-block);
  }
}

.spr-footer__top {
  display: grid;
  grid-template-rows: auto;
  grid-template-columns: subgrid;
  grid-column: 1 / -1;

  .spr-rich-text ul:not(.pager__items, .contextual-links) {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    li {
      padding-inline-start: 1.3rem;
      background: transparent var(--footer-icon-caret) no-repeat 0.35rem 0.6rem;
    }
  }

  .spr-logo {
    @media (min-width: 62rem) {
      img {
        width: auto;
      }
    }
  }

  .spr-footer__col {
    grid-column: 1 / -1;
    margin-block-end: 1.5rem;
    padding-block-end: 1.5rem;
    border-block-end: 0.0625rem solid var(--color-gray-40);
    .spr-block:last-child {
      margin-block-end: 0;
    }
    @media screen and (min-width: 62rem) {
      padding-block-end: 0;
      border-block-end: none;
    }
  }
  a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    text-underline-offset: 0.25rem;
    &:hover {
      text-decoration: underline;
      text-underline-offset: 0.25rem;
      text-decoration-thickness: 0.125rem;
      text-decoration-color: var(--footer-link-hover-color);
    }
    &:focus-visible {
      outline-offset: 0.125rem;
    }
    &[href^="tel:"]::before {
      display: block;
      content: "";
      background: transparent url("../../images/icons/icon-phone-orange.svg") no-repeat center;
      background-size: contain;
      inline-size: 1.25rem;
      block-size: 1.25rem;
    }
  }
  .spr-icon-wrapper {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-block-end: 2.5rem;
    a {
      transition: color 0.3s ease-in-out;
      color: var(--color-black);
      &:hover {
        color: var(--footer-bottom-link-hover-color);
      }
    }
  }

  #block-springboard-downloaddeapp {
    margin-block-end: 1rem;
  }

  @media screen and (min-width: 62rem) {
    grid-column: 1 / 13;

    .spr-footer__col:nth-child(1) {
      grid-column: 1 / span 3;
    }
    .spr-footer__col:nth-child(2) {
      grid-column: 4 / span 3;
    }
    .spr-footer__col:nth-child(3) {
      grid-column: 7 / span 3;
    }
    .spr-footer__col:nth-child(4) {
      grid-column: 10 / span 3;
    }
  }
}

.spr-footer__bottom {
  display: flex;
  flex-direction: column-reverse;
  grid-column: 1 / 5;

  .spr-footer__col:nth-child(1) {
    grid-column: 1 / 5;
  }
  .spr-footer__col:nth-child(2) {
    grid-column: 1 / 5;
  }
  .spr-footer__col:nth-child(1) {
    grid-column: 2 / 5;
  }
  .spr-footer__col:nth-child(2) {
    grid-column: 8 / 11;
  }

  p {
    margin-block: 0;
  }

  ul {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    margin-block-end: 1.25rem;
    padding: 0;
    list-style-type: none;

    @media (min-width: 992px) {
      flex-direction: row;
      flex-wrap: nowrap;
      justify-content: space-between;
      /* gap: var(--footer-columns-gap); */

      li {
        margin-inline-end: 1.25rem;
      }
    }
  }

  a:not(.spr-button) {
    text-decoration: none;
    color: var(--color-black);

    &:hover {
      text-decoration: underline;
      color: var(--footer-bottom-link-hover-color);
      text-underline-offset: 0.25rem;
      text-decoration-thickness: 0.125rem;
      text-decoration-color: var(--footer-bottom-link-hover-color);
    }
    &:focus-visible {
      outline-offset: 0.125rem;
    }
  }

  @media screen and (min-width: 62rem) {
    flex-direction: row;
    grid-column: 1 / 13;
    justify-content: space-between;
    /* Breakpoint LG */
    padding-block-start: 1.5rem;
    border-block-start: 0.0625rem solid var(--footer-border-color);
  }
}

.spr-footer--dark {
  --footer-color-background: var(--footer-color-background-dark);
  --footer-color-text: white;
  --footer-link-color: white;
  --footer-link-hover-color: var(--color-primary);
  --footer-border-color: var(--footer-border-color-on-dark);

  .spr-rich-text:not(:has(nav.pager)) {
    h3 {
      color: var(--footer-color-text);
    }
    a:not(.spr-button, [class*="leaflet"], .spr-banner__link, .button--primary, .button--secondary, .button--tertiary),
    .ck-content:not(:has(nav.pager)) a:not(.spr-button, [class*="leaflet"], .spr-banner__link, .button--primary, .button--secondary, .button--tertiary) {
      color: var(--footer-color-text);
      &:hover {
        color: var(--footer-link-hover-color);
      }
    }
  }

  a:not(.spr-button) {
    color: var(--footer-color-text);
    &:hover {
      color: var(--footer-link-hover-color);
    }
  }

  .spr-icon-link {
    transition: color 0.3s ease-in-out;
    color: white;
    &:hover {
      color: var(--color-primary-medium);
    }
  }
}

/* Overrides for the PWA */

body.site--is-pwa .spr-footer {
  display: none;
}