/* ==========================================================
   Shared styling for ElevateIQ legal pages
   (privacy.html, terms.html, cookies.html).
   Picks up Bootstrap 5.3 tokens; overrides --bs-primary +
   surfaces to match the marketing index.html palette.
   ========================================================== */

:root,
[data-bs-theme="light"] {
  --bs-primary: #0B7A9E;
  --bs-primary-rgb: 11, 122, 158;
  --bs-link-color: #0B7A9E;
  --bs-link-hover-color: #084E66;
  --bs-link-color-rgb: 11, 122, 158;
}
[data-bs-theme="dark"] {
  --bs-primary: #4BB8D6;
  --bs-primary-rgb: 75, 184, 214;
  --bs-link-color: #4BB8D6;
  --bs-link-hover-color: #7EC4D9;
  --bs-link-color-rgb: 75, 184, 214;
  --bs-body-bg: #313a46;
  --bs-body-bg-rgb: 49, 58, 70;
  --bs-tertiary-bg: #404954;
  --bs-secondary-bg: #404954;
  --bs-border-color: #4a525d;
  --bs-body-color: #e7e9ec;
  --bs-secondary-color: #aab8c5;
}

body {
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
h1, h2, h3, h4, h5 {
  font-family: 'Plus Jakarta Sans', system-ui, sans-serif;
  letter-spacing: -0.02em;
}

/* Brand logo swap (same selectors as index.html). */
.navbar-brand img { height: 30px; }
.brand-logo-light, .brand-logo-dark { display: none; }
[data-bs-theme="light"] .brand-logo-light { display: block; }
[data-bs-theme="dark"]  .brand-logo-dark  { display: block; }
.navbar-eq {
  backdrop-filter: saturate(1.4) blur(10px);
  background: rgba(var(--bs-body-bg-rgb, 255,255,255), 0.85);
  border-bottom: 1px solid var(--bs-border-color);
}

.theme-toggle {
  background: transparent;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  width: 36px; height: 36px;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--bs-secondary-color);
}
.theme-toggle:hover { color: var(--bs-primary); border-color: var(--bs-primary); }
[data-bs-theme="dark"] .theme-toggle .bi-moon { display: none; }
[data-bs-theme="light"] .theme-toggle .bi-sun { display: none; }

/* ── Page header ─────────────────────────────────────────── */
.legal-header {
  padding: 56px 0 32px;
  border-bottom: 1px solid var(--bs-border-color);
}
.legal-header h1 {
  font-size: clamp(34px, 4.5vw, 52px);
  font-weight: 600;
  margin-bottom: 8px;
}
.legal-header .lead {
  font-size: 18px;
  color: var(--bs-secondary-color);
  max-width: 720px;
}
.legal-header .breadcrumb a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.legal-header .breadcrumb a:hover { color: var(--bs-primary); }

/* ── Body content ────────────────────────────────────────── */
.legal-content {
  max-width: 820px;
  padding-top: 40px;
  padding-bottom: 64px;
}
.legal-content h2 {
  font-size: 24px;
  font-weight: 600;
  margin: 48px 0 16px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--bs-primary);
  display: inline-block;
}
.legal-content h2:first-of-type { margin-top: 16px; }
.legal-content h3 {
  font-size: 18px;
  font-weight: 600;
  margin: 24px 0 12px;
}
.legal-content p { margin-bottom: 16px; }
.legal-content ul, .legal-content ol { margin-bottom: 16px; }
.legal-content code {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.9em;
  background: var(--bs-tertiary-bg);
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--bs-body-color);
}

/* ── Callout boxes ───────────────────────────────────────── */
.callout {
  border-left: 4px solid var(--bs-primary);
  background: var(--bs-tertiary-bg);
  border-radius: 8px;
  padding: 16px 20px;
  margin: 20px 0;
}
.callout h3 {
  margin-top: 0;
  color: var(--bs-primary);
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.callout p:last-child { margin-bottom: 0; }
.callout-info { border-left-color: var(--bs-primary); }
.callout-cookie {
  border-left-color: #d97706;
  background: rgba(217, 119, 6, 0.08);
}
[data-bs-theme="dark"] .callout-cookie {
  background: rgba(245, 158, 11, 0.10);
}
.callout-cookie h3 { color: #d97706; }
[data-bs-theme="dark"] .callout-cookie h3 { color: #fbbf24; }

/* ── Cookie table ────────────────────────────────────────── */
.cookie-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--bs-border-color);
  border-radius: 8px;
  overflow: hidden;
  font-size: 14px;
}
.cookie-table th, .cookie-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--bs-border-color);
  vertical-align: top;
  text-align: left;
}
.cookie-table th {
  background: var(--bs-tertiary-bg);
  font-weight: 600;
}
.cookie-table tr:last-child td { border-bottom: none; }

/* ── Footer (4-column, matches index.html) ───────────────── */
.footer-eq {
  border-top: 1px solid var(--bs-border-color);
  background: var(--bs-tertiary-bg);
  padding: 56px 0 28px;
  font-size: 14px;
}
.footer-eq h5 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--bs-secondary-color);
  margin-bottom: 16px;
}
.footer-eq ul { list-style: none; padding: 0; margin: 0; }
.footer-eq ul li { margin-bottom: 8px; }
.footer-eq a {
  color: var(--bs-secondary-color);
  text-decoration: none;
}
.footer-eq a:hover { color: var(--bs-primary); }
.footer-eq img.brand-logo-light,
.footer-eq img.brand-logo-dark { height: 28px; }
.footer-bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--bs-border-color);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--bs-secondary-color);
}