/* ============================================
   Versus Theme Tokens
   ============================================ */

:root {
  --versus-gap: var(--delta-space-md);
  --versus-border-width: 2px;
  --versus-border-color: #660000;   /* matches article-versus */
  --versus-bg: var(--article-bg);   /* #f5ecd6 */
  --versus-link-color: #660000;
  --versus-hover-bg: var(--delta-accent-soft);
  --versus-hover-color: #660000;
}

/* Versus Theme — Hero Tokens */
[data-article-theme="versus"] {
  --theme-hero-bg: #e0f0ff;        /* or whatever new color you want */
  --border-hero: 1px solid #d4af37;
}

/* Versus Cross-Link Dock */
.versus-cross-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;

  gap: var(--versus-gap);
  margin: var(--delta-space-md) 0;
  padding: 0.75em;

  background-color: var(--versus-bg);
  border: var(--versus-border-width) solid var(--versus-border-color);
  border-radius: var(--delta-radius-md);
}

.versus-cross-links a {
  text-decoration: none;
  padding: 0.25em 0.5em;
  border-radius: var(--delta-radius-sm);
  color: var(--versus-link-color);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.versus-cross-links a:hover {
  background-color: var(--versus-hover-bg);
  color: var(--versus-hover-color);
}

/* Quadridock Link Styling — Versus Edition */
.cross-links a {
  text-decoration: none;
  color: var(--accent-strong, #660000);
  padding: 0.25em 0.5em;
  border-radius: 4px;
  transition: color 0.2s ease, text-decoration-color 0.2s ease;
}

.cross-links a:hover {
  text-decoration: underline;
  text-decoration-color: var(--accent-strong, #660000);
}

/* Quadridock Geometry — Versus Edition */
.cross-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-lg); /* wider breathing room */
  margin: var(--space-md) 0;
  padding: 0.75em 1em;
  border: 1px solid var(--versus-trim, #660000);
  border-radius: 6px;
  background-color: transparent;
}

.article-container[data-article-theme="versus"] blockquote {
  border-left-width: 2px;
  border-left-color: #c9a227;
  --bq-bg: var(--hero-gold-soft);
}