/*
 * 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.
 */

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

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

.ca-prose h2,
.ca-prose h3,
.ca-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;
}

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

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

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

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

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

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

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

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

.ca-prose pre {
    background: var(--secondary-color, #1f2937);
    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;
}
.ca-prose pre code { background: none; padding: 0; color: inherit; }

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

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

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

@media (max-width: 640px) {
    .ca-prose { font-size: 1rem; }
    .ca-prose h2 { font-size: 1.4rem; }
    /* Floats at phone width produce unreadable one-word columns. */
    .ca-prose .alignleft,
    .ca-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.5rem;
    height: 2.5rem;
    padding: 0 0.75rem;
    border-radius: var(--radius-button, 9999px);   /* the directory's round pager */
    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(--accent-color, #853275);      /* Release 2.3.0: the current page in the accent colour */
    border-color: var(--accent-color, #853275);
    color: #fff;
}
.pagination .page-numbers.dots { border: 0; background: none; }

/* Tag links under a post. */
.ca-prose + div a[rel~="tag"],
a[rel~="tag"] {
    display: inline-block;
    padding: 0.3em 0.75em;
    border-radius: 999px;
    background: var(--tint-color, #f2e4fa);
    color: var(--primary-color, #005470);
    font-size: 0.8rem;
    text-decoration: none;
}
a[rel~="tag"]:hover { background: color-mix(in srgb, var(--tint-color, #f2e4fa) 70%, var(--accent-color, #853275)); color: #fff; }

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

   Hand-written, `ca-` 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 -------------------------------------------------------------- */
.ca-container {
    max-width: 72rem;
    margin-inline: auto;
    padding-inline: 1rem;
}
.ca-container--narrow { max-width: 46rem; }

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

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

/* --- Page heading -------------------------------------------------------- */
.ca-page-head { margin-bottom: 2rem; }
.ca-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(--primary-color, #005470);   /* teal headings, as "Browse by Category" on the homepage */
}
.ca-page-head__sub {
    margin-top: 0.75rem;
    font-size: 1.075rem;
    line-height: 1.6;
    color: #4b5563;
    max-width: 46ch;
}

/* --- Category filter row ------------------------------------------------- */
.ca-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.ca-cat {
    display: inline-block;
    padding: 0.5rem 1.1rem;
    border-radius: 999px;
    border: 1px solid transparent;
    background: var(--tint-color, #f2e4fa);        /* the homepage's lavender pills */
    color: var(--primary-color, #005470);
    font-size: 0.875rem;
    font-weight: 700;
    text-decoration: none;
    transition: box-shadow .15s, color .15s, background-color .15s;
}
.ca-cat:hover { box-shadow: 0 6px 16px rgba(16, 24, 40, .10); }
.ca-cat.is-current {
    background: var(--accent-color, #853275);
    border-color: var(--accent-color, #853275);
    color: #fff;
}

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

.ca-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #eef0f3;
    border-radius: var(--radius-xl, 1.25rem);
    overflow: hidden;
    box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
    transition: box-shadow .2s ease, transform .2s ease;
}
.ca-card:hover {
    box-shadow: 0 14px 34px rgba(16, 24, 40, .10);
    transform: translateY(-2px);
}
.ca-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f3f4f6;
}
.ca-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-card__body { padding: 1.35rem; display: flex; flex-direction: column; flex: 1; }
.ca-card__cat {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--accent-color, #853275);
    text-decoration: none;
}
.ca-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;
}
.ca-card__title a { color: var(--primary-color, #005470); text-decoration: none; }   /* teal names, as the listing cards */
.ca-card__title a:hover { color: var(--accent-color, #853275); }
.ca-card__excerpt {
    margin-top: 0.65rem;
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
}
.ca-card__meta {
    margin-top: auto;
    padding-top: 1rem;
    font-size: 0.8rem;
    color: #6b7280;
}

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

@media (min-width: 900px) {
    .ca-lead .ca-card { display: grid; grid-template-columns: 1.1fr 1fr; }
    .ca-lead .ca-card__media { aspect-ratio: auto; height: 100%; min-height: 19rem; }
    .ca-lead .ca-card__body { padding: 2rem; justify-content: center; }
    .ca-lead .ca-card__title { font-size: 1.95rem; line-height: 1.2; }
    .ca-lead .ca-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. */
.ca-ph {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 11rem;
    position: relative;
    overflow: hidden;
}
.ca-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%);
}
.ca-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;
}
.ca-ph--1 { background: linear-gradient(140deg, var(--primary-color, #005470) 0%, #02415f 100%); }
.ca-ph--2 { background: linear-gradient(140deg, #02415f 0%, var(--accent-color, #853275) 160%); }
.ca-ph--3 { background: linear-gradient(140deg, var(--accent-color, #853275) 0%, #4a1c42 100%); }
.ca-ph--4 { background: linear-gradient(140deg, var(--tint-color, #f2e4fa) 0%, var(--accent-color, #853275) 170%); }
.ca-ph--5 { background: linear-gradient(140deg, #0e7490 0%, var(--primary-color, #005470) 100%); }
.ca-ph--6 { background: linear-gradient(140deg, var(--primary-color, #005470) 0%, var(--accent-color, #853275) 170%); }

/* --- Article ------------------------------------------------------------- */
.ca-article__head { margin-bottom: 2rem; }
.ca-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);
}
.ca-article__meta { margin-top: 1rem; font-size: 0.875rem; color: #6b7280; }
.ca-article__hero {
    margin-bottom: 2rem;
    border-radius: 1rem;
    overflow: hidden;
    aspect-ratio: 16 / 7;
}
.ca-article__hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ca-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. */
.ca-service {
    /* The homepage's "List Your Community Today" card: lavender, teal headline, plum button. */
    margin-top: 2.5rem;
    padding: 1.75rem 2rem;
    border-radius: var(--radius-2xl, 1.5rem);
    background: var(--tint-color, #f2e4fa);
    color: #374151;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.ca-service__text { max-width: 44ch; }
.ca-service__title {
    font-family: var(--heading-font, Inter), system-ui, sans-serif;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--primary-color, #005470);
}
.ca-service__sub { margin-top: 0.35rem; font-size: 0.95rem; color: #374151; }
.ca-service__btn {
    display: inline-block;
    padding: 0.8rem 1.5rem;
    border-radius: var(--radius-button, 9999px);
    background: var(--accent-color, #853275);
    /* Computed in inc/brand.php - see ca_readable_ink(): white on the plum. */
    color: var(--accent-ink, #ffffff);
    font-weight: 700;
    font-size: 0.95rem;
    text-decoration: none;
    white-space: nowrap;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--accent-color, #853275) 24%, transparent);
}
.ca-service__btn:hover { filter: brightness(1.05); }

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

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

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

/* --- Chrome shims for the Release 2.3.0 header --------------------------
   The directory draws its wide menu spacing and the justified dropdown rows
   with classes that are in output.css, but bg-white/20 and text-white/80 on the
   mobile Create Account tile are alpha variants the build drops (see above). */
.bg-white\/20 { background-color: rgb(255 255 255 / 0.2); }
.text-white\/80 { color: rgb(255 255 255 / 0.8); }
.from-primary\/10 { --tw-gradient-from: color-mix(in srgb, var(--primary-color) 10%, transparent); --tw-gradient-to: transparent; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to); }
.to-primary\/5 { --tw-gradient-to: color-mix(in srgb, var(--primary-color) 5%, transparent); }
/* Marker classes the directory's header carries (its own inline CSS skins them);
   here they only need to exist so check-classes.py knows they are deliberate. */
.site-header.header-light { background-color: #ffffff; }
.site-nav { align-items: center; }