/**
 * Deferred CSS - Below the Fold
 * Loaded asynchronously to avoid render-blocking
 * ~3KB minified
 */

/* ================================
   Code Blocks
   ================================ */

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-code-bg);
  color: var(--color-code-text);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

pre {
  background: var(--color-code-bg);
  padding: var(--space-md);
  border-radius: 8px;
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border: 1px solid var(--color-border);
}

pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* ================================
   Blockquotes
   ================================ */

blockquote {
  border-left: 4px solid var(--color-accent);
  padding-left: var(--space-md);
  margin: var(--space-lg) 0;
  font-style: italic;
  color: var(--color-meta);
}

blockquote p {
  margin-bottom: var(--space-sm);
}

/* ================================
   Images & Figures
   ================================ */

img {
  max-width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
}

figure {
  margin: var(--space-lg) 0;
}

figcaption {
  text-align: center;
  font-size: var(--font-size-sm);
  font-style: italic;
  color: var(--color-meta);
  margin-top: var(--space-xs);
}

/* ================================
   Tables
   ================================ */

table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--space-lg) 0;
  font-size: var(--font-size-sm);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  overflow: hidden;
}

thead {
  background: var(--color-code-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

th {
  font-weight: 600;
  text-align: left;
  padding: var(--space-sm);
  border-bottom: 2px solid var(--color-border);
  color: var(--color-heading);
}

td {
  padding: var(--space-sm);
  border-bottom: 1px solid var(--color-border);
}

tbody tr:hover {
  background: var(--color-card-hover-bg);
}

tbody tr:nth-child(even) {
  background: var(--color-code-bg);
}

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

/* ================================
   Horizontal Rule
   ================================ */

hr {
  border: none;
  border-top: 1px solid var(--color-border);
  margin: var(--space-2xl) 0;
}

/* ================================
   Selection
   ================================ */

::selection {
  background: var(--color-accent-light);
  color: var(--color-heading);
}

/* ================================
   Reduced Motion
   ================================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ================================
   Print Styles
   ================================ */

@media print {
  @page {
    margin: 2cm;
  }

  body {
    background: white;
    color: black;
    font-size: 12pt;
    line-height: 1.5;
  }

  /* Hide non-essential elements */
  .site-header,
  .site-footer,
  .sidebar,
  .breadcrumbs,
  .theme-toggle,
  .ad-zone {
    display: none !important;
  }

  /* Show URLs for links */
  a[href^='http']:after {
    content: ' (' attr(href) ')';
    font-size: 0.8em;
    color: #666;
  }

  a[rel*='sponsored']:after {
    content: ' [Affiliate: ' attr(href) ']';
  }

  /* Prevent page breaks */
  h1, h2, h3, h4 {
    page-break-after: avoid;
  }

  pre, table, img, figure, .summary-box {
    page-break-inside: avoid;
  }

  img {
    max-width: 100% !important;
  }

  .summary-box {
    border: 2px solid #000;
  }

  .affiliate-disclosure {
    border: 1px solid #000;
    background: #f5f5f5;
  }
}

/* ================================
   Article Content Specifics
   ================================ */

.article-content h2 {
  margin-top: var(--space-2xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-border);
}

.article-content h2:first-child {
  border-top: none;
  padding-top: 0;
  margin-top: 0;
}

.article-content h3 {
  margin-top: var(--space-xl);
}

/* Heading anchors */
.article-content .heading-anchor {
  color: var(--color-border);
  font-weight: normal;
  margin-left: var(--space-xs);
  text-decoration: none;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.article-content h2:hover .heading-anchor,
.article-content h3:hover .heading-anchor,
.article-content h4:hover .heading-anchor {
  opacity: 1;
}

.article-content .heading-anchor:hover {
  color: var(--color-accent);
}

/* ================================
   Related Articles
   ================================ */

.related-articles {
  margin-top: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--color-code-bg);
  border-radius: 12px;
  border: 1px solid var(--color-border);
}

.related-articles h2 {
  margin-top: 0;
  font-size: var(--font-size-xl);
  border: none;
  padding: 0;
}

.related-articles ul {
  margin: var(--space-sm) 0 0;
}

.related-articles a {
  font-weight: 500;
}

/* ================================
   Article Footer
   ================================ */

.article-footer {
  margin-top: var(--space-2xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-sm);
}

.article-footer p {
  margin: var(--space-xs) 0;
}

.article-footer a {
  font-weight: 500;
}