/*
 * Layout, spacing and component fixes from the UI review, loaded after
 * style.css, enhancements.css and theme-mode.css by src/Base/UiFixAssets.php.
 *
 * Hand-written on purpose: the compiled Tailwind stylesheet cannot be rebuilt
 * as part of a deploy, so classes that are not already in it would match
 * nothing. Dark-mode values reuse the --arz-c-* channels from theme-mode.css.
 */

/* ---------------------------------------------------------------- Page frame */

/* Short pages (an empty search, a week with no events): the footer stopped
   half-way down and the page background showed under it. #content is already
   a min-height flex column; this pushes the footer to its bottom. */
.site-footer { margin-top: auto; }

/* Drawer open: the page behind it kept scrolling. */
html.arz-scroll-locked,
html.arz-scroll-locked body { overflow: hidden; }

/* Drawer logo: the SVG has no width/height of its own and rendered 0×0. */
.arz-drawer-logo { display: block; height: 32px; width: auto; max-width: 160px; }

/* ---------------------------------------------------------------- Article */

/* Headings had no top margin and a 1.25rem bottom one, so each heading sat
   closer to the paragraph before it than to its own section. */
.entry-content h2 { margin-top: 2.25rem; margin-bottom: .75rem; }
.entry-content h3 { margin-top: 1.75rem; margin-bottom: .5rem; }
.entry-content h4 { margin-top: 1.5rem; margin-bottom: .5rem; }
.entry-content > :first-child,
.entry-content .sc_fs_faq h3 { margin-top: 0; }

/* FAQ cards (Structured Content): about 55px between cards, from paragraph
   margins stacking with the card's own. */
.entry-content .sc_fs_faq { margin: 0 0 12px; }
.entry-content .sc_fs_faq > p:last-child { margin-bottom: 0; }
.entry-content .sc_fs_faq + p:empty { display: none; }

/* Table of contents: h3 entries indented under their h2. */
.arz-toc-sub { margin-right: 1.25rem; list-style: circle; font-size: .95em; }

/* A content image whose file is missing collapses instead of leaving a
   ~450px blank box (public/js/ui-fixes.js adds the class). */
.arz-img-missing { display: none !important; }
.arz-img-fallback { object-fit: cover; background: #eef0f6; }

/* Tags and share row under the article. */
.arz-entry-footer { margin-top: 8px; }
.arz-entry-tags { list-style: none; margin: 0; padding: 0; }
.arz-entry-tag {
    display: inline-flex; align-items: center; min-height: 28px; padding: 2px 10px;
    border-radius: 8px; background: #f3f4f8; color: #4b5068; font-size: 13px; line-height: 1.6;
    white-space: nowrap; text-decoration: none; transition: background-color .2s, color .2s;
}
.arz-entry-tag:hover { background: #e7e9f1; color: #2b2f45; }

.arz-share__toggle {
    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-share__toggle:hover,
.arz-share__toggle[aria-expanded="true"] { border-color: #33e5ae; color: #007a55; }
.arz-share__panel {
    position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 220px; padding: 14px 16px; border-radius: 10px; background: #fff;
    box-shadow: 0 0 30px 0 rgba(7, 16, 58, .12); font-size: 13px; color: #4b5068;
}
.arz-share__panel[hidden] { display: none; }
.arz-share__panel a { color: #8a8fa8; text-decoration: none; transition: color .2s; }
.arz-share__panel a:hover { color: #2b2f45; }
.arz-share__text-link { font-size: 13px; font-weight: 700; }
.arz-share__copy {
    width: 100%; padding: 6px 10px; border: 1px solid #e3e5ee; border-radius: 8px;
    background: transparent; color: #2b2f45; font: inherit; font-size: 13px; cursor: pointer;
}
.arz-share__copy:hover { border-color: #33e5ae; }

/* Sidebar: the funnel plugin's sticky banner sat flush against «ما را دنبال کنید». */
.arz-sidebar .arz-side-sticky { margin-top: 16px; }
@media (min-width: 768px) { .arz-sidebar .arz-side-sticky { margin-top: 32px; } }

/* ---------------------------------------------------------------- Lists */

/* Search box used by the empty states, the 404 page and search results. */
.arz-empty-state__form { display: flex; gap: 8px; width: 100%; max-width: 420px; margin-top: 8px; }
.arz-empty-state__form input {
    flex: 1 1 auto; min-width: 0; width: 100%; height: 40px; padding: 0 12px; border: 1px solid #e3e5ee;
    border-radius: 8px; background: #fff; color: #2b2f45; font: inherit; font-size: 14px;
}
.arz-empty-state__form input:focus { border-color: #33e5ae; outline: 2px solid rgba(51, 229, 174, .25); outline-offset: 0; }
.arz-empty-state__form button {
    flex: 0 0 auto; height: 40px; padding: 0 16px; border: 0; border-radius: 8px;
    background: #007a55; color: #fff; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer;
}
/* #007a55 rather than the brand #00cb8c: white on the brand green is 2.1:1. */
.arz-empty-state__form button:hover { background: #005c40; }
.arz-search-refine { max-width: 520px; margin-top: 0; }
.error-container .arz-empty-state__form { margin-inline: auto; }
@media (min-width: 1024px) { .error-container .arz-empty-state__form { margin-inline: 0; } }

/* Learning path on category/learn-crypto. */
.arz-learn-path ol { list-style: none; margin: 0; padding: 0; }
.arz-learn-path__card {
    position: relative; display: flex; flex-direction: column; gap: 6px; height: 100%;
    padding: 18px 18px 16px; border: 1px solid #e3e5ee; border-radius: 10px; background: #fff;
    color: inherit; text-decoration: none; transition: border-color .2s, box-shadow .2s;
}
.arz-learn-path__card:hover { border-color: #33e5ae; box-shadow: 0 6px 20px rgba(7, 16, 58, .06); }
.arz-learn-path__step {
    display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px;
    border-radius: 50%; background: #e6fbf4; color: #007a55; font-weight: 800; font-size: 14px;
}
.arz-learn-path__title { font-size: 16px; font-weight: 800; color: #2b2f45; }
.arz-learn-path__text { font-size: 13px; line-height: 1.8; color: #5f6480; }
.arz-learn-path__count { margin-top: auto; font-size: 12px; color: #007a55; font-weight: 700; }

/* Mega menu: sub-category names were cut to «لیستینگ صرافی های ارزدیجی…». */
.arz-mega__entry-title { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.5; }

/* Story row arrows covered the first and last avatars on phones; touch
   screens scroll the row by swiping. */
@media (max-width: 767px) { .arz-stories__nav { display: none !important; } }

/* Story viewer: with the name field shown the action bar is two rows high
   and covered the slide's call-to-action button. */
.arz-story-card:has(.arz-story-card__comment-meta:not([hidden])) .arz-story-card__body--bottom { padding-block-end: 140px; }

/* Crypto news: important items (ordered above newer ones). */
.arz-cn-tag--important { background: #e6fbf4; color: #00694a; }

/* ---------------------------------------------------------------- Calendar */

.arz-event-passed {
    display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px;
    background: #f3f4f8; color: #5f6480; font-size: 12px; font-weight: 700; white-space: nowrap;
}

/* «خنثی» was text-warning-500, about 1.6:1 on white. */
.arz-text-neutral { color: #a16207; }

/* Timeline: reachable by keyboard now (tabindex + region), so it needs a
   visible focus ring. */
.arz-timeline:focus-visible { outline: 2px solid #007a55; outline-offset: 4px; border-radius: 8px; }

/* ---------------------------------------------------------------- Back to top */

.arz-back-to-top {
    position: fixed; left: 24px; bottom: 24px; z-index: 40;
    display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px;
    border: 1px solid #e3e5ee; border-radius: 50%; background: #fff; color: #4b5068;
    box-shadow: 0 6px 20px rgba(7, 16, 58, .12); cursor: pointer;
    opacity: 0; visibility: hidden; transform: translateY(8px);
    transition: opacity .2s, transform .2s, visibility .2s;
}
.arz-back-to-top svg { width: 22px; height: 22px; }
.arz-back-to-top.is-visible { opacity: 1; visibility: visible; transform: none; }
.arz-back-to-top:hover { color: #007a55; border-color: #33e5ae; }
@media (max-width: 767px) { .arz-back-to-top { left: 16px; bottom: 16px; width: 40px; height: 40px; } }

/* ---------------------------------------------------------------- Accessibility */

/* Footer and breadcrumb links were ~21px tall on phones; 24px is the floor. */
@media (max-width: 767px) {
    .footer-menus a,
    .breadcrumb a { display: inline-block; min-height: 24px; padding-block: 2px; }
}

/* Load-more controls that became <button>: no native button chrome. */
#load-more-events,
#load-more-technical-analysis,
#load-more-technical-analysis-categories { background: none; border: 0; font: inherit; cursor: pointer; }
.toggle-element { background: none; border: 0; font: inherit; cursor: pointer; text-align: right; }

/* ---------------------------------------------------------------- Dark mode */

/* Captions (dates, «نمایش بیشتر») were 115 115 115 on the dark cards, 3.6:1. */
html.dark-mode:root { --arz-c-caption: 140 140 140; }

/* Links inside article text were told apart from the text by colour alone
   (1.1:1 against it); underlined as in the light theme. */
html.dark-mode .entry-content :where(p, li, td, th, blockquote, figcaption, dd) a {
    text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
}

html.dark-mode .arz-entry-tag { background: rgb(var(--arz-c-over)); color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-entry-tag:hover { background: rgb(var(--arz-c-over-strong)); color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-share__toggle,
html.dark-mode .arz-share__panel,
html.dark-mode .arz-back-to-top,
html.dark-mode .arz-learn-path__card,
html.dark-mode .arz-empty-state__form input {
    background: rgb(var(--arz-c-block)); border-color: rgb(var(--arz-c-border-strong)); color: rgb(var(--arz-c-text));
}
html.dark-mode .arz-share__panel { box-shadow: 0 0 30px rgba(0, 0, 0, .5); }
html.dark-mode .arz-share__panel a { color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-share__panel a:hover,
html.dark-mode .arz-share__copy { color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-share__copy { border-color: rgb(var(--arz-c-border-strong)); }
html.dark-mode .arz-learn-path__step { background: rgb(var(--arz-c-primary-tint)); color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-learn-path__title { color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-learn-path__text { color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-learn-path__count { color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-event-passed,
html.dark-mode .arz-cn-tag--important { background: rgb(var(--arz-c-primary-tint)); color: rgb(var(--arz-c-primary)); }
html.dark-mode .arz-text-neutral { color: #facc15; }
html.dark-mode .arz-img-fallback { background: rgb(var(--arz-c-over)); }

/* ---------------------------------------------------------------- Own layout classes
   (the compiled stylesheet has no grid-cols-1, flex-1, min-w-0, py-12 …) */

.arz-empty-state {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    width: 100%; padding: 48px 16px; text-align: center;
}
.arz-empty-state--compact { padding: 32px 16px; }
.arz-empty-state__icon { font-size: 48px; line-height: 1; color: #c3c7d6; }
.arz-empty-state__title { margin: 0; font-size: 18px; font-weight: 800; color: #2b2f45; }
.arz-empty-state__text { margin: 0; max-width: 480px; font-size: 14px; line-height: 1.9; color: #5f6480; }
.arz-empty-state__link { font-size: 14px; color: #007a55; text-decoration: none; }
.arz-empty-state__link:hover { text-decoration: underline; }
html.dark-mode .arz-empty-state__title { color: rgb(var(--arz-c-title)); }
html.dark-mode .arz-empty-state__text { color: rgb(var(--arz-c-muted)); }
html.dark-mode .arz-empty-state__link { color: rgb(var(--arz-c-primary)); }

.arz-learn-path { margin-bottom: 24px; }
.arz-learn-path__heading { margin: 0 0 16px; font-size: 18px; font-weight: 800; color: #2b2f45; }
.arz-learn-path__list { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 768px) {
    .arz-learn-path { margin-bottom: 32px; }
    .arz-learn-path__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
html.dark-mode .arz-learn-path__heading { color: rgb(var(--arz-c-title)); }

.arz-week-meta { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 4px; }

.arz-event-row__main { flex: 1 1 auto; min-width: 0; }
.arz-event-row__date { padding-inline: 8px; }
@media (min-width: 768px) { .arz-event-row__date { padding-inline: 16px; } }

#filter_search { background: transparent; }

/* 404: with the full footer back the error block is no longer centred in an
   empty viewport, and its title sat right under the header. */
.error-container { padding-top: 48px; }
@media (min-width: 1024px) { .error-container { padding-top: 80px; } }

/* style.css sizes every span in .pagination as a 40px box; not the hidden labels. */
.pagination .arz-visually-hidden { min-width: 0; min-height: 0; }

/* wpDiscuz's comment bubble sits in a fixed wrapper ~340px wide along the
   bottom of the screen, invisible but catching every tap on the content
   under it — and on the back-to-top button. Only the bubble itself takes
   pointer events now. */
#wpd-bubble-wrapper { pointer-events: none; }
#wpd-bubble-wrapper > * { pointer-events: auto; }

/* ================================================================
   Mobile review — second round
   ================================================================ */

/* iOS zooms the page into any field under 16px when it is focused, and the
   page stays zoomed after: the header search (every page), the calendar and
   analysis searches, the comment editor and the story comment fields were
   13–14px. Touch layouts only, so the desktop sizes stay as designed. */
@media (max-width: 1023px) {
    #searchContainer input,
    .asp_w input.orig,
    #filter_search,
    #technical-analysis-categories-search,
    .arz-empty-state__form input,
    #wpdcom textarea,
    #wpdcom input[type="text"],
    #wpdcom input[type="email"],
    #wpdcom .ql-editor,
    .arz-story-card__comment-input,
    .arz-story-card__comment-meta input { font-size: 16px !important; }
}

/* Article text was 14px with a 28px line on phones and tablets — small for
   long reading. 16px / 1.9. */
@media (max-width: 1023px) {
    .entry-content :where(p, li, td, th, blockquote, dd, figcaption) { font-size: 16px; line-height: 1.9; }
    .entry-content .sc_fs_faq p { font-size: 15px; }
}

/* Old posts carry inline text-align: justify; on a phone-width column that
   leaves wide gaps between words, headings included. */
@media (max-width: 767px) {
    .entry-content [style*="justify"],
    .entry-content .has-text-align-justify { text-align: right !important; }
}

/* Header search on phones: the box was a fixed 288px, which with the burger
   is the whole 320px screen and squeezed the burger to the edge. And with
   the logo hidden there was no visible way to close it — the magnifier
   button now shows a close mark while open. */
@media (max-width: 767px) {
    #searchContainer.w-72 { width: calc(100vw - 32px - 64px); }
    #searchContainer.w-72 #searchButton .azico-Search-OutLined::before { content: "\e99e"; }
    div#ajaxsearchprores4_1,
    div#ajaxsearchprores1_1 { width: calc(100vw - 32px) !important; max-width: 420px; }
}

/* Story viewer on phones: the close button sat on the story's avatar and
   title and on the right end of the progress bars. */
@media (max-width: 767px) {
    .arz-story-card__header { padding-inline-start: 46px; }
    .arz-story-card__progress { inset-inline-start: 56px; }
}

/* Homepage slider: the slide title had no side padding and ran into the
   card edges on 320–360px screens. */
.swiper.homepage .swiper-slide h2 { padding-inline: 16px; }

/* Single post, 1024–1295px: a 9/3 split left the sidebar ~220px wide and
   cut the coin names («خرید بیت ک…»). 8/4 until the desktop breakpoint. */
@media (min-width: 1024px) and (max-width: 1295px) {
    .arz-main-col.col-span-9 { grid-column: span 8 / span 8; }
    .arz-sidebar.col-span-3 { grid-column: span 4 / span 4; }
}

/* Single post on phones and tablets: the whole sidebar stacks under the
   article and made it 14–16k px long. The long lists are shortened there;
   each keeps its «همه…» link. */
@media (max-width: 1023px) {
    .arz-sidebar .arz-coins__list > li:nth-child(n+6) { display: none; }
    .arz-sidebar .arz-side-list > :nth-child(n+4),
    .arz-sidebar .arz-top > li:nth-child(n+4) { display: none; }
}

/* Horizontal scroll rows: fade on the side that has more (ui-fixes.js). */
.arz-scroll-hint.arz-fade-end { -webkit-mask-image: linear-gradient(to left, transparent 0, #000 36px); mask-image: linear-gradient(to left, transparent 0, #000 36px); }
.arz-scroll-hint.arz-fade-start { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px); mask-image: linear-gradient(to right, transparent 0, #000 36px); }
.arz-scroll-hint.arz-fade-start.arz-fade-end { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 36px, #000 calc(100% - 36px), transparent 100%); }

/* Crypto news day summary: on a phone the line wrapped after a separator
   and left a lone «•» at the end of the first line. The day gets its own
   line there; count and last update share the second. */
@media (max-width: 767px) {
    .arz-cn-summary__day { flex-basis: 100%; }
    .arz-cn-summary__day + .arz-cn-summary__sep { display: none; }
}

/* Footer social icons were 20×27px tap targets. */
.site-footer a[data-tooltip][aria-label] { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px; }

/* arzinja-funnel sidebar: coin symbols and changes were 11px. */
.arz-coins .arz-coins__sym,
.arz-coins .arz-coins__change { font-size: 12px; }

/* Calendar filter sheet: options are focusable now; give them a ring. */
.drop-down li.option:focus-visible { outline: 2px solid #007a55; outline-offset: -2px; }
.drop-down .selector:focus-visible { outline: 2px solid #007a55; outline-offset: 2px; border-radius: 8px; }

/* Layout shift on load.
   - Crypto news: «خبرهای بیشتر» ships `hidden` and cryptonews.js reveals it,
     pushing the footer down (CLS 0.47 on a tablet). With scripting on, its
     space is kept from the first paint.
   - Homepage lead card on phones: the image box is h-auto and was 0px tall
     until the lazy-loaded image arrived. */
html.arz-js .arz-cn-more[hidden] { display: flex !important; visibility: hidden; }
@media (max-width: 767px) {
    .arz-card-media--large .image-container { display: block; width: 100%; aspect-ratio: 350 / 262; }
}

/* Footer social row at 320px: six 36px targets and 16px gaps were wider than
   the screen and caused sideways scrolling. */
@media (max-width: 374px) {
    .site-footer .w-full.border-t .flex.items-center.justify-center.gap-4 { gap: 4px; flex-wrap: wrap; }
}

/* wpDiscuz email and subscription fields were 13px (iOS focus zoom). */
@media (max-width: 1023px) {
    #wpdcom #wpdiscuz-subscribe-form input[type="email"],
    #wpdcom #wpdiscuz-subscribe-form select,
    #wpdcom input.email,
    #wpdcom select,
    .wpdiscuz_select { font-size: 16px !important; }
}

/* Homepage slider before Swiper initialises: each slide was 100% wide, so the
   first frame showed one full-width slide that then snapped to two or three
   per row — a 0.5–0.8 layout shift on desktop. The same widths and gaps
   Swiper sets (slider.js breakpoints; RTL puts the gap in margin-left). */
@media (min-width: 768px) {
    .swiper.homepage:not(.swiper-initialized) .swiper-slide { width: calc((100% - 24px) / 2); margin-left: 24px; }
}
@media (min-width: 1024px) {
    .swiper.homepage:not(.swiper-initialized) .swiper-slide { width: calc((100% - 48px) / 3); }
}