/**
 * theme-content.css — handsfree-content.com
 *
 * Premium agency theme overlay. Loaded after landing.css on all SEO sub-pages.
 * Overrides the base landing.css variables + component styles with
 * the navy (#0A1628) + gold (#C9A96E) identity.
 */

/* ── Design tokens ── */
:root {
  --bg:          #0A1628;
  --bg2:         #0F1E35;
  --surface:     rgba(255,255,255,0.04);
  --gold:        #C9A96E;
  --gold-light:  #E8D5B0;
  --gold-dark:   #9B7A48;
  --gold-pale:   rgba(201,169,110,0.08);
  --navy:        #0A1628;
  --navy-mid:    #142038;
  --text:        #F4EFE8;
  --text-2:      #A8A09A;
  --text-3:      #6B6560;
  --border:      rgba(201,169,110,0.18);
  --rule:        rgba(201,169,110,0.1);

  /* landing.css aliases remapped to gold */
  --mint:        #C9A96E;
  --mint-light:  rgba(201,169,110,0.15);
  --pink:        #C9A96E;
  --pink-light:  rgba(201,169,110,0.2);
  --pink-pale:   rgba(201,169,110,0.08);
  --lavender:    #C9A96E;
  --lav-light:   rgba(201,169,110,0.1);
  --ink:         #F4EFE8;
  --ink2:        #C8C0B8;
  --muted:       #A8A09A;

  /* Typography */
  --font-display: 'Playfair Display', serif;
  --font-body:    'Inter', sans-serif;
  --font-mono:    'Space Mono', monospace;
  --font-head:    'Playfair Display', serif;
}

/* ── Base ── */
body {
  background: #0A1628 !important;
  background-image:
    radial-gradient(circle at 15% 10%, rgba(201,169,110,0.07) 0%, transparent 50%),
    radial-gradient(circle at 85% 85%, rgba(201,169,110,0.04) 0%, transparent 50%) !important;
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
}

/* ── Nav ── */
.nav {
  background: rgba(10,22,40,0.92) !important;
  border-bottom: 1px solid var(--border) !important;
  backdrop-filter: blur(14px) !important;
}
.nav-brand {
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
  font-size: 1.1rem !important;
  color: var(--gold) !important;
  text-decoration: none !important;
}
.nav-brand:hover { opacity: 0.85; }
.nav-links a { color: var(--text-2) !important; font-family: 'Inter', sans-serif !important; }
.nav-links a:hover { color: var(--gold) !important; }
.nav-cta {
  background: linear-gradient(135deg, #C9A96E 0%, #E8D5B0 100%) !important;
  color: #0A1628 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
}
.nav-cta:hover { box-shadow: 0 4px 20px rgba(201,169,110,0.3) !important; transform: translateY(-1px); }

/* ── Hero ── */
.hero {
  background: transparent !important;
  border-bottom: 1px solid var(--border) !important;
}
.hero-badge {
  background: rgba(201,169,110,0.1) !important;
  color: var(--gold) !important;
  border: 1px solid rgba(201,169,110,0.3) !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.06em !important;
}
.hero h1,
.hero h2 {
  color: var(--text) !important;
  font-family: 'Playfair Display', serif !important;
}
.hero h1 .gradient,
.hero h2 .gradient {
  background: linear-gradient(135deg, #C9A96E 0%, #E8D5B0 50%, #C9A96E 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}
.hero-sub { color: var(--text-2) !important; font-family: 'Inter', sans-serif !important; }
.hero-cta,
.btn-primary {
  background: linear-gradient(135deg, #C9A96E 0%, #E8D5B0 100%) !important;
  color: #0A1628 !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  box-shadow: 0 8px 32px rgba(201,169,110,0.25) !important;
}
.hero-cta:hover,
.btn-primary:hover { box-shadow: 0 12px 40px rgba(201,169,110,0.38) !important; transform: translateY(-2px); }
.hero-sub-cta { color: var(--text-3) !important; }

/* ── Sections ── */
section { border-bottom: 1px solid var(--border) !important; }
section:last-of-type { border-bottom: none !important; }
.section-label {
  color: var(--gold) !important;
  font-family: 'Space Mono', monospace !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.1em !important;
}
.section-title {
  color: var(--text) !important;
  font-family: 'Playfair Display', serif !important;
  font-style: italic !important;
}
.section-desc { color: var(--text-2) !important; font-family: 'Inter', sans-serif !important; }

/* ── Cards ── */
.feature-card,
.trust-card,
.step-card {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  transition: border-color 0.2s, transform 0.2s;
}
.feature-card:hover,
.trust-card:hover { border-color: rgba(201,169,110,0.38) !important; transform: translateY(-2px); }
.feature-card .feature-icon,
.trust-card .trust-icon { color: var(--gold) !important; }
.feature-card h3,
.trust-card h3 { color: var(--text) !important; font-family: 'Inter', sans-serif !important; }
.feature-card p,
.trust-card p { color: var(--text-2) !important; }

/* ── FAQ ── */
.faq-item {
  background: rgba(255,255,255,0.03) !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.faq-item[open] { border-color: rgba(201,169,110,0.35) !important; }
.faq-item summary {
  color: var(--text) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
}
.faq-item summary:hover { background: rgba(201,169,110,0.04) !important; }
.faq-item p { color: var(--text-2) !important; border-top: 1px solid var(--rule); }

/* ── Internal links — editorial style (replaces old pink pills) ── */
.internal-links-section { border-bottom: none !important; padding-bottom: 2rem !important; }
.internal-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 0.4rem 1.75rem !important;
}
.internal-links a {
  display: inline !important;
  background: none !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  font-size: 0.88rem !important;
  font-weight: 500 !important;
  color: var(--text-3) !important;
  text-decoration: none !important;
  transition: color 0.15s !important;
  box-shadow: none !important;
}
.internal-links a:hover {
  color: var(--gold) !important;
  transform: none !important;
  text-decoration: underline !important;
  box-shadow: none !important;
}

/* ── Standesrecht / highlight boxes ── */
.standesrecht-box {
  background: rgba(201,169,110,0.05) !important;
  border: 1px solid rgba(201,169,110,0.2) !important;
  border-left: 3px solid var(--gold) !important;
  color: var(--text-2) !important;
}
.standesrecht-box strong { color: var(--gold) !important; }

/* ── Footer ── */
.about-footer { border-top: 1px solid var(--border) !important; background: transparent !important; }
.about-footer-links a { color: var(--text-3) !important; font-family: 'Inter', sans-serif !important; }
.about-footer-links a:hover { color: var(--gold) !important; }
.about-footer p { color: var(--text-3) !important; font-family: 'Inter', sans-serif !important; }
.about-footer-legal a { color: var(--text-3) !important; }
.about-footer-legal a:hover { color: var(--gold) !important; }
.footer-crosslink { display: block; margin-top: 0.5rem; font-size: 0.82rem; }
.footer-crosslink a { color: var(--gold) !important; }

/* ── Tables ── */
.speed-table th {
  font-family: 'Space Mono', monospace !important;
  color: var(--text-3) !important;
  background: rgba(255,255,255,0.02) !important;
}
.speed-table td { color: var(--text-2) !important; border-bottom: 1px solid var(--rule) !important; }
.speed-table td strong { color: var(--text) !important; }
.speed-table td.highlight { color: var(--gold) !important; }
.speed-table tr:hover td { background: rgba(201,169,110,0.03) !important; }

/* ── Headings fallback ── */
h1, h2, h3 { font-family: 'Playfair Display', serif !important; color: var(--text) !important; }
h4, h5, h6, p, li, td, th { font-family: 'Inter', sans-serif !important; }
strong { color: var(--text) !important; }
a { color: var(--gold) !important; }
a:hover { opacity: 0.85; }