/* docs.css — shared layout for the DocuLume documentation section.
   Pairs with the site-wide /styles.css (header, nav, logo, footer).
   Pages link both:  <link rel="stylesheet" href="/styles.css">
                     <link rel="stylesheet" href="/docs/docs.css"> */

:root {
    --dl-blue: #3b82f6;
    --dl-cyan: #06b6d4;
    --dl-ink: #1e293b;
    --dl-slate: #475569;
    --dl-muted: #64748b;
    --dl-line: #e2e8f0;
    --dl-bg-soft: #f8fafc;
}

/* ── Docs hero ── */
.docs-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #3b82f6 100%);
    color: #fff;
    padding: 140px 0 60px;
    text-align: center;
}
.docs-hero h1 { font-size: 3rem; font-weight: 900; margin-bottom: 0.75rem; }
.docs-hero p { font-size: 1.1rem; color: rgba(255,255,255,0.82); max-width: 620px; margin: 0 auto; }
.docs-hero .crumb {
    display: inline-block; margin-bottom: 1rem; font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}
.docs-hero .crumb a { color: rgba(255,255,255,0.7); text-decoration: none; }
.docs-hero .crumb a:hover { color: #fff; }

/* ── Two-column docs layout ── */
.docs-layout {
    max-width: 1180px;
    margin: 0 auto;
    padding: 48px 20px 100px;
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 3rem;
    align-items: start;
}
.docs-sidebar {
    position: sticky;
    top: 100px;
    align-self: start;
}
.docs-sidebar h4 {
    font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--dl-muted); margin: 1.4rem 0 0.6rem; font-weight: 700;
}
.docs-sidebar h4:first-child { margin-top: 0; }
.docs-sidebar ul { list-style: none; margin: 0; padding: 0; }
.docs-sidebar li { margin: 0; }
.docs-sidebar a {
    display: block; padding: 0.32rem 0.75rem; font-size: 0.9rem; color: var(--dl-slate);
    text-decoration: none; border-left: 2px solid transparent; transition: all .2s;
}
.docs-sidebar a:hover { color: var(--dl-blue); border-left-color: #bfdbfe; }
.docs-sidebar a.active { color: var(--dl-blue); border-left-color: var(--dl-blue); font-weight: 600; }

.docs-main { min-width: 0; max-width: 800px; }
.docs-main h2 {
    font-size: 1.7rem; font-weight: 800; color: var(--dl-ink);
    margin: 2.6rem 0 1rem; padding-top: 0.4rem; scroll-margin-top: 90px;
}
.docs-main h2:first-child { margin-top: 0; }
.docs-main h3 { font-size: 1.18rem; font-weight: 700; color: var(--dl-ink); margin: 1.8rem 0 0.6rem; scroll-margin-top: 90px; }
.docs-main p { font-size: 1rem; color: var(--dl-slate); line-height: 1.75; margin-bottom: 1rem; }
.docs-main ul, .docs-main ol { color: var(--dl-slate); line-height: 1.75; margin: 0 0 1rem 1.3rem; }
.docs-main li { margin-bottom: 0.4rem; }
.docs-main a { color: var(--dl-blue); text-decoration: none; }
.docs-main a:hover { text-decoration: underline; }
.docs-main strong { color: var(--dl-ink); }
.docs-main hr { border: none; border-top: 1px solid var(--dl-line); margin: 2.4rem 0; }

.lead { font-size: 1.08rem !important; color: var(--dl-muted) !important; }

/* ── Code ── */
.docs-main code {
    background: #f1f5f9; color: #0f172a; padding: 0.12rem 0.4rem;
    border-radius: 5px; font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
    font-size: 0.85em;
}
.docs-main pre {
    background: #0f172a; color: #e2e8f0; padding: 1.1rem 1.25rem; border-radius: 10px;
    overflow-x: auto; margin: 0 0 1.3rem; font-size: 0.85rem; line-height: 1.6;
}
.docs-main pre code { background: none; color: inherit; padding: 0; font-size: inherit; }

/* ── Callouts ── */
.note, .warn, .tip {
    border-radius: 10px; padding: 0.9rem 1.1rem; margin: 0 0 1.3rem;
    font-size: 0.92rem; line-height: 1.65; border: 1px solid;
}
.note { background: #eff6ff; border-color: #bfdbfe; color: #1e40af; }
.warn { background: #fff7ed; border-color: #fed7aa; color: #9a3412; }
.tip  { background: #f0fdf4; border-color: #bbf7d0; color: #166534; }
.note strong, .warn strong, .tip strong { color: inherit; }

/* ── Tables ── */
.docs-main table {
    width: 100%; border-collapse: collapse; margin: 0 0 1.4rem; font-size: 0.9rem;
}
.docs-main th, .docs-main td {
    text-align: left; padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--dl-line); vertical-align: top;
}
.docs-main th { color: var(--dl-ink); font-weight: 700; background: var(--dl-bg-soft); }
.docs-main td { color: var(--dl-slate); }
.docs-main td code { white-space: nowrap; }

/* ── HTTP method pills + endpoint rows ── */
.endpoint {
    display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
    background: var(--dl-bg-soft); border: 1px solid var(--dl-line); border-radius: 10px;
    padding: 0.7rem 0.95rem; margin: 0 0 0.9rem; font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.9rem;
}
.method {
    font-weight: 800; font-size: 0.72rem; letter-spacing: 0.04em; padding: 0.22rem 0.6rem;
    border-radius: 6px; text-transform: uppercase; color: #fff; flex-shrink: 0;
}
.m-get { background: #2563eb; }
.m-post { background: #16a34a; }
.m-put { background: #d97706; }
.m-patch { background: #7c3aed; }
.m-delete { background: #dc2626; }
.endpoint .path { color: var(--dl-ink); font-weight: 600; word-break: break-all; }

/* ── Hub cards (docs landing) ── */
.docs-grid {
    max-width: 1100px; margin: 0 auto; padding: 64px 20px 100px;
    display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem;
}
.doc-card {
    display: block; background: #fff; border: 1px solid var(--dl-line); border-radius: 14px;
    padding: 1.6rem; text-decoration: none; transition: all .25s; color: inherit;
}
.doc-card:hover { transform: translateY(-4px); box-shadow: 0 12px 30px rgba(15,23,42,0.08); border-color: #bfdbfe; }
.doc-card .material-icons {
    font-size: 2rem; background: linear-gradient(135deg,#3b82f6,#06b6d4);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.6rem;
}
.doc-card h3 { font-size: 1.2rem; font-weight: 700; color: var(--dl-ink); margin-bottom: 0.4rem; }
.doc-card p { font-size: 0.92rem; color: var(--dl-muted); line-height: 1.6; margin: 0; }

/* ── FAQ ── */
.faq-item { border-bottom: 1px solid var(--dl-line); }
.faq-item summary {
    cursor: pointer; list-style: none; padding: 1.1rem 2rem 1.1rem 0; position: relative;
    font-size: 1.05rem; font-weight: 600; color: var(--dl-ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: 'add'; font-family: 'Material Icons'; position: absolute; right: 0; top: 1rem;
    color: var(--dl-blue); transition: transform .2s; font-size: 1.3rem;
}
.faq-item[open] summary::after { content: 'remove'; }
.faq-item .faq-body { padding: 0 0 1.2rem; }
.faq-item .faq-body p { margin-bottom: 0.7rem; }

/* ── Footer reused from styles.css ── */

/* ── Responsive ── */
@media (max-width: 900px) {
    .docs-layout { grid-template-columns: 1fr; gap: 1.5rem; }
    .docs-sidebar {
        position: static; top: auto; border: 1px solid var(--dl-line);
        border-radius: 12px; padding: 1rem 1.2rem; background: var(--dl-bg-soft);
    }
    .docs-hero h1 { font-size: 2.1rem; }
}
@media (max-width: 768px) {
    .nav-links { display: none; }
}