/*
 * Site footer (inc/site-footer.php).
 *
 * The footer is this theme's code, not Blocksy's footer builder, so this file
 * is the only source of its look: the markup carries none of Blocksy's footer
 * classes, and the builder's generated rules in uploads/blocksy/css/global.css
 * match nothing here. Width and side gutters come from Blocksy's .ct-container.
 *
 * One surface, everything stacked and centered at every width: the main links,
 * then the fine print (the legal menu, then the copyright line). The hairline
 * separates the two and exists only where main links are there to separate;
 * the members' footer is the fine print alone.
 */

.pp-site-footer {
  background-color: var(--theme-palette-color-8);
}

.pp-site-footer__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding-block: 16px;
}

/* ---- Menus --------------------------------------------------------- */

.pp-site-footer__menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* Row gap 4px: each link's box is already 24px tall (below), so wrapped
     lines read about 12px apart. */
  gap: 4px 24px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* Type is set on the list, not the links: each <li> builds its line box
     from its own font, so type set on the <a> alone leaves every row the
     body's 19px x 1.65 tall, which shows as a wide gap when the row wraps. */
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  text-transform: uppercase;
}

.pp-site-footer__menu a {
  /* STYLING.md 24px floor for a text link in a row; not 44px, which would
     reach into the wrapped line below or the hairline. */
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  text-decoration: none;
  color: var(--theme-palette-color-3);
}

.pp-site-footer__menu a:hover {
  color: var(--theme-palette-color-3);
}

.pp-site-footer__menu a:focus-visible {
  outline: 2px solid var(--pp-focus-ring);
  outline-offset: 2px;
}

/* The main links are the larger, heavier menu; the legal ones are fine print. */
.pp-site-footer__inner > .pp-site-footer__nav .pp-site-footer__menu {
  font-size: 0.85rem;
  font-weight: 500;
}

/* ---- Fine print ---------------------------------------------------- */

.pp-site-footer__fine {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

.pp-site-footer__nav + .pp-site-footer__fine {
  align-self: stretch;
  padding-top: 12px;
  border-top: 1px solid var(--theme-palette-color-6);
}

.pp-site-footer__copyright {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 400;
  line-height: 1.3;
  color: var(--theme-palette-color-3);
}