/* ==========================================================================
   Article content (the_content of blog posts and article-style CPTs)

   Editors only pick the element — paragraph, heading level, list, quote,
   image — and every style and all spacing comes from here, so a post needs
   no classes or inline styling.

   Every rule targets two places:
     .entry-content                            the wrapper around the_content()
                                               in single.php / single-{cpt}.php
     .editor-styles-wrapper .is-root-container the block editor canvas, so posts
                                               look the same while being written

   functions/scripts.php loads this file, on the front end and in the editor,
   only for the post types in foundation_article_post_types(). Pages built from
   ACF blocks never get it, so the 32px block rhythm can't leak into them.

   Values are the base type roles (Heading/sm, Paragraph/md, Label/lg…). Per
   client, adjust colours, case and the quote box here to match their article
   design; the structure stays the same.
   ========================================================================== */

/* Paragraph/md, with long-form line height (1.4, vs 1.2 on the UI class) */
:is(.entry-content, .editor-styles-wrapper .is-root-container) {
    font-family: var(--font-paragraph, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--font-size-base, 16px);
    font-weight: var(--font-paragraph-weight, 400);
    line-height: 1.4;
    letter-spacing: 0.02em;
    color: var(--foreground, #494949);
}

/* Reset element margins (zero specificity via :where, so the rhythm below
   wins), then put 32px between every block. */
:is(.entry-content, .editor-styles-wrapper .is-root-container) :where(p, h1, h2, h3, h4, h5, h6, ul, ol, li, blockquote, figure, img, table, hr) {
    margin: 0;
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) > * + * {
    margin-top: var(--container-gap-default, 32px);
}
/* An intro line sits 24px above its list */
:is(.entry-content, .editor-styles-wrapper .is-root-container) > p + :is(ul, ol) {
    margin-top: var(--spacing-6, 24px);
}

/* Restate the body style on text elements, in case a global element rule
   (p, li…) would otherwise win over inheritance. */
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(p, ul, ol, li) {
    font: inherit;
    letter-spacing: inherit;
    color: inherit;
}

:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(strong, b) {
    font-weight: 700;
}

/* ---- Headings ------------------------------------------------------------
   H2 is the article's section heading (Heading/sm). H3–H6 step down the type
   scale. H1 is the post title, so an H1 typed into the content renders as H2. */
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(h1, h2, h3) {
    font-family: var(--font-heading, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
    font-weight: var(--font-heading-weight, 700);
    line-height: 1.1;
    letter-spacing: 0;
    color: var(--kore-slate, #333d47); /* KORE */
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(h1, h2) {
    font-size: var(--font-size-2xl, 24px);
}
/* Heading/xs */
:is(.entry-content, .editor-styles-wrapper .is-root-container) h3 {
    font-size: var(--font-size-xl, 20px);
}
/* Label/lg, Label/md */
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(h4, h5, h6) {
    font-family: var(--font-label, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
    font-weight: var(--font-label-weight, 600);
    line-height: 1.2;
    letter-spacing: 0;
    color: var(--foreground, #494949);
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) h4 {
    font-size: var(--font-size-lg, 18px);
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(h5, h6) {
    font-size: var(--font-size-base, 16px);
}

/* ---- Lists: 24px indent, no gap between items ---------------------------- */
:is(.entry-content, .editor-styles-wrapper .is-root-container) :is(ul, ol) {
    padding-left: var(--spacing-6, 24px);
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) ul { list-style: disc; }
:is(.entry-content, .editor-styles-wrapper .is-root-container) ol { list-style: decimal; }
:is(.entry-content, .editor-styles-wrapper .is-root-container) li { display: list-item; }
:is(.entry-content, .editor-styles-wrapper .is-root-container) li > :is(ul, ol) { margin-top: 0; }

/* ---- Links --------------------------------------------------------------- */
:is(.entry-content, .editor-styles-wrapper .is-root-container) a {
    color: var(--link, #21735c) /* KORE: 4.5:1 on white */;
    text-decoration: underline;
    text-underline-offset: 2px;
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) a:hover {
    color: var(--brand-800, #1f6653) /* KORE */;
}

/* ---- Images -------------------------------------------------------------- */
:is(.entry-content, .editor-styles-wrapper .is-root-container) img {
    display: block;
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-default, 4px);
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) figcaption {
    margin-top: var(--spacing-2, 8px);
    font-size: var(--font-size-sm, 14px);
    color: var(--muted-foreground, #494949);
}

/* ---- Pull quote (WordPress <blockquote> / Quote block) -------------------
   Muted box with a quote mark in the primary colour. The first paragraph is
   the quote; the next line is the name, any after it the job title. The
   Quote block's citation field (<cite>) gets the same name styling. */
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote {
    position: relative;
    /* side padding + 32px mark + gap */
    padding: var(--spacing-6, 24px) var(--spacing-8, 32px) var(--spacing-6, 24px) 96px;
    background: var(--muted, #f7f7f7);
    border: 0;
    border-radius: var(--radius-default, 4px);
    quotes: none;
}
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote::before {
    content: "";
    position: absolute;
    left: var(--spacing-8, 32px);
    top: var(--spacing-6, 24px);
    width: 32px;
    height: 32px;
    background: var(--primary, #7dcab0);
    -webkit-mask: url("../icons/quote.svg") no-repeat center / contain;
    mask: url("../icons/quote.svg") no-repeat center / contain;
}
/* Quote text — Heading/xs */
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote p:first-of-type {
    font-family: var(--font-heading, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--font-size-xl, 20px);
    font-weight: var(--font-heading-weight, 700);
    line-height: 1.1;
    letter-spacing: 0;
}
/* Job title — Paragraph/sm */
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote p:first-of-type ~ p {
    margin-top: var(--spacing-1, 4px);
    font-size: var(--font-size-sm, 14px);
    line-height: 1.2;
}
/* Name — Label/md */
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote p:first-of-type + p,
:is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote cite {
    display: block;
    margin-top: var(--spacing-6, 24px);
    font-family: var(--font-label, "Helvetica Neue", Helvetica, Arial, ui-sans-serif, system-ui, sans-serif);
    font-size: var(--font-size-base, 16px);
    font-style: normal;
    font-weight: var(--font-label-weight, 600);
    line-height: 1.2;
    letter-spacing: 0;
}

@media (max-width: 767px) {
    /* Quote mark moves above the text */
    :is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote {
        padding: var(--spacing-6, 24px);
    }
    :is(.entry-content, .editor-styles-wrapper .is-root-container) blockquote::before {
        position: static;
        display: block;
        margin-bottom: var(--spacing-3, 12px);
    }
}