/* ================================================================
   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);
}

.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;
}

.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-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);
}


/* ─── VIEWPORT BADGE ───────────────────────────────── */

/* Small fixed badge showing the live viewport width, useful as a demo
   aid for any guide that teaches a responsive breakpoint. */

.vp-badge {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 1051;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background-color: #0f2230;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
    color: #f0f6ff;
    font-family: Consolas, monospace;
    font-size: 12px;
}

.vp-badge .vp-px { font-weight: 700; color: #7dd3fc; }
.vp-badge .vp-lbl.mobile  { color: #fb923c; }
.vp-badge .vp-lbl.desktop { color: #4ade80; }