/* ═══════════════════════════════════════════════════════════════════════════
   ARTICLE PAGE STYLES - PyStatR+
   File: scss/pages/article.css
   
   This file owns ALL blog article/post page styling including:
   - Article top margin with navbar compensation
   - Citation panel visibility
   - Cell output styling
   - Dark card utility
   - Inline code visibility
   - Data tables (light background fix)
   - Footer logo (site-wide, not per-post)
   
   NO other file should override these styles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* =========================================================
   ARTICLE TOP MARGIN - ROBUST Navbar Compensation
   
   Problem: Fixed navbar (60-70px height) covers article content
   Solution: Apply generous padding/margin to ALL possible 
   article container selectors
   ========================================================= */

/* ---- PRIMARY FIX: Target the main content wrapper ---- */
#quarto-content.page-layout-article.page-navbar {
  padding-top: 95px !important;
}

/* ---- SECONDARY FIX: Target article content directly ---- */
#quarto-document-content {
  padding-top: 1.5rem !important;
}

/* ---- TERTIARY FIX: Target title block header ---- */
.quarto-title-block,
#title-block-header,
header#title-block-header {
  padding-top: 1rem !important;
  margin-top: 0 !important;
}

/* ---- QUATERNARY FIX: First child elements ---- */
#quarto-content.page-layout-article main > *:first-child,
#quarto-content.page-layout-article article > *:first-child,
#quarto-document-content > *:first-child,
#quarto-document-content > section:first-child,
#quarto-document-content > p:first-child,
#quarto-document-content > h1:first-child,
#quarto-document-content > h2:first-child {
  margin-top: 0 !important;
}

/* ---- FALLBACK: Body-level article selector ---- */
body.quarto-document-content,
body[class*="page-layout-article"] #quarto-content {
  padding-top: 120px !important;
}

/* ---- Ensure sidebar TOC also has proper spacing ---- */
#quarto-margin-sidebar,
.quarto-margin-sidebar,
#TOC {
  padding-top: 95px !important;
  top: 0 !important;
}

/* =========================================================
   TABLET BREAKPOINT (≤992px)
   ========================================================= */
@media (max-width: 992px) {
  #quarto-content.page-layout-article.page-navbar {
    padding-top: 85px !important;
  }
  
  #quarto-margin-sidebar,
  .quarto-margin-sidebar,
  #TOC {
    padding-top: 85px !important;
  }
}

/* =========================================================
   MOBILE BREAKPOINT (≤767px)
   ========================================================= */
@media (max-width: 767px) {
  #quarto-content.page-layout-article.page-navbar {
    padding-top: 120px !important;
  }
  
  #quarto-document-content {
    padding-top: 1rem !important;
  }
  
  /* TOC usually collapses on mobile */
  #quarto-margin-sidebar,
  .quarto-margin-sidebar,
  #TOC {
    padding-top: 0 !important;
  }
}

/* =========================================================
   SMALL MOBILE BREAKPOINT (≤480px)
   ========================================================= */
@media (max-width: 480px) {
  #quarto-content.page-layout-article.page-navbar {
    padding-top: 115px !important;
  }
}

/* =========================================================
   ANCHOR LINK SCROLL OFFSET
   Prevents headings from hiding under navbar when clicking TOC links
   ========================================================= */
#quarto-document-content h1,
#quarto-document-content h2,
#quarto-document-content h3,
#quarto-document-content h4,
#quarto-document-content h5,
#quarto-document-content h6 {
  scroll-margin-top: 100px;
}

/* =========================================================
   3) FUTURE-PROOF DARK CARD UTILITY CLASS
   ========================================================= */

.dark-card {
  background: #0B1120;
  color: #E5E7EB;
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 18px;
}

.dark-card a { color: #38BDF8; }
.dark-card a:hover { color: #FACC15; }

.dark-card .text-muted,
.dark-card small {
  color: rgba(229,231,235,0.82) !important;
}

/* =========================================================
   2) CITATION PANEL VISIBILITY FIX
   ========================================================= */

/* Quarto citation appendix - fix text visibility on dark backgrounds */
#quarto-appendix.default .quarto-appendix-heading,
#quarto-appendix.default .quarto-appendix-contents,
#quarto-appendix.default p,
#quarto-appendix.default span,
.quarto-appendix-citeas,
.quarto-appendix-bibtex,
#quarto-citation,
#quarto-citation * {
  color: #E5E7EB !important; /* light gray text */
}

/* Citation section headings */
#quarto-appendix.default .quarto-appendix-heading {
  color: #F3F4F6 !important;
  font-weight: 600;
}

/* "BibTeX citation:" and "For attribution..." labels */
#quarto-appendix.default .quarto-appendix-secondary-label,
.quarto-appendix-bibtex summary,
.quarto-appendix-citeas::before {
  color: rgba(229,231,235,0.85) !important;
}

/* If your citation block has a wrapper class, target it.
   Replace .citation-block with your actual wrapper if different. */

.citation-block,
.citation-block * {
  color: #E5E7EB;
}

.citation-block .text-muted,
.citation-block .secondary,
.citation-block small {
  color: rgba(229,231,235,0.82) !important; /* readable muted */
}

/* Links on dark */
.citation-block a {
  color: #38BDF8 !important; /* cyan */
  text-decoration: underline;
}
.citation-block a:hover {
  color: #FACC15 !important; /* yellow */
}

/* =========================================================
   1) ARTICLE CODE BLOCK BACKGROUND OVERRIDE
   Overrides the SCSS theme's #0B1120 with a lighter metallic navy
   that improves readability and creates visual hierarchy.
   ========================================================= */
article pre,
.quarto-post-content pre,
#quarto-document-content pre {
  background: linear-gradient(135deg, #1a2332 0%, #222e42 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.12) !important;
}

/* =========================================================
   2) QUARTO CELL OUTPUT STYLING (dark output cards)
   ========================================================= */

/* Base output text: light gray on dark — readable contrast */
.cell-output,
.cell-output pre,
.cell-output code,
.cell-output-stdout pre,
.cell-output-stderr pre {
  color: #E5E7EB !important;
  font-family: 'JetBrains Mono', 'Fira Code', monospace;
}

/* Standard output: metallic navy with cyan left accent */
.cell-output pre,
.cell-output-stdout pre {
  background: linear-gradient(135deg, #1a2332 0%, #222e42 100%) !important;
  border: 1px solid rgba(56, 189, 248, 0.12) !important;
  border-left: 3px solid rgba(56, 189, 248, 0.4) !important;
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Error / stderr output: red-tinted accent */
.cell-output-stderr pre {
  background: linear-gradient(135deg, #1a2332 0%, #261e2e 100%) !important;
  border: 1px solid rgba(248, 113, 113, 0.18) !important;
  border-left: 3px solid rgba(248, 113, 113, 0.45) !important;
  border-radius: 12px;
  padding: 14px 16px;
  overflow-x: auto;
  font-size: 0.875rem;
  line-height: 1.6;
}

.cell-output-stderr pre,
.cell-output-stderr code {
  color: #fca5a5 !important;
}

/* ASCII tables: preserve whitespace for alignment */
.cell-output pre {
  white-space: pre;
}

/* HTML tables (pandas/polars) */
.cell-output table {
  color: #E5E7EB !important;
  background: transparent !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.cell-output table th {
  color: #F3F4F6 !important;
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
}

.cell-output table td {
  color: #E5E7EB !important;
  background: rgba(255,255,255,0.02) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* Scrollbar polish */
.cell-output pre::-webkit-scrollbar {
  height: 10px;
}
.cell-output pre::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18);
  border-radius: 999px;
}

/* =========================================================
   4) INLINE CODE VISIBILITY FIX (ALL CONTEXTS)
   ========================================================= */

/* 
 * COMPREHENSIVE FIX: Target ALL inline code on light backgrounds
 * This applies to: body text, tables, callouts, and any future content
 * Excludes: code inside <pre> blocks (syntax-highlighted code blocks)
 */

/* Base fix for all inline code outside of pre blocks */
body code:not(pre code),
article code:not(pre code),
main code:not(pre code),
.content code:not(pre code),
#quarto-content code:not(pre code),
#quarto-document-content code:not(pre code) {
  background: rgba(6, 182, 212, 0.15) !important; /* light teal background */
  color: #0e7490 !important; /* dark teal text */
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
}

/* Markdown tables - inline code in table cells */
table code:not(pre code),
.table code:not(pre code),
table td code,
table th code {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #0e7490 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
}

/* Callout boxes - all types */
.callout code:not(pre code),
.callout-tip code:not(pre code),
.callout-note code:not(pre code),
.callout-important code:not(pre code),
.callout-warning code:not(pre code),
.callout-caution code:not(pre code) {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #0e7490 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
}

/* Paragraphs and general text content */
p code:not(pre code),
li code:not(pre code),
span code:not(pre code),
div:not(.sourceCode) > code,
.quarto-appendix code:not(pre code) {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #0e7490 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-size: 0.9em !important;
  font-weight: 500 !important;
}

/* Headers with inline code */
h1 code:not(pre code),
h2 code:not(pre code),
h3 code:not(pre code),
h4 code:not(pre code),
h5 code:not(pre code),
h6 code:not(pre code) {
  background: rgba(6, 182, 212, 0.15) !important;
  color: #0e7490 !important;
  padding: 2px 6px !important;
  border-radius: 4px !important;
  font-weight: 600 !important;
}

/* EXCEPTION: Preserve dark styling for code inside dark containers */
.dark-card code:not(pre code),
.cell-output code:not(pre code),
.sourceCode code,
pre code {
  background: transparent !important;
  color: inherit !important;
  padding: 0 !important;
  font-weight: inherit !important;
}

/* =========================================================
   5) DATA TABLES ON LIGHT BACKGROUNDS - VISIBILITY FIX
   ========================================================= */

/*
 * FIX: Data tables/dataframes often have alternating dark rows
 * that make text illegible on light article backgrounds.
 * This enforces clean white backgrounds with readable text.
 */

/* Base table styling on light backgrounds */
#quarto-document-content table:not(.cell-output table),
.quarto-appendix table,
article table:not(.cell-output table),
.content table:not(.cell-output table) {
  width: 100%;
  border-collapse: collapse;
  margin: 1.5rem 0;
  background: white !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border-radius: 0.5rem;
  overflow: hidden;
  font-size: 0.9rem;
}

/* Table header - dark with white text */
#quarto-document-content table:not(.cell-output table) thead,
article table:not(.cell-output table) thead {
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%) !important;
}

#quarto-document-content table:not(.cell-output table) th,
article table:not(.cell-output table) th {
  background: transparent !important;
  color: white !important;
  padding: 0.875rem 1rem;
  text-align: left;
  font-weight: 600;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border: none !important;
}

/* Table body - white background, dark text */
#quarto-document-content table:not(.cell-output table) td,
article table:not(.cell-output table) td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #e5e7eb !important;
  color: #374151 !important;
  background: white !important;
  vertical-align: middle;
}

/* Remove alternating row colors - use white for all */
#quarto-document-content table:not(.cell-output table) tbody tr,
article table:not(.cell-output table) tbody tr {
  background: white !important;
}

/* Subtle hover instead of alternating colors */
#quarto-document-content table:not(.cell-output table) tbody tr:hover,
article table:not(.cell-output table) tbody tr:hover {
  background: #f8fafc !important;
}

/* Last row - no bottom border */
#quarto-document-content table:not(.cell-output table) tbody tr:last-child td,
article table:not(.cell-output table) tbody tr:last-child td {
  border-bottom: none !important;
}

/* =========================================================
   6) POLARS/PANDAS DATAFRAME DISPLAY FIX
   ========================================================= */

/*
 * Polars and Pandas HTML table output often uses dark alternating rows.
 * This section specifically targets cell-output tables to fix visibility
 * while maintaining the dark code aesthetic.
 */

/* Override dark alternating rows in dataframe displays */
.cell-output-display table.dataframe,
.cell-output-display table.rendered_html,
.cell-output table.dataframe {
  background: white !important;
}

.cell-output-display table.dataframe tbody tr,
.cell-output-display table.rendered_html tbody tr,
.cell-output table.dataframe tbody tr {
  background: white !important;
}

.cell-output-display table.dataframe tbody tr:nth-child(odd),
.cell-output-display table.dataframe tbody tr:nth-child(even),
.cell-output table.dataframe tbody tr:nth-child(odd),
.cell-output table.dataframe tbody tr:nth-child(even) {
  background: white !important;
}

.cell-output-display table.dataframe td,
.cell-output table.dataframe td {
  color: #374151 !important;
  background: white !important;
  border-bottom: 1px solid #e5e7eb !important;
}

.cell-output-display table.dataframe th,
.cell-output table.dataframe th {
  background: #0B1120 !important;
  color: white !important;
}

.cell-output-display table.dataframe tbody tr:hover,
.cell-output table.dataframe tbody tr:hover {
  background: #f1f5f9 !important;
}

/* Polars shape info row styling */
.cell-output-display table.dataframe tr.polars-shape,
.cell-output table tr[class*="shape"] {
  background: #f8fafc !important;
  color: #64748b !important;
  font-size: 0.85rem;
}

/* =========================================================
   7) ARTICLE FOOTER - SITE-WIDE LOGO SOLUTION
   ========================================================= */

/*
 * ROBUST SOLUTION: Article footers now use the site-wide logo
 * from /images/logo.png instead of requiring logo.png in each
 * post's images folder.
 *
 * This uses CSS content replacement to redirect logo paths.
 */

/* Redirect any logo image in article footer to site logo */
.quarto-appendix img[src*="logo"],
#quarto-appendix img[src*="logo"],
article footer img[src*="logo"],
.article-footer img[src*="logo"] {
  content: url("../..images/logo.png") !important;
  width: 60px;
  height: 60px;
  object-fit: contain;
}

/* Fallback: If logo fails to load, hide broken image icon */
.quarto-appendix img[src*="logo"][src$="logo.png"]:not([src^="/"]),
#quarto-appendix img[src*="logo"][src$="logo.png"]:not([src^="/"]) {
  content: url("../..images/logo.png") !important;
}

/* Style the appendix/footer area */
#quarto-appendix.default,
.quarto-appendix {
  background: linear-gradient(135deg, #0B1120 0%, #1E293B 100%);
  padding: 2rem;
  margin-top: 3rem;
  border-radius: 0.5rem;
}

/* =========================================================
   8) RESPONSIVE TABLE WRAPPER
   ========================================================= */

/* Ensure tables scroll horizontally on small screens */
.table-responsive,
.cell-output-display {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 768px) {
  #quarto-document-content table,
  article table,
  .cell-output table {
    font-size: 0.8rem;
  }

  #quarto-document-content th,
  #quarto-document-content td,
  article th,
  article td,
  .cell-output th,
  .cell-output td {
    padding: 0.5rem 0.75rem;
  }
}

/* =========================================================
   9) ABOUT THE AUTHOR CARD — Posit-style horizontal layout

   Light card with square photo, name, role, bio, and social
   links. Designed to sit at the end of every blog article.
   ========================================================= */

.author-card {
  display: flex;
  align-items: flex-start;
  gap: 1.75rem;
  background: #f0f5f9;
  border: 1px solid #d9e2ec;
  border-left: 4px solid #0ea5e9;
  border-radius: 10px;
  padding: 2rem;
  margin: 3rem 0 2rem 0;
}

.author-card-photo {
  flex-shrink: 0;
  width: 150px;
  height: 150px;
  border-radius: 8px;
  object-fit: cover;
  object-position: center 20%;
  background: #d9e2ec;
}

.author-card-info {
  flex: 1;
  min-width: 0;
}

.author-card-info h3 {
  font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #1a2332;
  margin: 0 0 0.25rem 0;
  line-height: 1.3;
}

.author-card-role {
  font-family: 'Poppins', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  color: #0ea5e9;
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.author-card-bio {
  font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 0.925rem;
  color: #4b5563;
  line-height: 1.65;
  margin-bottom: 1rem;
}

.author-card-social {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}

.author-card-social a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  border: 1.5px solid #cbd5e1;
  border-radius: 20px;
  color: #64748b;
  text-decoration: none;
  transition: all 0.25s ease;
  font-family: 'Poppins', sans-serif;
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1;
}

.author-card-social a svg {
  display: block;
  width: 15px;
  height: 15px;
  fill: currentColor;
  flex-shrink: 0;
}

/* Override generic .social-* filled-background rules from styles.css */
.author-card-social a.social-linkedin,
.author-card-social a.social-youtube,
.author-card-social a.social-github,
.author-card-social a.social-facebook,
.author-card-social a.social-website {
  background: transparent !important;
  color: #64748b !important;
  border: 1.5px solid #cbd5e1 !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Platform-specific hover states */
.author-card-social a.social-website:hover {
  border-color: #0ea5e9 !important;
  color: #0ea5e9 !important;
  background: rgba(14, 165, 233, 0.08) !important;
}

.author-card-social a.social-github:hover {
  border-color: #a78bfa !important;
  color: #8b5cf6 !important;
  background: rgba(139, 92, 246, 0.08) !important;
}

.author-card-social a.social-linkedin:hover {
  border-color: #0077b5 !important;
  color: #0077b5 !important;
  background: rgba(0, 119, 181, 0.08) !important;
}

.author-card-social a.social-youtube:hover {
  border-color: #FFD700 !important;
  color: #EAB308 !important;
  background: rgba(255, 215, 0, 0.08) !important;
}

.author-card-social a.social-facebook:hover {
  border-color: #1877f2 !important;
  color: #1877f2 !important;
  background: rgba(24, 119, 242, 0.08);
}

/* ---- Author card: Responsive ---- */

@media (max-width: 768px) {
  .author-card {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 1.5rem;
    gap: 1.25rem;
  }

  .author-card-photo {
    width: 120px;
    height: 120px;
  }

  .author-card-info h3 {
    font-size: 1.3rem;
  }

  .author-card-social {
    justify-content: center;
    gap: 0.4rem;
  }

  .author-card-social a {
    font-size: 0.75rem;
    padding: 0.35rem 0.7rem;
  }
}

/* ---- Author section divider ---- */

.author-section-divider {
  border: none;
  border-top: 1px solid #e2e8f0;
  margin: 3rem 0 0.5rem 0;
}