/**
 * .prose typography styles for WYSIWYG-rendered content.
 *
 * Why this file exists:
 * Five templates (single-case_study, page, page-terms, page-privacy-policy,
 * page-cancellation-refund) wrap WordPress editor output in
 * <div class="prose ..."> so Gutenberg-authored h1/h2/h3/p/blockquote/etc.
 * get styled without any per-page CSS. The `.prose` class name comes from
 * Tailwind's @tailwindcss/typography plugin, which was never installed in
 * this theme — tailwind.config.js's plugins array is empty, and grep on
 * assets/css/output.css finds zero `.prose` rules.
 *
 * Combined with Tailwind Preflight (loaded via `@tailwind base`) which
 * resets every h1-h6 to `font-size: inherit; font-weight: inherit; margin: 0`
 * and every p to `margin: 0`, Gutenberg's <h2 class="wp-block-heading">Test1</h2>
 * ended up rendering as body text with no gap between paragraphs.
 *
 * This stylesheet fills in that missing typography layer without pulling
 * @tailwindcss/typography in as a build dependency. Enqueued after
 * output.css in functions.php so it wins the cascade.
 *
 * Only styles descendants of `.prose` (and the `.prose-lg` size variant +
 * `.prose-invert` dark-background variant used across the five templates).
 * Nothing outside a `.prose` wrapper is affected.
 */

/* ─── Base .prose block ─────────────────────────────────────────────── */

.prose {
    color: #374151;
    line-height: 1.75;
    font-size: 16px;
}
.prose > * + * { margin-top: 1.25em; }

/* Headings — em-based so they scale with the wrapper's font-size */
.prose h1,
.prose h2,
.prose h3,
.prose h4,
.prose h5,
.prose h6 {
    color: #0a0a1a;
    font-family: 'Montserrat', 'Inter', sans-serif;
    font-weight: 700;
    line-height: 1.25;
    margin-top: 1.6em;
    margin-bottom: 0.6em;
}
.prose h1 { font-size: 2.25em; }
.prose h2 { font-size: 1.75em; }
.prose h3 { font-size: 1.375em; }
.prose h4 { font-size: 1.125em; }
.prose h5 { font-size: 1em; }
.prose h6 { font-size: 0.875em; text-transform: uppercase; letter-spacing: 0.05em; }

/* First heading in the block shouldn't push down away from the section top. */
.prose > h1:first-child,
.prose > h2:first-child,
.prose > h3:first-child,
.prose > h4:first-child,
.prose > h5:first-child,
.prose > h6:first-child { margin-top: 0; }

/* Paragraphs */
.prose p {
    margin-top: 0;
    margin-bottom: 1.25em;
}
.prose p:last-child { margin-bottom: 0; }

/* Links */
.prose a {
    color: #EC288A;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.prose a:hover { color: #6021C3; }

/* Emphasis */
.prose strong,
.prose b { color: #0a0a1a; font-weight: 600; }
.prose em,
.prose i { font-style: italic; }

/* Lists */
.prose ul,
.prose ol {
    margin-top: 1em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
}
.prose ul { list-style-type: disc; }
.prose ol { list-style-type: decimal; }
.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}
.prose li > p { margin-top: 0.75em; margin-bottom: 0.75em; }
.prose ul ul,
.prose ul ol,
.prose ol ul,
.prose ol ol { margin-top: 0.5em; margin-bottom: 0.5em; }

/* Blockquote */
.prose blockquote {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
    border-left: 3px solid #EC288A;
    color: #555;
    font-style: italic;
}

/* Code + pre */
.prose code {
    color: #0a0a1a;
    background: rgba(0, 0, 0, 0.05);
    padding: 0.15em 0.35em;
    border-radius: 4px;
    font-size: 0.9em;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.prose pre {
    background: #0a0a1a;
    color: #f1f5f9;
    padding: 1em 1.25em;
    border-radius: 8px;
    overflow-x: auto;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    font-size: 0.9em;
    line-height: 1.6;
}
.prose pre code {
    background: transparent;
    color: inherit;
    padding: 0;
    border-radius: 0;
    font-size: inherit;
}

/* Images + figures */
.prose img,
.prose figure {
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-radius: 8px;
    max-width: 100%;
    height: auto;
}
.prose figcaption {
    margin-top: 0.75em;
    font-size: 0.875em;
    color: #6b7280;
    text-align: center;
}

/* Horizontal rule */
.prose hr {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
    border: 0;
    border-top: 1px solid #e5e7eb;
}

/* Tables */
.prose table {
    width: 100%;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
    border-collapse: collapse;
    font-size: 0.9em;
}
.prose th,
.prose td {
    padding: 0.6em 0.75em;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
}
.prose th { color: #0a0a1a; font-weight: 600; }

/* ─── .prose-lg size variant ────────────────────────────────────────── */

.prose-lg { font-size: 18px; line-height: 1.8; }
.prose-lg h1 { font-size: 2.5em; }
.prose-lg h2 { font-size: 1.875em; }
.prose-lg h3 { font-size: 1.5em; }
.prose-lg p { margin-bottom: 1.35em; }

/* ─── .prose-invert (dark backgrounds) ──────────────────────────────── */

.prose-invert { color: #d1d5db; }
.prose-invert h1,
.prose-invert h2,
.prose-invert h3,
.prose-invert h4,
.prose-invert h5,
.prose-invert h6 { color: #ffffff; }
.prose-invert strong,
.prose-invert b { color: #ffffff; }
.prose-invert a { color: #f472b6; }
.prose-invert a:hover { color: #ffffff; }
.prose-invert blockquote { color: #e5e7eb; border-left-color: #f472b6; }
.prose-invert code { background: rgba(255, 255, 255, 0.1); color: #ffffff; }
.prose-invert hr { border-top-color: #374151; }
.prose-invert th { color: #ffffff; }
.prose-invert th,
.prose-invert td { border-bottom-color: #374151; }