/* ============================================================================
   blog.css - Autohaus article typography
   ----------------------------------------------------------------------------
   Implements docs/BRAND.md for the article body. The article HTML is stored in
   the database, so every tag it can emit needs an explicit style here (Tailwind
   preflight resets headings, lists and quotes).

   Rules of the system:
     - Space Grotesk body / Archivo headings, both loaded by _Layout.cshtml.
     - Square. Radius 0 everywhere. No shadows, no gradients.
     - Colour comes from the tokens brand.css declares on :root
       (--navy, --signal, --steel, --line, --bone). Fallback hexes are given so
       this file still renders correctly if brand.css is unavailable.
     - Size comes from the same place: the three-size scale (--fs-body 18px,
       --fs-subtitle 22->26px, --fs-meta 16px). The article body is body size; the
       headings inside an article are document structure, not page titles, so h1/h2
       take --fs-subtitle and h3/h4 sit at body size in Archivo bold. --fs-subtitle
       already clamps down on a phone, so there are no mobile size overrides.
     - The 2px Signal Blue rule is the motif: above a section-break h2, as the
       <hr>, and as the left edge of a pull-quote.
     - Signal Blue links sit on WHITE only (5.1:1). The article column is white.
   ========================================================================== */

/* ----------------------------------------------------- featured image ---- */

.blog-featured-image {
    margin: 0 0 2.5rem;
    border: 1px solid var(--line, #E6E3DC);
    border-radius: 0;
    background-color: var(--bone-50, #F7F6F3);
    overflow: hidden;
    box-shadow: none;
}

.blog-featured-image img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0;
}

/* ------------------------------------------------------------- column ---- */

.blog-content {
    font-family: var(--font-body, 'Space Grotesk', system-ui, sans-serif);
    font-size: var(--fs-body, 1.125rem);
    line-height: 1.75;
    color: var(--navy, #101D36);
}

/* --------------------------------------------------------- headings ------ */

.blog-content h1,
.blog-content h2,
.blog-content h3,
.blog-content h4 {
    font-family: var(--font-display, 'Archivo', system-ui, sans-serif);
    font-weight: 700; /* fallback when the variable font is unavailable */
    font-variation-settings: 'wdth' 105, 'wght' 700;
    letter-spacing: -0.015em;
    color: var(--navy, #101D36);
    margin: 2.5rem 0 0.75rem;
    line-height: 1.14;
    text-wrap: balance;
}

/* The page title above the article is the only --fs-title on the page. Inside the
   article, h1/h2 are subtitle size and h3/h4 are body size set in Archivo bold. */
.blog-content h1,
.blog-content h2 { font-size: var(--fs-subtitle, 1.625rem); }

.blog-content h3,
.blog-content h4 { font-size: var(--fs-body, 1.125rem); }

/* The logo's 2px rule, carried into the article as the section marker.
   Scoped to a genuine section break - an h2 that follows body content - so the
   first h2 of a post does not stack a second rule under the h1's own rule. */
.blog-content p + h2::before,
.blog-content ul + h2::before,
.blog-content ol + h2::before,
.blog-content blockquote + h2::before,
.blog-content figure + h2::before,
.blog-content table + h2::before {
    content: "";
    display: block;
    width: 48px;
    height: 2px;
    margin-bottom: 1rem;
    background-color: var(--signal, #1F5FFF);
}

/* A centred heading centres its rule too - the pseudo-element is a block, so it
   would otherwise stay hard left. Database HTML centres with <center>, align or
   an inline text-align. */
.blog-content center h2::before,
.blog-content h2[align="center"]::before,
.blog-content h2[style*="text-align: center"]::before,
.blog-content h2[style*="text-align:center"]::before {
    margin-left: auto;
    margin-right: auto;
}

/* ------------------------------------------------------------ copy ------- */

.blog-content p { margin: 0 0 1.25rem; }

.blog-content ul,
.blog-content ol {
    margin: 0 0 1.25rem;
    padding-left: 1.5rem;
}

.blog-content ul { list-style: disc; }
.blog-content ol { list-style: decimal; }
.blog-content li { margin-bottom: 0.5rem; }
.blog-content li::marker { color: var(--signal, #1F5FFF); }

.blog-content a {
    color: var(--signal, #1F5FFF);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}

.blog-content a:hover { color: var(--navy, #101D36); }

.blog-content strong,
.blog-content b {
    font-weight: 700;
    color: var(--navy, #101D36);
}

/* --------------------------------------------------------- media --------- */

.blog-content img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: 0;
    margin: 2rem auto;
}

.blog-content figure { margin: 2rem 0; }

.blog-content iframe,
.blog-content video {
    display: block;
    max-width: 100%;
    margin: 2rem auto;
    border: 1px solid var(--line, #E6E3DC);
    border-radius: 0;
}

/* Steel captions at the meta size (16px) - the floor for Steel on white/bone. */
.blog-content figcaption,
.blog-content caption,
.blog-featured-image figcaption {
    font-size: var(--fs-meta, 1rem);
    line-height: 1.6;
    color: var(--steel, #4A5468);
    text-align: left;
    margin-top: 0.625rem;
}

/* ----------------------------------------------------- pull-quotes ------- */

.blog-content blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--bone, #EDEBE6);
    border: 0;
    border-left: 2px solid var(--signal, #1F5FFF);
    border-radius: 0;
    color: var(--navy, #101D36);
    font-size: var(--fs-body, 1.125rem);
    line-height: 1.65;
}

.blog-content blockquote p:last-child { margin-bottom: 0; }

/* Signal Blue on Bone is 4.26:1 - under AA. Inside a pull-quote a link goes
   Navy; the underline still carries the affordance. */
.blog-content blockquote a { color: var(--navy, #101D36); }

/* ---------------------------------------------------------- rules -------- */

.blog-content hr {
    width: 48px;
    height: 2px;
    margin: 2.5rem 0;
    border: 0;
    background-color: var(--signal, #1F5FFF);
}

/* ---------------------------------------------------------- tables ------- */

.blog-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 2rem 0;
    font-size: var(--fs-meta, 1rem);
}

.blog-content th,
.blog-content td {
    border: 1px solid var(--line, #E6E3DC);
    border-radius: 0;
    padding: 0.7rem 0.875rem;
    text-align: left;
    vertical-align: top;
}

.blog-content th {
    background: var(--bone, #EDEBE6);
    color: var(--navy, #101D36);
    font-weight: 700;
}

.blog-content center { display: block; text-align: center; }

/* --------------------------------------------------------- hashtags ------ */

.hashtag {
    margin-top: 2.5rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--line, #E6E3DC);
    color: var(--steel, #4A5468);
    font-size: var(--fs-meta, 1rem);
    line-height: 1.7;
    letter-spacing: 0.04em;
    word-break: break-word;
}

/* -------------------------------------------------------- responsive ----- */

/* No font-size overrides here: the scale is one size on every screen, and
   --fs-subtitle already clamps itself down on a narrow viewport. Only the
   pull-quote's padding tightens. */
@media (max-width: 640px) {
    .blog-content blockquote { padding: 1rem 1.125rem; }
}

@media (prefers-reduced-motion: reduce) {
    .blog-content a { transition: none; }
}