/* Footer — M21. Markets, legal, payoff.
 *
 * The base row is where the payoff lives. It is a fixed string and it is never
 * translated, which is why it is set in the display face rather than treated
 * as body text.
 */

/* DR-01: the footer closes the page with the weight the masthead opens it.
 * Filled navy through data-theme="dark", so the labels become sky (7.8:1) and
 * the hairlines separate rather than disappear — a navy rule on a navy ground
 * is not a rule. */
.pl-footer {
  background: var(--c-surface);
  color: var(--c-text);
  border-top: var(--rule) solid var(--c-water);
  padding-block: var(--section-y) var(--sp-4);
}

.pl-footer__cols {
  display: grid;
  gap: var(--sp-4);
}

@media (min-width: 48rem) {
  /* Tracks sized to what is in them rather than to a share of the page.
   *
   * At 1fr each these were 405px wide on a 1360px page with three words in
   * them, so the lists sat far apart with air inside each one, while the legal
   * block underneath stayed compact against the left margin. The footer read as
   * two different layouts stacked on each other. Capping the track makes the
   * columns a group, and starting that group at the left margin puts it on the
   * same axis as everything below it. The open space moves to the right, where
   * it is the same open space the base row already has. */
  .pl-footer__cols {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 17rem));
    justify-content: start;
    gap: var(--sp-6) var(--sp-8);
  }
}

.pl-footer__cols .label {
  margin-bottom: var(--sp-2);
}

.pl-footer__address {
  line-height: var(--lh-body);
}

.pl-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-footer__link:hover {
  color: var(--c-text-muted);
}

/* The footer menu is rendered by WordPress, so its links never pass through
 * .pl-footer__link and were coming out 22px high — half the minimum target.
 * The list gets the same geometry as every other link in this footer. */
.pl-footer__list {
  list-style: none;
  display: flex;
  flex-direction: column;
}

.pl-footer__list a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.pl-footer__list a:hover {
  color: var(--c-text-muted);
}

/* Spec §7.5 sets the legal row out as lines, not as a spread: the legal
 * identity, then the links, then the copyright, then the payoff last. Stacked
 * rather than justified, because a row that spreads three items across the page
 * reads as three unrelated things. */
.pl-footer__base {
  margin-top: var(--sp-6);
  padding-top: var(--sp-4);
  border-top: var(--rule) solid var(--c-water);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-1);
}

.pl-footer__legal-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--sp-3);
  list-style: none;
  font-size: 0.8125rem;
}

/* The payoff closes the page, and it was the smallest thing on it: set below
 * the legal links it was meant to outrank, in a footer where the registration
 * number carried more weight than the sentence the brand ends on. It keeps its
 * place last, per spec 7.5, and takes the size that place implies. */
.pl-footer__payoff {
  margin-top: var(--sp-4);
  font-family: var(--font-display);
  font-stretch: 125%;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: var(--lh-head);
}

.pl-footer__legal {
  font-size: 0.8125rem;
  color: var(--c-text-muted);
}

/* The social accounts.
 *
 * A row of icon links, sized to the same 44px minimum target as every other
 * link in this footer — the comment above .pl-footer__list records what
 * happened the last time something here was laid out at half that. The glyph is
 * 24px inside a 44px box: the target stays bigger than the mark, which is the
 * point, and the mark stays legible at arm's length, which was the complaint.
 *
 * currentColor on the paths, so the icons follow the footer's theme rather than
 * carrying a colour of their own. Nothing here is decorative-only — each link
 * has a screen-reader label beside the hidden icon. */
.pl-social {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  list-style: none;
  margin: 0;
  padding: 0;
}

.pl-social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 44px;
  margin-inline-start: -0.6875rem;
  color: inherit;
  text-decoration: none;
}

.pl-social__icon {
  width: 24px;
  height: 24px;
  display: block;
  transition: opacity 0.18s ease;
}

.pl-social__link:hover .pl-social__icon,
.pl-social__link:focus-visible .pl-social__icon {
  opacity: 0.65;
}