/* Custom styles for Learn Compact book */

/* ============================================
   GLOBAL IMPROVEMENTS
   ============================================ */

/* Better body text readability */
.content main {
  max-width: 850px;
  line-height: 1.7;
}

/* Improve code font */
code {
  font-family: "JetBrains Mono", "Fira Code", "SF Mono", Consolas, monospace;
  font-size: 0.9em;
}

/* ============================================
   CODE BLOCKS
   ============================================ */

/* Base code block styles */
pre {
  border-radius: 8px;
  padding: 1rem;
  margin: 1.5rem 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Light theme code blocks */
.light pre,
.rust pre {
  background-color: #f6f8fa;
  border: 1px solid #e1e4e8;
}

.light pre code,
.rust pre code {
  color: #24292e;
}

/* Dark theme code blocks */
.ayu pre,
.coal pre,
.navy pre {
  background-color: #282c34;
}

.ayu pre code,
.coal pre code,
.navy pre code {
  color: #abb2bf;
}

/* Inline code */
:not(pre) > code {
  padding: 0.2em 0.4em;
  border-radius: 4px;
  font-size: 0.875em;
}

/* Light theme inline code */
.light :not(pre) > code,
.rust :not(pre) > code {
  background-color: rgba(175, 184, 193, 0.2);
  color: #24292e;
}

/* Dark theme inline code */
.ayu :not(pre) > code,
.coal :not(pre) > code,
.navy :not(pre) > code {
  background-color: rgba(255, 255, 255, 0.1);
  color: #cdd6f4;
}

/* ============================================
   TABLES
   ============================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

table th {
  background-color: #667eea;
  color: white;
  font-weight: 600;
  padding: 0.875rem 1rem;
  text-align: left;
}

table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e0e0e0;
}

table tr:last-child td {
  border-bottom: none;
}

table tr:nth-child(even) {
  background-color: rgba(0, 0, 0, 0.02);
}

table tr:hover {
  background-color: rgba(102, 126, 234, 0.08);
}

/* Dark theme table adjustments */
.rust table td,
.ayu table td,
.coal table td,
.navy table td {
  border-bottom-color: rgba(255, 255, 255, 0.1);
}

.rust table tr:nth-child(even),
.ayu table tr:nth-child(even),
.coal table tr:nth-child(even),
.navy table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.03);
}

/* ============================================
   CALLOUT BOXES (Blockquotes)
   ============================================ */

blockquote {
  border-left: 4px solid #667eea;
  background-color: rgba(102, 126, 234, 0.08);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

blockquote p {
  margin: 0;
}

/* Warning callouts (contains ⚠️ or "Warning") */
blockquote:has(strong:first-child) {
  border-left-color: #f59e0b;
  background-color: rgba(245, 158, 11, 0.08);
}

/* Note/Tip callouts */
.warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-left: 4px solid #f59e0b;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.critical {
  background-color: rgba(239, 68, 68, 0.1);
  border-left: 4px solid #ef4444;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

.info {
  background-color: rgba(59, 130, 246, 0.1);
  border-left: 4px solid #3b82f6;
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 8px 8px 0;
}

/* ============================================
   EXERCISE BOXES
   ============================================ */

.exercise {
  background-color: rgba(16, 185, 129, 0.08);
  border: 1px solid rgba(16, 185, 129, 0.3);
  border-radius: 12px;
  padding: 1.25rem;
  margin: 1.5rem 0;
}

/* ============================================
   COMMON MISTAKES TABLE
   ============================================ */

table.mistakes th {
  background-color: #ef4444;
}

table.mistakes td:first-child {
  color: #ef4444;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  text-decoration: line-through;
  opacity: 0.8;
}

table.mistakes td:nth-child(2) {
  color: #10b981;
  font-family: "JetBrains Mono", "Fira Code", monospace;
  font-weight: 500;
}

/* ============================================
   HEADINGS
   ============================================ */

h1,
h2,
h3,
h4 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}

h1 {
  border-bottom: 2px solid rgba(102, 126, 234, 0.3);
  padding-bottom: 0.5rem;
}

h2 {
  border-bottom: 1px solid rgba(102, 126, 234, 0.2);
  padding-bottom: 0.3rem;
}

/* ============================================
   LINKS
   ============================================ */

a {
  color: #667eea;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

a:hover {
  border-bottom-color: #667eea;
}

/* ============================================
   LISTS
   ============================================ */

ul,
ol {
  padding-left: 1.5rem;
}

li {
  margin: 0.5rem 0;
}

/* Checklist style for ✅ items */
li:has(> :first-child:is(:empty)) {
  list-style: none;
}

/* ============================================
   SIDEBAR IMPROVEMENTS
   ============================================ */

.sidebar .chapter {
  padding: 0.4rem 0;
}

.sidebar .chapter.active > a {
  background-color: rgba(102, 126, 234, 0.15);
  border-radius: 4px;
}

/* ============================================
   EMOJI/ICON IMPROVEMENTS
   ============================================ */

/* Make emojis slightly larger for visibility */
h1 .emoji,
h2 .emoji {
  font-size: 1.1em;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 768px) {
  table {
    font-size: 0.875rem;
  }

  table th,
  table td {
    padding: 0.5rem 0.75rem;
  }

  pre {
    padding: 0.75rem;
    font-size: 0.8rem;
  }
}

/* ============================================
   COMPACT SYNTAX HIGHLIGHTING
   ============================================ */

/* Keywords - purple/violet */
code.language-compact .hljs-keyword {
  color: #c678dd;
  font-weight: 500;
}

/* Types - cyan/teal */
code.language-compact .hljs-type {
  color: #56b6c2;
}

/* Function names - blue */
code.language-compact .hljs-title.function_,
code.language-compact .hljs-function .hljs-title {
  color: #61afef;
}

/* Class/Struct/Enum names - yellow/gold */
code.language-compact .hljs-title.class_,
code.language-compact .hljs-class .hljs-title {
  color: #e5c07b;
}

/* Built-in functions - orange */
code.language-compact .hljs-built_in {
  color: #d19a66;
}

/* Strings - green */
code.language-compact .hljs-string {
  color: #98c379;
}

/* Numbers - orange */
code.language-compact .hljs-number {
  color: #d19a66;
}

/* Comments - gray/muted */
code.language-compact .hljs-comment {
  color: #7f848e;
  font-style: italic;
}

/* Pragma/meta - pink */
code.language-compact .hljs-meta {
  color: #e06c75;
}

/* Variables - light text */
code.language-compact .hljs-variable {
  color: #e06c75;
}

/* Parameters */
code.language-compact .hljs-params {
  color: #abb2bf;
}

/* Enum constants */
code.language-compact .hljs-variable.constant {
  color: #e5c07b;
}

/* Light theme overrides */
.light code.language-compact .hljs-keyword,
.rust code.language-compact .hljs-keyword {
  color: #8959a8;
}

.light code.language-compact .hljs-type,
.rust code.language-compact .hljs-type {
  color: #3e999f;
}

.light code.language-compact .hljs-title.function_,
.rust code.language-compact .hljs-title.function_ {
  color: #4271ae;
}

.light code.language-compact .hljs-title.class_,
.rust code.language-compact .hljs-title.class_ {
  color: #c18401;
}

.light code.language-compact .hljs-built_in,
.rust code.language-compact .hljs-built_in {
  color: #b76b01;
}

.light code.language-compact .hljs-string,
.rust code.language-compact .hljs-string {
  color: #718c00;
}

.light code.language-compact .hljs-number,
.rust code.language-compact .hljs-number {
  color: #f5871f;
}

.light code.language-compact .hljs-comment,
.rust code.language-compact .hljs-comment {
  color: #8e908c;
}

.light code.language-compact .hljs-meta,
.rust code.language-compact .hljs-meta {
  color: #c82829;
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
  pre {
    box-shadow: none;
    border: 1px solid #ddd;
  }

  table th {
    background: #667eea !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ============================================
   HEADER ICONS (Edit, Theme, Print, Search)
   ============================================ */

/* Make all header icons larger and more visible */
.icon-button {
  width: 36px !important;
  height: 36px !important;
  font-size: 1.4rem !important;
}

.icon-button .fa-svg,
.icon-button .fa-svg svg {
  width: 22px !important;
  height: 22px !important;
}

/* Style the right-side icons container */
.right-buttons {
  gap: 12px !important;
  display: flex !important;
  align-items: center !important;
}

.right-buttons a,
.right-buttons button {
  padding: 8px !important;
  border-radius: 6px;
  transition: all 0.2s ease;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.right-buttons .fa-svg,
.right-buttons .fa-svg svg {
  width: 24px !important;
  height: 24px !important;
}

.right-buttons a:hover,
.right-buttons button:hover {
  background: rgba(0, 0, 0, 0.1);
  transform: scale(1.1);
}

/* Dark theme hover */
.ayu .right-buttons a:hover,
.ayu .right-buttons button:hover,
.coal .right-buttons a:hover,
.coal .right-buttons button:hover,
.navy .right-buttons a:hover,
.navy .right-buttons button:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* Make the edit icon stand out more */
a[rel="edit"],
a[rel="edit"] .fa-svg,
a[rel="edit"] .fa-svg svg {
  color: #1976d2 !important;
  fill: #1976d2 !important;
}

.ayu a[rel="edit"],
.ayu a[rel="edit"] .fa-svg,
.ayu a[rel="edit"] .fa-svg svg,
.coal a[rel="edit"],
.coal a[rel="edit"] .fa-svg,
.coal a[rel="edit"] .fa-svg svg,
.navy a[rel="edit"],
.navy a[rel="edit"] .fa-svg,
.navy a[rel="edit"] .fa-svg svg {
  color: #64b5f6 !important;
  fill: #64b5f6 !important;
}

/* Menu bar left icons */
.left-buttons {
  gap: 8px !important;
}

.left-buttons .icon-button .fa-svg,
.left-buttons .icon-button .fa-svg svg {
  width: 22px !important;
  height: 22px !important;
}

/* Sidebar toggle and theme buttons */
#sidebar-toggle,
#theme-toggle {
  font-size: 1.3rem;
}

#mdbook-sidebar-toggle .fa-svg svg,
#mdbook-theme-toggle .fa-svg svg,
#mdbook-search-toggle .fa-svg svg {
  width: 22px !important;
  height: 22px !important;
}