/* Self-hosted variable font: one file covers weights 100-900, and nothing is
   fetched from a CDN (the CMS and these sites must work with no outbound
   internet access). Path is relative to this stylesheet. */
@font-face{
  font-family:'Vazirmatn';
  src:url('fonts/Vazirmatn.woff2') format('woff2');
  font-weight:100 900;
  font-style:normal;
  font-display:swap;
}

/* Default blog theme — neutral, RTL-first, no external requests. */
:root{
  --blog-bg:#ffffff;
  --blog-surface:#f7f8fa;
  --blog-border:#e4e7ec;
  --blog-text:#16191f;
  --blog-muted:#5b6472;
  --blog-accent:#1a60d6;
  --blog-accent-ink:#ffffff;
  --blog-radius:14px;
  --blog-maxw:1120px;
  --blog-font:"Vazirmatn","IRANSans","Segoe UI",system-ui,-apple-system,"Noto Sans Arabic",sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--blog-bg);color:var(--blog-text);
  font-family:var(--blog-font);font-size:17px;line-height:1.85;
}
img{max-width:100%;height:auto}
a{color:var(--blog-accent);text-decoration:none}
a:hover{text-decoration:underline}
/* An inherited footer keeps the site's own link colour. :where() keeps this
   at the same specificity as the bare `a` rule above — later, so it wins —
   while still losing to any real rule the site has for its footer links. */
:where(.blog-body > footer:not(.blog-footer)) a{color:inherit}

.wrap{max-width:var(--blog-maxw);margin-inline:auto;padding-inline:20px}

/* header / footer ---------------------------------------------------- */
.blog-header{border-bottom:1px solid var(--blog-border);background:var(--blog-bg);position:sticky;top:0;z-index:20}
.blog-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:64px;flex-wrap:wrap}
.blog-header .brand{font-weight:800;font-size:19px;color:var(--blog-text);display:flex;align-items:center;gap:10px}
.blog-header .brand:hover{text-decoration:none}
.blog-nav{display:flex;gap:18px;flex-wrap:wrap;font-size:15px}
.blog-nav a{color:var(--blog-muted)}
.blog-nav a:hover{color:var(--blog-accent)}

.blog-footer{margin-top:64px;border-top:1px solid var(--blog-border);background:var(--blog-surface);padding-block:28px;color:var(--blog-muted);font-size:14px}
.blog-footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
.foot-links{display:flex;gap:16px;margin:0}
.blog-footer p{margin:0}

/* breadcrumbs -------------------------------------------------------- */
.blog-body > main .breadcrumb{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-size:14px;color:var(--blog-muted);margin:22px 0}
.blog-body > main .breadcrumb a{color:var(--blog-muted)}
.blog-body > main .breadcrumb .current{color:var(--blog-text);font-weight:600}

/* article ------------------------------------------------------------ */
.blog-body > main .post{max-width:820px;margin-inline:auto}
.blog-body > main .post-head h1{font-size:clamp(28px,4.2vw,42px);line-height:1.35;margin:10px 0 14px;letter-spacing:-.01em}
.blog-body > main .post-cat{display:inline-block;background:var(--blog-surface);border:1px solid var(--blog-border);color:var(--blog-muted);
  border-radius:999px;padding:4px 14px;font-size:13px}
.blog-body > main .post-lede{font-size:19px;color:var(--blog-muted);margin:0 0 18px}
.blog-body > main .post-meta{display:flex;flex-wrap:wrap;gap:8px 18px;color:var(--blog-muted);font-size:14px;
  padding-bottom:20px;border-bottom:1px solid var(--blog-border)}
.blog-body > main .post-meta .author a{color:var(--blog-muted);font-weight:600}

.blog-body > main .post-hero{margin:26px 0;text-align:center}
.blog-body > main .post-hero img{border-radius:var(--blog-radius);width:100%}
.blog-body > main .post-hero figcaption{font-size:14px;color:var(--blog-muted);margin-top:10px}

.blog-body > main .toc{background:var(--blog-surface);border:1px solid var(--blog-border);border-radius:var(--blog-radius);padding:18px 22px;margin:28px 0}
.blog-body > main .toc-title{font-size:16px;margin:0 0 10px}
.blog-body > main .toc ol{margin:0;padding-inline-start:20px}
.blog-body > main .toc li{margin:5px 0}
.blog-body > main .toc .toc-l3{padding-inline-start:16px;font-size:15px;color:var(--blog-muted)}
.blog-body > main .toc .toc-l4{padding-inline-start:32px;font-size:14px;color:var(--blog-muted)}

.blog-body > main .post-body{font-size:17.5px}
.blog-body > main .post-body h2{font-size:27px;line-height:1.45;margin:38px 0 12px;scroll-margin-top:80px}
.blog-body > main .post-body h3{font-size:22px;line-height:1.5;margin:28px 0 10px;scroll-margin-top:80px}
.blog-body > main .post-body h4{font-size:19px;margin:22px 0 8px;scroll-margin-top:80px}
.blog-body > main .post-body p{margin:0 0 18px}
.blog-body > main .post-body ul, .blog-body > main .post-body ol{margin:0 0 20px;padding-inline-start:26px}
.blog-body > main .post-body li{margin:7px 0}
.blog-body > main .post-body img{border-radius:10px;margin:8px 0}
.blog-body > main .post-body figure{margin:26px 0;text-align:center}
.blog-body > main .post-body figcaption{font-size:14px;color:var(--blog-muted);margin-top:8px}
.blog-body > main .post-body blockquote{margin:24px 0;padding:14px 22px;border-inline-start:4px solid var(--blog-accent);
  background:var(--blog-surface);border-radius:0 var(--blog-radius) var(--blog-radius) 0;color:var(--blog-muted)}
.blog-body > main .post-body blockquote p:last-child{margin-bottom:0}
.blog-body > main .post-body hr{border:0;border-top:1px solid var(--blog-border);margin:34px 0}
.blog-body > main .post-body pre{background:#12151b;color:#e6edf3;padding:16px 18px;border-radius:10px;overflow-x:auto;direction:ltr;text-align:left}
.blog-body > main .post-body code{background:var(--blog-surface);padding:2px 6px;border-radius:5px;font-size:.9em}
.blog-body > main .post-body pre code{background:none;padding:0}

/* tables must scroll rather than break the page */
.blog-body > main .post-body table{width:100%;border-collapse:collapse;margin:24px 0;font-size:16px;display:block;overflow-x:auto}
.blog-body > main .post-body th, .blog-body > main .post-body td{border:1px solid var(--blog-border);padding:10px 14px;text-align:start}
.blog-body > main .post-body thead th{background:var(--blog-surface);font-weight:700}
.blog-body > main .post-body tbody tr:nth-child(even){background:#fbfcfd}

.blog-body > main .post-tags{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:34px 0;font-size:14px;color:var(--blog-muted)}
.blog-body > main .post-tags a{background:var(--blog-surface);border:1px solid var(--blog-border);border-radius:999px;padding:4px 13px;color:var(--blog-muted)}
.blog-body > main .post-tags a:hover{border-color:var(--blog-accent);color:var(--blog-accent);text-decoration:none}

.blog-body > main .author-box{display:flex;gap:16px;align-items:flex-start;background:var(--blog-surface);border:1px solid var(--blog-border);
  border-radius:var(--blog-radius);padding:20px;margin:34px 0}
.blog-body > main .author-box img{border-radius:50%;flex:0 0 auto}
.blog-body > main .author-box p{margin:6px 0 0;color:var(--blog-muted);font-size:15px}
.blog-body > main .author-role{display:block;font-size:13px;color:var(--blog-muted)}

/* cards -------------------------------------------------------------- */
.blog-body > main .page-head{margin:26px 0 30px}
.blog-body > main .page-head h1{font-size:clamp(26px,3.6vw,36px);margin:0 0 8px}
.blog-body > main .page-lede{color:var(--blog-muted);margin:0;font-size:17px}

.blog-body > main .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:24px}
.blog-body > main .card{border:1px solid var(--blog-border);border-radius:var(--blog-radius);overflow:hidden;background:var(--blog-bg);
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s;min-width:0}
.blog-body > main .card:hover{box-shadow:0 8px 28px rgba(16,24,40,.09);transform:translateY(-2px)}
.blog-body > main .card-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--blog-surface)}
.blog-body > main .card-media img{width:100%;height:100%;object-fit:cover;display:block}
.blog-body > main .card-body{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}
.blog-body > main .card-cat{font-size:12.5px;color:var(--blog-accent)}
.blog-body > main .card-title{font-size:19px;line-height:1.55;margin:0}
.blog-body > main .card-title a{color:var(--blog-text)}
.blog-body > main .card-title a:hover{color:var(--blog-accent);text-decoration:none}
.blog-body > main .card-excerpt{margin:0;color:var(--blog-muted);font-size:15px;line-height:1.75}
.blog-body > main .card-meta{margin-top:auto;padding-top:8px;display:flex;gap:14px;color:var(--blog-muted);font-size:13px}

.blog-body > main .related{margin-top:56px}
.blog-body > main .related h2{font-size:24px;margin:0 0 18px}

.blog-body > main .pagination{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:center;margin:44px 0 0}
.blog-body > main .pagination .page, .blog-body > main .pagination .page-prev, .blog-body > main .pagination .page-next{
  border:1px solid var(--blog-border);border-radius:9px;padding:8px 14px;color:var(--blog-muted);font-size:15px;min-width:42px;text-align:center}
.blog-body > main .pagination .current{background:var(--blog-accent);border-color:var(--blog-accent);color:var(--blog-accent-ink);font-weight:700}
.blog-body > main .pagination a:hover{border-color:var(--blog-accent);color:var(--blog-accent);text-decoration:none}

.blog-body > main .empty{text-align:center;color:var(--blog-muted);padding:60px 0}

@media (max-width:640px){
  body{font-size:16px}
.blog-body > main .post-body{font-size:16.5px}
.blog-body > main .card-grid{grid-template-columns:1fr}
  .blog-header .wrap{min-height:56px}
}

@media print{
  .blog-header,.blog-footer,.toc,.related,.pagination{display:none}
  body{font-size:12pt}
}

/* ------------------------------------------------ editor content blocks ---
   Colours are applied as classes, never inline hex, so every theme maps them
   to its own palette and the same article stays readable on a light and a
   dark background alike. Fallbacks keep custom themes working.            */

.cms-c-primary{color:var(--cms-primary,var(--blog-accent))}
.cms-c-success{color:var(--cms-success,#16794a)}
.cms-c-warning{color:var(--cms-warning,#8a5a05)}
.cms-c-danger{color:var(--cms-danger,#a32020)}
.cms-c-muted{color:var(--blog-muted)}
.cms-hl{background:var(--cms-hl,#fff3bf);color:var(--cms-hl-ink,inherit);
  padding:1px 5px;border-radius:4px}

.cms-callout{border:1px solid var(--blog-border);border-inline-start:4px solid var(--blog-muted);
  background:var(--cms-box,var(--blog-surface));border-radius:0 12px 12px 0;
  padding:16px 20px;margin:24px 0}
.cms-callout > p:last-child{margin-bottom:0}
.cms-callout-title{display:block;margin-bottom:6px;font-size:1.02em}
.cms-callout-cite{display:block;margin-top:10px;font-size:.88em;color:var(--blog-muted)}
.cms-callout-quote{border-inline-start-color:var(--cms-primary,var(--blog-accent))}
.cms-callout-quote > p{font-size:1.05em;line-height:1.95}
.cms-callout-note{border-inline-start-color:var(--cms-primary,var(--blog-accent))}
.cms-callout-note .cms-callout-title{color:var(--cms-primary,var(--blog-accent))}
.cms-callout-tip{border-inline-start-color:var(--cms-success,#16794a)}
.cms-callout-tip .cms-callout-title{color:var(--cms-success,#16794a)}
.cms-callout-warn{border-inline-start-color:var(--cms-warning,#8a5a05)}
.cms-callout-warn .cms-callout-title{color:var(--cms-warning,#8a5a05)}

.cms-faq{margin:30px 0}
.cms-faq > h2{font-size:1.3em;margin:0 0 14px}
.cms-faq-item{border:1px solid var(--blog-border);border-radius:11px;margin-bottom:10px;
  background:var(--cms-box,var(--blog-surface));overflow:hidden}
.cms-faq-item > summary{cursor:pointer;padding:14px 18px;font-weight:700;list-style:none;
  display:flex;align-items:center;gap:10px;line-height:1.7}
.cms-faq-item > summary::-webkit-details-marker{display:none}
.cms-faq-item > summary::before{content:"+";flex:0 0 auto;font-weight:700;
  color:var(--cms-primary,var(--blog-accent));font-size:1.15em;line-height:1}
.cms-faq-item[open] > summary::before{content:"\2212"}
.cms-faq-answer{padding:0 18px 15px;color:var(--blog-muted)}
.cms-faq-answer p:last-child{margin-bottom:0}

:root{
  --cms-primary:#1f6feb; --cms-success:#16794a; --cms-warning:#8a5a05;
  --cms-danger:#a32020;  --cms-hl:#fff3bf; --cms-hl-ink:#3d3200;
  --cms-box:#f8fafc;
}

/* author box ---------------------------------------------------------- */
.blog-body > main .author-box .author-avatar{flex:0 0 auto;display:block}
.blog-body > main .author-box .author-kicker{display:block;font-size:12.5px;color:var(--blog-muted);margin-bottom:2px}
.blog-body > main .author-box strong a{color:var(--blog-text)}
.blog-body > main .author-box strong a:hover{color:var(--blog-accent)}
.blog-body > main .author-box .author-more{display:inline-block;margin-top:10px;font-size:14px}

/* Footer lifted from the site's homepage. It arrives with the site's own class
   names; these rules only keep it readable when the site's CSS is not loaded,
   and never fight it when it is. */
.blog-body > footer:not(.blog-footer){
  margin-top:48px;border-top:1px solid var(--blog-border);
  padding:28px 20px;font-size:14px;line-height:1.9
}
.blog-body > footer:not(.blog-footer) img{max-width:100%;height:auto}
/* Fallback only: without the site's own CSS the footer is a plain link list,
   so give it columns instead of one very tall stack. */
.blog-body > footer:not(.blog-footer) > *{max-width:1120px;margin-inline:auto}
@media (min-width:720px){
  .blog-body > footer:not(.blog-footer) ul{
    display:flex;flex-wrap:wrap;gap:6px 22px
  }
}

/* --------------------------------------------------- color isolation ---
   When a site's own stylesheet is inherited, its bare element rules
   (h1{color:…}, p{color:…}) outrank the colour the blog merely inherits
   from <body>, so a dark-themed site paints the article in its own light
   text on the blog's light background. Declaring the colours explicitly
   on the blog's own containers settles it.

   Scoped to the header and <main> only: the inherited footer sits outside
   <main>, so it keeps the site's own look. */
.blog-header,
.blog-body > main{color:var(--blog-text)}
.blog-body > main :where(h1,h2,h3,h4,h5,h6),
.blog-body > main strong,
.blog-body > main b,
.blog-body > main th,
.blog-header .brand{color:var(--blog-text)}
.blog-body > main :where(p,li,td,dd,dt,figcaption,blockquote,small){color:var(--blog-text)}
.blog-body > main :where(.post-lede,.card-excerpt,.post-meta,.card-meta,.breadcrumb,.empty,.page-lede){color:var(--blog-muted)}
.blog-body > main :where(.post-meta,.card-meta,.breadcrumb) :where(a,span,time){color:inherit}
.blog-body > main a,
.blog-header .blog-nav a{color:var(--blog-accent)}
.blog-body > main .post-body a{color:var(--blog-accent)}
.blog-body > main :where(h1,h2,h3,h4,h5,h6) a{color:inherit}