/* 
 مدهوش v2 — Static page extras (FAQ list, docs TOC)
 */

/* FAQ list (full page) */
.faq-list-page {
 max-width: 800px; margin: 0 auto;
 display: flex; flex-direction: column; gap: var(--s-2);
 padding-block: var(--s-8);
 counter-reset: faq;
}
.faq-list-page .faq-item {
 counter-increment: faq;
 background: var(--bg-surface);
 border: 1px solid var(--border);
 border-radius: var(--r-md);
 overflow: hidden;
 position: relative; isolation: isolate;
 transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.faq-list-page .faq-item::before {
 content: ''; position: absolute; inset: 0; z-index: -1;
 background: radial-gradient(120% 80% at 0% 0%, color-mix(in oklch, var(--accent) 12%, transparent), transparent 60%);
 opacity: 0; transition: opacity var(--dur-base) var(--ease);
}
.faq-list-page .faq-item:hover { border-color: var(--border-strong); }
.faq-list-page .faq-item:hover::before { opacity: 0.6; }
.faq-list-page .faq-item[open] { border-color: color-mix(in oklch, var(--accent) 50%, var(--border-strong)); }
.faq-list-page .faq-item[open]::before { opacity: 1; }
.faq-list-page .faq-q {
 display: flex; align-items: center; justify-content: space-between; gap: var(--s-3);
 padding: var(--s-5) var(--s-6); cursor: pointer; list-style: none;
 font-size: var(--text-base); font-weight: 700; color: var(--fg);
 line-height: 1.5;
}
.faq-list-page .faq-q::-webkit-details-marker { display: none; }
.faq-list-page .faq-q::before {
 content: counter(faq, persian);
 font-size: 13px; font-weight: 700;
 color: var(--accent);
 margin-inline-end: var(--s-3);
 width: 28px; height: 28px;
 display: inline-grid; place-items: center;
 border-radius: var(--r-full);
 background: color-mix(in oklch, var(--accent) 12%, transparent);
 border: 1px solid color-mix(in oklch, var(--accent) 24%, transparent);
 flex: 0 0 28px;
 transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.faq-list-page .faq-item[open] .faq-q::before {
 background: var(--accent); color: var(--on-accent); border-color: var(--accent);
}
.faq-list-page .faq-q-text { flex: 1; }
.faq-list-page .faq-q .chev {
 width: 20px; height: 20px; color: var(--fg-subtle);
 transition: transform var(--dur-base) var(--ease-out), color var(--dur-fast) var(--ease);
 flex: 0 0 20px;
}
.faq-list-page .faq-item[open] .faq-q .chev { transform: rotate(180deg); color: var(--accent); }
.faq-list-page .faq-a {
 padding: 0 var(--s-6) var(--s-5);
 padding-inline-start: calc(var(--s-6) + 40px);
 font-size: var(--text-sm); color: var(--fg-muted); line-height: 1.85;
}

/* Docs TOC + content */
.docs-layout {
 display: grid; grid-template-columns: 220px 1fr; gap: var(--s-10);
 max-width: 1100px; margin: 0 auto;
 padding-block: var(--s-10);
}
@media (max-width: 900px) { .docs-layout { grid-template-columns: 1fr; gap: var(--s-6); } .docs-toc { position: static !important; } }

.docs-toc {
 position: sticky; top: 88px; align-self: start;
 background: var(--bg-surface); border: 1px solid var(--border);
 border-radius: var(--r-md);
 padding: var(--s-5);
}
.docs-toc-title {
 font-size: var(--text-xs); font-weight: 700;
 color: var(--accent); letter-spacing: 0.04em;
 margin-bottom: var(--s-3);
 text-transform: uppercase;
}
.docs-toc ul { list-style: none; display: flex; flex-direction: column; gap: var(--s-2); }
.docs-toc a {
 font-size: var(--text-sm); color: var(--fg-muted);
 display: block; padding: 6px 8px; border-radius: var(--r-sm);
 transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
 text-decoration: none;
}
.docs-toc a:hover { color: var(--fg); background: var(--bg-raised); }

/* Contact specific */
.contact-grid {
 display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(32px, 6vw, 64px);
 max-width: 1000px; margin: 0 auto;
 padding-block: var(--s-12);
}
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; gap: var(--s-8); } }

.contact-info h2,
.contact-form h2 {
 font-size: var(--text-xl); font-weight: 800; color: var(--fg);
 letter-spacing: -0.015em; margin-bottom: var(--s-5);
}

.contact-items { display: flex; flex-direction: column; gap: var(--s-4); }
.contact-item {
 display: flex; align-items: flex-start; gap: var(--s-4);
 padding: var(--s-4) var(--s-5); border-radius: var(--r-md);
 background: var(--bg-surface); border: 1px solid var(--border);
 transition: border-color var(--dur-fast) var(--ease);
}
.contact-item:hover { border-color: color-mix(in oklch, var(--tonal) 50%, var(--border-strong)); }
.contact-icon {
 width: 44px; height: 44px; border-radius: var(--r);
 display: grid; place-items: center; flex: 0 0 44px;
 background: color-mix(in oklch, var(--tonal) 20%, var(--bg-raised));
 color: var(--tonal);
 border: 1px solid color-mix(in oklch, var(--tonal) 30%, transparent);
}
.contact-icon svg { width: 22px; height: 22px; }
.contact-label { font-size: var(--text-xs); color: var(--fg-subtle); margin-bottom: 4px; }
.contact-value { font-size: var(--text-sm); font-weight: 600; color: var(--fg); }
.contact-value a { color: var(--fg); transition: color var(--dur-fast) var(--ease); }
.contact-value a:hover { color: var(--accent); }

.contact-social { display: flex; gap: var(--s-2); margin-top: var(--s-6); }
.contact-social a {
 display: inline-flex; align-items: center; gap: 8px;
 padding: 8px 16px; border-radius: var(--r-full);
 background: var(--bg-surface); border: 1px solid var(--border);
 font-size: var(--text-sm); font-weight: 600; color: var(--fg);
 transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
 text-decoration: none;
}
.contact-social a:hover { border-color: var(--accent); }
.contact-social svg { width: 16px; height: 16px; color: var(--accent); }

/* Forms (shared) */
.form-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: var(--s-4); }
.form-group label {
 font-size: var(--text-sm); font-weight: 600; color: var(--fg);
}
.form-group label .required { color: var(--accent); margin-inline-start: 4px; }
.form-group input,
.form-group textarea,
.form-group select {
 width: 100%;
 background: var(--bg-surface);
 border: 1px solid var(--border-strong);
 border-radius: var(--r);
 padding: 12px 16px;
 color: var(--fg);
 font-family: var(--font);
 font-size: var(--text-sm);
 outline: none;
 transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.form-group input:hover,
.form-group textarea:hover,
.form-group select:hover { border-color: color-mix(in oklch, var(--accent) 30%, var(--border-strong)); }
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
 border-color: var(--accent);
 background: var(--bg);
 box-shadow: 0 0 0 3px color-mix(in oklch, var(--accent) 12%, transparent);
}
.form-group textarea { resize: vertical; min-height: 140px; line-height: 1.6; }
.form-group .helper { font-size: var(--text-xs); color: var(--fg-subtle); }

.form-success {
 display: none;
 margin-top: var(--s-4);
 padding: var(--s-4) var(--s-5);
 background: color-mix(in oklch, var(--success) 14%, transparent);
 border: 1px solid color-mix(in oklch, var(--success) 40%, transparent);
 border-radius: var(--r);
 color: var(--success);
 font-size: var(--text-sm); font-weight: 600;
 display: none;
 align-items: center; gap: 8px;
}
.form-success.show { display: flex; }
.form-success svg { width: 18px; height: 18px; flex: 0 0 18px; }

.form-error {
 display: none;
 margin-top: var(--s-4);
 padding: var(--s-4) var(--s-5);
 background: color-mix(in oklch, var(--danger) 12%, transparent);
 border: 1px solid color-mix(in oklch, var(--danger) 40%, transparent);
 border-radius: var(--r);
 color: var(--danger);
 font-size: var(--text-sm); font-weight: 600;
 align-items: center; gap: 8px;
}
.form-error.show { display: flex; }
.form-error svg { width: 18px; height: 18px; flex: 0 0 18px; }

.posts-empty {
 padding: var(--s-16) var(--s-6); text-align: center;
 color: var(--fg-muted);
}
.posts-empty svg { width: 64px; height: 64px; color: var(--fg-subtle); opacity: 0.5; margin-bottom: var(--s-4); }
.posts-empty h3 { font-size: var(--text-lg); font-weight: 700; color: var(--fg); margin-bottom: var(--s-2); }