/**
 * Modern Typography and Styling Overrides
 * Optimized for 2024-2025 web standards
 * Focus: Readability, Chinese typography, Mobile-first
 */

/* ========================================
   1. Base Typography & Fonts
======================================== */

/* Set modern system font stack */
html, body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", "Noto Sans SC", sans-serif;
  font-size: 16px; /* Desktop base */
  line-height: 1.7; /* Optimized for Chinese reading */
  letter-spacing: 0.2px; /* Slight letter spacing for readability */
}

/* Mobile devices get larger base font */
@media (max-width: 767px) {
  html, body {
    font-size: 18px; /* Larger for mobile/touch */
    line-height: 1.7;
  }
}

/* Tablet gets medium font */
@media (min-width: 768px) and (max-width: 1023px) {
  html, body {
    font-size: 17px;
    line-height: 1.7;
  }
}

/* Improve paragraph spacing */
p {
  margin-bottom: 1.5em !important; /* Increased from 1.25em */
  line-height: 1.7;
}

/* ========================================
   2. Heading Hierarchy
======================================== */

/* H1 - Main title */
h1 {
  font-size: 2.75em !important; /* Increased from 2.125em/2.75em */
  line-height: 1.3 !important;
  font-weight: 700 !important; /* Bolder */
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* H2 - Section header */
h2 {
  font-size: 2.25em !important; /* Increased from 1.6875em/2.3125em */
  line-height: 1.3 !important;
  font-weight: 600 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* H3 - Subsection header */
h3, #toctitle, .sidebarblock > .content > .title {
  font-size: 1.75em !important; /* Increased from 1.375em/1.6875em */
  line-height: 1.35 !important;
  font-weight: 600 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* H4 - Minor heading */
h4 {
  font-size: 1.5em !important; /* Increased from 1.125em/1.4375em */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* H5 - Minor heading */
h5 {
  font-size: 1.25em !important; /* Increased from 1.125em */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* H6 - Minor heading */
h6 {
  font-size: 1.125em !important; /* Keep at 1em but be consistent */
  line-height: 1.4 !important;
  font-weight: 600 !important;
  margin-top: 0.8em !important;
  margin-bottom: 0.5em !important;
}

/* ========================================
   3. Code Blocks (Pre/Code)
======================================== */

/* Code blocks - modernized styling */
.literalblock > content pre,
.listingblock > content pre {
  padding: 24px !important; /* Increased from 0.8em (~12.8px) */
  border-radius: 8px !important; /* Increased from 6px */
  border: 1px solid rgba(21, 35, 71, 0.15) !important; /* Softer border */
  background: #f8f9fa !important; /* Slightly lighter background */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important; /* Subtle shadow */
  font-size: 0.95em !important; /* Increased for readability */
  line-height: 1.6 !important;
  overflow-x: auto !important; /* Better horizontal scroll */
}

/* Mobile code blocks */
@media (max-width: 767px) {
  .literalblock > content pre,
  .listingblock > content pre {
    padding: 20px !important;
    font-size: 0.9em !important;
    border-radius: 6px !important;
  }
}

/* Inline code - modernized */
*:not(pre) > code {
  background-color: #f5f5f5 !important; /* Softer background */
  color: #333333 !important; /* Darker for better contrast */
  padding: 0.3em 0.5em !important; /* Increased from 0.2em 0.4em */
  border-radius: 4px !important; /* Increased from 0 */
  border: 1px solid #e0e0e0 !important;
  font-size: 0.9em !important; /* Slightly larger */
  font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace !important;
}

/* Mobile inline code */
@media (max-width: 767px) {
  *:not(pre) > code {
    font-size: 0.85em !important;
    padding: 0.25em 0.45em !important;
  }
}

/* ========================================
   4. Lists
======================================== */

ul, ol, dl {
  line-height: 1.7 !important; /* Increased from 1.6 */
  margin-bottom: 1.5em !important; /* Increased from 1.25em */
}

ul li ul, ul li ol {
  margin-bottom: 0 !important; /* Keep nested lists compact */
  font-size: 1em !important;
}

/* ========================================
   5. Links
======================================== */

a {
  line-height: inherit; /* Inherit from parent */
  text-decoration: none; /* Keep clean, modern look */
}

a:hover, a:focus {
  text-decoration: underline; /* Underline on hover for clarity */
}

/* ========================================
   6. Tables
======================================== */

table {
  line-height: 1.6 !important; /* Increased from default */
}

table tr th, table tr td {
  padding: 0.625em 0.625em !important; /* Slightly more padding */
  line-height: 1.6 !important;
}

/* ========================================
   7. Blockquotes
======================================== */

blockquote {
  margin: 0 0 1.5em 0 !important; /* Increased bottom margin */
  padding: 1em 1.25em 1em 1.25em !important; /* More balanced padding */
  line-height: 1.7 !important; /* Match paragraph line-height */
}

blockquote, blockquote p {
  color: #555555 !important; /* Softer color */
}

/* ========================================
   8. Navigation & Menu
======================================== */

/* Ensure navbar has good touch targets */
.navbar-nav .nav-link {
  padding: 0.5rem 1rem !important;
  min-height: 44px !important; /* Touch-friendly */
  display: flex !important;
  align-items: center !important;
}

/* ========================================
   9. Footer
======================================== */

#footer {
  padding: 1.5em 1.25em !important; /* More comfortable padding */
}

#footer-text {
  line-height: 1.6 !important; /* Increased from 1.44 */
}

/* ========================================
   10. Content Wrapper
======================================== */

#content {
  margin-bottom: 2.5em !important; /* Keep existing */
}

/* ========================================
   11. Responsive Adjustments
======================================== */

/* Extra small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {
  html, body {
    font-size: 18px !important;
  }

  h1 { font-size: 2.25em !important; }
  h2 { font-size: 1.875em !important; }
  h3 { font-size: 1.5em !important; }
  h4 { font-size: 1.25em !important; }
  h5 { font-size: 1.125em !important; }
  h6 { font-size: 1em !important; }

  .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
  }
}

/* ========================================
   12. Print Styles
======================================== */

@media print {
  html, body {
    font-size: 12pt !important;
    line-height: 1.5 !important;
  }

  h1 { font-size: 24pt !important; }
  h2 { font-size: 20pt !important; }
  h3 { font-size: 16pt !important; }
  h4 { font-size: 14pt !important; }

  .literalblock > content pre,
  .listingblock > content pre {
    font-size: 10pt !important;
    padding: 12px !important;
  }
}