/* Documentation page specific styles */

/* Keep extra right padding so the fixed TOC doesn't overlap content on wide screens */
main { max-width: 1100px; margin: 2.5rem auto; padding: 0 5%; padding-right: 260px; }

.documentation, .support { background: var(--theme-card-bg, #fff); border-radius: 10px; padding: 2rem; box-shadow: var(--theme-shadow, 0 6px 15px rgba(0,0,0,0.06)); margin-bottom: 1.5rem; }

.documentation h1 { font-size: 1.8rem; margin-bottom: 0.6rem; color: var(--theme-text-primary); }
.documentation p, .support p { color: var(--theme-text-secondary); font-size: 1rem; line-height: 1.6; }

.documentation ul { margin: 1rem 0 1.4rem 1.2rem; }
.documentation ul li { margin-bottom: 0.6rem; }

/* FAQ accordion */
.faq-item { border-top: 1px solid var(--theme-border-color); }
.faq-toggle { width: 100%; text-align: left; padding: 14px 12px; background: none; border: none; font-weight: 600; cursor: pointer; color: var(--theme-text-primary); display:flex; justify-content:space-between; align-items:center; }
.faq-toggle .chev { transition: transform .25s ease; }
.faq-item:first-child { border-top: none; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height .32s ease, padding .25s ease; padding: 0 12px; color: var(--theme-text-secondary); }
/* When open, allow a large max-height so content won't be clipped (safe upper bound)
    JS still sets inline maxHeight for smoother animation, but CSS fallback prevents clipping */
.faq-content.open { padding: 12px; max-height: none; overflow: visible; }

/* Support list */
.support ul { list-style: none; padding-left: 0; }
.support li { padding: 6px 0; }
.support a { color: var(--theme-primary-accent); text-decoration: underline; }

/* Header small adjustments for doc page */
header .nav-container { align-items: center; }
header .logo img { height: 40px; }

@media (max-width: 768px) {
    main { padding: 0 3%; }
    .faq-toggle { padding: 12px 10px; }
}

/* Table of contents (aside) */
.toc {
    position: fixed; right: 24px; top: 120px; width: 220px; background: transparent; font-size: 0.95rem;
}
.toc ul { list-style: none; padding-left: 0; margin-top: 8px; }
.toc a { color: var(--theme-text-primary); text-decoration: none; }
.toc a:hover { color: var(--theme-primary-accent); }

@media (max-width: 1100px) {
    .toc { display: none; }
    main { padding-right: 0; }
}

/* Documentation sections */
.doc-header { max-width: 900px; margin: 1.8rem auto; text-align: left; }
.doc-header .lead { color: var(--theme-text-secondary); }
.doc-section { background: var(--theme-card-bg); border-radius: 8px; padding: 1.4rem; margin-bottom: 1rem; }
.section-header { margin-bottom: 0.6rem; }
.code-block { background:#0f1720; color:#e6eef6; padding:12px; border-radius:6px; overflow:auto; }
.code-block code { color:inherit; }

/* Small helper for inline notes/warnings */
.note { display: block; background: #fff3cd; border-left: 4px solid #ffecb5; padding: 10px 12px; margin: 0.8rem 0; color: #6b4f00; border-radius: 4px; }

/* Anchor offset so fixed header/TOC doesn't cover headings when linked */
:target { scroll-margin-top: 100px; }