/*
 * Article typography.
 *
 * assets/css/output.css is the Flask app's compiled Tailwind build, copied
 * verbatim so the header and footer match the main site exactly. But that build
 * only contains classes the app actually uses, and the app has never rendered
 * long-form article content - so there are no rules for the HTML the WordPress
 * editor produces (h2, p, blockquote, ul, pre, figure).
 *
 * These fill that gap, keyed off the same CSS custom properties the copied
 * build expects, so a brand colour change is still a single edit in
 * config/wp-config-extra.php.
 *
 * Tailwind is deliberately never run inside the WordPress container: it would
 * mean node in a PHP image, a second build pipeline and a way for the two
 * stylesheets to drift.
 */

.md-prose {
    font-size: 1.0625rem;
    line-height: 1.75;
    color: #374151;
}

.md-prose > * + * { margin-top: 1.25em; }

.md-prose h2,
.md-prose h3,
.md-prose h4 {
    font-family: var(--heading-font, Inter), system-ui, sans-serif;
    font-weight: 700;
    color: var(--text-color, #111827);
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.md-prose h2 { font-size: 1.6rem; margin-top: 2.2em; }
.md-prose h3 { font-size: 1.3rem; margin-top: 1.8em; }
.md-prose h4 { font-size: 1.1rem; margin-top: 1.6em; }

.md-prose a {
    color: var(--accent-color, #10b981);
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.md-prose a:hover { text-decoration-thickness: 2px; }

.md-prose strong { color: var(--text-color, #111827); font-weight: 650; }

.md-prose ul,
.md-prose ol { padding-left: 1.5em; }
.md-prose ul { list-style: disc; }
.md-prose ol { list-style: decimal; }
.md-prose li + li { margin-top: 0.5em; }
.md-prose li::marker { color: var(--accent-color, #10b981); }

.md-prose blockquote {
    border-left: 3px solid var(--accent-color, #10b981);
    padding-left: 1.25em;
    font-style: italic;
    color: #4b5563;
}

.md-prose img,
.md-prose figure img {
    border-radius: 0.75rem;
    max-width: 100%;
    height: auto;
}

.md-prose figcaption {
    margin-top: 0.6em;
    font-size: 0.875rem;
    color: #6b7280;
    text-align: center;
}

.md-prose code {
    background: #f3f4f6;
    padding: 0.15em 0.4em;
    border-radius: 0.3rem;
    font-size: 0.9em;
}

.md-prose pre {
    background: var(--secondary-color, #112231);
    color: #e5e7eb;
    padding: 1.1em 1.25em;
    border-radius: 0.75rem;
    overflow-x: auto;   /* long lines scroll, never widen the page */
    font-size: 0.9rem;
}
.md-prose pre code { background: none; padding: 0; color: inherit; }

.md-prose hr { border: 0; border-top: 1px solid #e5e7eb; margin: 2.5em 0; }

.md-prose table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.md-prose th,
.md-prose td { border-bottom: 1px solid #e5e7eb; padding: 0.6em 0.75em; text-align: left; }
.md-prose th { font-weight: 650; color: var(--text-color, #111827); }

/* WordPress alignment classes the editor emits. */
.md-prose .alignleft  { float: left;  margin: 0.4em 1.4em 1em 0; }
.md-prose .alignright { float: right; margin: 0.4em 0 1em 1.4em; }
.md-prose .aligncenter { display: block; margin-left: auto; margin-right: auto; }
.md-prose .wp-caption { max-width: 100%; }

@media (max-width: 640px) {
    .md-prose { font-size: 1rem; }
    .md-prose h2 { font-size: 1.4rem; }
    /* Floats at phone width produce unreadable one-word columns. */
    .md-prose .alignleft,
    .md-prose .alignright { float: none; margin: 1em auto; display: block; }
}

/* Pagination, shared by the index, archives and search. */
.pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.25rem;
    height: 2.25rem;
    padding: 0 0.65rem;
    border-radius: 0.5rem;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-weight: 500;
    text-decoration: none;
}
.pagination .page-numbers:hover { background: #f9fafb; }
.pagination .page-numbers.current {
    background: var(--primary-color, #1f2937);
    border-color: var(--primary-color, #1f2937);
    color: #fff;
}
.pagination .page-numbers.dots { border: 0; background: none; }

/* Tag links under a post. */
.md-prose + div a[rel~="tag"],
a[rel~="tag"] {
    display: inline-block;
    padding: 0.3em 0.75em;
    border-radius: 999px;
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.8rem;
    text-decoration: none;
}
a[rel~="tag"]:hover { background: #e5e7eb; }

/* ==========================================================================
   The blog's own design system.
   ==========================================================================

   Hand-written, `md-` prefixed, and deliberately NOT Tailwind utilities.

   output.css is a frozen copy of the Flask app's compiled build: it contains
   only the classes that app needed, so reaching past its edge produces markup
   that silently does nothing. The theme originally did exactly that with 25
   classes - including py-10 on every content container, which is why every page
   rendered with no vertical padding at all and the design read as flat.

   The division of labour from here:
     output.css  the chrome (header and footer), frozen, never extended
     blog.css    everything the blog itself owns, written out in full

   blog/scripts/check-classes.py enforces it.
   ========================================================================== */

/* --- Shims for the chrome ------------------------------------------------
   Tailwind cannot apply an alpha modifier to a colour defined as a bare var(),
   which is how primary/secondary/accent/gradient are declared in
   tailwind.config.js. So EVERY `/opacity` variant on those four - bg-primary/5,
   hover:bg-primary/10, border-primary/20 and the rest - is dropped from the
   compiled build entirely. No warning; the class simply has no rule.

   The app carries the same defect, but the blog reproduces the app's header
   markup, so it inherits every one of them. color-mix() gives them real rules
   here. Add to this list whenever the ported chrome brings in another.

   `.bg-primary\/5` in particular was invisible for the theme's whole life: it
   is the active-page highlight on the Blog nav item, and it rendered as
   nothing. check-classes.py did not see it because the class sits inside a PHP
   ternary, which the guard used to skip. Both are fixed now. */
.bg-primary\/5 { background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.hover\:bg-primary\/5:hover { background-color: color-mix(in srgb, var(--primary-color) 5%, transparent); }
.hover\:bg-primary\/10:hover { background-color: color-mix(in srgb, var(--primary-color) 10%, transparent); }
.focus\:ring-primary\/20:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 20%, transparent); }

/* --- Layout -------------------------------------------------------------- */
.md-container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
.md-container--narrow { max-width: 46rem; }

/* The padding that was missing entirely. */
.md-section { padding-block: 2.5rem; }

@media (min-width: 640px) {
    .md-container { padding-inline: 1.5rem; }
    .md-section { padding-block: 3.5rem; }
}

/* --- Page heading -------------------------------------------------------- */
.md-page-head { margin-bottom: 2rem; }
.md-page-head__title {
    font-family: var(--heading-font, Inter), system-ui, sans-serif;
    font-size: clamp(1.9rem, 1.4rem + 2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;      /* the tracking-tight that never existed */
    line-height: 1.12;
    color: var(--text-color, #111827);
}
.md-page-head__sub {
    margin-top: 0.75rem;
    font-size: 1.075rem;
    line-height: 1.6;
    color: #4b5563;
    max-width: 46ch;
}

/* --- Category filter row ------------------------------------------------- */
.md-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.md-cat {
    display: inline-block;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    transition: border-color .15s, color .15s, background-color .15s;
}
.md-cat:hover { border-color: var(--accent-color, #10b981); color: var(--accent-color, #10b981); }
.md-cat.is-current {
    background: var(--primary-color, #1f2937);
    border-color: var(--primary-color, #1f2937);
    color: #fff;
}

/* --- Cards --------------------------------------------------------------- */
.md-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.75rem;
}
@media (min-width: 768px) {
    .md-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.md-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 0.9rem;
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.md-card:hover {
    box-shadow: 0 14px 34px rgba(16, 24, 40, .10);
    transform: translateY(-2px);
}
.md-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}
.md-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.md-card__cat {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-color, #10b981);
    text-decoration: none;
}
.md-card__title {
    margin-top: 0.5rem;
    font-family: var(--heading-font, Inter), system-ui, sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.3;              /* the leading-snug that never existed */
    letter-spacing: -0.015em;
}
.md-card__title a { color: var(--text-color, #111827); text-decoration: none; }
.md-card__title a:hover { color: var(--accent-color, #10b981); }
.md-card__excerpt {
    margin-top: 0.65rem;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}
.md-card__meta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8rem;
    color: #6b7280;
}

/* --- Lead post ----------------------------------------------------------- */
.md-lead { margin-bottom: 2.25rem; }
.md-lead .md-card__title { font-size: 1.55rem; }
.md-lead .md-card__excerpt { font-size: 1rem; }

@media (min-width: 900px) {
    .md-lead .md-card { display: grid; grid-template-columns: 1.1fr 1fr; }
    .md-lead .md-card__media { aspect-ratio: auto; height: 100%; min-height: 19rem; }
    .md-lead .md-card__body { padding: 2rem; justify-content: center; }
    .md-lead .md-card__title { font-size: 1.95rem; line-height: 1.2; }
    .md-lead .md-card__meta { margin-top: 1.25rem; padding-top: 0; }
}

/* --- Image placeholder ---------------------------------------------------
   Every sample post has no featured image, and posts routinely will not have
   one. Without a treatment the card collapses to bare text and the whole grid
   reads as broken rather than plain. The variant is chosen from the post ID so
   it is stable across page loads but differs between neighbouring cards. */
.md-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 11rem;
    position: relative;
    overflow: hidden;
}
.md-ph::after {                       /* a soft diagonal sheen, so it is not flat */
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, transparent 55%);
}
.md-ph__label {
    position: relative;
    z-index: 1;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;           /* the tracking-widest that never existed */
    text-transform: uppercase;
    color: rgba(255, 255, 255, .92);
    padding: 0 1rem;
    text-align: center;
}
.md-ph--1 { background: linear-gradient(140deg, #1f2937 0%, #112231 100%); }
.md-ph--2 { background: linear-gradient(140deg, #112231 0%, #0f3b30 100%); }
.md-ph--3 { background: linear-gradient(140deg, #24303f 0%, #10b981 190%); }
.md-ph--4 { background: linear-gradient(140deg, #1b2836 0%, #334155 100%); }
.md-ph--5 { background: linear-gradient(140deg, #0f2a24 0%, #1f2937 100%); }
.md-ph--6 { background: linear-gradient(140deg, #263445 0%, #112231 100%); }

/* --- Article ------------------------------------------------------------- */
.md-article__head { margin-bottom: 2rem; }
.md-article__title {
    font-family: var(--heading-font, Inter), system-ui, sans-serif;
    font-size: clamp(1.85rem, 1.3rem + 2.2vw, 2.6rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.14;
    color: var(--text-color, #111827);
}
.md-article__meta { margin-top: 1rem; font-size: 0.875rem; color: #6b7280; }
.md-article__hero {
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.md-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.md-article__foot {
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid #e5e7eb;
}

/* --- Service cross-link --------------------------------------------------
   The commercial point of the blog: an article about ceramic coating should
   lead to the directory's ceramic coating listings. */
.md-service {
    margin-top: 2.5rem;
    padding: 1.6rem 1.75rem;
    border-radius: 1rem;
    background: linear-gradient(140deg, var(--primary-color, #1f2937) 0%, var(--secondary-color, #112231) 100%);
    color: #e5e7eb;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.md-service__text { max-width: 40ch; }
.md-service__title { font-size: 1.1rem; font-weight: 700; color: #fff; }
.md-service__sub { margin-top: 0.35rem; font-size: 0.925rem; color: #cbd5e1; }
.md-service__btn {
    display: inline-block;
    padding: 0.7rem 1.3rem;
    border-radius: 0.7rem;
    background: var(--accent-color, #10b981);
    /* Computed in inc/brand.php - see md_readable_ink(). A fixed ink here was
       right for the green this was designed against and failed AA on the blue
       that replaced it, and the accent is now owner-editable. */
    color: var(--accent-ink, #06281c);
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-color, #10b981) 24%, transparent);
}
.md-service__btn:hover { filter: brightness(1.05); }

/* --- Related posts ------------------------------------------------------- */
.md-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid #e5e7eb; }
.md-related__title {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6b7280;
    margin-bottom: 1.25rem;
}
.md-related__grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; }
@media (min-width: 768px) { .md-related__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* --- Empty state --------------------------------------------------------- */
.md-empty {
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: 0.9rem;
    padding: 2.75rem 2rem;
    text-align: center;
}

/* --- Buttons ------------------------------------------------------------- */
.md-btn {
    display: inline-block;
    padding: 0.7rem 1.35rem;
    border-radius: 0.75rem;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none;
}
.md-btn--primary { background: var(--primary-color, #1f2937); color: #fff; }
.md-btn--accent  { background: var(--accent-color, #10b981); color: var(--accent-ink, #06281c); }
.md-btn--ghost   { border: 1px solid #d1d5db; color: #374151; background: #fff; }
.md-btn:hover { filter: brightness(1.06); }