/* dmhouse-chrome.css — شیوه‌نامهٔ هدر و فوتر مشترک، فقط برای صفحاتی که قالب اختصاصی ندارند
   (صفحه‌های المنتوری، صفحهٔ ۴۰۴، و هر صفحه‌ای که از header.php پیش‌فرض می‌آید).

   ⚠ چرا این فایل وجود دارد و چرا base.css اینجا بار نمی‌شود:
   base.css قاعده‌هایی روی عنصرهای برهنه دارد — پس‌زمینهٔ بدنهٔ سند، فونت بدنه با
   important، اندازه و وسط‌چینی عنوان‌ها، رنگ پیوندها. بارکردن آن روی صفحه‌های المنتوری
   ظاهر آن صفحه‌ها را عوض می‌کرد. اینجا همان قاعده‌ها فقط زیر ریشه‌های هدر و فوتر
   تکرار شده‌اند تا هیچ چیزی به محتوای صفحه نشت نکند. بوت‌استرپ هم به همین دلیل بار
   نمی‌شود و تنها چهار کلاس نمایشی‌اش که این نشانه‌گذاری استفاده می‌کند بازسازی شده است.

   ⚠⚠ قاعدهٔ طلایی این فایل — یک بار نقض شد و لوگوی هدر و فوتر را غول‌پیکر کرد:
   پیشوندِ محدودکننده همیشه داخل :where() نوشته می‌شود تا صفر وزن بگیرد. بدون آن،
   یک قاعدهٔ ساده مثل تصویرِ داخل هدر وزنی بالاتر از قاعدهٔ اندازهٔ لوگو در شیوه‌نامهٔ
   منو پیدا می‌کند و بی‌صدا آن را باطل می‌کند. با :where()، وزن هر قاعده دقیقاً همان
   چیزی می‌ماند که در base.css بود، پس رفتار با صفحه‌های قالب‌دار یکی می‌شود.
   تنها استثنای عمدی: کلاس‌های نمایشی بوت‌استرپ در انتهای فایل.

   ⚠ هرچه اینجاست از base.css رونویسی شده؛ با تغییر آن فایل، این هم باید هم‌گام شود. */

@font-face {
    font-family: 'dana';
    src: url('../fonts/DanaFaNum-Regular.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'dana';
    src: url('../fonts/DanaFaNum-ExtraBlack.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'gofteh';
    src: url('../fonts/GoftehFaNumWeb-Heavy.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* توکن‌ها روی بدنه تعریف می‌شوند نه روی ریشهٔ سند: ارث‌بری به هدر و فوتر و پنجرک مجوز
   و دکمهٔ بازگشت‌به‌بالا می‌رسد، ولی چون فقط تعریف است و رنگی نمی‌پاشد، محتوای صفحه
   دست‌نخورده می‌ماند. مقادیر پیش‌فرض همان تم روشن است، چون هدر و فوتر روشن‌اند. */
body.dmhouse-chrome {
    --color-navy: #0A192F;
    --color-copper: #B87333;
    --color-gold: #F5D68F;

    --pill-radius: 50px;
    --transition-fast: 0.3s ease;
    --transition-slow: 0.6s ease;

    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);
    --prev-bg: var(--color-navy);
}

:where(body.dmhouse-chrome) .theme-light {
    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --text-primary: var(--color-navy);
    --text-secondary: #4a5568;
    --accent-primary: var(--color-copper);
    --accent-secondary: var(--color-gold);
    --border-color: #e2e8f0;
    --card-shadow: 0 2px 10px rgba(10, 25, 47, 0.08);
    --prev-bg: var(--color-navy);
}

:where(body.dmhouse-chrome) .theme-dark {
    --bg-primary: var(--color-navy);
    --bg-secondary: #061121;
    --text-primary: #ffffff;
    --text-secondary: #cbd5e0;
    --accent-primary: var(--color-gold);
    --accent-secondary: var(--color-copper);
    --border-color: #1a2a42;
    --card-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    --prev-bg: #ffffff;
}

:where(body.dmhouse-chrome) .theme-light,
:where(body.dmhouse-chrome) .theme-dark {
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ═════════ تایپوگرافی، فقط داخل هدر و فوتر ═════════
   این چند خصوصیت ارثی‌اند و در شیوه‌نامهٔ منو و فوتر روی خودِ این ریشه‌ها تعریف
   نشده‌اند، پس بازنویسی نمی‌کنند؛ در base.css هم روی بدنهٔ سند نشسته بودند. */

body.dmhouse-chrome .main-header,
body.dmhouse-chrome .dm-footer-section,
body.dmhouse-chrome .dmhouse-license-modal,
body.dmhouse-chrome .back-to-top {
    font-family: 'dana', sans-serif;
    direction: rtl;
    text-align: right;
}

/* هم‌ارز بازنشانی سراسری بوت‌استرپ، ولی محبوس در همین دو ریشه و با وزن صفر. */
:where(body.dmhouse-chrome .main-header) *,
:where(body.dmhouse-chrome .dm-footer-section) *,
:where(body.dmhouse-chrome .dmhouse-license-modal) *,
:where(body.dmhouse-chrome .main-header),
:where(body.dmhouse-chrome .dm-footer-section),
:where(body.dmhouse-chrome .dmhouse-license-modal),
:where(body.dmhouse-chrome .back-to-top) {
    box-sizing: border-box;
}

/* زیرمجموعهٔ بازنشانی بوت‌استرپ که این نشانه‌گذاری واقعاً به آن تکیه دارد.
   بدون خط اول، هشت دکمهٔ هدر و فوتر با فونت پیش‌فرض مرورگر رندر می‌شدند نه فونت سایت.
   ⚠ گرد شدن گوشه‌ها عمداً فقط به دکمه‌های درونی داده می‌شود و به دکمهٔ بازگشت‌به‌بالا
   نه، چون آن دکمه گوشهٔ کاملاً گرد دارد و این قاعده صافش می‌کرد. */
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section, .dmhouse-license-modal) button,
:where(body.dmhouse-chrome) :where(.back-to-top) {
    margin: 0;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    text-transform: none;
    -webkit-appearance: button;
}

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section, .dmhouse-license-modal) button {
    border-radius: 0;
}

/* هم‌ارز قاعدهٔ بوت‌استرپ؛ فقط تراز عمودی است و هیچ ابعادی را تعیین نمی‌کند، پس
   قاعده‌های اندازهٔ لوگو در شیوه‌نامهٔ منو و فوتر دست‌نخورده می‌مانند. */
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section, .dmhouse-license-modal) img,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section, .dmhouse-license-modal) svg {
    vertical-align: middle;
}

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h1,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h2,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h3,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h4,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h5,
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h6 {
    font-family: 'gofteh';
    color: var(--text-primary);
    font-weight: bold;
}

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h1 { font-size: 40px; margin-bottom: 0; }
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h2 { font-size: 44px; text-align: center; }
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h3 { font-size: 48px; }
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h4 { font-size: 30px; margin-bottom: 0; }
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h5 { font-size: 20px; margin-bottom: 0; }
:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) h6 { font-size: 18px; margin-bottom: 0; }

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) p {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.8em;
    font-weight: normal;
}

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) a {
    text-decoration: none;
    color: var(--accent-primary);
    transition: color var(--transition-fast);
}

:where(body.dmhouse-chrome) :where(.main-header, .dm-footer-section) a:hover {
    color: var(--accent-secondary);
}

/* ⚠ عمداً هیچ قاعده‌ای روی تصویرها نوشته نمی‌شود: base.css هم ندارد، و اندازهٔ لوگوی
   هدر و لوگوی بزرگ فوتر در شیوه‌نامهٔ منو و فوتر تعیین شده است. هر قاعدهٔ عمومیِ
   تصویر اینجا آن دو را باطل می‌کند — همان اشتباهی که یک بار رخ داد. */

/* ═════════ چیدمان ═════════ */

:where(body.dmhouse-chrome) .page-container {
    max-width: 1550px;
    margin: auto;
    padding-inline: clamp(16px, 3vw, 40px);
}

/* ⚠ هدر ثابت است (position:fixed) و از جریان صفحه بیرون؛ در قالب‌های اختصاصی، هیروی
   هر صفحه خودش این فاصله را دارد، ولی محتوای صفحه‌های المنتوری چنین فاصله‌ای ندارد و
   زیر هدر پنهان می‌شد. فاصله فقط به همین پوشش محتوا داده می‌شود، نه به بدنهٔ سند. */
body.dmhouse-chrome .dmhouse-site__main {
    padding-block-start: 130px;
}

@media (max-width: 992px) {
    body.dmhouse-chrome .dmhouse-site__main {
        padding-block-start: 92px;
    }
}

/* ═════════ دکمهٔ درخشان (فراخوان هدر) ═════════ */

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine {
    position: relative;
    margin: 0;
    padding: 15px;
    outline: none;
    text-decoration: none;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    text-transform: uppercase;
    background-color: transparent;
    border: 1px solid var(--accent-primary);
    border-radius: var(--pill-radius);
    color: var(--accent-primary);
    font-weight: 700;
    font-family: inherit;
    z-index: 1;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.02, 0.01, 0.47, 1);
}

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine span {
    color: var(--text-primary);
    font-size: 15px;
    font-weight: bold;
    letter-spacing: 0.5px;
    z-index: 2;
    position: relative;
    transition: color 0.3s ease;
}

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine:hover {
    animation: rotate624 0.7s ease-in-out both;
    border-color: var(--accent-secondary);
}

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine:hover span {
    animation: storm1261 0.7s ease-in-out both;
    animation-delay: 0.06s;
    color: var(--accent-secondary);
}

@keyframes rotate624 {
    0% { transform: rotate(0deg) translate3d(0, 0, 0); }
    25% { transform: rotate(3deg) translate3d(0, 0, 0); }
    50% { transform: rotate(-3deg) translate3d(0, 0, 0); }
    75% { transform: rotate(1deg) translate3d(0, 0, 0); }
    100% { transform: rotate(0deg) translate3d(0, 0, 0); }
}

@keyframes storm1261 {
    0% { transform: translate3d(0, 0, 0) translateZ(0); }
    25% { transform: translate3d(4px, 0, 0) translateZ(0); }
    50% { transform: translate3d(-3px, 0, 0) translateZ(0); }
    75% { transform: translate3d(2px, 0, 0) translateZ(0); }
    100% { transform: translate3d(0, 0, 0) translateZ(0); }
}

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine:after {
    background: var(--accent-secondary);
    content: "";
    height: 155px;
    right: -75px;
    opacity: 0.3;
    position: absolute;
    top: -50px;
    transform: rotate(35deg);
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
    width: 50px;
    z-index: 0;
}

:where(body.dmhouse-chrome) .dm-btn-wrapper .btn-shine:hover:after {
    right: 120%;
    transition: all 550ms cubic-bezier(0.19, 1, 0.22, 1);
}

/* ═════════ دکمهٔ بازگشت به بالا ═════════ */

:where(body.dmhouse-chrome) .back-to-top {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 50px;
    height: 50px;
    background-color: var(--accent-primary);
    color: #ffffff;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 999;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}

:where(body.dmhouse-chrome) .back-to-top.show {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

:where(body.dmhouse-chrome) .back-to-top:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-5px);
}

:where([data-theme="dark"]) :where(body.dmhouse-chrome) .back-to-top,
:where(body.dmhouse-chrome[data-theme="dark"]) .back-to-top {
    background-color: var(--accent-secondary);
    color: var(--color-navy);
}

:where([data-theme="dark"]) :where(body.dmhouse-chrome) .back-to-top:hover,
:where(body.dmhouse-chrome[data-theme="dark"]) .back-to-top:hover {
    background-color: var(--accent-primary);
    color: #ffffff;
}

/* ═════════ کلاس‌های نمایشی بوت‌استرپ که این نشانه‌گذاری استفاده می‌کند ═════════
   ⚠ خود بوت‌استرپ اینجا بار نمی‌شود (بازنشانی سراسری‌اش صفحه‌های المنتوری را عوض
   می‌کرد). فقط همین چهار کلاس بازسازی شده‌اند و این تنها جایی است که پیشوند عمداً
   داخل :where() نرفته: بوت‌استرپ این‌ها را با important می‌نویسد و باید بر قاعده‌های
   چیدمان شیوه‌نامهٔ منو غلبه کنند. ترتیب هم مهم است — قاعده‌های بزرگ‌نما بعد از d-none. */

body.dmhouse-chrome .main-header .d-none,
body.dmhouse-chrome .dm-footer-section .d-none {
    display: none;
}

@media (min-width: 992px) {
    body.dmhouse-chrome .main-header .d-lg-none,
    body.dmhouse-chrome .dm-footer-section .d-lg-none {
        display: none;
    }

    body.dmhouse-chrome .main-header .d-lg-block,
    body.dmhouse-chrome .dm-footer-section .d-lg-block {
        display: block;
    }

    body.dmhouse-chrome .main-header .d-lg-flex,
    body.dmhouse-chrome .dm-footer-section .d-lg-flex {
        display: flex;
    }
}