/*
  استایلِ صفحه‌های سئو: هابِ دسته، نقشه‌ی مقالات، قابلیت‌ها و جعبه‌ی محصول.

  چرا فایلِ جدا: Tailwind از پیش کامپایل شده (public/css/site.css) و ابزارِ بیلد در این ماشین نیست؛ کلاس‌های تازه را
  اینجا با CSSِ ساده می‌نویسیم و صفحه‌ها از @section('styles') لینکش می‌کنند. رنگ‌ها همان پالتِ site.css هستند.
  RTL: همه‌چیز منطقی (inline-start/end) یا متقارن است.
*/

:root {
    --sp-ink: #22303a;
    --sp-ink-2: #37505b;
    --sp-teal-50: #f1f5f6;
    --sp-teal-100: #dde7eb;
    --sp-teal-700: #446370;
    --sp-tang-50: #fef6ed;
    --sp-tang-200: #f9cfa3;
    --sp-tang-600: #e49344;
    --sp-tang-700: #b4702f;
}

/* ── مقدمه‌ی هابِ دسته ── */
.seo-intro p { font-size: 1.0625rem; line-height: 2.1; color: rgba(34, 48, 58, .72); margin: 0 0 .9rem; }
.seo-intro a { color: var(--sp-tang-700); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
               text-decoration-color: rgba(245, 168, 94, .5); }
.seo-intro a:hover { text-decoration-color: var(--sp-tang-600); }
.seo-intro .seo-intro-meta { font-size: .9rem; color: rgba(34, 48, 58, .5); margin-top: 1.1rem; }

/* ── فهرستِ فشرده‌ی هابِ دسته ── */
.hub-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0 2.5rem; grid-template-columns: 1fr; }
@media (min-width: 900px) { .hub-list { grid-template-columns: 1fr 1fr; } }
.hub-list li { border-bottom: 1px solid var(--sp-teal-100); }
.hub-list a { display: block; padding: 1.05rem .25rem; text-decoration: none; }
.hub-t { display: block; font-weight: 800; color: var(--sp-ink); line-height: 1.7; transition: color .15s; }
.hub-d { display: block; font-size: .875rem; color: rgba(34, 48, 58, .55); line-height: 1.9; margin-top: .15rem; }
.hub-list a:hover .hub-t { color: var(--sp-teal-700); }

/* ── نقشه‌ی مقالات ── */
.map-toc { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 2.5rem; padding: 0; list-style: none; }
.map-toc a { display: inline-block; padding: .5rem 1rem; border-radius: 999px; background: #fff; border: 1px solid var(--sp-teal-100);
             font-weight: 700; font-size: .9rem; color: var(--sp-ink-2); text-decoration: none; }
.map-toc a:hover { color: var(--sp-tang-700); border-color: var(--sp-tang-200); }
.map-cat { margin-top: 3rem; scroll-margin-top: 90px; }
.map-cat h2 { font-size: 1.6rem; font-weight: 900; color: var(--sp-ink); margin: 0 0 .5rem; }
.map-cat > p { color: rgba(34, 48, 58, .62); line-height: 2; margin: 0 0 1.2rem; max-width: 52rem; }
.map-list { list-style: none; margin: 0; padding: 0; columns: 1; column-gap: 2.5rem; }
@media (min-width: 900px) { .map-list { columns: 2; } }
.map-list li { break-inside: avoid; padding: .55rem 0; border-bottom: 1px dashed var(--sp-teal-100); }
.map-list a { color: var(--sp-ink); font-weight: 700; text-decoration: none; line-height: 1.8; }
.map-list a:hover { color: var(--sp-tang-700); }

/* ── جعبه‌ی «با نارنگی امتحانش کن» ── */
.pbox { max-width: 48rem; margin: 3.5rem auto 0; padding: 0 1.25rem; }
.pbox-in { background: var(--sp-tang-50); border: 1px solid var(--sp-tang-200); border-radius: 1.5rem; padding: 1.6rem 1.6rem 1.2rem; }
.pbox h2 { font-size: 1.3rem; font-weight: 900; color: var(--sp-ink); margin: 0 0 .35rem; }
.pbox-sub { color: rgba(34, 48, 58, .62); font-size: .95rem; line-height: 1.9; margin: 0 0 1rem; }
.pbox ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
@media (min-width: 640px) { .pbox ul { grid-template-columns: 1fr 1fr; } }
.pbox li a { display: block; height: 100%; background: #fff; border: 1px solid var(--sp-tang-200); border-radius: 1rem;
             padding: .85rem 1rem; text-decoration: none; transition: border-color .15s, transform .15s; }
.pbox li a:hover { border-color: var(--sp-tang-600); transform: translateY(-1px); }
.pbox-t { display: block; font-weight: 800; color: var(--sp-tang-700); line-height: 1.7; }
.pbox-d { display: block; font-size: .85rem; color: rgba(34, 48, 58, .6); line-height: 1.8; margin-top: .1rem; }
.pbox-all { display: inline-block; margin-top: .9rem; font-size: .9rem; font-weight: 700; color: var(--sp-ink-2); }
.pbox-all:hover { color: var(--sp-tang-700); }

/* ── صفحه‌ی قابلیت‌ها ── */
.feat-lead { font-size: 1.15rem; line-height: 2.1; color: rgba(34, 48, 58, .7); max-width: 48rem; }
.feat-grid { display: grid; gap: 1.25rem; grid-template-columns: 1fr; margin-top: 2.5rem; }
@media (min-width: 760px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
.feat-card { background: #fff; border: 1px solid var(--sp-teal-100); border-radius: 1.5rem; padding: 1.6rem; }
.feat-card h2 { font-size: 1.25rem; font-weight: 900; color: var(--sp-ink); margin: 0 0 .5rem; line-height: 1.6; }
.feat-card p { color: rgba(34, 48, 58, .68); line-height: 2; margin: 0 0 .8rem; font-size: .98rem; }
.feat-card .feat-more { font-weight: 800; color: var(--sp-tang-700); text-decoration: underline; text-underline-offset: 4px;
                        text-decoration-color: rgba(245, 168, 94, .5); }
.feat-card .feat-note { font-size: .85rem; color: rgba(34, 48, 58, .5); line-height: 1.9; }
.feat-sec { margin-top: 3.5rem; max-width: 48rem; }
.feat-sec h2 { font-size: 1.5rem; font-weight: 900; color: var(--sp-ink); margin: 0 0 .8rem; }
.feat-sec p { color: rgba(34, 48, 58, .7); line-height: 2.1; margin: 0 0 .9rem; }
.feat-sec a { color: var(--sp-tang-700); font-weight: 700; text-decoration: underline; text-underline-offset: 4px;
              text-decoration-color: rgba(245, 168, 94, .5); }

/* تحریریه/نویسنده — فهرست‌های خوانا */
.feat-list { list-style: none; margin: 0 0 .9rem; padding: 0; max-width: 48rem; }
.feat-list li { position: relative; padding: .55rem 1.6rem .55rem 0; color: rgba(34, 48, 58, .72); line-height: 2; }
.feat-list li::before { content: "\2022"; position: absolute; right: .35rem; top: .55rem; color: var(--sp-tang-700); font-weight: 900; }
.feat-list a { color: var(--sp-tang-700); font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }