/* ============================================================
   Cross-promo card + footer backlink — MakeRoutes (same team).
   Self-contained token layer (--fd-p-*), mirroring consent.css's
   approach: this loads on every page that loads consent.css,
   including the SSR homes and ~165 PSEO pages that never load
   standalone.css, so it cannot depend on the global Marea tokens.
   See docs/DESIGN_SYSTEM.md and public/css/consent.css.
   ============================================================ */

:root {
  --fd-p-surface: oklch(99% 0.006 240);
  --fd-p-ink: oklch(26% 0.03 262);
  --fd-p-ink-muted: oklch(45% 0.02 262);
  --fd-p-accent: oklch(50.5% 0.19 256);
  --fd-p-accent-hover: oklch(45% 0.185 256);
  --fd-p-on-accent: #fff;
  --fd-p-edge: oklch(45% 0.06 258 / 0.18);
  --fd-p-shadow: 0 8px 20px oklch(48% 0.10 260 / 0.13), 0 26px 56px oklch(44% 0.12 262 / 0.17);
  --fd-p-r: 20px;
}

:root[data-theme="dark"] {
  --fd-p-surface: oklch(23% 0.03 248);
  --fd-p-ink: oklch(96% 0.006 250);
  --fd-p-ink-muted: oklch(85% 0.018 245);
  --fd-p-accent: oklch(56% 0.205 256);
  --fd-p-accent-hover: oklch(62% 0.20 256);
  --fd-p-edge: oklch(100% 0 0 / 0.14);
  --fd-p-shadow: 0 8px 20px oklch(0% 0 0 / 0.44), 0 26px 56px oklch(0% 0 0 / 0.50);
}

#fd-promo-card {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
  z-index: 999998; /* one below the consent sheet (999999): never contends with it */
  max-width: 320px;
  padding: 1.1rem 1.35rem 1.25rem 1.25rem;
  background: var(--fd-p-surface);
  color: var(--fd-p-ink);
  border-radius: var(--fd-p-r);
  border: 1px solid var(--fd-p-edge);
  box-shadow: var(--fd-p-shadow);
  font-family: 'League Spartan', 'Instrument Sans', -apple-system, system-ui, sans-serif;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
#fd-promo-card.fd-promo-in {
  opacity: 1;
  transform: translateY(0) scale(1);
}
#fd-promo-card .fd-promo-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 1.4rem 0.5rem 0;
}
#fd-promo-card .fd-promo-head svg {
  flex: none;
  border-radius: 8px;
}
#fd-promo-card .fd-promo-title {
  margin: 0;
  font-size: 0.98rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
#fd-promo-card .fd-promo-body {
  margin: 0 0 0.9rem;
  font-size: 0.85rem;
  line-height: 1.4;
  color: var(--fd-p-ink-muted);
}
#fd-promo-close {
  position: absolute;
  top: 0.55rem;
  right: 0.6rem;
  width: 26px;
  height: 26px;
  border: none;
  background: transparent;
  color: var(--fd-p-ink-muted);
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  border-radius: 50%;
}
#fd-promo-close:hover,
#fd-promo-close:focus-visible {
  background: var(--fd-p-edge);
}
#fd-promo-cta {
  display: inline-block;
  padding: 0.5rem 1rem;
  background: var(--fd-p-accent);
  color: var(--fd-p-on-accent);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  text-decoration: none;
}
#fd-promo-cta:hover,
#fd-promo-cta:focus-visible {
  background: var(--fd-p-accent-hover);
}
@media (max-width: 420px) {
  #fd-promo-card {
    left: 0.75rem;
    right: 0.75rem;
    max-width: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  #fd-promo-card {
    transition: none;
  }
}

/* Footer backlink — deliberately small and low-contrast (discreet, not hidden: still
   visible, still crawlable, rel="sponsored" so it carries no PageRank). */
.fd-footer-promo {
  margin-top: 0.35rem;
  font-size: 0.72rem;
  opacity: 0.62;
}
.fd-footer-promo a {
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.fd-footer-promo-icon {
  border-radius: 3px;
  flex: none;
}