/**
 * footer-menu.css
 */

/* Component: FooterMain, the menu with the newsletter beside it */
.footer-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(240px, 300px);
  gap: 32px 48px;
  align-items: start;
  margin-bottom: 48px;
}

/* Component: FooterMenu */
.footer-menu {
  /* Tablet and mobile: even columns, two per row on a phone. */
  .footer-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 32px var(--mega-col-gap);
  }

  /* Same as a mega menu column title. */
  .footer-title {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 16px;
    font-size: var(--font-size-small);
    font-weight: 600;
    letter-spacing: 0.5px;
    line-height: var(--line-height-h3);
    text-transform: uppercase;
    color: var(--color-white);

    a {
      color: inherit;
      text-decoration: none;

      &:hover,
      &:focus-visible {
        text-decoration: underline;
      }
    }
  }

  /* Full width link rows, the list pulls back by their padding as in the mega menu. */
  .footer-links {
    display: flex;
    flex-direction: column;
    margin-block: -5px;
  }

  .footer-link a {
    display: flex;
    align-items: center;
    column-gap: 4px;
    padding-block: 5px;
    color: var(--color-grey-light);
    font-size: var(--font-size-medium);
    text-decoration: none;
    transition: var(--global-transition);

    &:hover,
    &:focus-visible {
      color: var(--color-white);
      text-decoration: underline;
    }
  }

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

  /* Display options of a Multi item, as in the mega menu. */
  .footer-column:is(.mega-display-highlighted, .mega-display-simple-highlight) > .footer-title,
  .footer-link:is(.mega-display-highlighted, .mega-display-simple-highlight) > a {
    color: var(--color-primary);
  }

  .footer-column.mega-display-highlighted > .footer-title::before,
  .footer-link.mega-display-highlighted > a::before {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../../images/icons/icon-star-open-48x48.png') no-repeat center / contain;
    -webkit-mask: url('../../images/icons/icon-star-open-48x48.png') no-repeat center / contain;
    position: relative;
    top: -1px;
  }

  .footer-column.mega-display-chevron > .footer-title::after,
  .footer-link.mega-display-chevron > a::after {
    content: '';
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    background: currentColor;
    mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
    -webkit-mask: url('../../images/icons/icon-chevron-right-48x48.png') no-repeat center / contain;
    position: relative;
    top: 1px;
  }
}

/* Mobile: FooterMain, the newsletter folds under the menu */
@media (max-width: 767px) {
  .footer-main {
    grid-template-columns: minmax(0, 1fr);
    margin-bottom: 32px;
  }

  .footer-menu .footer-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/**
 * Desktop: FooterMain, the mega menu's six column grid.
 * The menu spans four columns and the newsletter two, so a fifth menu column wraps.
 */
@media (min-width: 1025px) {
  .footer-main {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    column-gap: var(--mega-col-gap);
  }

  .footer-menu {
    grid-column: 1 / 5;

    .footer-columns {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }
  }

  .footer-main > .newsletter {
    grid-column: 5 / 7;
  }
}