/* =============================================
   MCJB Dark/Gold Theme
   Overrides Ananke + Tachyons defaults
   ============================================= */

/* --- Color Variables --- */
:root {
  --bg-primary: #0d0d0d;
  --bg-card: #1a1a1a;
  --bg-surface: #141414;
  --gold: #D4A843;
  --gold-light: #e8c060;
  --text-primary: #f0f0f0;
  --text-secondary: #aaa;
  --border-subtle: #2a2a2a;
}

/* --- Base --- */
body {
  background-color: var(--bg-primary);
  color: var(--text-primary);
}

/* --- Override Tachyons text color utilities used by Ananke --- */
.mid-gray { color: var(--text-secondary); }
.nested-copy-line-height.mid-gray { color: var(--text-secondary); }

/* --- Links --- */
a { color: var(--gold); }
a:hover { color: var(--gold-light); }
.nested-links a { color: var(--gold); }
.nested-links a:hover { color: var(--gold-light); }
.hover-white:hover { color: var(--gold) !important; }

/* --- Ananke content area overrides --- */
.athelas { color: var(--text-primary); }
article header .tracked { color: var(--text-secondary); }
article header time { color: var(--text-secondary); }
.nested-copy-line-height { color: var(--text-secondary); }
.nested-copy-line-height h1,
.nested-copy-line-height h2,
.nested-copy-line-height h3,
.nested-copy-line-height h4 {
  color: var(--text-primary);
}
.nested-copy-line-height strong { color: var(--text-primary); }
.nested-copy-line-height code {
  background: var(--bg-card);
  color: var(--gold);
}
.nested-copy-line-height blockquote {
  border-left-color: var(--gold);
  color: var(--text-secondary);
}
.nested-copy-line-height hr {
  border-color: var(--border-subtle);
}

/* --- About page layout --- */
.page-about-us .nested-copy-line-height > p:first-child {
  margin-bottom: 5rem;
}

/* --- Button styles --- */
.btn-gold {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid var(--gold);
  color: var(--gold);
  background: transparent;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.3s ease, color 0.3s ease;
}
.btn-gold:hover {
  background: var(--gold);
  color: var(--bg-primary);
}

.btn-gold-filled {
  display: inline-block;
  padding: 0.75rem 2rem;
  border: 2px solid var(--gold);
  color: var(--bg-primary);
  background: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 0.9rem;
  font-weight: 600;
  transition: background 0.3s ease, border-color 0.3s ease;
}
.btn-gold-filled:hover {
  background: var(--gold-light);
  border-color: var(--gold-light);
}

/* --- Social links --- */
.contact-social-links,
.hero__social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin: 1.5rem 0 2rem;
}

.hero__social-links {
  justify-content: center;
  margin: 1rem 0 0;
}

.contact-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  min-height: 2.75rem;
  padding: 0.65rem 1rem;
  border: 1px solid var(--gold);
  color: var(--gold);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.8rem;
  font-weight: 700;
  line-height: 1;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.contact-social-link svg {
  width: 1.2rem;
  height: 1.2rem;
  flex: 0 0 auto;
  fill: currentColor;
}

.contact-social-link:hover,
.contact-social-link:focus {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--bg-primary);
}

/* --- Main content area bottom padding override --- */
main.pb7 {
  background-color: var(--bg-primary);
}