/* Smart Finance Guide - Custom Styles */
/* Optimized for Core Web Vitals (LCP, CLS, FID) */

:root {
  --blue-700: #1d4ed8;
  --blue-800: #1e40af;
}

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Prevent CLS - reserve space for ads */
.adsense-container {
  min-height: 100px;
  background: #f8fafc;
  border-radius: 8px;
}
.adsense-sidebar {
  min-height: 250px;
  background: #f8fafc;
  border-radius: 8px;
}

/* Prose customization */
.prose h2 { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid #e5e7eb; }
.prose h3 { margin-top: 1.5rem; }
.prose table { font-size: 0.875rem; }
.prose table th { background-color: #f1f5f9; font-weight: 600; }
.prose table td, .prose table th { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; }
.prose blockquote { border-left-color: var(--blue-700); background: #eff6ff; padding: 1rem 1.5rem; border-radius: 0 8px 8px 0; }
.prose code { background: #f1f5f9; padding: 0.125rem 0.375rem; border-radius: 4px; font-size: 0.875em; }
.prose pre { background: #1e293b; border-radius: 12px; }
.prose img { border-radius: 12px; }

/* TOC */
.toc ul { list-style: none; padding-left: 0; }
.toc ul ul { padding-left: 1.25rem; }
.toc li { padding: 0.25rem 0; }
.toc a { color: #4b5563; text-decoration: none; }
.toc a:hover { color: var(--blue-700); }

/* FAQ accordion */
details summary::-webkit-details-marker { display: none; }
details summary { list-style: none; }
details[open] summary { border-bottom: 1px solid #e5e7eb; }

/* Line clamp utility */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Smooth scroll */
html { scroll-behavior: smooth; scroll-padding-top: 5rem; }

/* Print styles */
@media print {
  .adsense-container, .adsense-sidebar, nav, footer, aside { display: none !important; }
  .prose { max-width: 100% !important; }
}

/* Dark mode (optional, respects system preference) */
@media (prefers-color-scheme: dark) {
  /* Add dark mode styles when ready */
}