.alt-footer {
  display: block;
  background: var(--alt-ft-bg);
  color: var(--alt-ft-text);
}

.alt-footer__main { padding-block: var(--alt-ft-pad-d); }

/* The reference lays the columns out as one non-wrapping row: the row pulls
   out by the gutter and every column pads back in by it, so the columns sit
   flush edge to edge and the visual gap is the padding. */
.alt-footer__cols {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
}

/* The row only pulls out by the gutter once the container has stopped being
   fluid, so the pull always has room and never widens the page. */
@media (min-width: 1310px) {
  .alt-footer__cols { margin-inline: calc(var(--alt-ft-gutter) * -1); }
}

.alt-footer__col {
  flex: 0 0 var(--alt-ft-col-width, 20%);
  max-width: var(--alt-ft-col-width, 20%);
  min-width: 0;
  padding-inline: var(--alt-ft-gutter);
}

.alt-footer__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 var(--alt-ft-heading-gap, 12px);
  color: var(--alt-ft-heading);
  font-family: var(--alt-font-heading);
  font-size: var(--alt-ft-heading-size);
  font-weight: var(--alt-fw-heading-bold, 700);
  line-height: 1.28;
}

/* The newsletter column carries its own, larger heading. */
.alt-footer__col--newsletter .alt-footer__title {
  font-size: var(--alt-ft-news-size);
  line-height: 1.5;
  margin-bottom: var(--alt-ft-news-gap);
}

/* The chevron only exists for the mobile accordion. */
.alt-footer__chevron { display: none; }

.alt-footer__links { margin: 0; padding: 0; list-style: none; }

.alt-footer__link {
  display: block;
  color: var(--alt-ft-text);
  font-size: var(--alt-ft-link-size);
  line-height: var(--alt-ft-link-lh);
  text-decoration: none;
  transition: color var(--alt-hover-duration) ease;
}
.alt-footer__link:hover { color: var(--alt-ft-hover); }

.alt-footer__blurb {
  margin: 0;
  color: var(--alt-ft-text);
  font-size: var(--alt-ft-link-size);
  line-height: 1.5;
}
.alt-footer__blurb a { color: var(--alt-ft-text); }

.alt-footer__col--newsletter .alt-footer__blurb { margin-bottom: 20px; }

.alt-footer__logo { margin-bottom: 18px; }
.alt-footer__logo-img { width: 100%; height: auto; }

/* ---------------------------------------------------------------- newsletter */

.alt-newsletter {
  display: flex;
  align-items: stretch;
  height: var(--alt-ft-field-h);
  border: 1px solid var(--alt-ft-field-border);
  border-radius: 999px;
  background: var(--alt-ft-field-bg);
  overflow: hidden;
}

.alt-newsletter__icon {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  width: 48px;
  color: var(--alt-ft-field-text);
  opacity: 0.55;
}
.alt-newsletter__icon svg { width: 18px; height: 18px; }

.alt-newsletter__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 8px 0 0;
  border: 0;
  background: none;
  color: var(--alt-ft-field-text);
  font-family: var(--alt-font-body);
  font-size: var(--alt-ft-link-size);
}
.alt-newsletter__input:focus { outline: none; }
.alt-newsletter__input::placeholder { color: var(--alt-ft-field-text); opacity: 0.55; }

.alt-newsletter__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 44px;
  padding-inline: 12px;
  border: 0;
  border-radius: 0 999px 999px 0;
  background: var(--alt-ft-button-bg);
  color: var(--alt-ft-button-text);
  font-family: var(--alt-font-heading);
  font-size: calc(var(--alt-ft-link-size) * 0.9);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: filter var(--alt-hover-duration) ease;
}
.alt-newsletter__button:hover { filter: brightness(0.94); }

.alt-newsletter__msg {
  margin: 10px 0 0;
  font-size: calc(var(--alt-ft-link-size) * 0.9);
  opacity: 0.9;
}
.alt-newsletter__msg--error { color: #ffb4b4; }

/* ---------------------------------------------------------------- bottom */

.alt-footer__bottom {
  padding: var(--alt-ft-bottom-pad-top) 0 var(--alt-ft-bottom-pad-bottom);
  border-top: var(--alt-ft-bottom-border) solid var(--alt-ft-rule);
}

.alt-footer__bottom-inner {
  display: flex;
  align-items: flex-end;
  gap: 20px;
}
.alt-footer__bottom-left,
.alt-footer__bottom-right { flex: 1 1 0; }
.alt-footer__bottom-center { flex: 1 1 0; text-align: center; }
.alt-footer__bottom-right { display: flex; justify-content: flex-end; }

.alt-footer__copyright {
  font-size: var(--alt-ft-link-size);
  line-height: 1.5;
}

.alt-footer__social {
  display: flex;
  align-items: center;
  gap: var(--alt-ft-social-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}
.alt-footer__social a { color: var(--alt-ft-text); transition: color var(--alt-hover-duration) ease; }
.alt-footer__social a:hover { color: var(--alt-ft-hover); }
.alt-footer__social svg { width: var(--alt-ft-social-size); height: var(--alt-ft-social-size); }

.alt-footer__payments { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.alt-footer__payments svg { height: 24px; width: auto; }

/* ---------------------------------------------------------------- tablet */

@media (max-width: 1279px) {
  .alt-footer__main { padding-block: var(--alt-ft-pad-t); }

  .alt-footer__cols { flex-wrap: wrap; }

  /* Two up, like the reference at this width. */
  .alt-footer__col {
    flex: 0 0 50%;
    max-width: 50%;
    padding-block: 16px;
  }

  .alt-footer__col--newsletter .alt-footer__title {
    font-size: var(--alt-ft-heading-size);
    line-height: 1.36;
    margin-bottom: var(--alt-ft-heading-gap, 12px);
  }
}

/* ---------------------------------------------------------------- mobile */

@media (max-width: 767px) {
  .alt-footer__main { padding-block: var(--alt-ft-pad-m); }

  .alt-footer__col {
    flex: 0 0 100%;
    max-width: 100%;
    padding-block: 0;
  }

  /* The reference puts the sign-up form first on a phone. */
  .alt-footer__col--newsletter { order: -1; padding-block: 24px; }
  .alt-footer__col--logo { padding-block: 20px; }

  /* Accordion: the trigger becomes a full-width tappable row and the panel
     collapses. Only applies when the section turns it on. */
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--menu,
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--text {
    border-bottom: 1px solid var(--alt-ft-rule);
  }
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--menu .alt-footer__title,
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--text .alt-footer__title {
    margin: 0;
    padding-block: 14px;
    cursor: pointer;
  }
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--menu .alt-footer__chevron,
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--text .alt-footer__chevron {
    display: inline-flex;
    transition: transform 0.25s ease;
  }
  .alt-footer[data-accordion-mobile="true"] .alt-footer__title[aria-expanded="true"] .alt-footer__chevron {
    transform: rotate(180deg);
  }
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--menu .alt-footer__panel[hidden],
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--text .alt-footer__panel[hidden] {
    display: none;
  }
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--menu .alt-footer__panel,
  .alt-footer[data-accordion-mobile="true"] .alt-footer__col--text .alt-footer__panel {
    padding-bottom: 14px;
  }

  .alt-footer__bottom-inner { flex-direction: column; align-items: center; gap: 14px; }
  .alt-footer__bottom-left,
  .alt-footer__bottom-right,
  .alt-footer__bottom-center { flex: 0 0 auto; justify-content: center; text-align: center; }
}

/* ---- anchor colour re-assertion ---- */
a.alt-footer__link { color: var(--alt-ft-text); }
a.alt-footer__link:hover { color: var(--alt-ft-hover); }