/*
 * Reading layer for single articles + the «ذخیره‌شده‌ها» page
 * (src/Base/ReadingAssets.php, public/js/reading.js).
 *
 * Plain CSS on purpose: the Tailwind build is not part of the deploy, so no
 * new utility class can be relied on. Colours follow public/css/ui-fixes.css
 * (light) and the --arz-c-* variables of theme-mode.css (dark).
 */

/* ------------------------------------------------------------ progress bar */
.arz-progress {
    position: fixed; top: 0; inset-inline: 0; z-index: 70;
    height: 2px; background: #00cb8c;
    transform: scaleX(0); transform-origin: right;
    transition: transform .1s linear;
    pointer-events: none;
}
html[dir="ltr"] .arz-progress { transform-origin: left; }

/* ------------------------------------------------------------ sticky mini TOC */
/* TOC drawer: fixed panel + floating button; never part of the sidebar flow.
   Logical inline properties (review fix): the site is RTL, so inline-end is
   the physical left where the drawer, FAB and wpDiscuz bubble all live. */
#arz-sticky-toc {
    position: fixed; inset-inline-end: 24px; bottom: 144px; z-index: 61;
    width: 320px; max-width: calc(100vw - 32px); max-height: min(70vh, 640px);
    display: none; flex-direction: column; padding: 4px 0 6px;
    border: 1px solid #e3e5ee; border-radius: 12px; background: #fff;
    box-shadow: 0 12px 36px rgba(7, 16, 58, .14);
}
#arz-sticky-toc.is-open { display: flex; }
.arz-tocfab {
    position: fixed; inset-inline-end: 24px; bottom: 84px; z-index: 60;
    width: 48px; height: 48px; border-radius: 999px; border: 1px solid #e3e5ee;
    background: #fff; color: #4b5068; box-shadow: 0 6px 20px rgba(7, 16, 58, .12);
    display: none; align-items: center; justify-content: center; cursor: pointer;
}
.arz-tocfab svg { width: 22px; height: 22px; }
.arz-tocfab.is-shown { display: flex; }
.arz-tocfab:hover, .arz-tocfab[aria-expanded="true"] { color: #007a55; border-color: #33e5ae; }
@media (max-width: 1023px) {
    .arz-tocfab { display: none !important; }
    #arz-sticky-toc { inset-inline: 12px; width: auto; bottom: 84px; max-height: 60vh; }
    body.arz-funnel-sticky #arz-sticky-toc { bottom: 146px; }
    /* wpDiscuz's bubble (z 99, same bottom offset) sat on the last TOC row:
       while open the drawer goes above it, and the list keeps a bottom inset
       the size of the bubble so the last link is never under it. */
    #arz-sticky-toc.is-open { z-index: 100; }
    #arz-sticky-toc .arz-stoc__body { padding-block-end: calc(env(safe-area-inset-bottom, 0px) + 72px); }
}
.arz-stoc__head {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding-block: 8px; padding-inline: 12px 8px; flex: 0 0 auto;
}
.arz-stoc__title { margin: 0; font-size: 14px; font-weight: 800; color: #2b2f45; }
.arz-stoc__left {
    display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: #5f6480;
    font-variant-numeric: tabular-nums;
}
.arz-stoc__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; flex: 0 0 40px;
    border: 0; border-radius: 8px; background: transparent; color: #6b7089; cursor: pointer;
}
.arz-stoc__toggle:hover { background: #f3f4f8; color: #007a55; }
.arz-stoc__toggle svg { width: 18px; height: 18px; transition: transform .2s; }
#arz-sticky-toc.is-collapsed .arz-stoc__toggle svg { transform: rotate(180deg); }
.arz-stoc__body { overflow: auto; overscroll-behavior: contain; padding: 0 8px 6px; }
#arz-sticky-toc.is-collapsed .arz-stoc__body { display: none; }
.arz-stoc__list { list-style: none; margin: 0; padding: 0; }
.arz-stoc__list li { margin: 0; }
.arz-stoc__list a {
    display: block; padding: 6px 10px; border-inline-start: 2px solid transparent; border-radius: 6px;
    font-size: 13px; line-height: 1.7; color: #4b5068; text-decoration: none;
    transition: color .15s, background-color .15s, border-color .15s;
}
.arz-stoc__list a:hover { color: #007a55; background: #f6fdf9; }
.arz-stoc__list li.arz-toc-sub { margin-inline-start: 0; list-style: none; font-size: inherit; }
.arz-stoc__list li.arz-toc-sub a { padding-inline-start: 22px; font-size: 12.5px; color: #6b7089; }
.arz-stoc__list a.is-active { color: #007a55; font-weight: 700; border-color: #00cb8c; background: #f1fbf6; }
/* Links from either TOC land a little below the top edge. */
.entry-content h2[id], .entry-content h3[id] { scroll-margin-top: 24px; }

/* ------------------------------------------------------------ per-heading copy link */
/* The button is a sibling of the <h2> inside .arz-h2wrap (reading.js), so it
   is not part of the heading's accessible name. The wrapper carries the
   heading's margins from ui-fixes.css; a flex container's own margins still
   collapse with its neighbours, so the rhythm is unchanged. */
.entry-content .arz-h2wrap { display: flex; align-items: center; gap: 4px; margin-top: 2.25rem; margin-bottom: .75rem; }
.entry-content > .arz-h2wrap:first-child { margin-top: 0; }
.entry-content .arz-h2wrap > h2 { margin: 0; min-width: 0; flex: 0 1 auto; }
.entry-content .arz-anchor {
    display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 32px; height: 32px; padding: 0;
    border: 0; border-radius: 6px; background: transparent; color: #8a8fa8; cursor: pointer;
    opacity: 0; transition: opacity .15s, color .15s, background-color .15s;
}
.entry-content .arz-anchor svg { width: 16px; height: 16px; }
.entry-content .arz-h2wrap:hover .arz-anchor, .entry-content .arz-anchor:focus-visible,
.entry-content .arz-anchor.is-done { opacity: 1; }
.entry-content .arz-anchor:hover, .entry-content .arz-anchor.is-done { color: #007a55; background: #f1fbf6; }
.entry-content .arz-anchor:focus-visible { outline: 2px solid #007a55; outline-offset: 2px; }
@media (pointer: coarse) {
    /* No hover on touch: always visible, and a 40px target. */
    .entry-content .arz-anchor { width: 40px; height: 40px; opacity: .55; }
}

/* ------------------------------------------------------------ bookmark (desktop, next to share) */
.arz-bookmark {
    display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
    border: 1px solid #e3e5ee; border-radius: 8px; background: #fff; color: #6b7089; cursor: pointer;
    transition: border-color .2s, color .2s;
}
.arz-bookmark[hidden] { display: none; }
.arz-bookmark:hover { border-color: #33e5ae; color: #007a55; }
.arz-bookmark[aria-pressed="true"] { border-color: #33e5ae; color: #007a55; }
.arz-bookmark[aria-pressed="true"] .arz-bookmark__shape { fill: currentColor; }
.arz-share__x { display: inline-flex; align-items: center; }
.arz-share__x svg { display: block; }

/* ------------------------------------------------------------ floating bar (phones / tablets) */
.arz-rbar {
    position: fixed; z-index: 59; inset-inline: 12px; bottom: 12px;
    display: flex; align-items: stretch; gap: 2px; padding: 4px;
    border: 1px solid #e3e5ee; border-radius: 14px; background: #fff;
    box-shadow: 0 10px 30px rgba(7, 16, 58, .14);
    transform: translateY(130%); transition: transform .25s ease, bottom .25s ease;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
}
.arz-rbar.is-shown { transform: none; }
.arz-rbar__btn {
    flex: 1 1 0; min-width: 44px; min-height: 48px;
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 0; border-radius: 10px; background: transparent; color: #4b5068; cursor: pointer;
    font: inherit; font-size: 11px; line-height: 1.3;
}
.arz-rbar__btn svg { width: 20px; height: 20px; }
.arz-rbar__btn:active, .arz-rbar__btn[aria-pressed="true"] { color: #007a55; background: #f1fbf6; }
.arz-rbar__btn[aria-pressed="true"] .arz-bookmark__shape { fill: currentColor; }
/* The funnel plugin's sticky CTA (.arz-sticky, bottom 10px, ~52px tall) — sit above it. */
body.arz-funnel-sticky .arz-rbar { bottom: 74px; }
@media (min-width: 1024px) { .arz-rbar { display: none; } }
/* The bar has its own «بالا», so the round back-to-top button is redundant here. */
@media (max-width: 1023px) { body.arz-has-rbar .arz-back-to-top { display: none; } }
/* wpDiscuz's comment bubble shares the bottom-left corner. */
@media (max-width: 1023px) {
    body.arz-has-rbar #wpd-bubble-wrapper { bottom: 84px !important; }
    body.arz-has-rbar.arz-funnel-sticky #wpd-bubble-wrapper { bottom: 146px !important; }
}

/* ------------------------------------------------------------ «مفید بود؟» */
.arz-useful { margin-top: 8px; border-top: 1px solid #eef0f6; padding-top: 16px; }
.arz-useful__row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.arz-useful__q { margin: 0; font-size: 14px; font-weight: 700; color: #2b2f45; }
.arz-useful__btns { display: flex; gap: 8px; }
.arz-useful__btn {
    display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 16px;
    border: 1px solid #e3e5ee; border-radius: 8px; background: #fff; color: #4b5068;
    font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
    transition: border-color .2s, color .2s, background-color .2s;
}
.arz-useful__btn:hover { border-color: #33e5ae; color: #007a55; }
.arz-useful__btn[disabled] { cursor: default; opacity: .6; }
.arz-useful__btn.is-chosen, .arz-useful__btn.is-chosen[disabled] { opacity: 1; border-color: #33e5ae; color: #007a55; background: #f1fbf6; }
.arz-useful__btn.is-busy { opacity: .6; }
.arz-useful__thanks { margin: 10px 0 0; font-size: 13px; color: #007a55; }
.arz-useful__thanks[hidden] { display: none; }

/* ------------------------------------------------------------ toast */
.arz-toast {
    position: fixed; z-index: 80; left: 50%; bottom: 24px; transform: translate(-50%, 16px);
    display: flex; align-items: center; gap: 10px; max-width: calc(100vw - 32px);
    padding: 10px 14px; border-radius: 10px; background: #2b2f45; color: #fff;
    box-shadow: 0 10px 30px rgba(7, 16, 58, .25); font-size: 13px; line-height: 1.6;
    opacity: 0; visibility: hidden; transition: opacity .2s, transform .2s, visibility .2s;
}
.arz-toast.is-shown { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.arz-toast a, .arz-toast button {
    flex: 0 0 auto; min-height: 36px; padding: 0 12px; border: 0; border-radius: 8px;
    background: #00cb8c; color: #04261c; font: inherit; font-size: 13px; font-weight: 700;
    text-decoration: none; cursor: pointer; display: inline-flex; align-items: center;
}
.arz-toast button.arz-toast__dismiss { background: transparent; color: #cfd3e3; padding: 0 8px; }
@media (max-width: 1023px) {
    .arz-toast { bottom: 84px; }
    body.arz-funnel-sticky .arz-toast { bottom: 146px; }
}

/* ------------------------------------------------------------ saved list page */
.arz-saved__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.arz-saved__count { margin: 0; font-size: 13px; color: #5f6480; }
.arz-saved__clear {
    min-height: 36px; padding: 0 12px; border: 1px solid #e3e5ee; border-radius: 8px; background: transparent;
    color: #a0323a; font: inherit; font-size: 13px; cursor: pointer;
}
.arz-saved__clear[hidden] { display: none; }
.arz-saved__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 768px) { .arz-saved__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .arz-saved__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.arz-saved__item {
    position: relative; display: flex; gap: 12px; padding: 12px;
    border: 1px solid #e3e5ee; border-radius: 10px; background: #fff;
}
.arz-saved__thumb {
    flex: 0 0 96px; width: 96px; height: 72px; border-radius: 8px; overflow: hidden; background: #eef0f6;
}
.arz-saved__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arz-saved__body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.arz-saved__title { margin: 0; font-size: 14px; font-weight: 800; line-height: 1.6; color: #2b2f45; }
.arz-saved__title a { color: inherit; text-decoration: none; }
.arz-saved__title a:hover { color: #007a55; }
.arz-saved__meta { margin: 0; font-size: 12px; color: #5f6480; display: flex; flex-wrap: wrap; gap: 4px 12px; }
.arz-saved__progress { height: 3px; border-radius: 2px; background: #eef0f6; overflow: hidden; margin-top: auto; }
.arz-saved__progress span { display: block; height: 100%; background: #00cb8c; }
.arz-saved__remove {
    position: absolute; top: 6px; inset-inline-end: 6px; width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border: 0; border-radius: 8px; background: transparent; color: #8a8fa8; cursor: pointer;
}
.arz-saved__remove:hover { color: #a0323a; background: #fbf1f2; }
.arz-saved__remove svg { width: 18px; height: 18px; }
[data-arz-saved-empty][hidden] { display: none; }

/* ------------------------------------------------------------ motion */
@media (prefers-reduced-motion: reduce) {
    .arz-progress, .arz-rbar, .arz-toast, .arz-stoc__toggle svg, .arz-stoc__list a,
    .arz-useful__btn, .arz-bookmark, .entry-content .arz-anchor { transition: none; }
}

/* ------------------------------------------------------------ dark mode */
html.dark-mode #arz-sticky-toc, html.dark-mode .arz-tocfab, html.dark-mode .arz-rbar, html.dark-mode .arz-bookmark,
html.dark-mode .arz-useful__btn, html.dark-mode .arz-saved__item {
    background: rgb(var(--arz-c-block)); border-color: rgb(var(--arz-c-border-strong)); color: rgb(var(--arz-c-text));
}
html.dark-mode #arz-sticky-toc, html.dark-mode .arz-tocfab { box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
html.dark-mode .arz-rbar { box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
html.dark-mode .arz-stoc__title, html.dark-mode .arz-useful__q, html.dark-mode .arz-saved__title { color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-stoc__left, html.dark-mode .arz-saved__count, html.dark-mode .arz-saved__meta { color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-stoc__toggle, html.dark-mode .arz-rbar__btn, html.dark-mode .arz-stoc__list a,
html.dark-mode .arz-stoc__list li.arz-toc-sub a, html.dark-mode .arz-saved__remove,
html.dark-mode .entry-content .arz-anchor { color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-stoc__toggle:hover, html.dark-mode .arz-stoc__list a:hover,
html.dark-mode .arz-rbar__btn:active, html.dark-mode .arz-rbar__btn[aria-pressed="true"],
html.dark-mode .arz-useful__btn.is-chosen, html.dark-mode .entry-content .arz-anchor:hover,
html.dark-mode .entry-content .arz-anchor.is-done { background: rgb(var(--arz-c-primary-tint)); color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-stoc__list a.is-active { background: rgb(var(--arz-c-primary-tint)); color: rgb(var(--arz-c-primary)); border-color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-bookmark:hover, html.dark-mode .arz-bookmark[aria-pressed="true"],
html.dark-mode .arz-useful__btn:hover, html.dark-mode .arz-useful__thanks,
html.dark-mode .arz-saved__title a:hover { color: rgb(var(--arz-c-primary)); border-color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-useful { border-top-color: rgb(var(--arz-c-border)); }
html.dark-mode .arz-toast { background: rgb(var(--arz-c-over-strong)); color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-saved__thumb, html.dark-mode .arz-saved__progress { background: rgb(var(--arz-c-over)); }
html.dark-mode .arz-saved__clear { border-color: rgb(var(--arz-c-border-strong)); color: #ff8a7a; }
html.dark-mode .arz-saved__remove:hover { background: rgb(var(--arz-c-danger-tint)); color: #ff8a7a; }

/* Scroll-spy on the in-article list too. */
[data-arz-toc] #headings a.is-active { color: #007a55; font-weight: 700; }
html.dark-mode [data-arz-toc] #headings a.is-active { color: rgb(var(--arz-c-primary)); }