/* compass-footer.css — the platform footer chrome (xr-footer / xr-endorsement).
   Lifted verbatim from canon
   (docs/design-references/design_handoff_applicant_experience/source/compass.css,
   the "CROSSROADS / ADVANT PLATFORM CHROME" section — the :root token block
   through the compact-variant overrides). Loaded after compass-signin.css in
   the asset chain (index.html).

   .cmp--with-footer is deliberately NOT duplicated here. It already exists,
   login-scoped and adapted for the real DOM (min-height:100vh instead of
   canon's height:100%, since Compass has no html/body/#app height:100% chain
   for canon's rule to anchor to), in compass-signin.css. Re-declaring canon's
   original version here — loaded AFTER compass-signin.css, so it would win the
   cascade — would silently clobber that adaptation and reintroduce the
   viewport-height regression compass-signin.css's comment describes. */

/* ====================================================================
   CROSSROADS / ADVANT PLATFORM CHROME — light branding presence
   ====================================================================
   Tenant-agnostic platform layer that sits beneath every Compass surface
   (form shell, dashboard, confirmation) and stands alone on pre-tenant
   surfaces (sign-in, errors, splash). Uses --xr-* tokens that NEVER
   resolve to tenant variables — the colophon, the endorsement, the
   hairline rules, and the link color are identical against Crestmont
   ivory and Riverbend cool-mint.

   Color thinking (load-bearing constraint from the brief):
   The footer has to survive WARM tenant palettes (Crestmont ivory bg +
   navy primary + gold secondary) AND COOL tenant palettes (Riverbend
   cool-mint bg + teal primary + warm-orange secondary) without ever
   looking like either tenant's brand. The choice is a near-neutral
   desaturated greige (#E9E8E4) for the footer surface, sitting visibly
   below both tenant bgs as its own quiet layer; muted ink (#5F5E5A)
   clears WCAG-AA against the footer bg both ways; the colophon and
   Advant arch render in that same muted ink — not in Crossroads
   oxblood, not in Advant blue. A 1-px hairline rule (#D8D6D0) tops
   the footer to make the tenant→platform handoff legible without
   being a section divider. */

:root {
  /* Surface */
  --xr-footer-bg:        #E9E8E4;
  --xr-page-bg:          #F2F0EB;     /* pre-tenant surface (sign-in, splash) — neutral warm */

  /* Ink — desaturated, designed to clear WCAG-AA on the footer bg */
  --xr-ink-strong:       #2A2B2D;
  --xr-ink:              #5F5E5A;
  --xr-ink-subtle:       #8A8985;

  /* Footer-specific aliases (so the footer can be re-tuned without
     touching the pre-tenant surface) */
  --xr-footer-ink-strong: var(--xr-ink-strong);
  --xr-footer-ink:        var(--xr-ink);
  --xr-footer-ink-subtle: var(--xr-ink-subtle);

  /* Rules — the handoff between tenant chrome and platform chrome
     sits ABOVE the footer; the rule INSIDE the footer separates its
     two row tiers (brand+links / legal+endorsement). */
  --xr-handoff-rule:     #D8D6D0;
  --xr-footer-rule:      #D8D6D0;

  /* Links */
  --xr-link:             #5F5E5A;
  --xr-link-hover:       #2A2B2D;
}

/* ====================================================================
   xr-footer — desktop platform footer
   ==================================================================== */

.xr-footer {
  background: var(--xr-footer-bg);
  color: var(--xr-footer-ink);
  border-top: 1px solid var(--xr-handoff-rule);
  font-family: "Source Sans 3", "Hanken Grotesk", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  flex-shrink: 0;
}
.xr-footer__inner {
  max-width: none;
  padding: 22px 32px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.xr-footer__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 22px;
}
.xr-footer__row--legal {
  flex-wrap: wrap;
  font-size: 11.5px;
  color: var(--xr-footer-ink-subtle);
}
.xr-footer__brand {
  display: flex;
  align-items: center;
  gap: 10px;
}
.xr-footer__links {
  display: flex;
  align-items: center;
  gap: 22px;
  font-size: 13px;
}
.xr-footer__link {
  color: var(--xr-link);
  text-decoration: none;
  transition: color 100ms ease;
}
.xr-footer__link:hover { color: var(--xr-link-hover); text-decoration: underline; text-underline-offset: 3px; }
.xr-footer__link--quiet { display: inline-flex; align-items: center; }
.xr-footer__sep { color: var(--xr-footer-ink-subtle); opacity: 0.7; }
.xr-footer__rule {
  height: 1px;
  background: var(--xr-footer-rule);
  margin: 0 -32px;            /* full-bleed across the inner padding */
}
.xr-footer__legal {
  flex: 1 1 auto;
  letter-spacing: 0.005em;
}
.xr-footer__legal sup { font-size: 0.7em; vertical-align: super; }

/* Endorsement composition — "A PRODUCT OF [arch] ADVANT".
   Caps + arch + ADVANT, all rendered in the same muted ink. */
.xr-endorsement {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--xr-footer-ink-subtle);
}
.xr-endorsement__label {
  font-family: ui-monospace, "JetBrains Mono", Menlo, monospace;
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--xr-footer-ink-subtle);
}
.xr-endorsement__mark { display: inline-flex; align-items: center; color: var(--xr-footer-ink); }

/* Compact variant — narrower padding, slightly tighter row gap */
.xr-footer--compact .xr-footer__inner { padding: 18px 24px 16px; gap: 12px; }
.xr-footer--compact .xr-footer__links { gap: 14px; font-size: 12.5px; }
.xr-footer--compact .xr-footer__row--legal { font-size: 11px; }
.xr-footer--compact .xr-footer__rule { margin: 0 -24px; }

/* Real-host mobile accessibility repair. Kept after the copied canon blocks so
   desktop remains verbatim: the navigation wraps instead of widening or clipping
   the document, and each footer link exposes a 44px touch target. */
@media (max-width: 767px) {
  .xr-footer__row {
    flex-wrap: wrap;
    gap: 12px;
  }

  .xr-footer__links {
    flex: 1 1 100%;
    min-width: 0;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0 8px;
  }

  .xr-footer__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
  }
}