/* ============================================================================
   WPPBX(TM) public footer, v1. Load LAST, after the site's own stylesheet.

   ONE definition of the footer for every public surface. It exists because the
   two public sites had drifted into two footers that listed the same things and
   agreed on almost nothing else: different heading sizes (13.6px against
   12.48px), different link spacing, different row gaps, different breakpoints,
   different icon alignment, and different markup underneath it all. Matching
   them property by property took several passes and still left differences,
   because they were never going to converge while each site kept its own rules.

   So the rules moved here and BOTH sites load this file. ds-tool keeps every
   copy byte-identical, and the byte-identity gate fails if one drifts.

   THE MARKUP CONTRACT, which both sites must now write:

     footer.site-footer
       .footer-grid
         .footer-col.footer-brand   the mark, .footer-blurb, .footer-entity
         .footer-col                h5 + a, a, a ...      (bare <a>, no <nav>)
       .footer-bottom
         span                       the copyright
         span.footer-wordmark       the watermark, aria-hidden

   Written against design system tokens only, never a site's own aliases, so it
   behaves the same wherever it is loaded.
   ============================================================================ */

.site-footer{
  border-top:1px solid color-mix(in srgb, var(--ink) 6%, transparent);
  padding-top:4rem;
  padding-bottom:1.2rem;
  background:var(--surf);
  position:relative;
  /* Clips the watermark, which is positioned to bleed off the bottom edge.
     Without this it hangs out of the footer and is cut off by whatever
     follows, which is why it looked different from page to page. */
  overflow:hidden;
  margin-top:2rem;
}

.footer-grid{
  display:grid;
  /* One row, however many columns there are. The count is NOT written down: the
     brand keeps an explicit track because it holds a paragraph, and every other
     child creates its own implicit column, so a new column lands in the row
     instead of wrapping under it.

     Not repeat(auto-fit,...): that may not share a track list with an fr size,
     so the whole declaration would be invalid and the grid would collapse to a
     single column. */
  grid-template-columns:1.6fr;
  grid-auto-flow:column;
  /* min-content, not 0: a column must be allowed to be as wide as its widest
     unbreakable item, or a nowrap address overflows instead of widening it. */
  grid-auto-columns:minmax(min-content, 1fr);
  gap:2.5rem;
  padding-bottom:3rem;
}

.footer-col{min-width:0}
.footer-brand .brand,
.footer-brand .nav-brand{margin-bottom:1rem}

.footer-blurb{
  color:var(--ink2);
  font-size:0.92rem;
  line-height:1.55;
  margin:0 0 1.2rem;
}
.footer-entity{
  color:var(--ink2);
  font-size:0.78rem;
  line-height:1.55;
  margin:0;
}

.footer-col h5{
  font-family:var(--font-sans);
  font-size:0.78rem;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--ink);
  margin:0 0 0.9rem;
  font-weight:700;
}

.footer-col a{
  /* inline-flex so the glyph and the label share a gap; flex-start keeps the
     glyph on the FIRST line when a label wraps, where centre would float it
     into the middle of a two-line link. */
  display:inline-flex;
  align-items:flex-start;
  gap:0.5rem;
  width:100%;
  font-size:0.9rem;
  line-height:1.6;
  color:var(--ink2);
  margin-bottom:0.4rem;
  text-decoration:none;
  transition:color .18s ease;
  overflow-wrap:break-word;
}
.footer-col a i{
  color:var(--pri);
  font-size:0.95rem;
  line-height:1.45;
  flex:0 0 auto;
}
.footer-col a:hover{color:var(--pri);text-decoration:none}

/* An email address is one unbreakable token: wrapping it mid-word reads as a
   typo. Addresses only; "Delete my contact submission" is a phrase and wraps. */
.footer-col a[href^="mailto:"],
.footer-col a[href*="email-protection"]{white-space:nowrap}

.footer-bottom{
  padding-top:1.4rem;
  border-top:1px solid color-mix(in srgb, var(--ink) 4%, transparent);
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--ink2);
  font-size:0.78rem;
  position:relative;
}
.footer-bottom > *{min-width:0}
/* The children are lifted above the watermark, never the container: making the
   container relative would turn IT into the containing block for the absolutely
   positioned wordmark, and bottom:0 would anchor to this short row instead of
   to the footer. */
.footer-bottom > *:not(.footer-wordmark){position:relative;z-index:1}

.footer-wordmark{
  position:absolute;
  left:0; right:0;
  bottom:0;
  pointer-events:none;
  font-family:var(--font-sans);
  font-weight:700;
  font-size:clamp(6rem, 18vw, 14rem);
  letter-spacing:-0.05em;
  line-height:0.8;
  text-align:center;
  /* One value, not a tint multiplied by an opacity: that compounded to about 7
     percent and read as grey rather than as brand. */
  color:color-mix(in srgb, var(--pri) 16%, transparent);
  user-select:none;
}

@media (max-width:960px){
  .footer-grid{grid-template-columns:1fr 1fr; grid-auto-flow:row; gap:2rem}
  /* The brand block holds a paragraph, so pairing it with a link column leaves
     one cell long and the other short. */
  .footer-brand{grid-column:1 / -1}
}
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr; grid-auto-flow:row}
  .footer-wordmark{font-size:4.5rem}
}
@media (max-width:480px){
  .site-footer{padding-top:2.75rem}
  .footer-grid{gap:1.6rem; padding-bottom:2rem}
  .footer-wordmark{font-size:3.4rem}
}
@media (max-width:360px){
  .footer-wordmark{font-size:2.8rem}
}
/* A touch target is 44px. margin-bottom goes because the height provides the
   separation. */
@media (pointer: coarse){
  .footer-col a{display:flex; align-items:center; min-height:44px; margin-bottom:0}
}