/* ============================================================
   FABBRUCCIO: FOOTER (section)

   Ported from beta2 site.css:190-206 (the band, the mark, the grid, the
   bar) and :250/:253 (the two column breakpoints). Structure from
   design-language/components.md section 16.

   Markup: parts/footer.html, the single source of truth on both render
   paths (FSE via wp:template-part, classic via footer.php ->
   block_footer_area()).

   beta2 -> here
     footer      -> .fab-footer
     .foot-mark  -> .fab-footer__mark
     .foot-grid  -> .fab-footer__grid
     .foot-news  -> .fab-footer__news
     .foot-col   -> .fab-footer__col
     .foot-bar   -> .fab-footer__bar

   ------------------------------------------------------------
   LANDMINE 2: HOW THIS BAND BLEEDS WITHOUT OVERFLOWING
   ------------------------------------------------------------
   The parent's footer escapes its container with
   `margin-inline: calc(-1 * var(--gutter))` at footer.css:55 and :74,
   UNCONDITIONALLY, which assumes it is inside .wp-site-blocks and that
   the wrapper is paying that gutter back as padding. On a classic PHP
   route there IS no .wp-site-blocks, nobody paid the gutter, and the
   negative margin is a raw pull past the viewport edge.

   Unlike the nav, the footer is IN FLOW: it cannot be position:fixed, so
   it cannot sidestep the question. The fix is to make the escape
   conditional on the thing it assumes. --fab-chrome-bleed is defined in
   fab-tokens.css ONLY on .wp-site-blocks, and valued FROM --gutter:

     FSE path      inside .wp-site-blocks -> bleed = var(--gutter)
     classic path  no .wp-site-blocks     -> bleed falls back to 0px

   So on an FSE route the band escapes exactly the padding that is really
   there, and on a classic route it escapes nothing because there is
   nothing to escape. Custom properties inherit, so the footer picks the
   value up at any depth. It tracks the parent automatically if --gutter
   ever changes, and there is no overflow-x:hidden anywhere in the child
   to hide a mistake behind. NO 100vw: that overflows by the scrollbar's
   width, which is the exact bug this pattern exists to avoid.
   ------------------------------------------------------------ */

.fab-footer {
  margin-inline: calc(-1 * var(--fab-chrome-bleed, 0px));
  padding-inline: var(--fab-chrome-bleed, 0px);
  margin-top: var(--fab-band-md);
  padding-block: clamp(46px, 6vw, 72px) 32px;
  border-top: 1px solid var(--fab-hairline);
  background: var(--fab-ground);
}

.fab-footer__inner {
  width: 100%;
  max-width: var(--fab-wrap);
  margin-inline: auto;
  padding-inline: var(--fab-gutter);
}

/* THE OVERSIZED WORDMARK. The graphic full-stop, and the largest element
   on the page. Same <use> of the same symbol the nav uses; currentColor
   plus opacity .14 is the whole treatment. It is decoration, so the
   markup carries aria-hidden and it is never a link. */
.fab-footer__mark {
  width: 100%;
  margin-bottom: clamp(30px, 4vw, 52px);
  color: var(--fab-ink);
  opacity: .14;
  line-height: 0;
}
.fab-footer__wordmark {
  display: block;
  width: 100%;
  height: auto;
  color: currentColor;
}

.fab-footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: var(--fab-space-xxl);
  padding-bottom: clamp(30px, 4vw, 46px);
}

/* Column heads are micro-labels at .16em, one of the two deliberate
   exceptions to the default .14em uppercase tracking. They are h2 in the
   markup for document outline reasons, and theme.json's h2 (a 1.4-1.9rem
   heading) is overridden here rather than the markup being downgraded to
   a div: the outline matters more than the default size does. */
.fab-footer__heading {
  margin: 0 0 15px;
  font-family: var(--fab-font-sans);
  font-size: var(--fab-size-label);
  font-weight: var(--fab-weight-medium);
  line-height: 1.4;
  letter-spacing: var(--fab-track-upper-wide);
  text-transform: uppercase;
  color: var(--fab-ink-secondary);
}

.fab-footer__list {
  margin: 0;
  padding: 0;
  list-style: none;
}
.fab-footer__list li { margin: 0; }
.fab-footer__list a {
  display: block;
  margin-bottom: 10px;
  font-size: .9rem;
  color: var(--fab-ink-secondary);
  text-decoration: none;
  transition: color var(--fab-hover-duration) var(--fab-ease);
}
.fab-footer__list a:hover { color: var(--fab-ink); }
.fab-footer__list a:focus-visible { color: var(--fab-ink); outline: 1px solid currentColor; outline-offset: 3px; }

.fab-footer__blurb {
  margin: 0 0 14px;
  max-width: var(--fab-measure-tight);
  font-size: var(--fab-size-compact);
  color: var(--fab-ink-secondary);
}

/* The tail bar. Hairline-topped, copyright left, one brand line right. */
.fab-footer__bar {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 24px;
  border-top: 1px solid var(--fab-hairline);
  font-size: .76rem;
  color: var(--fab-ink-secondary);
}
/* The sanctioned tail line, as built: "Made to order. Made to be kept."
   It is not italic. The previous build had an <em> here and italic
   display type is not in this system. */
.fab-footer__line { font-style: normal; }

@media (max-width: 900px) {
  .fab-footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fab-footer__grid { grid-template-columns: 1fr; }
}