/* ==========================================================================
   MedForward — Content / Prose styles
   --------------------------------------------------------------------------
   Scope:  .content-page  → page shell + navy header band
                            (single.php, page.php, index.php)
           .mf-prose      → rich-text body produced by the_content()

   SAFETY: Every selector is namespaced under .content-page or .mf-prose,
   which exist ONLY in single.php / page.php / index.php. Nothing here is
   global, so marketing pages (page-{slug}.php) are unaffected — and none of
   these class names collide with the global icon-centering !important rules
   in the root style.css (verified: no __card/__item/__icon/etc. substrings).

   Loads after medforward-typography so it can re-establish the list markers
   and link styles that the global reset removes.

   Tokens taken from base/variables.css. Literal hex values are used only where
   no suitable token exists (body reading color, faint code/table tint); these
   are deliberate and documented inline.
   ========================================================================== */

/* ---- Page shell ---------------------------------------------------------- */

/* Navy header band — same gradient as inner-hero (minus rings/waves), so it
   flows out of the solid-navy .page-inner nav exactly like the other inner
   pages. Top padding clears the fixed nav (that's why h1 was being cut off).
   Left-aligned + 760px to read as an article/legal header, not a centered
   marketing hero. */
.content-page__header {
    background: linear-gradient(135deg,
        var(--color-navy) 0%,
        var(--color-navy-deep) 60%,
        #1a3d6a 100%);
    padding-top: calc(var(--nav-height) + 56px);
    padding-bottom: 48px;
}

/* Matches the site container (nav + footer) so the left edge of the header
   title and the body content lines up with the logo and footer. */
.content-page__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}

/* Keep running text at a readable measure, but ANCHORED LEFT inside the wide
   container (not centered) — so the left edge aligns with the logo/footer
   while line length stays comfortable. Raise this one value if you want
   longer lines; ~720–760px (~70–90 chars) is the readability sweet spot. */
.content-page__body .mf-prose,
.content-page__body .post-list,
.content-page__media,
.content-page .pagination,
.content-page .nav-links {
    max-width: 760px;
    margin-right: auto;               /* anchor to the left edge */
}

.content-page__eyebrow {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-teal);
    margin: 0 0 14px;
}

.content-page__title {
    font-size: var(--fs-h2);
    line-height: var(--lh-heading);
    font-weight: var(--fw-bold);
    color: #ffffff;
    margin: 0;
}

.content-page__body {
    padding-top: 48px;
    padding-bottom: 72px;
    min-height: 50vh;                 /* keeps the footer down on short pages */
}

.content-page__media {
    margin-bottom: 32px;
}
.content-page__media img {
    width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}

/* ---- Rich text (the_content output) ------------------------------------- */
.mf-prose {
    /* Darker than the site's default --color-gray body (#8A97A8), which is too
       light for long-form reading. ~9:1 contrast on the off-white page. */
    color: #33415A;
    font-size: var(--fs-body);
    line-height: var(--lh-body);
}

.mf-prose > *:first-child { margin-top: 0; }
.mf-prose > *:last-child  { margin-bottom: 0; }

.mf-prose p {
    margin: 0 0 1.4em;
}

/* Links — navy text + teal underline. The underline is the brand "link" cue;
   navy text keeps it readable (teal text alone fails contrast on white). */
.mf-prose a {
    color: var(--color-navy);
    font-weight: var(--fw-medium);
    text-decoration: underline;
    text-decoration-color: var(--color-teal);
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: color var(--transition-default);
}
.mf-prose a:hover,
.mf-prose a:focus {
    color: var(--color-teal);
}

/* Lists — restore the markers the global reset strips */
.mf-prose ul,
.mf-prose ol {
    margin: 0 0 1.4em;
    padding-left: 1.5em;
}
.mf-prose ul { list-style: disc; }
.mf-prose ol { list-style: decimal; }
.mf-prose li {
    margin-bottom: 0.5em;
    padding-left: 0.25em;
}
.mf-prose li::marker {
    color: var(--color-teal);
}
.mf-prose ul ul,
.mf-prose ol ol,
.mf-prose ul ol,
.mf-prose ol ul {
    margin: 0.5em 0 0.5em;
}

/* Headings within content (article subheads — sized below the page title) */
.mf-prose h2 {
    font-size: var(--fs-h3);          /* 28px */
    line-height: var(--lh-heading);
    font-weight: var(--fw-bold);
    color: var(--color-dark);
    margin: 2em 0 0.6em;
}
.mf-prose h3 {
    font-size: 22px;
    line-height: 1.3;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin: 1.8em 0 0.5em;
}
.mf-prose h4 {
    font-size: var(--fs-body);
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
    margin: 1.6em 0 0.5em;
}

/* Emphasis */
.mf-prose strong,
.mf-prose b {
    font-weight: var(--fw-bold);
    color: var(--color-dark);
}
.mf-prose em { font-style: italic; }

/* Blockquote */
.mf-prose blockquote {
    margin: 1.6em 0;
    padding: 0.5em 0 0.5em 1.25em;
    border-left: 3px solid var(--color-teal);
    color: var(--color-dark);
    font-style: italic;
}

/* Media */
.mf-prose img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-sm);
    margin: 1.5em 0;
}

/* Horizontal rule */
.mf-prose hr {
    border: 0;
    border-top: 1px solid var(--color-border);
    margin: 2.5em 0;
}

/* Inline code / preformatted (#EEF2F8 = faint tint just below the page bg) */
.mf-prose code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background: #EEF2F8;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    padding: 0.1em 0.35em;
}
.mf-prose pre {
    background: var(--color-dark);
    color: #eef2f8;
    padding: 1em 1.25em;
    border-radius: var(--radius-sm);
    overflow-x: auto;
    margin: 1.5em 0;
}
.mf-prose pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
}

/* Tables */
.mf-prose table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: var(--fs-small);
}
.mf-prose th,
.mf-prose td {
    border: 1px solid var(--color-border);
    padding: 0.6em 0.8em;
    text-align: left;
}
.mf-prose th {
    background: #EEF2F8;
    font-weight: var(--fw-semibold);
    color: var(--color-dark);
}

/* ---- Blog archive list (index.php) -------------------------------------- */
.post-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.post-card {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-border);
}
.post-card:last-child { border-bottom: 0; padding-bottom: 0; }

.post-card__date {
    font-size: var(--fs-xs);
    color: var(--color-text-muted);
    margin: 0 0 8px;
}
.post-card__title {
    font-size: var(--fs-h3);
    line-height: var(--lh-heading);
    font-weight: var(--fw-bold);
    margin: 0 0 12px;
}
.post-card__title a {
    color: var(--color-dark);
    text-decoration: none;
}
.post-card__title a:hover { color: var(--color-teal); }

.post-card__more {
    display: inline-block;
    margin-top: 12px;
    color: var(--color-navy);
    font-weight: var(--fw-semibold);
    text-decoration: none;
}
.post-card__more:hover {
    color: var(--color-teal);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* Pagination (the_posts_pagination) */
.content-page .pagination,
.content-page .nav-links {
    margin-top: 48px;
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.content-page .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    color: var(--color-dark);
    text-decoration: none;
}
.content-page .page-numbers:hover {
    border-color: var(--color-teal);
    color: var(--color-teal);
}
.content-page .page-numbers.current {
    background: var(--color-navy);
    color: #ffffff;
    border-color: var(--color-navy);
}

/* ---- Responsive --------------------------------------------------------- */
@media (max-width: 640px) {
    .content-page__header {
        padding-top: calc(var(--nav-height) + 40px);
        padding-bottom: 36px;
    }
    .content-page__body {
        padding-top: 36px;
        padding-bottom: 56px;
    }
}