/* ============================================
   FILE: 4-content.css
   
   WHAT THIS FILE DOES:
   Styles for posts, projects, pages, and other
   content-specific elements. Typography for
   long-form content lives here.
   
   WHEN TO EDIT:
   - Adjusting post/project layouts
   - Changing content typography
   - Adding content-specific styles
   - Modifying article formatting
   
   WHEN NOT TO EDIT:
   - To change colors (use 1-variables.css)
   - To change base fonts (use 1-variables.css)
   - For layout structure (use 2-layout.css)
   
   ============================================ */

/* ============================================
   1. BASE CONTENT STYLES
   ============================================ */

/* Page header and title */
.page-header {
  margin-bottom: var(--space-xxl);
  padding-bottom: var(--space-lg);
  border-bottom: 3px solid var(--color-primary);
}

.page-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  font-weight: var(--font-bold);
  margin: 0;
  line-height: 1.1;
  letter-spacing: var(--tracking-tight);
}

.page-description {
  font-size: var(--text-lg);
  color: var(--color-text-secondary);
  margin-top: var(--space-md);
  margin-bottom: 0;
}

.page-count {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  margin-top: var(--space-sm);
}

/* Page content containers - unified with :is() and base class */

.content-body,
.page-content,
.post-content {
  font-size: var(--text-base);
  line-height: 1.8; /* Increased for better readability */
  color: var(--color-text);
  max-width: min(75ch, 90vw); /* Optimal 66-75 characters for readability */
  margin: 0 auto;
}

/* Brighter text for dark mode */
:is([data-theme="dark"], .dark-mode) :is(.content-body, .page-content, .post-content) {
  color: rgba(var(--shadow-color-light), 0.92); /* Brighter than default */
}

:is(.content-body, .page-content, .post-content) > * {
  margin-bottom: var(--space-lg); /* Increased spacing between elements */
}

:is(.content-body, .page-content, .post-content) > *:last-child {
  margin-bottom: 0;
}

/* Paragraphs need more breathing room */
.page-content p,
.post-content p {
  margin-bottom: var(--space-lg);
}

:is(.content-body, .page-content, .post-content) p:last-child {
  margin-bottom: 0;
}

/* ============================================
   2. HEADINGS
   ============================================ */

:is(.content-body, .page-content, .post-content) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  line-height: 1.2;
  color: var(--color-text);
  margin-top: var(--space-xxl); /* Much more breathing room above headings */
  margin-bottom: var(--space-md);
  letter-spacing: var(--tracking-tight);
}

:is(.content-body, .page-content, .post-content) h1 {
  font-size: var(--text-4xl);
  margin-top: 0;
  margin-bottom: var(--space-lg);
}

:is(.content-body, .page-content, .post-content) h2 {
  font-size: var(--text-2xl); /* Reduced from 3xl to differentiate from h1 */
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: var(--space-sm);
  margin-top: calc(var(--space-xxl) * 1.5); /* Extra top spacing for major sections */
  margin-bottom: var(--space-lg);
}

/* First h2 after h1 doesn't need as much top margin */
:is(.content-body, .page-content, .post-content) h1 + h2 {
  margin-top: var(--space-xl);
}

:is(.content-body, .page-content, .post-content) h3 {
  font-size: var(--text-xl); /* Reduced from 2xl */
  margin-top: var(--space-xl);
}

:is(.content-body, .page-content, .post-content) h4 {
  font-size: var(--text-xl);
}

:is(.content-body, .page-content, .post-content) h5 {
  font-size: var(--text-lg);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}

:is(.content-body, .page-content, .post-content) h6 {
  font-size: var(--text-md);
  font-weight: var(--font-bold);
}

/* Heading anchor links */
.page-content h2[id],
.post-content h2[id],
.page-content h3[id],
.post-content h3[id],
.page-content h4[id],
.post-content h4[id] {
  position: relative;
}

.anchor-link {
  position: absolute;
  left: -1.5em;
  top: 50%;
  transform: translateY(-50%);
  opacity: 0;
  text-decoration: none;
  color: var(--color-text-light);
  font-size: 0.8em;
  transition: opacity var(--transition-fast);
}

.page-content h2:hover .anchor-link,
.post-content h2:hover .anchor-link,
.page-content h3:hover .anchor-link,
.post-content h3:hover .anchor-link,
.page-content h4:hover .anchor-link,
.post-content h4:hover .anchor-link {
  opacity: 1;
}

/* ============================================
   3. PARAGRAPHS & TEXT
   ============================================ */

.page-content p,
.post-content p {
  margin-bottom: var(--space-md);
  max-width: var(--content-max-width);
}

/* Lead paragraph - first paragraph styling */
.page-content > p:first-of-type,
.post-content > p:first-of-type {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--color-text-light);
}

/* Drop caps (optional class) */
.dropcap::first-letter {
  float: left;
  font-size: 4em;
  line-height: 0.8;
  padding-right: 0.1em;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  color: var(--color-primary);
}

/* ============================================
   4. LINKS
   Link hover effects consolidated in 7-typography.css
   This file only adds content-specific link adjustments
   ============================================ */

/* Content-specific link exclusions are handled by the :not() selector
   in 7-typography.css. No additional rules needed here. */

/* ============================================
   5. LISTS
   Improved spacing for better readability
   ============================================ */

.page-content ul,
.post-content ul,
.page-content ol,
.post-content ol {
  margin-bottom: var(--space-lg);
  margin-top: var(--space-md);
  padding-left: var(--space-6);
  line-height: 1.8;
}

.page-content li,
.post-content li {
  margin-bottom: var(--space-sm); /* More spacing between list items */
}

.page-content ul ul,
.post-content ul ul,
.page-content ol ol,
.post-content ol ol {
  margin-top: var(--space-2);
  margin-bottom: var(--space-2);
}

/* Task lists */
.task-list-item {
  list-style-type: none;
  padding-left: 0;
}

.task-list-item input[type="checkbox"] {
  margin-right: var(--space-3);
}

/* Definition lists */
.page-content dl,
.post-content dl {
  margin-bottom: var(--space-md);
}

.page-content dt,
.post-content dt {
  font-weight: var(--font-semibold);
  margin-top: var(--space-4);
  color: var(--color-text);
}

.page-content dd,
.post-content dd {
  margin-left: 0;
  margin-top: var(--space-2);
  color: var(--color-text-light);
}

/* Horizontal layout for wide screens */
@media (min-width: 48em) {
  .page-content dl.inline,
  .post-content dl.inline {
    display: grid;
    grid-template-columns: 1fr 3fr;
    gap: var(--space-4);
  }
  
  .page-content dl.inline dt,
  .post-content dl.inline dt {
    margin-top: 0;
    text-align: right;
  }
  
  .page-content dl.inline dd,
  .post-content dl.inline dd {
    margin-top: 0;
  }
}

/* ============================================
   6. BLOCKQUOTES (Terminal Alert Style)
   ============================================ */

.page-content blockquote,
.post-content blockquote {
  margin: var(--space-lg) 0;
  padding: var(--space-md) var(--space-lg);
  padding-left: calc(var(--space-lg) + 1rem);
  border-left: 3px solid var(--color-link, var(--color-primary));
  background: linear-gradient(
    90deg,
    hsla(var(--color-secondary-h, 200), 50%, 50%, 0.08) 0%,
    transparent 100%
  );
  font-family: var(--font-mono);
  font-size: 0.95em;
  line-height: 1.7;
  position: relative;
}

/* Terminal-style prefix indicator */
.page-content blockquote::before,
.post-content blockquote::before {
  content: '>';
  font-family: var(--font-mono);
  font-size: 1.2em;
  font-weight: 700;
  color: var(--color-link, var(--color-primary));
  opacity: 0.8;
  position: absolute;
  top: var(--space-md);
  left: var(--space-sm);
  line-height: 1;
}

.page-content blockquote p,
.post-content blockquote p {
  margin-bottom: var(--space-3);
}

.page-content blockquote p:last-child,
.post-content blockquote p:last-child {
  margin-bottom: 0;
}

.page-content blockquote cite,
.post-content blockquote cite {
  display: block;
  margin-top: var(--space-4);
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.page-content blockquote cite::before,
.post-content blockquote cite::before {
  content: '// ';
  color: var(--color-link, var(--color-primary));
  opacity: 0.7;
}

/* Pull quote / Callout styles - Enhanced */
.pull-quote,

.pull-quote {
  text-align: center;
  font-size: var(--text-xl);
  font-style: italic;
  border-left: none;
  border-top: 3px solid var(--color-primary);
  border-bottom: 3px solid var(--color-primary);
}

/* Key insights callout */
.key-insight {
  background: linear-gradient(135deg, var(--color-bg-secondary), var(--color-bg-tertiary));
  border-left: 5px solid var(--color-primary);
  padding: var(--space-lg);
  margin: var(--space-xxl) 0;
  border-radius: var(--radius-lg);
  position: relative;
}

.key-insight::before {
  content: "💡";
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  font-size: var(--text-2xl);
}

.key-insight p {
  margin-left: var(--space-xxl);
}

/* ============================================
   7. CODE
   ============================================ */

/* Inline code */
.page-content code,
.post-content code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background-color: var(--color-surface);
  padding: 0.2em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-text);
}

/* Code blocks */
.page-content pre,
.post-content pre {
  background-color: var(--code-bg-dark);
  color: var(--code-text-light);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  overflow-x: auto;
  line-height: 1.6;
  margin: var(--space-lg) 0;
  position: relative;
}

.page-content pre code,
.post-content pre code {
  background-color: transparent;
  padding: 0;
  font-size: var(--text-sm);
}

/* Code block language label */
pre[data-language]::before {
  content: attr(data-language);
  position: absolute;
  top: 0;
  right: var(--space-4);
  background-color: var(--color-primary);
  color: var(--color-background);
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
  font-family: var(--font-heading);
  text-transform: uppercase;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
}

/* ============================================
   8. TABLES
   ============================================ */

.page-content table,
.post-content table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
}

.page-content caption,
.post-content caption {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  margin-bottom: var(--space-3);
  text-align: left;
  font-size: var(--text-md);
}

.page-content thead,
.post-content thead {
  border-bottom: 2px solid var(--color-text);
}

.page-content th,
.post-content th {
  font-family: var(--font-heading);
  font-weight: var(--font-semibold);
  text-align: left;
  padding: var(--space-3) var(--space-4);
  vertical-align: bottom;
}

.page-content td,
.post-content td {
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: top;
}

/* Striped rows */
.page-content tbody tr:nth-child(even),
.post-content tbody tr:nth-child(even) {
  background-color: var(--color-surface);
}

/* Hover highlight */
.page-content tbody tr:hover,
.post-content tbody tr:hover {
  background-color: var(--color-primary-highlight);
}

/* Numeric columns */
td.numeric,
th.numeric {
  text-align: right;
  font-family: var(--font-mono);
}

/* Table wrapper for overflow */
.table-wrapper {
  overflow-x: auto;
  margin: var(--space-lg) 0;
}

/* ============================================
   9. IMAGES & FIGURES
   Enhanced with borders, shadows, zoom capability
   ============================================ */

.page-content img,
.post-content img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border-light);
  box-shadow: 0 2px 8px rgba(var(--shadow-color), var(--alpha-10));
  /* Standard: 200ms lift + shadow */
  transition: transform 0.2s var(--ease-out, cubic-bezier(0, 0, 0.2, 1)),
              box-shadow 0.2s var(--ease-out, cubic-bezier(0, 0, 0.2, 1));
  cursor: zoom-in;
}

.page-content img:hover,
.post-content img:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(var(--shadow-color), var(--alpha-15));
}

/* Reduced motion for images */
@media (prefers-reduced-motion: reduce) {
  .page-content img,
  .post-content img {
    transition: none !important;
    transform: none !important;
  }
}

figure {
  margin: var(--space-xxl) 0; /* More breathing room */
  padding: var(--space-md);
  background: var(--color-bg-secondary);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-light);
}

figure img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
  margin: 0;
}

figcaption {
  margin-top: var(--space-md); /* Increased from space-3 */
  font-size: var(--text-base); /* Increased from text-sm */
  color: var(--color-text-secondary); /* Better contrast */
  line-height: 1.6;
  padding: var(--space-sm) 0;
  text-align: center;
  font-style: italic;
}

figcaption strong {
  color: var(--color-text);
  font-weight: var(--font-semibold);
  font-style: normal;
}

/* Images/figures wider than text - break out of narrow column */
.post-content figure,
.post-content img:not(figure img) {
  max-width: 900px;
  margin-left: 50%;
  transform: translateX(-50%);
}

.post-content img:hover:not(figure img) {
  transform: translateX(-50%) translateY(-2px);
}

/* Full-width figures */
figure.full-width {
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  border-radius: 0;
  border-left: none;
  border-right: none;
}

figure.full-width img {
  border-radius: 0;
}

/* ============================================
   MEDIA FRAME (Cyberpunk Terminal Style)
   ============================================ */

.media-frame {
  position: relative;
  display: block;
  padding: var(--space-sm);
  background: var(--color-bg-secondary);
  border: 1px solid var(--color-border);
  box-shadow:
    0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-10)),
    0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-5)),
    inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));
}

.media-frame::before,
.media-frame::after {
  content: '';
  position: absolute;
  width: 8px;
  height: 8px;
  border-color: var(--color-link, var(--color-primary));
  border-style: solid;
  transition: all var(--duration-fast) var(--ease-out);
}

/* Top-left corner bracket */
.media-frame::before {
  top: -1px;
  left: -1px;
  border-width: 2px 0 0 2px;
}

/* Bottom-right corner bracket */
.media-frame::after {
  bottom: -1px;
  right: -1px;
  border-width: 0 2px 2px 0;
}

.media-frame:hover::before,
.media-frame:hover::after {
  width: 12px;
  height: 12px;
  border-color: var(--color-link-hover, var(--color-primary));
}

.media-frame img,
.media-frame iframe,
.media-frame video {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius-sm);
}

/* Media frame caption */
.media-frame__caption {
  margin-top: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  background: var(--color-bg);
  border-left: 2px solid var(--color-link, var(--color-primary));
}

/* Dark mode enhancements */
[data-theme="dark"] .media-frame,
.dark-mode .media-frame {
  border-color: var(--color-border-light);
  box-shadow:
    0 4px 6px -1px rgba(var(--shadow-color), var(--alpha-30)),
    0 2px 4px -1px rgba(var(--shadow-color), var(--alpha-20)),
    inset 0 1px 0 rgba(var(--shadow-color-light), var(--alpha-5));
}

[data-theme="dark"] .media-frame::before,
[data-theme="dark"] .media-frame::after,
.dark-mode .media-frame::before,
.dark-mode .media-frame::after {
  border-color: var(--color-link-cyan, var(--color-primary));
}

[data-theme="dark"] .media-frame:hover::before,
[data-theme="dark"] .media-frame:hover::after,
.dark-mode .media-frame:hover::before,
.dark-mode .media-frame:hover::after {
  border-color: var(--color-link-hover, var(--color-primary));
  box-shadow: 0 0 6px var(--color-link-glow, transparent);
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .media-frame::before,
  .media-frame::after {
    transition: none;
  }
  
  .media-frame:hover::before,
  .media-frame:hover::after {
    width: 8px;
    height: 8px;
  }
}

/* ============================================
   10. HORIZONTAL RULES
   ============================================ */

.page-content hr,
.post-content hr {
  margin: var(--space-xl) 0;
  border: none;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    var(--color-border),
    transparent
  );
}

/* ============================================
   11. POST METADATA
   ============================================ */

.post-header {
  margin-bottom: var(--space-lg);
}

.post-title {
  font-family: var(--font-heading);
  font-size: var(--text-4xl);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.post-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-text-light);
}

.post-meta-separator {
  color: var(--color-border);
}

/* Post tags in metadata */
.post-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  margin-bottom: var(--space-2);
  line-height: 1.2;
}

.post-tags a {
  white-space: nowrap;
}

.post-tags::before {
  content: "Tagged";
  margin-right: var(--space-2);
  font-size: 0.8rem;
}

/* ============================================
   12. PROJECT LAYOUT
   ============================================ */

.project-header {
  margin-bottom: var(--space-lg);
}

.project-title {
  font-family: var(--font-heading);
  font-size: var(--text-5xl);
  margin-bottom: var(--space-4);
  line-height: var(--leading-tight);
}

.project-description {
  font-size: var(--text-xl);
  color: var(--color-text-light);
  margin-bottom: var(--space-md);
}

.project-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-5);
  padding: var(--space-md) 0;
  border-top: 1px solid var(--color-border-subtle);
  border-bottom: 1px solid var(--color-border-subtle);
  margin-bottom: var(--space-lg);
}

.project-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.project-meta-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--color-text-light);
}

.project-meta-value {
  font-weight: var(--font-medium);
}

/* Project links */
.project-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  margin-top: var(--space-lg);
}

/* ============================================
   13. FOOTNOTES
   ============================================ */

.footnotes {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border-subtle);
  font-size: var(--text-sm);
}

.footnotes::before {
  content: 'Notes';
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  display: block;
  margin-bottom: var(--space-4);
}

.footnotes ol {
  padding-left: var(--space-5);
}

.footnotes li {
  margin-bottom: var(--space-3);
  padding-left: var(--space-2);
}

.footnotes li:target {
  background-color: var(--color-primary-highlight);
  padding: var(--space-3);
  border-radius: var(--radius-md);
}

.footnote-backref {
  font-size: 0.875em;
  margin-left: var(--space-2);
  text-decoration: none;
}

/* ============================================
   14. ABBREVIATIONS
   ============================================ */

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
}

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
  font-size: 0.875em;
  color: var(--color-text-light);
  font-style: italic;
}

/* ============================================
   15. MARK/HIGHLIGHT
   ============================================ */

mark {
  background: linear-gradient(
    120deg,
    var(--color-primary-highlight) 0%,
    var(--color-primary-highlight) 100%
  );
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  padding: 0 0.2em;
  color: inherit;
}

/* Text selection */
::selection {
  background-color: var(--color-primary);
  color: var(--color-background);
}

/* ============================================
   16. IFRAME EMBEDS (Responsive)
   ============================================ */

.embed-container {
  position: relative;
  overflow: hidden;
  width: 100%;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
  margin: var(--space-lg) 0;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

/* ============================================
   17. PRINT STYLES
   ============================================ */

@media print {
  .page-content,
  .post-content {
    font-size: 11pt;
    line-height: 1.5;
  }
  
  .page-content h1,
  .post-content h1 { font-size: 18pt; }
  
  .page-content h2,
  .post-content h2 { font-size: 14pt; }
  
  .page-content h3,
  .post-content h3 { font-size: 12pt; }
  
  .page-content a,
  .post-content a {
    color: var(--color-text);
    text-decoration: none;
  }
  
  .page-content a[href]::after,
  .post-content a[href]::after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: var(--color-text-light);
  }
  
  /* ============================================
     18. KRAMDOWN IAL COMPATIBILITY
     ============================================ */
  
  /* Lead paragraph - Kramdown {:.lead} */
  .lead {
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--color-text-light);
    margin-bottom: var(--space-lg);
  }
  
  /* Figcaption - Kramdown {:.figcaption} */
  .figcaption {
    text-align: center;
    font-size: var(--text-sm);
    color: var(--color-text-light);
    margin-top: var(--space-2);
    margin-bottom: var(--space-lg);
    font-style: italic;
  }
  
  .figcaption + .figcaption {
    margin-top: calc(-1 * var(--space-md));
  }
  
  /* Note callouts - Kramdown {:.note} */
  .note {
    background: var(--color-info-bg);
    border-left: 4px solid var(--color-info);
    padding: var(--space-md);
    margin: var(--space-lg) 0;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
  }
  
  .note-title {
    font-weight: var(--font-semibold);
    display: block;
    margin-bottom: var(--space-2);
    color: var(--color-info);
  }
  
  /* Table of Contents - Kramdown {:toc} */
  .toc {
    background: var(--color-surface);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin: var(--space-lg) 0;
    border: 1px solid var(--color-border-subtle);
  }
  
  .toc::before {
    content: 'Contents';
    font-family: var(--font-heading);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
    display: block;
    margin-bottom: var(--space-3);
    padding-bottom: var(--space-2);
    border-bottom: 1px solid var(--color-border-subtle);
  }
  
  .toc ul {
    list-style: none;
    padding-left: var(--space-4);
    margin-bottom: 0;
  }
  
  .toc > ul {
    padding-left: 0;
  }
  
  .toc li {
    margin-bottom: var(--space-2);
  }
  
  .toc a {
    color: var(--color-text);
    text-decoration: none;
  }
  
  .toc a:hover {
    color: var(--color-primary);
  }
  
  /* Page breaks */
  .page-content h1,
  .post-content h1,
  .page-content h2,
  .post-content h2,
  .page-content h3,
  .post-content h3 {
    page-break-after: avoid;
  }
  
  .page-content pre,
  .post-content pre,
  .page-content blockquote,
  .post-content blockquote,
  .page-content table,
  .post-content table {
    page-break-inside: avoid;
  }
}