/* ============================================================
   TK WEB SOLUTIONS — EDITORIAL PUBLICATION SYSTEM
   css/editorial.css
   World-Class Knowledge Publication & Editorial Experience
   High-contrast, elegant editorial styling for article containers.
   ============================================================ */

:root {
  /* Global Design Tokens (Section 8 Standard) */
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-heading: 'Syne', sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  --text-primary: #0f172a;
  --text-secondary: #334155;
  --text-muted: #64748b;

  --bg-primary: #ffffff;
  --bg-secondary: #f4f7fc;
  --bg-dark: #060d1f;

  --surface: #ffffff;
  --surface-alt: #f8fafc;

  --border: #e2e8f0;
  --accent: #1a56ff;
  --accent-secondary: #00e5ff;

  --container-width: 1140px;
  --article-width: 840px;

  --section-gap: 80px;
  --content-gap: 24px;

  /* Semantic Editorial Tokens */
  --article-bg: var(--bg-secondary);
  --article-surface: var(--surface);
  --article-surface-alt: var(--surface-alt);
  --article-text: var(--text-secondary);
  --article-text-muted: var(--text-muted);
  --article-heading: var(--text-primary);
  --article-link: #1d4ed8;
  --article-link-hover: #1e40af;
  --article-border: var(--border);
  --article-accent: var(--accent);
  --article-code-bg: #0f172a;
  --article-code-text: #f8fafc;
  --article-quote-bg: #eff6ff;
  --article-radius: 14px;
}

/* ── Base Reading Page Shell ── */
body {
  background: var(--article-bg) !important;
  color: var(--article-text) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.8 !important;
}

main {
  background: var(--article-bg) !important;
  padding: 24px 16px 60px !important;
}

/* ── Hero Area (Dark Immersive Flagship Header) ── */
.hero {
  background: linear-gradient(135deg, #060d1f 0%, #0f172a 60%, #1e1b4b 100%) !important;
  color: #ffffff !important;
  padding: 80px 20px 48px !important;
  text-align: center !important;
}

.hero h1 {
  color: #ffffff !important;
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(1.9rem, 3.8vw, 2.75rem) !important;
  font-weight: 800 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.025em !important;
  margin-bottom: 16px !important;
}

.hero .editorial-dek {
  font-size: clamp(1.05rem, 2vw, 1.2rem) !important;
  color: #cbd5e1 !important;
  line-height: 1.65 !important;
  margin: 14px auto 20px !important;
  max-width: 780px !important;
  font-weight: 400 !important;
  border-left: 3px solid #3b82f6 !important;
  padding: 12px 18px !important;
  text-align: left !important;
  background: rgba(15, 23, 42, 0.6) !important;
  border-radius: 0 8px 8px 0 !important;
}

.hero-meta {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 14px 20px !important;
  font-size: 0.9rem !important;
  color: #94a3b8 !important;
}

.hero-meta a {
  color: #60a5fa !important;
  text-decoration: none !important;
}

.hero-meta .byline-standards {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  background: rgba(16, 185, 129, 0.15) !important;
  color: #34d399 !important;
  border: 1px solid rgba(16, 185, 129, 0.35) !important;
  padding: 4px 12px !important;
  border-radius: 99px !important;
  font-size: 0.82rem !important;
  font-weight: 600 !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
}
.hero-meta .byline-standards a {
  color: #34d399 !important;
  text-decoration: none !important;
}
.hero-meta .byline-standards:hover {
  background: rgba(16, 185, 129, 0.25) !important;
  border-color: #34d399 !important;
}

/* ── The White Paper Editorial Container ── */
.container {
  background: var(--article-surface) !important;
  border: 1px solid var(--article-border) !important;
  border-radius: var(--article-radius) !important;
  box-shadow: 0 4px 24px rgba(15, 23, 42, 0.04) !important;
  max-width: 860px !important;
  margin: 0 auto 50px !important;
  padding: 40px 48px 60px !important;
  color: var(--article-text) !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
  line-height: 1.8 !important;
  font-size: 1.05rem !important;
  word-wrap: break-word !important;
}

@media (max-width: 768px) {
  main {
    padding: 12px 10px 40px !important;
  }
  .container {
    padding: 24px 18px 40px !important;
    border-radius: 10px !important;
    margin-bottom: 30px !important;
  }
}

/* ── Section Headings Hierarchy ── */
.container h2,
article h2 {
  font-family: 'Syne', sans-serif !important;
  font-size: clamp(1.4rem, 2.5vw, 1.85rem) !important;
  font-weight: 700 !important;
  color: var(--article-heading) !important;
  line-height: 1.35 !important;
  margin: 44px 0 18px !important;
  padding-bottom: 10px !important;
  border-bottom: 2px solid #f1f5f9 !important;
}

.container h3,
article h3 {
  font-family: 'Syne', sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: var(--article-heading) !important;
  line-height: 1.4 !important;
  margin: 28px 0 12px !important;
}

/* ── Body Paragraphs ── */
.container p,
article p {
  color: var(--article-text) !important;
  font-size: 1.05rem !important;
  line-height: 1.82 !important;
  margin-bottom: 20px !important;
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

/* ── Controlled Editorial Images (No Viewport Dominance) ── */
article img,
.container img {
  max-width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: cover !important;
  border-radius: 12px !important;
  border: 1px solid var(--article-border) !important;
  box-shadow: 0 4px 16px rgba(15, 23, 42, 0.05) !important;
  margin: 24px auto !important;
  display: block !important;
}

/* Exclude tiny logos and author avatars from max-height */
.author-box img,
.hero-author img,
.footer-brand-logo img,
.navbar img {
  max-height: none !important;
  border: none !important;
  box-shadow: none !important;
  margin: 0 !important;
  display: inline-block !important;
}

/* ── Key Takeaways Card (Subtle Blue / Dark Slate Text) ── */
.key-takeaways-card {
  background: linear-gradient(135deg, #f0f7ff 0%, #f8fafc 100%) !important;
  border: 1px solid #bfdbfe !important;
  border-left: 5px solid #2563eb !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin: 28px 0 34px !important;
  box-shadow: 0 4px 16px rgba(37, 99, 235, 0.06) !important;
}
.key-takeaways-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-family: 'Syne', sans-serif !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #1e3a8a !important;
  margin-bottom: 14px !important;
}
.key-takeaways-header span.icon {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 28px !important;
  height: 28px !important;
  background: #dbeafe !important;
  border-radius: 6px !important;
  color: #2563eb !important;
  font-size: 0.95rem !important;
}
.key-takeaways-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  gap: 10px !important;
}
.key-takeaways-list li {
  position: relative !important;
  padding-left: 24px !important;
  color: #0f172a !important;
  font-size: 0.98rem !important;
  line-height: 1.6 !important;
  font-weight: 600 !important;
}
.key-takeaways-list li::before {
  content: "✦" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  color: #2563eb !important;
  font-size: 0.9rem !important;
}

/* ── Table of Contents ("On this page") ── */
.editorial-toc {
  background: #f8fafc !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  padding: 20px 24px !important;
  margin: 28px 0 34px !important;
}
.editorial-toc-title {
  font-family: 'Syne', sans-serif !important;
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.editorial-toc-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 8px 16px !important;
}
.editorial-toc-list li a {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #1e293b !important;
  text-decoration: none !important;
  font-size: 0.92rem !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-weight: 600 !important;
  transition: all 0.2s ease !important;
}
.editorial-toc-list li a:hover {
  color: #1d4ed8 !important;
  background: #eff6ff !important;
  padding-left: 14px !important;
}
.editorial-toc-list li a span.num {
  color: #64748b !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  font-family: monospace !important;
}

/* ── Grounded Real-World Example Box ── */
.grounded-example-card {
  background: #f8fafc !important;
  border: 1px solid #cbd5e1 !important;
  border-left: 5px solid #0284c7 !important;
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04) !important;
}
.example-badge {
  display: inline-block !important;
  font-size: 0.76rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 3px 10px !important;
  border-radius: 4px !important;
  background: #e0f2fe !important;
  color: #0369a1 !important;
  margin-bottom: 10px !important;
}
.grounded-example-card h4 {
  font-family: 'Syne', sans-serif !important;
  color: #0f172a !important;
  font-size: 1.15rem !important;
  margin-bottom: 10px !important;
}
.grounded-example-card p {
  color: #1e293b !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
  margin-bottom: 0 !important;
}

/* ── Editorial Callouts (Mistakes, Trade-offs, Best Practices) ── */
.editorial-callout {
  border-radius: 12px !important;
  padding: 24px 28px !important;
  margin: 32px 0 !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.03) !important;
}
.editorial-callout h3 {
  margin-top: 0 !important;
  margin-bottom: 14px !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 1.15rem !important;
  font-family: 'Syne', sans-serif !important;
}
.editorial-callout ul {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 !important;
}
.editorial-callout ul li {
  position: relative !important;
  padding-left: 24px !important;
  margin-bottom: 10px !important;
  color: #1e293b !important;
  font-size: 0.96rem !important;
  line-height: 1.65 !important;
  font-weight: 500 !important;
}

/* Mistakes Callout */
.callout-mistakes {
  background: #fff5f5 !important;
  border: 1px solid #fecaca !important;
  border-left: 5px solid #ef4444 !important;
}
.callout-mistakes h3 { color: #991b1b !important; }
.callout-mistakes ul li::before {
  content: "✕" !important;
  position: absolute !important;
  left: 0 !important;
  color: #dc2626 !important;
  font-weight: 700 !important;
}

/* Trade-offs & Limitations Callout */
.callout-tradeoffs {
  background: #fffbeb !important;
  border: 1px solid #fde68a !important;
  border-left: 5px solid #d97706 !important;
}
.callout-tradeoffs h3 { color: #92400e !important; }
.callout-tradeoffs ul li::before {
  content: "⚖" !important;
  position: absolute !important;
  left: 0 !important;
  color: #d97706 !important;
}

/* Best Practices Callout */
.callout-best-practices {
  background: #f0fdf4 !important;
  border: 1px solid #bbf7d0 !important;
  border-left: 5px solid #16a34a !important;
}
.callout-best-practices h3 { color: #166534 !important; }
.callout-best-practices ul li::before {
  content: "✓" !important;
  position: absolute !important;
  left: 0 !important;
  color: #16a34a !important;
  font-weight: 700 !important;
}

/* ── Code Blocks ── */
pre, code {
  font-family: 'Consolas', 'Fira Code', monospace !important;
}
pre {
  background: var(--article-code-bg) !important;
  color: var(--article-code-text) !important;
  padding: 18px 22px !important;
  border-radius: 10px !important;
  overflow-x: auto !important;
  font-size: 0.92rem !important;
  line-height: 1.6 !important;
  margin: 24px 0 !important;
}
code {
  background: #f1f5f9;
  color: #0f172a;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.88em;
}
pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
}

/* ── Tables Responsive Wrapper ── */
.editorial-table-wrap {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  margin: 32px 0 !important;
  border-radius: 8px !important;
}

/* ── FAQ Section Styling ── */
.faq-item {
  background: #f8fafc !important;
  border: 1px solid var(--article-border) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  margin-bottom: 12px !important;
}
.faq-q {
  color: var(--article-heading) !important;
  font-weight: 700 !important;
}
.faq-a {
  color: var(--article-text) !important;
  font-size: 0.98rem !important;
  line-height: 1.7 !important;
}

/* ── Footer Social Icons (Self-Contained & Always Visible) ── */
.footer-socials {
  display: flex !important;
  gap: 12px !important;
  margin-top: 16px !important;
  flex-wrap: wrap !important;
}
.footer-soc {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  color: #ffffff !important;
  text-decoration: none !important;
  transition: all 0.22s ease !important;
}
.footer-soc:hover {
  background: #1a56ff !important;
  border-color: #3b82f6 !important;
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 12px rgba(26, 86, 255, 0.4) !important;
}
.footer-soc svg {
  width: 18px !important;
  height: 18px !important;
  fill: currentColor !important;
  display: block !important;
}
.footer-soc i {
  font-size: 1.1rem !important;
  color: #ffffff !important;
}

/* ── Responsive Overrides ── */
@media (max-width: 768px) {
  .editorial-toc-list {
    grid-template-columns: 1fr !important;
  }
  .key-takeaways-card,
  .grounded-example-card,
  .editorial-callout {
    padding: 18px 20px !important;
  }
  .hero .editorial-dek {
    font-size: 1rem !important;
    padding: 10px 14px !important;
  }
}