/*
Theme Name: Sarah Zarei
Theme URI: https://sarahzarei.com
Description: قالب فرزندِ Twenty Twenty-Five برای سایت شخصی سارا زارعی. ستونِ ثابت در راست، تصویرِ بزرگ در چپ.
Author: Sarah Zarei
Template: twentytwentyfive
Version: 2.4.0
Requires at least: 6.7
Tested up to: 7.1
License: GNU General Public License v2 or later
Text Domain: sarahzarei
*/

/* ---------- ۱. توکن‌ها ---------- */
:root{
  --paper:#FFFFFF; --surface:#F4F4F2; --ink:#1B2419;
  --green:#25322A; --green-hover:#2F3D33; --muted:#5F6459; --hair:#E2E2DD;
  /* سه فونتِ انتخابِ سارا اولِ هر پشته‌اند. تا وقتی فایلشان در assets/fonts/
     نباشد مرورگر بی‌سروصدا به فونتِ بعدی می‌رود، پس سایت هیچ‌وقت نمی‌شکند. */
  --display:"B Yaghout","Morabba","Estedad","Vazirmatn",sans-serif; /* تیترها */
  --body:"IRANSans","Vazirmatn",system-ui,sans-serif;               /* بدنه و رابط */
  --book:"B Nazanin","Vazirmatn",serif;                             /* متنِ رمان */
  --latin:"Cormorant Garamond",Georgia,serif;
  --measure:620px;
  --rail:290px;
}
html,body{ background:var(--paper); color:var(--ink); }
body{ font-family:var(--body); font-size:17px; line-height:1.9; margin:0; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.35; color:var(--ink); }
a{ color:var(--ink); text-decoration:none; }
a:hover{ color:var(--green-hover); }
:where(p,li){ max-width:var(--measure); }
.tagline-latin{ font-family:var(--latin); text-transform:lowercase; letter-spacing:.28em;
  font-size:12px; color:var(--muted); }

/* ---------- ۲. جای‌نگه‌دارِ محتوا ---------- */
.todo{ background:#FFF3CD; border:1px dashed #B58900; color:#6B5200;
  padding:8px 12px; display:inline-block; font-size:14px; border-radius:3px;
  font-family:var(--body); line-height:1.7; max-width:100%; }

/* ---------- ۳. اسکلتِ دو ستونی ---------- */
.sz-shell{ display:grid; grid-template-columns:var(--rail) 1fr;
  gap:clamp(1.5rem,4vw,3.25rem); align-items:start;
  padding:clamp(1.5rem,3vw,2.25rem) clamp(1.25rem,3vw,2.5rem) 0; }

/* موبایل: ترتیب باید «اسم ← تصویر ← فهرست» باشد، نه «همه‌ی فهرست ← تصویر».
   وگرنه بازدیدکننده اول با یک دیوارِ لینک روبه‌رو می‌شود و تصویر زیر خطِ دید
   می‌افتد. با display:contents فرزندانِ ستون کناری مستقیم عضوِ همین شبکه
   می‌شوند و می‌شود بینشان تصویر را جا داد — بدون هیچ تغییری در HTML. */
@media (max-width:900px){
  /* align-items:start از قاعده‌ی گرید بالا ارث می‌رسد و در فلکس، عرضِ آیتم‌ها
     را به اندازه‌ی محتوایشان جمع می‌کند. اینجا صریح برش می‌گردانیم. */
  .sz-shell{ display:flex; flex-direction:column; gap:0; align-items:stretch; }
  .sz-rail{ display:contents; }
  .sz-rail .sz-name{ order:1; }
  .sz-rail .sz-ident{ order:2; margin-bottom:1.5rem; }
  .sz-main{ order:3; }
  .sz-rail nav{ order:4; margin-top:1.9rem; }
  .sz-rail .sz-social{ order:5; }
  .sz-rail .sz-social-todo{ order:5; margin-top:1.5rem; }
}

/* ستونِ ثابتِ راست */
.sz-rail{ position:sticky; top:clamp(1.5rem,3vw,2.25rem); }
@media (max-width:900px){ .sz-rail{ position:static; } }
.sz-rail .sz-name{ font-size:20px; letter-spacing:.16em; margin:0; font-weight:600; }
.sz-rail .sz-name a{ color:var(--ink); }
.sz-ident{ margin:.55rem 0 1.9rem; }
.sz-ident p{ margin:0 0 .18rem; max-width:none; }
.sz-ident .sz-tagline-fa{ font-size:13px; color:var(--muted); }
.sz-ident .sz-credit{ font-size:12px; color:var(--muted); opacity:.92; }

/* فهرستِ بخش‌ها — همه یک‌دست */
.sz-sections{ list-style:none; margin:0; padding:0; }
.sz-sections li{ margin:0; max-width:none; }
.sz-sections a{ display:block; padding:.42rem 0; font-size:15px; letter-spacing:.02em;
  color:var(--ink); transition:color .18s ease, padding-inline-start .18s ease; }
.sz-sections a:hover, .sz-sections a:focus-visible{ color:var(--green); padding-inline-start:.3rem; }
.sz-sections a[aria-current="page"]{ color:var(--green); }

/* شبکه‌های اجتماعی */
.sz-social{ display:flex; gap:1rem; margin:1.9rem 0 0; padding:0; list-style:none; }
.sz-social li{ max-width:none; }
.sz-social a{ display:inline-flex; color:var(--muted); }
.sz-social a:hover{ color:var(--green); }
.sz-social svg{ width:18px; height:18px; fill:currentColor; }

/* ---------- ۴. دکمه‌های نمادینِ گوشه‌ی بالا ---------- */
.sz-utility{ position:absolute; inset-block-start:clamp(1.5rem,3vw,2.25rem);
  inset-inline-end:clamp(1.25rem,3vw,2.5rem); display:flex; gap:.55rem; z-index:5; }
.sz-utility a{ display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border:1px solid var(--hair); border-radius:50%;
  color:var(--ink); transition:background .18s ease, color .18s ease, border-color .18s ease; }
.sz-utility a:hover{ background:var(--green); border-color:var(--green); color:var(--paper); }
.sz-utility svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round; }
.sz-page-wrap{ position:relative; }

/* ---------- ۵. ناحیه‌ی اصلی و اسلایدر ---------- */
.sz-main{ min-width:0; }
.sz-slider{ position:relative; }
.sz-slide-label{ text-align:center; font-family:var(--latin); letter-spacing:.22em;
  font-size:13px; color:var(--muted); margin:0 0 .85rem; min-height:1.2em; max-width:none; }
.sz-slides{ position:relative; aspect-ratio:4/5; max-height:76vh; overflow:hidden; background:var(--surface); }
@media (min-width:901px){ .sz-slides{ aspect-ratio:16/10; } }
.sz-slide{ position:absolute; inset:0; opacity:0; transition:opacity .9s ease; pointer-events:none; }
.sz-slide.is-active{ opacity:1; pointer-events:auto; }
.sz-slide > a{ display:block; width:100%; height:100%; }
.sz-slide img{ width:100%; height:100%; object-fit:cover; display:block; }
.sz-slide-empty{ display:flex; align-items:center; justify-content:center; height:100%;
  padding:2rem; box-sizing:border-box; text-align:center; }
.sz-dots{ display:flex; gap:.5rem; justify-content:center; margin-top:1rem; }
.sz-dots button{ width:7px; height:7px; padding:0; border-radius:50%; border:0; cursor:pointer;
  background:var(--hair); transition:background .2s ease, transform .2s ease; }
.sz-dots button[aria-current="true"]{ background:var(--green); transform:scale(1.35); }
.sz-dots button:focus-visible{ outline:2px solid var(--green); outline-offset:3px; }

/* ---------- ۶. صفحات داخلی ---------- */
.sz-page{ max-width:760px; padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.sz-page h1{ font-size:clamp(1.75rem,4vw,2.4rem); margin:0 0 1.5rem; }
.sz-eyebrow{ font-family:var(--latin); letter-spacing:.22em; font-size:12px;
  color:var(--muted); margin:0 0 .6rem; max-width:none; }

/* ---------- ۷. صفحات رمان ---------- */
.sz-bookpage{ max-width:var(--measure); padding-bottom:clamp(2.5rem,6vw,4.5rem); }
.sz-chapter{ font-size:13px; color:var(--muted); letter-spacing:.04em; margin:0 0 2.2rem; max-width:none; }
/* متنِ رمان فونتِ خودش را دارد: ب نازنین، چون برای متنِ طولانی انتخاب شده.
   ب نازنین ریزتر از وزیرمتن رندر می‌شود، برای همین یک پله بزرگ‌تر تنظیم شده. */
.sz-bookpage .entry-content p{ font-family:var(--book); font-size:20px; line-height:2;
  margin:0 0 1.5em; max-width:var(--measure); }
.sz-progress{ font-size:13.5px; color:var(--muted); text-align:center; margin:3.5rem 0 1.25rem; max-width:none; }
.sz-booknav{ display:flex; justify-content:space-between; gap:1rem; border-top:1px solid var(--hair); padding-top:1.5rem; }
.sz-booknav a{ font-size:15px; padding:.6rem 1.1rem; border:1px solid var(--hair); border-radius:2px;
  transition:background .18s ease, color .18s ease, border-color .18s ease; }
.sz-booknav a:hover{ background:var(--green); border-color:var(--green); color:var(--paper); }
.sz-booknav .sz-nav-empty{ visibility:hidden; }
.sz-toc{ list-style:none; padding:0; margin:0 0 1.5rem; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(54px,1fr)); gap:.4rem; max-width:none; }
.sz-toc li{ max-width:none; }
.sz-toc a{ display:block; text-align:center; padding:.5rem .3rem; font-size:14.5px;
  border:1px solid var(--hair); border-radius:2px; }
.sz-toc a:hover{ background:var(--green); border-color:var(--green); color:var(--paper); }
.sz-chapter-group{ font-size:12.5px; color:var(--muted); letter-spacing:.08em; margin:1.6rem 0 .55rem; max-width:none; }

/* ---------- ۸. کارت‌های لینک بیرونی ---------- */
.sz-cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.1rem; max-width:none; }
.sz-card{ border:1px solid var(--hair); border-radius:2px; padding:1.6rem; display:block;
  transition:border-color .18s ease; }
.sz-card:hover{ border-color:var(--green); }
.sz-card h3{ margin:0 0 .45rem; font-size:1.12rem; }
.sz-card p{ margin:0; font-size:14.5px; color:var(--muted); }

/* ---------- ۹. فوترِ مینیمال ---------- */
.sz-footer{ border-top:1px solid var(--hair); margin-top:clamp(2.5rem,6vw,4.5rem);
  padding:1.25rem clamp(1.25rem,3vw,2.5rem); }
.sz-footer-inner{ display:flex; flex-wrap:wrap; gap:.5rem 1.5rem; justify-content:space-between;
  font-size:12.5px; color:var(--muted); }
.sz-footer-inner p{ margin:0; max-width:none; }
.sz-footer-links span{ color:var(--hair); margin:0 .15rem; }
.sz-footer a{ color:var(--muted); }
.sz-footer a:hover{ color:var(--green); }

/* ---------- ۱۰. دسترس‌پذیری ---------- */
:where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:2px solid var(--green); outline-offset:2px; }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important;
    transition-duration:.001ms !important; scroll-behavior:auto !important; }
}

/* ---------- ۱۱. متنِ فقط برای صفحه‌خوان و موتور جست‌وجو ---------- */
/* در فهرستِ کتاب فقط شماره دیده می‌شود، ولی عنوانِ کاملِ صفحه هم داخلِ همان لینک
   هست تا متنِ لنگر واقعی باشد. پنهان است، ولی حذف‌شده نیست. */
.sz-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0; }

/* پرش به محتوا — تا با Tab فعال نشود دیده نمی‌شود */
.sz-skip{ position:absolute; inset-inline-start:-9999px; top:0; z-index:100;
  background:var(--green); color:var(--paper); padding:.7rem 1.1rem; font-size:14px; }
.sz-skip:focus{ inset-inline-start:0; color:var(--paper); }

/* ---------- ۱۲. جلد و عنوانِ کتاب ---------- */
.sz-book-title{ font-size:clamp(1.75rem,4vw,2.4rem); margin:0 0 1.5rem; }
.sz-book-cover{ margin:0 0 2rem; max-width:300px; }
.sz-book-cover img{ display:block; width:100%; height:auto; border:1px solid var(--hair); }

/* ---------- ۱۳. آزمونِ نقشه‌ی چندپتانسیلی ---------- */
.sz-test{ margin:0; }
.sz-test-q{ border:0; border-top:1px solid var(--hair); margin:0; padding:1.5rem 0 1.35rem; }
.sz-test-q:first-of-type{ border-top:0; padding-top:0; }
.sz-test-q legend{ padding:0; font-size:16.5px; line-height:1.85; max-width:var(--measure); }
.sz-test-n{ color:var(--muted); }
.sz-test-scale{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.sz-test-opt{ display:inline-flex; }
.sz-test-opt input{ position:absolute; opacity:0; width:1px; height:1px; }
.sz-test-opt label{ display:inline-block; cursor:pointer; font-size:14.5px;
  padding:.5rem .95rem; border:1px solid var(--hair); border-radius:2px;
  transition:background .18s ease, color .18s ease, border-color .18s ease; }
.sz-test-opt label:hover{ border-color:var(--green); }
.sz-test-opt input:checked + label{ background:var(--green); border-color:var(--green); color:var(--paper); }
.sz-test-opt input:focus-visible + label{ outline:2px solid var(--green); outline-offset:2px; }
.sz-btn{ margin-top:2rem; font-family:var(--body); font-size:15px; cursor:pointer;
  background:var(--green); color:var(--paper); border:1px solid var(--green);
  border-radius:2px; padding:.7rem 1.6rem;
  transition:background .18s ease, border-color .18s ease; }
.sz-btn:hover{ background:var(--green-hover); border-color:var(--green-hover); }
.sz-test-title{ margin:0 0 1rem; }
.sz-test-back{ margin-top:2rem; }
.sz-test-back a{ color:var(--green); border-bottom:1px solid var(--hair); }
.sz-social-todo{ margin-top:1.9rem; }