/* Shared chrome for listik.ir informational pages (contact, support, blog).
   index.php keeps its own copy of these tokens inline (it predates this file
   and changing it risks the live landing page), so this file exists to avoid
   repeating the ~150 lines of layout CSS on every new static page instead. */

@font-face { font-family:'Vazirmatn'; src:url('/assets/vazirmatn.woff2') format('woff2'); font-weight:100 900; font-display:swap; }

:root, html[data-theme='light'] {
  --bg:#dbe9f3; --surface:#ffffff; --surface-2:#eef5fa; --ink:#013354; --ink-2:#2f4d63; --muted:#5f7b90;
  --line:#d3e3ee; --on-brand:#ffffff; --brand:#013354; --brand-2:#01243c; --brand-soft:#e1edf5; --accent:#f16101; --danger:#c7383e;
  --shadow:0 20px 45px -28px rgba(1,51,84,.35); --radius:18px;
}
html[data-theme='dark'] {
  --bg:#00131f; --surface:#021f33; --surface-2:#032a44; --ink:#e8f1f7; --ink-2:#b9cfdd; --muted:#8fa9bc;
  --line:#0c3a58; --on-brand:#ffffff; --brand:#1f6f9c; --brand-2:#2a82b3; --brand-soft:#0c3a58; --accent:#ff7a24; --danger:#f08a8f;
  --shadow:0 20px 45px -28px rgba(0,0,0,.7);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --bg:#00131f; --surface:#021f33; --surface-2:#032a44; --ink:#e8f1f7; --ink-2:#b9cfdd; --muted:#8fa9bc;
    --line:#0c3a58; --on-brand:#ffffff; --brand:#1f6f9c; --brand-2:#2a82b3; --brand-soft:#0c3a58; --accent:#ff7a24; --danger:#f08a8f;
    --shadow:0 20px 45px -28px rgba(0,0,0,.7);
  }
}
body { transition:background-color .2s, color .2s; }
.theme-toggle-btn { display:inline-flex; align-items:center; justify-content:center; background:none; border:1px solid var(--line); color:var(--ink-2); border-radius:10px; width:38px; height:38px; cursor:pointer; }
.theme-toggle-btn:hover { border-color:var(--brand); color:var(--brand); }
.theme-toggle-btn .icon-sun { display:none; }
html[data-theme='dark'] .theme-toggle-btn .icon-sun { display:inline-flex; }
html[data-theme='dark'] .theme-toggle-btn .icon-moon { display:none; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; font-family:'Vazirmatn', Tahoma, sans-serif; background:var(--bg); color:var(--ink); line-height:1.9; font-size:16px; }
a { color:var(--brand); }
.wrap { max-width:1120px; margin:0 auto; padding:0 16px; }
header.top { position:sticky; top:0; z-index:10; background:color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
header.top .wrap { display:flex; align-items:center; justify-content:space-between; height:64px; gap:12px; }
.logo { display:flex; align-items:center; gap:10px; font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; }
.logo-mark { width:34px; height:34px; border-radius:10px; object-fit:contain; display:block; }
nav.links { display:flex; gap:22px; font-size:14px; }
nav.links a { color:var(--ink-2); text-decoration:none; font-weight:600; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 22px; border-radius:12px; font:inherit; font-weight:700; text-decoration:none; border:1px solid transparent; cursor:pointer; }
.btn-primary { background:var(--brand); color:var(--on-brand); box-shadow:0 12px 26px -14px var(--brand); }
.btn-primary:hover { background:var(--brand-2); }
.btn-ghost { background:var(--surface); color:var(--ink); border-color:var(--line); }
.btn-sm { padding:8px 14px; font-size:14px; }

main { padding:48px 0 64px; }
.breadcrumb { font-size:13px; color:var(--muted); margin-bottom:18px; }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.breadcrumb a:hover { color:var(--brand); }
h1.page-title { font-size:clamp(26px, 3.6vw, 36px); margin:0 0 14px; line-height:1.5; font-weight:800; }
.page-lead { font-size:17px; color:var(--ink-2); max-width:720px; margin:0 0 32px; }
h2 { font-size:clamp(22px, 2.8vw, 28px); margin:32px 0 10px; line-height:1.5; }
.section-lead { color:var(--ink-2); margin:0 0 24px; max-width:680px; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; }
.grid-2 { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.contact-card { display:flex; gap:14px; align-items:flex-start; }
.contact-card .icon { width:40px; height:40px; border-radius:11px; background:var(--brand-soft); color:var(--brand); display:grid; place-items:center; flex-shrink:0; }
.contact-card .icon svg { width:20px; height:20px; }
.contact-card h3 { margin:0 0 4px; font-size:16px; }
.contact-card p { margin:0; color:var(--ink-2); font-size:14px; }
.contact-card a { font-weight:700; }

.faq details { background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:14px 18px; margin-bottom:10px; }
.faq summary { cursor:pointer; font-weight:700; font-size:16px; list-style:none; display:flex; justify-content:space-between; gap:12px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:'+'; color:var(--brand); font-weight:800; font-size:20px; line-height:1; }
.faq details[open] summary::after { content:'−'; }
.faq p { margin:10px 0 0; color:var(--ink-2); }

.blog-grid { display:grid; grid-template-columns:repeat(2, 1fr); gap:18px; margin-top:24px; }
.blog-card { display:block; text-decoration:none; color:inherit; }
.blog-card .eyebrow-date { font-size:12px; color:var(--muted); font-weight:700; }
.blog-card h3 { margin:8px 0 6px; font-size:18px; color:var(--ink); }
.blog-card p { margin:0; color:var(--ink-2); font-size:14px; }

.prose { max-width:720px; font-size:17px; color:var(--ink-2); }
.prose h2 { font-size:22px; color:var(--ink); margin:30px 0 10px; }
.prose p { margin:0 0 16px; }
.prose ul { margin:0 0 16px; padding-inline-start:22px; }
.prose li { margin-bottom:6px; }
.prose b { color:var(--ink); }
.post-meta { font-size:13px; color:var(--muted); margin-bottom:28px; }
.post-cta { margin-top:36px; padding:22px; border-radius:var(--radius); background:var(--brand-soft); display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.post-cta p { margin:0; font-weight:700; color:var(--ink); }

footer { padding:32px 0 40px; color:var(--muted); font-size:14px; }
footer .wrap { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; }
footer nav { display:flex; gap:16px; flex-wrap:wrap; }
footer nav a { color:var(--muted); text-decoration:none; }
footer nav a:hover { color:var(--brand); }

/* The phone bar (#siteBar) is the shared meniscus bar; it shows up to 880px here,
   where nav.links disappears, a bit wider than its own 768px default. */
#siteBar.lmn { display:none; }

@media (max-width: 880px) {
  nav.links { display:none; }
  .grid-2 { grid-template-columns:1fr; }
  .blog-grid { grid-template-columns:1fr; }

  /* Replaces the hidden nav.links bar, same bar as admin/ and platform/admin/. */
  body { padding-bottom:140px; }
  #siteBar.lmn { display:block; }
}