/*
 * ============================================================================
 * MFKA Prose Styles — typography for long-form text content
 * ============================================================================
 *
 * Use the `.prose` class on a container that wraps multi-paragraph content
 * (privacy notice, terms of use, about page, blog posts).
 *
 * The prose container handles:
 *   - vertical rhythm between block elements
 *   - heading hierarchy
 *   - lists, tables, blockquotes, code blocks
 *   - line-length cap (max-width: 65ch) — set on parent .container--prose
 *
 * ============================================================================
 */

.prose {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    color: var(--mfka-ink-700);
}

/* ---------------------------------------------------------------------------
 * Headings
 * ------------------------------------------------------------------------- */
.prose h1 {
    font-family: var(--font-display);
    font-size: clamp(1.875rem, 3vw + 1rem, var(--text-4xl));
    font-weight: 700;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--mfka-ink-900);
    margin-block-end: var(--space-5);
    text-wrap: balance;
}

.prose h2 {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: 600;
    line-height: var(--leading-tight);
    color: var(--mfka-green-700);
    margin-block-start: var(--space-7);
    margin-block-end: var(--space-3);
    padding-block-end: var(--space-2);
    border-bottom: 1px solid var(--mfka-ink-200);
}

.prose h2:first-child {
    margin-block-start: 0;
}

.prose h3 {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    font-weight: 600;
    line-height: var(--leading-snug);
    color: var(--mfka-ink-900);
    margin-block-start: var(--space-6);
    margin-block-end: var(--space-2);
}

.prose h4 {
    font-family: var(--font-body);
    font-size: var(--text-lg);
    font-weight: 700;
    color: var(--mfka-ink-900);
    margin-block-start: var(--space-5);
    margin-block-end: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * Paragraphs and inline emphasis
 * ------------------------------------------------------------------------- */
.prose p {
    margin-block-end: var(--space-4);
}

.prose p:last-child {
    margin-block-end: 0;
}

.prose strong, .prose b {
    font-weight: 700;
    color: var(--mfka-ink-900);
}

.prose em, .prose i {
    font-style: italic;
}

.prose a {
    color: var(--mfka-green-600);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: var(--mfka-gold-300);
    font-weight: 500;
}

.prose a:hover {
    color: var(--mfka-green-700);
    text-decoration-color: var(--mfka-green-600);
}

/* ---------------------------------------------------------------------------
 * Lists
 * ------------------------------------------------------------------------- */
.prose ul, .prose ol {
    margin-block: var(--space-4);
    padding-inline-start: var(--space-6);
}

.prose li {
    margin-block-end: var(--space-2);
    padding-inline-start: var(--space-2);
}

.prose li::marker {
    color: var(--mfka-green-500);
    font-weight: 700;
}

.prose ul li::marker {
    content: "▸  ";
    color: var(--mfka-gold-400);
}

/* Nested lists */
.prose li > ul,
.prose li > ol {
    margin-block: var(--space-2);
}

/* ---------------------------------------------------------------------------
 * Horizontal rules — subtle dividers
 * ------------------------------------------------------------------------- */
.prose hr {
    border: none;
    height: 1px;
    background: linear-gradient(
        90deg,
        transparent 0%,
        var(--mfka-ink-200) 20%,
        var(--mfka-ink-200) 80%,
        transparent 100%
    );
    margin-block: var(--space-7);
}

/* ---------------------------------------------------------------------------
 * Tables — for structured info (e.g. data categories, processing purposes)
 * ------------------------------------------------------------------------- */
.prose table {
    width: 100%;
    border-collapse: collapse;
    margin-block: var(--space-5);
    font-size: var(--text-sm);
    background-color: var(--mfka-cream);
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-xs);
}

.prose thead {
    background-color: var(--mfka-green-600);
    color: var(--mfka-cream);
}

.prose th {
    text-align: start;
    padding: var(--space-3) var(--space-4);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    font-size: var(--text-xs);
    text-transform: uppercase;
}

.prose td {
    padding: var(--space-3) var(--space-4);
    border-block-start: 1px solid var(--mfka-ink-200);
    vertical-align: top;
}

.prose tbody tr:nth-child(even) {
    background-color: var(--mfka-paper);
}

/* On narrow screens, allow horizontal scroll instead of crushing layout */
@media (max-width: 599px) {
    .prose table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ---------------------------------------------------------------------------
 * Blockquotes — for emphasised callouts within prose
 * ------------------------------------------------------------------------- */
.prose blockquote {
    margin-block: var(--space-5);
    padding: var(--space-4) var(--space-5);
    border-inline-start: 4px solid var(--mfka-gold-400);
    background-color: var(--mfka-paper);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    color: var(--mfka-ink-700);
    font-style: normal;
}

.prose blockquote p:last-child {
    margin-block-end: 0;
}

/* ---------------------------------------------------------------------------
 * Code (inline + block)
 * ------------------------------------------------------------------------- */
.prose code {
    font-family: var(--font-mono);
    font-size: 0.9em;
    background-color: var(--mfka-paper);
    padding: 0.1em 0.4em;
    border-radius: var(--radius-sm);
    color: var(--mfka-green-700);
    font-weight: 500;
}

/* TODO placeholder markers — for content that needs to be filled in */
.prose mark.todo {
    background-color: var(--mfka-warning-bg);
    color: var(--mfka-warning);
    padding: 0.1em 0.5em;
    border-radius: var(--radius-sm);
    font-weight: 500;
    font-style: italic;
    font-size: 0.9em;
    border: 1px dashed var(--mfka-warning);
}

.prose pre {
    background-color: var(--mfka-ink-900);
    color: var(--mfka-cream);
    padding: var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    overflow-x: auto;
    margin-block: var(--space-5);
}

.prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------------
 * Document meta — small lead block at top of legal pages
 * ------------------------------------------------------------------------- */
.prose-meta {
    font-size: var(--text-sm);
    color: var(--mfka-ink-500);
    margin-block-end: var(--space-6);
    padding-block-end: var(--space-4);
    border-bottom: 1px solid var(--mfka-ink-200);
}

.prose-meta strong {
    color: var(--mfka-ink-700);
}

/* ---------------------------------------------------------------------------
 * Lead paragraph — bigger, lighter, sits right under the H1
 * ------------------------------------------------------------------------- */
.prose-lead {
    font-size: var(--text-lg);
    line-height: var(--leading-normal);
    color: var(--mfka-ink-600);
    margin-block-end: var(--space-6);
}

/* ---------------------------------------------------------------------------
 * Page title block (above the prose, includes badge + h1)
 * ------------------------------------------------------------------------- */
.page-title-block {
    margin-block-end: var(--space-7);
}

.page-title-block .badge {
    margin-block-end: var(--space-3);
}