/* =============================================
   Content Factory — Default Theme
   Dark mode, animations, print styles
   ============================================= */

/* --- Dark Mode via CSS variables --- */
:root {
  --cf-bg: #ffffff;
  --cf-text: #111827;
  --cf-text-muted: #6b7280;
  --cf-border: #e5e7eb;
  --cf-card: #ffffff;
  --cf-accent: #2563eb;
  --cf-accent-hover: #1d4ed8;
  --cf-nav-bg: rgba(255, 255, 255, 0.8);
}

.dark {
  --cf-bg: #030712;
  --cf-text: #f3f4f6;
  --cf-text-muted: #9ca3af;
  --cf-border: #1f2937;
  --cf-card: #111827;
  --cf-accent: #3b82f6;
  --cf-accent-hover: #60a5fa;
  --cf-nav-bg: rgba(3, 7, 18, 0.8);
}

/* --- Typography scale --- */
.prose {
  font-size: 1rem;
  line-height: 1.75;
}

.prose h2 {
  font-size: 1.5rem;
  font-weight: 700;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  line-height: 1.3;
}

.prose h3 {
  font-size: 1.25rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
  line-height: 1.4;
}

.prose p {
  margin-bottom: 1rem;
}

.prose a {
  color: var(--cf-accent);
  text-decoration: underline;
}

.prose a:hover {
  color: var(--cf-accent-hover);
}

.prose img {
  border-radius: 0.75rem;
  max-width: 100%;
  height: auto;
}

.prose blockquote {
  border-left: 4px solid var(--cf-accent);
  padding-left: 1rem;
  margin: 1.5rem 0;
  color: var(--cf-text-muted);
  font-style: italic;
}

.prose pre {
  background: #1e293b;
  color: #e2e8f0;
  padding: 1rem;
  border-radius: 0.5rem;
  overflow-x: auto;
  font-size: 0.875rem;
}

.prose code {
  background: rgba(0, 0, 0, 0.05);
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
  font-size: 0.875em;
}

.dark .prose code {
  background: rgba(255, 255, 255, 0.08);
}

.prose pre code {
  background: transparent;
  padding: 0;
}

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

/* --- Smooth transitions --- */
* {
  transition: background-color 0.2s ease, border-color 0.2s ease;
}

a, button {
  transition: color 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
}

/* --- Gradient animation for hero --- */
@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fadeInDelay {
  0% { opacity: 0; transform: translateY(16px); }
  50% { opacity: 0; transform: translateY(16px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-in {
  animation: fadeIn 0.6s ease-out forwards;
}

.animate-fade-in-delay {
  animation: fadeInDelay 0.9s ease-out forwards;
}

/* --- Selection colors --- */
::selection {
  background: rgba(37, 99, 235, 0.2);
  color: inherit;
}

.dark ::selection {
  background: rgba(59, 130, 246, 0.3);
}

/* --- Dark mode image dimming --- */
.dark img:not([src*=".svg"]) {
  filter: brightness(0.95);
}

.dark img:hover {
  filter: brightness(1);
}

/* --- Print styles --- */
@media print {
  header, footer, nav, .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
    color: #000 !important;
    font-size: 12pt;
    line-height: 1.6;
  }

  .dark body,
  .dark * {
    background: #fff !important;
    color: #000 !important;
  }

  main {
    margin: 0 !important;
    padding: 0 !important;
  }

  article {
    max-width: 100% !important;
    padding: 0 !important;
  }

  h1 { font-size: 20pt; }
  h2 { font-size: 16pt; }
  h3 { font-size: 14pt; }

  a { text-decoration: underline; color: #000; }

  a[href^="http"]::after {
    content: " (" attr(href) ")";
    font-size: 0.8em;
    color: #666;
  }

  img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  p, h2, h3 {
    orphans: 3;
    widows: 3;
  }

  @page {
    margin: 2cm;
  }
}