/* ============================================================
   QNeura.ai — Unified Theme
   Matching the editorial standard of about.html
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400;1,600&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;1,9..40,300&family=DM+Mono:wght@400;500&display=swap');

/* ── Design Tokens ────────────────────────────────────────── */
:root {
  --ink:          #1a1a1a;
  --ink-mid:      #444444;
  --ink-light:    #888888;
  --cream:        #f7f4ef;
  --warm:         #ede8e0;
  --rule:         #d4cfc7;
  --accent:       #7c3f26;
  --accent-light: #c4753a;
  --gold:         #b8943a;
  --white:        #ffffff;
  --dark:         #1a1a1a;
}

/* ── Base Reset ───────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  background-color: var(--cream) !important;
  color: var(--ink) !important;
  font-family: 'DM Sans', sans-serif !important;
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* ── Typography ───────────────────────────────────────────── */
h1, h2, h3 {
  font-family: 'Playfair Display', serif !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
  line-height: 1.15;
}

h4, h5, h6 {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 600;
  color: var(--ink) !important;
  letter-spacing: 0.01em;
}

p {
  color: var(--ink-mid);
  line-height: 1.75;
}

/* ── Navigation ───────────────────────────────────────────── */
/* Nav styling is handled entirely by site-nav.css */
/* Do NOT add nav rules here - they will conflict with site-nav.css */

/* ── Buttons ──────────────────────────────────────────────── */
button,
.btn,
a.btn,
[class*="button"],
[class*="cta"] {
  font-family: 'DM Sans', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  border-radius: 4px !important;
  transition: background 0.2s, color 0.2s, border-color 0.2s !important;
}

/* Primary button — brown accent background */
.btn-primary,
button[class*="primary"],
a[class*="primary"] {
  background: var(--accent) !important;
  color: var(--white) !important;
  border: none !important;
}

.btn-primary:hover,
button[class*="primary"]:hover,
a[class*="primary"]:hover {
  background: var(--accent-light) !important;
}

/* Secondary / outline button — brown accent border */
.btn-secondary,
button[class*="secondary"],
a[class*="secondary"],
button[class*="outline"],
a[class*="outline"] {
  background: transparent !important;
  color: var(--accent) !important;
  border: 1px solid var(--accent) !important;
}

.btn-secondary:hover,
button[class*="secondary"]:hover {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* Green/accent buttons on the current site — replace with ink */
button[style*="green"],
a[style*="green"],
.btn-green,
[class*="btn-green"] {
  background: var(--ink) !important;
  color: var(--white) !important;
  border-radius: 4px !important;
}

/* ── Cards ────────────────────────────────────────────────── */
.card,
[class*="card"],
[class*="service"],
[class*="block"] {
  background: var(--white) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 8px !important;
  box-shadow: none !important;
}

/* Reset borders on featured-* text elements (not containers) */
.featured-subtitle,
.featured-desc,
.featured-meta,
.featured-head,
.featured-actions {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

.card:hover,
[class*="card"]:hover {
  box-shadow: none !important;
  border-color: var(--accent) !important;
  transform: none !important;
}

/* ── Backgrounds ──────────────────────────────────────────── */
/* Kill the mint/sage green site-wide */
[style*="background: #"],
[style*="background-color: #"] {
  /* Inline styles will be overridden per-page in Step 3 */
}

section,
.section,
[class*="section"] {
  background: transparent !important;
}

/* Alternate / hero sections that used green */
.hero,
[class*="hero"],
.banner,
[class*="banner"] {
  background: var(--cream) !important;
  color: var(--ink) !important;
}

/* Dark sections — keep dark but use site ink colour */
.dark,
[class*="footer"],
footer {
  background: var(--dark) !important;
  color: rgba(255, 255, 255, 0.75) !important;
}

/* Section-dark is a section variant, not a dark theme — use transparent */
.section-dark {
  background: transparent !important;
}

footer a,
[class*="footer"] a {
  color: rgba(255, 255, 255, 0.55) !important;
}

footer a:hover,
[class*="footer"] a:hover {
  color: var(--accent-light) !important;
}

/* ── Tags / Pills / Badges ────────────────────────────────── */
/* Use specific selectors to avoid matching container classes like .service-tags */
.tag,
.pill,
.chip,
.feature-tag,
.service-tag,
.expertise-tag {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--white) !important;
  color: var(--ink-mid) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
}

/* Tag/pill containers should have no styling */
.service-tags,
.feature-tags,
.expertise-tags,
[class$="-tags"],
[class$="-pills"] {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Badges get dark brown/accent background with white text */
[class*="badge"],
.featured-badge,
.pub-badge,
.resource-badge {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase !important;
  background: var(--accent) !important;
  color: #ffffff !important;
  border: 1px solid var(--accent) !important;
  border-radius: 4px !important;
  padding: 5px 12px !important;
}

/* ── Section Labels ───────────────────────────────────────── */
.label,
.eyebrow,
[class*="label"],
[class*="eyebrow"],
[class*="overline"],
[class*="kicker"] {
  font-family: 'DM Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--accent) !important;
}

/* ── Dividers / Rules ─────────────────────────────────────── */
hr,
.divider,
[class*="divider"],
[class*="separator"] {
  border: none !important;
  border-bottom: 1px solid var(--rule) !important;
  background: none !important;
}

/* ── Links ────────────────────────────────────────────────── */
a {
  color: var(--accent) !important;
  text-decoration: none !important;
}

a:hover {
  color: var(--accent-light) !important;
}

/* Override links inside nav and dark sections separately */
nav a { color: var(--ink-mid) !important; }
footer a, [class*="footer"] a { color: rgba(255,255,255,0.55) !important; }

/* ── Inputs / Forms ───────────────────────────────────────── */
input,
textarea,
select {
  font-family: 'DM Sans', sans-serif !important;
  background: var(--white) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  color: var(--ink) !important;
  padding: 12px 16px !important;
}

input:focus,
textarea:focus {
  outline: none !important;
  border-color: var(--ink) !important;
}

/* ── Code / Mono ──────────────────────────────────────────── */
code,
pre,
[class*="code"] {
  font-family: 'DM Mono', monospace !important;
  background: var(--warm) !important;
  border: 1px solid var(--rule) !important;
  border-radius: 4px !important;
  font-size: 13px !important;
  color: var(--ink) !important;
}

/* ── Scrollbar (Webkit) ───────────────────────────────────── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--warm); }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-light); }