/* ===== Winston Chang — r-graphics.org Light GitBook Theme ===== */

:root {
  --navy: #ffffff;         /* White sidebar background */
  --deepblue: #008cba;     /* Active blue text */
  --teal: #008cba;         /* Theme primary accent */
  --midnight: #333333;     /* Main headers */
  --offwhite: #f8f8f8;     /* Light grey code block background */
  --ink: #364149;          /* Dark body text */
  --muted: #777777;        /* Muted/grey text */
  --border-color: #e8e8e8; /* Light border separator */
}

body {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.7;
}

.book .book-header h1 {
  font-weight: 500;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1, h2, h3, h4 {
  color: var(--midnight);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-weight: 600;
}

h1 { border-bottom: 1px solid var(--border-color); padding-bottom: 0.3em; }
h2 { border-bottom: 1px solid var(--border-color); padding-bottom: 0.2em; margin-top: 1.8em; }

.book .book-summary {
  background: var(--navy);
  color: var(--ink);
  border-right: 1px solid var(--border-color);
}
.book .book-summary ul.summary li a {
  color: var(--ink);
}
.book .book-summary ul.summary li.active > a {
  color: var(--deepblue);
  font-weight: bold;
  background: transparent;
}
.book .book-summary ul.summary li a:hover {
  color: var(--deepblue);
  background: transparent;
  text-decoration: none;
}

/* Code blocks */
pre, code {
  background-color: var(--offwhite) !important;
  color: #333333 !important;
  border: 1px solid #e1e1e8;
  border-radius: 4px;
}
pre code { background: none !important; }
.sourceCode { border-radius: 4px; }

/* Inline code */
p code, li code {
  background-color: #f7f7f9 !important;
  color: #d14 !important;
  border: 1px solid #e1e1e8;
  padding: 2px 4px;
  border-radius: 3px;
}

/* ===== Callout boxes ===== */
.callout {
  border-radius: 8px;
  padding: 1em 1.3em;
  margin: 1.5em 0;
  border-left: 6px solid;
}

.callout-concept {
  background: #EAF2F7;
  border-color: var(--teal);
}
.callout-concept::before {
  content: "💡 KEY CONCEPT";
  display: block;
  font-weight: 700;
  color: var(--teal);
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 0.4em;
}

.callout-tryit {
  background: #FFF8E6;
  border-color: #E0A930;
}
.callout-tryit::before {
  content: "✏️ TRY IT YOURSELF";
  display: block;
  font-weight: 700;
  color: #A9760F;
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 0.4em;
}

.callout-warning {
  background: #FDEDED;
  border-color: #C0392B;
}
.callout-warning::before {
  content: "⚠️ COMMON MISTAKE";
  display: block;
  font-weight: 700;
  color: #C0392B;
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 0.4em;
}

.callout-takeaway {
  background: var(--midnight);
  color: #F7F9FB;
  border-color: var(--teal);
}
.callout-takeaway::before {
  content: "✅ KEY TAKEAWAYS";
  display: block;
  font-weight: 700;
  color: #7FD8E8;
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 0.4em;
}
.callout-takeaway a { color: var(--offwhite); }

.callout-dataset {
  background: #F0EDFB;
  border-color: var(--midnight);
}
.callout-dataset::before {
  content: "📊 DATASET USED HERE";
  display: block;
  font-weight: 700;
  color: var(--midnight);
  font-size: 0.85em;
  letter-spacing: 1px;
  margin-bottom: 0.4em;
}

/* Tables */
table {
  border-collapse: collapse;
  width: 100%;
  margin: 1.2em 0;
}
table th {
  background: var(--midnight);
  color: white;
  padding: 8px 12px;
  text-align: left;
}
table td {
  padding: 7px 12px;
  border-bottom: 1px solid #E4E9EE;
}
table tr:nth-child(even) { background: var(--offwhite); }

blockquote {
  border-left: 4px solid var(--teal);
  color: var(--muted);
  padding-left: 1em;
}