/* =========================================
   mdBook Custom Styling
   ========================================= */

/* Import Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;700&family=Sarabun:wght@300;400;500;700&display=swap');

/* 1. Global Typography & Colors */
:root {
  /* Modern Font Stack */
  --font-base: "Inter", "Sarabun", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-mono: "JetBrains Mono", "Fira Code", Consolas, "Courier New", monospace;

  /* Callout Colors */
  --note-bg: rgba(66, 133, 244, 0.1);
  --note-border: #4285f4;
  --tip-bg: rgba(52, 168, 83, 0.1);
  --tip-border: #34a853;
  --warn-bg: rgba(251, 188, 5, 0.1);
  --warn-border: #fbbc05;
  --ex-bg: rgba(161, 66, 244, 0.1);
  --ex-border: #a142f4;
}

/* Apply Fonts */
body,
.markdown-section {
  font-family: var(--font-base);
  line-height: 1.7;
}

code,
pre,
.sidebar {
  font-family: var(--font-mono);
}

/* 2. Enhanced Blockquotes (Callouts) */
.markdown-section blockquote {
  border-radius: 8px;
  padding: 16px;
  margin: 24px 0;
  border-left: 4px solid var(--fg);
  /* Default fallback */
  background: var(--bg);
  /* Default fallback */
  position: relative;
}

/* Note: Blue */
.markdown-section blockquote.note {
  background-color: var(--note-bg);
  border-left-color: var(--note-border);
}

.markdown-section blockquote.note::before {
  content: "📌 Note";
  font-weight: bold;
  color: var(--note-border);
  display: block;
  margin-bottom: 8px;
}

/* Tip: Green */
.markdown-section blockquote.tip {
  background-color: var(--tip-bg);
  border-left-color: var(--tip-border);
}

.markdown-section blockquote.tip::before {
  content: "💡 Tip";
  font-weight: bold;
  color: var(--tip-border);
  display: block;
  margin-bottom: 8px;
}

/* Warning: Yellow/Orange */
.markdown-section blockquote.warning {
  background-color: var(--warn-bg);
  border-left-color: var(--warn-border);
}

.markdown-section blockquote.warning::before {
  content: "⚠️ Warning";
  font-weight: bold;
  color: var(--warn-border);
  display: block;
  margin-bottom: 8px;
}

/* Exercise: Purple */
.markdown-section blockquote.exercise {
  background-color: var(--ex-bg);
  border-left-color: var(--ex-border);
}

.markdown-section blockquote.exercise::before {
  content: "🎯 Try it yourself";
  font-weight: bold;
  color: var(--ex-border);
  display: block;
  margin-bottom: 8px;
}

/* 3. Code Block Styling */
pre {
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(0, 0, 0, 0.1);
}

/* Light Theme overrides for code blocks */
.light pre {
  background-color: #f8f9fa;
  border: 1px solid #e9ecef;
}

/* Dark Theme overrides for code blocks */
.coal pre,
.navy pre,
.ayu pre {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* 4. Table Styling */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

th {
  background-color: var(--table-header-bg);
  text-transform: uppercase;
  font-size: 0.85em;
  letter-spacing: 0.05em;
}

td,
th {
  padding: 12px 16px;
  border-bottom: 1px solid var(--table-border-color);
}

/* 5. Custom Scrollbars */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: rgba(128, 128, 128, 0.3);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: rgba(128, 128, 128, 0.5);
}

/* 6. Sidebar Tweaks */
.sidebar {
  font-size: 0.9em;
}

.chapter li.active>a {
  color: var(--sidebar-active);
  font-weight: bold;
  border-left: 3px solid var(--sidebar-active);
  padding-left: 17px;
  /* Compensate for border */
}

/* 7. Image Styling */
img {
  border-radius: 8px;
  max-width: 100%;
  display: block;
  margin: 24px auto;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Remove shadow from inline icons/badges if any */
img[src*="badge"],
img[src*="icon"] {
  box-shadow: none;
  margin: 0;
  display: inline;
}