/* =========================
   Base layout & typography
   ========================= */

body {
  font-family: Arial, sans-serif;
  margin: auto;
  max-width: 770px;
  line-height: 1.4;
  color: #000;
  padding: 20px 30px 30px 30px;
  text-align: justify;
}

p {
  margin-bottom: 1em;
}

/* =========================
   Chapter headers
   ========================= */

h1 {
  font-size: 38px;
  text-align: center;
  font-weight: normal;
  margin: 0;               /* explicit: no browser defaults */
}

h2 {
  font-size: 18px;
  color: #000;
  text-align: center;
  font-style: italic;
  font-weight: normal;
  margin: 6px 0 40px 0;
}

h3 {
  font-size: 150%;
  color: #8e1b00;          /* your preferred darker red */
  font-weight: 600;
  margin-top: 40px;
  margin-bottom: 10px;
}

h4 {
  margin-top: 30px;
}

/* =========================
   Horizontal rules
   ========================= */

hr {
  border: none;
  border-top: 1px solid #ddd;
  margin: 25px 0;
}

/* =========================
   Chapter Navigation
   ========================= */

.chapter-navigation {
  width: 100%;
  margin-bottom: 2em;
}

/* Base link styling */
.chapter-navigation a {
  text-decoration: none;
  font-weight: 500;
}

.chapter-navigation a:hover {
  text-decoration: underline;
}

/* Home (bold) */
.chapter-navigation .nav-home a {
  font-weight: 900;
}

/* Layout row for Prev / Next */
.nav-row {
  display: flex;
  width: 100%;
  align-items: center;
}

/* Left side */
.nav-prev {
  text-align: left;
}

/* Right side */
.nav-next {
  margin-left: auto;  /* pushes to right */
  text-align: right;
}


/* =========================
   Links (global)
   ========================= */

a {
  color: #45bfd8;          /* palette blue */
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

a:visited {
  color: #45bfd8;
}

/* =========================
   Investigation box
   ========================= */

.investigation {
  background-color: rgba(214, 231, 251, 0.6); 
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: 6px;
}

/* =========================
   Code blocks
   ========================= */

pre {
  background-color: #F2F2F2;
  padding: 10px;
  border-radius: 5px;
  overflow-x: auto;
}

/* =========================
   Pandoc syntax highlighting
   ========================= */

pre.sourceCode {
  background-color: #f2f2f2;
}

code.sourceCode > span { color: inherit; }

.sourceCode .kw { color: #007020; font-weight: 600; } /* keywords */
.sourceCode .co { color: #6a737d; font-style: italic; } /* comments */
.sourceCode .st { color: #a31515; } /* strings */
.sourceCode .dv { color: #005cc5; } /* numbers */
.sourceCode .fu { color: #6f42c1; } /* functions */
.sourceCode .va { color: #24292e; } /* variables */

/* =========================
   Syntax highlighting (Pandoc / R Markdown)
   ========================= */

code {
  font-family: Consolas, Monaco, "Courier New", monospace;
}

pre code {
  color: #333;
}

/* Comments */
.sourceCode .co {
  color: #6a737d;
  font-style: italic;
}

/* Keywords */
.sourceCode .kw {
  color: #005cc5;
  font-weight: 600;
}

/* Strings */
.sourceCode .st {
  color: #a31515;
}

/* Numbers */
.sourceCode .dv {
  color: #005cc5;
}

/* Functions */
.sourceCode .fu {
  color: #6f42c1;
}

/* Variables */
.sourceCode .va {
  color: #24292e;
}


/* =========================
   Question / challenge blocks
   ========================= */

.questions,
.challenge {
  margin: 15px 0;
}

.bonus {
  font-weight: bold;
}


/* =========================
   Figures
   ========================= */

.figure {
  margin: 25px 0;
  text-align: center;
}

.figure-caption {
  font-size: 0.9em;
  color: #555;
  margin-top: 5px;
}


/* =========================
   Color tokens (single source of truth)
   ========================= */
:root{
  --c-stopthinkdo: #fbc64c;
  --c-question-set: #3891A6;        /* also chapter links */
  --c-discussion: #5FAD56;
  --c-challenge: #fd6b42;
  --c-info-header: #45bfd8;

  --bg-info: rgba(255, 235, 194, 0.4);
  --bg-investigation: rgba(200, 232, 237, 0.4);
}

/* =========================
   Links (chapter + question-set color choice)
   ========================= */
a {
  color: var(--c-question-set);
  text-decoration: none;
}
a:hover { text-decoration: underline; }
a:visited { color: var(--c-question-set); }

/* =========================
   Investigation box
   ========================= */
.investigation {
  background-color: var(--bg-investigation);
  padding: 20px 22px;
  margin-bottom: 20px;
  border-radius: 6px;
}
.investigation strong {
  margin-right: 0.25em;
}

/* =========================
   Info Box Container 
   ========================= */

.info-box {
  background-color: #fdf6ec; /* light creme tone */
  border-left: 6px solid var(--c-info-header);
  padding: 1.2em 1.4em;
  margin: 1.5em 0;
  border-radius: 6px;
}

/* Info Box Title */
.info-box .info-title {
  color: var(--c-info-header);
  font-weight: 700;
  font-size: 1.1rem;
  display: block;
  margin-bottom: 0.6em;
}

/* Optional: center formula text cleanly */
.info-box .info-center {
  text-align: center;
  font-weight: 700;
  margin: 0.8em 0;
}

/* =========================
   Section headers / callouts
   ========================= */
.stop-think-do-title {
  color: var(--c-stopthinkdo);
  font-weight: 700;
  margin-top: 10px;
}

.question-set-title {
  color: var(--c-question-set);
  font-size: 0.85em;
  font-weight: 700;
}

.discussion-questions-title {
  color: var(--c-discussion);
  font-weight: 700;
}

.challenge-title {
  color: #fd6b42;
  font-size: 125%;
  font-weight: 600;
}

.section-intro {
  margin-top: 20px;
}

/* =========================
   Research question (primary focal element)
   ========================= */

.research-question {
  font-size: 140%;
  font-style: italic;
  font-weight: 500;
  color: #327527;
  text-align: center;
  margin: 40px 0 35px 0;
}

/* =========================
   Section banner (large thematic headers)
   ========================= */

.section-banner {
  font-size: 200%;
  font-weight: 600;
  color: #342a8c;          
  text-align: center;
  margin: 50px 0 30px 0;
}