/* ============================================================
   Rich Content Block — Prose styles
   Targets .rc-prose > * so these rules never leak to other blocks.
   ============================================================ */

/* ── Layout ──────────────────────────────────────────────── */

.rc-section {
    position: relative;
    z-index: 1;
    width: 100%;
}

.rc-container {
    margin-left: auto;
    margin-right: auto;
    padding-left: 2rem;
    padding-right: 2rem;
    box-sizing: border-box;
}

/* Width variants */
.rc-section--width-readable .rc-container { max-width: 72ch; }
.rc-section--width-wide     .rc-container { max-width: 900px; }
.rc-section--width-full     .rc-container { max-width: 100%; }

/* Vertical padding variants */
.rc-section--pad-none   { padding-top: 0;    padding-bottom: 0; }
.rc-section--pad-small  { padding-top: 2rem; padding-bottom: 2rem; }
.rc-section--pad-normal { padding-top: 4rem; padding-bottom: 4rem; }
.rc-section--pad-large  { padding-top: 8rem; padding-bottom: 8rem; }

/* ── Base prose ───────────────────────────────────────────── */

.rc-prose {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1rem;
    line-height: 1.8;
    min-height: 3rem;
}

/* ── Headings ─────────────────────────────────────────────── */

.rc-prose h1,
.rc-prose h2,
.rc-prose h3,
.rc-prose h4,
.rc-prose h5,
.rc-prose h6 {
    font-weight: 700;
    line-height: 1.2;
    color: #fff;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
}

.rc-prose h1 { font-size: clamp(2rem, 4vw, 3rem); }
.rc-prose h2 { font-size: clamp(1.5rem, 3vw, 2.25rem); }
.rc-prose h3 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
.rc-prose h4 { font-size: 1.25rem; }
.rc-prose h5 { font-size: 1.125rem; }
.rc-prose h6 { font-size: 1rem; }

/* First child: no top margin */
.rc-prose > *:first-child { margin-top: 0; }

/* ── Paragraphs & inline ──────────────────────────────────── */

.rc-prose p {
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
}

.rc-prose strong,
.rc-prose b { color: #fff; font-weight: 700; }

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

.rc-prose u { text-decoration: underline; }

.rc-prose s,
.rc-prose del { text-decoration: line-through; opacity: 0.7; }

/* ── Links ────────────────────────────────────────────────── */

.rc-prose a:not([class]) {
    color: #FF3300;
    text-decoration: underline;
    text-underline-offset: 3px;
    transition: opacity 0.15s ease;
}

.rc-prose a:not([class]):hover { opacity: 0.8; }

/* ── Lists ────────────────────────────────────────────────── */

.rc-prose ul,
.rc-prose ol {
    padding-left: 1.5rem;
    margin-top: 0;
    margin-bottom: 1.25rem;
    color: rgba(255, 255, 255, 0.75);
    line-height: 1.8;
}

.rc-prose ul { list-style-type: disc; }
.rc-prose ol { list-style-type: decimal; }

.rc-prose li { margin-bottom: 0.4rem; }
.rc-prose li > ul,
.rc-prose li > ol { margin-top: 0.4rem; margin-bottom: 0; }

/* ── Blockquote ───────────────────────────────────────────── */

.rc-prose blockquote {
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid #FF3300;
    background: rgba(255, 51, 0, 0.06);
    border-radius: 0 4px 4px 0;
    font-size: 1.125rem;
    font-style: italic;
    color: rgba(255, 255, 255, 0.85);
}

.rc-prose blockquote p:last-child { margin-bottom: 0; }

/* ── Code & pre ───────────────────────────────────────────── */

.rc-prose code {
    font-family: 'Courier New', Courier, monospace;
    font-size: 0.875em;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 0.15em 0.45em;
    border-radius: 4px;
    color: #FF9980;
}

.rc-prose pre {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1.25rem 1.5rem;
    overflow-x: auto;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    line-height: 1.6;
}

.rc-prose pre code {
    background: none;
    border: none;
    padding: 0;
    color: rgba(255, 255, 255, 0.85);
    font-size: inherit;
}

/* ── Horizontal rule ──────────────────────────────────────── */

.rc-prose hr {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    margin: 3rem 0;
}

/* ── Tables ───────────────────────────────────────────────── */

.rc-prose table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5rem;
    font-size: 0.9375rem;
}

.rc-prose th,
.rc-prose td {
    text-align: left;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.12);
    vertical-align: top;
}

.rc-prose th {
    background: rgba(255, 255, 255, 0.06);
    font-weight: 700;
    color: #fff;
}

.rc-prose tr:nth-child(even) td {
    background: rgba(255, 255, 255, 0.03);
}

/* Table overflow on small screens */
.rc-prose .rc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Images ───────────────────────────────────────────────── */

.rc-prose img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
}

/* WordPress alignment classes */
.rc-prose .aligncenter,
.rc-prose img.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.rc-prose .alignleft,
.rc-prose img.alignleft {
    float: left;
    margin: 0.25rem 1.5rem 1rem 0;
}

.rc-prose .alignright,
.rc-prose img.alignright {
    float: right;
    margin: 0.25rem 0 1rem 1.5rem;
}

.rc-prose .alignnone { margin-bottom: 1rem; }

/* Figure / caption */
.rc-prose figure {
    margin: 1.5rem 0;
}

.rc-prose figcaption,
.rc-prose .wp-caption-text {
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 0.5rem;
    font-style: italic;
}

.rc-prose .wp-caption {
    max-width: 100%;
}

/* Clearfix after floated images */
.rc-prose::after,
.rc-prose p::after {
    content: '';
    display: table;
    clear: both;
}

/* ── Embeds (YouTube, Vimeo, etc.) ────────────────────────── */

.rc-prose .wp-block-embed,
.rc-prose .wp-video,
.rc-prose .wp-audio {
    margin: 1.5rem 0;
}

/* Responsive iframe wrapper */
.rc-prose .wp-block-embed__wrapper,
.rc-prose .embed-responsive {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.rc-prose .wp-block-embed__wrapper iframe,
.rc-prose .embed-responsive iframe,
.rc-prose iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* Standalone iframes (not wrapped) */
.rc-prose > iframe {
    position: static;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    margin-bottom: 1.5rem;
}

/* ── Buttons (generated by editor) ───────────────────────── */

.rc-prose .wp-block-button__link,
.rc-prose .button,
.rc-prose [class*="btn"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background: #FF3300;
    color: #fff !important;
    font-weight: 700;
    text-decoration: none !important;
    border-radius: 6px;
    transition: opacity 0.15s ease;
    cursor: pointer;
}

.rc-prose .wp-block-button__link:hover,
.rc-prose .button:hover,
.rc-prose [class*="btn"]:hover { opacity: 0.85; }

/* ── First block on page: compensate fixed header ────────── */

/* When rich-content is the first block on a page, the custom CSS rule
   `.site-main:has(section) { padding: 0 }` removes the default top padding.
   We restore the header clearance here. */
.site-main > .wp-block-alkemia-rich-content:first-child .rc-section--pad-none   { padding-top: 112px; }
.site-main > .wp-block-alkemia-rich-content:first-child .rc-section--pad-small  { padding-top: calc(112px + 1rem); }
.site-main > .wp-block-alkemia-rich-content:first-child .rc-section--pad-normal { padding-top: calc(112px + 2rem); }
.site-main > .wp-block-alkemia-rich-content:first-child .rc-section--pad-large  { padding-top: calc(112px + 4rem); }

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 600px) {
    .rc-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    .rc-prose .alignleft,
    .rc-prose img.alignleft,
    .rc-prose .alignright,
    .rc-prose img.alignright {
        float: none;
        margin: 0 0 1rem 0;
        display: block;
        width: 100%;
    }
}