/* ============================================================
   TRUTZ.IO — JEKYLL POSTS + ROUGE v1
   Typographie für Blog-Posts und Syntax-Highlighting für Rouge
   (Pendant zu `rougify style github.dark` in der trutz-Palette).

   Voraussetzung: trutz.css ist VOR dieser Datei eingebunden
   (liefert Token-Variablen und die eingebetteten Schriften):
     <link rel="stylesheet" href="/assets/css/trutz.css">
     <link rel="stylesheet" href="/assets/css/trutz-posts.css">

   Syntax-Palette (abgeleitet aus accent-green #3DFF7E):
     keyword #3DFF7E · type/builtin #A8F5C3 · string #9CD9AE
     number #7FE8A8 · comment #6A7A6E · operator #8A9A8E
     Amber nur funktional: Fehler, Tracebacks, Diff-Löschungen (R5).
   ============================================================ */

/* ---------- Post-Gerüst ---------- */
.post, article.post {
  max-width: 720px;            /* ~64ch Lesebreite */
  margin-inline: auto;
}

.post-header { margin-block: var(--s-8) var(--s-6); }

.post-title {
  font-size: clamp(32px, 5vw, 48px);
  line-height: 1.12;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Datum/Meta als Terminal-Zeile */
.post-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--text-secondary);
  display: block;
  margin-bottom: var(--s-2);
}
.post-meta::before { content: "$ date: "; color: var(--accent-green); opacity: 0.85; }

/* ---------- Fließtext ---------- */
.post-content { font-size: 17px; line-height: 1.65; }

.post-content > * + * { margin-top: var(--s-3); }

.post-content h2 {
  font-size: 28px; line-height: 1.2; font-weight: 700;
  letter-spacing: -0.01em;
  margin-top: var(--s-8);
}
.post-content h3 {
  font-size: 21px; line-height: 1.3; font-weight: 700;
  margin-top: var(--s-6);
}
.post-content h4 {
  font-family: var(--font-mono);
  font-size: 14px; letter-spacing: 0.05em;
  color: var(--text-secondary);
  margin-top: var(--s-5);
}

.post-content a {
  color: var(--text-primary);
  text-decoration-color: var(--accent-green);
  text-underline-offset: 3px;
}
.post-content a:hover { text-decoration-thickness: 2px; }

.post-content ul, .post-content ol { padding-left: 1.4em; }
.post-content li { margin-top: var(--s-1); }
.post-content li::marker { color: var(--accent-green); font-family: var(--font-mono); }

.post-content strong { color: var(--text-primary); }
.post-content em { font-style: italic; }

/* Blockquote = Merksatz-Note aus dem System */
.post-content blockquote {
  border-left: 3px solid var(--accent-green);
  padding-left: var(--s-2);
  color: var(--text-secondary);
  font-size: 16px;
}
.post-content blockquote p { margin: 0; }

.post-content hr {
  border: 0;
  border-top: 1px solid var(--border);
  margin-block: var(--s-6);
}

/* Tabellen wie in der Doku */
.post-content table { width: 100%; border-collapse: collapse; font-size: 15px; }
.post-content th {
  font-family: var(--font-mono); font-weight: 400; font-size: 12px;
  text-align: left; color: var(--text-secondary);
  letter-spacing: 0.05em;
  padding: var(--s-1) var(--s-2);
  border-bottom: 1px solid var(--border);
}
.post-content td {
  padding: var(--s-2);
  border-bottom: 1px solid var(--border);
}

.post-content img {
  border: 1px solid var(--border);
  border-radius: 8px;
}
.post-content figcaption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-secondary);
  margin-top: var(--s-1);
}

/* ---------- Inline-Code ---------- */
.post-content code.highlighter-rouge,
.post-content p code, .post-content li code, .post-content td code {
  font-family: var(--font-mono);
  font-size: 0.85em;
  background: var(--bg-surface);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1em 0.4em;
  white-space: nowrap;
}

/* ============================================================
   ROUGE — Code-Blöcke
   Jekyll-Markup: div.language-x.highlighter-rouge > div.highlight
                  > pre.highlight > code  (oder figure.highlight)
   ============================================================ */
div.highlighter-rouge, figure.highlight {
  margin-block: var(--s-4);
}

.highlight pre, pre.highlight {
  background: #0B0F0D;               /* Code-Insel — in beiden Modi dunkel (R4) */
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: var(--s-3) var(--s-4);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 14px;
  line-height: 1.6;
  color: #E8F0EA;
}
.highlight code { font-family: inherit; background: none; border: 0; padding: 0; }

/* Sprachlabel via Attribut, z. B. <div class="language-yaml ..."> */
div.highlighter-rouge { position: relative; }

/* Scrollbar dezent */
.highlight pre::-webkit-scrollbar { height: 8px; }
.highlight pre::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* Zeilennummern (rouge table / lineno) */
.rouge-table { border: 0; margin: 0; }
.rouge-table td { padding: 0; border: 0; }
.rouge-table .rouge-gutter {
  padding-right: var(--s-2);
  border-right: 1px solid var(--border);
  user-select: none;
}
.rouge-table .rouge-code { padding-left: var(--s-2); }
.highlight .lineno, .highlight .gl { color: #4A5A50; }

/* ---------- Rouge-Token (Palette: Grün-Rampe) ---------- */
/* Kommentare */
.highlight .c, .highlight .ch, .highlight .cd, .highlight .cm,
.highlight .c1, .highlight .cs { color: #6A7A6E; font-style: italic; }
.highlight .cp, .highlight .cpf { color: #8A9A8E; }

/* Keywords */
.highlight .k, .highlight .kd, .highlight .kn, .highlight .kp,
.highlight .kr, .highlight .kv, .highlight .ow { color: #3DFF7E; }
.highlight .kc { color: #3DFF7E; }                    /* true/false/nil */
.highlight .kt { color: #A8F5C3; }                    /* Typen */

/* Namen */
.highlight .n, .highlight .nx, .highlight .py, .highlight .w { color: #E8F0EA; }
.highlight .nc, .highlight .nn { color: #A8F5C3; }    /* Klassen, Module */
.highlight .nf, .highlight .fm { color: #D6FFE5; }    /* Funktionen */
.highlight .nb, .highlight .bp { color: #A8F5C3; }    /* Builtins */
.highlight .no { color: #7FE8A8; }                    /* Konstanten */
.highlight .nd { color: #A8F5C3; }                    /* Decorators */
.highlight .ni, .highlight .ne { color: #A8F5C3; }
.highlight .nl { color: #9CD9AE; }
.highlight .nt { color: #3DFF7E; }                    /* HTML/XML-Tags */
.highlight .na { color: #9CD9AE; }                    /* Attribute */
.highlight .nv, .highlight .vc, .highlight .vg,
.highlight .vi, .highlight .vm { color: #C9E5D1; }    /* Variablen */

/* Strings */
.highlight .s, .highlight .sa, .highlight .sb, .highlight .sc,
.highlight .dl, .highlight .sd, .highlight .s2, .highlight .sh,
.highlight .sx, .highlight .s1, .highlight .ss { color: #9CD9AE; }
.highlight .se, .highlight .si { color: #3DFF7E; }    /* Escapes, Interpolation */
.highlight .sr { color: #7FE8A8; }                    /* Regex */

/* Zahlen & Literale */
.highlight .m, .highlight .mb, .highlight .mf, .highlight .mh,
.highlight .mi, .highlight .mo, .highlight .mx,
.highlight .il, .highlight .l, .highlight .ld { color: #7FE8A8; }
.highlight .esc { color: #3DFF7E; }

/* Operatoren & Interpunktion */
.highlight .o { color: #8A9A8E; }
.highlight .p, .highlight .pi { color: #B9C7BD; }

/* Generics (Diffs, Shell-Sessions, Fehler) */
.highlight .gp { color: #3DFF7E; user-select: none; } /* $-Prompt */
.highlight .go { color: #8A9A8E; }                    /* Programmausgabe */
.highlight .gi { color: #3DFF7E; }                    /* Diff: eingefügt */
.highlight .gd { color: #FFB454; }                    /* Diff: gelöscht (Amber = Warnung) */
.highlight .gh, .highlight .gu { color: #8A9A8E; font-weight: 700; }
.highlight .ge { font-style: italic; }
.highlight .gs { font-weight: 700; }
.highlight .gr, .highlight .gt { color: #FFB454; }    /* Fehler, Traceback */
.highlight .err { color: #FFB454; }

/* ---------- Print (R4): Code-Inseln bleiben dunkel ---------- */
@media print {
  .highlight pre, pre.highlight {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .post-content a { text-decoration-color: var(--accent-green); }
}