/* ==============================================================================
   site-ui.css — لایهٔ استایل صفحات عمومی (Phase 16)
   ==============================================================================

   چرا این فایل وجود دارد (audit finding #46):
   viewهای عمومی (`site/*.php`, `cms/*.php`) از کلاس‌هایی استفاده می‌کنند که در
   `site.css`/`design-system.css` **تعریف نشده بودند** — مثل `.post-card`,
   `.slot-grid`, `.site-main`, `.header-inner`. نتیجه: صفحه HTML معتبر رندر
   می‌شد ولی بدون چیدمان (بلاک‌ها روی هم، بدون فاصله، جدول‌های بی‌قاب).

   مثل `admin-ui.css`، اینجا هم فقط از توکن‌های design-system استفاده می‌شود؛
   رنگ/فاصلهٔ هاردکد وجود ندارد. تست `Unit/CssIntegrityTest` نبودِ متغیر
   تعریف‌نشده و کلاس بی‌تعریف را می‌گیرد.
   ============================================================================== */

/* ------------------------------------------------------------------ */
/* پوستهٔ صفحه                                                         */
/* ------------------------------------------------------------------ */
body.site {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-fa);
  line-height: var(--leading-normal);
  -webkit-font-smoothing: antialiased;
}

.site-main {
  /* هدر fixed است ⇒ محتوا از زیر آن شروع نشود */
  padding-top: var(--header-h);
  min-height: 60vh;
}

.site-header .container,
.header-inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  height: 100%;
}

/* ------------------------------------------------------------------ */
/* ناوبری داده‌محور (فاز ۱۸): حالت جاری + یک سطح فرزند               */
/* ------------------------------------------------------------------ */
.site-nav a[aria-current="page"] { color: var(--color-gold); font-weight: 700; }
.site-nav a { position: relative; }
.nav-parent-label { display: inline; }
.nav-children {
  position: absolute;
  inset-inline-start: 0;
  top: 100%;
  z-index: 40;
  min-width: 12rem;
  margin: 0;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease-out);
}
.site-nav a:hover .nav-children,
.site-nav a:focus-within .nav-children {
  opacity: 1;
  visibility: visible;
}
.nav-children li a {
  display: block;
  padding: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-soft);
  text-decoration: none;
  border-radius: var(--radius-sm);
}
.nav-children li a:hover { color: var(--color-gold); background: var(--color-gold-soft); }

/* دکمهٔ منوی موبایل (کنار `.nav-toggle` در header) */
.nav-toggle {
  display: none;
  margin-inline-start: auto;
  width: 40px;
  height: 40px;
  font-size: var(--text-lg);
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* ------------------------------------------------------------------ */
/* فوتر                                                               */
/* ------------------------------------------------------------------ */
.site-footer {
  margin-top: var(--space-8);
  padding: var(--space-7) 0 var(--space-5);
  background: var(--color-bg-alt);
  border-top: 1px solid var(--color-border);
}
.footer-inner {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: var(--space-5);
  align-items: start;
}
.footer-contact {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-contact a { color: var(--color-ink-soft); text-decoration: none; }
.footer-contact a:hover { color: var(--color-gold); }
/* فاز ۱۸: پابرگ داده‌محور (Nav::menu('footer')) */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.footer-nav a { color: var(--color-ink-soft); font-size: var(--text-sm); text-decoration: none; }
.footer-nav a:hover { color: var(--color-gold); }
.footer-copy {
  grid-column: 1 / -1;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
}

/* ------------------------------------------------------------------ */
/* قوانین (فاز ۱۹)                                                     */
/* ------------------------------------------------------------------ */
.laws-hero { padding: var(--space-6) 0 var(--space-5); text-align: center; }
.laws-hero h1 { font-family: var(--font-display); }
.laws-search-box {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  max-width: 40rem;
  margin: var(--space-4) auto 0;
}
.laws-search-box input[type="search"],
.laws-search-box select {
  flex: 1 1 12rem;
  padding: var(--space-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}
.laws-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
  gap: var(--space-4);
}
.law-card {
  display: block;
  padding: var(--space-4);
  color: inherit;
  text-decoration: none;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.law-card:hover { border-color: var(--color-gold); box-shadow: var(--shadow-sm); }
.law-card h3 { margin: 0 0 var(--space-2); font-size: var(--text-base); }
.laws-breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: var(--space-4) 0 var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-ink-muted);
}
.laws-breadcrumb a { color: var(--color-gold); text-decoration: none; }
.laws-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--space-5);
  align-items: start;
}
.laws-side {
  padding: var(--space-4);
  font-size: var(--text-sm);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.laws-side h2 { margin: 0 0 var(--space-2); font-size: var(--text-sm); }
.laws-side ul { margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.laws-side li { padding: var(--space-1) 0; }
.laws-side a { color: var(--color-ink-soft); text-decoration: none; }
.laws-side a:hover,
.laws-side a[aria-current="page"] { color: var(--color-gold); }
.laws-chapters { max-height: 26rem; overflow-y: auto; }
.laws-articles { min-width: 0; }
.laws-article-list { margin: 0; padding-inline-start: var(--space-5); }
.law-share a { color: var(--color-gold); text-decoration: none; }
.law-row { margin-bottom: var(--space-5); }
.law-row h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.law-row h3 a { color: inherit; text-decoration: none; }
.law-row h3 a:hover { color: var(--color-gold); }
.law-chapter { margin: 0 0 var(--space-2); font-size: var(--text-xs); }
.law-excerpt { margin: 0; font-size: var(--text-sm); color: var(--color-ink-soft); }
.law-article { max-width: 46rem; }
.law-body p { margin: 0 0 var(--space-4); }
.law-footer {
  margin-top: var(--space-6);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.law-neighbours {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
  font-size: var(--text-sm);
}
.law-neighbours a { color: var(--color-gold); text-decoration: none; }
.laws-results { margin: 0; padding: 0; list-style: none; }
.law-result { padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.law-result h3 { margin: 0 0 var(--space-1); font-size: var(--text-base); }
.law-result h3 a { color: inherit; text-decoration: none; }
.law-result h3 a:hover { color: var(--color-gold); }

@media (max-width: 900px) {
  .laws-layout { grid-template-columns: 1fr; }
  .laws-side { order: 2; }
}

/* ------------------------------------------------------------------ */
/* ابزارها (فاز ۲۰)                                                   */
/* ------------------------------------------------------------------ */
.tools-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
  gap: var(--space-4);
  margin: var(--space-5) 0;
}
.tool-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.tool-card.is-disabled { opacity: 0.75; border-style: dashed; }
.tool-link {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: inherit;
  text-decoration: none;
}
.tool-link:hover { color: var(--color-gold); }
.tool-icon { font-size: var(--text-2xl); line-height: 1; }
.tool-card h2 { margin: 0; font-size: var(--text-base); }
.tools-disclaimer { font-size: var(--text-xs); color: var(--color-ink-muted); }

/* --- محاسبه‌گر حق‌الوکاله --- */
.fee-form { max-width: 40rem; }
.fee-form input[type="text"],
.fee-form input[type="number"],
.fee-form input[inputmode="numeric"] {
  width: 100%;
  padding: var(--space-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}
.fee-verdict {
  margin: var(--space-4) 0;
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.fee-verdict legend { padding: 0 var(--space-2); font-size: var(--text-sm); }
.fee-result {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.fee-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-3);
  margin: var(--space-4) 0;
}
.fee-totals .stat { display: flex; flex-direction: column; gap: var(--space-1); }
.fee-totals .stat-value { font-family: var(--font-display); font-size: var(--text-lg); }
.fee-totals .stat-unit { font-size: var(--text-xs); color: var(--color-ink-muted); }
.fee-row { transition: background var(--dur-fast) var(--ease-out); }
.fee-table td { font-variant-numeric: tabular-nums; }
.fee-table tr.is-deduction th,
.fee-table tr.is-deduction td { color: var(--color-danger); }
.fee-table tr.is-exec { background: var(--color-gold-soft); }
.fee-table tr.is-total {
  font-weight: 700;
  border-top: 2px solid var(--color-border-strong);
}
.fee-tiers { margin-top: var(--space-4); }
.fee-tiers summary { cursor: pointer; font-weight: 700; }
.fee-note { margin-top: var(--space-4); font-size: var(--text-xs); }

/* --- محاسبه‌گر مواهد --- */
.deadline-form { max-width: 40rem; }
.deadline-form input[type="text"],
.deadline-form input[dir="ltr"] {
  width: 100%;
  max-width: 14rem;
  padding: var(--space-3);
  font: inherit;
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius);
}
.deadline-result {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.deadline-table { max-width: 40rem; }
.deadline-table tr.is-highlight th,
.deadline-table tr.is-highlight td {
  background: var(--color-gold-soft);
  font-weight: 700;
}
.deadline-table .badge { margin-inline-start: var(--space-2); }
.deadline-rolled,
.deadline-holidays {
  margin-top: var(--space-4);
  font-size: var(--text-sm);
}
.deadline-rolled summary,
.deadline-holidays summary { cursor: pointer; font-weight: 700; }
.deadline-rolled ul { margin: var(--space-2) 0 0; padding-inline-start: var(--space-5); }
.deadline-note { margin-top: var(--space-4); font-size: var(--text-xs); }
.deadline-holidays table { margin-top: var(--space-3); }

/* ------------------------------------------------------------------ */
/* هیرو                                                               */
/* ------------------------------------------------------------------ */
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-5);
}

.blog-hero,
.page-hero {
  padding: var(--space-7) 0 var(--space-5);
  text-align: center;
}
.blog-hero h1,
.page-hero h1 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-3xl);
  font-weight: 800;
}

.page-hero {
  text-align: start;
  padding-bottom: var(--space-4);
}

/* ------------------------------------------------------------------ */
/* وبلاگ                                                               */
/* ------------------------------------------------------------------ */
.blog-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: var(--space-6);
  align-items: start;
}
.blog-sidebar {
  position: sticky;
  top: calc(var(--header-h) + var(--space-4));
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.blog-list,
.post-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.post-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: inherit;
  transition: transform var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
}
.post-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--color-gold);
}
.post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: var(--color-bg-alt);
}
.post-body { padding: var(--space-4); }
.post-body h2, .post-body h3 { margin: 0 0 var(--space-2); font-size: var(--text-lg); }
.post-byline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin-top: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
}

/* مقالهٔ تکی */
.post-single {
  max-width: 760px;
  margin: 0 auto;
}
.post-inner { padding: var(--space-2) 0; }
.post-cover {
  width: 100%;
  border-radius: var(--radius-lg);
  margin-bottom: var(--space-5);
}
.post-content { line-height: var(--leading-loose); }
.post-content img { max-width: 100%; height: auto; border-radius: var(--radius); }
.post-terms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border);
}
.chip-tag {
  display: inline-flex;
  padding: 0.2rem 0.6rem;
  font-size: var(--text-2xs);
  color: var(--color-ink-soft);
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  text-decoration: none;
}
.chip-tag:hover { color: var(--color-gold); border-color: var(--color-gold); }

.related {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--color-border);
}
.related-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.related-card {
  padding: var(--space-3);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
}
.related-card:hover { border-color: var(--color-gold); }

/* ------------------------------------------------------------------ */
/* صفحهٔ عمومی (CMS)                                                   */
/* ------------------------------------------------------------------ */
.page { padding-block: var(--space-6); }
.sub {
  display: block;
  margin-top: var(--space-2);
  font-size: var(--text-sm);
  color: var(--color-ink-muted);
}
.section-hero {
  padding-block: var(--space-6);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* خدمت و اطلاعیه                                                      */
/* ------------------------------------------------------------------ */
.service-detail {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: var(--space-6);
  align-items: start;
}

.announcement {
  display: flex;
  gap: var(--space-3);
  padding: var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-inline-start: 3px solid var(--color-gold);
  border-radius: var(--radius);
  margin-bottom: var(--space-3);
}
.announcement time {
  flex: none;
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  white-space: nowrap;
}

/* ------------------------------------------------------------------ */
/* آمار و پرسش‌های متداول (homepage)                                    */
/* ------------------------------------------------------------------ */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: var(--space-4);
}
.stats .stat-num {
  font-size: var(--text-3xl);
  color: var(--color-gold);
}

.faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.faq details {
  padding: var(--space-3) var(--space-4);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.faq summary {
  cursor: pointer;
  font-weight: 700;
  color: var(--color-ink);
}
.faq p { margin: var(--space-2) 0 0; color: var(--color-ink-soft); }

/* ------------------------------------------------------------------ */
/* نوبت‌دهی                                                           */
/* ------------------------------------------------------------------ */
.appt-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  align-items: end;
  margin-bottom: var(--space-4);
}
.appt-filters label { display: block; font-size: var(--text-2xs); color: var(--color-ink-soft); }

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-2);
}
.slot {
  padding: var(--space-2);
  font-family: var(--font-fa);
  font-size: var(--text-sm);
  font-weight: 700;
  text-align: center;
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.slot:hover { border-color: var(--color-gold); background: var(--color-gold-soft); }
.slot[aria-pressed="true"],
.slot.is-selected {
  color: #2a2008;
  background: var(--gradient-gold);
  border-color: transparent;
}
.slot:disabled {
  opacity: .45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.appt-book {
  padding: var(--space-5);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.appt-done {
  max-width: 520px;
  margin: var(--space-7) auto;
  padding: var(--space-6);
  text-align: center;
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-success);
  border-radius: var(--radius-lg);
}

.guest-track {
  margin-top: var(--space-5);
  padding: var(--space-4);
  background: var(--color-gold-soft);
  border: 1px dashed var(--color-gold);
  border-radius: var(--radius);
}

/* ------------------------------------------------------------------ */
/* کتابخانهٔ رسانه                                                     */
/* ------------------------------------------------------------------ */
.media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: var(--space-3);
}
.media-card {
  position: relative;
  overflow: hidden;
  background: var(--color-bg-alt);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
}
.media-card img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}
.media-icon {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  font-size: var(--text-xl);
  color: var(--color-ink-muted);
}
.media-meta {
  padding: var(--space-2);
  font-size: var(--text-2xs);
  color: var(--color-ink-muted);
  border-top: 1px solid var(--color-border);
}

/* ------------------------------------------------------------------ */
/* هشدار عمومی                                                        */
/* ------------------------------------------------------------------ */
.alert {
  display: flex;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-4);
  font-size: var(--text-sm);
  color: var(--color-ink);
  background: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-inline-start: 4px solid var(--color-info);
  border-radius: var(--radius);
}
.alert-warning { border-inline-start-color: var(--color-warning); }
.alert-danger  { border-inline-start-color: var(--color-danger); }
.alert-success { border-inline-start-color: var(--color-success); }

/* فرم عمومی (فرم اطلاعیه، فرم تماس) */
form .field { margin-bottom: var(--space-3); }
form.entity-form,
form.form {
  margin-bottom: var(--space-4);
}

/* بخش اطلاعیه‌ها در صفحهٔ اصلی */
.announcements .announcement:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ */
/* واکنش‌گرایی                                                         */
/* ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .nav-toggle { display: grid; place-items: center; }
  .site-nav {
    position: absolute;
    inset-inline: 0;
    top: var(--header-h);
    display: none;
    padding: var(--space-4);
    background: var(--color-bg-elevated);
    border-bottom: 1px solid var(--color-border);
    box-shadow: var(--shadow-md);
  }
  .site-nav.is-open { display: block; }
  .blog-layout,
  .service-detail { grid-template-columns: 1fr; }
  .blog-sidebar { position: static; }
  .footer-inner { grid-template-columns: 1fr; }
  .post-single { max-width: none; }
}

@media print {
  .site-header, .site-footer, .nav-toggle, .toolbar, .pager { display: none !important; }
  body.site { background: #fff; color: #000; }
  .site-main { padding-top: 0; }
}