/* Optimized Typography - Modern Best Practices */

/* Global Text Base */
html {
  font-size: 16px !important; /* 1rem = 16px baseline */
}

body {
  font-size: 1rem !important; /* 16px - universal standard */
  line-height: 1.6 !important; /* Optimal reading line height */
}

/* Article Content Typography */
@media (min-width: 1024px) {
  /* Desktop - Slightly larger for better readability on large screens */
  article.prose {
    font-size: 1rem !important; /* 16px - standard body text */
    line-height: 1.65 !important; /* Optimal for longer reading */
  }
}

@media (max-width: 1023px) {
  /* Mobile - Maintain readability on smaller screens */
  article.prose {
    font-size: 1rem !important; /* 16px - consistent across devices */
    line-height: 1.6 !important; /* Slightly tighter for mobile */
  }
}

/* Heading Hierarchy - Modern Proportional Scale */
article.prose h1 {
  font-size: 2rem !important; /* 32px - Reduced from 40px */
  line-height: 1.2 !important;
  margin-bottom: 1rem !important;
  margin-top: 0 !important;
}

article.prose h2 {
  font-size: 1.625rem !important; /* 26px - Reduced from 32px */
  line-height: 1.3 !important;
  margin-top: 2rem !important;
  margin-bottom: 0.75rem !important;
}

article.prose h3 {
  font-size: 1.375rem !important; /* 22px - Reduced from 24px */
  line-height: 1.4 !important;
  margin-top: 1.75rem !important;
  margin-bottom: 0.5rem !important;
}

article.prose h4 {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.45 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
}

article.prose h5 {
  font-size: 1rem !important; /* 16px - same as body */
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: 1.25rem !important;
  margin-bottom: 0.25rem !important;
}

article.prose h6 {
  font-size: 0.875rem !important; /* 14px */
  font-weight: 600 !important;
  line-height: 1.5 !important;
  margin-top: 1rem !important;
  margin-bottom: 0.25rem !important;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Mobile Heading Adjustments */
@media (max-width: 768px) {
  article.prose h1 {
    font-size: 1.75rem !important; /* 28px on mobile */
    line-height: 1.25 !important;
  }
  
  article.prose h2 {
    font-size: 1.5rem !important; /* 24px on mobile */
  }
  
  article.prose h3 {
    font-size: 1.25rem !important; /* 20px on mobile */
  }
}

/* Paragraph and Text Elements */
article.prose p {
  margin-bottom: 1.25rem !important; /* Reduced from 1.5rem */
  font-size: inherit !important;
  line-height: inherit !important;
}

article.prose .lead {
  font-size: 1.125rem !important; /* 18px for intro paragraphs */
  line-height: 1.6 !important;
  margin-bottom: 1.5rem !important;
  color: rgba(var(--bc), 0.8) !important;
}

/* List Typography */
article.prose ul,
article.prose ol {
  margin-bottom: 1.25rem !important;
  padding-left: 1.5rem !important;
}

article.prose li {
  margin-bottom: 0.5rem !important;
  line-height: 1.6 !important;
}

/* Code and Pre Blocks */
article.prose code {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.4 !important;
}

article.prose pre {
  font-size: 0.875rem !important; /* 14px */
  line-height: 1.5 !important;
  padding: 1.25rem !important;
  margin: 1.5rem 0 !important;
}

/* Blockquotes */
article.prose blockquote {
  font-size: 1.05rem !important; /* 16.8px - slightly larger than body */
  line-height: 1.7 !important;
  margin: 1.5rem 0 !important;
  padding-left: 1.5rem !important;
}

/* Table Typography */
article.prose table {
  font-size: 0.9375rem !important; /* 15px - slightly smaller for tables */
  line-height: 1.5 !important;
}

article.prose th {
  font-size: 0.875rem !important; /* 14px for headers */
  font-weight: 600 !important;
}

/* Homepage Typography */
.hero-content h1 {
  font-size: 2.25rem !important; /* 36px for hero */
  line-height: 1.2 !important;
}

@media (max-width: 768px) {
  .hero-content h1 {
    font-size: 1.875rem !important; /* 30px on mobile */
  }
}

.hero-content p {
  font-size: 1.125rem !important; /* 18px for hero description */
  line-height: 1.6 !important;
}

@media (max-width: 768px) {
  .hero-content p {
    font-size: 1rem !important; /* 16px on mobile */
  }
}

/* Category and Archive Pages */
.category-articles h2,
.archive-articles h2 {
  font-size: 1.375rem !important; /* 22px - Reduced from larger */
  line-height: 1.3 !important;
}

@media (max-width: 768px) {
  .category-articles h2,
  .archive-articles h2 {
    font-size: 1.25rem !important; /* 20px on mobile */
  }
}

/* Navigation and UI Elements */
nav {
  font-size: 0.9375rem !important; /* 15px */
}

.btn {
  font-size: 0.9375rem !important; /* 15px for buttons */
  line-height: 1.4 !important;
}

/* TOC Typography */
.toc-nav {
  font-size: 0.8125rem !important; /* 13px - Reduced from 14px */
  line-height: 1.5 !important;
}

.toc-nav h3 {
  font-size: 0.875rem !important; /* 14px for TOC heading */
}

/* Form Elements */
input, textarea, select {
  font-size: 1rem !important; /* 16px to prevent zoom on iOS */
  line-height: 1.5 !important;
}

/* Print Styles */
@media print {
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
  }
  
  article.prose h1 { font-size: 18pt !important; }
  article.prose h2 { font-size: 16pt !important; }
  article.prose h3 { font-size: 14pt !important; }
  article.prose h4 { font-size: 13pt !important; }
  article.prose h5 { font-size: 12pt !important; }
  article.prose h6 { font-size: 11pt !important; }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
  body, article.prose {
    font-weight: 500 !important;
  }
  
  article.prose h1, 
  article.prose h2, 
  article.prose h3 {
    font-weight: 700 !important;
  }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    font-synthesis: none !important;
  }
}