/* ==============================================
   Blog Styles - LernUpgrade
   Uses Open Props variables
   ============================================== */

/* Blog Page Layout */
.blog-page,
.blog-detail-page {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--size-fluid-3, 1.5rem);
  padding-block: var(--size-fluid-4, 2rem);
}

/* Blog Header */
.blog-header {
  text-align: center;
  margin-block-end: var(--size-fluid-5, 3rem);
}

.blog-header h1 {
  font-size: var(--font-size-fluid-3, 2.5rem);
  font-weight: var(--font-weight-7, 700);
  margin-block-end: var(--size-3, 1rem);
  color: var(--color-primary, #fd7e14);
}

.blog-intro {
  font-size: var(--font-size-fluid-1, 1.125rem);
  color: var(--color-text, #f6f4f3);
  opacity: 0.9;
  max-width: 60ch;
  margin-inline: auto;
}

/* Post Grid */
.post-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr));
  gap: var(--size-fluid-4, 2rem);
}

/* Post Card */
.post-card {
  background: var(--color-dark, #1f0812);
  border-radius: var(--radius-3, 1rem);
  overflow: hidden;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.post-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(253, 126, 20, 0.15);
}

.post-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
  height: 100%;
}

.post-card-content {
  padding: var(--size-fluid-3, 1.5rem);
  display: flex;
  flex-direction: column;
  gap: var(--size-2, 0.5rem);
}

.post-date {
  font-size: var(--font-size-0, 0.875rem);
  color: var(--color-primary, #fd7e14);
  font-weight: var(--font-weight-5, 500);
}

.post-title {
  font-size: var(--font-size-fluid-1, 1.25rem);
  font-weight: var(--font-weight-6, 600);
  color: var(--color-text, #f6f4f3);
  line-height: 1.3;
  margin: 0;
}

.post-teaser {
  font-size: var(--font-size-1, 1rem);
  color: var(--color-text, #f6f4f3);
  opacity: 0.8;
  line-height: 1.6;
  margin: 0;
}

.post-meta {
  margin-block-start: auto;
  padding-block-start: var(--size-2, 0.5rem);
}

.reading-time {
  font-size: var(--font-size-0, 0.875rem);
  color: var(--color-text, #f6f4f3);
  opacity: 0.6;
  display: inline-flex;
  align-items: center;
  gap: var(--size-1, 0.25rem);
}

/* No Posts Message */
.no-posts {
  grid-column: 1 / -1;
  text-align: center;
  padding: var(--size-fluid-5, 3rem);
  color: var(--color-text, #f6f4f3);
  opacity: 0.7;
}

/* Load More Button */
.load-more-container {
  display: flex;
  justify-content: center;
  margin-block-start: var(--size-fluid-4, 2rem);
}

.load-more-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2, 0.5rem);
  padding: var(--size-2, 0.75rem) var(--size-4, 1.5rem);
  background: transparent;
  border: 2px solid var(--color-primary, #fd7e14);
  color: var(--color-primary, #fd7e14);
  font-size: var(--font-size-1, 1rem);
  font-weight: var(--font-weight-5, 500);
  border-radius: var(--radius-2, 0.5rem);
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.load-more-btn:hover {
  background: var(--color-primary, #fd7e14);
  color: var(--color-bg, #001427);
}

.load-more-btn .htmx-indicator {
  display: none;
}

.load-more-btn.htmx-request .btn-text {
  display: none;
}

.load-more-btn.htmx-request .htmx-indicator {
  display: inline;
}

/* ============================================
   Blog Detail Page
   ============================================ */

.blog-detail-page {
  max-width: 800px;
}

/* Artikel-Card mit hellem Hintergrund */
.blog-article {
  background: var(--color-white-smoke, #f6f4f3);
  color: var(--color-licorice, #1a1a1a);
  border-radius: var(--radius-3, 1rem);
  padding: var(--size-fluid-4, 2rem) var(--size-fluid-5, 3rem);
  margin-block-end: var(--size-fluid-4, 2rem);
}

/* Back Link */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--size-2, 0.5rem);
  color: var(--color-licorice-200, #80214a);
  text-decoration: none;
  font-size: var(--font-size-0, 0.875rem);
  margin-block-end: var(--size-fluid-3, 1.5rem);
  transition: opacity 0.2s ease;
}

.back-link:hover {
  opacity: 0.8;
}

/* Article Header */
.article-header {
  margin-block-end: var(--size-fluid-4, 2rem);
}

.article-header h1 {
  font-size: var(--font-size-fluid-3, 2.5rem);
  font-weight: var(--font-weight-7, 700);
  color: var(--color-licorice, #1a1a1a);
  line-height: 1.2;
  margin-block-end: var(--size-3, 1rem);
}

.article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--size-3, 1rem);
  font-size: var(--font-size-0, 0.875rem);
  color: var(--color-licorice, #1a1a1a);
  opacity: 0.7;
}

.article-meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--size-1, 0.25rem);
}

/* Article Content - Prose Styling */
.article-content.prose {
  font-size: var(--font-size-fluid-0, 1.125rem);
  line-height: 1.75;
  color: var(--color-licorice, #1a1a1a);
}

.article-content.prose h2 {
  font-size: var(--font-size-fluid-2, 1.75rem);
  font-weight: var(--font-weight-6, 600);
  color: var(--color-licorice, #1a1a1a);
  margin-block-start: var(--size-fluid-4, 2rem);
  margin-block-end: var(--size-3, 1rem);
}

.article-content.prose h3 {
  font-size: var(--font-size-fluid-1, 1.375rem);
  font-weight: var(--font-weight-6, 600);
  color: var(--color-licorice, #1a1a1a);
  margin-block-start: var(--size-fluid-3, 1.5rem);
  margin-block-end: var(--size-2, 0.5rem);
}

.article-content.prose h4 {
  font-size: var(--font-size-1, 1.125rem);
  font-weight: var(--font-weight-6, 600);
  margin-block-start: var(--size-3, 1rem);
  margin-block-end: var(--size-2, 0.5rem);
}

.article-content.prose p {
  margin-block-end: var(--size-3, 1rem);
}

.article-content.prose a {
  color: var(--color-licorice-200, #80214a);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.article-content.prose a:hover {
  opacity: 0.8;
}

.article-content.prose ul,
.article-content.prose ol {
  margin-block-end: var(--size-3, 1rem);
  padding-inline-start: var(--size-4, 1.5rem);
}

.article-content.prose li {
  margin-block-end: var(--size-1, 0.25rem);
}

.article-content.prose blockquote {
  border-inline-start: 4px solid var(--color-licorice-200, #80214a);
  padding-inline-start: var(--size-3, 1rem);
  margin-inline: 0;
  margin-block: var(--size-3, 1rem);
  font-style: italic;
  opacity: 0.9;
}

.article-content.prose img {
  max-width: 100%;
  height: auto;
  border-radius: var(--radius-2, 0.5rem);
  margin-block: var(--size-3, 1rem);
}

.article-content.prose table {
  width: 100%;
  border-collapse: collapse;
  margin-block: var(--size-3, 1rem);
}

.article-content.prose th,
.article-content.prose td {
  padding: var(--size-2, 0.5rem);
  border: 1px solid rgba(0, 0, 0, 0.15);
  text-align: left;
}

.article-content.prose th {
  background: rgba(0, 0, 0, 0.05);
  font-weight: var(--font-weight-6, 600);
}

/* Code Blocks - Syntax Highlighting */
.article-content.prose code {
  font-family: var(--font-mono, 'Fira Code', 'JetBrains Mono', monospace);
  font-size: 0.9em;
  background: rgba(0, 0, 0, 0.08);
  color: #c7254e;
  padding: 0.15em 0.4em;
  border-radius: var(--radius-1, 0.25rem);
}

.article-content.prose pre {
  background: #1e1e1e;
  border-radius: var(--radius-2, 0.5rem);
  padding: var(--size-3, 1rem);
  overflow-x: auto;
  margin-block: var(--size-3, 1rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.article-content.prose pre code {
  background: none;
  padding: 0;
  font-size: 0.875rem;
  line-height: 1.6;
}

/* Pygments/CodeHilite Syntax Highlighting - Dracula Theme */
.highlight {
  background: #1e1e1e !important;
}

.highlight .hll { background-color: #44475a }
.highlight .c { color: #6272a4 } /* Comment */
.highlight .err { color: #ff5555 } /* Error */
.highlight .g { color: #f8f8f2 } /* Generic */
.highlight .k { color: #ff79c6 } /* Keyword */
.highlight .l { color: #f8f8f2 } /* Literal */
.highlight .n { color: #f8f8f2 } /* Name */
.highlight .o { color: #ff79c6 } /* Operator */
.highlight .x { color: #f8f8f2 } /* Other */
.highlight .p { color: #f8f8f2 } /* Punctuation */
.highlight .ch { color: #6272a4 } /* Comment.Hashbang */
.highlight .cm { color: #6272a4 } /* Comment.Multiline */
.highlight .cp { color: #ff79c6 } /* Comment.Preproc */
.highlight .cpf { color: #6272a4 } /* Comment.PreprocFile */
.highlight .c1 { color: #6272a4 } /* Comment.Single */
.highlight .cs { color: #6272a4 } /* Comment.Special */
.highlight .gd { color: #ff5555 } /* Generic.Deleted */
.highlight .ge { color: #f8f8f2; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #ff5555 } /* Generic.Error */
.highlight .gh { color: #f8f8f2; font-weight: bold } /* Generic.Heading */
.highlight .gi { color: #50fa7b } /* Generic.Inserted */
.highlight .go { color: #44475a } /* Generic.Output */
.highlight .gp { color: #f8f8f2 } /* Generic.Prompt */
.highlight .gs { color: #f8f8f2; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #f8f8f2; font-weight: bold } /* Generic.Subheading */
.highlight .gt { color: #f8f8f2 } /* Generic.Traceback */
.highlight .kc { color: #ff79c6 } /* Keyword.Constant */
.highlight .kd { color: #8be9fd; font-style: italic } /* Keyword.Declaration */
.highlight .kn { color: #ff79c6 } /* Keyword.Namespace */
.highlight .kp { color: #ff79c6 } /* Keyword.Pseudo */
.highlight .kr { color: #ff79c6 } /* Keyword.Reserved */
.highlight .kt { color: #8be9fd } /* Keyword.Type */
.highlight .ld { color: #f8f8f2 } /* Literal.Date */
.highlight .m { color: #bd93f9 } /* Literal.Number */
.highlight .s { color: #f1fa8c } /* Literal.String */
.highlight .na { color: #50fa7b } /* Name.Attribute */
.highlight .nb { color: #8be9fd; font-style: italic } /* Name.Builtin */
.highlight .nc { color: #50fa7b } /* Name.Class */
.highlight .no { color: #f8f8f2 } /* Name.Constant */
.highlight .nd { color: #f8f8f2 } /* Name.Decorator */
.highlight .ni { color: #f8f8f2 } /* Name.Entity */
.highlight .ne { color: #f8f8f2 } /* Name.Exception */
.highlight .nf { color: #50fa7b } /* Name.Function */
.highlight .nl { color: #8be9fd; font-style: italic } /* Name.Label */
.highlight .nn { color: #f8f8f2 } /* Name.Namespace */
.highlight .nx { color: #f8f8f2 } /* Name.Other */
.highlight .py { color: #f8f8f2 } /* Name.Property */
.highlight .nt { color: #ff79c6 } /* Name.Tag */
.highlight .nv { color: #8be9fd; font-style: italic } /* Name.Variable */
.highlight .ow { color: #ff79c6 } /* Operator.Word */
.highlight .w { color: #f8f8f2 } /* Text.Whitespace */
.highlight .mb { color: #bd93f9 } /* Literal.Number.Bin */
.highlight .mf { color: #bd93f9 } /* Literal.Number.Float */
.highlight .mh { color: #bd93f9 } /* Literal.Number.Hex */
.highlight .mi { color: #bd93f9 } /* Literal.Number.Integer */
.highlight .mo { color: #bd93f9 } /* Literal.Number.Oct */
.highlight .sa { color: #f1fa8c } /* Literal.String.Affix */
.highlight .sb { color: #f1fa8c } /* Literal.String.Backtick */
.highlight .sc { color: #f1fa8c } /* Literal.String.Char */
.highlight .dl { color: #f1fa8c } /* Literal.String.Delimiter */
.highlight .sd { color: #f1fa8c } /* Literal.String.Doc */
.highlight .s2 { color: #f1fa8c } /* Literal.String.Double */
.highlight .se { color: #f1fa8c } /* Literal.String.Escape */
.highlight .sh { color: #f1fa8c } /* Literal.String.Heredoc */
.highlight .si { color: #f1fa8c } /* Literal.String.Interpol */
.highlight .sx { color: #f1fa8c } /* Literal.String.Other */
.highlight .sr { color: #f1fa8c } /* Literal.String.Regex */
.highlight .s1 { color: #f1fa8c } /* Literal.String.Single */
.highlight .ss { color: #f1fa8c } /* Literal.String.Symbol */
.highlight .fm { color: #50fa7b } /* Name.Function.Magic */
.highlight .vc { color: #8be9fd; font-style: italic } /* Name.Variable.Class */
.highlight .vg { color: #8be9fd; font-style: italic } /* Name.Variable.Global */
.highlight .vi { color: #8be9fd; font-style: italic } /* Name.Variable.Instance */
.highlight .vm { color: #8be9fd; font-style: italic } /* Name.Variable.Magic */
.highlight .il { color: #bd93f9 } /* Literal.Number.Integer.Long */

/* Article Footer */
.article-footer {
  margin-block-start: var(--size-fluid-5, 3rem);
  padding-block-start: var(--size-fluid-3, 1.5rem);
  border-block-start: 1px solid rgba(0, 0, 0, 0.1);
}

.share-section {
  display: flex;
  align-items: center;
  gap: var(--size-3, 1rem);
  flex-wrap: wrap;
}

.share-section > span {
  font-size: var(--font-size-0, 0.875rem);
  color: var(--color-licorice, #1a1a1a);
  opacity: 0.7;
}

.share-buttons {
  display: flex;
  gap: var(--size-2, 0.5rem);
}

.share-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round, 50%);
  background: var(--color-dark, #1f0812);
  color: var(--color-text, #f6f4f3);
  border: none;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
  text-decoration: none;
}

.share-btn:hover {
  background: var(--color-primary, #fd7e14);
  color: var(--color-bg, #001427);
  transform: scale(1.1);
}

.share-btn.copied {
  background: #50fa7b;
  color: #1e1e1e;
}

/* Related Posts */
.related-posts {
  margin-block-start: var(--size-fluid-6, 4rem);
  padding-block-start: var(--size-fluid-4, 2rem);
  border-block-start: 1px solid rgba(255, 255, 255, 0.1);
}

.related-posts h2 {
  font-size: var(--font-size-fluid-1, 1.5rem);
  font-weight: var(--font-weight-6, 600);
  color: var(--color-primary, #fd7e14);
  margin-block-end: var(--size-3, 1rem);
}

.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: var(--size-3, 1rem);
}

.related-card {
  display: block;
  padding: var(--size-3, 1rem);
  background: var(--color-dark, #1f0812);
  border-radius: var(--radius-2, 0.5rem);
  text-decoration: none;
  transition: transform 0.2s ease;
}

.related-card:hover {
  transform: translateY(-2px);
}

.related-card h3 {
  font-size: var(--font-size-1, 1rem);
  font-weight: var(--font-weight-6, 600);
  color: var(--color-text, #f6f4f3);
  margin: 0 0 var(--size-1, 0.25rem) 0;
}

.related-card p {
  font-size: var(--font-size-0, 0.875rem);
  color: var(--color-text, #f6f4f3);
  opacity: 0.7;
  margin: 0;
  line-height: 1.5;
}

.related-meta {
  display: block;
  font-size: var(--font-size-00, 0.75rem);
  color: var(--color-primary, #fd7e14);
  margin-block-start: var(--size-2, 0.5rem);
}

/* Responsive */
@media (max-width: 768px) {
  .article-header h1 {
    font-size: var(--font-size-fluid-2, 1.75rem);
  }

  .article-meta {
    flex-direction: column;
    gap: var(--size-1, 0.25rem);
  }
}

/* TOC Permalink styling */
.article-content.prose .headerlink {
  margin-inline-start: var(--size-2, 0.5rem);
  opacity: 0;
  transition: opacity 0.2s ease;
  color: var(--color-licorice-200, #80214a);
  text-decoration: none;
}

.article-content.prose h2:hover .headerlink,
.article-content.prose h3:hover .headerlink,
.article-content.prose h4:hover .headerlink {
  opacity: 1;
}

/* Checklisten / Task Lists */
.article-content.prose .task-list {
  list-style: none;
  padding-inline-start: 0;
}

.article-content.prose .task-list-item {
  display: flex;
  align-items: flex-start;
  gap: var(--size-2, 0.5rem);
  margin-block-end: var(--size-1, 0.25rem);
}

.article-content.prose .task-list-item input[type="checkbox"] {
  appearance: none;
  width: 1.2em;
  height: 1.2em;
  border: 2px solid var(--color-licorice-200, #80214a);
  border-radius: var(--radius-1, 0.25rem);
  margin-top: 0.2em;
  flex-shrink: 0;
  cursor: default;
}

.article-content.prose .task-list-item input[type="checkbox"]:checked {
  background: var(--color-licorice-200, #80214a);
  position: relative;
}

.article-content.prose .task-list-item input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 0.35em;
  top: 0.1em;
  width: 0.3em;
  height: 0.6em;
  border: solid var(--color-white-smoke, #f6f4f3);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* ==============================================
   Print Styles - Schwarz-Weiß optimiert
   ============================================== */
@media print {
  /* Reset für Druck */
  * {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  /* Ausblenden: Header, Footer, Navigation, Buttons */
  .navbar,
  .site-footer,
  .back-link,
  .article-footer,
  .related-posts,
  .share-section {
    display: none !important;
  }

  /* Seiten-Layout für Druck */
  .page-wrapper,
  .blog-detail-page {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .blog-article {
    padding: 0 !important;
  }

  /* Titel und Meta */
  .article-header h1 {
    font-size: 24pt !important;
    margin-bottom: 12pt !important;
    color: black !important;
  }

  .article-meta {
    font-size: 10pt !important;
    color: #333 !important;
    margin-bottom: 20pt !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 10pt !important;
  }

  .article-meta i {
    display: none !important;
  }

  /* Artikel-Inhalt */
  .article-content.prose {
    font-size: 11pt !important;
    line-height: 1.5 !important;
  }

  .article-content.prose h2 {
    font-size: 16pt !important;
    color: black !important;
    margin-top: 18pt !important;
    margin-bottom: 8pt !important;
    border-bottom: 1px solid #ccc !important;
    padding-bottom: 4pt !important;
  }

  .article-content.prose h3 {
    font-size: 13pt !important;
    margin-top: 14pt !important;
    margin-bottom: 6pt !important;
  }

  .article-content.prose p {
    margin-bottom: 8pt !important;
    orphans: 3;
    widows: 3;
  }

  /* Links: URL anzeigen */
  .article-content.prose a {
    color: black !important;
    text-decoration: underline !important;
  }

  .article-content.prose a[href^="http"]:after {
    content: " (" attr(href) ")";
    font-size: 9pt;
    color: #666 !important;
    word-break: break-all;
  }

  /* Code-Blöcke für Druck */
  .article-content.prose pre,
  .article-content.prose .highlight {
    background: #f5f5f5 !important;
    border: 1px solid #ccc !important;
    padding: 8pt !important;
    font-size: 9pt !important;
    overflow-wrap: break-word !important;
    white-space: pre-wrap !important;
  }

  .article-content.prose code {
    background: #eee !important;
    color: black !important;
    font-size: 9pt !important;
  }

  /* Syntax Highlighting entfernen */
  .highlight span {
    color: black !important;
    font-style: normal !important;
    font-weight: normal !important;
  }

  /* Kommentare in Code grau */
  .highlight .c,
  .highlight .c1,
  .highlight .cm,
  .highlight .ch {
    color: #666 !important;
  }

  /* Keywords fett */
  .highlight .k,
  .highlight .kn,
  .highlight .kd {
    font-weight: bold !important;
  }

  /* Strings kursiv */
  .highlight .s,
  .highlight .s1,
  .highlight .s2 {
    font-style: italic !important;
  }

  /* Listen */
  .article-content.prose ul,
  .article-content.prose ol {
    margin-left: 20pt !important;
  }

  /* Checklisten */
  .article-content.prose .task-list-item input[type="checkbox"] {
    border-color: black !important;
  }

  .article-content.prose .task-list-item input[type="checkbox"]:checked {
    background: black !important;
  }

  /* Tabellen */
  .article-content.prose table {
    border-collapse: collapse !important;
  }

  .article-content.prose th,
  .article-content.prose td {
    border: 1px solid black !important;
    padding: 4pt 8pt !important;
  }

  .article-content.prose th {
    background: #eee !important;
    font-weight: bold !important;
  }

  /* Blockquotes */
  .article-content.prose blockquote {
    border-left: 3px solid black !important;
    padding-left: 10pt !important;
    margin-left: 0 !important;
  }

  /* Bilder */
  .article-content.prose img {
    max-width: 100% !important;
    page-break-inside: avoid;
  }

  /* Seitenumbrüche */
  h2, h3 {
    page-break-after: avoid;
  }

  pre, blockquote, img, table {
    page-break-inside: avoid;
  }

  /* URL am Ende des Dokuments */
  .blog-article:after {
    content: "Quelle: https://lernupgrade.de" attr(data-url);
    display: block;
    margin-top: 30pt;
    padding-top: 10pt;
    border-top: 1px solid #ccc;
    font-size: 9pt;
    color: #666 !important;
  }
}