/*
 * guide.css — "AI Basics for Business" free guide (ai-basics.php only).
 *
 * Loaded ONLY by ai-basics.php, on top of tokens.css + site.css — kept in
 * its own file rather than folded into site.css because this layout
 * (sidebar + lesson content) is unique to this one page and would just
 * be dead weight on every other page's stylesheet. Every color below
 * references the same tokens.css variables as the rest of the site —
 * no new hex values, no gradients, no heavy shadows.
 */

.guide-page-header { padding-bottom: 24px; }

/* Matches .page-header h1 (site.css) exactly. Used on individual lesson
   pages, where the lesson's own title (see .guide-lesson-header h1
   below) is the page's real <h1> instead — this keeps the "AI Basics
   for Business" wrapper title visually identical while avoiding two
   <h1>s on the same page (ai-basics.php sets the tag conditionally). */
.guide-hub-title {
    font-size: clamp(1.8rem, 3.4vw, 2.6rem);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
    font-weight: 700;
    color: var(--text-primary);
}

/* ------------------------------------------------------------- shell --- */
.guide-shell {
    display: grid;
    grid-template-columns: 240px 1fr;
    gap: 48px;
    align-items: start;
    padding-bottom: 80px;
}
@media (max-width: 900px) {
    .guide-shell { grid-template-columns: 1fr; gap: 20px; }
}
@media (max-width: 640px) {
    /* Extra clearance below the lesson pager/final CTAs so the fixed
       "Ask a question" launcher (52px circle, 14px from the edge on
       small screens — see .chat-widget in site.css) never sits on top
       of them while scrolling near the end of a lesson. */
    .guide-shell { padding-bottom: 120px; }
}

/* ----------------------------------------------------------- sidebar --- */
/* A single <nav aria-label="Guide lessons"> in the markup — not two
   separate elements. On mobile/tablet (base rules below, <900px) it
   starts visually collapsed inside a bordered card, with guide.js
   toggling a `.is-open` class on click of the .guide-sidebar-toggle
   button (see guide.js) so a long lesson list doesn't push content
   down the page. On desktop (900px+ override further down) the toggle
   button is hidden, the nav is always fully visible, and the whole
   block becomes a plain sticky sidebar — it pins at top:136px (clear of
   the two-row ~114px header) and scrolls away naturally with the page
   once the lesson content runs out, rather than getting its own inner
   scrollbar.
   (A native <details>/<summary> was tried first since it needs no JS,
   but modern Chromium keeps a closed <details>'s content inside an
   internal content-visibility:hidden wrapper that CSS on the child
   can't override — forcing it "open" with CSS alone silently failed to
   actually show the content, confirmed by live testing — hence the
   small JS-driven toggle here instead.) */
.guide-sidebar {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-surface);
    padding: 4px 16px;
}
.guide-sidebar-toggle {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    background: none;
    border: none;
    cursor: pointer;
    padding: 14px 0;
    font-weight: 700;
    font-size: 1rem;
    font-family: inherit;
    color: var(--text-primary);
}
.guide-sidebar-toggle-icon { width: 16px; height: 16px; color: var(--text-secondary); transition: transform var(--bpk-transition-fast); }
.guide-sidebar-toggle-icon svg { width: 100%; height: 100%; transform: rotate(90deg); }
.guide-sidebar-toggle[aria-expanded="true"] .guide-sidebar-toggle-icon svg { transform: rotate(-90deg); }
/* Collapsed by default: 0 max-height + hidden overflow, expanded via
   the .is-open class guide.js toggles on click. A generous max-height
   cap (comfortably above the tallest rendered lesson list) rather than
   "none" is what makes the collapse/expand transition animate instead
   of snapping instantly. */
.guide-sidebar nav { max-height: 0; overflow: hidden; transition: max-height 220ms ease; }
.guide-sidebar.is-open nav { max-height: 2200px; padding-bottom: 12px; }

@media (min-width: 901px) {
    .guide-sidebar {
        position: sticky;
        top: 136px;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
    }
    .guide-sidebar-toggle { display: none; }
    .guide-sidebar nav { max-height: none; overflow: visible; }
}

.guide-sidebar-overview {
    margin: 0 0 16px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--border-subtle);
}
.guide-sidebar-overview a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--text-primary);
}
.guide-sidebar-overview a svg { width: 16px; height: 16px; color: var(--bpk-signal-orange); flex: none; }
.guide-sidebar-overview.is-active a { color: var(--link-accent); }

.guide-sidebar-section { margin: 0 0 22px; }
.guide-sidebar-section:last-child { margin-bottom: 0; }
.guide-sidebar-section h4 {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.guide-sidebar-section ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.guide-sidebar-section a {
    display: block;
    padding: 7px 10px;
    margin: 0 -10px;
    border-radius: 7px;
    text-decoration: none;
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.35;
}
.guide-sidebar-section a:hover { background: var(--bg-surface); color: var(--text-primary); }
.guide-sidebar-section a.is-active {
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-weight: 600;
    box-shadow: inset 2px 0 0 var(--bpk-signal-orange);
}

/* -------------------------------------------------------------- main --- */
.guide-main { min-width: 0; }

.guide-callout {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--bg-surface);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 11px 16px;
    margin: 0 0 22px;
}
.guide-callout .icon-badge {
    flex: none;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: var(--bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bpk-deep-navy);
}
[data-theme="dark"] .guide-callout .icon-badge { color: var(--bpk-signal-orange); }
.guide-callout .icon-badge svg { width: 15px; height: 15px; }
/* Label + text read as one compact line, not a stacked block — the
   point is a quick reassurance in passing, not a second heading. */
.guide-callout strong { font-size: 0.86rem; margin-right: 5px; }
.guide-callout p { display: inline; margin: 0; color: var(--text-secondary); font-size: 0.86rem; }

.guide-overview-intro h2 { font-size: 1.35rem; margin: 0 0 12px; }
.guide-overview-intro p { color: var(--text-secondary); margin: 0 0 14px; }

/* ---------------------------------------------------- overview TOC --- */
.guide-toc { margin: 36px 0 0; display: grid; gap: 28px; }
.guide-toc-section-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 10px;
}
.guide-toc-section-head .icon-badge {
    flex: none;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    background: var(--bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bpk-deep-navy);
}
[data-theme="dark"] .guide-toc-section-head .icon-badge { color: var(--bpk-signal-orange); }
.guide-toc-section-head .icon-badge svg { width: 17px; height: 17px; }
.guide-toc-section-head h3 { margin: 0; font-size: 1.02rem; }
.guide-toc-section ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border-subtle); }
.guide-toc-section a {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    text-decoration: none;
    padding: 12px 16px;
    background: var(--bg-page);
    color: var(--text-primary);
    font-weight: 600;
    font-size: 0.94rem;
}
.guide-toc-section li + li a { border-top: 1px solid var(--border-subtle); }
.guide-toc-section a:hover { background: var(--bg-surface); }
.guide-toc-summary { font-weight: 400; color: var(--text-secondary); font-size: 0.85rem; text-align: right; }

.guide-start-cta { margin: 36px 0 0; }

/* ------------------------------------------------------------ lesson --- */
.guide-breadcrumb { margin: 0 0 18px; font-size: 0.85rem; color: var(--text-secondary); }
.guide-breadcrumb a { color: var(--text-secondary); text-decoration: none; }
.guide-breadcrumb a:hover { color: var(--text-primary); text-decoration: underline; }
.guide-breadcrumb span { margin: 0 6px; }

.guide-lesson-header {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin: 0 0 28px;
}
.guide-lesson-header .icon-badge {
    flex: none;
    width: 44px;
    height: 44px;
    border-radius: 11px;
    background: var(--bg-surface-alt);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--bpk-deep-navy);
}
[data-theme="dark"] .guide-lesson-header .icon-badge { color: var(--bpk-signal-orange); }
.guide-lesson-header .icon-badge svg { width: 22px; height: 22px; }
.guide-lesson-progress { display: block; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--link-accent); margin: 0 0 4px; }
.guide-lesson-header h1 { margin: 0; font-size: clamp(1.5rem, 2.8vw, 2rem); letter-spacing: -0.01em; }

.guide-lesson-body { max-width: 720px; }
.guide-lesson-body h3 { font-size: 1.1rem; margin: 30px 0 10px; }
.guide-lesson-body p { color: var(--text-secondary); margin: 0 0 16px; line-height: 1.65; }
.guide-lesson-body ul, .guide-lesson-body ol { color: var(--text-secondary); margin: 0 0 18px; padding-left: 22px; display: grid; gap: 8px; line-height: 1.55; }
.guide-lesson-body ul li::marker { color: var(--bpk-signal-orange); }
.guide-lesson-body strong { color: var(--text-primary); }
/* :not(.btn) keeps this scoped to inline text links — without it, this
   rule also wins over .btn-primary's own intended navy-on-orange text
   color for the "View Sample" button in .guide-final-ctas (nested
   inside .guide-lesson-body), since a more specific link color declared
   later in the cascade beats the button's own color rule. */
.guide-lesson-body a:not(.btn) { color: var(--link-accent); font-weight: 600; }
.guide-steps { counter-reset: guide-step; list-style: none; padding-left: 0; }
.guide-steps li { position: relative; padding-left: 34px; }
.guide-steps li::before {
    counter-increment: guide-step;
    content: counter(guide-step);
    position: absolute;
    left: 0;
    top: -1px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--bg-surface-alt);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ------------------------------------------------------- weak/better --- */
.guide-example {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 0 0 12px;
}
@media (max-width: 640px) { .guide-example { grid-template-columns: 1fr; } }
.guide-example-col {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 16px 18px;
    background: var(--bg-page);
}
.guide-example-weak { border-left: 3px solid var(--negative); }
.guide-example-better { border-left: 3px solid var(--positive); }
.guide-example-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.74rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-secondary);
    margin: 0 0 8px;
}
.guide-example-label svg { width: 14px; height: 14px; }
.guide-example-weak .guide-example-label svg { color: var(--negative); }
.guide-example-better .guide-example-label svg { color: var(--positive); }
.guide-example-col p { margin: 0; color: var(--text-primary); font-size: 0.94rem; line-height: 1.55; font-style: italic; }
.guide-example-why { background: var(--bg-surface); border-radius: 10px; padding: 14px 18px; font-size: 0.92rem; }
.guide-example-why strong { color: var(--text-primary); }

/* ------------------------------------------------------------ use cases --- */
.guide-usecase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0 22px; }
@media (max-width: 900px) { .guide-usecase-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .guide-usecase-grid { grid-template-columns: 1fr; } }
.guide-usecase { border: 1px solid var(--border-subtle); border-radius: 12px; padding: 16px 18px; }
.guide-usecase h3 { display: flex; align-items: center; gap: 8px; font-size: 0.96rem; margin: 0 0 8px; }
.guide-usecase h3 .icon-badge {
    width: 30px; height: 30px; flex: none; border-radius: 8px;
    background: var(--bg-surface-alt); display: flex; align-items: center; justify-content: center;
    color: var(--bpk-deep-navy);
}
[data-theme="dark"] .guide-usecase h3 .icon-badge { color: var(--bpk-signal-orange); }
.guide-usecase h3 .icon-badge svg { width: 15px; height: 15px; }
.guide-usecase p { margin: 0 0 8px; color: var(--text-secondary); font-size: 0.88rem; line-height: 1.5; }
.guide-usecase-example { font-style: italic; font-size: 0.85rem !important; color: var(--text-primary) !important; margin: 0 !important; }

/* ---------------------------------------------------------------- CTAs --- */
.guide-cta-inline { margin: 24px 0 0; }
.guide-cta-inline a { color: var(--link-accent); font-weight: 700; text-decoration: none; }
.guide-cta-inline a:hover { text-decoration: underline; }
.guide-final-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin: 28px 0 0; }

/* ------------------------------------------------------------ pager --- */
.guide-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 44px 0 0;
    padding-top: 28px;
    border-top: 1px solid var(--border-subtle);
    max-width: 720px;
}
@media (max-width: 620px) { .guide-pager { grid-template-columns: 1fr; } }
.guide-pager-link {
    display: block;
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--text-primary);
}
.guide-pager-link:hover { background: var(--bg-surface); }
.guide-pager-next { text-align: right; }
.guide-pager-empty { border: none; }
.guide-pager-dir { display: block; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-secondary); margin: 0 0 4px; }
.guide-pager-title { display: block; font-size: 0.92rem; font-weight: 600; }