/* ==========================================================================
   FOOTER
   The dark close of the page: a four-column link directory over a hairline,
   then a legal bar.

   Almost everything structural is borrowed. The directory is `.rb-grid` with
   spans; the horizontal groups are `.rb-cluster`s; the ground and the on-dark
   foreground arrive with `.rb-surface--dark`; all type is `.rb-l1` / `.rb-p1`.
   What is left below is the handful of figures that are genuinely this
   section's own: the block padding, the two column gaps, the rule's margins,
   the two muted-on-dark colours and the size of the social placeholders.
   ========================================================================== */

.rb-footer {
  /* Two colours the semantic layer has no name for yet: a muted foreground
     and a fill for the social placeholders, both only ever used on the dark
     ground. Named once here so the rules below read in roles, not greys.
     Promote to `--rb-sys-fg-muted-on-dark` if a second dark section wants
     them. Values are the reference's, unchanged. */
  --rb-footer-fg-muted:   var(--rb-ref-grey-350);
  --rb-footer-social-fill: var(--rb-ref-grey-550);

  /* Deliberately not a `.rb-section` tier: the footer's block padding is
     asymmetric by design — the rule and the legal bar already carry 24px of
     air above the bottom edge, so the closing padding is half the opening
     one. No tier expresses that. */
  padding-block: var(--rb-ref-space-9) var(--rb-ref-space-6);   /* 48 / 24 */
}

@media (min-width: 1200px) {
  /* NORMALISED: reference opened on 72px, which is on the 4px grid but off the
     space scale. Snapped up to 80 — the desktop section rhythm — so the footer
     opens on the same beat as every section above it. */
  .rb-footer { padding-block: var(--rb-ref-space-12) var(--rb-ref-space-7); }  /* 80 / 32 */
}

/* --- Link directory -------------------------------------------------------
   Four columns at desktop and tablet, two at mobile, straight off the shared
   grid: 3 of 12, 2 of 8, 2 of 4. The one figure the grid does not own is the
   row gap — when the columns fold to two rows at mobile, 32px is what keeps
   the second pair reading as a new bank rather than a continuation of the
   first. The 24px column gap stays the grid's own.
   -------------------------------------------------------------------------- */
.rb-footer__nav { row-gap: var(--rb-ref-space-7); }

/* Heading over list, 16px apart; the links 12px apart under it.

   Written as gaps rather than `.rb-stack`, which cannot do this job here:
   03-base.css zeroes `ul[class]` margins at specificity (0,1,1), which
   outranks `.rb-stack > * + *` at (0,1,0), so a <ul> child of a stack silently
   never receives its margin. Gap sidesteps the collision entirely. */
.rb-footer__column {
  --rb-span-m: 2;
  --rb-span-t: 2;
  --rb-span-d: 3;

  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-4);   /* 16 */
}

.rb-footer__links {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-3);   /* 12 */
}

/* --- Column heading -------------------------------------------------------
   A mono label doing an <h2>'s job. `.rb-l1 --caps` carries the face, size,
   tracking and casing; `.rb-text--bold` the weight. Only the colour is left:
   muted, so the heading recedes and the links it gathers stay the brightest
   thing in the column.
   -------------------------------------------------------------------------- */
.rb-footer__heading { color: var(--rb-footer-fg-muted); }

/* --- Links ----------------------------------------------------------------
   The 24px min-height is the point of this rule. `.rb-p1` sets a 21px line
   box, which stacked at 12px apart would give a cramped 21px pointer target;
   opening it to 24 lands the target on the WCAG 2.2 minimum AND sets the row
   pitch to the reference's 36px (24 + the list's 12 gap) in the same move.

   Colour is white at 85% rather than a dimmer grey: it holds 12:1 against the
   ink ground, and hover has somewhere to go.
   -------------------------------------------------------------------------- */
.rb-footer__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--rb-ref-space-6);   /* 24 */
  opacity: 0.85;
  transition: opacity var(--rb-sys-duration-2) ease;
}

.rb-footer__link:hover {
  opacity: 1;
  text-decoration: underline;
  /* 3px: the house underline offset, set by `.rb-arrow-link` in 05-components. */
  text-underline-offset: 3px;
}

/* --- Rule -----------------------------------------------------------------
   A real <hr>: this is a thematic break between the directory and the legal
   bar, and it costs nothing to say so. Asymmetric margins on purpose — 48
   above pushes it clear of the link columns, 24 below tucks the legal bar
   under it as its caption.
   -------------------------------------------------------------------------- */
.rb-footer__rule {
  height: var(--rb-ref-border-hairline);
  margin-block: var(--rb-ref-space-9) var(--rb-ref-space-6);   /* 48 / 24 */
  border: 0;
  background: var(--rb-sys-border-on-dark);
}

/* --- Legal bar ------------------------------------------------------------
   Stacked everywhere except desktop, where the two groups split to the far
   edges of the container.
   -------------------------------------------------------------------------- */
.rb-footer__bottom {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-6);   /* 24 */
}

/* Copyright over legal links at mobile; side by side once there is room. */
.rb-footer__legal {
  display: flex;
  flex-direction: column;
  gap: var(--rb-ref-space-3);   /* 12 */
}

.rb-footer__legal-links { --rb-cluster-gap: var(--rb-ref-space-5); }   /* 20 */

.rb-footer__copyright { color: var(--rb-footer-fg-muted); }

.rb-footer__legal-link {
  display: inline-flex;
  align-items: center;
  min-height: var(--rb-ref-space-6);   /* 24 — same target as the directory */
  color: var(--rb-footer-fg-muted);
  transition: color var(--rb-sys-duration-2) ease;
}

.rb-footer__legal-link:hover {
  color: var(--rb-sys-fg-on-dark);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (min-width: 768px) {
  .rb-footer__legal {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--rb-ref-space-6);   /* 24 */
  }
}

@media (min-width: 1200px) {
  .rb-footer__bottom {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* --- Brand mark + social placeholders -------------------------------------
   NORMALISED: the reference draws the mark at 22px and the circles at 36.8px.
   Both are off the space scale, so both are snapped up one step — 24 and 40 —
   which preserves the 0.6 ratio between them exactly.

   The circles stand in for social marks that do not exist yet. They are inert
   <span>s inside an aria-hidden group, so nothing here is focusable and the
   keyboard path ends at "Accessibility".
   -------------------------------------------------------------------------- */
.rb-footer__mark {
  flex: none;
  width: var(--rb-ref-space-6);    /* 24 */
  height: var(--rb-ref-space-6);
}

.rb-footer__social-dot {
  flex: none;
  width: var(--rb-ref-space-8);    /* 40 */
  height: var(--rb-ref-space-8);
  border-radius: var(--rb-ref-radius-full);
  background: var(--rb-footer-social-fill);
}