/* Phoenix single-post readability
 * Scoped exclusively to the content body of single blog posts.
 * No global selectors; no admin/options/database changes.
 */
.single-post .post-content .phx-single-article-content {
    direction: rtl;
    text-align: right;
    color: #344b5d;
    font-family: inherit;
    font-size: 18px;
    line-height: 2.05;
    max-width: 100%;
    overflow-wrap: anywhere;
    word-break: normal;
}

.single-post .post-content .phx-single-article-content p,
.single-post .post-content .phx-single-article-content li,
.single-post .post-content .phx-single-article-content dd,
.single-post .post-content .phx-single-article-content dt {
    color: #344b5d;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}

.single-post .post-content .phx-single-article-content p { margin: 0 0 1.15em; }

/* Neutralize only legacy inline typography that makes imported posts unreadable. */
.single-post .post-content .phx-single-article-content p[style],
.single-post .post-content .phx-single-article-content span[style],
.single-post .post-content .phx-single-article-content div[style],
.single-post .post-content .phx-single-article-content li[style] {
    font-family: inherit !important;
    line-height: inherit !important;
}
.single-post .post-content .phx-single-article-content p[style*="color"],
.single-post .post-content .phx-single-article-content span[style*="color"],
.single-post .post-content .phx-single-article-content div[style*="color"],
.single-post .post-content .phx-single-article-content li[style*="color"] { color: inherit !important; }
.single-post .post-content .phx-single-article-content p[style*="font-size"],
.single-post .post-content .phx-single-article-content span[style*="font-size"],
.single-post .post-content .phx-single-article-content div[style*="font-size"],
.single-post .post-content .phx-single-article-content li[style*="font-size"] { font-size: inherit !important; }

.single-post .post-content .phx-single-article-content h1,
.single-post .post-content .phx-single-article-content h2,
.single-post .post-content .phx-single-article-content h3,
.single-post .post-content .phx-single-article-content h4,
.single-post .post-content .phx-single-article-content h5,
.single-post .post-content .phx-single-article-content h6 {
    color: #173447;
    font-family: inherit;
    font-weight: 800;
    line-height: 1.65;
    margin: 1.8em 0 .7em;
}
.single-post .post-content .phx-single-article-content h1 { font-size: 2em; }
.single-post .post-content .phx-single-article-content h2 { font-size: 1.65em; }
.single-post .post-content .phx-single-article-content h3 { font-size: 1.38em; }
.single-post .post-content .phx-single-article-content h4 { font-size: 1.2em; }
.single-post .post-content .phx-single-article-content h5,
.single-post .post-content .phx-single-article-content h6 { font-size: 1.05em; }

.single-post .post-content .phx-single-article-content a {
    color: #087f8c;
    text-decoration: underline;
    text-underline-offset: 3px;
    overflow-wrap: anywhere;
}
.single-post .post-content .phx-single-article-content a:hover { text-decoration-thickness: 2px; }

.single-post .post-content .phx-single-article-content ul,
.single-post .post-content .phx-single-article-content ol {
    margin: 1em 0 1.35em;
    padding-right: 1.6em;
    padding-left: 0;
}
.single-post .post-content .phx-single-article-content li { margin-bottom: .45em; }

.single-post .post-content .phx-single-article-content img {
    max-width: 100%;
    height: auto;
}
.single-post .post-content .phx-single-article-content figure { max-width: 100%; margin: 1.5em auto; }
.single-post .post-content .phx-single-article-content figcaption,
.single-post .post-content .phx-single-article-content .wp-caption-text {
    color: #607789;
    font-size: .88em;
    line-height: 1.8;
    margin-top: .55em;
}

.single-post .post-content .phx-single-article-content table,
.single-post .post-content .phx-single-article-content .wp-block-table {
    width: 100%;
    max-width: 100%;
}
.single-post .post-content .phx-single-article-content table {
    display: block;
    overflow-x: auto;
    border-collapse: collapse;
    margin: 1.5em 0;
    font-size: .94em;
}
.single-post .post-content .phx-single-article-content th,
.single-post .post-content .phx-single-article-content td {
    min-width: 110px;
    padding: 10px 12px;
    border: 1px solid #d6e0e6;
    color: #344b5d;
    text-align: right;
    vertical-align: top;
}
.single-post .post-content .phx-single-article-content th { color: #173447; font-weight: 800; }

.single-post .post-content .phx-single-article-content blockquote {
    margin: 1.5em 0;
    padding: 1em 1.2em;
    border-right: 3px solid #0aa6b5;
    background: rgba(10,166,181,.06);
    color: #344b5d;
}
.single-post .post-content .phx-single-article-content pre {
    max-width: 100%;
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}
.single-post .post-content .phx-single-article-content code { overflow-wrap: normal; }
.single-post .post-content .phx-single-article-content iframe,
.single-post .post-content .phx-single-article-content video,
.single-post .post-content .phx-single-article-content embed { max-width: 100%; }

/* Gutenberg blocks remain confined to single-post article content. */
.single-post .post-content .phx-single-article-content .wp-block-image img,
.single-post .post-content .phx-single-article-content .wp-block-video video,
.single-post .post-content .phx-single-article-content .wp-block-embed iframe { max-width: 100%; height: auto; }

@media (max-width: 768px) {
    .single-post .post-content .phx-single-article-content { font-size: 17px; line-height: 2; }
    .single-post .post-content .phx-single-article-content h1 { font-size: 1.75em; }
    .single-post .post-content .phx-single-article-content h2 { font-size: 1.48em; }
    .single-post .post-content .phx-single-article-content h3 { font-size: 1.28em; }
}

@media (max-width: 480px) {
    .single-post .post-content .phx-single-article-content { font-size: 16.5px; line-height: 1.95; }
    .single-post .post-content .phx-single-article-content ul,
    .single-post .post-content .phx-single-article-content ol { padding-right: 1.35em; }
}

/* V2 — single article page only: restore readable light-theme layout without touching header/footer/other pages. */
body.single-post > section > .post-content {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    padding: clamp(34px, 4vw, 64px) clamp(24px, 6vw, 110px);
    color: #344b5d;
}

body.single-post > section > .post-content > .card-meta {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    color: #607789 !important;
    flex-wrap: wrap;
}
body.single-post > section > .post-content > .card-meta a {
    color: #087f8c !important;
    text-decoration: none;
    font-weight: 700;
}
body.single-post > section > .post-content > .card-meta a:hover { text-decoration: underline; }
body.single-post > section > .post-content > h1 {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    color: #173447 !important;
    font-size: clamp(30px, 2.45vw, 44px) !important;
    line-height: 1.65;
}
body.single-post > section > .post-content > div:has(> img.wp-post-image) {
    width: 100%;
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
}
body.single-post > section > .post-content > div:has(> img.wp-post-image) > img.wp-post-image,
body.single-post > section > .post-content > img.wp-post-image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    margin: 0;
    object-fit: contain;
}

.single-post .post-content .phx-single-article-content {
    width: 100%;
    max-width: 1500px;
    margin: 36px auto 0;
    color: #344b5d;
    font-size: 19px;
    line-height: 2.15;
}
.single-post .post-content .phx-single-article-content p,
.single-post .post-content .phx-single-article-content li,
.single-post .post-content .phx-single-article-content dd,
.single-post .post-content .phx-single-article-content dt,
.single-post .post-content .phx-single-article-content span:not([class*="icon"]),
.single-post .post-content .phx-single-article-content div:not([class*="wp-block-button"]):not([class*="elementor"]) {
    font-family: inherit;
}
.single-post .post-content .phx-single-article-content p,
.single-post .post-content .phx-single-article-content li {
    color: #344b5d !important;
}
.single-post .post-content .phx-single-article-content h1,
.single-post .post-content .phx-single-article-content h2,
.single-post .post-content .phx-single-article-content h3,
.single-post .post-content .phx-single-article-content h4,
.single-post .post-content .phx-single-article-content h5,
.single-post .post-content .phx-single-article-content h6 { color: #173447 !important; }
.single-post .post-content .phx-single-article-content a {
    color: #087f8c !important;
    font-weight: 650;
    text-decoration-thickness: 1px;
}

@media (max-width: 768px) {
    body.single-post > section > .post-content { padding: 28px 20px 44px; }
    body.single-post > section > .post-content > h1 { font-size: clamp(27px, 7vw, 34px) !important; }
    .single-post .post-content .phx-single-article-content { margin-top: 26px; font-size: 17px; line-height: 2.05; }
}

/* ============================================================
   V3 — LEGACY ARTICLE COMPATIBILITY LAYER
   Scope: single blog posts only.
   Purpose: make legacy/custom HTML from existing articles fit the
   current site without editing article bodies in the database.
   Does not target header, footer, admin screens, pages or archives.
   ============================================================ */

body.single-post .post-content .phx-single-article-content {
    width: 100% !important;
    max-width: 1500px !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
}

/* Keep every legacy block inside the article column. */
body.single-post .post-content .phx-single-article-content > *,
body.single-post .post-content .phx-single-article-content > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Legacy fixed-width wrappers: expand only block-level wrappers that
   belong to the article content. Floats/grid/table layouts are retained. */
body.single-post .post-content .phx-single-article-content div[style*="width"],
body.single-post .post-content .phx-single-article-content section[style*="width"],
body.single-post .post-content .phx-single-article-content article[style*="width"] {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Imported media must never dictate the article width. */
body.single-post .post-content .phx-single-article-content img,
body.single-post .post-content .phx-single-article-content picture,
body.single-post .post-content .phx-single-article-content video,
body.single-post .post-content .phx-single-article-content iframe,
body.single-post .post-content .phx-single-article-content embed,
body.single-post .post-content .phx-single-article-content object,
body.single-post .post-content .phx-single-article-content svg,
body.single-post .post-content .phx-single-article-content canvas {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.single-post .post-content .phx-single-article-content img {
    height: auto !important;
}

/* Old tables are kept as tables but become horizontally scrollable
   inside the article instead of breaking the page layout. */
body.single-post .post-content .phx-single-article-content table {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

body.single-post .post-content .phx-single-article-content pre {
    max-width: 100% !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

/* Prevent legacy inline margins/paddings from creating an invisible
   narrow content area when they exceed the available article width. */
body.single-post .post-content .phx-single-article-content [style*="margin-left"],
body.single-post .post-content .phx-single-article-content [style*="margin-right"] {
    box-sizing: border-box !important;
}

/* WordPress blocks / old editor alignments remain confined to the article. */
body.single-post .post-content .phx-single-article-content .alignwide,
body.single-post .post-content .phx-single-article-content .alignfull,
body.single-post .post-content .phx-single-article-content .wp-block-group,
body.single-post .post-content .phx-single-article-content .wp-block-columns,
body.single-post .post-content .phx-single-article-content .wp-block-column {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

/* Legacy editor columns should shrink instead of forcing the page wider. */
body.single-post .post-content .phx-single-article-content [class*="column"],
body.single-post .post-content .phx-single-article-content [class*="col-"] {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body.single-post .post-content .phx-single-article-content {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.single-post .post-content .phx-single-article-content > *,
    body.single-post .post-content .phx-single-article-content > * > * {
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.single-post .post-content .phx-single-article-content table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
    }
}

/* ============================================================
   V4 — ARTICLE READING HEADER / HERO / COMMENTS
   Scope: single article pages only.
   This layer intentionally does not touch the article HTML stored
   in WordPress and does not target any other page/template.
   ============================================================ */

/* Article-only site header: keep the existing navbar structure,
   but give it the same dark visual context used by the site heroes. */
body.single-post header.navbar {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 18px 40px !important;
    box-sizing: border-box !important;
    background: rgba(3, 30, 38, .96) !important;
    border-bottom: 1px solid rgba(79, 216, 230, .10) !important;
    box-shadow: 0 10px 35px rgba(0,0,0,.16) !important;
}

body.single-post header.navbar .navbar-glass {
    background: rgba(0, 0, 0, .34) !important;
}

/* Article hero — one reusable design for every article.
   Featured image is used when available; no image means a clean
   branded dark hero is shown instead. */
body.single-post .phx-article-hero {
    position: relative;
    width: 100%;
    min-height: 365px;
    overflow: hidden;
    color: #fff;
    background:
        linear-gradient(90deg, rgba(2, 30, 38, .96) 0%, rgba(2, 30, 38, .82) 48%, rgba(2, 30, 38, .58) 100%),
        var(--phx-article-hero-image, linear-gradient(135deg, #062b33, #073f46));
    background-size: cover;
    background-position: center;
}

body.single-post .phx-article-hero::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(25,201,197,.72), transparent);
}

body.single-post .phx-article-hero-inner {
    position: relative;
    z-index: 2;
    width: min(1280px, calc(100% - 64px));
    min-height: 365px;
    margin: 0 auto;
    padding: 52px 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(320px, .92fr);
    gap: 58px;
    align-items: center;
    direction: ltr;
}

body.single-post .phx-article-hero-copy {
    direction: rtl;
    text-align: right;
    max-width: 720px;
    justify-self: start;
}

body.single-post .phx-article-kicker {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 16px;
    color: #4fd8e6;
    font-size: 14px;
    font-weight: 700;
}

body.single-post .phx-article-kicker-line {
    width: 42px;
    height: 1px;
    background: #19c9c5;
    box-shadow: 0 0 10px rgba(25,201,197,.55);
}

body.single-post .phx-article-hero h1 {
    margin: 0;
    color: #fff !important;
    font-family: inherit !important;
    font-size: clamp(30px, 3.1vw, 48px) !important;
    line-height: 1.55 !important;
    font-weight: 800 !important;
    letter-spacing: -.2px;
}

body.single-post .phx-article-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 25px;
    color: #c5d7da;
    font-family: inherit;
    font-size: 13px;
}

body.single-post .phx-article-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

body.single-post .phx-article-meta-item svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: #19c9c5;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

body.single-post .phx-article-meta-separator {
    width: 1px;
    height: 15px;
    background: rgba(255,255,255,.22);
}

body.single-post .phx-article-hero-media {
    position: relative;
    width: 100%;
    max-width: 510px;
    justify-self: end;
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 25px 60px rgba(0,0,0,.30), 0 0 35px rgba(25,201,197,.08);
    background: #082e36;
}

body.single-post .phx-article-hero-media::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(25,201,197,.12), transparent 42%, rgba(0,0,0,.10));
}

body.single-post .phx-article-hero-image {
    display: block;
    width: 100% !important;
    height: 270px !important;
    max-width: none !important;
    object-fit: cover !important;
    margin: 0 !important;
}

/* Article starts immediately after the hero; no artificial gap. */
body.single-post .phx-article-reading-area {
    width: 100%;
    background: #f4f8fa;
    padding: 34px 24px 72px;
    box-sizing: border-box;
}

body.single-post .phx-article-reading-container {
    width: min(1060px, 100%);
    margin: 0 auto;
}

body.single-post .phx-article-paper {
    width: 100%;
    box-sizing: border-box;
    background: #fff;
    border: 1px solid #e1e9ed;
    border-radius: 18px;
    box-shadow: 0 12px 40px rgba(13, 49, 63, .07);
    padding: clamp(28px, 4vw, 54px);
}

body.single-post .phx-article-paper .phx-single-article-content {
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    font-size: 17px;
    line-height: 2.15;
    color: #344b5d;
}

/* Comments: cleaner section, still uses WordPress's existing comment
   functionality and fields. */
body.single-post .phx-article-comments {
    margin-top: 48px;
    padding-top: 34px;
    border-top: 1px solid #e3eaee;
}

body.single-post .phx-article-comments .comments-title,
body.single-post .phx-article-comments .comment-reply-title {
    position: relative;
    margin: 0 0 24px;
    padding-right: 17px;
    color: #173447;
    font-family: inherit;
    font-size: 22px;
    line-height: 1.7;
    font-weight: 800;
}

body.single-post .phx-article-comments .comments-title::before,
body.single-post .phx-article-comments .comment-reply-title::before {
    content: '';
    position: absolute;
    right: 0;
    top: 8px;
    width: 4px;
    height: 28px;
    border-radius: 4px;
    background: linear-gradient(180deg, #19c9c5, #087f8c);
}

body.single-post .phx-article-comments .comment-notes,
body.single-post .phx-article-comments .logged-in-as,
body.single-post .phx-article-comments .must-log-in {
    color: #718693;
    font-size: 13px;
    line-height: 1.9;
}

body.single-post .phx-article-comments .comment-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 18px;
    margin: 0;
}

body.single-post .phx-article-comments .comment-form-comment,
body.single-post .phx-article-comments .comment-form-cookies-consent,
body.single-post .phx-article-comments .form-submit,
body.single-post .phx-article-comments .comment-notes,
body.single-post .phx-article-comments .logged-in-as,
body.single-post .phx-article-comments .must-log-in {
    grid-column: 1 / -1;
}

body.single-post .phx-article-comments label {
    display: block;
    margin-bottom: 7px;
    color: #365565;
    font-size: 13px;
    font-weight: 700;
}

body.single-post .phx-article-comments input:not([type="checkbox"]),
body.single-post .phx-article-comments textarea {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid #d8e3e8;
    border-radius: 11px;
    background: #f9fbfc;
    color: #294554;
    font: inherit;
    font-size: 14px;
    outline: none;
    transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}

body.single-post .phx-article-comments input:not([type="checkbox"]) {
    min-height: 46px;
    padding: 9px 13px;
}

body.single-post .phx-article-comments textarea {
    min-height: 130px;
    padding: 12px 13px;
    resize: vertical;
}

body.single-post .phx-article-comments input:not([type="checkbox"]):focus,
body.single-post .phx-article-comments textarea:focus {
    border-color: #19b9b6;
    background: #fff;
    box-shadow: 0 0 0 4px rgba(25,185,182,.08);
}

body.single-post .phx-article-comments .submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 145px;
    padding: 11px 22px;
    border: 0;
    border-radius: 24px;
    background: #019991;
    color: #fff;
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 22px rgba(1,153,145,.18);
    transition: transform .2s ease, box-shadow .2s ease;
}

body.single-post .phx-article-comments .submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 11px 26px rgba(1,153,145,.26);
}

body.single-post .phx-article-comments .comment-list {
    margin: 0 0 30px;
    padding: 0;
    list-style: none;
}

body.single-post .phx-article-comments .comment-list .comment {
    margin: 0 0 14px;
    padding: 17px;
    border: 1px solid #e2eaee;
    border-radius: 13px;
    background: #fbfdfe;
}

@media (max-width: 900px) {
    body.single-post header.navbar {
        padding: 14px 22px !important;
    }

    body.single-post .phx-article-hero-inner {
        width: min(100% - 40px, 720px);
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 42px 0 48px;
    }

    body.single-post .phx-article-hero-copy {
        order: 1;
        max-width: none;
    }

    body.single-post .phx-article-hero-media {
        order: 2;
        justify-self: stretch;
        max-width: none;
    }

    body.single-post .phx-article-hero-image {
        height: 280px !important;
    }
}

@media (max-width: 600px) {
    body.single-post header.navbar {
        padding: 10px 10px !important;
    }

    body.single-post .phx-article-hero {
        min-height: 0;
    }

    body.single-post .phx-article-hero-inner {
        width: calc(100% - 32px);
        min-height: 0;
        padding: 32px 0 36px;
        gap: 22px;
    }

    body.single-post .phx-article-hero h1 {
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.7 !important;
    }

    body.single-post .phx-article-hero-image {
        height: 205px !important;
    }

    body.single-post .phx-article-reading-area {
        padding: 18px 12px 48px;
    }

    body.single-post .phx-article-paper {
        border-radius: 13px;
        padding: 24px 18px;
    }

    body.single-post .phx-article-paper .phx-single-article-content {
        font-size: 16px;
        line-height: 2.05;
    }

    body.single-post .phx-article-comments .comment-form {
        grid-template-columns: 1fr;
    }

    body.single-post .phx-article-comments .comment-form-comment,
    body.single-post .phx-article-comments .comment-form-cookies-consent,
    body.single-post .phx-article-comments .form-submit,
    body.single-post .phx-article-comments .comment-notes,
    body.single-post .phx-article-comments .logged-in-as,
    body.single-post .phx-article-comments .must-log-in {
        grid-column: auto;
    }
}

/* ============================================================
   V5 — FINAL ARTICLE READING LAYOUT + VOICE ASSISTANT
   Scope: single-post only.
   ============================================================ */

/* Keep article typography exactly aligned with the site's primary font. */
body.single-post,
body.single-post .phx-article-hero,
body.single-post .phx-article-reading-area,
body.single-post .phx-article-paper,
body.single-post .phx-single-article-content,
body.single-post .phx-article-comments,
body.single-post .phx-article-voice {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* The existing site navbar remains structurally unchanged; on article pages
   it gets a dark branded surface so it cannot appear as a white strip. */
body.single-post header.navbar {
    background: #031a20 !important;
    background-color: #031a20 !important;
    background-image: none !important;
    margin: 0 !important;
    padding: 0 40px !important;
    min-height: 72px;
    box-sizing: border-box;
}

body.single-post header.navbar .navbar-glass {
    background: rgba(0,0,0,.30) !important;
}

/* One fixed, shared hero for every article. No featured image is used. */
body.single-post .phx-article-hero {
    position: relative;
    width: 100%;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    overflow: hidden;
    background:
        radial-gradient(circle at 18% 40%, rgba(25,201,197,.17), transparent 30%),
        radial-gradient(circle at 82% 65%, rgba(79,216,230,.10), transparent 34%),
        linear-gradient(115deg, #03171d 0%, #052b31 52%, #06383e 100%) !important;
    color: #fff;
}

body.single-post .phx-article-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(90deg, transparent 0%, rgba(25,201,197,.08) 50%, transparent 100%),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 70px);
    pointer-events: none;
}

body.single-post .phx-article-hero::after {
    content: '';
    position: absolute;
    right: 0;
    left: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #19c9c5 35%, #4fd8e6 65%, transparent);
    opacity: .75;
}

body.single-post .phx-article-hero-inner {
    position: relative;
    z-index: 2;
    width: 100% !important;
    max-width: none !important;
    height: 330px !important;
    min-height: 330px !important;
    margin: 0 !important;
    padding: 0 clamp(28px, 7vw, 110px) !important;
    box-sizing: border-box;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

body.single-post .phx-article-hero-copy {
    width: min(1100px, 100%);
    max-width: 1100px !important;
    margin: 0 auto;
    text-align: center !important;
    direction: rtl;
}

body.single-post .phx-article-hero-copy h1 {
    margin: 14px auto !important;
    color: #fff !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: clamp(30px, 3.2vw, 50px) !important;
    font-weight: 800 !important;
    line-height: 1.65 !important;
    letter-spacing: -.4px;
    text-shadow: 0 8px 30px rgba(0,0,0,.22);
}

body.single-post .phx-article-hero-line {
    display: block;
    width: 70px;
    height: 2px;
    margin: 0 auto;
    border-radius: 99px;
    background: linear-gradient(90deg, transparent, #19c9c5, transparent);
}

/* No large empty band between hero and article text. */
body.single-post .phx-article-reading-area {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 0 64px !important;
    background: #f4f8fa;
    box-sizing: border-box;
}

body.single-post .phx-article-reading-container {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

body.single-post .phx-article-paper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff;
    padding: clamp(26px, 3.5vw, 50px) clamp(24px, 7vw, 110px) 48px !important;
    box-sizing: border-box;
}

body.single-post .phx-article-paper .phx-single-article-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: 18px !important;
    line-height: 2.15 !important;
    color: #344b5d !important;
}

body.single-post .phx-article-paper .phx-single-article-content p,
body.single-post .phx-article-paper .phx-single-article-content li,
body.single-post .phx-article-paper .phx-single-article-content span,
body.single-post .phx-article-paper .phx-single-article-content div,
body.single-post .phx-article-paper .phx-single-article-content h1,
body.single-post .phx-article-paper .phx-single-article-content h2,
body.single-post .phx-article-paper .phx-single-article-content h3,
body.single-post .phx-article-paper .phx-single-article-content h4,
body.single-post .phx-article-paper .phx-single-article-content h5,
body.single-post .phx-article-paper .phx-single-article-content h6,
body.single-post .phx-article-paper .phx-single-article-content table,
body.single-post .phx-article-paper .phx-single-article-content th,
body.single-post .phx-article-paper .phx-single-article-content td {
    font-family: 'Vazirmatn', sans-serif !important;
}

/* Voice assistant: compact, branded and contained inside the article only. */
body.single-post .phx-article-voice {
    display: grid;
    grid-template-columns: 48px minmax(180px, 1fr) auto;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin: 36px 0 0;
    padding: 16px 18px;
    box-sizing: border-box;
    border: 1px solid #d9e9eb;
    border-radius: 16px;
    background: linear-gradient(135deg, #f7fcfc, #eef8f8);
    box-shadow: 0 8px 26px rgba(3,49,59,.06);
    direction: rtl;
}

body.single-post .phx-article-voice-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 14px;
    color: #fff;
    background: linear-gradient(145deg, #019991, #087f8c);
    box-shadow: 0 8px 20px rgba(1,153,145,.18);
}

body.single-post .phx-article-voice-icon svg {
    width: 25px;
    height: 25px;
}

body.single-post .phx-article-voice-copy strong,
body.single-post .phx-article-voice-copy span {
    display: block;
    font-family: 'Vazirmatn', sans-serif !important;
}

body.single-post .phx-article-voice-copy strong {
    color: #163b45;
    font-size: 15px;
    font-weight: 800;
    margin-bottom: 3px;
}

body.single-post .phx-article-voice-copy span {
    color: #6a8188;
    font-size: 12px;
    line-height: 1.8;
}

body.single-post .phx-article-voice-controls {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 7px;
    flex-wrap: wrap;
}

body.single-post .phx-reader-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 38px;
    padding: 7px 12px;
    border: 1px solid #d4e4e7;
    border-radius: 10px;
    background: #fff;
    color: #24515b;
    font: 600 12px/1 'Vazirmatn', sans-serif !important;
    cursor: pointer;
    transition: .2s ease;
}

body.single-post .phx-reader-btn:hover,
body.single-post .phx-reader-btn:focus-visible {
    border-color: #13b7b4;
    color: #087f8c;
    transform: translateY(-1px);
    outline: none;
}

body.single-post .phx-reader-play {
    color: #fff;
    background: #019991;
    border-color: #019991;
}

body.single-post .phx-reader-play:hover,
body.single-post .phx-reader-play:focus-visible {
    color: #fff;
    background: #087f8c;
    border-color: #087f8c;
}

body.single-post .phx-reader-btn svg {
    width: 16px;
    height: 16px;
}

body.single-post .phx-reader-speed {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 38px;
    padding: 0 8px;
    border: 1px solid #d4e4e7;
    border-radius: 10px;
    background: #fff;
    color: #71858b;
    font-size: 11px;
}

body.single-post .phx-reader-speed select {
    border: 0;
    background: transparent;
    color: #24515b;
    font: 600 11px 'Vazirmatn', sans-serif !important;
    outline: none;
    cursor: pointer;
}

body.single-post .phx-article-voice.is-reading {
    border-color: rgba(1,153,145,.35);
    box-shadow: 0 10px 30px rgba(1,153,145,.09);
}

@media (max-width: 900px) {
    body.single-post header.navbar {
        min-height: 64px;
        padding: 0 20px !important;
    }

    body.single-post .phx-article-hero,
    body.single-post .phx-article-hero-inner {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    body.single-post .phx-article-paper {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    body.single-post .phx-article-voice {
        grid-template-columns: 44px 1fr;
    }

    body.single-post .phx-article-voice-icon {
        width: 44px;
        height: 44px;
    }

    body.single-post .phx-article-voice-controls {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}

@media (max-width: 600px) {
    body.single-post header.navbar {
        min-height: 58px;
        padding: 0 10px !important;
    }

    body.single-post .phx-article-hero,
    body.single-post .phx-article-hero-inner {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }

    body.single-post .phx-article-hero-inner {
        padding: 0 18px !important;
    }

    body.single-post .phx-article-hero-copy h1 {
        font-size: clamp(25px, 7vw, 34px) !important;
        line-height: 1.7 !important;
    }

    body.single-post .phx-article-paper {
        padding: 22px 18px 36px !important;
    }

    body.single-post .phx-article-paper .phx-single-article-content {
        font-size: 16.5px !important;
        line-height: 2.05 !important;
    }

    body.single-post .phx-article-voice {
        margin-top: 28px;
        padding: 14px;
        border-radius: 14px;
    }

    body.single-post .phx-article-voice-controls {
        gap: 6px;
    }

    body.single-post .phx-reader-btn {
        min-height: 36px;
        padding: 7px 10px;
    }
}

/* ============================================================
   V6 — ARTICLE HERO IMAGE + VOICE POSITION / SAFE READER
   Scope: single article pages only.
   ============================================================ */

/* The article hero uses the current post's featured image as a full-width
   background. The image starts directly beneath the existing site menu. */
body.single-post .phx-article-hero {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    background-image:
        linear-gradient(90deg, rgba(2,23,29,.74), rgba(2,23,29,.40)),
        var(--phx-article-hero-image),
        linear-gradient(135deg, #062b33, #073f46) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

/* Keep the menu above the hero without changing its shared/site structure. */
body.single-post header.navbar {
    position: relative !important;
    z-index: 20 !important;
}

/* Remove the remaining visual gap before the voice assistant/article. */
body.single-post .phx-article-reading-area {
    padding-top: 0 !important;
}

/* Voice assistant belongs at the very top of the article reading area. */
body.single-post .phx-article-voice {
    width: 100% !important;
    margin: 0 0 28px !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: 0 6px 20px rgba(3,49,59,.05);
}

/* The actual article text remains edge-to-edge; only readable side padding
   separates text from the viewport edges. */
body.single-post .phx-single-article-content {
    width: 100% !important;
    max-width: none !important;
}

/* On desktop the hero image always spans the viewport. */
@media (min-width: 901px) {
    body.single-post .phx-article-hero,
    body.single-post .phx-article-hero-inner {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }
}

@media (max-width: 900px) {
    body.single-post .phx-article-voice {
        border-radius: 0 !important;
        margin-bottom: 22px !important;
    }
}

@media (max-width: 600px) {
    body.single-post .phx-article-voice {
        margin-bottom: 18px !important;
        padding: 13px 12px !important;
    }
}

/* ============================================================
   V7 — FINAL FULL-WIDTH ARTICLE / HERO UNDER NAVBAR
   Scope: single article pages only. No other page is affected.
   ============================================================ */

/* The article page itself must escape any theme/container width restriction. */
body.single-post .phx-article-hero,
body.single-post .phx-article-reading-area {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

/* Featured image fills the complete hero and continues behind the menu area. */
body.single-post .phx-article-hero {
    position: relative !important;
    margin-top: -72px !important;
    padding-top: 72px !important;
    height: 402px !important;
    min-height: 402px !important;
    max-height: 402px !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(90deg, rgba(2,23,29,.72), rgba(2,23,29,.34)),
        var(--phx-article-hero-image),
        linear-gradient(135deg, #062b33, #073f46) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.single-post .phx-article-hero-inner {
    width: 100% !important;
    max-width: none !important;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    padding-left: clamp(24px, 6vw, 100px) !important;
    padding-right: clamp(24px, 6vw, 100px) !important;
    box-sizing: border-box !important;
}

/* No gap between hero and the beginning of the reading area. */
body.single-post .phx-article-reading-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 48px !important;
}

body.single-post .phx-article-reading-container,
body.single-post .phx-article-paper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

/* Remove the artificial top whitespace before the voice assistant/article. */
body.single-post .phx-article-paper {
    padding-top: 0 !important;
    padding-left: clamp(18px, 5vw, 80px) !important;
    padding-right: clamp(18px, 5vw, 80px) !important;
    padding-bottom: 48px !important;
}

body.single-post .phx-article-voice {
    width: calc(100% + clamp(36px, 10vw, 160px)) !important;
    margin-top: 0 !important;
    margin-left: calc(clamp(18px, 5vw, 80px) * -1) !important;
    margin-right: calc(clamp(18px, 5vw, 80px) * -1) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-top: 0 !important;
    box-shadow: none !important;
}

/* Article content is genuinely full-width within the page, with only
   comfortable reading padding rather than a centered max-width column. */
body.single-post .phx-article-paper .phx-single-article-content,
body.single-post .phx-single-article-content {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body.single-post .phx-article-hero {
        margin-top: -64px !important;
        padding-top: 64px !important;
        height: 344px !important;
        min-height: 344px !important;
        max-height: 344px !important;
    }

    body.single-post .phx-article-hero-inner {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    body.single-post .phx-article-paper {
        padding-left: 32px !important;
        padding-right: 32px !important;
    }

    body.single-post .phx-article-voice {
        width: calc(100% + 64px) !important;
        margin-left: -32px !important;
        margin-right: -32px !important;
    }
}

@media (max-width: 600px) {
    body.single-post .phx-article-hero {
        margin-top: -58px !important;
        padding-top: 58px !important;
        height: 283px !important;
        min-height: 283px !important;
        max-height: 283px !important;
    }

    body.single-post .phx-article-hero-inner {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }

    body.single-post .phx-article-paper {
        padding: 0 18px 36px !important;
    }

    body.single-post .phx-article-voice {
        width: calc(100% + 36px) !important;
        margin-left: -18px !important;
        margin-right: -18px !important;
        margin-bottom: 0 !important;
        padding: 13px 12px !important;
    }
}


/* ============================================================
   V8 — FIXED ARTICLE HERO + TRUE FULL-WIDTH READING PAGE
   Scope: single article pages only.
   The featured image is deliberately NOT used for the hero.
   ============================================================ */

body.single-post .phx-article-hero,
body.single-post .phx-article-reading-area {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    box-sizing: border-box !important;
}

/* One fixed, shared hero for all articles. No post thumbnail/featured image. */
body.single-post .phx-article-hero {
    position: relative !important;
    width: 100vw !important;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    margin-top: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
    background:
        radial-gradient(circle at 18% 40%, rgba(25,201,197,.17), transparent 30%),
        radial-gradient(circle at 82% 65%, rgba(79,216,230,.10), transparent 34%),
        linear-gradient(115deg, #03171d 0%, #052b31 52%, #06383e 100%) !important;
    background-image:
        radial-gradient(circle at 18% 40%, rgba(25,201,197,.17), transparent 30%),
        radial-gradient(circle at 82% 65%, rgba(79,216,230,.10), transparent 34%),
        linear-gradient(115deg, #03171d 0%, #052b31 52%, #06383e 100%) !important;
}

body.single-post .phx-article-hero-inner {
    width: 100% !important;
    max-width: none !important;
    height: 330px !important;
    min-height: 330px !important;
    max-height: 330px !important;
    margin: 0 !important;
    padding: 0 clamp(24px, 6vw, 100px) !important;
    box-sizing: border-box !important;
}

/* The existing navbar remains structurally/design-wise unchanged. */
body.single-post header.navbar {
    position: relative !important;
    z-index: 20 !important;
}

/* Zero gap from hero to reading area and no hidden theme container width. */
body.single-post .phx-article-reading-area {
    margin-top: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

body.single-post .phx-article-reading-container,
body.single-post .phx-article-paper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.single-post .phx-article-paper {
    padding-top: 0 !important;
    padding-left: clamp(18px, 4vw, 64px) !important;
    padding-right: clamp(18px, 4vw, 64px) !important;
    padding-bottom: 40px !important;
}

body.single-post .phx-article-voice {
    width: calc(100% + clamp(36px, 8vw, 128px)) !important;
    max-width: none !important;
    margin-top: 0 !important;
    margin-left: calc(clamp(18px, 4vw, 64px) * -1) !important;
    margin-right: calc(clamp(18px, 4vw, 64px) * -1) !important;
    margin-bottom: 0 !important;
    border-radius: 0 !important;
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
}

body.single-post .phx-single-article-content,
body.single-post .phx-article-paper .phx-single-article-content,
body.single-post .phx-single-article-content > * {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body.single-post .phx-article-hero,
    body.single-post .phx-article-hero-inner {
        height: 280px !important;
        min-height: 280px !important;
        max-height: 280px !important;
    }

    body.single-post .phx-article-paper {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    body.single-post .phx-article-voice {
        width: calc(100% + 56px) !important;
        margin-left: -28px !important;
        margin-right: -28px !important;
    }
}

@media (max-width: 600px) {
    body.single-post .phx-article-hero,
    body.single-post .phx-article-hero-inner {
        height: 225px !important;
        min-height: 225px !important;
        max-height: 225px !important;
    }

    body.single-post .phx-article-paper {
        padding-left: 16px !important;
        padding-right: 16px !important;
        padding-bottom: 28px !important;
    }

    body.single-post .phx-article-voice {
        width: calc(100% + 32px) !important;
        margin-left: -16px !important;
        margin-right: -16px !important;
        padding: 13px 12px !important;
    }
}

/* ============================================================
   V9 — SHARED ARTICLE HEADER / STANDARD SITE NAV / NO TOP GAP
   Scope: single blog articles only.
   The existing article reader, comments, typography and content
   structure remain unchanged.
   ============================================================ */

/* Use the same standard navbar treatment as the rest of the site.
   Do not create a second article-specific header surface. */
body.single-post header.navbar {
    margin: 0 40px !important;
    padding: 0 !important;
    width: auto !important;
    max-width: none !important;
    min-height: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    position: relative !important;
    z-index: 100 !important;
}

body.single-post header.navbar .navbar-glass {
    background: rgb(0 0 0 / 50%) !important;
    border: 1px solid rgba(255,255,255,.09) !important;
    box-shadow: 0 20px 50px rgba(0,0,0,.45),
                0 0 30px rgba(79,216,230,.06),
                inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* Shared 600px image header: directly below the standard site menu. */
body.single-post .phx-article-hero {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
    margin: 0 0 0 calc(50% - 50vw) !important;
    padding: 0 !important;
    position: relative !important;
    overflow: hidden !important;
    background-image:
        linear-gradient(90deg, rgba(1,24,30,.30), rgba(1,24,30,.56)),
        var(--phx-article-hero-image),
        linear-gradient(135deg, #062b33, #073f46) !important;
    background-size: cover !important;
    background-position: center center !important;
    background-repeat: no-repeat !important;
}

body.single-post .phx-article-hero::before {
    content: '' !important;
    position: absolute !important;
    inset: 0 !important;
    background:
        linear-gradient(180deg, rgba(0,10,14,.08), rgba(0,10,14,.12) 55%, rgba(0,10,14,.35)),
        repeating-linear-gradient(135deg, rgba(255,255,255,.018) 0 1px, transparent 1px 72px) !important;
    pointer-events: none !important;
}

body.single-post .phx-article-hero-inner {
    width: 100% !important;
    max-width: none !important;
    height: 600px !important;
    min-height: 600px !important;
    max-height: 600px !important;
    margin: 0 !important;
    padding: 0 40px !important;
    box-sizing: border-box !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 2 !important;
}

body.single-post .phx-article-hero-copy {
    width: min(1200px, 100%) !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    text-align: center !important;
    direction: rtl !important;
}

body.single-post .phx-article-hero-copy h1 {
    margin: 16px auto !important;
    color: #fff !important;
    font-family: 'Vazirmatn', sans-serif !important;
    font-size: clamp(34px, 3.2vw, 56px) !important;
    font-weight: 800 !important;
    line-height: 1.55 !important;
    text-align: center !important;
    text-shadow: 0 8px 32px rgba(0,0,0,.28) !important;
}

body.single-post .phx-article-hero-line {
    display: block !important;
    width: 72px !important;
    height: 2px !important;
    margin: 0 auto !important;
    border-radius: 99px !important;
    background: linear-gradient(90deg, transparent, #19c9c5, transparent) !important;
}

/* No artificial space between header/reader and the article body. */
body.single-post .phx-article-reading-area {
    width: 100vw !important;
    max-width: 100vw !important;
    margin-left: calc(50% - 50vw) !important;
    margin-right: calc(50% - 50vw) !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    box-sizing: border-box !important;
}

body.single-post .phx-article-reading-container,
body.single-post .phx-article-paper {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

body.single-post .phx-article-paper {
    padding-top: 0 !important;
    padding-left: clamp(18px, 4vw, 64px) !important;
    padding-right: clamp(18px, 4vw, 64px) !important;
}

body.single-post .phx-article-voice {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}

body.single-post .phx-single-article-content,
body.single-post .phx-article-paper .phx-single-article-content,
body.single-post .phx-single-article-content > * {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box !important;
}

@media (max-width: 900px) {
    body.single-post header.navbar {
        margin-left: 10px !important;
        margin-right: 10px !important;
        width: calc(100% - 20px) !important;
    }

    body.single-post .phx-article-hero {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
    }

    body.single-post .phx-article-hero-inner {
        height: 430px !important;
        min-height: 430px !important;
        max-height: 430px !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width: 600px) {
    body.single-post header.navbar {
        margin-left: 8px !important;
        margin-right: 8px !important;
        width: calc(100% - 16px) !important;
    }

    body.single-post .phx-article-hero {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
    }

    body.single-post .phx-article-hero-inner {
        height: 330px !important;
        min-height: 330px !important;
        max-height: 330px !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    body.single-post .phx-article-hero-copy h1 {
        font-size: clamp(26px, 7vw, 36px) !important;
        line-height: 1.7 !important;
    }
}

/* ============================================================
   V10 — ARTICLE HERO IMAGE BEHIND THE NAVBAR
   Scope: single article pages only.
   The shared article hero now starts at the very top of the page,
   so its image fully covers the header area and continues behind
   the standard site menu. Existing navbar glass/design is preserved.
   ============================================================ */
body.single-post header.navbar {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: auto !important;
    margin: 20px 40px 0 !important;
    z-index: 1000 !important;
}

body.single-post .phx-article-hero {
    margin-top: 0 !important;
    padding-top: 0 !important;
    position: relative !important;
    z-index: 1 !important;
}

body.single-post .phx-article-hero-inner {
    position: relative !important;
    z-index: 2 !important;
}

@media (max-width: 900px) {
    body.single-post header.navbar {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 14px 16px 0 !important;
    }
}

@media (max-width: 600px) {
    body.single-post header.navbar {
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        margin: 10px 10px 0 !important;
    }
}