/* dmhouse-single.css — صفحهٔ تک‌نوشتهٔ بلاگ: هیرو، متن مقاله و بخش‌های پس از آن.
   پالت و توکن‌ها از dmhouse-blog.css می‌آید (روی همان ریشهٔ dmhb-main تعریف شده‌اند)،
   پس این فایل همیشه بعد از آن بار می‌شود و تم تیره را هم خودکار می‌گیرد. */

.dmhb-main--single {
    padding-block-start: calc(var(--dmhb-header-offset) + 16px);
}

/* ---------- هیرو ---------- */

.dmhb-hero {
    margin-block-end: 48px;
}

.dmhb-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 40px;
    align-items: center;
}

.dmhb-hero__text {
    min-width: 0;
}

.dmhb-hero__title {
    margin: 0 0 22px;
    font-size: clamp(24px, 2.6vw, 36px);
    line-height: 1.6;
    font-weight: 800;
    color: var(--dmhb-text);
    overflow-wrap: anywhere;
}

/* فهرست مطالب */

/* جعبهٔ فهرست مطالب: کارت با نوار تأکید در لبهٔ شروع و شمارهٔ ترتیبی برای هر سرفصل. */
.dmhb-toc {
    position: relative;
    margin-block-end: 24px;
    padding: 18px 20px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
    overflow: hidden;
}

.dmhb-toc::before {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 4px;
    background-color: var(--dmhb-accent);
}

.dmhb-toc__title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 15px;
    font-weight: 700;
    color: var(--dmhb-text);
}

/* نشان کوچک کنار عنوان، به‌جای آیکون تصویری. */
.dmhb-toc__title::before {
    content: "";
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    border: 2px solid var(--dmhb-accent);
    background-color: transparent;
}

.dmhb-toc__list {
    counter-reset: dmhb-toc;
}

.dmhb-toc__list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.dmhb-toc__item {
    display: flex;
    align-items: center;
    gap: 10px;
    counter-increment: dmhb-toc;
}

.dmhb-toc__item::before {
    content: counter(dmhb-toc);
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 8px;
    background-color: var(--dmhb-surface-2);
    border: 1px solid var(--dmhb-border);
    color: var(--dmhb-accent);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}

.dmhb-toc__link {
    font-size: 14px;
    line-height: 1.9;
    color: var(--dmhb-text) !important;
    border-block-end: 1px solid transparent;
}

.dmhb-toc__link:hover,
.dmhb-toc__link:focus-visible {
    color: var(--dmhb-accent) !important;
    border-block-end-color: currentColor;
}

/* ردیف اطلاعات مقاله */

.dmhb-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmhb-meta__item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--pill-radius);
    background-color: var(--dmhb-surface);
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-meta__icon {
    display: inline-flex;
    color: var(--dmhb-accent);
}

.dmhb-meta__text {
    color: var(--dmhb-text);
}

/* نسبت ثابت برای تصویر شاخص: تصویرهای نویسنده با ابعاد متفاوت آپلود می‌شوند و بدون این
   قید، ارتفاع هیرو از مقاله‌ای به مقالهٔ دیگر می‌پرد. برش با object-fit انجام می‌شود. */
.dmhb-hero__media {
    margin: 0;
    border-radius: var(--dmhb-radius);
    overflow: hidden;
    background-color: var(--dmhb-surface);
    aspect-ratio: 16 / 10;
}

.dmhb-hero__img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------- متن مقاله ---------- */

.dmhb-post__body {
    font-size: 16px;
    line-height: 2.1;
    color: var(--dmhb-text);
    /* واژه‌های لاتین بلند (نشانی، نام ابزار) نباید از ستون بیرون بزنند. */
    overflow-wrap: anywhere;
}

.dmhb-post__body > *:first-child {
    margin-block-start: 0;
}

/* ⚠ text-align با important: شیوه‌نامهٔ سراسری سایت سرفصل‌ها را وسط‌چین می‌کند و همان
   باعث می‌شد عنوان از نوار عمودی کنارش فاصله بگیرد. راست‌چینی اینجا تثبیت می‌شود. */
.dmhb-post__body h2,
.dmhb-post__body h3,
.dmhb-post__body h4,
.dmhb-post__body h5,
.dmhb-post__body h6 {
    margin-block: 34px 14px;
    line-height: 1.7;
    font-weight: 800;
    color: var(--dmhb-text);
    text-align: start !important;
    /* سرفصل‌ها هدف پیوند درون‌صفحه‌ای‌اند؛ بدون این فاصله زیر هدر ثابت گیر می‌کنند. */
    scroll-margin-top: calc(var(--dmhb-header-offset) + 20px);
}

.dmhb-post__body p,
.dmhb-post__body li {
    text-align: start;
}

.dmhb-post__body h2 {
    font-size: clamp(20px, 2.1vw, 26px);
    padding-inline-start: 14px;
    border-inline-start: 4px solid var(--dmhb-accent);
}

.dmhb-post__body h3 {
    font-size: clamp(17px, 1.7vw, 20px);
}

.dmhb-post__body h4 {
    font-size: 17px;
}

.dmhb-post__body p {
    margin-block: 0 18px;
}

.dmhb-post__body a {
    color: var(--dmhb-accent) !important;
    font-weight: 600;
    border-block-end: 1px solid currentColor;
}

.dmhb-post__body a:hover,
.dmhb-post__body a:focus-visible {
    border-block-end-style: dashed;
}

.dmhb-post__body ul,
.dmhb-post__body ol {
    margin-block: 0 20px;
    padding-inline-start: 0;
    list-style: none;
}

.dmhb-post__body li {
    position: relative;
    padding-inline-start: 24px;
    margin-block-end: 10px;
}

.dmhb-post__body ul > li::before {
    content: "";
    position: absolute;
    inset-inline-start: 6px;
    top: 14px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--dmhb-accent);
}

.dmhb-post__body ol {
    counter-reset: dmhb-ol;
}

.dmhb-post__body ol > li {
    counter-increment: dmhb-ol;
}

.dmhb-post__body ol > li::before {
    content: counter(dmhb-ol);
    position: absolute;
    inset-inline-start: 0;
    top: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--dmhb-accent);
    color: #fff;
    font-size: 11px;
    line-height: 1;
}

.dmhb-post__body li > ul,
.dmhb-post__body li > ol {
    margin-block: 10px 0;
}

.dmhb-post__body img,
.dmhb-post__body iframe,
.dmhb-post__body video {
    max-width: 100%;
    height: auto;
    border-radius: var(--dmhb-radius);
}

.dmhb-post__body figure {
    margin: 26px 0;
}

.dmhb-post__body figure img {
    display: block;
    margin-inline: auto;
}

.dmhb-post__body figcaption {
    margin-block-start: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-post__body blockquote {
    margin: 26px 0;
    padding: 18px 20px;
    border: 1px solid var(--dmhb-border);
    border-inline-start: 4px solid var(--dmhb-accent);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
}

.dmhb-post__body blockquote p:last-child {
    margin-block-end: 0;
}

.dmhb-post__body code,
.dmhb-post__body kbd {
    padding: 2px 6px;
    border-radius: 6px;
    background-color: var(--dmhb-surface);
    font-size: 0.92em;
    direction: ltr;
    unicode-bidi: isolate;
}

.dmhb-post__body pre {
    margin-block: 0 22px;
    padding: 16px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
    overflow-x: auto;
    direction: ltr;
    text-align: left;
}

/* جدول‌های محتوا در موبایل باید خودشان اسکرول بخورند، نه اینکه صفحه را پهن کنند. */
.dmhb-post__body table {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    border-collapse: collapse;
    margin-block: 0 22px;
    font-size: 14px;
}

.dmhb-post__body th,
.dmhb-post__body td {
    padding: 10px 12px;
    border: 1px solid var(--dmhb-border);
    text-align: start;
}

.dmhb-post__body th {
    background-color: var(--dmhb-surface);
    font-weight: 700;
}

.dmhb-post__body hr {
    margin-block: 30px;
    border: 0;
    border-block-start: 1px solid var(--dmhb-border);
}

/* ---------- بلوک‌های افزونه‌ای رایج داخل محتوا ---------- */

/* پرسش‌های متداول: مارک‌آپ افزونه دست نمی‌خورد، فقط هم‌رنگ قالب می‌شود. */
.dmhb-post__body .uagb-faq-child__outer-wrap {
    margin-block-end: 10px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
    overflow: hidden;
}

.dmhb-post__body .uagb-faq-questions {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
    cursor: pointer;
}

.dmhb-post__body .uagb-question {
    margin: 0;
    font-size: 15px;
    font-weight: 700;
}

.dmhb-post__body .uagb-faq-icon-wrap svg {
    width: 14px;
    height: 14px;
    fill: var(--dmhb-accent);
}

.dmhb-post__body .uagb-faq-content {
    padding: 0 16px 14px;
    color: var(--dmhb-muted);
}

.dmhb-post__body .uagb-heading-text {
    margin-block: 30px 12px;
    font-size: clamp(20px, 2.1vw, 26px);
    font-weight: 800;
    color: var(--dmhb-text);
}

/* امتیازدهی ستاره‌ای */
.dmhb-post__body .kk-star-ratings {
    margin-block-start: 26px;
    padding-block-start: 18px;
    border-block-start: 1px solid var(--dmhb-border);
}

/* ---------- کلاس‌های استاندارد وردپرس داخل محتوا ---------- */

.dmhb-post__body .aligncenter {
    margin-inline: auto;
    text-align: center;
}

.dmhb-post__body .alignright {
    float: inline-end;
    margin: 6px 0 16px 20px;
    max-width: 50%;
}

.dmhb-post__body .alignleft {
    float: inline-start;
    margin: 6px 20px 16px 0;
    max-width: 50%;
}

.dmhb-post__body .alignwide,
.dmhb-post__body .alignfull {
    /* ستون محتوا عرض محدودی دارد؛ عرض کامل نباید از آن بیرون بزند. */
    max-width: 100%;
    margin-inline: 0;
}

.dmhb-post__body .wp-caption {
    max-width: 100%;
}

.dmhb-post__body .wp-caption-text {
    margin-block-start: 8px;
    text-align: center;
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-post__body .wp-block-image {
    margin-block: 26px;
}

.dmhb-post__body .wp-block-embed__wrapper,
.dmhb-post__body .wp-block-embed iframe {
    width: 100%;
}

.dmhb-post__body .wp-block-separator {
    margin-block: 30px;
    border: 0;
    border-block-start: 1px solid var(--dmhb-border);
}

.dmhb-post__body .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-block: 0 22px;
    padding: 0;
    list-style: none;
}

.dmhb-post__body .wp-block-button__link {
    display: inline-flex;
    padding: 10px 22px;
    border: 0;
    border-radius: var(--pill-radius);
    background-color: var(--dmhb-accent);
    color: #fff !important;
    font-size: 14px;
    font-weight: 600;
}

.dmhb-post__body .wp-block-group {
    margin-block: 0 20px;
}

.dmhb-post__body .wp-block-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
    margin-block: 0 24px;
    padding: 0;
    list-style: none;
}

.dmhb-post__body .wp-block-gallery figure {
    margin: 0;
}

/* لنگرهای پرش که افزونه‌ها می‌سازند ارتفاع ندارند و زیر هدر ثابت گیر می‌کنند. */
.dmhb-post__body .elementor-menu-anchor {
    display: block;
    scroll-margin-top: calc(var(--dmhb-header-offset) + 20px);
}

.dmhb-post__body .screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ---------- پابرگ مقاله، ناوبری و دیدگاه‌ها ---------- */

.dmhb-post__footer {
    margin-block-start: 30px;
    padding-block-start: 20px;
    border-block-start: 1px solid var(--dmhb-border);
}

.dmhb-post__terms-title {
    margin: 0 0 10px;
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-post__terms {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmhb-post__terms a {
    display: inline-flex;
    padding: 7px 14px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--pill-radius);
    background-color: var(--dmhb-surface);
    font-size: 13px;
}

.dmhb-postnav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-block-start: 26px;
}

.dmhb-postnav__link {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 16px 18px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
    transition: border-color var(--transition-fast);
}

.dmhb-postnav__link:hover {
    border-color: var(--dmhb-accent);
}

.dmhb-postnav__label {
    font-size: 12px;
    color: var(--dmhb-muted);
}

.dmhb-postnav__title {
    font-size: 14px;
    font-weight: 700;
    line-height: 1.9;
    color: var(--dmhb-text);
}

.dmhb-postnav__link--next {
    text-align: end;
}

.dmhb-comments {
    margin-block-start: 34px;
    padding: 22px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface);
}

.dmhb-comments__title,
.dmhb-comments .comment-reply-title {
    margin-block: 0 16px;
    font-size: 17px;
    font-weight: 700;
    color: var(--dmhb-text);
    text-align: start;
}

.dmhb-comments .comment-reply-title small {
    margin-inline-start: 10px;
    font-size: 13px;
    font-weight: 400;
}

/* فهرست دیدگاه‌ها — سلسله‌مراتب با تودرتویی <ol> ساخته می‌شود، نه با فاصلهٔ دستی. */
.dmhb-comments__list,
.dmhb-comments__list .children {
    margin: 0;
    padding: 0;
    list-style: none;
}

.dmhb-comments__list {
    margin-block-end: 24px;
}

/* ═══ سقف ارتفاع فهرست دیدگاه‌ها ═══
   کلاس is-clamped را جاوااسکریپت می‌گذارد و فقط وقتی که سرریز واقعاً معنادار باشد؛
   بدون جاوااسکریپت این جعبه هیچ سقفی ندارد و همهٔ دیدگاه‌ها دیده می‌شوند. */
.dmhb-comments__clamp {
    position: relative;
}

.dmhb-comments__clamp .dmhb-comments__list {
    margin-block-end: 0;
}

.dmhb-comments__clamp.is-clamped {
    max-height: clamp(460px, 62vh, 760px);
    overflow: hidden;
}

.dmhb-comments__fade {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-end: 0;
    height: 110px;
    background-image: linear-gradient(to top, var(--dmhb-surface), transparent);
    pointer-events: none;
}

/* ⚠ محوشدگی با گرادیان کشیده می‌شود نه با mask: ماسک عنصر را روی لایهٔ گرافیکی جدا
   می‌برد و در موبایل متنِ زیرش را تار می‌کند. */
.dmhb-comments__clamp.is-clamped .dmhb-comments__fade {
    display: block;
}

.dmhb-comments__more {
    display: block;
    width: 100%;
    margin-block: 16px 24px;
    padding: 12px 18px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: transparent;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    color: var(--dmhb-accent);
    cursor: pointer;
    transition: background-color .25s ease, border-color .25s ease;
}

.dmhb-comments__more:hover,
.dmhb-comments__more:focus-visible {
    border-color: var(--dmhb-accent);
    background-color: var(--dmhb-surface-2);
}

/* ⚠ ویژگی hidden امتیاز ۰-۱-۰ دارد و هر کلاسی که display بدهد آن را می‌بازد؛ بدون این
   قاعده، دکمه‌ای که اسکریپت پنهانش کرده کاملاً دیده می‌شود و هیچ خطایی هم نمی‌دهد. */
[hidden] {
    display: none !important;
}

.dmhb-comments__list .children {
    margin-block-start: 12px;
    margin-inline-start: 14px;
    padding-inline-start: 16px;
    border-inline-start: 2px solid var(--dmhb-border);
}

/* پاسخ‌های تودرتوی عمیق نباید در موبایل ستون را باریک کنند؛ از عمق سه به بعد تورفتگی نصف می‌شود. */
.dmhb-comments__list .children .children .children {
    margin-inline-start: 6px;
    padding-inline-start: 8px;
}

.dmhb-comment {
    margin-block-end: 12px;
}

.dmhb-comment__box {
    padding: 16px 18px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--dmhb-radius);
    background-color: var(--dmhb-surface-2);
}

.dmhb-comment.bypostauthor > .dmhb-comment__box {
    border-color: var(--dmhb-accent);
}

.dmhb-comment__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-block-end: 10px;
}

.dmhb-comment__avatar img {
    display: block;
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.dmhb-comment__id {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.dmhb-comment__author {
    font-size: 14px;
    font-weight: 700;
    color: var(--dmhb-text);
}

.dmhb-comment__date {
    font-size: 12px;
    color: var(--dmhb-muted);
}

.dmhb-comment__pending {
    margin: 0 0 10px;
    padding: 8px 12px;
    border-radius: 10px;
    background-color: var(--dmhb-surface);
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-comment__text {
    font-size: 15px;
    line-height: 2;
    color: var(--dmhb-text);
    overflow-wrap: anywhere;
}

.dmhb-comment__text p {
    margin: 0 0 10px;
}

.dmhb-comment__text p:last-child {
    margin-block-end: 0;
}

.dmhb-comment__actions {
    margin-block-start: 10px;
}

.dmhb-comment__reply a {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px;
    border: 1px solid var(--dmhb-border);
    border-radius: var(--pill-radius);
    font-size: 13px;
    color: var(--dmhb-text) !important;
}

.dmhb-comment__reply a:hover {
    border-color: var(--dmhb-accent);
    color: var(--dmhb-accent) !important;
}

.dmhb-comments__pager {
    margin-block: 0 24px;
}

.dmhb-comments__closed {
    margin-block-end: 18px;
    font-size: 13px;
    color: var(--dmhb-muted);
}

/* فرم دیدگاه */

.dmhb-comments .comment-form {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dmhb-comments .comment-form p {
    margin: 0 0 14px;
}

.dmhb-comments .comment-form-author,
.dmhb-comments .comment-form-email,
.dmhb-comments .comment-form-url {
    display: inline-block;
    width: 100%;
}

.dmhb-commentform__note,
.dmhb-comments .comment-notes,
.dmhb-comments .logged-in-as {
    font-size: 13px;
    color: var(--dmhb-muted);
}

/* ⚠ رنگ پیوندهای این خط («نمایهٔ خود را ویرایش نمایید» و «بیرون رفتن») همین‌جا اعلام
   می‌شود، نه در قالب‌های میزبان. قاعده‌ای در سطح سایت رنگ هر پیوند را با اجبار
   می‌نشاند و این دو پیوند تا امروز از آن در امان نمانده بودند؛ چون این خط بخشی از
   همین مؤلفه است، درست این است که خودِ مؤلفه رنگش را بگوید. با این کار همهٔ صفحه‌هایی
   که این مؤلفه را می‌آورند یک‌جا درست می‌شوند و هیچ قالبی لازم نیست به آن دست بزند. */
.dmhb-comments .logged-in-as a,
.dmhb-comments .logged-in-as a:visited,
.dmhb-comments .comment-notes a,
.dmhb-comments .comment-notes a:visited {
    color: var(--dmhb-accent) !important;
}

.dmhb-comments .logged-in-as a:hover,
.dmhb-comments .comment-notes a:hover {
    text-decoration: underline;
}

.dmhb-comments .required {
    color: var(--dmhb-accent);
}

.dmhb-comments .comment-form-cookies-consent {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--dmhb-muted);
}

.dmhb-comments .comment-form-cookies-consent label {
    margin: 0;
    font-weight: 400;
}

.dmhb-comments .comment-form-cookies-consent input {
    width: 16px;
    height: 16px;
    accent-color: var(--dmhb-accent);
}

.dmhb-comments label {
    display: block;
    margin-block-end: 6px;
    font-size: 13px;
    font-weight: 600;
}

.dmhb-comments input[type="text"],
.dmhb-comments input[type="email"],
.dmhb-comments input[type="url"],
.dmhb-comments textarea {
    width: 100%;
    max-width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--dmhb-border);
    border-radius: 10px;
    background-color: var(--dmhb-surface-2);
    color: var(--dmhb-text);
    font: inherit;
    font-size: 14px;
}

.dmhb-comments input:focus,
.dmhb-comments textarea:focus {
    outline: none;
    border-color: var(--dmhb-accent);
}

.dmhb-comments .form-submit input[type="submit"],
.dmhb-comments .submit {
    padding: 10px 26px;
    border: 0;
    border-radius: var(--pill-radius);
    background-color: var(--dmhb-accent);
    color: #fff;
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

/* ---------- واکنش‌گرایی ---------- */

@media (max-width: 991px) {
    .dmhb-hero {
        margin-block-end: 32px;
    }

    .dmhb-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 22px;
    }

    /* روی موبایل تصویر پیش از متن دیده می‌شود، ولی ترتیب نشانه‌گذاری عوض نشده. */
    .dmhb-hero__media {
        order: -1;
    }

    .dmhb-postnav {
        grid-template-columns: minmax(0, 1fr);
    }

    .dmhb-post__body {
        font-size: 15px;
        line-height: 2;
    }

    .dmhb-comments {
        padding: 16px;
    }
}

@media (max-width: 991px) {
    /* شناوری تصویر در ستون باریک موبایل متن را خرد می‌کند. */
    .dmhb-post__body .alignright,
    .dmhb-post__body .alignleft {
        float: none;
        margin-inline: auto;
        max-width: 100%;
    }

    .dmhb-comments__list .children {
        margin-inline-start: 8px;
        padding-inline-start: 10px;
    }
}

@media (max-width: 575px) {
    .dmhb-meta {
        gap: 8px;
    }

    .dmhb-comment__box {
        padding: 14px;
    }

    .dmhb-comment__avatar img {
        width: 36px;
        height: 36px;
    }

    .dmhb-meta__item {
        padding: 8px 12px;
        font-size: 12px;
    }
}