:root{
  --ink:#0B1B2B; --ink-2:#334155; --muted:#64748B;
  --teal:#0E6E6E; --teal-2:#0A5555; --teal-tint:#EAF4F3;
  --sand:#A87F4E; --sand-tint:#FBF6EF;
  /* نسخه‌ی تیره‌ترِ شنی، فقط برای متن روی پس‌زمینه‌ی روشن.
     رنگ اصلی روی سفید کنتراست 3.6 می‌دهد که از حد 4.5 کمتر است. */
  --sand-text:#8F6A38;
  --line:#E6EAEC; --bg:#FFFFFF; --bg-alt:#F7F9FA;
  --r:14px; --shadow:0 1px 2px rgba(11,27,43,.05),0 8px 24px -12px rgba(11,27,43,.14);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Vazirmatn,'Vazirmatn Fallback',system-ui,sans-serif;color:var(--ink);background:var(--bg);
  line-height:1.85;font-size:16px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
/*
   height:auto لازم است، نه اختیاری.
   از راند ۵۵ همه‌ی تصاویر صفت width و height واقعی دارند (برای رزرو فضا و
   کم کردن CLS). ولی وقتی max-width عرض را کوچک می‌کند و ارتفاع روی عددِ
   صفت می‌ماند، تصویر کشیده می‌شود. height:auto نسبت را حفظ می‌کند و مرورگر
   فضا را از روی نسبتِ همان دو صفت رزرو می‌کند.
   قاعده‌های خاص‌تر (‎.ba img و ‎.pf-gallery img‎) با height:100% روی این می‌نشینند.
*/
img{max-width:100%;height:auto;display:block}
/*
   ویدئوی محتوای منتقل‌شده صفت width="640" دارد. بدون این قاعده، در
   موبایلِ 360 پیکسلی کل صفحه 640 پیکسل می‌شود و کاربر باید افقی اسکرول
   کند تا متن را بخواند. قاعده‌ی img این را نمی‌گرفت چون فقط img بود.
*/
video,iframe,embed,object{max-width:100%;height:auto;display:block}
.note-video-clip{width:100%;border-radius:12px;background:#000}
.wrap{max-width:1140px;margin:0 auto;padding:0 20px}
.btn{display:inline-flex;align-items:center;gap:8px;padding:13px 24px;border-radius:10px;
  font-weight:600;font-size:15px;transition:.18s;border:1.5px solid transparent;cursor:pointer}
.btn-p{background:var(--teal);color:#fff}
.btn-p:hover{background:var(--teal-2)}
.btn-o{border-color:var(--line);color:var(--ink);background:#fff}
.btn-o:hover{border-color:var(--teal);color:var(--teal)}
.eyebrow{font-size:13px;font-weight:700;letter-spacing:.04em;color:var(--teal);
  text-transform:uppercase;margin-bottom:12px}
h1,h2,h3{line-height:1.4;font-weight:800;letter-spacing:-.01em}
/* عنوان صفحه‌های فهرست: h1 است (برای موتور جستجو) ولی هم‌اندازه‌ی h2 (برای چشم) */
.page-title{font-size:clamp(24px,3.4vw,34px);margin-bottom:14px}
h2{font-size:clamp(24px,3.4vw,34px);margin-bottom:14px}
h3{font-size:18px;font-weight:700}
.lead{color:var(--ink-2);font-size:17px}
section{padding:76px 0}
.alt{background:var(--bg-alt)}

/* ---------- AUDIENCE BAR ---------- */
.aud{background:var(--ink);color:#fff;font-size:14px}
.aud .wrap{display:flex;gap:0;align-items:stretch}
.aud a{flex:1;padding:11px 8px;text-align:center;opacity:.62;font-weight:600;
  border-bottom:2.5px solid transparent;transition:.15s}
.aud a.on{opacity:1;border-color:var(--teal)}
.aud a:hover{opacity:1}

/* ---------- HEADER ---------- */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);
  backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.brand{display:flex;align-items:center;gap:11px;font-weight:800;font-size:17px}
.mark{width:38px;height:38px;border-radius:10px;background:var(--teal);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800}
.brand small{display:block;font-size:11.5px;font-weight:500;color:var(--muted);margin-top:-3px}
.menu{display:none;gap:30px;font-size:15px;font-weight:600}
.menu a:hover{color:var(--teal)}
.nav-cta{display:none}
.burger{width:42px;height:42px;border:1px solid var(--line);border-radius:10px;
  background:#fff;display:grid;place-items:center;font-size:19px}
@media(min-width:900px){.menu{display:flex}.nav-cta{display:inline-flex}.burger{display:none}}

/* ---------- HERO ---------- */
.hero{padding:60px 0 70px}
.hero-grid{display:grid;gap:44px}
.hero h1{font-size:clamp(30px,5.6vw,50px);margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--teal)}
.hero p{font-size:17.5px;color:var(--ink-2);margin-bottom:28px;max-width:52ch}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:34px}
.trust{display:flex;gap:26px;flex-wrap:wrap;padding-top:26px;border-top:1px solid var(--line)}
.trust div strong{display:block;font-size:26px;font-weight:800;color:var(--teal);line-height:1.3}
.trust div span{font-size:13.5px;color:var(--muted)}
.hero-visual{position:relative;border-radius:20px;overflow:hidden;background:var(--teal-tint);
  aspect-ratio:4/3.4;display:grid;place-items:center;border:1px solid var(--line)}
.hero-visual .ph{text-align:center;color:var(--teal);opacity:.5;font-size:14px;font-weight:600}
.hero-visual .ph span{font-size:46px;display:block;margin-bottom:8px}
.badge-card{position:absolute;bottom:18px;inset-inline-start:18px;background:#fff;padding:13px 17px;
  border-radius:12px;box-shadow:var(--shadow);display:flex;align-items:center;gap:11px;max-width:88%}
.badge-card b{font-size:14px}.badge-card i{font-style:normal;font-size:12.5px;color:var(--muted);display:block}
.dot{width:9px;height:9px;border-radius:50%;background:#16A34A;flex:none}
@media(min-width:900px){.hero-grid{grid-template-columns:1.08fr .92fr;align-items:center}}

/* ---------- ANSWER BLOCK (GEO) ---------- */
.answer{background:var(--teal-tint);border-inline-start:4px solid var(--teal);
  border-radius:0 var(--r) var(--r) 0;padding:22px 26px;margin:26px 0}
.answer p{font-size:16.5px;color:var(--ink);margin:0}

/* ---------- CARDS ---------- */
.grid{display:grid;gap:18px}
@media(min-width:640px){.grid.c2{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.grid.c3{grid-template-columns:repeat(3,1fr)}
  .grid.c4{grid-template-columns:repeat(4,1fr)}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;
  transition:.2s}
.card:hover{border-color:var(--teal);transform:translateY(-2px);box-shadow:var(--shadow)}
.card .ico{width:46px;height:46px;border-radius:11px;background:var(--teal-tint);color:var(--teal);
  display:grid;place-items:center;font-size:21px;margin-bottom:15px}
.card h3{margin-bottom:8px}
.card p{font-size:14.5px;color:var(--muted);line-height:1.8}
.card .more{display:inline-block;margin-top:13px;font-size:14px;font-weight:700;color:var(--teal)}

/* ---------- BEFORE / AFTER ---------- */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:2px;border-radius:12px;overflow:hidden;
  border:1px solid var(--line)}
.ba div{aspect-ratio:1/1;display:grid;place-items:center;font-size:13px;font-weight:700;position:relative}
.ba .b{background:#F1F5F9;color:var(--muted)}
.ba .a{background:var(--teal-tint);color:var(--teal)}
.ba div::after{content:attr(data-l);position:absolute;top:9px;inset-inline-start:9px;
  background:rgba(11,27,43,.78);color:#fff;font-size:10.5px;padding:3px 9px;border-radius:5px;font-weight:600}
.case-meta{display:flex;gap:16px;font-size:13px;color:var(--muted);margin-top:13px;flex-wrap:wrap}
.case-meta b{color:var(--ink)}

/* ---------- PRO SECTION ---------- */
.pro{background:var(--ink);color:#fff}
.pro h2{color:#fff}
.pro .lead{color:#94A3B8}
.pro .card{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.12)}
.pro .card:hover{border-color:var(--sand);box-shadow:none}
.pro .card h3{color:#fff}
.pro .card p{color:#94A3B8}
.pro .card .ico{background:rgba(168,127,78,.2);color:#D6B084}
.pro .card .more{color:#D6B084}
.pro .btn-p{background:var(--sand)}
.pro .btn-p:hover{background:#8F6B3E}

/* ---------- AUTHOR / E-E-A-T ---------- */
.author{display:flex;gap:20px;align-items:flex-start;background:var(--sand-tint);
  border:1px solid #EFE2D0;border-radius:var(--r);padding:24px}
.author .av{width:66px;height:66px;border-radius:50%;background:var(--sand);color:#fff;
  display:grid;place-items:center;font-weight:800;font-size:21px;flex:none}
.author h3{margin-bottom:5px}
.author p{font-size:14px;color:var(--ink-2)}
.author .cred{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}
.author .cred span{font-size:12px;background:#fff;border:1px solid #EFE2D0;
  padding:4px 11px;border-radius:20px;color:var(--sand-text);font-weight:600}
.reviewed{font-size:13px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:7px}

/* ---------- FAQ ---------- */
details{border-bottom:1px solid var(--line);padding:19px 0}
summary{font-weight:700;cursor:pointer;list-style:none;display:flex;justify-content:space-between;
  gap:16px;font-size:16.5px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--teal);font-size:22px;font-weight:400;flex:none;line-height:1}
details[open] summary::after{content:"−"}
details p{margin-top:12px;color:var(--ink-2);font-size:15.5px}

/* ---------- CTA + FOOTER ---------- */
.cta{background:var(--teal);color:#fff;text-align:center}
.cta h2{color:#fff}.cta p{color:#DCEEEC;max-width:56ch;margin:0 auto 26px}
.cta .btn-p{background:#fff;color:var(--teal)}
.cta .btn-p:hover{background:#EAF4F3}
.cta .btn-o{border-color:rgba(255,255,255,.4);color:#fff;background:transparent}
.cta .btn-o:hover{border-color:#fff;color:#fff}
footer{background:var(--ink);color:#94A3B8;padding:56px 0 26px;font-size:14.5px}
.f-grid{display:grid;gap:34px;margin-bottom:34px}
@media(min-width:768px){.f-grid{grid-template-columns:1.6fr 1fr 1fr}}
@media(min-width:1000px){.f-grid{grid-template-columns:1.5fr 1fr 1fr 1.1fr}}
footer h4{color:#fff;font-size:15px;margin-bottom:15px;font-weight:700}
footer a:hover{color:#fff}
footer li{list-style:none;margin-bottom:9px}
.f-bot{border-top:1px solid rgba(255,255,255,.1);padding-top:22px;font-size:13px;
  display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.note--unused{position:fixed;bottom:14px;inset-inline-end:14px;background:var(--ink);color:#fff;
  font-size:12px;padding:9px 15px;border-radius:9px;z-index:99;opacity:.9}

/* ---------- additions for the real site ---------- */
.menu.open{display:flex;position:absolute;top:70px;inset-inline-start:0;right:0;background:#fff;
  flex-direction:column;gap:0;padding:12px 20px;border-bottom:1px solid var(--line);box-shadow:var(--shadow)}
.menu.open a{padding:11px 0;border-bottom:1px solid var(--line)}
.menu.open a:last-child{border:0}
.crumb{font-size:13.5px;color:var(--muted);padding:20px 0 0}
.crumb a:hover{color:var(--teal)}
.layout{display:grid;gap:44px;padding:22px 0 70px}
@media(min-width:980px){.layout{grid-template-columns:1fr 320px;align-items:start}}
.side{position:sticky;top:92px;display:grid;gap:16px}
.box{border:1px solid var(--line);border-radius:var(--r);padding:22px}
.box.cta{background:var(--teal);color:#fff;border-color:var(--teal)}
.box.cta h3{color:#fff;margin:0 0 8px}
.box.cta p{color:#DCEEEC;font-size:14px;margin-bottom:16px}
.box.cta .btn{width:100%;justify-content:center;background:#fff;color:var(--teal)}
.box h3{margin:0 0 14px;font-size:16px}
.box a{display:block;font-size:14.5px;padding:8px 0;border-bottom:1px solid var(--line);color:var(--ink-2)}
.box a:last-child{border:0}
.box a:hover{color:var(--teal)}
article p{margin-bottom:15px;color:var(--ink-2)}
article h2{font-size:clamp(21px,2.9vw,27px);margin:44px 0 14px}
article h3{margin:26px 0 9px}
article ul,article ol{margin:0 0 16px;padding-inline-start:22px;color:var(--ink-2)}
article li{margin-bottom:8px}
article img{border-radius:var(--r);margin:18px 0}
article table{width:100%;border-collapse:collapse;margin:18px 0;font-size:15px}
article th,article td{padding:12px 14px;text-align:start;border-bottom:1px solid var(--line)}
article th{background:var(--bg-alt);font-weight:700;font-size:14px}
.answer .lbl{font-size:12.5px;font-weight:800;color:var(--teal);letter-spacing:.03em;
  text-transform:uppercase;margin-bottom:7px}
.meta-row{display:flex;gap:18px;flex-wrap:wrap;font-size:13.5px;color:var(--muted);
  margin:14px 0 26px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.pager{display:flex;gap:8px;justify-content:center;margin-top:36px;flex-wrap:wrap}
.pager a,.pager span{padding:9px 15px;border:1px solid var(--line);border-radius:9px;font-size:14px}
.pager .active,.pager a:hover{border-color:var(--teal);color:var(--teal)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin:22px 0 30px}
.filters a{padding:8px 17px;border:1px solid var(--line);border-radius:20px;font-size:14px;font-weight:600}
.filters a.on,.filters a:hover{border-color:var(--teal);color:var(--teal);background:var(--teal-tint)}
.field{margin-bottom:16px}
.field label{display:block;font-size:14px;font-weight:600;margin-bottom:6px}
.field input,.field textarea{width:100%;padding:12px 14px;border:1px solid var(--line);
  border-radius:10px;font-family:inherit;font-size:15px;background:#fff}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--teal)}
.hp{position:absolute;inset-inline-start:-9999px;opacity:0}
.flash{background:var(--teal-tint);border-inline-start:4px solid var(--teal);
  padding:14px 18px;border-radius:0 var(--r) var(--r) 0;margin-bottom:20px}
.err{color:#B91C1C;font-size:13px;margin-top:5px}
.empty{text-align:center;color:var(--muted);padding:60px 20px}

/* ---------- cover images ---------- */
.cover{width:100%;height:auto;border-radius:var(--r);margin:0 0 26px;
  border:1px solid var(--line);background:var(--bg-alt)}
.card .thumb{aspect-ratio:16/10;border-radius:10px;overflow:hidden;margin-bottom:14px;
  background:var(--bg-alt);border:1px solid var(--line)}
.card .thumb img{width:100%;height:100%;object-fit:cover}


/* === imported-content === */
/* جدول‌های محتوای منتقل‌شده: قبلاً هر مقاله استایل درون‌خطی خودش را داشت */
.prose table, article table, .custom-table {
  width: 100%; border-collapse: collapse; margin: 22px 0; font-size: 15px;
}
.prose table th, article table th, .custom-table th {
  background: #0f766e; color: #fff; padding: 12px; text-align: right;
  border: 1px solid #cbd5e1; font-weight: 700;
}
.prose table td, article table td, .custom-table td {
  padding: 12px; border: 1px solid #e2e8f0; vertical-align: top; line-height: 1.9;
}
.prose table tbody tr:nth-child(even),
article table tbody tr:nth-child(even),
.custom-table tbody tr:nth-child(even) { background: #f8fafc; }

/* تصاویر داخل متن مقالات منتقل‌شده */
article img, .prose img { max-width: 100%; height: auto; border-radius: 12px; }

/* گالری نمونه‌کار */
.pf-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.pf-gallery figure { margin: 0; }
.pf-gallery img { width: 100%; height: 100%; object-fit: cover; border-radius: 12px; display: block; }
.pf-single { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: #f1f5f9; }
.pf-single img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ba img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-body { line-height: 2.05; }

@media (max-width: 640px) {
  /*
     جدول‌های محتوای منتقل‌شده inline style با min-width:520px دارند.
     display:block و overflow-x به‌تنهایی کافی نبود: min-width روی خود جدول
     می‌نشیند و همان ۵۲۰ پیکسل را به کل صفحه تحمیل می‌کند — نتیجه‌اش این بود
     که کاربر موبایل برای خواندن متنِ معمولی هم باید افقی اسکرول می‌کرد.

     ‎!important اینجا لازم است چون رقیبش inline style است و از هر قاعده‌ی
     معمولی قوی‌تر.

     خودِ جدول قابِ اسکرول می‌شود و محتوای داخلش عرض طبیعی‌اش را نگه می‌دارد،
     پس جدول همچنان خوانا و افقی‌قابل‌اسکرول است ولی صفحه نمی‌شکند.
  */
  .prose table, article table, .custom-table {
    font-size: 13px; display: block; overflow-x: auto; max-width: 100%;
    min-width: 0 !important; -webkit-overflow-scrolling: touch;
  }
}
/* === portfolio-ratio ===
   تصویر شاخص نمونه‌کارها خودش ترکیب عمودی «قبل و بعد» است.
   برش (cover) بخشی از یکی از دو عکس را می‌بُرد و کل معنای تصویر را از بین می‌برد،
   پس اینجا کل تصویر نمایش داده می‌شود (contain) روی پس‌زمینه‌ی سفید —
   چون خود تصاویر هم پس‌زمینه‌ی سفید دارند و مرزی دیده نمی‌شود. */

.pf-single {
  aspect-ratio: 4 / 5;
  background: #fff;
  border: 1px solid #eef2f7;
}
.pf-single img { object-fit: contain; }

.pf-gallery figure { aspect-ratio: 4 / 5; background: #fff; border: 1px solid #eef2f7; border-radius: 12px; }
.pf-gallery img { object-fit: contain; }

/* ── صفحات مرتبط (راند ۳۶) ── */
.related{margin:2.5rem 0 0;padding:1.25rem 1.25rem .75rem;background:#f6f8fa;border-radius:14px}
.related-pillar{margin:0 0 1rem;font-size:.92rem;color:#475569}
.related-pillar a{font-weight:600}
.related-title{margin:0 0 .75rem;font-size:1.05rem;font-weight:700}
.related-list{margin:0;padding:0;list-style:none}
.related-list li{padding:.55rem 0;border-top:1px solid #e2e8f0}
.related-list li:first-child{border-top:0}
.related-list a{font-weight:600;text-decoration:none}
.related-list a:hover{text-decoration:underline}
.related-excerpt{display:block;font-size:.85rem;color:#64748b;margin-top:.2rem}

/* ═══ واژگان محتوا (راند ۴۵) ═══
   هر کلاسی که در متن مقاله مجاز است، اینجا تعریف شده.
   افزودن کلاس تازه: هم اینجا، هم در app/Support/ContentClasses.php */

.article-body .lead{font-size:1.08rem;color:#334155;line-height:2.1}

.article-body .content-box,
.article-body .note,
.article-body .tip,
.article-body .warning,
.article-body .clinical{
  margin:1.6rem 0;padding:1rem 1.15rem;border-radius:12px;
  border-inline-start:5px solid;line-height:2
}
.article-body .content-box{background:#f6f8fa;border-color:#94a3b8}
.article-body .note{background:#eff6ff;border-color:#2f80c9}
.article-body .tip{background:#f0fdf4;border-color:#16a34a}
.article-body .warning{background:#fff7ed;border-color:#ea580c}
.article-body .clinical{background:#fdf2f8;border-color:#9e4a50}

.article-body .content-box > :first-child,
.article-body .note > :first-child,
.article-body .tip > :first-child,
.article-body .warning > :first-child,
.article-body .clinical > :first-child{margin-top:0}
.article-body .content-box > :last-child,
.article-body .note > :last-child,
.article-body .tip > :last-child,
.article-body .warning > :last-child,
.article-body .clinical > :last-child{margin-bottom:0}

.article-body .primary-cta{
  display:block;margin:2rem 0;padding:1.15rem 1.25rem;border-radius:14px;
  background:#0f766e;color:#fff;line-height:2
}
.article-body .primary-cta a{color:#fff;font-weight:700;text-decoration:underline}

.article-body .responsive-table{overflow-x:auto;margin:1.6rem 0;-webkit-overflow-scrolling:touch}
.article-body table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:34rem}
.article-body th,.article-body td{padding:.65rem .8rem;border:1px solid #e2e8f0;text-align:start;vertical-align:top}
.article-body th{background:#f1f5f9;font-weight:700}
.article-body .compare-table tbody tr:nth-child(even){background:#fafafa}

.article-body .steps{counter-reset:step;list-style:none;padding:0;margin:1.5rem 0}
.article-body .steps li{position:relative;padding-inline-start:2.6rem;margin-bottom:1rem;line-height:2}
.article-body .steps li::before{
  counter-increment:step;content:counter(step);
  position:absolute;inset-inline-start:0;top:.15rem;
  width:1.9rem;height:1.9rem;border-radius:50%;
  background:#0f766e;color:#fff;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center
}

.article-body .checklist{list-style:none;padding:0;margin:1.5rem 0}
.article-body .checklist li{position:relative;padding-inline-start:1.8rem;margin-bottom:.7rem;line-height:2}
.article-body .checklist li::before{content:"✓";position:absolute;inset-inline-start:0;color:#16a34a;font-weight:700}

.article-body .figure{margin:1.8rem 0;text-align:center}
.article-body .figure img{border-radius:12px}
.article-body .figure-caption{font-size:.85rem;color:#64748b;margin-top:.5rem}

.article-body .small-print{font-size:.85rem;color:#64748b;line-height:1.9}

@media (max-width:640px){
  .article-body .content-box,
  .article-body .note,
  .article-body .tip,
  .article-body .warning,
  .article-body .clinical{padding:.85rem .95rem;border-radius:10px}
  .article-body .primary-cta{padding:1rem}
  .article-body table{font-size:.88rem}
}

/* ═══ صفحه‌ی نویسنده (راند ۴۹) ═══ */
.author-head{display:flex;gap:1.5rem;align-items:flex-start;margin-bottom:2rem;flex-wrap:wrap}
.author-photo{border-radius:20px;object-fit:cover;width:180px;height:180px}
.author-head h1{margin:0 0 .4rem}
.author-role{margin:0 0 .8rem;color:#0f766e;font-weight:600}
.author-bio{margin:0 0 .8rem;line-height:2;color:#334155}
.author-links{list-style:none;display:flex;gap:.75rem;flex-wrap:wrap;padding:0;margin:0}
.author-links a{font-size:.88rem;text-decoration:underline}
.author-section{margin:2rem 0}
.author-section h2{font-size:1.1rem;margin:0 0 .8rem}
.author-tags{list-style:none;display:flex;gap:.5rem;flex-wrap:wrap;padding:0;margin:0}
.author-tags li{background:#f1f5f9;border-radius:999px;padding:.35rem .85rem;font-size:.88rem}
.author-stat{background:#f6f8fa;border-radius:12px;padding:.9rem 1.1rem;line-height:2}
.author-posts{list-style:none;padding:0;margin:0}
.author-posts li{padding:.7rem 0;border-top:1px solid #eef2f7}
.author-posts li:first-child{border-top:0}
.author-posts a{font-weight:600}
.author-post-excerpt{display:block;font-size:.85rem;color:#64748b;margin-top:.2rem}
.author-cards{list-style:none;padding:0;margin:2rem 0 0;display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
.author-cards li{background:#f8fafc;border-radius:14px;padding:1.1rem;display:flex;flex-direction:column;gap:.35rem}
.author-cards a{display:flex;align-items:center;gap:.75rem;text-decoration:none}
.author-cards img{border-radius:12px;object-fit:cover}
.author-card-name{font-weight:700}
.author-card-role{font-size:.85rem;color:#0f766e}
.author-card-meta{font-size:.8rem;color:#64748b}
@media (max-width:640px){
  .author-photo{width:120px;height:120px}
  .author-head{gap:1rem}
}

/* ═══ تجربه مطب (راند ۵۰) ═══
   ادعای تجربی باید از واقعیت علمی عمومی جدا دیده شود. */
.article-body .clinic-experience{
  margin:1.8rem 0;padding:1rem 1.15rem;border-radius:12px;
  background:#fefce8;border:1px dashed #ca8a04;line-height:2;position:relative
}
.article-body .clinic-experience::before{
  content:"تجربه مطب";display:inline-block;margin-bottom:.5rem;
  background:#ca8a04;color:#fff;font-size:.75rem;font-weight:700;
  padding:.2rem .7rem;border-radius:999px
}
.article-body .clinic-experience > :first-child{margin-top:0}
.article-body .clinic-experience > :last-child{margin-bottom:0}

/* ═══════════════════════════════════════════════════════════════════
   راند ۵۶ — موبایل، لینک‌های داخل متن، هدر هوشمند، کارت‌ها و جستجو
   هرچه اینجاست بعد از قاعده‌های بالا می‌آید، پس عمداً بر آن‌ها می‌نشیند.
   ═══════════════════════════════════════════════════════════════════ */

:root{ --link:#1269DB; --link-hover:#0B4FA6; }

/* ── ۱) اسکرول افقی ناخواسته ──────────────────────────────────────
   overflow-x:clip و نه hidden: مقدار hidden یک ظرف اسکرول می‌سازد و
   هدر sticky داخلش دیگر نمی‌چسبد. clip فقط می‌بُرد و رفتار sticky را
   دست‌نخورده می‌گذارد. */
html, body{ overflow-x:clip; max-width:100%; }
.wrap{ width:100%; }

/* واژه‌ی بلند و آدرس بدون فاصله، در ۳۶۰ پیکسل کل صفحه را پهن می‌کرد */
article, .article-body, .prose, .pf-body, .card, .box, .related{
  overflow-wrap:break-word;
}
article pre, .article-body pre, .prose pre{ overflow-x:auto; max-width:100%; }

/* iframe محتوای منتقل‌شده صفت width ثابت دارد */
.article-body iframe, .prose iframe, article iframe{
  width:100%; max-width:100%; aspect-ratio:16/9; height:auto;
}

/* ── ۲) لینک داخل متن ─────────────────────────────────────────────
   قاعده‌ی سراسری a{color:inherit;text-decoration:none} باعث می‌شد لینک
   داخل مقاله عیناً مثل متن معمولی دیده شود. در موبایل hover هم وجود
   ندارد، پس تنها راه تشخیص، رنگ و زیرخط در حالت عادی است. */
.article-body a,
.prose a,
.pf-body a,
.answer a,
.author-bio a{
  color:var(--link);
  text-decoration:underline;
  text-decoration-thickness:1px;
  text-underline-offset:3px;
  cursor:pointer;
}
.article-body a:hover,
.prose a:hover,
.pf-body a:hover{ color:var(--link-hover); text-decoration-thickness:2px; }

.article-body a:focus-visible,
.prose a:focus-visible,
.pf-body a:focus-visible{
  outline:2px solid var(--link); outline-offset:2px; border-radius:3px;
}

/* استثناها: دکمه‌ها و کادر دعوت به اقدام، لینکِ متنی نیستند */
.article-body .primary-cta a,
.prose .primary-cta a{ color:#fff; text-decoration:underline; }
.article-body .btn, .prose .btn,
.article-body a.btn, .prose a.btn{ color:var(--ink); text-decoration:none; }
.article-body .btn-p, .prose .btn-p{ color:#fff; }

/* ── ۳) هدر ───────────────────────────────────────────────────────*/
.nav{ gap:10px; }
.brand{ min-width:0; flex:0 1 auto; }
.brand > span{ min-width:0; }
.nav-actions{ display:flex; align-items:center; gap:8px; margin-inline-start:auto; flex:none; }

.burger{ order:-1; flex:none; }

.hdr-tel{
  display:inline-flex; align-items:center; gap:6px; flex:none;
  padding:8px 11px; border-radius:10px;
  background:var(--teal-tint); color:var(--teal);
  font-weight:700; font-size:14.5px; white-space:nowrap;
}
.hdr-tel:hover{ background:#DCEEEC; }
.hdr-tel-num{ direction:ltr; unicode-bidi:isolate; }
.hdr-tel-ico{ font-size:13px; }

.hdr-search{
  width:40px; height:40px; flex:none; display:grid; place-items:center;
  border:1px solid var(--line); border-radius:10px; font-size:20px; color:var(--ink-2);
}
.hdr-search:hover{ border-color:var(--teal); color:var(--teal); }

.menu-close{ display:none; }
.menu-only{ display:none; }

@media(max-width:899px){
  .brand small{ display:none; }          /* شعار سایت در موبایل جا نمی‌شود */
  .menu-only{ display:block; }
}
@media(max-width:560px){
  /* در ۳۶۰ پیکسل، همبرگر و شماره نباید روی هم بیفتند: فقط نشان لوگو می‌ماند */
  .brand > span:not(.mark){ display:none; }
  .hdr-search{ display:none; }           /* جستجو داخل کشو هست */
  .hdr-tel{ font-size:13.5px; padding:8px 9px; }
  .nav{ gap:8px; }
}

/* ── ۴) کشوی منو در موبایل ────────────────────────────────────────
   آیکن همبرگر سمت شروع (راست در RTL) است و کشو هم از همان سمت باز
   می‌شود. قبلاً آیکن یک طرف بود و پنل طرف دیگر. */
@media(max-width:899px){
  .menu.open{
    display:flex; flex-direction:column; align-items:stretch; gap:0;
    position:fixed; top:0; bottom:0; right:0; left:auto; inset-inline-start:auto;
    width:min(84vw,320px); max-width:100%;
    background:#fff; padding:58px 20px 28px;
    border:0; border-radius:0;
    box-shadow:-10px 0 30px rgba(11,27,43,.18);
    z-index:70; overflow-y:auto; overscroll-behavior:contain;
  }
  .menu.open a{
    padding:13px 2px; border-bottom:1px solid var(--line);
    font-size:15.5px; font-weight:600;
  }
  .menu.open a:last-child{ border-bottom:0; }
  .menu.open .menu-tel{ color:var(--teal); direction:ltr; unicode-bidi:isolate; text-align:start; }

  .menu-close{
    display:grid; place-items:center; position:absolute;
    top:12px; left:14px; right:auto;
    width:36px; height:36px; font-size:15px; line-height:1;
    border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer;
  }

  .nav-overlay{ position:fixed; inset:0; background:rgba(11,27,43,.45); z-index:65; }
  .nav-overlay[hidden]{ display:none; }
  html.nav-open, html.nav-open body{ overflow:hidden; }
}

/* اگر کاربر گوشی را چرخاند و به عرض دسکتاپ رسید، کشو نباید باقی بماند */
@media(min-width:900px){
  .menu.open{
    position:static; flex-direction:row; padding:0; background:transparent;
    box-shadow:none; border:0; width:auto; inset:auto; overflow:visible;
  }
  .menu.open a{ border:0; padding:0; }
  .nav-overlay{ display:none; }
}

/* ── ۵) کارت‌های فهرست با تصویر شاخص ─────────────────────────────*/
.card-media{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.card-media .thumb{
  display:block; margin:0; border:0; border-radius:0;
  border-bottom:1px solid var(--line);
  aspect-ratio:4/3;            /* ابعاد استاندارد تصویر شاخص: ۶۴۰×۴۸۰ */
  background:var(--bg-alt); overflow:hidden;
}
.card-media .thumb img{ width:100%; height:100%; object-fit:cover; display:block; margin:0; border-radius:0; }
.card-media .card-body{ padding:20px 22px 22px; display:flex; flex-direction:column; flex:1 1 auto; }
.card-media .card-body h3{ margin-bottom:8px; }
.card-media .card-body h3 a{ color:inherit; }
.card-media .card-body h3 a:hover{ color:var(--teal); }
.card-media .card-body p{ font-size:14.5px; color:var(--muted); line-height:1.8; }
.card-media .more{ margin-top:auto; padding-top:13px; }

/* تبلت: دو ستون. قبلاً از یک ستون مستقیم به سه ستون می‌پرید. */
@media(min-width:640px) and (max-width:899px){
  .grid.c3, .grid.c4{ grid-template-columns:1fr 1fr; }
}

/* ── ۶) جدول‌های داخل متن در موبایل ──────────────────────────────
   ‎.article-body table‎ صفت min-width:34rem داشت (=۵۴۴ پیکسل) و در
   گوشی ۳۶۰ پیکسلی کل صفحه را پهن می‌کرد. */
@media(max-width:640px){
  .article-body table, .prose table{
    display:block; overflow-x:auto; max-width:100%;
    min-width:0 !important; font-size:13px; -webkit-overflow-scrolling:touch;
  }
  .article-body .responsive-table, .prose .responsive-table{ max-width:100%; }
  .article-body .steps li{ padding-inline-start:2.4rem; }
}

/* ── ۷) ویدیوی داخل متن ─────────────────────────────────────────*/
.article-body video, .prose video, article video, .pf-body video{
  width:100%; max-width:100%; height:auto; display:block;
  margin:20px 0; border-radius:12px; background:#000;
}
.video-figure{ margin:22px 0; }
.video-figure figcaption{ font-size:.85rem; color:#64748b; margin-top:.5rem; text-align:center; }

/* ── ۸) صفحه‌ی تماس ─────────────────────────────────────────────*/
.contact-block{ margin:26px 0; }
.contact-block h2{ font-size:19px; margin:0 0 12px; }
.tel-list{ list-style:none; padding:0; margin:0; }
.tel-list li{ padding:9px 0; border-bottom:1px dashed var(--line); }
.tel-list li:last-child{ border-bottom:0; }
.tel-list a{
  direction:ltr; unicode-bidi:isolate; font-weight:700;
  color:var(--teal); font-size:16px; text-decoration:none;
}
.tel-list a:hover{ text-decoration:underline; }
.hours-table{ width:100%; border-collapse:collapse; font-size:15px; }
.hours-table td{ padding:9px 0; border-bottom:1px solid var(--line); }
.hours-table td:last-child{ text-align:end; font-weight:700; direction:ltr; unicode-bidi:isolate; }
.map-embed{
  position:relative; width:100%; aspect-ratio:16/10;
  border-radius:var(--r); overflow:hidden; border:1px solid var(--line); background:var(--bg-alt);
}
.map-embed iframe{ width:100%; height:100%; border:0; display:block; aspect-ratio:auto; }
.map-link{ display:inline-block; margin-top:12px; font-weight:700; color:var(--teal); }
.social-links{ display:flex; gap:10px; flex-wrap:wrap; margin-top:12px; list-style:none; padding:0; }
.social-links a{
  display:inline-flex; align-items:center; gap:7px; padding:9px 15px;
  border:1px solid var(--line); border-radius:10px; font-size:14px; font-weight:600;
}
.social-links a:hover{ border-color:var(--teal); color:var(--teal); }

/* ── ۹) جستجو ───────────────────────────────────────────────────*/
.search-form{ display:flex; gap:10px; flex-wrap:wrap; margin:20px 0 8px; }
.search-form input{
  flex:1 1 240px; min-width:0; padding:13px 15px;
  border:1px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:16px;   /* زیر ۱۶ پیکسل، iOS صفحه را زوم می‌کند */
  background:#fff;
}
.search-form input:focus{ outline:none; border-color:var(--teal); }
.search-count{ color:var(--muted); font-size:14px; margin-bottom:20px; }
.search-results{ list-style:none; padding:0; margin:0; }
.search-results li{ padding:18px 0; border-bottom:1px solid var(--line); }
.search-results li:last-child{ border-bottom:0; }
.search-results h3{ margin:0 0 6px; font-size:17px; }
.search-results h3 a{ color:var(--ink); }
.search-results h3 a:hover{ color:var(--teal); }
.search-results p{ font-size:14.5px; color:var(--muted); margin:0; }
.search-kind{
  display:inline-block; margin-bottom:7px; font-size:12px; font-weight:700;
  background:var(--teal-tint); color:var(--teal); border-radius:999px; padding:3px 11px;
}

/* ── ۱۰) عرض‌های میانی و ستون کناری ─────────────────────────────
   بین ۹۰۰ تا ۱۱۰۰ پیکسل، منو شش آیتم دارد و کنارش شماره، جستجو و
   دکمه‌ی رزرو هم هست. بدون این قاعده، هدر در همین بازه سرریز می‌کرد. */
@media(min-width:900px) and (max-width:1099px){
  .nav-cta{ display:none; }
  .menu{ gap:18px; font-size:14px; }
  .hdr-tel{ font-size:13.5px; }
}

/* ستون کناری فقط وقتی چسبان باشد که واقعاً ستون کناری است.
   در یک‌ستونه، sticky روی محتوای بلند فقط باعث گیر کردن می‌شود. */
@media(max-width:979px){
  .side{ position:static; top:auto; }
}