/* ============================================================================
   Unifyca Documentation — docs.css
   ----------------------------------------------------------------------------
   Documentation-ONLY styles. The main site stylesheet (/assets/css/styles.css)
   is always loaded BEFORE this file, so we inherit the existing Unifyca visual
   identity: the Inter font, the colour tokens (--primary, --fg, --muted,
   --border) and the header / footer / button styles.

   No new fonts, no new colour palette, no new design system are introduced
   here. We only add layout + components specific to a knowledge center:
   sidebar, breadcrumbs, search area, article typography, category cards,
   alert / "common problem" boxes and related sections.

   Design goal (inspired by support.monday.com): calm, generous whitespace,
   clear hierarchy, very little visual noise.
   ========================================================================== */

/* ----------------------------------------------------------------------------
   0. Stable scrollbar gutter (docs pages only)
   Reserve the vertical scrollbar's space at all times so the centered layout
   never shifts horizontally when page height changes — e.g. when a FAQ
   accordion opens/closes and a scrollbar appears or disappears.
   -------------------------------------------------------------------------- */
html {
    scrollbar-gutter: stable;
}

/* ----------------------------------------------------------------------------
   1. Documentation-scoped tokens
   These are layout/spacing tokens only — they reuse the site's colours.
   -------------------------------------------------------------------------- */
:root {
    --docs-sidebar-width: 280px;
    --docs-content-max: 800px;       /* comfortable reading measure */
    --docs-gap: 48px;
    --docs-sticky-top: 24px;         /* gap from the viewport top once the sidebar is stuck */
    --docs-header-offset: 108px;     /* site header height + shell top padding, so the sidebar
                                        fits fully on screen even at the very top of the page */
    --docs-radius: 12px;
    --docs-radius-sm: 8px;
    --docs-surface: #fafafa;
    --docs-surface-2: #f6f7f9;
    --docs-accent: var(--primary);
    --docs-accent-soft: #eef1f8;     /* derived from --primary, very light */
    --docs-shadow: 0 1px 2px rgba(17, 17, 17, .04);
}

/* ----------------------------------------------------------------------------
   2. Accessibility helpers
   -------------------------------------------------------------------------- */
.docs-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    background: var(--primary);
    color: #fff;
    padding: 10px 16px;
    border-radius: 0 0 var(--docs-radius-sm) 0;
    z-index: 2000;
}
.docs-skip-link:focus {
    left: 0;
}

/* ----------------------------------------------------------------------------
   3. Layout shell — sidebar + main column
   -------------------------------------------------------------------------- */
.docs-shell {
    display: grid;
    grid-template-columns: var(--docs-sidebar-width) minmax(0, 1fr);
    gap: var(--docs-gap);
    align-items: start;
    padding-top: 32px;
    padding-bottom: 72px;
}
.docs-shell--full {
    display: block;
}

/* ----------------------------------------------------------------------------
   4. Sidebar
   -------------------------------------------------------------------------- */
.docs-sidebar {
    position: sticky;
    top: var(--docs-sticky-top);
    align-self: start;
    /* Independent scroll: the sidebar scrolls on its own without moving the
       central content, and scrolling past the end won't chain to the page.
       The header offset keeps the whole menu reachable at the top of the page,
       where the sidebar starts below the (non-sticky) site header. */
    max-height: calc(100vh - var(--docs-header-offset) - var(--docs-sticky-top));
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Hover-reveal scrollbar (YouTube-style) — Firefox */
    scrollbar-width: thin;
    scrollbar-color: transparent transparent;
    transition: scrollbar-color .2s ease;
}
.docs-sidebar:hover,
.docs-sidebar:focus-within {
    scrollbar-color: rgba(0, 0, 0, .28) transparent;
}
/* Hover-reveal scrollbar — WebKit (Chrome, Edge, Safari) */
.docs-sidebar::-webkit-scrollbar {
    width: 10px;
}
.docs-sidebar::-webkit-scrollbar-track {
    background: transparent;
}
.docs-sidebar::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 8px;
    border: 2px solid transparent;
    background-clip: padding-box;
    transition: background-color .2s ease;
}
.docs-sidebar:hover::-webkit-scrollbar-thumb,
.docs-sidebar:focus-within::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, .22);
}
.docs-sidebar:hover::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, .38);
}
.docs-sidebar-toggle {
    display: none; /* mobile only */
    width: 100%;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--docs-radius-sm);
    padding: 12px 14px;
    font: inherit;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
}

.docs-nav-list,
.docs-nav-sublist {
    list-style: none;
    margin: 0;
    padding: 0;
}
.docs-nav-item {
    margin: 1px 0;
}
.docs-nav-link {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    line-height: 1.35;
    border-radius: var(--docs-radius-sm);
    color: #222;
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: background-color .15s ease, color .15s ease;
}
.docs-nav-link i {
    width: 18px;
    text-align: center;
    color: var(--muted);
    font-size: 15px;
}
.docs-nav-link:hover {
    background: var(--docs-surface-2);
    color: var(--fg);
}
.docs-nav-item.is-active > .docs-nav-link {
    background: var(--docs-accent-soft);
    color: var(--primary);
}
.docs-nav-item.is-active > .docs-nav-link i {
    color: var(--primary);
}

/* Disabled / "coming soon" entries (sections not published yet) */
.docs-nav-link.is-disabled,
.docs-nav-sublink.is-disabled {
    color: var(--muted);
    cursor: default;
    opacity: .75;
}

/* Sub-navigation (subsections / articles) */
.docs-nav-sublist {
    margin: 1px 0 5px;
    padding-left: 25px;
    border-left: 1px solid var(--border);
    margin-left: 19px;
}
.docs-nav-sublink {
    display: block;
    padding: 3px 10px;
    line-height: 1.35;
    border-radius: var(--docs-radius-sm);
    color: var(--muted);
    text-decoration: none;
    font-size: 14px;
}
.docs-nav-sublink:hover {
    background: var(--docs-surface-2);
    color: var(--fg);
}
.docs-nav-subitem.is-active > .docs-nav-sublink {
    color: var(--primary);
    font-weight: 600;
}

/* ----------------------------------------------------------------------------
   5. Main column + breadcrumbs
   -------------------------------------------------------------------------- */
.docs-main {
    min-width: 0;
    /* Reset the global `main { padding: 80px 0 }` from styles.css so the article
       aligns with the top of the sidebar. Vertical spacing for the whole shell
       is handled by .docs-shell's padding instead. */
    padding: 0;
}
.docs-breadcrumbs {
    margin-bottom: 22px;
}
.docs-breadcrumbs ol {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-size: 14px;
    color: var(--muted);
}
.docs-breadcrumbs li {
    display: flex;
    align-items: center;
    gap: 8px;
}
.docs-breadcrumbs li + li::before {
    content: "›";
    color: var(--border);
}
.docs-breadcrumbs a {
    color: var(--muted);
    text-decoration: none;
}
.docs-breadcrumbs a:hover {
    color: var(--primary);
    text-decoration: underline;
}
.docs-breadcrumbs li[aria-current="page"] span {
    color: var(--fg);
}

/* ----------------------------------------------------------------------------
   6. Article typography (calm, readable measure)
   -------------------------------------------------------------------------- */
.docs-article {
    max-width: var(--docs-content-max);
}
.docs-article-header {
    margin-bottom: 28px;
}
.docs-article h1 {
    font-size: 38px;
    line-height: 1.18;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}
.docs-lead {
    font-size: 19px;
    line-height: 1.6;
    color: var(--muted);
    margin: 0;
}
.docs-article h2 {
    font-size: 26px;
    line-height: 1.25;
    letter-spacing: -0.01em;
    margin: 44px 0 14px;
    padding-top: 8px;
}
.docs-article h3 {
    font-size: 20px;
    line-height: 1.3;
    margin: 32px 0 10px;
}
.docs-article p,
.docs-article li {
    font-size: 16.5px;
    line-height: 1.75;
}
.docs-article ul,
.docs-article ol {
    padding-left: 22px;
}
.docs-article li {
    margin: 6px 0;
}
.docs-article a {
    color: var(--primary);
    text-decoration: none;
}
.docs-article a:hover {
    color: var(--primary-600);
}
.docs-article img {
    max-width: 100%;
    height: auto;
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
}
.docs-article code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .9em;
    background: var(--docs-surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 1px 6px;
}
.docs-article pre {
    background: var(--docs-surface);
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
    padding: 16px 18px;
    overflow: auto;
}
.docs-article pre code {
    background: none;
    border: 0;
    padding: 0;
}
.docs-article hr {
    border: 0;
    border-top: 1px solid var(--border);
    margin: 40px 0;
}

/* ----------------------------------------------------------------------------
   7. Search area (homepage hero + future on-site search)
   -------------------------------------------------------------------------- */
.docs-hero {
    text-align: center;
    padding: 24px 0 8px;
    max-width: 760px;
    margin: 0 auto;
}
.docs-hero h1 {
    font-size: 42px;
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 14px;
}
.docs-hero p {
    font-size: 18px;
    color: var(--muted);
    margin: 0 auto 28px;
    max-width: 620px;
}

/* Concise product-definition + onboarding entry point (between H1 and search). */
.docs-intro-block {
    max-width: 640px;
    margin: 0 auto 28px;
    text-align: center;
}
.docs-intro-definition {
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--fg);
    margin: 0 0 8px;
}
/* Higher specificity than ".docs-article a" so the button text stays white. */
.docs-hero a.docs-intro-cta,
.docs-hero a.docs-intro-cta:hover {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    background: var(--primary);
    color: #fff;
    font-size: 14.5px;
    font-weight: 600;
    border-radius: 999px;
    text-decoration: none;
    transition: transform .06s ease, box-shadow .15s ease, background-color .15s ease;
}
.docs-hero a.docs-intro-cta:hover {
    background: var(--primary-600);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.10);
}
.docs-hero a.docs-intro-cta i {
    font-size: 12px;
    transition: transform .12s ease;
}
.docs-hero a.docs-intro-cta:hover i {
    transform: translateX(2px);
}
.docs-search {
    position: relative;
    max-width: 620px;
    margin: 0 auto;
}
.docs-search i {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
}
.docs-search input {
    width: 100%;
    font: inherit;
    font-size: 16px;
    padding: 16px 18px 16px 48px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--docs-shadow);
    transition: border-color .15s ease, box-shadow .15s ease;
}
.docs-search input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 4px var(--docs-accent-soft);
}

/* Homepage uses a wider, centered measure (no sidebar) */
body.docs-home .docs-article {
    max-width: 1080px;
    margin: 0 auto;
}

/* The full-width docs homepage has no sidebar, so it mirrors the commercial
   pages' hero rhythm — not the article shell. `.docs-main` resets the global
   `main { padding: 80px 0 }` to 0 for sidebar alignment, which pulls the hero
   title ~48px higher than the Features / Pricing hero titles. Restore that
   80px on the homepage only so "How can we help you?" lines up with them. */
body.docs-home .docs-shell {
    padding-top: 80px;
}

/* Popular Articles: full-bleed, very light gray band so the homepage isn't all
   white. Breaks out of the centered 1080px measure to span the full viewport
   width, then re-pads so the section content stays aligned with the cards above
   and below. */
body.docs-home .docs-popular {
    background: var(--docs-surface-2);
    margin-inline: calc(50% - 50vw);
    margin-top: 72px;
    padding-inline: calc(50vw - 50%);
    padding-top: 8px;
    padding-bottom: 64px;
}
/* Pull the band's first heading margin inside the tinted area for even spacing. */
body.docs-home .docs-popular > .docs-section-head {
    margin-top: 56px;
}

/* ----------------------------------------------------------------------------
   8. Category cards (homepage "browse by topic")
   -------------------------------------------------------------------------- */
.docs-section-head {
    text-align: center;
    max-width: 640px;
    margin: 64px auto 28px;
}
.docs-section-head h2 {
    font-size: 26px;
    margin: 0 0 8px;
}
.docs-section-head p {
    color: var(--muted);
    margin: 0;
}
.docs-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
}
.docs-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .06s ease;
}
a.docs-card:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.docs-card-icon {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--docs-accent-soft);
    color: var(--primary);
    font-size: 18px;
    margin-bottom: 4px;
}
.docs-card h3 {
    font-size: 17px;
    margin: 0;
}
.docs-card p {
    font-size: 14.5px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}
.docs-card-children {
    font-size: 13.5px;
    color: var(--muted);
    margin: 2px 0 0;
}
.docs-card.is-disabled {
    opacity: .7;
}
.docs-card .docs-badge {
    align-self: flex-start;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    background: var(--docs-surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 10px;
}
.docs-card-desc {
    font-size: 14.5px;
    color: var(--muted);
    margin: 0;
    line-height: 1.6;
}
/* Browse-by-topic "View documentation" link — pinned to the bottom so every
   category card ends at the same baseline and the grid stays even-height. */
.docs-card-link {
    margin-top: auto;
    padding-top: 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--primary);
}
a.docs-card:hover .docs-card-link i {
    transform: translateX(2px);
}
.docs-card-link i {
    font-size: 12px;
    transition: transform .12s ease;
}

/* New to Unifyca? — guided onboarding journey. */
.docs-onboarding-note {
    margin: 12px 0 0;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--primary);
}
.docs-onboarding-note i {
    margin-right: 6px;
}
.docs-journey {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 1000px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 10px;
}
.docs-journey-item {
    display: flex;
    flex: 1 1 240px;
    max-width: 320px;
}
.docs-journey-step {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, transform .06s ease, box-shadow .15s ease;
}
.docs-journey-step:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0,0,0,.05);
}
.docs-journey-num {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--docs-accent-soft);
    color: var(--primary);
    font-size: 15px;
    font-weight: 700;
}
.docs-journey-label {
    font-size: 14.5px;
    font-weight: 500;
    line-height: 1.35;
}
.docs-journey-arrow {
    display: inline-flex;
    align-items: center;
    color: var(--primary);
    opacity: .5;
    font-size: 14px;
}
/* On narrow viewports the arrows would break the wrapped grid — hide them. */
@media (max-width: 720px) {
    .docs-journey-arrow { display: none; }
    .docs-journey-item { flex-basis: 100%; max-width: none; }
}

/* ----------------------------------------------------------------------------
   9. Alert boxes & "Common Problem" boxes (article building blocks)
   These are prepared now and used by article content from Block 2 onwards.
   -------------------------------------------------------------------------- */
.docs-callout {
    display: flex;
    gap: 14px;
    padding: 16px 18px;
    border: 1px solid var(--border);
    border-left-width: 4px;
    border-radius: var(--docs-radius-sm);
    background: var(--docs-surface);
    margin: 24px 0;
}
.docs-callout i {
    font-size: 18px;
    margin-top: 2px;
}
.docs-callout-body {
    min-width: 0;
}
.docs-callout-title {
    font-weight: 600;
    margin: 0 0 4px;
}
.docs-callout p:last-child {
    margin-bottom: 0;
}

/* Standardized variants: INFO · SUCCESS · WARNING · PRO FEATURE */
.docs-callout--info    { border-left-color: var(--primary); }
.docs-callout--info i   { color: var(--primary); }

.docs-callout--success { border-left-color: #16a34a; background: #f0fdf4; }
.docs-callout--success i { color: #16a34a; }

.docs-callout--warning { border-left-color: #d97706; background: #fffbeb; }
.docs-callout--warning i { color: #d97706; }

.docs-callout--pro     { border-left-color: var(--primary); background: var(--docs-accent-soft); }
.docs-callout--pro i    { color: var(--primary); }

/* "PRO" badge shown in PRO FEATURE callouts */
.docs-callout-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: #fff;
    background: var(--primary);
    border-radius: 999px;
    vertical-align: middle;
}

/* Legacy aliases kept so older markup never breaks */
.docs-callout--tip     { border-left-color: #16a34a; background: #f0fdf4; }
.docs-callout--tip i    { color: #16a34a; }
.docs-callout--problem { border-left-color: #d97706; background: #fffbeb; }
.docs-callout--problem i { color: #d97706; }

/* ----------------------------------------------------------------------------
   9a. Executive summary (reusable article intro block, below the title)
   -------------------------------------------------------------------------- */
.docs-summary {
    margin: 4px 0 8px;
    padding: 18px 20px;
    background: var(--docs-accent-soft);
    border: 1px solid var(--border);
    border-left: 4px solid var(--primary);
    border-radius: var(--docs-radius);
}
.docs-summary p {
    margin: 0;
    font-size: 16px;
    line-height: 1.7;
    color: var(--fg);
}
.docs-summary p + p {
    margin-top: 8px;
}

/* ----------------------------------------------------------------------------
   9b. Article sections + in-page table of contents
   -------------------------------------------------------------------------- */
/* Anchored sections: offset scroll so headings aren't hidden under the header */
.docs-section {
    scroll-margin-top: 24px;
}

.docs-toc {
    margin: 28px 0 36px;
    padding: 16px 20px;
    background: var(--docs-surface);
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
}
.docs-toc-title {
    margin: 0 0 10px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.docs-toc ul {
    list-style: none;
    margin: 0;
    padding: 0;
    columns: 2;
    column-gap: 32px;
}
.docs-toc li {
    margin: 6px 0;
    break-inside: avoid;
}
.docs-toc a {
    color: var(--fg);
    text-decoration: none;
    font-size: 15px;
}
.docs-toc a:hover {
    color: var(--primary);
    text-decoration: underline;
}

@media (max-width: 560px) {
    .docs-toc ul { columns: 1; }
}

/* ----------------------------------------------------------------------------
   9c. Field reference ("What Unifyca stores here")
   -------------------------------------------------------------------------- */
.docs-fields {
    margin: 8px 0 4px;
}
.docs-fields-title {
    margin-top: 0;
}
.docs-fields-group {
    margin: 22px 0;
}
.docs-fields-group-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
}
.docs-fields-list {
    margin: 0;
}
.docs-field {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 6px 24px;
    padding: 10px 0;
    border-bottom: 1px solid var(--border);
}
.docs-field:last-child {
    border-bottom: 0;
}
.docs-field dt {
    margin: 0;
    font-weight: 600;
    font-size: 15px;
}
.docs-field dd {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--muted);
}
.docs-field-lock {
    color: var(--muted);
    font-size: 12px;
    margin-left: 4px;
}
@media (max-width: 560px) {
    .docs-field {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 8px 0;
    }
}

/* ----------------------------------------------------------------------------
   10. Related sections (article footer)
   -------------------------------------------------------------------------- */
.docs-related {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid var(--border);
}
.docs-related h2 {
    font-size: 18px;
    margin: 0 0 16px;
}
.docs-related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 14px;
}
/* Navigational cards — subtle, same design language (no strong colours) */
.docs-related-link {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--docs-radius);
    text-decoration: none;
    color: var(--fg);
    font-weight: 600;
    font-size: 15px;
    box-shadow: var(--docs-shadow);
    transition: border-color .15s ease, transform .06s ease;
}
a.docs-related-link:hover {
    border-color: var(--primary);
    transform: translateY(-1px);
}
.docs-related-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 9px;
    background: var(--docs-accent-soft);
    color: var(--primary);
    font-size: 16px;
}
.docs-related-label {
    flex: 1 1 auto;
    min-width: 0;
}
.docs-related-arrow {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 13px;
    transition: transform .15s ease, color .15s ease;
}
a.docs-related-link:hover .docs-related-arrow {
    color: var(--primary);
    transform: translateX(2px);
}
/* Unpublished targets: muted, non-interactive, with a "coming soon" tag */
.docs-related-link.is-disabled {
    cursor: default;
    box-shadow: none;
    border-style: dashed;
    color: var(--muted);
    font-weight: 600;
}
.docs-related-link.is-disabled .docs-related-icon {
    background: var(--docs-surface-2);
    color: var(--muted);
}
.docs-related-soon {
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    background: var(--docs-surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 2px 8px;
}

/* ----------------------------------------------------------------------------
   10b. FAQ (reusable, SEO-focused)
   -------------------------------------------------------------------------- */
.docs-faq {
    margin-top: 48px;
}
.docs-faq h2 {
    margin-bottom: 8px;
}
/* Accordion items (native <details>/<summary>) */
.docs-faq-item {
    border-bottom: 1px solid var(--border);
}
.docs-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 18px 0;
    font-size: 17px;
    font-weight: 600;
    color: var(--fg);
    cursor: pointer;
    list-style: none; /* hide default disclosure triangle */
}
.docs-faq-q::-webkit-details-marker { /* hide default triangle (WebKit) */
    display: none;
}
.docs-faq-q:hover {
    color: var(--primary);
}
.docs-faq-icon {
    flex: 0 0 auto;
    color: var(--muted);
    font-size: 14px;
    transition: transform .2s ease;
}
.docs-faq-item[open] > .docs-faq-q {
    color: var(--primary);
}
.docs-faq-item[open] > .docs-faq-q .docs-faq-icon {
    transform: rotate(180deg);
    color: var(--primary);
}
.docs-faq-a {
    padding: 0 0 18px;
    color: var(--fg);
}
.docs-faq-a p {
    margin: 0;
}
.docs-faq-a p + p {
    margin-top: 8px;
}

/* ----------------------------------------------------------------------------
   11. Footer (documentation-specific layout; reuses site colours)
   -------------------------------------------------------------------------- */
.docs-footer {
    border-top: 1px solid var(--border);
    background: var(--docs-surface);
    margin-top: 0;
}
.docs-footer-inner {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 40px;
    padding-top: 48px;
    padding-bottom: 40px;
}
.docs-footer-tagline {
    color: var(--muted);
    font-size: 15px;
    max-width: 320px;
    margin: 14px 0 16px;
}
.docs-footer-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--primary);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.docs-footer-back:hover {
    text-decoration: underline;
}
.docs-footer-heading {
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--muted);
    margin: 0 0 14px;
}
.docs-footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.docs-footer-col li {
    margin: 8px 0;
}
.docs-footer-col a {
    color: #333;
    text-decoration: none;
    font-size: 15px;
}
.docs-footer-col a:hover {
    color: var(--primary);
}
.docs-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding-top: 18px;
    padding-bottom: 28px;
    border-top: 1px solid var(--border);
    color: var(--muted);
    font-size: 13.5px;
}
.docs-footer-legal-inline a {
    color: var(--muted);
    text-decoration: none;
}
.docs-footer-legal-inline a:hover {
    color: var(--primary);
}

/* ----------------------------------------------------------------------------
   12. Responsive
   -------------------------------------------------------------------------- */
@media (max-width: 980px) {
    .docs-shell {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    .docs-sidebar {
        position: static;
        max-height: none;
        overflow: visible;
    }
    .docs-sidebar-toggle {
        display: flex;
    }
    /* Collapse the nav behind the toggle on mobile */
    .docs-sidebar-nav {
        display: none;
        margin-top: 10px;
        padding: 8px;
        border: 1px solid var(--border);
        border-radius: var(--docs-radius);
        background: #fff;
    }
    .docs-sidebar.is-open .docs-sidebar-nav {
        display: block;
    }
    .docs-footer-inner {
        grid-template-columns: 1fr;
        gap: 28px;
    }
}

/* Match the commercial pages' reduced top spacing on small screens
   (their global `main` drops to 48px padding at ≤768px). */
@media (max-width: 768px) {
    body.docs-home .docs-shell { padding-top: 48px; }
}

@media (max-width: 560px) {
    .docs-article h1 { font-size: 30px; }
    .docs-hero h1 { font-size: 32px; }
    .docs-hero p { font-size: 16px; }
}