/* ================================================================
   GUIDE PAGES: shared chrome
   Loaded by any Razor view under Views/Guides/ that pulls in
   Bootstrap 4 for its content area (e.g. FontAwesomeStyleGuide,
   OverlayHeaderGuide). Covers the reusable "doc" presentation:
   dark-themed cards, code blocks, reference tables, and small demo
   widgets. Load order matters: Bootstrap CSS, then site.css again,
   then this file, so these rules have the final say.

   Page-specific "lesson content" CSS (the exact pattern each guide
   is teaching) stays inline in that page's own <style> block rather
   than living here, since it isn't reusable across guides.
   ================================================================ */


/* ─── BOOTSTRAP NAV FIX ────────────────────────────── */

/* Bootstrap ships its own .nav component (tabs/pills) under the exact
   same class name as this site's navbar. Re-loading site.css after
   Bootstrap only wins property-for-property where both stylesheets
   declare the same property, and site.css's .nav rule never sets
   `display`, so Bootstrap's `.nav { display: flex; }` still leaks
   through, collapsing the navbar into a tiny shrink-wrapped, centered
   cluster instead of stretching full width. This restores it. */
.nav {
    display: block;
}


/* ─── DOC CARDS ────────────────────────────────────── */

/* Re-themes Bootstrap's card/table/alert components to match the dark
   card styling already used elsewhere on the site (.tool-card,
   .edu-card) instead of Bootstrap's default light panels. */

.guide-doc {
    color: var(--text);
}

    .guide-doc .card {
        background-color: var(--bg-raised);
        border-color: var(--border);
        color: var(--text);
    }

    .guide-doc .card-header {
        background-color: var(--bg-hover);
        border-bottom-color: var(--border);
    }

        .guide-doc .card-header h2 {
            color: var(--text);
        }

    .guide-doc .section-num {
        width: 26px;
        height: 26px;
        font-size: .72rem;
        font-weight: 700;
        flex-shrink: 0;
    }

    .guide-doc code {
        color: var(--accent);
        background-color: var(--bg-hover);
        font-variant-ligatures: none;
    }

    .guide-doc .subsection-label {
        margin: 1.25rem 0 .5rem;
        padding-left: .6rem;
        border-left: 3px solid var(--accent-dim);
        font-size: .8rem;
        font-weight: 700;
        color: var(--accent);
    }

        .guide-doc .subsection-label:first-child {
            margin-top: 0;
        }

    .guide-doc .alert-warning {
        background-color: rgba(245, 158, 11, .1);
        border-color: rgba(245, 158, 11, .35);
        color: #fbbf24;
    }

    .guide-doc .table {
        color: var(--text);
    }

    .guide-doc .table-bordered,
    .guide-doc .table-bordered td,
    .guide-doc .table-bordered th {
        border-color: var(--border);
    }

    .guide-doc .thead-light th {
        background-color: var(--bg-hover);
        border-color: var(--border);
        color: var(--text-sub);
    }

    .guide-doc .ref-class {
        font-family: var(--mono, Consolas, monospace);
        font-size: .72rem;
        color: var(--accent);
        white-space: nowrap;
    }

    /* Reusable fixed-width modifier for the first column of a reference
   table, in place of a one-off inline `style="width:…"`. */
    .guide-doc .ref-col-wide {
        width: 220px;
    }


    /* ─── CODE BLOCKS ──────────────────────────────────── */

    /* Bootstrap has no built-in code highlighting, so this small bit of
   custom CSS stays. Token classes follow VS Code's Dark+ theme. */

    .guide-doc pre.code-block {
        overflow-x: auto;
        padding: 1rem 1.25rem;
        border-radius: .4rem;
        background-color: #1e1e1e;
        color: #d4d4d4;
        font-family: var(--mono, "Cascadia Code", "Fira Code", Consolas, monospace);
        font-size: .72rem;
        line-height: 1.75;
        tab-size: 4;
        white-space: pre;
        font-variant-ligatures: none;
    }

    .guide-doc .t-sel {
        color: #D7BA7D;
    }
    /* CSS selector names */
    .guide-doc .t-prop {
        color: #9CDCFE;
    }
    /* CSS property names */
    .guide-doc .t-val {
        color: #CE9178;
    }
    /* CSS values          */
    .guide-doc .t-attr {
        color: #9CDCFE;
    }
    /* HTML attribute names */
    .guide-doc .t-tag {
        color: #569CD6;
    }
    /* HTML tag names      */
    .guide-doc .t-kw {
        color: #569CD6;
    }
    /* JS keywords         */
    .guide-doc .t-fn {
        color: #DCDCAA;
    }
    /* function/method names */
    .guide-doc .t-num {
        color: #B5CEA8;
    }
    /* numeric literals    */
    .guide-doc .t-str {
        color: #CE9178;
    }
    /* string literals      */
    .guide-doc .t-at {
        color: #C586C0;
    }
    /* @media / @keyframes */
    .guide-doc .t-cmt {
        color: #6A9955;
        font-style: italic;
    }
    /* comments */


    /* ─── DEMO HELPERS ─────────────────────────────────── */

    /* Small reusable pieces shared by any guide's live-demo section. */

    .guide-doc .demo-wrapper {
        border: 2px dashed var(--border-lit);
        border-radius: .5rem;
        background-color: var(--bg-raised);
    }

    /* Caption-style text sitting next to or below a live demo, e.g. to
   explain what the surrounding page content would look like. */
    .guide-doc .demo-body-text {
        padding: 1rem;
        color: var(--text-sub);
        font-size: .875rem;
    }

        .guide-doc .demo-body-text p {
            margin: 0 0 .5rem;
        }

            .guide-doc .demo-body-text p:last-child {
                margin-bottom: 0;
            }


    /* ─── COMPARISON DEMO ──────────────────────────────── */

    /* "Default → overridden" comparison cards, e.g. the icon override
   demos in the Font Awesome guide. Generic enough to reuse for any
   future before/after style comparison. */

    .guide-doc .icon-demo-card {
        max-width: 190px;
    }

    .guide-doc .icon-demo-card-label {
        margin-bottom: .5rem;
        text-transform: uppercase;
        letter-spacing: .05em;
        font-size: .6rem;
        font-weight: 700;
        color: var(--text-sub);
    }

    .guide-doc .icon-demo-item span {
        font-family: var(--mono, Consolas, monospace);
        font-size: .6rem;
        color: var(--text-faint);
    }

    .guide-doc .icon-demo-arrow {
        font-size: 1rem;
        color: var(--text-faint);
    }

    .guide-doc .icon-demo-card-class {
        margin-top: .6rem;
        font-family: var(--mono, Consolas, monospace);
        font-size: .6rem;
        color: var(--text-faint);
    }


    /* ─── RELATED GUIDES ───────────────────────────────── */

    .guide-doc .related-guides-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
        gap: .75rem;
    }

    .guide-doc .related-guide-link {
        display: flex;
        align-items: center;
        gap: .75rem;
        padding: .85rem 1rem;
        border: 1px solid var(--border);
        border-radius: .5rem;
        background-color: var(--bg-hover);
        color: var(--text);
        text-decoration: none;
        transition: border-color .15s ease, transform .15s ease;
    }

        .guide-doc .related-guide-link:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
            color: var(--text);
        }

        .guide-doc .related-guide-link svg {
            flex-shrink: 0;
            color: var(--accent);
        }

        .guide-doc .related-guide-link span {
            font-size: .82rem;
            font-weight: 600;
            line-height: 1.3;
        }