/**
 * Article (single post): the reading column and the core blocks inside it.
 *
 * Scope: .post-content, the column that holds the post content. On the front
 * end it is the container around GP's dynamic content block in the
 * post-header pattern (GP element "Single post template"). In the editor
 * includes/article/article-editor.js adds the class to the editor's root
 * container for posts, so the same plain selectors style the canvas.
 *
 * Column: --article-width (720px, 60–75 characters at the article text size).
 * Text: --article-font-size (17–19px fluid), --article-line-height.
 * .alignwide breaks out to --article-wide-width, .alignfull to the viewport.
 * Headings get scroll-margin for the table of contents under the sticky
 * header; --post-sticky-offset is kept current by article-progress.js.
 *
 * Also here: the page frame for the post template (no site-content padding,
 * like archives), the reading progress bar (.post-progress) and print.
 * The header, table of contents and body grid: css/blocks/post-header.css.
 */

:root {
    --article-width: 720px;
    --article-wide-width: 1080px;
    --article-font-size: clamp(17px, 16px + 0.25vw, 19px);
    --article-line-height: 1.65;
    --post-sticky-offset: 0px;
}

/* ---------- Page frame ---------- */

.single-post .site-content {
    padding: 0;
}

.single-post .site.grid-container {
    max-width: 100%;
}

/* ---------- The column ---------- */

.post-content {
    width: 100%; /* a grid item with auto margins would shrink to its content */
    max-width: var(--article-width);
    margin-left: auto;
    margin-right: auto;
    font-size: var(--article-font-size);
    line-height: var(--article-line-height);
}

.post-content > :first-child {
    margin-top: 0;
}

.post-content p,
.post-content li {
    font-size: inherit;
    line-height: inherit;
}

.post-content p {
    margin: 0 0 1.25em;
    text-wrap: pretty;
    hyphens: auto;
}

.post-content h2,
.post-content h3,
.post-content h4 {
    margin: 2em 0 0.6em;
    text-wrap: balance;
    scroll-margin-top: calc(var(--post-sticky-offset) + 24px);
}

.post-content h2 {
    font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2rem);
}

.post-content h3 {
    font-size: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);
}

.post-content h4 {
    font-size: 1.1rem;
}

.post-content h2 + h3 {
    margin-top: 1em;
}

.post-content a:not(.wp-block-button__link):not(.gb-button) {
    text-decoration: underline;
    text-underline-offset: 0.15em;
    text-decoration-thickness: 1px;
}

.post-content a:not(.wp-block-button__link):not(.gb-button):hover {
    text-decoration-thickness: 2px;
}

.post-content ul,
.post-content ol {
    margin: 0 0 1.25em 1.25em;
    padding: 0;
}

.post-content li {
    margin-bottom: 0.4em;
}

.post-content li::marker {
    color: var(--accent-clr);
}

.post-content strong {
    font-weight: 600;
}

/* ---------- Media ---------- */

.post-content figure {
    margin: 2em 0;
}

.post-content img {
    display: block;
    max-width: 100%;
    height: auto;
}

.post-content figcaption {
    margin-top: 0.75em;
    font-size: 0.8em;
    line-height: 1.4;
    text-align: center;
    opacity: 0.75;
}

.post-content iframe,
.post-content video {
    max-width: 100%;
}

.post-content .wp-block-embed,
.post-content .wp-block-gallery {
    margin: 2em 0;
}

/* Wide and full: the column is centered, so 50% of it is the viewport center. */
.post-content .alignwide {
    width: min(var(--article-wide-width), 100vw - 2 * var(--mobile-side-padding));
    max-width: none;
    margin-inline: calc(50% - min(var(--article-wide-width), 100vw - 2 * var(--mobile-side-padding)) / 2);
}

.post-content .alignfull {
    width: 100vw;
    max-width: none;
    margin-inline: calc(50% - 50vw);
}

.post-content figure.alignwide,
.post-content figure.alignfull {
    margin-top: 2.5em;
    margin-bottom: 2.5em;
}

/* ---------- Core blocks ---------- */

.post-content .wp-block-quote {
    margin-top: 2em;
    margin-bottom: 2em;
    padding: 0.25em 0 0.25em 1.5em;
    border-left: 3px solid var(--accent-clr);
    font-size: 1.05em;
}

.post-content .wp-block-quote p {
    margin-bottom: 0.5em;
}

.post-content .wp-block-quote cite,
.post-content .wp-block-pullquote cite {
    display: block;
    font-style: normal;
    font-size: 0.85em;
    opacity: 0.75;
}

.post-content .wp-block-pullquote {
    margin-top: 2.5em; /* not the shorthand: .alignwide sets the inline margins */
    margin-bottom: 2.5em;
    padding: 0;
    border: 0;
    text-align: center;
}

.post-content .wp-block-pullquote p {
    max-width: 24em;
    margin: 0 auto 0.5em;
    font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem);
    font-weight: 600;
    line-height: 1.3;
    text-wrap: balance;
}

.post-content .wp-block-pullquote cite {
    font-size: 1rem;
}

.post-content .wp-block-pullquote.alignwide,
.post-content .wp-block-pullquote.alignfull {
    padding: 2em var(--mobile-side-padding);
    border-block: 1px solid color-mix(in srgb, currentColor 20%, transparent);
}

/* Tables: columns size to their content (the editor's "fixed layout" would
   split words in a 6-column table), words never break, a table with five or
   more columns breaks out to the wide width and the figure scrolls sideways
   when even that is not enough. */
.post-content .wp-block-table {
    margin: 2em 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.post-content .wp-block-table:has(tr > :nth-child(5)) {
    width: min(var(--article-wide-width), 100vw - 2 * var(--mobile-side-padding));
    max-width: none;
    margin-inline: calc(50% - min(var(--article-wide-width), 100vw - 2 * var(--mobile-side-padding)) / 2);
}

.post-content .wp-block-table table {
    width: 100%;
    min-width: 100%;
    table-layout: auto;
    border-collapse: collapse;
    font-size: 0.85em;
    line-height: 1.45;
}

.post-content .wp-block-table th,
.post-content .wp-block-table td {
    padding: 0.7em 0.9em;
    text-align: left;
    vertical-align: top;
    border: 0;
    border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent);
    word-break: normal;
    overflow-wrap: normal;
    hyphens: manual;
}

.post-content .wp-block-table th {
    padding-bottom: 0.8em;
    border-bottom: 2px solid var(--accent-clr);
    font-size: 0.8em;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    color: var(--heading-clr);
}

.post-content .wp-block-table td:first-child {
    font-weight: 600;
}

.post-content .wp-block-table tbody tr:last-child td {
    border-bottom-color: color-mix(in srgb, currentColor 25%, transparent);
}

.post-content .wp-block-table tbody tr:hover td {
    background-color: color-mix(in srgb, var(--accent-clr) 6%, transparent);
}

.post-content .wp-block-code {
    margin: 2em 0;
    padding: 1em 1.25em;
    border: 0;
    border-radius: 4px;
    background-color: color-mix(in srgb, currentColor 6%, transparent);
    font-size: 0.85em;
    overflow-x: auto;
}

.post-content p code {
    font-size: 0.9em;
}

.post-content .wp-block-separator {
    width: 80px;
    margin: 2.5em auto;
    border: 0;
    border-top: 2px solid var(--accent-clr);
    opacity: 1;
}

.post-content .wp-block-buttons {
    margin: 2em 0;
    gap: 12px;
}

.post-content .wp-block-button__link {
    padding: 12px 24px;
    border-radius: 4px;
    background-color: var(--btn-bg);
    color: var(--btn-font-clr);
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
}

.post-content .wp-block-button__link:hover {
    background-color: var(--btn-hover-bg);
    color: var(--btn-hover-font);
}

/* ---------- Reading progress bar ---------- */

.post-progress {
    position: fixed;
    top: var(--post-sticky-offset);
    left: 0;
    z-index: 999;
    width: 100%;
    height: 3px;
    pointer-events: none;
}

.post-progress span {
    display: block;
    height: 100%;
    background-color: var(--accent-clr);
    transform-origin: left;
    transform: scaleX(var(--post-progress, 0));
}

@media only screen and (min-width: 768px) {
    .post-content p {
        hyphens: manual;
    }
}

@media print {
    .site-header,
    #mobile-header,
    .site-footer,
    .post-progress,
    .post-toc,
    .post-footer-section,
    .slideout-navigation {
        display: none !important;
    }

    .post-content {
        max-width: none;
        font-size: 11pt;
    }
}