/* ============================================================
   Comparative Causal Metrics — custom.css
   Palette aligned with the Quarcs-lab "metricsai" book:
     ElectricCyan   #008CB7 (light) / #22d3ee (dark)
     SynapsePurple  #7A209F (light) / #c084fc (dark)
     DataPink       #C21E72 (light) / #e2e8f0 (dark — fades to near-white)
     DeepNavy       #0B1021 (light) / #94a3b8 (dark — fades to slate)
   Dark mode page background overrides Darkly's #222 with brand navy #12162c.
   ============================================================ */

:root {
  --ccm-cyan: #008CB7;
  --ccm-purple: #7A209F;
  --ccm-pink: #C21E72;
  --ccm-navy: #0B1021;
  --ccm-slate: #475569;
  --ccm-code-bg: #f7fafc;
  --ccm-inline-code-bg: #edf2f7;
}

[data-bs-theme="dark"],
.quarto-dark {
  --ccm-cyan: #22d3ee;
  --ccm-purple: #c084fc;
  --ccm-pink: #e2e8f0;
  --ccm-navy: #94a3b8;
  --ccm-slate: #cbd5e0;
  --ccm-code-bg: #152238;
  --ccm-inline-code-bg: rgba(255, 255, 255, 0.1);
}

/* Override Darkly's default gray with brand navy */
.quarto-dark {
  --bs-body-bg: #12162c !important;
  background-color: #12162c !important;
}

.quarto-dark #quarto-header {
  background-color: #0e1224 !important;
}

.quarto-dark #quarto-sidebar {
  background-color: #12162c !important;
}

/* ---- Typography --------------------------------------------- */

body {
  font-feature-settings: "ss01", "cv11";
  text-rendering: optimizeLegibility;
}

/* ---- Heading colors by level -------------------------------- */

h1, .h1 {
  color: var(--ccm-cyan);
  font-weight: 700;
}

h2, .h2 {
  color: var(--ccm-purple);
  font-weight: 600;
  border-left: 4px solid var(--ccm-purple);
  padding-left: 0.6rem;
  margin-top: 2rem;
}

h3, .h3 {
  color: var(--ccm-pink);
  font-weight: 600;
}

h4, .h4 {
  color: var(--ccm-navy);
  font-weight: 600;
}

/* ---- Inline code (pill style) ------------------------------- */

p code,
li code,
td code {
  background-color: var(--ccm-inline-code-bg);
  color: inherit;
  padding: 0.1em 0.45em;
  border-radius: 0.4em;
  font-size: 0.92em;
}

/* ---- Code blocks: cyan left border with tinted background --- */

div.sourceCode {
  background-color: var(--ccm-code-bg);
  border-left: 3px solid var(--ccm-cyan);
  border-radius: 4px;
}

div.sourceCode pre {
  padding: 0.75rem 1rem;
  margin-bottom: 0;
}

.quarto-dark div.sourceCode pre {
  color: #e2e8f0;
}

/* ---- Callouts: subtle accent line --------------------------- */

.callout {
  border-left-width: 4px !important;
}

/* ---- Links -------------------------------------------------- */

a {
  color: var(--ccm-cyan);
  text-decoration: none;
}

a:hover {
  color: var(--ccm-purple);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

/* ---- Title block: soft gradient header with cyan underline -- */

header#title-block-header {
  background: linear-gradient(135deg, #f7fafc 0%, #eef6ff 100%);
  border-bottom: 3px solid var(--ccm-cyan);
  padding: 1.5rem;
  margin-bottom: 2rem;
  border-radius: 0 0 8px 8px;
}

.quarto-dark header#title-block-header {
  background: rgba(34, 211, 238, 0.05);
  border-bottom-color: var(--ccm-cyan);
}

/* ---- Right-side TOC card ------------------------------------ */

#TOC {
  background: linear-gradient(180deg, #f7fafc 0%, #ffffff 100%);
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.75rem;
}

.quarto-dark #TOC {
  background: #12162c;
  border-color: rgba(255, 255, 255, 0.1);
}

#TOC h2 {
  color: var(--ccm-purple) !important;
  font-size: 0.95rem;
  font-weight: 700;
  border-left: none;
  border-bottom: 2px solid var(--ccm-cyan);
  padding-left: 0;
  padding-bottom: 0.4rem;
  margin-bottom: 0.75rem;
}

/* ---- Book cover above right-side TOC ------------------------ */

#toc-cover-image {
  text-align: center;
  padding: 0 0.5rem 1rem 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid #e2e8f0;
}

#toc-cover-image img {
  max-width: 100%;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.quarto-dark #toc-cover-image {
  border-bottom-color: rgba(255, 255, 255, 0.15);
}

/* ---- Responsive: keep sidebar comfortable on mid screens ---- */

@media (max-width: 992px) {
  h2, .h2 {
    border-left-width: 3px;
    padding-left: 0.5rem;
  }
}

/* ---- Tables (modelsummary output) --------------------------- */

table.dataframe,
table.gt_table,
.cell-output-display table {
  font-size: 0.95em;
}

/* gt tables: inherit text color from the body so they read correctly in
   both cosmo (light) and darkly (dark) themes. The helper in
   R/table_helpers.R sets a transparent background; this matches it for
   the foreground. */
.gt_table,
.gt_table th,
.gt_table td,
.gt_table .gt_col_heading,
.gt_table .gt_column_spanner,
.gt_table .gt_row,
.gt_table .gt_stub,
.gt_table .gt_group_heading,
.gt_table .gt_summary_row,
.gt_table .gt_grand_summary_row,
.gt_table .gt_sourcenotes,
.gt_table .gt_sourcenote,
.gt_table .gt_footnotes,
.gt_table .gt_footnote,
.gt_table caption {
  color: inherit !important;
}

/* ---- Concept-pair cards (chapter 7) ------------------------- */

.concept-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  margin: 0.5rem 0 1rem 0;
}

@media (max-width: 768px) {
  .concept-pair { grid-template-columns: 1fr; }
}

.concept-card {
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 0.5rem 0.75rem;
  background-color: var(--ccm-code-bg);
}

.quarto-dark .concept-card {
  border-color: rgba(255, 255, 255, 0.1);
}

.concept-card summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.15rem 0;
}

.concept-example {
  border-left: 3px solid var(--ccm-cyan);
}

.concept-example > summary {
  color: var(--ccm-cyan);
}

.concept-analogy {
  border-left: 3px solid var(--ccm-purple);
}

.concept-analogy > summary {
  color: var(--ccm-purple);
}

/* ---- Print / PDF fallback ----------------------------------- */

@media print {
  div.sourceCode {
    border-left-width: 2px;
    background-color: transparent;
  }
  header#title-block-header,
  #TOC {
    background: transparent !important;
    border: none !important;
  }
}