/* =====================================================================
   صفحه‌ی تک‌مقاله (post)
   فقط استایل‌های اختصاصی این صفحه — هدر، منو، فوتر و متغیرهای رنگ
   همگی از assets/style.css می‌آیند و دست‌کاری نشده‌اند.
   رنگ هر مقاله با متغیر --g (گرادیان دسته) روی .po-article تنظیم می‌شود.
   ===================================================================== */

[hidden] { display: none !important }
html { scroll-behavior: smooth }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto }
    .po-bar, .po-toc a { transition: none }
}

/* ---------- نوار پیشرفت مطالعه ---------- */
.po-progress {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 130;
    height: 4px;
    background: transparent;
    pointer-events: none
}

.po-bar {
    width: 100%;
    height: 100%;
    background: linear-gradient(to left, var(--lime), var(--primary));
    transform: scaleX(0);
    transform-origin: right;
    transition: transform .1s linear
}

/* ---------- هدر سایت در این صفحه ثابت نمی‌ماند ---------- */
body > header { position: relative; top: auto }

/* ---------- سربرگ مقاله: تیتر روی صفحه‌ی دفتر نوشته شده ---------- */
.po-hero { padding: 22px 0 0 }

.po-crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
    color: var(--muted);
    font-size: .88rem
}

.po-crumbs a:hover { color: var(--primary-dark) }
[data-theme="dark"] .po-crumbs a:hover { color: var(--primary) }
.po-crumbs i { font-size: .6rem }
.po-crumbs [aria-current] {
    max-width: 38ch;
    overflow: hidden;
    color: var(--text);
    font-weight: 700;
    text-overflow: ellipsis;
    white-space: nowrap
}

/* باکس اول: فقط تصویر شاخص (صفحه‌ی دفتر) و دو دکمه */
.po-sheet {
    position: relative;
    display: grid;
    place-items: center;
    height: clamp(220px, 34vw, 320px);
    overflow: hidden;
    border-radius: 30px;
    color: #fff;
    background: var(--g);
    box-shadow: var(--shadow)
}

.po-sheet::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, transparent 0 74px, rgba(255, 255, 255, .34) 74px 76px, transparent 76px),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, .17) 31px 32px)
}

/* سوراخ‌های سیم دفتر */
.po-sheet::after {
    content: "";
    position: absolute;
    inset-block: 0;
    inset-inline-start: 0;
    width: 56px;
    background: radial-gradient(circle at 28px 16px, var(--bg) 0 7px, transparent 7.5px) 0 0 / 56px 32px repeat-y
}

.po-ic {
    position: relative;
    z-index: 1;
    font-size: clamp(3.6rem, 9vw, 6rem);
    transform: rotate(-8deg);
    filter: drop-shadow(0 10px 14px rgba(6, 78, 59, .35))
}

.po-ghost {
    position: absolute;
    inset-inline-end: -20px;
    bottom: -50px;
    font-size: clamp(10rem, 24vw, 17rem);
    opacity: .13;
    transform: rotate(-14deg);
    pointer-events: none
}

.po-actions {
    position: absolute;
    z-index: 2;
    inset-inline-end: 16px;
    bottom: 16px;
    display: flex;
    gap: 8px
}

.po-act {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-width: 40px;
    height: 38px;
    padding: 0 16px;
    border: 1px solid rgba(255, 255, 255, .55);
    border-radius: 12px;
    background: rgba(6, 60, 45, .45);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    font-size: .88rem;
    transition: .2s
}

.po-act:hover { background: rgba(6, 60, 45, .7) }
.po-act.on { background: var(--lime); border-color: var(--lime); color: var(--deep) }

/* ---------- عنوان و اطلاعات مقاله (زیر تصویر) ---------- */
.po-head { max-width: 860px; margin-top: 28px }

.po-cat {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 4px 16px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 700
}

[data-theme="dark"] .po-cat { color: var(--primary) }
.po-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g, var(--lime)); flex: none }

.po-h1 {
    font-size: clamp(1.7rem, 4.4vw, 2.4rem);
    font-weight: 900;
    line-height: 1.6
}

.po-lead { margin-top: 10px; color: var(--muted); font-size: 1.08rem; line-height: 2.1 }

.po-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 24px;
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--border)
}

.po-by { display: inline-flex; align-items: center; gap: 10px }
.po-by b { font-size: .95rem; font-weight: 700 }

.po-av {
    display: grid;
    place-items: center;
    flex: none;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--g);
    color: #fff;
    font-size: 1rem;
    font-weight: 900
}

.po-info { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--muted); font-size: .88rem }
.po-info i { margin-inline-end: 6px }

/* ---------- چیدمان متن + کنار صفحه ---------- */
.po-page { padding: 34px 0 52px }

.po-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    gap: 36px;
    align-items: start
}

.po-article { min-width: 0 }

/* ---------- متن مقاله ---------- */
.po-prose { max-width: 720px; font-size: 1.06rem; line-height: 2.3 }
.po-prose > * + * { margin-top: 1.2em }

.po-prose h2 {
    position: relative;
    margin-top: 2.2em;
    padding-bottom: 10px;
    border-bottom: 1px dashed var(--border);
    font-size: clamp(1.25rem, 2.6vw, 1.5rem);
    font-weight: 900;
    line-height: 1.8;
    scroll-margin-top: 24px
}

/* نشانگر کوچک قلم کنار هر عنوان */
.po-prose h2::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-inline-end: 10px;
    border-radius: 4px 4px 4px 0;
    background: var(--g, var(--primary));
    transform: rotate(-12deg)
}

.po-prose h3 { margin-top: 1.8em; font-size: 1.15rem; font-weight: 700; scroll-margin-top: 24px }

.po-prose a:not(.btn) {
    color: var(--primary-dark);
    font-weight: 500;
    text-decoration: underline;
    text-decoration-color: var(--lime);
    text-decoration-thickness: 2px;
    text-underline-offset: 6px
}

[data-theme="dark"] .po-prose a:not(.btn) { color: var(--primary) }
.po-prose a:not(.btn):hover { text-decoration-color: currentColor }

.po-prose strong { font-weight: 700 }

/* فهرست تیک‌دار */
.po-check { list-style: none }

.po-check li {
    position: relative;
    padding-inline-start: 36px;
    margin-bottom: .5em
}

.po-check li::before {
    content: "\f00c";
    position: absolute;
    inset-inline-start: 0;
    top: .55em;
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 8px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: .68rem;
    line-height: 1
}

[data-theme="dark"] .po-check li::before { color: var(--primary) }

/* فهرست ✗ برای «کنار بگذارید» */
.po-skip li::before { content: "\f00d"; background: var(--bg); border: 1px solid var(--border); color: var(--muted) }
[data-theme="dark"] .po-skip li::before { color: var(--muted) }

/* کادر نکته: حاشیه‌ی دفتر */
.po-note {
    display: flex;
    gap: 14px;
    padding: 16px 20px;
    border: 1px solid var(--border);
    border-inline-start: 4px solid var(--primary);
    border-radius: 18px;
    background: var(--surface-2);
    font-size: 1rem;
    line-height: 2.1
}

.po-note > i { flex: none; margin-top: 8px; color: var(--primary); font-size: 1.2rem }
.po-note b { display: block; margin-bottom: 2px }

/* نقل‌قول */
.po-quote {
    position: relative;
    padding: 22px 28px;
    border-radius: 22px;
    background: var(--deep);
    color: #fff;
    font-size: 1.15rem;
    font-weight: 500;
    line-height: 2.1
}

.po-quote::before {
    content: "\f10d";
    position: absolute;
    inset-inline-end: 18px;
    top: 10px;
    color: var(--lime);
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 1.6rem;
    opacity: .5
}

.po-quote p { position: relative }

/* جدول */
.po-table {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface)
}

.po-table table { width: 100%; min-width: 480px; border-collapse: collapse; font-size: .95rem }

.po-table th,
.po-table td { padding: 12px 18px; text-align: start; line-height: 1.9 }

.po-table thead th {
    background: var(--surface-2);
    color: var(--primary-dark);
    font-weight: 900
}

[data-theme="dark"] .po-table thead th { color: var(--primary) }
.po-table tbody tr + tr td { border-top: 1px dashed var(--border) }
.po-table td:first-child { font-weight: 700 }
.po-table caption { padding: 12px 18px; color: var(--muted); font-size: .85rem; text-align: start; caption-side: bottom }

/* ---------- زیر متن: برچسب‌ها، نویسنده، قبلی/بعدی ---------- */
.po-foot { max-width: 720px; margin-top: 36px }

.po-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 8px }
.po-tags > i { color: var(--primary); margin-inline-end: 4px }

.po-tags a {
    padding: 2px 14px;
    border-radius: 99px;
    background: var(--surface-2);
    color: var(--primary-dark);
    font-size: .9rem;
    font-weight: 500;
    transition: .2s
}

[data-theme="dark"] .po-tags a { color: var(--primary) }
.po-tags a:hover { background: var(--primary); color: #fff }

.po-author {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin-top: 26px;
    padding: 22px 0 0;
    border-top: 1px dashed var(--border)
}

.po-author .po-av { width: 52px; height: 52px; font-size: 1.2rem; background: var(--g); color: #fff }
.po-author h3 { font-size: 1.05rem; line-height: 1.7 }
.po-author p { color: var(--muted); font-size: .92rem; line-height: 2 }

.po-pn {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 26px
}

.po-pn a {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--surface);
    transition: .25s
}

.po-pn a:hover { border-color: var(--primary); box-shadow: var(--shadow) }
.po-pn small { color: var(--muted); font-size: .8rem }
.po-pn small i { font-size: .65rem; margin-inline: 4px }
.po-pn b { font-size: .95rem; line-height: 1.8; font-weight: 500 }
.po-pn a:hover b { color: var(--primary-dark) }
[data-theme="dark"] .po-pn a:hover b { color: var(--primary) }
.po-pn .next { text-align: end }

/* ---------- کنار صفحه ---------- */
.po-side { position: sticky; top: 20px }

.po-box { margin-bottom: 28px }

.po-box h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
    font-size: 1rem
}

.po-box h3 i { color: var(--primary) }

.po-toc { list-style: none }

.po-toc a {
    display: block;
    padding: 7px 14px 7px 4px;
    border-inline-start: 3px solid var(--border);
    padding-inline-start: 14px;
    color: var(--muted);
    font-size: .92rem;
    line-height: 1.8;
    transition: .2s
}

.po-toc a:hover { color: var(--text) }

.po-toc a.active {
    border-inline-start-color: var(--primary);
    color: var(--primary-dark);
    font-weight: 700
}

[data-theme="dark"] .po-toc a.active { color: var(--primary) }

.po-share { display: flex; gap: 8px; margin-top: 12px }
.po-share .po-act { flex: 1; padding: 0 }

.po-shop {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
    border: 0;
    background: linear-gradient(to left, #064e3b, #16a34a);
    color: #fff
}

.po-shop::after {
    content: "\f5ac";
    position: absolute;
    inset-inline-start: -14px;
    bottom: -34px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8rem;
    opacity: .1;
    transform: rotate(-12deg)
}

.po-shop h3 i { color: var(--lime) }
.po-shop p { margin-bottom: 14px; opacity: .92; font-size: .92rem }
.po-shop .btn { position: relative; z-index: 1 }

/* ---------- مقاله‌های مرتبط ---------- */
.po-related { padding: 8px 0 60px }

.po-related .po-rh {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px
}

.po-related h2 { font-size: 1.4rem; font-weight: 900 }

.po-rgrid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 22px
}

.po-rcard {
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--surface);
    transition: .25s
}

.po-rcard:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateY(-4px) }

.po-rthumb {
    position: relative;
    display: grid;
    place-items: center;
    height: 130px;
    overflow: hidden;
    color: #fff;
    background: var(--g)
}

.po-rthumb::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(to left, transparent 0 54px, rgba(255, 255, 255, .34) 54px 56px, transparent 56px),
        repeating-linear-gradient(to bottom, transparent 0 25px, rgba(255, 255, 255, .17) 25px 26px)
}

.po-rthumb i { position: relative; font-size: 2.4rem; transform: rotate(-8deg); transition: transform .3s }
.po-rcard:hover .po-rthumb i { transform: rotate(-3deg) scale(1.08) }

.po-rbody { display: flex; flex: 1; flex-direction: column; gap: 6px; padding: 16px }
.po-rbody small { color: var(--muted); font-size: .8rem }
.po-rbody h3 { font-size: 1rem; line-height: 1.8 }
.po-rbody h3 a::after { content: ""; position: absolute; inset: 0 }
.po-rcard:hover h3 a { color: var(--primary-dark) }
[data-theme="dark"] .po-rcard:hover h3 a { color: var(--primary) }
.po-rbody h3 a:focus-visible { outline: none }
.po-rcard:has(h3 a:focus-visible) { outline: 3px solid var(--primary); outline-offset: 3px }

/* ---------- پیام کوتاه ---------- */
.toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 120;
    padding: 10px 22px;
    border-radius: 14px;
    background: var(--deep);
    color: #fff;
    font-size: .92rem;
    box-shadow: var(--shadow);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, 16px);
    transition: opacity .25s, transform .25s
}

.toast.show { opacity: 1; transform: translate(-50%, 0) }

/* ---------- چاپ ---------- */
@media print {
    header, footer, .side-deco, .po-side, .po-actions, .po-related, .po-pn, .po-progress, .cart-drawer, .cart-overlay, .toast { display: none !important }
    .po-layout { display: block }
    .po-prose { max-width: none }
}

/* ---------- واکنش‌گرا ---------- */
@media (max-width:1000px) {
    .po-layout { grid-template-columns: 1fr }
    .po-side { position: static }
    .po-toc-box { display: none }
    .po-prose, .po-foot { max-width: none }
}

@media (max-width:700px) {
    .po-actions { margin-inline-start: 0; width: 100% }
    .po-actions .po-act { flex: 1 }
    .po-prose { font-size: 1rem; line-height: 2.2 }
    .po-pn { grid-template-columns: 1fr }
    .po-pn .next { text-align: start }
    .po-author { flex-direction: column }
}

.po-cta {
    position: relative;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 14px 24px;
    padding: 22px 26px;
    border-radius: 24px;
    background: linear-gradient(to left, #064e3b, #16a34a);
    color: #fff
}

.po-cta::after {
    content: "\f5ac";
    position: absolute;
    inset-inline-start: -14px;
    bottom: -40px;
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 8rem;
    opacity: .1;
    transform: rotate(-12deg)
}

.po-cta b { display: block; font-size: 1.1rem; line-height: 1.8 }
.po-cta span { font-size: .92rem; opacity: .92 }
.po-cta .btn { position: relative; z-index: 1; margin: 0 }


@media (max-width:700px) {
    .po-sheet { border-radius: 22px }
    .po-sheet::before { background:
        linear-gradient(to left, transparent 0 54px, rgba(255, 255, 255, .34) 54px 56px, transparent 56px),
        repeating-linear-gradient(to bottom, transparent 0 31px, rgba(255, 255, 255, .17) 31px 32px) }
    .po-sheet::after { width: 40px; background: radial-gradient(circle at 20px 16px, var(--bg) 0 6px, transparent 6.5px) 0 0 / 40px 32px repeat-y }
    .po-act span { display: none }
    .po-act { padding: 0 12px }
}