/*
 * Article page reading experience (13 Nov 2026).
 * Paired with assets/themes/magazine/js/article-v2.js (copy buttons, progress
 * bar, table scroll hint) and loaded from _head.php.
 *
 * Problems this fixes, seen on a live article:
 *   - <pre><code> blocks had no styling at all: commands and YAML read as loose
 *     monospace text inside the prose. 269 published posts contain them.
 *   - Headings sat directly on the paragraph above, and h2/h3 looked alike.
 *   - Table cells broke words mid-word ("Virtualizati / on") because
 *     .entry-content sets overflow-wrap: break-word. 1,472 posts have tables.
 *   - The in-content table of contents carries an inline light background,
 *     which would show as a bright box in dark mode.
 *   - Anchor links from the TOC landed under the sticky header.
 *
 * Everything is scoped to .post-content .entry-content, so editor previews and
 * other content areas are not affected.
 */

.post-content {
    --av-text: var(--vr-gray-800, #27272a);
    --av-heading: var(--vr-text-main, #18181b);
    --av-muted: var(--vr-text-muted, #6b7280);
    --av-line: var(--vr-gray-150, #e5e7eb);
    --av-soft: var(--vr-gray-50, #f8fafc);
    --av-accent: var(--vr-theme-color, #e50914);
    --av-code-bg: #0f172a;
    --av-code-fg: #e2e8f0;
    --av-inline-bg: #f1f5f9;
    --av-inline-fg: #be123c;
}

[data-bs-theme="dark"] .post-content {
    --av-text: var(--vr-gray-300, #d4d4d8);
    --av-line: rgba(255, 255, 255, 0.12);
    --av-soft: rgba(255, 255, 255, 0.04);
    --av-code-bg: #0b1120;
    --av-inline-bg: rgba(255, 255, 255, 0.08);
    --av-inline-fg: #fda4af;
}

/* ---------- Reading rhythm ---------- */

.post-content .entry-content {
    font-size: 1.0625rem;      /* 17px, unchanged */
    line-height: 1.75;
    color: var(--av-text);
}

@media (min-width: 1200px) {
    .post-content .entry-content { font-size: 1.125rem; }   /* 18px on wide screens: longer lines need larger type */
}

.post-content .entry-content p { margin: 0 0 1.15em; }

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

.post-content .entry-content li { margin-bottom: 0.4em; }
.post-content .entry-content li::marker { color: var(--av-accent); }

.post-content .entry-content strong { color: var(--av-heading); font-weight: 650; }

.post-content .entry-content a {
    color: var(--av-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    text-decoration-color: color-mix(in srgb, var(--av-accent) 40%, transparent);
    transition: text-decoration-color 0.2s ease;
}

.post-content .entry-content a:hover { text-decoration-color: currentColor; }

/* ---------- Headings ---------- */

.post-content .entry-content h2,
.post-content .entry-content h3,
.post-content .entry-content h4 {
    color: var(--av-heading);
    font-weight: 750;
    letter-spacing: -0.015em;
    scroll-margin-top: 88px;   /* clear the sticky header when jumped to */
}

.post-content .entry-content h2 {
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
    line-height: 1.3;
    margin: 2.2em 0 0.7em;
    padding-top: 1.1em;
    border-top: 1px solid var(--av-line);
}

.post-content .entry-content h3 {
    font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.3rem);
    line-height: 1.4;
    margin: 1.8em 0 0.55em;
}

.post-content .entry-content h4 {
    font-size: 1.05rem;
    line-height: 1.45;
    margin: 1.5em 0 0.5em;
}

/* First heading after the TOC or at the top needs no divider. */
.post-content .entry-content > h2:first-child,
.post-content .entry-content .toc + h2 { border-top: 0; padding-top: 0; }

/* ---------- Code ---------- */

.post-content .entry-content :not(pre) > code {
    padding: 0.15em 0.4em;
    border-radius: 5px;
    background: var(--av-inline-bg);
    color: var(--av-inline-fg);
    font-size: 0.86em;
    overflow-wrap: anywhere;
}

.post-content .entry-content pre {
    position: relative;
    margin: 1.4em 0 1.6em;
    padding: 1.1rem 1.2rem;
    border-radius: 10px;
    background: var(--av-code-bg) !important;
    color: var(--av-code-fg) !important;
    font-size: 0.875rem;
    line-height: 1.65;
    overflow-x: auto;
    white-space: pre;
    overflow-wrap: normal;
    word-break: normal;
    tab-size: 4;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.25) transparent;
}

.post-content .entry-content pre code {
    padding: 0;
    background: none !important;
    color: inherit !important;
    font-size: inherit;
    white-space: inherit;
}

/* Language label + copy button (added by article-v2.js). Room is reserved on
   the first line so they never sit on top of code. */
.post-content .entry-content pre.av-has-tools { padding-top: 2.6rem; }

.av-code-tools {
    position: absolute;
    top: 0.55rem;
    left: 1.2rem;
    right: 0.6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    pointer-events: none;
}

.av-code-lang {
    color: rgba(226, 232, 240, 0.55);
    font: 600 0.68rem/1 var(--vr-font-primary, system-ui), sans-serif;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.av-copy {
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(226, 232, 240, 0.85);
    font: 600 0.72rem/1 var(--vr-font-primary, system-ui), sans-serif;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.av-copy:hover { background: rgba(255, 255, 255, 0.14); color: #fff; }
.av-copy:focus-visible { outline: 2px solid #93c5fd; outline-offset: 2px; }
.av-copy.is-done { color: #86efac; border-color: rgba(134, 239, 172, 0.4); }

/* ---------- Tables ---------- */

.post-content .entry-content .table-container,
.post-content .entry-content .av-table-scroll {
    margin: 1.4em 0 1.6em;
    border: 1px solid var(--av-line);
    border-radius: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.post-content .entry-content table {
    width: 100%;
    margin: 0;
    border-collapse: collapse;
    font-size: 0.925em;
    line-height: 1.55;
}

/* Bare tables (not wrapped in the content's own container) still get a frame. */
.post-content .entry-content > table {
    display: block;
    overflow-x: auto;
    margin: 1.4em 0 1.6em;
    border: 1px solid var(--av-line);
    border-radius: 10px;
}

.post-content .entry-content th,
.post-content .entry-content td {
    padding: 0.7rem 0.9rem;
    border: 0;
    border-bottom: 1px solid var(--av-line);
    text-align: left;
    vertical-align: top;
    overflow-wrap: normal;      /* the inherited break-word split words mid-word */
    word-break: normal;
    hyphens: manual;
}

.post-content .entry-content tr:last-child > td { border-bottom: 0; }

/* Header row only: a real <thead>, or the first row of a table that has none.
   (tbody rows often start with a <th> row label, which must stay normal.) */
.post-content .entry-content thead th,
.post-content .entry-content table:not(:has(thead)) tr:first-child > th {
    background: var(--av-soft);
    color: var(--av-heading);
    font-size: 0.8em;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}

.post-content .entry-content tbody tr:nth-child(even) > td { background: color-mix(in srgb, var(--av-soft) 60%, transparent); }
.post-content .entry-content td:first-child,
.post-content .entry-content tbody th { font-weight: 600; color: var(--av-heading); min-width: 8rem; }

.post-content .entry-content table caption {
    caption-side: bottom;
    padding: 0.6rem 0.9rem;
    color: var(--av-muted);
    font-size: 0.85em;
    text-align: left;
}

@media (max-width: 575.98px) {
    .post-content .entry-content th,
    .post-content .entry-content td { padding: 0.6rem 0.7rem; }
    .post-content .entry-content td,
    .post-content .entry-content th { min-width: 9rem; }
}

/* ---------- Table of contents (in the content HTML) ---------- */

.post-content .entry-content nav.toc {
    margin: 1.5em 0 2em !important;
    padding: 1.1rem 1.35rem 0.9rem !important;
    background: var(--av-soft) !important;
    border: 1px solid var(--av-line) !important;
    border-left: 4px solid var(--av-accent) !important;
    border-radius: 10px !important;
}

.post-content .entry-content nav.toc h2 {
    margin: 0 0 0.6rem;
    padding: 0;
    border: 0;
    font-size: 0.8rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-muted);
}

.post-content .entry-content nav.toc ol,
.post-content .entry-content nav.toc ul {
    margin: 0;
    padding-left: 1.4em;
    columns: 1;
    font-size: 0.95em;
}

@media (min-width: 992px) {
    .post-content .entry-content nav.toc ol,
    .post-content .entry-content nav.toc ul { columns: 2; column-gap: 2rem; }
}

.post-content .entry-content nav.toc li { margin: 0 0 0.35em; break-inside: avoid; }
.post-content .entry-content nav.toc a { color: var(--av-heading); text-decoration: none; }
.post-content .entry-content nav.toc a:hover { color: var(--av-accent); text-decoration: underline; }
.post-content .entry-content nav.toc a.is-current { color: var(--av-accent); font-weight: 600; }

/* ---------- Figures, images, quotes ---------- */

.post-content .entry-content img { border-radius: 10px; }

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

.post-content .entry-content figcaption {
    margin-top: 0.6rem !important;
    color: var(--av-muted);
    font-size: 0.85rem !important;
    text-align: center;
}

.post-content .entry-content blockquote {
    margin: 1.5em 0;
    padding: 0.9rem 1.2rem;
    border-left: 4px solid var(--av-accent);
    border-radius: 0 10px 10px 0;
    background: var(--av-soft);
    color: var(--av-heading);
    font-size: 1.02em;
}

.post-content .entry-content blockquote p:last-child { margin-bottom: 0; }

.post-content .entry-content hr {
    margin: 2.2em 0;
    border: 0;
    border-top: 1px solid var(--av-line);
    opacity: 1;
}

/* ---------- FAQ (template partial, below the content) ---------- */

.post-content .faq-section { margin-top: 2.5rem; }

.post-content .faq-section .text-center { text-align: left !important; }

.post-content .faq-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: clamp(1.4rem, 1.2rem + 0.7vw, 1.75rem);
    font-weight: 750;
    letter-spacing: -0.015em;
    color: var(--av-heading);
}

.post-content .faq-title::before {
    content: "";
    flex: 0 0 4px;
    height: 1.1em;
    border-radius: 2px;
    background: var(--av-accent);
}

/* ---------- Reading progress bar (added by article-v2.js) ---------- */

.av-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 1100;
    pointer-events: none;
    background: transparent;
}

.av-progress span {
    display: block;
    height: 100%;
    width: 100%;
    background: var(--vr-theme-color, #e50914);
    transform-origin: 0 50%;
    transform: scaleX(0);
}

@media (prefers-reduced-motion: reduce) {
    .post-content .entry-content a { transition: none; }
}

/* ---------- Quick answer and takeaways callouts (13 Nov 2026) ----------
   The opening "Quick answer" and the "takeaways" box share one callout style: soft panel,
   accent bar on the left. Presentation only; the article text is untouched.
   2,260 articles use <div class="quick-answer">; article-v2.js adds the class to the 95 that
   have a bare <p><strong>Quick answer:</strong> ...</p>. */
.post-content .entry-content .quick-answer,
.post-content .entry-content .takeaways {
    margin: 0 0 1.75rem;
    padding: 1.25rem 1.5rem;
    border-left: 4px solid var(--av-accent);
    border-radius: 0 10px 10px 0;
    background: var(--av-soft-panel, #f4f5f7);
}
[data-bs-theme="dark"] .post-content .entry-content .quick-answer,
[data-bs-theme="dark"] .post-content .entry-content .takeaways { background: rgba(255, 255, 255, 0.05); }
.post-content .entry-content .quick-answer > :first-child,
.post-content .entry-content .takeaways > :first-child { margin-top: 0; }
.post-content .entry-content .quick-answer > :last-child,
.post-content .entry-content .takeaways > :last-child { margin-bottom: 0; }
.post-content .entry-content .quick-answer p,
.post-content .entry-content p.quick-answer { font-size: 1.06em; line-height: 1.7; color: var(--av-heading); }
/* "Quick answer:" becomes a small label on its own line */
.post-content .entry-content .quick-answer > p > strong:first-child,
.post-content .entry-content p.quick-answer > strong:first-child {
    display: block;
    margin-bottom: 0.4rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--av-accent);
}
.post-content .entry-content .takeaways > p:first-child strong { font-size: 1.02em; }
.post-content .entry-content .takeaways ul { margin-bottom: 0; }
@media (max-width: 575px) {
    .post-content .entry-content .quick-answer,
    .post-content .entry-content .takeaways { padding: 1rem 1.1rem; }
}

/* ==========================================================================
   Article column, reference pass (13 Nov 2026)
   Brings the article column in line with the Podman reference page
   (A Codex Work/WebAsha-blog/2026-11-11-podman-on-rhel-10): eyebrow label, larger title,
   lighter deck, quiet meta line, rounded hero, section dividers, note and course boxes,
   caption bars on tables, rounded figures, small citations.
   Left column only: the sidebar is untouched, and the contents list stays in the flow of
   the article (no left-hand sticky column). Presentation only.
   ========================================================================== */

/* ---------- article header ---------- */
.post-content .badge-category {
    padding: 0;
    border-radius: 0;
    background: transparent !important;
    color: var(--av-accent) !important;
    font-size: 0.75rem;
    line-height: 1.4;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.post-content .badge-category.bg-danger { padding: 0.25rem 0.5rem; color: #fff !important; letter-spacing: 0.04em; background: #dc3545 !important; border-radius: 4px; }
.post-content a:hover > .badge-category { text-decoration: underline; text-underline-offset: 3px; }

.post-content h1.post-title {
    margin: 0.35rem 0 1rem;
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.14;
    color: var(--av-heading);
}
.post-content .post-summary {
    max-width: 62ch;
    margin: 0 0 1.25rem;
    font-size: clamp(1.08rem, 1rem + 0.35vw, 1.25rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: 1.6;
    color: var(--av-muted);
}
.post-content .post-details-meta { font-size: 0.86rem; color: var(--av-muted); }
.post-content .post-details-meta .item-meta-author span { font-weight: 650; color: var(--av-heading); }

/* hero */
.post-content .post-image-preview img {
    width: 100%;
    height: auto;
    border: 1px solid var(--av-line);
    border-radius: 16px;
}

/* ---------- lead and sections ---------- */
.post-content .entry-content .intro { font-size: 1.1em; }
.post-content .entry-content .intro > p:first-child { color: var(--av-heading); }

/* Articles written with <section> blocks get one divider per section, as in the reference. */
.post-content .entry-content section:not(.table-wrap) {
    padding: 2.25rem 0;
    border-bottom: 1px solid var(--av-line);
    min-width: 0;
}
.post-content .entry-content section:not(.table-wrap):last-child { border-bottom: 0; padding-bottom: 0; }
.post-content .entry-content section:not(.table-wrap) > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.post-content .entry-content section:not(.table-wrap) > :last-child { margin-bottom: 0; }
.post-content .entry-content .article-layout { display: block; }   /* contents list stays above the article */
.post-content .entry-content .article-layout > nav.toc { margin-bottom: 0; }

.post-content .entry-content h2 {
    font-size: clamp(1.5rem, 1.25rem + 0.85vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.025em;
    line-height: 1.2;
}
.post-content .entry-content h3 { font-size: clamp(1.15rem, 1.08rem + 0.3vw, 1.28rem); letter-spacing: -0.02em; line-height: 1.3; margin-top: 2.1em; }

/* a heading reached from the contents list is briefly easy to spot */
.post-content .entry-content h2:target,
.post-content .entry-content h3:target {
    border-radius: 6px;
    box-shadow: -0.6rem 0 0 color-mix(in srgb, var(--av-accent) 12%, transparent), 0.6rem 0 0 color-mix(in srgb, var(--av-accent) 12%, transparent);
    background: color-mix(in srgb, var(--av-accent) 12%, transparent);
}

/* ---------- contents list: sub-items no longer break into a narrow second column ---------- */
.post-content .entry-content nav.toc li > ul,
.post-content .entry-content nav.toc li > ol { columns: 1; margin: 0.35em 0 0.2em; padding-left: 1.1em; font-size: 0.92em; }
.post-content .entry-content nav.toc summary { font-weight: 750; cursor: pointer; color: var(--av-heading); }

/* ---------- tables with a caption bar ---------- */
.post-content .entry-content .table-wrap {
    margin: 1.5rem 0;
    padding: 0;
    border: 1px solid var(--av-line);
    border-radius: 10px;
    overflow-x: auto;
}
.post-content .entry-content .table-wrap table { margin: 0; border: 0; border-radius: 0; font-size: 0.9em; line-height: 1.6; }
.post-content .entry-content .table-wrap .av-table-scroll { margin: 0; border: 0; border-radius: 0; }
.post-content .entry-content table caption {
    caption-side: top;
    padding: 0.85rem 1rem;
    background: var(--av-soft);
    color: var(--av-heading);
    font-weight: 700;
    text-align: left;
}
.post-content .entry-content .table-wrap th,
.post-content .entry-content .table-wrap td { padding: 0.85rem 1rem; vertical-align: top; }
.post-content .entry-content .table-wrap tbody th { font-weight: 650; color: var(--av-heading); }

/* ---------- note and course boxes ---------- */
.post-content .entry-content .note {
    margin: 1.5rem 0;
    padding: 0.9rem 1.25rem;
    border-left: 4px solid #b6451f;
    border-radius: 0 10px 10px 0;
    background: #fff5ef;
    font-size: 0.95em;
}
.post-content .entry-content .note > :first-child { margin-top: 0; }
.post-content .entry-content .note > :last-child { margin-bottom: 0; }
[data-bs-theme="dark"] .post-content .entry-content .note { background: rgba(182, 69, 31, 0.14); border-left-color: #e0703f; }

.post-content .entry-content .cta {
    margin-top: 2rem;
    padding: 1.2rem 1.4rem;
    border: 1px solid color-mix(in srgb, var(--av-accent) 28%, transparent);
    border-radius: 12px;
    background: color-mix(in srgb, var(--av-accent) 4%, transparent);
}
.post-content .entry-content .cta > :first-child { margin-top: 0; }
.post-content .entry-content .cta > :last-child { margin-bottom: 0; }
.post-content .entry-content .cta h3 { margin-top: 0.25rem; }

/* ---------- citations, references, figures ---------- */
.post-content .entry-content a.cite { font-size: 0.74em; white-space: nowrap; text-decoration: none; vertical-align: 0.25em; }
.post-content .entry-content a.cite:hover { text-decoration: underline; }
.post-content .entry-content .references { padding-left: 1.4rem; font-size: 0.9em; line-height: 1.6; }
.post-content .entry-content .references li { margin-bottom: 0.6em; overflow-wrap: anywhere; }
.post-content .entry-content figure { margin: 2rem 0; }
.post-content .entry-content figure img { border: 1px solid var(--av-line); border-radius: 12px; }
.post-content .entry-content figcaption { margin-top: 0.7rem; font-size: 0.87rem; color: var(--av-muted); }
.post-content .entry-content pre { border-radius: 12px; }

@media (max-width: 575px) {
    .post-content .entry-content section:not(.table-wrap) { padding: 1.75rem 0; }
    .post-content .post-image-preview img { border-radius: 12px; }
    .post-content .entry-content .table-wrap { font-size: 0.95em; }
}