/* KB sidebar tree-nav + card-grid styles.
 * Loaded on every /knowledge/* page via base.html. */

/* [2026-06-19] Tagline under the Knowledge Base title. */
.page-header .kb-page-subtitle {
    margin: 6px 0 0;
    font-size: 15px;
    font-style: italic;
    color: #0a2c45;
    opacity: 0.85;
}

/* ---------- Layout with sidebar + main ---------- */

.kb-page-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 30px;
    align-items: start;
    max-width: 1280px;
    margin: 0 auto;
    padding: 30px 20px 60px;
}

@media (max-width: 900px) {
    .kb-page-layout { grid-template-columns: 1fr; }
    .kb-tree-nav { position: static !important; max-height: none !important; }
}

/* [2026-06-19] Section order: Browse by Category, the category tree, Featured,
   then Recently Added. `main` is a flex column so its sections order on
   desktop; the tree (the left sidebar on desktop) only joins the order on
   mobile via display:contents below. */
.kb-page-layout > main { display: flex; flex-direction: column; }
.kb-page-layout main > [data-walkthrough-target="kb-search"] { order: 0; }
.kb-page-layout .kb-vendors-banner { order: 1; }
/* [2026-07-07 review] Same order as the banner so DOM order (banner, then
   link) holds inside the flex column; without this the link's default
   order:0 hoisted it ABOVE the banner and stretched it full-width. */
.kb-page-layout .kb-oldsite-link { order: 1; align-self: flex-start; }
.kb-page-layout [data-walkthrough-target="kb-categories"] { order: 2; }
.kb-page-layout [data-walkthrough-target="kb-featured"] { order: 4; }
.kb-page-layout .kb-recent-section { order: 5; }

/* ============================================
   [2026-06-19] Mobile collapse — pure-CSS (checkbox-hack) accordions so the KB
   home isn't a long scroll on a phone. On DESKTOP (>=901px) every section is
   fully expanded and the toggle header is hidden (the real heading lives in
   the body); on MOBILE (<=900px) each section collapses to a tappable header.
   No JS, no flash, CSP-safe.
   ============================================ */
.kb-acc__cb { position: absolute; opacity: 0; pointer-events: none; }
.kb-acc__head { display: none; }   /* desktop: hidden — body holds the heading */

@media (max-width: 900px) {
    /* Flatten to one ordered column so the tree can sit between Categories and
       Featured (display:contents lets main's children join the page-layout flex
       so every block — search, banner, sections, tree — shares one order). */
    .kb-page-layout { display: flex; flex-direction: column; gap: 14px; }
    .kb-page-layout > main { display: contents; }
    .kb-tree-nav { order: 3; }             /* between Categories (2) and Featured (4) */
    .kb-tree-nav.kb-acc { padding: 0; }   /* let the .kb-acc card styling show */

    .kb-acc {
        border: 1px solid #e6e9ee;
        border-radius: 10px;
        margin-bottom: 12px;
        background: #fff;
        overflow: hidden;
    }
    .kb-acc__head {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        cursor: pointer;
        user-select: none;
        font-family: 'Oswald', sans-serif;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        font-size: 14px;
        color: #0a2c45;
    }
    .kb-acc__chev {
        flex: 0 0 auto;
        margin-left: auto;
        color: #6b7c8c;
        transition: transform 0.2s ease;
    }
    .kb-acc__body {
        display: none;             /* collapsed by default on mobile */
        padding: 0 16px 16px;
    }
    .kb-acc__cb:checked ~ .kb-acc__body { display: block; }
    .kb-acc__cb:checked ~ .kb-acc__head .kb-acc__chev { transform: rotate(90deg); }
    /* Inside the collapsed body, drop the duplicate big heading + the tree's
       own header (the accordion head already names the section). */
    .kb-acc__body .kb-section-heading { display: none; }
    .kb-acc .kb-tree-nav__header { display: none; }
    .kb-acc__body { margin-top: 0; }
}

/* ---------- Tree nav ---------- */

.kb-tree-nav {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 16px 14px;
    /* [2026-06-30] No longer position:sticky. It used to be sticky INSIDE the
       already-sticky .article-sidebar — two nested sticky contexts made the
       BROWSE box float over the TOC/widgets below it while scrolling. The
       sidebar is now the single sticky scroll panel, so this just flows. */
    font-size: 14px;
}

.kb-tree-nav__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 2px solid #fcb040;
}
.kb-tree-nav__header h4 {
    margin: 0;
    font-size: 14px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #1e1e1e;
}
.kb-tree-nav__home { color: #888; text-decoration: none; font-size: 14px; }
.kb-tree-nav__home:hover { color: #fcb040; }

.kb-nav-tree, .kb-nav-children {
    list-style: none;
    padding-left: 0;
    margin: 0;
}
.kb-nav-children {
    padding-left: 14px;
    border-left: 1px solid #f0f0f0;
    margin-left: 6px;
}
.kb-nav-item { margin: 2px 0; }

.kb-nav-details > summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 0;
    user-select: none;
}
.kb-nav-details > summary::-webkit-details-marker { display: none; }
.kb-nav-chevron {
    display: inline-block;
    width: 12px;
    color: #999;
    font-size: 10px;
    transition: transform 0.15s ease;
}
.kb-nav-details[open] > summary > .kb-nav-chevron {
    transform: rotate(90deg);
}

.kb-nav-link {
    color: #333;
    text-decoration: none;
    padding: 3px 6px;
    border-radius: 3px;
    flex: 1;
    line-height: 1.35;
}
.kb-nav-link:hover { background: #fff7e6; color: #d4731a; }
.kb-nav-link--leaf {
    display: block;
    padding-left: 20px;
}
.kb-nav-link--current {
    background: #fff3cd !important;
    color: #1e1e1e !important;
    font-weight: 600;
}

/* ---------- Card grid ---------- */

.kb-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 18px;
    margin: 16px 0 36px;
}

.kb-card {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    padding: 18px 20px;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    min-height: 130px;
}
.kb-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
    border-color: #fcb040;
}

.kb-card--category {
    border-left: 4px solid #fcb040;
}
.kb-card--article {
    border-left: 4px solid #1556a0;
}
.kb-card--subcategory {
    border-left: 4px solid #1f7a4e;
}

.kb-card__icon {
    width: 36px; height: 36px;
    display: flex; align-items: center; justify-content: center;
    background: #fff7e6; border-radius: 6px;
    color: #fcb040; font-size: 16px;
    margin-bottom: 12px;
}
.kb-card--article .kb-card__icon { background: #eaf2fb; color: #1556a0; }
.kb-card--subcategory .kb-card__icon { background: #e8f5ec; color: #1f7a4e; }

.kb-card__title {
    margin: 0 0 6px;
    font-size: 16px;
    font-weight: 600;
    color: #1e1e1e;
    line-height: 1.35;
}
.kb-card__excerpt {
    color: #666;
    font-size: 13px;
    line-height: 1.5;
    margin: 0 0 12px;
    flex: 1;
    /* Truncate long excerpts to 3 lines so cards stay uniform. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.kb-card__meta {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: #888;
    margin-top: auto;
}
.kb-card__meta span { display: inline-flex; align-items: center; gap: 4px; }

/* Card-section heading shared by both index + category pages. */
.kb-section-heading {
    margin: 0 0 14px;
    padding-bottom: 8px;
    border-bottom: 2px solid #fcb040;
    font-size: 18px;
    color: #1e1e1e;
}

/* Breadcrumbs override — match the rest of the page tone. */
.kb-breadcrumbs {
    font-size: 13px;
    color: #888;
    margin: 0 0 6px;
}
.kb-breadcrumbs a {
    color: #d4731a;
    text-decoration: none;
}
.kb-breadcrumbs a:hover { text-decoration: underline; }
.kb-breadcrumbs__sep { margin: 0 6px; color: #ccc; }