/* ============================================================================
   entry-content.css — STYLING FOR CONTENT THAT COMES FROM THE DATABASE
   ----------------------------------------------------------------------------
   WHAT THIS IS FOR
     the_content() outputs whatever the client wrote in Gutenberg / the Classic
     Editor: headings, lists, quotes, tables, images, embeds, buttons, columns.
     None of that markup exists in the original template, so none of it had a
     style. This file gives every one of those elements a look built from the
     SAME design tokens as the rest of the site (variables.css + typography.css)
     — nothing is hardcoded, so re-skinning still happens in one place.

   WHERE IT APPLIES
     1. Front end — wrapper `.coco-entry-content`
        (single.php → post-content.php, page-content.php)
     2. Block editor — `.block-editor-block-list__layout`
        WordPress prefixes every selector here with `.editor-styles-wrapper`
        when it loads the file through add_editor_style(), so the second
        selector in each pair matches inside the editor and the author sees
        the real result while writing.

   ORDER
     Loaded AFTER main.css so it can rely on the tokens and still be overridden
     by a component's own utility classes if one is ever applied inline.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   1. THE CONTENT COLUMN
   -------------------------------------------------------------------------- */
.coco-entry-content {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    line-height: 1.8;
    color: rgb(var(--color-on-surface-variant-rgb));
    overflow-wrap: break-word;
}

/* Vertical rhythm: every direct child gets bottom spacing, the last one none.
   Using a single rule (instead of per-element margins) keeps the spacing
   predictable no matter what blocks the author combines. */
.coco-entry-content > *,
.block-editor-block-list__layout > * {
    margin-bottom: 1.75rem;
}

.coco-entry-content > *:last-child {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   2. HEADINGS
   typography.css deliberately resets h1–h6 to `inherit` so component utility
   classes can own them. Inside written content there are no utility classes,
   so the type scale has to be restated here.
   -------------------------------------------------------------------------- */
.coco-entry-content h1,
.coco-entry-content h2,
.coco-entry-content h3,
.coco-entry-content h4,
.coco-entry-content h5,
.coco-entry-content h6,
.block-editor-block-list__layout h1,
.block-editor-block-list__layout h2,
.block-editor-block-list__layout h3,
.block-editor-block-list__layout h4,
.block-editor-block-list__layout h5,
.block-editor-block-list__layout h6 {
    font-family: var(--font-headline);
    color: rgb(var(--color-primary-rgb));
    line-height: 1.25;
    scroll-margin-top: 120px;          /* clears the fixed navbar on anchor jumps */
}

.coco-entry-content h1,
.block-editor-block-list__layout h1 {
    font-family: var(--font-display);
    font-size: var(--font-size-display-lg-mobile);
    letter-spacing: var(--letter-spacing-display-lg);
    margin-top: 3.5rem;
}

.coco-entry-content h2,
.block-editor-block-list__layout h2 {
    font-size: var(--font-size-headline-md);
    margin-top: 3.5rem;
}

.coco-entry-content h3,
.block-editor-block-list__layout h3 {
    font-size: 26px;
    margin-top: 2.75rem;
}

.coco-entry-content h4,
.block-editor-block-list__layout h4 {
    font-size: 21px;
    margin-top: 2.25rem;
}

.coco-entry-content h5,
.block-editor-block-list__layout h5,
.coco-entry-content h6,
.block-editor-block-list__layout h6 {
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
    color: rgb(var(--color-secondary-rgb));
    margin-top: 2rem;
}

/* The first heading of an article should not push the column down. */
.coco-entry-content > :first-child {
    margin-top: 0;
}

/* ----------------------------------------------------------------------------
   3. PARAGRAPHS & INLINE TEXT
   -------------------------------------------------------------------------- */
.coco-entry-content p,
.block-editor-block-list__layout p {
    font-family: var(--font-body);
    font-size: var(--font-size-body-lg);
    line-height: 1.8;
}

/* The lead paragraph reads slightly larger, matching the editorial layouts. */
.coco-entry-content > p:first-of-type {
    font-size: 20px;
    color: rgb(var(--color-primary-rgb));
    opacity: 0.95;
}

.coco-entry-content strong,
.coco-entry-content b {
    color: rgb(var(--color-primary-rgb));
    font-weight: 700;
}

.coco-entry-content em,
.coco-entry-content i {
    font-style: italic;
}

.coco-entry-content mark,
.coco-entry-content .has-inline-color {
    background-color: rgb(var(--color-secondary-fixed-rgb) / 0.25);
    color: inherit;
    padding: 0 0.25em;
    border-radius: 4px;
}

.coco-entry-content small {
    font-size: var(--font-size-label-caps);
    opacity: 0.7;
}

.coco-entry-content abbr[title] {
    text-decoration: underline dotted;
    cursor: help;
}

/* Links — the site accent, underlined so they are distinguishable without
   relying on colour alone (WCAG 1.4.1). */
.coco-entry-content a,
.block-editor-block-list__layout a {
    color: rgb(var(--color-secondary-rgb));
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color var(--transition-base);
}

.coco-entry-content a:hover {
    color: rgb(var(--color-primary-rgb));
    text-decoration: none;
}

.coco-entry-content a:focus-visible {
    outline: 2px solid rgb(var(--color-secondary-rgb));
    outline-offset: 3px;
    border-radius: 2px;
}

/* ----------------------------------------------------------------------------
   4. LISTS
   -------------------------------------------------------------------------- */
.coco-entry-content ul,
.coco-entry-content ol,
.block-editor-block-list__layout ul,
.block-editor-block-list__layout ol {
    padding-left: 1.5rem;
}

.coco-entry-content ul { list-style: disc; }
.coco-entry-content ol { list-style: decimal; }
.coco-entry-content ul ul { list-style: circle; }
.coco-entry-content ol ol { list-style: lower-alpha; }

.coco-entry-content li {
    margin-bottom: 0.6rem;
    padding-left: 0.35rem;
}

.coco-entry-content li::marker {
    color: rgb(var(--color-secondary-rgb));
}

.coco-entry-content li > ul,
.coco-entry-content li > ol {
    margin-top: 0.6rem;
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   5. QUOTES
   Mirrors the pull-quote treatment used by the Purpose & Goals section.
   -------------------------------------------------------------------------- */
.coco-entry-content blockquote,
.block-editor-block-list__layout blockquote {
    position: relative;
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
    padding-left: 2rem;
    border-left: 2px solid rgb(var(--color-secondary-rgb) / 0.5);
    font-family: var(--font-headline);
    font-size: 22px;
    line-height: 1.5;
    font-style: italic;
    color: rgb(var(--color-primary-rgb));
}

.coco-entry-content blockquote p {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.coco-entry-content blockquote cite,
.coco-entry-content blockquote .wp-block-quote__citation {
    display: block;
    margin-top: 1rem;
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
    font-style: normal;
    color: rgb(var(--color-secondary-rgb));
}

/* Pull quote — the wide, centred variant. */
.coco-entry-content .wp-block-pullquote {
    padding: 2.5rem 0;
    border-top: 1px solid rgb(var(--color-glow-rgb) / 0.15);
    border-bottom: 1px solid rgb(var(--color-glow-rgb) / 0.15);
    border-left: 0;
    text-align: center;
}

.coco-entry-content .wp-block-pullquote blockquote {
    border-left: 0;
    padding-left: 0;
    font-size: 28px;
}

/* ----------------------------------------------------------------------------
   6. MEDIA — images, figures, captions, galleries, embeds
   -------------------------------------------------------------------------- */
.coco-entry-content img,
.coco-entry-content video,
.coco-entry-content iframe {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-default);
    display: block;
}

.coco-entry-content figure,
.block-editor-block-list__layout figure {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;
}

.coco-entry-content figcaption,
.coco-entry-content .wp-caption-text,
.coco-entry-content .wp-element-caption {
    margin-top: 0.85rem;
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    letter-spacing: 0.04em;
    text-align: center;
    color: rgb(var(--color-on-surface-variant-rgb) / 0.7);
}

.coco-entry-content .wp-block-image img {
    box-shadow: var(--shadow-article);
}

.coco-entry-content .wp-block-gallery {
    gap: var(--space-gutter);
}

/* Responsive embeds (YouTube, Vimeo, Spotify…). */
.coco-entry-content .wp-block-embed__wrapper {
    position: relative;
}

.coco-entry-content .wp-has-aspect-ratio .wp-block-embed__wrapper iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

/* ----------------------------------------------------------------------------
   7. ALIGNMENT (align-wide is enabled in inc/setup.php)
   -------------------------------------------------------------------------- */
.coco-entry-content .alignwide {
    margin-left: calc(-1 * var(--space-element-gap));
    margin-right: calc(-1 * var(--space-element-gap));
    max-width: none;
}

.coco-entry-content .alignfull {
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    max-width: 100vw;
    width: 100vw;
    border-radius: 0;
}

.coco-entry-content .aligncenter {
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}

.coco-entry-content .alignleft {
    float: left;
    margin: 0.5rem 2rem 1.5rem 0;
}

.coco-entry-content .alignright {
    float: right;
    margin: 0.5rem 0 1.5rem 2rem;
}

/* Clear the floats so the next section never wraps around them. */
.coco-entry-content::after {
    content: '';
    display: table;
    clear: both;
}

/* ----------------------------------------------------------------------------
   8. TABLES
   -------------------------------------------------------------------------- */
.coco-entry-content .wp-block-table,
.coco-entry-content figure.wp-block-table {
    overflow-x: auto;              /* wide tables scroll instead of breaking the page */
}

.coco-entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--font-size-body-md);
    background-color: rgb(var(--color-surface-container-rgb) / 0.4);
    border-radius: var(--radius-default);
    overflow: hidden;
}

.coco-entry-content th,
.coco-entry-content td {
    padding: 0.9rem 1.1rem;
    border: 1px solid rgb(var(--color-glow-rgb) / 0.08);
    text-align: left;
    vertical-align: top;
}

.coco-entry-content th {
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
    color: rgb(var(--color-primary-rgb));
    background-color: rgb(var(--color-surface-container-high-rgb) / 0.6);
}

.coco-entry-content tbody tr:hover {
    background-color: rgb(var(--color-glow-rgb) / 0.03);
}

/* ----------------------------------------------------------------------------
   9. CODE
   -------------------------------------------------------------------------- */
.coco-entry-content code,
.coco-entry-content kbd,
.coco-entry-content samp {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
    background-color: rgb(var(--color-glow-rgb) / 0.08);
    color: rgb(var(--color-secondary-rgb));
    padding: 0.15em 0.4em;
    border-radius: 5px;
}

.coco-entry-content pre {
    background-color: rgb(var(--color-surface-container-lowest-rgb));
    border: 1px solid rgb(var(--color-glow-rgb) / 0.08);
    border-radius: var(--radius-default);
    padding: 1.5rem;
    overflow-x: auto;
    font-size: var(--font-size-body-md);
    line-height: 1.6;
}

.coco-entry-content pre code {
    background: none;
    padding: 0;
    color: rgb(var(--color-on-surface-rgb));
}

/* ----------------------------------------------------------------------------
   10. SEPARATORS & MISC BLOCKS
   -------------------------------------------------------------------------- */
.coco-entry-content hr,
.coco-entry-content .wp-block-separator {
    border: 0;
    height: 1px;
    background-color: rgb(var(--color-glow-rgb) / 0.12);
    margin: 3rem auto;
}

.coco-entry-content .wp-block-separator.is-style-dots {
    background: none;
    text-align: center;
}

/* Button block — reuses the site's pill button language. */
.coco-entry-content .wp-block-button__link {
    display: inline-block;
    background-color: rgb(var(--color-primary-rgb));
    color: rgb(var(--color-on-primary-rgb));
    font-family: var(--font-label);
    font-size: var(--font-size-label-caps);
    font-weight: var(--font-weight-label-caps);
    letter-spacing: var(--letter-spacing-label-caps);
    text-transform: uppercase;
    text-decoration: none;
    padding: 1rem 2.5rem;
    border-radius: var(--radius-full);
    transition: all var(--transition-base);
}

.coco-entry-content .wp-block-button__link:hover {
    background-color: rgb(var(--color-secondary-fixed-rgb));
    color: rgb(var(--color-on-secondary-fixed-rgb));
    transform: scale(1.03);
}

.coco-entry-content .is-style-outline .wp-block-button__link {
    background: transparent;
    border: 1px solid rgb(var(--color-glow-rgb) / 0.3);
    color: rgb(var(--color-primary-rgb));
}

/* Columns keep the site gutter. */
.coco-entry-content .wp-block-columns {
    gap: var(--space-gutter);
}

/* Group / cover blocks with a background get the glass treatment. */
.coco-entry-content .wp-block-group.has-background,
.coco-entry-content .wp-block-cover {
    border-radius: var(--radius-lg);
    padding: 2rem;
}

/* Footnotes and the WordPress "more" anchor. */
.coco-entry-content .wp-block-footnotes {
    font-size: var(--font-size-body-md);
    opacity: 0.8;
}

/* Drop cap, when the author enables it on a paragraph. */
.coco-entry-content .has-drop-cap:not(:focus)::first-letter {
    font-family: var(--font-display);
    font-size: 3.6em;
    line-height: 0.75;
    float: left;
    margin: 0.1em 0.12em 0 0;
    color: rgb(var(--color-secondary-rgb));
}

/* ----------------------------------------------------------------------------
   11. SMALL SCREENS
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .coco-entry-content {
        font-size: var(--font-size-body-md);
    }

    .coco-entry-content p,
    .coco-entry-content > p:first-of-type {
        font-size: var(--font-size-body-md);
    }

    .coco-entry-content h1 { font-size: 32px; }
    .coco-entry-content h2 { font-size: 26px; }
    .coco-entry-content h3 { font-size: 22px; }

    .coco-entry-content blockquote {
        padding-left: 1.25rem;
        font-size: 19px;
    }

    .coco-entry-content .alignleft,
    .coco-entry-content .alignright {
        float: none;
        margin: 1.5rem auto;
    }
}