/* =========================================================================
   Guide pages (e.g. /guides/vscode-extension-malware/).
   Loaded only on pages that set `extra_css: /guide.css` in front matter.
   Uses the site's light/dark theme tokens from styles.css.
========================================================================= */

/* ---- Container & two-column desktop layout ---- */
.guide-shell-container { max-width: 1120px; }
.guide-layout {
    display: grid;
    grid-template-columns: minmax(0, 740px) 280px;
    justify-content: space-between;
    gap: 48px;
    align-items: start;
}

/* ---- Hero ---- */
.guide-hero {
    padding: 56px 0 28px;
    border-bottom: 1px solid var(--line);
    background: radial-gradient(60% 90% at 15% 0%, rgba(10,110,125,0.06), transparent 65%), var(--bg-soft);
}
.guide-eyebrow { margin: 14px 0 8px; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-strong); font-weight: 600; }
.guide-title { margin: 0 0 18px; font-size: clamp(1.95rem, 3.6vw, 2.75rem); line-height: 1.12; max-width: 820px; }
.guide-meta-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.guide-meta { margin: 0; color: var(--ink-3); font-size: 0.92rem; }
.guide-pills { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-pill { font-size: 0.72rem; color: var(--ink-2); background: var(--bg-elev); border: 1px solid var(--line); padding: 4px 10px; border-radius: 999px; }

/* ---- Body & sticky right rail ---- */
.guide-body { padding-top: 36px; padding-bottom: 64px; }
/* Offset anchored headings so the sticky nav does not cover them. */
.guide-body h2[id] { scroll-margin-top: 90px; }

/* ---- Heading anchor links ----
   Added by the script at the bottom of the guide page. Each h2 gets a
   small link icon that points at its own #id so readers can copy a direct
   link to a section. The icon is invisible until hover or keyboard focus. */
.guide-heading-anchor {
    margin-left: 8px;
    font-size: 0.7em;
    color: var(--ink-4);
    text-decoration: none;
    opacity: 0;
    transition: opacity 0.15s ease, color 0.15s ease;
    vertical-align: middle;
}
.guide-body h2:hover .guide-heading-anchor,
.guide-heading-anchor:focus-visible { opacity: 1; }
.guide-heading-anchor:hover,
.guide-heading-anchor:focus-visible { color: var(--accent-strong); text-decoration: none; }
/* On touch screens there is no hover, so keep the icon visible. */
@media (hover: none) { .guide-heading-anchor { opacity: 0.6; } }
/* Hide mobile inline TOC on desktop because the right sticky rail is visible. */
.guide-toc--mobile { display: none; }

.guide-sidebar { padding-top: 36px; }
.guide-sidebar-sticky { position: sticky; top: 92px; display: flex; flex-direction: column; gap: 18px; }
.guide-sidebar-toc,
.guide-sidebar-card { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px 20px; }
.guide-sidebar-heading { margin: 0 0 10px; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-4); font-weight: 600; }
.guide-sidebar-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 7px; }
.guide-sidebar-list a { display: block; font-size: 0.86rem; color: var(--ink-3); text-decoration: none; line-height: 1.4; }
.guide-sidebar-list a:hover { color: var(--accent-strong); text-decoration: none; }
.guide-tool-link { display: block; padding: 10px 0; border-top: 1px solid var(--line); text-decoration: none; }
.guide-tool-link:first-of-type { border-top: 0; padding-top: 2px; }
.guide-tool-link:last-of-type { padding-bottom: 0; }
.guide-tool-link:hover { text-decoration: none; }
.guide-tool-name { display: flex; align-items: center; justify-content: space-between; font-family: var(--font-display); font-weight: 600; font-size: 0.9rem; color: var(--ink); }
.guide-tool-link:hover .guide-tool-name { color: var(--accent-strong); }
.guide-tool-desc { display: block; font-size: 0.8rem; color: var(--ink-3); line-height: 1.45; margin-top: 2px; }

/* ---- Direct-answer box ---- */
.guide-answer {
    background: var(--accent-tint);
    border: 1px solid var(--line-strong);
    border-left: 4px solid var(--accent);
    border-radius: var(--radius);
    padding: 18px 22px 6px;
    margin: 0 0 1.75em;
}
.guide-answer p:first-child { font-size: 1.08rem; }

/* ---- Scanner callout card (section 2) ---- */
.guide-scanner-box {
    display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
    background: var(--bg-soft); border: 1px solid var(--line-strong); border-radius: var(--radius);
    padding: 20px 22px; margin: 1.25em 0;
}
.guide-scanner-box-copy { display: block; }
.guide-scanner-box-kicker { display: block; font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent-strong); margin-bottom: 4px; }
.guide-scanner-box-title { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: 0 0 4px !important; }
.guide-scanner-box-sub { display: block; font-size: 0.88rem; color: var(--ink-3); margin: 0 !important; }

/* ---- OtterSec-style research ledger (section 7) ---- */
.guide-ledger { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; margin: 1.25em 0 1.75em; background: var(--bg-elev); }
.guide-ledger-head {
    display: grid; grid-template-columns: 98px 136px 1fr; gap: 16px;
    padding: 10px 18px; background: var(--bg-soft); border-bottom: 1px solid var(--line);
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-4);
}
.guide-research { list-style: none !important; padding: 0 !important; margin: 0 !important; }
.guide-research-row {
    display: grid; grid-template-columns: 98px 136px 1fr; gap: 16px; align-items: baseline;
    padding: 14px 18px; border-bottom: 1px solid var(--line); margin: 0 !important;
}
.guide-research-row.is-collapsed { display: none; }
.guide-ledger.is-expanded .guide-research-row.is-collapsed { display: grid; }
.guide-research-date { font-size: 0.8rem; color: var(--ink-4); white-space: nowrap; }
.guide-research-cat {
    font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em;
    color: var(--accent-strong); background: var(--accent-tint);
    padding: 3px 8px; border-radius: 4px; justify-self: start; white-space: nowrap;
}
.guide-research-link { font-weight: 600; display: block; line-height: 1.4; }
.guide-research-excerpt { display: block; font-size: 0.86rem; color: var(--ink-3); line-height: 1.5; margin-top: 3px; }
.guide-ledger-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
    padding: 12px 18px; background: var(--bg-soft);
}
.guide-ledger-all { font-size: 0.86rem; font-weight: 500; }

/* ---- FAQ accordion (section 8) ---- */
.guide-faq { display: flex; flex-direction: column; gap: 10px; margin: 1.25em 0 0; }
.guide-faq-item { background: var(--bg-soft); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 18px; }
.guide-faq-q { font-family: var(--font-display); font-weight: 600; color: var(--ink); cursor: pointer; font-size: 0.98rem; }
.guide-faq-a { margin: 10px 0 2px !important; font-size: 0.94rem; color: var(--ink-2); line-height: 1.65; }

/* ---- Responsive (< 1024px) ---- */
@media (max-width: 1024px) {
    .guide-layout { grid-template-columns: minmax(0, 1fr); }
    .guide-sidebar { display: none; }
    .guide-toc--mobile {
        display: block; background: var(--bg-soft); border: 1px solid var(--line);
        border-radius: var(--radius); padding: 16px 20px 4px; margin: 0 0 2em;
    }
}
@media (max-width: 680px) {
    .guide-hero { padding: 36px 0 20px; }
    .guide-ledger-head { display: none; }
    .guide-research-row,
    .guide-ledger.is-expanded .guide-research-row.is-collapsed { grid-template-columns: 1fr; gap: 6px; }
}