/* ============================================================
   Custom CSS for Chap4 Xaringan Slides
   Author: Jingya Wang
   ============================================================ */

/* ---- Google Fonts (replaces metropolis-fonts) ---- */
@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;700&family=Fira+Mono:wght@400;500&display=swap');

body, .remark-slide-content {
  font-family: 'Fira Sans', 'PingFang SC', 'Microsoft YaHei', Arial, sans-serif;
}

.remark-code, .remark-inline-code {
  font-family: 'Fira Mono', 'Courier New', monospace;
}

/* ---- Color palette ---- */
:root {
  --col-primary-dark:  #1a3f66;
  --col-primary:       #2d6a9f;
  --col-primary-light: #5b9bd5;
  --col-accent:        #e05252;
  --col-success:       #27ae60;
  --col-warning:       #e67e22;
  --col-text:          #2c3e50;
  --col-bg-note:       #fff8e1;
  --col-bg-tip:        #e3f2fd;
  --col-bg-warn:       #fce4ec;
  --col-bg-green:      #e8f8f0;
  --col-mid-gray:      #dee2e6;
  --col-light-gray:    #f7f9fc;
}

/* ---- Base slide content ---- */
.remark-slide-content {
  font-size: 15.5px;
  color: var(--col-text);
  padding: 0.7em 2.2em 0.8em 2.2em;
  background-color: #ffffff;
  line-height: 1.55;
}

/* ---- Headings ---- */
.remark-slide-content h1 {
  color: var(--col-primary-dark);
  font-size: 1.65em;
  border-bottom: 3px solid var(--col-primary-light);
  padding-bottom: 0.2em;
  margin-top: 0;
  margin-bottom: 0.45em;
}

.remark-slide-content h2 {
  color: var(--col-primary);
  font-size: 1.25em;
  margin-top: 0.4em;
  margin-bottom: 0.25em;
}

.remark-slide-content h3 {
  color: var(--col-primary);
  font-size: 1.05em;
  margin-top: 0.3em;
  margin-bottom: 0.2em;
}

/* ---- Inverse slides ---- */
.inverse {
  background: linear-gradient(135deg, #1a3f66 0%, #2d6a9f 100%);
  color: #ecf0f1;
}

.inverse h1, .inverse h2 {
  color: #ffffff;
  border-bottom-color: rgba(255, 255, 255, 0.3);
}

.inverse h3 {
  color: #a8d4f5;
}

.inverse a { color: #7ec8f5; }

/* ---- Code blocks ---- */
.remark-code {
  font-size: 0.72em;
  border-radius: 6px;
  line-height: 1.45;
}

.remark-inline-code {
  background: #eef0f4;
  border: 1px solid #d0d3d8;
  border-radius: 3px;
  padding: 1px 5px;
  font-size: 0.86em;
  color: #c0392b;
}

/* Highlighted lines in code */
.remark-code .remark-code-line-highlighted {
  background-color: rgba(255, 220, 50, 0.25);
}

/* ---- Tables ---- */
.remark-slide-content table {
  font-size: 0.78em;
  border-collapse: collapse;
  width: 100%;
  margin: 0.35em 0;
}

.remark-slide-content thead th {
  background-color: var(--col-primary);
  color: #ffffff;
  padding: 6px 10px;
  text-align: left;
  border: none;
}

.remark-slide-content tbody td {
  padding: 4px 10px;
  border-bottom: 1px solid #e0e0e0;
}

.remark-slide-content tbody tr:nth-child(even) td {
  background-color: var(--col-light-gray);
}

/* ---- Callout boxes ---- */
.note-box {
  background: var(--col-bg-note);
  border-left: 4px solid #f9a825;
  padding: 7px 14px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.84em;
}

.tip-box {
  background: var(--col-bg-tip);
  border-left: 4px solid var(--col-primary-light);
  padding: 7px 14px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.84em;
}

.warn-box {
  background: var(--col-bg-warn);
  border-left: 4px solid var(--col-accent);
  padding: 7px 14px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.84em;
}

.green-box {
  background: var(--col-bg-green);
  border-left: 4px solid var(--col-success);
  padding: 7px 14px;
  margin: 6px 0;
  border-radius: 0 4px 4px 0;
  font-size: 0.84em;
}

/* ---- Font size helpers ---- */
.small   { font-size: 0.82em; line-height: 1.42; }
.smaller { font-size: 0.73em; line-height: 1.38; }
.tiny    { font-size: 0.64em; line-height: 1.32; }
.large   { font-size: 1.15em; }

/* ---- Color text helpers ---- */
.red    { color: var(--col-accent); }
.blue   { color: var(--col-primary); }
.green  { color: var(--col-success); }
.orange { color: var(--col-warning); }
.gray   { color: #7f8c8d; }
.bold   { font-weight: bold; }

/* ---- Layout helpers ---- */
.pull-left  { float: left;  width: 47%; }
.pull-right { float: right; width: 47%; }
/* clear only elements that come AFTER the right column, not .pull-right itself */
.pull-right + * { clear: both; }

.col-32 { float: left; width: 32%; margin-right: 2%; }
.col-32:last-child { margin-right: 0; }

.w60 { width: 60%; float: left; }
.w38 { width: 38%; float: right; }
.w60 ~ * { clear: both; }

/* ---- Progress bar ---- */
.progress-bar-container {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(0, 0, 0, 0.08);
}

.progress-bar {
  height: 3px;
  background: linear-gradient(to right, var(--col-primary-light), var(--col-primary));
}

/* ---- Footnote ---- */
.footnote {
  position: absolute;
  bottom: 1.2em;
  left: 2em;
  font-size: 0.72em;
  color: #95a5a6;
  font-style: italic;
}

.inverse .footnote {
  color: rgba(255, 255, 255, 0.65);
  font-style: normal;
}

.inverse .footnote a {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.inverse .footnote a:hover {
  color: #ffffff;
}

/* ---- TOC styles ---- */
.toc-item {
  display: block;
  padding: 0.45em 1em 0.45em 0.8em;
  margin: 0.38em 0;
  border-left: 4px solid var(--col-primary-light);
  background: var(--col-light-gray);
  border-radius: 0 6px 6px 0;
  transition: background 0.18s, border-left-color 0.18s;
}

.toc-item a {
  color: var(--col-text);
  text-decoration: none;
  font-weight: 500;
  display: block;
}

.toc-item:hover {
  background: #d8e8f7;
  border-left-color: var(--col-primary);
}

.toc-item:hover a {
  color: var(--col-primary);
}

.toc-num {
  display: inline-block;
  width: 2.8em;
  color: var(--col-primary);
  font-weight: bold;
  font-size: 0.95em;
}

/* ---- Section big number decoration ---- */
.section-num {
  font-size: 8em;
  font-weight: 900;
  color: rgba(255, 255, 255, 0.1);
  position: absolute;
  bottom: -0.05em;
  right: 0.15em;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

/* ---- Badge ---- */
.badge {
  display: inline-block;
  padding: 1px 8px;
  background: var(--col-primary);
  color: white;
  border-radius: 10px;
  font-size: 0.75em;
  font-weight: bold;
  vertical-align: middle;
}
.badge-orange { background: var(--col-warning); }
.badge-red    { background: var(--col-accent); }
.badge-green  { background: var(--col-success); }

/* ---- List improvements ---- */
.remark-slide-content ul { padding-left: 1.3em; }
.remark-slide-content li { margin-bottom: 0.12em; }

/* ---- Panelset customization ---- */
.panelset .panel-tabs {
  font-size: 0.88em;
  border-bottom: 2px solid var(--col-primary-light);
}

.panelset .panel-tab {
  padding: 5px 12px;
  border-radius: 4px 4px 0 0;
}

.panelset .panel-tab.active {
  background: var(--col-primary);
  color: white;
  font-weight: bold;
}

/* ---- Divider line ---- */
hr {
  border: none;
  border-top: 1px solid var(--col-mid-gray);
  margin: 0.5em 0;
}

/* ---- Center helper ---- */
.center-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

/* ---- Remark slide number hidden by progress bar ---- */
.remark-slide-number { opacity: 0.5; font-size: 0.75em; }

/* ---- Container background reset (eliminates black bars) ---- */
/* remark.js wraps slides in several nested divs; any of them
   defaulting to a dark background will show as a black bar when
   the slide is scaled to fit the viewport.                        */
html, body {
  background: #ffffff !important;
  margin: 0;
  padding: 0;
}

.remark-slides-area,
.remark-slide-container,
.remark-slide,
.remark-slide-scaler {
  background: #ffffff !important;
}

/* Keep inverse slides dark (override the !important above) */
.inverse.remark-slide-container,
.inverse .remark-slide,
.remark-slide-container:has(.inverse) {
  background: transparent !important;
}

/* Remove any pseudo-element top bars left by theme files */
.remark-slide-content::before,
.remark-slide-content::after {
  display: none !important;
}

/* Remove any top border added by themes */
.remark-slide-content {
  border-top: none !important;
  box-shadow: none !important;
}