/* ==========================================================================
   TGM LCM — Blog skin (Phase 7b)
   Dark, mobile-first styling for Dayer's blog (native WP posts), layered on
   top of Kadence via the `tgm-lcm-blog` body class. Covers single posts +
   the posts index / archives. Header/footer chrome stays Kadence's.
   All colors come from theme.css tokens. Comment-section styling rides in
   from gallery.css; the after-post CTA from membership.css.
   ========================================================================== */

/* --- Reading column: keep line length comfortable on wide screens -------- */
.tgm-lcm-blog .entry-content,
.tgm-lcm-blog .entry-header,
.tgm-lcm-blog .tgm-lcm-comments {
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

/* --- "From Dayer" eyebrow at the top of a single post -------------------- */
.tgm-lcm-blog .tgm-lcm-post-eyebrow {
    display: inline-block;
    margin: 0 0 1.4em;
    padding: 4px 12px;
    border: 1px solid rgba(212, 168, 74, 0.45);
    border-radius: 999px;
    color: var(--tgm-lcm-accent);
    font-family: var(--tgm-lcm-font);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    line-height: 1;
}

/* --- Single-post title + meta (Kadence classes) -------------------------- */
.tgm-lcm-blog.single .entry-title {
    color: var(--tgm-lcm-text);
    line-height: 1.15;
}
.tgm-lcm-blog .entry-meta,
.tgm-lcm-blog .entry-meta a {
    color: var(--tgm-lcm-text-muted);
}
.tgm-lcm-blog .entry-meta a:hover {
    color: var(--tgm-lcm-accent);
}

/* Single posts: drop the author byline + date row (Mike — the "From [Artist]"
   eyebrow is the attribution we want; the logged-in username + date are noise). */
.tgm-lcm-blog.single .entry-meta,
.tgm-lcm-blog.single .posted-on,
.tgm-lcm-blog.single .byline,
.tgm-lcm-blog.single .entry-author {
    display: none;
}

/* Category link above the title (Kadence .entry-taxonomies): on-brand muted
   pill instead of the theme's blue link — matches the Back / From pills. */
.tgm-lcm-blog .entry-taxonomies .category-links a,
.tgm-lcm-blog .entry-taxonomies a {
    display: inline-block;
    padding: 3px 11px;
    border: 1px solid var(--tgm-lcm-border-strong);
    border-radius: 999px;
    color: var(--tgm-lcm-text-muted);
    text-decoration: none;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    /* Pin line-height here (the chip otherwise inherits unitless 1.6 → 17.6px at
       11px). Declaring it on the shared selector means the relocated Back pill —
       which also matches `.entry-taxonomies a` — derives the SAME line-height
       from the SAME place, so the two pills can't drift apart. Value equals the
       chip's current computed 1.6, so the chip itself is unchanged. */
    line-height: 1.6;
}
.tgm-lcm-blog .entry-taxonomies .category-links a:hover {
    border-color: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent);
}

/* "‹ Back" relocated up beside the category chip (spa-nav.js moves it into
   .entry-taxonomies). The .entry-taxonomies a rule above already hands it the
   same muted pill (display/padding/border/font-size/line-height) as the category
   chip — so an EXACT box match just means NOT re-introducing the standalone
   .tgm-lcm-back overrides. .tgm-lcm-back sets line-height:1.7 (loses to the
   shared rule's 1.6) and vertical-align:middle (which we pin back to the chip's
   baseline here). We deliberately do NOT set line-height — it must come from the
   shared rule so it stays equal to the chip. Measured live: both pills 25.6px
   tall, baselines level. */
.tgm-lcm-blog .entry-taxonomies .tgm-lcm-back--inline {
    margin: 0 10px 0 0;
    vertical-align: baseline;   /* match the category chip (baseline) — was middle */
    text-decoration: none;
}
/* The standalone back chevron is 14px; inside this 11px inline pill that would
   drive the line box (and so the pill) taller than the chip. Match the text size
   so the chevron can't inflate the box past the category chip. */
.tgm-lcm-blog .entry-taxonomies .tgm-lcm-back--inline .tgm-lcm-back-chevron {
    font-size: inherit;
}
.tgm-lcm-blog .tgm-lcm-back--inline,
.tgm-lcm-blog .entry-content a.tgm-lcm-back {
    text-decoration: none;
}
.tgm-lcm-blog .entry-taxonomies .tgm-lcm-back--inline:hover {
    border-color: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent);
}

/* --- Post body typography ------------------------------------------------ */
.tgm-lcm-blog .entry-content {
    color: var(--tgm-lcm-text);
    line-height: 1.75;
}
.tgm-lcm-blog .entry-content p {
    margin: 0 0 1.4em;
}
.tgm-lcm-blog .entry-content h2,
.tgm-lcm-blog .entry-content h3,
.tgm-lcm-blog .entry-content h4 {
    color: var(--tgm-lcm-text);
    line-height: 1.25;
    margin: 1.8em 0 0.6em;
}

/* Body links → accent (but never the join-band CTA buttons). */
.tgm-lcm-blog .entry-content a:not([class*="tgm-lcm-join-band"]) {
    color: var(--tgm-lcm-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
}
.tgm-lcm-blog .entry-content a:not([class*="tgm-lcm-join-band"]):hover {
    color: var(--tgm-lcm-accent-hover, var(--tgm-lcm-accent));
}

/* Blockquotes — accent rule + muted, slightly larger. */
.tgm-lcm-blog .entry-content blockquote {
    margin: 1.6em 0;
    padding: 0.4em 0 0.4em 1.2em;
    border-left: 3px solid var(--tgm-lcm-accent);
    color: var(--tgm-lcm-text-muted);
    font-style: italic;
}
.tgm-lcm-blog .entry-content blockquote p:last-child { margin-bottom: 0; }

/* Lists. */
.tgm-lcm-blog .entry-content ul,
.tgm-lcm-blog .entry-content ol {
    margin: 0 0 1.4em;
    padding-left: 1.4em;
}
.tgm-lcm-blog .entry-content li { margin: 0.35em 0; }

/* Media — round corners to match the design system. */
.tgm-lcm-blog .entry-content img,
.tgm-lcm-blog .post-thumbnail img,
.tgm-lcm-blog .entry-content iframe {
    border-radius: var(--tgm-lcm-radius);
    height: auto;
    max-width: 100%;
}
.tgm-lcm-blog .entry-content figcaption {
    color: var(--tgm-lcm-text-faint, var(--tgm-lcm-text-muted));
    font-size: 13px;
    text-align: center;
    margin-top: 0.5em;
}

/* Inline code + code blocks. */
.tgm-lcm-blog .entry-content code,
.tgm-lcm-blog .entry-content pre {
    font-family: var(--tgm-lcm-font-mono, monospace);
    background: var(--tgm-lcm-surface-2);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius-sm);
}
.tgm-lcm-blog .entry-content code { padding: 0.1em 0.4em; font-size: 0.9em; }
.tgm-lcm-blog .entry-content pre {
    padding: 14px 16px;
    overflow: auto;
}
.tgm-lcm-blog .entry-content pre code { background: none; border: 0; padding: 0; }

.tgm-lcm-blog .entry-content hr {
    border: 0;
    border-top: 1px solid var(--tgm-lcm-border);
    margin: 2em 0;
}

/* --- After-post membership CTA ------------------------------------------- */
.tgm-lcm-blog .tgm-lcm-post-cta {
    max-width: 760px;
    margin: 2.5em auto 0;
    padding-top: 1.6em;
    border-top: 1px solid var(--tgm-lcm-border);
}

/* ==========================================================================
   Posts index / archives (listing)
   ========================================================================== */

/* Each post entry → a dark card. Targets Kadence loop entries + generic. */
.tgm-lcm-blog.archive .loop-entry,
.tgm-lcm-blog.blog .loop-entry,
.tgm-lcm-blog .loop-entry.entry {
    background: var(--tgm-lcm-surface);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius);
    overflow: hidden;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.tgm-lcm-blog .loop-entry.entry:hover {
    border-color: var(--tgm-lcm-border-strong);
    transform: translateY(-2px);
}
.tgm-lcm-blog .loop-entry .entry-title a {
    color: var(--tgm-lcm-text);
    text-decoration: none;
}
.tgm-lcm-blog .loop-entry .entry-title a:hover {
    color: var(--tgm-lcm-accent);
}
.tgm-lcm-blog .loop-entry .entry-summary,
.tgm-lcm-blog .loop-entry .entry-content {
    color: var(--tgm-lcm-text-muted);
}

/* "Read more" / continue links. */
.tgm-lcm-blog .more-link,
.tgm-lcm-blog .loop-entry .post-readmore,
.tgm-lcm-blog .entry-readmore {
    color: var(--tgm-lcm-accent);
    text-decoration: none;
    font-weight: 600;
}
.tgm-lcm-blog .more-link:hover,
.tgm-lcm-blog .loop-entry .post-readmore:hover {
    text-decoration: underline;
}

/* Pagination (archive + single comments). */
.tgm-lcm-blog .pagination a,
.tgm-lcm-blog .pagination .current,
.tgm-lcm-blog .nav-links a {
    color: var(--tgm-lcm-text);
    border: 1px solid var(--tgm-lcm-border);
    border-radius: var(--tgm-lcm-radius-sm);
    padding: 6px 12px;
    text-decoration: none;
}
.tgm-lcm-blog .pagination .current {
    background: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent-text, #1a1a1a);
    border-color: var(--tgm-lcm-accent);
}
.tgm-lcm-blog .pagination a:hover,
.tgm-lcm-blog .nav-links a:hover {
    border-color: var(--tgm-lcm-accent);
    color: var(--tgm-lcm-accent);
}

/* Archive title (e.g. category name). */
.tgm-lcm-blog .archive-title,
.tgm-lcm-blog .page-title {
    color: var(--tgm-lcm-text);
}

/* --- Small screens ------------------------------------------------------- */
@media (max-width: 600px) {
    .tgm-lcm-blog .tgm-lcm-post-eyebrow { font-size: 11px; }
    .tgm-lcm-blog .entry-content { line-height: 1.7; }
}