/* ============================================================
   Herbano Ratgeber — Typography
   Globale Heading + Body-Defaults für Magefan-Blog-Routen.
   Scoped auf .post-description (Magefan-Content-Wrapper).
   ============================================================ */

/* ---------- Body-Defaults ---------- */
body.blog-page {
    font-family: var(--hb-f-body);
    font-size: var(--hb-fs-body);
    line-height: var(--hb-lh-body);
    color: var(--hb-ink);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* ---------- Headings (im Magefan-Content) ---------- */
body.blog-page .post-description h1,
body.blog-page .post-description h2,
body.blog-page .post-description h3,
body.blog-page .post-description h4,
body.blog-page .post-description h5,
body.blog-page .post-description h6 {
    font-family: var(--hb-f-display);
    font-weight: 600;
    color: var(--hb-ink);
    text-transform: none;
    letter-spacing: var(--hb-tracking-tight);
    line-height: var(--hb-lh-snug);
    margin: 0 0 var(--hb-sp-3);
}

body.blog-page .post-description h1 {
    font-size: var(--hb-fs-h1);
    color: var(--hb-accent);
    line-height: var(--hb-lh-tight);
    margin-bottom: var(--hb-sp-4);
    margin-top: var(--hb-sp-6);
}

body.blog-page .post-description h2 {
    font-size: var(--hb-fs-h2);
    color: var(--hb-accent);
    margin-top: var(--hb-sp-6);
}

body.blog-page .post-description h3 {
    font-size: var(--hb-fs-h3);
    color: var(--hb-ink);
    margin-top: var(--hb-sp-5);
}

body.blog-page .post-description h4 {
    font-size: var(--hb-fs-h4);
    color: var(--hb-ink);
    margin-top: var(--hb-sp-4);
}

/* ---------- Body-Text ---------- */
body.blog-page .post-description p {
    font-size: var(--hb-fs-body);
    line-height: var(--hb-lh-loose);
    color: var(--hb-ink);
    margin: 0 0 var(--hb-sp-4);
    text-wrap: pretty;
}

body.blog-page .post-description p:last-child {
    margin-bottom: 0;
}

body.blog-page .post-description strong {
    color: var(--hb-ink);
    font-weight: 600;
}

body.blog-page .post-description em {
    font-style: italic;
}

/* ---------- Links (nur in Inline-Text, nicht in Cards/Buttons) ---------- */
body.blog-page .post-description p a,
body.blog-page .post-description li a,
body.blog-page .post-description blockquote a {
    color: var(--hb-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color var(--hb-dur-micro) var(--hb-ease);
}

body.blog-page .post-description p a:hover,
body.blog-page .post-description li a:hover,
body.blog-page .post-description blockquote a:hover {
    color: var(--hb-accent-dark);
}

/* ---------- Listen ---------- */
body.blog-page .post-description ul,
body.blog-page .post-description ol {
    margin: 0 0 var(--hb-sp-4);
    padding-left: var(--hb-sp-5);
    line-height: var(--hb-lh-body);
}

body.blog-page .post-description li {
    margin-bottom: var(--hb-sp-2);
}

body.blog-page .post-description ul {
    list-style: disc;
}

body.blog-page .post-description ol {
    list-style: decimal;
}

/* ---------- Blockquote ---------- */
body.blog-page .post-description blockquote {
    background: var(--hb-mist);
    border-radius: var(--hb-r-lg);
    padding: var(--hb-sp-6) var(--hb-sp-7);
    margin: var(--hb-sp-6) 0;
    font-family: var(--hb-f-display);
    font-weight: 500;
    font-size: var(--hb-fs-lead);
    line-height: var(--hb-lh-body);
    color: var(--hb-accent);
    border-left: 4px solid var(--hb-accent);
}

/* ---------- Mobile-Anpassungen ---------- */
@media (max-width: 768px) {
    body.blog-page .post-description h1 {
        font-size: 32px;
    }
    body.blog-page .post-description h2 {
        font-size: 26px;
    }
    body.blog-page .post-description h3 {
        font-size: 20px;
    }
    body.blog-page .post-description h4 {
        font-size: 18px;
    }
}