/* =========================================================
   ARTICLE CONTENT DESIGN SYSTEM
   =========================================================
   Applies ONLY inside `.article-content` (CMS-rendered article bodies,
   via PostRenderService) and `.article-author-block` (the auto-generated
   author section that accompanies it). Never loaded by, and never
   affects, any of the 30 existing hand-built pages -- those pages
   contain neither class anywhere in their markup.

   Every color/spacing/border value below is a REAL value measured from
   the site's own compiled Tailwind output during the design-system
   audit (see the audit report) -- not invented:
     gray-900 #111827   gray-700 #374151   gray-200 #e5e7eb
     gray-100 #f3f4f6   gray-300 #d1d5db
     apush-light-blue #60a5fa   apush-blue #1d4ed8   apush-purple #7c3aed

   Where real native articles used more than one competing pattern for
   the same concept (H2 sizing, table borders), ONE canonical choice was
   made deliberately -- documented inline at each such rule. H3 has no
   reliable native "generic subheading" precedent at all (sampled H3s
   were card-specific, colored per-context) -- its scale here is a new,
   deliberate design decision sized between H2 and body text, not a
   copy of any single existing H3.
   ========================================================= */

.article-content {
    color: #374151; /* gray-700 -- real native body-text color */
    font-size: 1rem;
    line-height: 1.75;
}
.dark .article-content {
    color: #d1d5db; /* gray-300 */
}

/* --- Headings --------------------------------------------------- */

.article-content h2 {
    font-size: 1.5rem;           /* text-2xl */
    font-weight: 700;
    color: #111827;              /* gray-900 */
    line-height: 1.3;
    margin: 2rem 0 1rem;
}
.article-content h2:first-child { margin-top: 0; }
.dark .article-content h2 { color: #f3f4f6; /* gray-100 */ }

@media (min-width: 768px) {
    /* Canonical choice: the site's own most complete native H2 variant
       combines a responsive md: step (text-2xl -> md:text-3xl). Several
       native articles omit the md: step entirely (a confirmed
       inconsistency) -- this design system standardizes on the more
       complete, responsive version for every CMS article going forward. */
    .article-content h2 { font-size: 1.875rem; /* md:text-3xl */ }
}

.article-content h3 {
    /* Deliberate new scale, NOT copied from any single native h3 --
       the audit found no reliable generic h3 (sampled instances were
       small, colored, card-specific headings, not body subheadings).
       Sits clearly between h2 and body text while sharing h2's real
       color tokens for visual family resemblance. */
    font-size: 1.25rem;          /* text-xl */
    font-weight: 700;
    color: #111827;
    line-height: 1.35;
    margin: 1.5rem 0 0.75rem;
}
.dark .article-content h3 { color: #f3f4f6; }

.article-content h4 {
    /* One step below h3, sharing the same color/family -- for long-form
       articles that need a third structural depth (e.g. sub-points inside
       an already-subdivided h3 section) without visually competing with
       body text (still bold, still distinct, just smaller). */
    font-size: 1.0625rem;        /* text-lg-ish, between text-base and text-xl */
    font-weight: 700;
    color: #111827;
    line-height: 1.4;
    margin: 1.25rem 0 0.5rem;
}
.dark .article-content h4 { color: #f3f4f6; }

/* --- Body text ---------------------------------------------------- */

.article-content p { margin: 0 0 1rem; }
.article-content p:last-child { margin-bottom: 0; }
.article-content strong { font-weight: 700; color: inherit; }
.article-content em { font-style: italic; }
.article-content s { text-decoration: line-through; opacity: 0.75; }

.article-content hr {
    border: none;
    border-top: 1px solid #e5e7eb; /* gray-200 */
    margin: 2rem 0;
}
.dark .article-content hr { border-top-color: #374151; /* gray-700 */ }

.article-content ul,
.article-content ol {
    margin: 0 0 1rem;
    padding-left: 1.5rem;
}
.article-content ul { list-style: disc; }
.article-content ol { list-style: decimal; }
.article-content li { margin-bottom: 0.35rem; }
.article-content li:last-child { margin-bottom: 0; }
.article-content ul ul,
.article-content ul ol,
.article-content ol ul,
.article-content ol ol {
    margin: 0.35rem 0 0;
}

/* --- Links ---------------------------------------------------------
   Real native in-body link convention: apush-light-blue + semibold,
   underline on hover only (matches main.css's own global
   `a { text-decoration: none }` -- underline is opt-in, not default). */

.article-content a {
    color: #60a5fa; /* apush-light-blue */
    font-weight: 600;
    text-decoration: none;
}
.article-content a:hover { text-decoration: underline; }
.article-content a:focus-visible {
    outline: 2px solid #60a5fa;
    outline-offset: 2px;
    border-radius: 2px;
}

/* --- Blockquote ------------------------------------------------------
   No native convention exists on this site to match -- kept deliberately
   restrained (light tint + accent rule), consistent with the site's
   card-and-rounded-corner language, never visually dominant. */

.article-content blockquote {
    margin: 0 0 1.5rem;
    padding: 0.75rem 1.25rem;
    border-left: 4px solid #60a5fa;
    background: #f8fafc;
    border-radius: 0 0.75rem 0.75rem 0;
    font-style: italic;
    color: #374151;
}
.dark .article-content blockquote {
    background: rgba(15, 23, 42, 0.4);
    color: #d1d5db;
    border-left-color: #60a5fa;
}
.article-content blockquote p:last-child { margin-bottom: 0; }

/* --- Tables ----------------------------------------------------------
   Canonical native pattern chosen (the audit found 4 competing variants,
   one with no border/radius/overflow protection at all):
     w-full text-sm border border-gray-200 dark:border-gray-700
     rounded-xl overflow-hidden, thead bg-gray-100 dark:bg-gray-700,
     cells px-4 py-3.

   Mobile overflow fix: PostRenderService wraps every <table> in
   `.table-wrapper` at RENDER TIME (never stored, never something the
   writer or editor need to produce) -- overflow-x lives on the wrapper,
   never on the page body. */

.article-content .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 1.5rem;
    border-radius: 0.75rem; /* rounded-xl, carried on the wrapper so the radius clips correctly with overflow */
}

.article-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem; /* text-sm */
    border: 1px solid #e5e7eb; /* gray-200 */
}
.dark .article-content table { border-color: #374151; /* gray-700 */ }

.article-content thead { background: #f3f4f6; /* gray-100 */ }
.dark .article-content thead { background: #374151; /* gray-700 */ }

.article-content th,
.article-content td {
    padding: 0.75rem 1rem; /* px-4 py-3 */
    text-align: left;
    border-bottom: 1px solid #e5e7eb;
    white-space: normal;
    word-break: break-word; /* long URLs/tokens never force page-level overflow */
}
.dark .article-content th,
.dark .article-content td { border-bottom-color: #374151; }
.article-content tbody tr:last-child td { border-bottom: none; }

/* --- Images / figure / figcaption ------------------------------------
   No native inline-image convention exists to match (no real article
   currently embeds one) -- this is new ground, kept restrained and
   consistent with the site's card-rounding language. Global
   `img{max-width:100%;height:auto}` in main.css already guarantees
   responsiveness site-wide; these rules only add the visual treatment. */

.article-content figure { margin: 0 0 1.5rem; }
.article-content figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
    border: 1px solid #e5e7eb;
}
.dark .article-content figure img { border-color: #374151; }

.article-content figcaption {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: #6b7280;
    text-align: center;
    font-style: italic;
}
.dark .article-content figcaption { color: #9ca3af; }

.article-content img { max-width: 100%; height: auto; } /* defensive, for a bare <img> outside <figure> */

/* --- FAQ / details -----------------------------------------------------
   Reproduces the real native pattern (border/radius/padding/flex summary/
   chevron-rotate-on-open, powered in native articles by main.css's own
   `.summary-chevron` + a Tailwind `group` utility pair) WITHOUT requiring
   any class on <details>/<summary> at all -- a pure CSS disclosure-marker
   technique achieves the identical visual behavior from bare semantic
   tags, keeping the sanitizer's "no class needed" rule intact for FAQ
   content specifically. */

.article-content details {
    border: 1px solid #e5e7eb;
    border-radius: 1rem;
    padding: 1rem;
    margin: 0 0 0.75rem;
}
.dark .article-content details { border-color: #374151; }

.article-content summary {
    cursor: pointer;
    font-weight: 600;
    color: #111827;
    display: flex;
    justify-content: space-between;
    align-items: center;
    list-style: none;
}
.dark .article-content summary { color: #f3f4f6; }
.article-content summary::-webkit-details-marker { display: none; }
.article-content summary::marker { content: ''; }
.article-content summary::after {
    content: '⌄';
    margin-left: 0.75rem;
    color: #6b7280;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}
.dark .article-content summary::after { color: #9ca3af; }
.article-content details[open] summary::after { transform: rotate(180deg); }
.article-content details > *:not(summary):first-of-type { margin-top: 0.75rem; }
.article-content details p:last-child { margin-bottom: 0; }

/* --- Callout / info box ------------------------------------------------
   The ONE place a class is required in CMS content at all (see
   HtmlSanitizerService's narrow, exact-match `class` allowlist). Visual
   language derived directly from the real, repeated amber disclaimer
   pattern already used across native articles (warning), extended with
   the same structural treatment in the site's existing blue accent
   family for info (blue-50/blue-900 already appear elsewhere in real
   markup for a different purpose -- reused here, not invented). */

.article-content .callout {
    border-radius: 1.5rem;
    padding: 1.25rem 1.5rem;
    margin: 0 0 1.5rem;
    border: 1px solid transparent;
}
.article-content .callout p:last-child { margin-bottom: 0; }

.article-content .callout-warning {
    background: linear-gradient(to right, #fffbeb, #fff7ed);
    border-color: #fde68a;
    color: #92400e;
}
.dark .article-content .callout-warning {
    background: rgba(120, 53, 15, 0.2);
    border-color: #b45309;
    color: #fef3c7;
}

.article-content .callout-info {
    background: #eff6ff;
    border-color: #bfdbfe;
    color: #1e3a8a;
}
.dark .article-content .callout-info {
    background: rgba(30, 58, 138, 0.2);
    border-color: #1d4ed8;
    color: #dbeafe;
}

/* --- Code / pre ----------------------------------------------------
   No real content on this site uses code/pre today -- kept minimal and
   restrained per the audit's recommendation (retained in scope, not a
   programming-documentation theme). overflow-x on <pre> is the mobile
   guarantee: a long unbroken code line scrolls inside the block, never
   the page. */

.article-content pre {
    background: #0f172a;
    color: #e2e8f0;
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    overflow-x: auto;
    margin: 0 0 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}
.article-content code {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.875em;
}
.article-content :not(pre) > code {
    background: #f1f5f9;
    color: #be185d;
    padding: 0.15em 0.4em;
    border-radius: 0.35rem;
}
.dark .article-content :not(pre) > code {
    background: #1e293b;
    color: #f472b6;
}
.article-content pre code {
    background: transparent;
    padding: 0;
    color: inherit;
}

/* =========================================================
   AUTHOR BLOCK (auto-generated by PostRenderService, never
   hand-typed by the writer)
   ========================================================= */

.article-author-block {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 1.5rem;
    padding: 1.5rem;
    margin-top: 2rem;
}
.dark .article-author-block {
    background: #1f2937; /* gray-800, matching the article card's own dark background */
    border-color: #374151;
}

.article-author-avatar {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 9999px;
    background: linear-gradient(135deg, #1d4ed8, #7c3aed); /* apush-blue -> apush-purple, real gradient pair already used on native avatar circles */
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1.125rem;
    flex-shrink: 0;
}

.article-author-block h2 {
    font-size: 1.125rem;
    font-weight: 700;
    color: #111827;
    margin: 0 0 0.25rem;
}
.dark .article-author-block h2 { color: #f3f4f6; }

.article-author-block p {
    font-size: 0.875rem;
    color: #4b5563;
    margin: 0 0 0.5rem;
}
.dark .article-author-block p { color: #9ca3af; }

.article-author-block .article-author-updated {
    font-size: 0.75rem;
    color: #6b7280;
    margin-bottom: 0;
}
.dark .article-author-block .article-author-updated { color: #6b7280; }

@media (max-width: 640px) {
    .article-author-block {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }
}