/* SAINT BONES — GLOBAL FOOTER COMPONENT
 *
 * Authority: component contract 2 (GLOBAL FOOTER), DEC-006, and the footer
 * region of the approved artifacts — 33 of which carry the full five-group
 * composition implemented here.
 *
 * WHAT THE FROZEN SYSTEM ALREADY OWNS
 * -----------------------------------
 * sb-layout.css defines `.sb-rows`, `.sb-row` (flex, space-between, 44px
 * min-height, 18px block padding, hairline rule, transparent button chrome),
 * `.sb-row__body`, and the accordion state machine itself:
 *
 *     .sb-row[aria-expanded="false"] + .sb-row__body { display: none; }
 *
 * That is why the JavaScript for this component only ever writes one
 * attribute. sb-foundation.css owns `.sb-wordmark`, `.sb-label`, `a:hover` →
 * metal and the `:focus-visible` ring. None of it is restated here.
 *
 * ONE RULE THAT MUST NOT BE BROKEN BY A LATER EDIT
 * -----------------------------------------------
 * The desktop column layout has to defeat that frozen `display: none`, because
 * at ≥768px every group is open regardless of `aria-expanded`. It does so with
 * a deliberately higher-specificity selector inside the 768px block, never by
 * weakening the frozen rule and never by removing the attribute. Below 768px
 * the frozen rule is the only thing that hides a group.
 *
 * @package SaintBones
 */

/* ---------- SHELL -----------------------------------------------------
 * Vienna Black ground with the inverse text ramp, inherited semantically:
 * children take their colour from the ground rather than each recolouring
 * itself. `--sb-section-y-lg` and `--sb-section-y` are the exact clamps the
 * approved artifact uses.
 */
.sb-footer {
  padding-block: var(--sb-section-y-lg) var(--sb-space-20);
  padding-inline: var(--sb-page-inline);
  background: var(--sb-color-bg-inverse);
  color: var(--sb-color-text-inverse-body);
}

.sb-footer__inner {
  max-width: var(--sb-container-main);
  margin-inline: auto;
}

/* ---------- BRAND -----------------------------------------------------
 * Monogram, wordmark, then the locked `SAINT BONES VIENNA` subtitle, centred
 * above a hairline. The monogram is the same asset the header uses, at the
 * system's --sb-monogram size; the artifact grows it on very wide viewports,
 * but the token is the frozen decision and is used as-is.
 */
.sb-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sb-space-9);
  padding-bottom: var(--sb-section-y);
  border-bottom: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
  text-align: center;
}

.sb-footer__monogram {
  width: var(--sb-monogram);
  height: var(--sb-monogram);
  object-fit: contain;
  /* Same compositing as the header: the asset is a black-ground JPEG and
   * `screen` is what dissolves that ground against Vienna Black. */
  mix-blend-mode: screen;
}

.sb-footer__wordmark {
  color: var(--sb-color-text-inverse);
}

/* The one place the metal accent is used as text rather than as a hover
 * signal. Contract 2 fixes this string; it is not a tagline and must not
 * acquire one. */
.sb-footer__subtitle {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-12);
  letter-spacing: var(--sb-ls-control);
  color: var(--sb-color-accent-metal);
}

/* ---------- GROUPS ----------------------------------------------------
 * Mobile-first: the frozen `.sb-rows` / `.sb-row` accordion is the base state,
 * exactly as contract 2 describes it. Desktop columns are the override.
 */
.sb-footer__groups {
  margin-top: var(--sb-space-4);
}

.sb-footer__title {
  /* .sb-label supplies 9px/.26em/label colour. The approved mobile row is
   * brighter and slightly larger, so the row state restates only those two
   * token choices — not a new type style. */
  font-size: var(--sb-fs-10);
  letter-spacing: var(--sb-ls-eyebrow);
  color: var(--sb-color-text-inverse);
}

/* `−` open / `+` closed at --sb-color-text-label (contract 2). Driven from the
 * attribute so the script never has to touch text, and hidden from assistive
 * technology because `aria-expanded` already says this. */
.sb-footer__marker {
  color: var(--sb-color-text-label);
}

.sb-footer__toggle[aria-expanded="true"] .sb-footer__marker::after {
  content: "\2212";
}

.sb-footer__toggle[aria-expanded="false"] .sb-footer__marker::after {
  content: "+";
}

.sb-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-7);
}

.sb-footer__link {
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-14);
  line-height: var(--sb-lh-body);
}

/* An unresolved route renders as a span (see inc/navigation.php). It must not
 * imitate something actionable. */
span.sb-footer__link {
  cursor: default;
}

/* ---------- BOTTOM ROW ------------------------------------------------ */
.sb-footer__meta {
  display: flex;
  flex-direction: column;
  gap: var(--sb-space-7);
  margin-top: var(--sb-space-13);
  font-weight: var(--sb-weight-light);
  font-size: var(--sb-fs-12);
  color: var(--sb-color-text-inverse-muted);
}

.sb-footer__meta-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sb-space-10);
}

.sb-footer__meta .sb-footer__link {
  font-size: inherit;
}

/* ---------- 44px TARGET FLOOR -----------------------------------------
 * Footer links are 14px text in a 14px-gap stack, so their boxes are well
 * under the floor. As in the header, the hit area is extended rather than the
 * box, which keeps the approved vertical rhythm intact. The extension is
 * capped at the row gap so neighbouring links in a column cannot overlap each
 * other's targets.
 */
.sb-footer__link {
  position: relative;
  display: inline-block;
}

.sb-footer__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: var(--sb-control-height-md);
  transform: translateY(-50%);
}

/* Columns sit side by side, so a full-height target would overlap the link
 * above. The stack gap (14px) plus the line box is the available room. */
.sb-footer__links .sb-footer__link::after {
  height: calc(100% + var(--sb-space-7));
}

/* .sb-row already guarantees its own 44px minimum. */
.sb-footer__toggle::after {
  content: none;
}

/* ---------- BEHAVIOURAL BOUNDARY --------------------------------------
 * 767/768 is --sb-bp-grid, the boundary the frozen system already uses to
 * switch to its mobile model. No new breakpoint is introduced: the footer's
 * five columns reflow through `auto-fit` rather than through step rules, so
 * 920px and 1040px need no footer treatment at all.
 */
@media (min-width: 768px) {
  /* The same elements stop being an accordion and become open columns.
   * `auto-fit minmax(180px, 1fr)` is canonical: design-drift.md records it as
   * the footer group grid, present in 28 artifacts immediately after the
   * SAINT BONES VIENNA subtitle, and corrects an earlier report that had
   * mis-attributed it to product grids.
   */
  .sb-footer__groups {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--sb-space-18) var(--sb-space-22);
    align-items: start;
    margin-top: var(--sb-section-y-sm);
    border-top: 0;
  }

  /* Strip the row's button chrome. It stays a button in the DOM — the script
   * keeps it expanded and inert at this width — but it must read as a label.
   */
  .sb-footer__toggle {
    display: block;
    min-height: 0;
    padding-block: 0;
    border-bottom: 0;
    cursor: default;
  }

  .sb-footer__title {
    /* Desktop returns to the .sb-label role: smaller, dimmer, wider tracked. */
    font-size: var(--sb-fs-9);
    letter-spacing: var(--sb-ls-label);
    color: var(--sb-color-text-label);
  }

  .sb-footer__marker { display: none; }

  /* Defeat the frozen `display: none` — at this width every group is open,
   * whatever `aria-expanded` currently says. Higher specificity than
   * `.sb-row[aria-expanded="false"] + .sb-row__body`, and scoped to the footer.
   */
  .sb-footer .sb-row[aria-expanded] + .sb-row__body,
  .sb-footer .sb-row__body {
    display: flex;
    padding-bottom: 0;
    margin-top: var(--sb-space-6);
  }

  .sb-footer__links {
    gap: var(--sb-space-6);
  }

  .sb-footer__meta {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    gap: var(--sb-space-10);
    margin-top: var(--sb-section-y-sm);
    padding-top: var(--sb-space-11);
    border-top: var(--sb-border-hairline) solid var(--sb-color-border-inverse);
    font-size: var(--sb-fs-13);
  }

  .sb-footer__meta-group {
    gap: var(--sb-space-12);
  }
}

/* Mobile gutter matches the rest of the mobile page model. */
@media (max-width: 767px) {
  .sb-footer {
    padding-block: var(--sb-section-y-mobile) var(--sb-space-16);
    padding-inline: var(--sb-page-inline-mobile);
  }

  /* The approved mobile footer sets the subtitle one step down, matching the
   * wordmark's own 16 → 13px drop in sb-foundation.css. */
  .sb-footer__subtitle {
    font-size: var(--sb-fs-10);
  }
}