/* ==========================================================================
   STAY FREE ENTERPRISE — footer component
   Script-flourish slot (Beau Rivage, ONE use sitewide), shot-bible grid
   slot (Behind-the-Brand, Phase 6 imagery lands here), receipts-badge
   slot (Built-With-Receipts, Phase 7 auto-refresh lands here), compliance
   text layer (always real DOM, never JS-only).
   ========================================================================== */

.sf-footer--component {
  background: var(--sf-teal);
  color: var(--sf-ivory);
  padding-block: var(--sf-space-8) var(--sf-space-6);
}
.sf-footer--component a { color: var(--sf-ivory); opacity: .85; }
.sf-footer--component a:hover { opacity: 1; }

.sf-footer__top {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sf-space-7);
  padding-bottom: var(--sf-space-7);
  border-bottom: 1px solid rgba(250, 247, 242, 0.14);
}
@media (max-width: 760px) { .sf-footer__top { grid-template-columns: 1fr; } }

.sf-footer__flourish { font-size: var(--sf-text-2xl); line-height: 1; }
.sf-footer__tagline { margin-top: var(--sf-space-3); max-width: 46ch; opacity: .85; }

/* ---- shot-bible grid slot (Behind-the-Brand, Iris — Phase 6) ---- */
.sf-footer__shotbible-label {
  font-size: var(--sf-text-xs);
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .65;
  margin-bottom: var(--sf-space-2);
}
.sf-footer__shotbible {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sf-space-2);
}
@media (max-width: 480px) {
  .sf-footer__shotbible { grid-template-columns: repeat(2, 1fr); }
}
/* Reserve the 4-square tile row's height BEFORE footer.js injects the tiles,
   so a slow footer load doesn't collapse this block to 0 and then pop ~290px
   of tiles in, shifting the legal copy. Scoped to the empty (pre-JS) state
   with an explicit width so the reserved box is a true 4:1 (2:1 on mobile)
   grid of squares; once tiles are injected the rules drop and the populated
   layout is exactly as before. */
.sf-footer__shotbible:empty { width: 100%; aspect-ratio: 4 / 1; }
@media (max-width: 480px) {
  .sf-footer__shotbible:empty { aspect-ratio: 2 / 1; }
}
.sf-footer__shot {
  aspect-ratio: 1;
  border-radius: var(--sf-radius-sm);
  background: rgba(250, 247, 242, 0.08);
  border: 1px dashed rgba(212, 177, 90, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.6rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--sf-gold);
  opacity: .8;
  text-align: center;
  padding: var(--sf-space-1);
}
.sf-footer__shot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--sf-radius-sm); }

/* ---- badges row (receipts + broker/compliance) ---- */
.sf-footer__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sf-space-3);
  padding-block: var(--sf-space-5);
}
.sf-footer__receipts {
  display: inline-flex;
  align-items: center;
  gap: var(--sf-space-2);
  padding: var(--sf-space-2) var(--sf-space-3);
  border-radius: var(--sf-radius-sm);
  background: rgba(250, 247, 242, 0.08);
  border: 1px solid rgba(250, 247, 242, 0.18);
  font-size: var(--sf-text-xs);
  /* reserve the populated height (dot + text = ~42px) so the badge doesn't
     grow when footer.js injects its contents (measured live). */
  min-height: 42px;
  box-sizing: border-box;
}
.sf-footer__receipts-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--sf-gold);
  flex: 0 0 auto;
}
.sf-footer__receipts-dot[data-state="pending"] { background: var(--sf-taupe); }

/* ---- compliance text layer: ALWAYS authored real DOM, never JS-injected ---- */
.sf-footer__legal {
  font-size: var(--sf-text-xs);
  opacity: .7;
  max-width: 60ch;
  line-height: 1.6;
}
/* a11y: inline links (e.g. /legal) inherit the paragraph's muted color, so
   they read identically to surrounding text — underline distinguishes them
   without relying on color alone (WCAG 1.4.1 / axe link-in-text-block). */
.sf-footer__legal a { text-decoration: underline; text-underline-offset: 2px; }
.sf-footer__copyright {
  margin-top: var(--sf-space-5);
  font-size: var(--sf-text-xs);
  opacity: .55;
}

/* full brand lockup in the flourish: gold script + small-caps ENTERPRISE (2026-07-10) */
.sf-footer__flourish { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sf-footer__flourish-ent {
  font-family: var(--sf-font-body, 'Instrument Sans', sans-serif);
  font-size: 0.66rem; letter-spacing: 0.34em; text-transform: uppercase;
  color: var(--sf-gold); opacity: 0.9;
}

/* 3D gold wordmark in the footer flourish (2026-07-10) */
.sf-footer__wordmark { height: clamp(64px, 9vw, 96px); width: auto; display: block; margin-inline: auto; }

/* ==========================================================================
   Footer centering + clickable services (2026-07-10, Anthony's request)
   ========================================================================== */
.sf-footer__top {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: var(--sf-space-6);
  text-align: center;
}
.sf-footer__brand { display: flex; flex-direction: column; align-items: center; text-align: center; }
.sf-footer__shotbible { justify-content: center; margin-inline: auto; }
.sf-footer__badges { display: flex; justify-content: center; }
.sf-footer__legal { text-align: center; max-width: 68ch; margin-inline: auto; }
.sf-footer__services {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline;
  gap: 0.35rem 0.6rem; max-width: 56ch;
}
.sf-footer__services a {
  color: var(--sf-gold-300, #E3C98B);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .2s, color .2s;
}
.sf-footer__services a:hover,
.sf-footer__services a:focus-visible { color: #fff; border-bottom-color: var(--sf-gold); }
.sf-footer__services span { color: var(--sf-gold-700, #8F6F33); }