/**
 * @file
 * Site footer.
 *
 * The old footer used `padding: 0 80px` — a fixed value that pushed content off
 * a 360px screen — and laid its two link groups out with `display: flex` and
 * `margin-right: 50px` per item, which collapsed to a single unreadable line on
 * mobile. Rebuilt as an auto-fitting grid with the same links, grouped.
 */

.site-footer {
  background: var(--footer-bg);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--footer-text);
}

.site-footer__top {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-xl);
  display: grid;
  gap: var(--space-l);
  grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}

.site-footer__brand {
  grid-column: 1 / -1;
}

@media (min-width: 62rem) {
  .site-footer__brand {
    grid-column: span 1;
  }

  /**
   * WHY THE COLUMN COUNT IS SPELLED OUT WHEN THERE IS AN ACKNOWLEDGEMENT
   *
   * `auto-fit` collapses the tracks no item sits in, which is what makes the
   * rule above work for two menus or for four. But the Acknowledgement of
   * Country spans `1 / -1`, so once it is present EVERY track has an item in
   * it and none collapse: the columns keep their 13rem minimum, bunch against
   * the left edge, and leave a third of the footer empty. That is exactly what
   * the footer looked like.
   *
   * So when the acknowledgement is there, the columns are counted — it is
   * always the last child, hence "one fewer track than there are children" —
   * and the first column is given half a track more, because the brand block
   * carries a wordmark and a sentence of description while the others carry a
   * short list of links.
   */
  .site-footer__top:has(> .site-footer__acknowledgement) {
    grid-template-columns: minmax(0, 1fr);
  }

  .site-footer__top:has(> .site-footer__acknowledgement):has(> :nth-child(3)) {
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  }

  .site-footer__top:has(> .site-footer__acknowledgement):has(> :nth-child(4)) {
    grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr));
  }

  .site-footer__top:has(> .site-footer__acknowledgement):has(> :nth-child(5)) {
    grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  }

  .site-footer__top:has(> .site-footer__acknowledgement):has(> :nth-child(6)) {
    grid-template-columns: minmax(0, 1.4fr) repeat(4, minmax(0, 1fr));
  }
}

.site-footer__tagline {
  margin-block-start: var(--space-2xs);
  max-inline-size: 22rem;
  font-size: var(--step--1);
}

/**
 * The council-wide links row (`utility` region), in the footer's bottom bar.
 *
 * WHY `display: contents`
 * -----------------------
 * The links do not arrive as a menu. On this site the block is a view whose
 * field prints hand-written markup, so between the region and each link there
 * are six wrappers:
 *
 *   .region--utility > .block > div > .view > .view__content
 *     > .views-field > .field-content > .footer > .satelite-link
 *       > .desktop > a
 *
 * Earlier rules targeted `.menu` and `ul`, which this markup has none of, so
 * the links stayed stacked. Rather than name every wrapper — and break again on
 * the next block that nests differently — every intermediate element is removed
 * from the layout with `display: contents`. The links then become direct
 * children of one flex row, whatever the depth or the element names.
 */
.region--utility {
  display: flex;
  flex: 1 1 auto;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
}

.region--utility :is(div, span, ul, ol, li, nav, section, p) {
  display: contents;
}

/* A heading on the block would caption a row of links, which reads oddly. */
.region--utility :is(h2, h3, .site-footer__heading) {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.region--utility a {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--step--2);
  text-decoration: none;
  white-space: nowrap;
}

.region--utility a:hover {
  color: var(--text-accent);
  text-decoration: underline;
}

/**
 * The copyright line arrives inside this block on some sites and as its own
 * block on others. Either way it should sit at the end of the row, not read as
 * another link.
 */
.region--utility .copyright {
  display: inline-block;
  color: var(--text-muted);
  font-size: var(--step--2);
  white-space: nowrap;
}

.site-footer__heading {
  position: absolute !important;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.region--utility a {
  color: var(--text-muted);
  font-size: var(--step--2);
  text-decoration: none;
  white-space: nowrap;
}

.region--utility a:hover {
  color: var(--text-accent);
  text-decoration: underline;
}

.site-footer__heading {
  margin-block-end: var(--space-2xs);
  color: var(--text-primary);
  font-size: var(--step--2);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
}

.site-footer__bottom {
  border-block-start: 1px solid var(--border-subtle);
}

.site-footer__bottom-inner {
  inline-size: min(var(--wrapper-max), 100% - var(--gutter) * 2);
  margin-inline: auto;
  padding-block: var(--space-m);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-m);
}

/* Copyright left, links right, both wrapping rather than colliding. */
.site-footer__bottom-inner > .region--utility {
  justify-content: flex-end;
}

.site-footer__bottom-inner > .region--utility .menu,
.site-footer__bottom-inner > .region--utility ul {
  justify-content: flex-end;
}

/* On a phone the row goes under the copyright and starts from the left. */
@media (max-width: 47.999rem) {
  .site-footer__bottom-inner > .region--utility,
  .site-footer__bottom-inner > .region--utility .menu,
  .site-footer__bottom-inner > .region--utility ul {
    margin-inline-start: 0;
    justify-content: flex-start;
  }
}

.site-footer__copyright {
  color: var(--text-muted);
  font-size: var(--step--2);
}

.site-footer__acknowledgement {
  grid-column: 1 / -1;
  padding-block-start: var(--space-m);
  border-block-start: 1px solid var(--border-subtle);
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: var(--leading-normal);
  max-inline-size: 52rem;
}

.social {
  display: flex;
  gap: var(--space-2xs);
  list-style: none;
  margin: var(--space-s) 0 0;
  padding: 0;
}

.social__link {
  display: grid;
  place-items: center;
  inline-size: 2.25rem;
  block-size: 2.25rem;
  border-radius: 50%;
  border: 1px solid var(--border-subtle);
  color: var(--footer-text);
  transition:
    color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.social__link:hover {
  color: var(--me-magenta-300);
  border-color: var(--me-magenta);
}

.social__link svg {
  inline-size: 1rem;
  block-size: 1rem;
}