/* Custom styles for the book */

.content-visible {
  display: block;
}

/* Improve code block styling */
pre {
  background-color: #f5f5f5;
  border: 1px solid #ddd;
  border-radius: 4px;
  padding: 10px;
}

/* Dark mode code block styling */
[data-bs-theme="dark"] pre {
  background-color: #2b2b2b;
  border-color: #444;
}

/* Table styling */
table {
  margin: 1em 0;
  border-collapse: collapse;
  width: 100%;
}

table th,
table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

table th {
  background-color: #f2f2f2;
  font-weight: bold;
}

/* Dark mode table styling */
[data-bs-theme="dark"] table th,
[data-bs-theme="dark"] table td {
  border-color: #444;
}

[data-bs-theme="dark"] table th {
  background-color: #2b2b2b;
}

/* Callout boxes */
.callout {
  margin: 1em 0;
  padding: 1em;
  border-left: 4px solid #007bff;
  background-color: #f8f9fa;
}

.callout-note {
  border-left-color: #007bff;
}

.callout-warning {
  border-left-color: #ffc107;
}

.callout-important {
  border-left-color: #dc3545;
}

/* Dark mode callout styling */
[data-bs-theme="dark"] .callout {
  background-color: #2b2b2b;
}

/* Preview highlighting styles for PR previews */
.preview-combined-banner {
  background-color: #fff3cd;
  border: 2px solid #ffc107;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
  font-size: 0.95em;
}

.preview-home-changes-banner {
  background-color: #d1ecf1;
  border: 2px solid #0c5460;
  border-radius: 5px;
  padding: 15px;
  margin: 20px 0;
  font-size: 0.95em;
}

/* Highlight styles for changed content */
mark.preview-text-changed {
  background-color: #fff3cd;
  padding: 2px 4px;
  border-radius: 3px;
}

mark.preview-text-added {
  background-color: #d4edda;
  padding: 2px 4px;
  border-radius: 3px;
}

mark.preview-element-added {
  background-color: #cfe2ff;
  padding: 2px 4px;
  border-radius: 3px;
  display: inline;
}

/* Dark mode preview styles */
[data-bs-theme="dark"] .preview-combined-banner {
  background-color: #664d03;
  border-color: #ffca2c;
}

[data-bs-theme="dark"] .preview-home-changes-banner {
  background-color: #055160;
  border-color: #0dcaf0;
}

[data-bs-theme="dark"] mark.preview-text-changed {
  background-color: #664d03;
  color: #fff;
}

[data-bs-theme="dark"] mark.preview-text-added {
  background-color: #0f5132;
  color: #fff;
}

[data-bs-theme="dark"] mark.preview-element-added {
  background-color: #084298;
  color: #fff;
}