/* Ascora Knowledge Base - public /kb experience.
   Self-contained so it does not depend on the blog's bespoke styles. Accent follows the site
   primary colour via var(--primary-color) with an Ascora-orange fallback. */

.kb {
    --kb-accent: var(--primary-color, #f26722);
    --kb-ink: #10151c;
    --kb-ink-soft: #44505f;
    --kb-muted: #7a8696;
    --kb-line: #e6ebf1;
    --kb-paper: #ffffff;
    --kb-cream: #f5f8fc;
    --kb-radius: 14px;
    --kb-shadow: 0 1px 2px rgba(16,21,28,.04), 0 8px 24px rgba(16,21,28,.06);
    /* Height of the sticky site header (_Menu_2025), so sticky rails clear it instead of tucking under. */
    --kb-header-offset: 80px;
    color: var(--kb-ink);
    font-family: 'Geist', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
}

.kb * { box-sizing: border-box; }
.kb a { color: var(--kb-accent); text-decoration: none; }
.kb a:hover { text-decoration: underline; }
.kb-wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* Hero + search ----------------------------------------------------------------------------- */
.kb-hero {
    background: linear-gradient(180deg, var(--kb-cream) 0%, #ffffff 100%);
    border-bottom: 1px solid var(--kb-line);
    padding: 64px 0 56px;
    text-align: center;
}
.kb-hero h1 {
    font-family: 'Bricolage Grotesque', 'Geist', sans-serif;
    font-size: clamp(30px, 4vw, 46px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 10px;
}
.kb-hero p { color: var(--kb-ink-soft); font-size: 18px; margin: 0 auto 28px; max-width: 620px; }

.kb-search { position: relative; max-width: 640px; margin: 0 auto; }
.kb-search input {
    width: 100%;
    height: 58px;
    padding: 0 20px 0 52px;
    font-size: 17px;
    border: 1px solid var(--kb-line);
    border-radius: 999px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237a8696' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'/%3E%3C/svg%3E") 20px center no-repeat;
    box-shadow: var(--kb-shadow);
    outline: none;
}
.kb-search input:focus { border-color: var(--kb-accent); box-shadow: 0 0 0 4px rgba(242,103,34,.12); }

.kb-typeahead {
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: #fff;
    border: 1px solid var(--kb-line);
    border-radius: 14px;
    box-shadow: var(--kb-shadow);
    overflow: hidden;
    text-align: left;
    z-index: 30;
    display: none;
}
.kb-typeahead.is-open { display: block; }
.kb-typeahead a { display: block; padding: 12px 18px; color: var(--kb-ink); border-bottom: 1px solid var(--kb-line); }
.kb-typeahead a:last-child { border-bottom: 0; }
.kb-typeahead a.is-active, .kb-typeahead a:hover { background: var(--kb-cream); text-decoration: none; }
.kb-typeahead .kb-ta-cat { display: block; font-size: 12px; color: var(--kb-muted); }
.kb-typeahead .kb-ta-all { font-weight: 600; color: var(--kb-accent); }

/* Collection + category cards --------------------------------------------------------------- */
.kb-section { padding: 48px 0; }
.kb-section h2 { font-family: 'Bricolage Grotesque','Geist',sans-serif; font-size: 24px; margin: 0 0 20px; letter-spacing: -0.01em; }

.kb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }
.kb-card {
    display: block;
    background: var(--kb-paper);
    border: 1px solid var(--kb-line);
    border-radius: var(--kb-radius);
    padding: 24px;
    transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
    color: var(--kb-ink);
}
.kb-card:hover { transform: translateY(-2px); box-shadow: var(--kb-shadow); border-color: #d6deea; text-decoration: none; }
.kb-card .kb-card-icon {
    width: 44px; height: 44px; border-radius: 11px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(242,103,34,.1); color: var(--kb-accent);
    font-size: 20px; margin-bottom: 14px;
}
.kb-card h3 { font-size: 18px; margin: 0 0 6px; }
.kb-card p { color: var(--kb-ink-soft); font-size: 14px; margin: 0 0 12px; }
.kb-card .kb-card-meta { font-size: 13px; color: var(--kb-muted); }
.kb-card ul { margin: 12px 0 0; padding: 0; list-style: none; }
.kb-card ul li { padding: 6px 0; border-top: 1px solid var(--kb-line); font-size: 14px; }
.kb-card ul li a { color: var(--kb-ink-soft); }

/* Breadcrumbs ------------------------------------------------------------------------------- */
.kb-breadcrumbs { font-size: 13px; color: var(--kb-muted); padding: 22px 0 0; }
.kb-breadcrumbs a { color: var(--kb-muted); }
.kb-breadcrumbs a:hover { color: var(--kb-accent); }
.kb-breadcrumbs span { margin: 0 6px; }

/* Article layout ---------------------------------------------------------------------------- */
.kb-article { display: grid; grid-template-columns: 1fr 240px; gap: 48px; padding: 28px 0 64px; align-items: start; }
.kb-article-main { min-width: 0; }
.kb-article h1 { font-family: 'Bricolage Grotesque','Geist',sans-serif; font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; margin: 10px 0 14px; }
.kb-meta-row { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; color: var(--kb-muted); font-size: 14px; margin-bottom: 28px; }
.kb-meta-row .kb-pill { background: var(--kb-cream); color: var(--kb-ink-soft); padding: 4px 12px; border-radius: 999px; font-size: 13px; }

/* Prose body */
.kb-prose { font-size: 17px; color: var(--kb-ink-soft); }
.kb-prose h2 { font-family: 'Bricolage Grotesque','Geist',sans-serif; font-size: 26px; color: var(--kb-ink); margin: 40px 0 14px; scroll-margin-top: 90px; letter-spacing: -0.01em; }
.kb-prose h3 { font-size: 20px; color: var(--kb-ink); margin: 30px 0 10px; scroll-margin-top: 90px; }
.kb-prose p { margin: 0 0 18px; }
.kb-prose ul, .kb-prose ol { margin: 0 0 18px; padding-left: 24px; }
.kb-prose li { margin: 6px 0; }
.kb-prose img { max-width: 100%; height: auto; border-radius: 10px; border: 1px solid var(--kb-line); margin: 18px 0; cursor: zoom-in; }
.kb-prose a { text-decoration: underline; }
.kb-prose code { background: var(--kb-cream); padding: 2px 6px; border-radius: 6px; font-family: 'JetBrains Mono', monospace; font-size: .9em; }
.kb-prose pre { background: #0e1116; color: #e6ebf1; padding: 18px; border-radius: 10px; overflow-x: auto; }
.kb-prose pre code { background: transparent; color: inherit; padding: 0; }
.kb-prose blockquote { margin: 18px 0; padding: 6px 18px; border-left: 3px solid var(--kb-accent); color: var(--kb-ink); background: var(--kb-cream); border-radius: 0 8px 8px 0; }
.kb-prose table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: 15px; }
.kb-prose th, .kb-prose td { border: 1px solid var(--kb-line); padding: 10px 12px; text-align: left; }
.kb-prose th { background: var(--kb-cream); }
.kb-prose iframe { max-width: 100%; border: 0; border-radius: 10px; margin: 18px 0; }

/* Callouts authored via .kb-callout classes */
.kb-prose .kb-callout { border-radius: 10px; padding: 14px 18px; margin: 18px 0; border: 1px solid var(--kb-line); background: var(--kb-cream); }
.kb-prose .kb-callout--tip { border-color: #bfe3c9; background: #effaf1; }
.kb-prose .kb-callout--warning { border-color: #f3d9a6; background: #fdf6e6; }
.kb-prose .kb-callout--danger { border-color: #f1c0c0; background: #fdeeee; }

/* Table of contents */
.kb-toc { position: sticky; top: var(--kb-header-offset); align-self: start; font-size: 14px; }
.kb-toc-title { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; color: var(--kb-muted); margin: 0 0 10px; }
.kb-toc ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--kb-line); }
.kb-toc li a { display: block; padding: 5px 0 5px 14px; margin-left: -2px; color: var(--kb-ink-soft); border-left: 2px solid transparent; }
.kb-toc li.kb-toc-h3 a { padding-left: 26px; font-size: 13px; }
.kb-toc li a.is-active { color: var(--kb-accent); border-left-color: var(--kb-accent); font-weight: 500; }

/* Feedback widget */
.kb-feedback { margin: 48px 0 0; padding: 26px; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); background: var(--kb-cream); text-align: center; }
.kb-feedback h4 { margin: 0 0 14px; font-size: 17px; }
.kb-feedback .kb-fb-btns { display: inline-flex; gap: 12px; }
.kb-feedback button {
    border: 1px solid var(--kb-line); background: #fff; border-radius: 999px;
    padding: 9px 22px; font-size: 15px; cursor: pointer; color: var(--kb-ink); transition: all .15s ease;
}
.kb-feedback button:hover { border-color: var(--kb-accent); color: var(--kb-accent); }
.kb-feedback textarea { width: 100%; max-width: 460px; margin: 14px auto 0; display: block; border: 1px solid var(--kb-line); border-radius: 10px; padding: 12px; font: inherit; }
.kb-feedback .kb-fb-send { background: var(--kb-accent); color: #fff; border-color: var(--kb-accent); margin-top: 12px; }
.kb-feedback .kb-fb-thanks { color: #1f9254; font-weight: 600; }

/* Related + prev/next + deflection */
.kb-related { margin-top: 48px; }
.kb-related h4 { font-size: 18px; margin: 0 0 16px; }
.kb-prevnext { display: flex; justify-content: space-between; gap: 16px; margin-top: 36px; }
.kb-prevnext a { flex: 1; border: 1px solid var(--kb-line); border-radius: var(--kb-radius); padding: 16px; color: var(--kb-ink); }
.kb-prevnext a:hover { border-color: var(--kb-accent); text-decoration: none; }
.kb-prevnext .kb-pn-label { font-size: 12px; color: var(--kb-muted); display: block; }
.kb-prevnext .kb-pn-next { text-align: right; }

.kb-deflect { margin-top: 36px; padding: 24px; border: 1px dashed var(--kb-line); border-radius: var(--kb-radius); text-align: center; color: var(--kb-ink-soft); }
.kb-deflect a.kb-btn { display: inline-block; margin-top: 10px; background: var(--kb-accent); color: #fff; padding: 10px 22px; border-radius: 999px; }
.kb-deflect a.kb-btn:hover { text-decoration: none; opacity: .92; }

/* Search results */
.kb-results { padding: 28px 0 64px; display: grid; grid-template-columns: 220px 1fr; gap: 40px; }
.kb-facets { font-size: 14px; }
.kb-facets h4 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--kb-muted); margin: 0 0 12px; }
.kb-facets a { display: flex; justify-content: space-between; padding: 6px 0; color: var(--kb-ink-soft); }
.kb-result { padding: 18px 0; border-bottom: 1px solid var(--kb-line); }
.kb-result h3 { margin: 0 0 6px; font-size: 19px; }
.kb-result .kb-result-cat { font-size: 12px; color: var(--kb-muted); }
.kb-result p { margin: 6px 0 0; color: var(--kb-ink-soft); font-size: 15px; }
.kb-result mark { background: #fff2c7; padding: 0 2px; }
.kb-empty { text-align: center; padding: 40px 0; color: var(--kb-ink-soft); }

/* Lightbox */
.kb-lightbox { position: fixed; inset: 0; background: rgba(10,14,20,.86); display: none; align-items: center; justify-content: center; z-index: 9999; cursor: zoom-out; }
.kb-lightbox.is-open { display: flex; }
.kb-lightbox img { max-width: 92vw; max-height: 92vh; border-radius: 10px; }

/* Notion-imported content -------------------------------------------------------------------- */
/* Reset the browser's default 40px figure indent so imported figures align with the prose. */
.kb-prose figure { margin: 18px 0; }
.kb-prose figure img { margin: 0; }

/* Child-page / "link to page" navigation blocks: clean, spaced, full-width block links. */
.kb-prose .link-to-page { margin: 8px 0; }
.kb-prose .link-to-page a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 11px 14px;
    border: 1px solid var(--kb-line);
    border-radius: 10px;
    background: #fff;
    color: var(--kb-ink);
    text-decoration: none;
    font-weight: 500;
    transition: border-color .15s ease, background .15s ease;
}
.kb-prose .link-to-page a:hover { border-color: var(--kb-accent); background: var(--kb-cream); text-decoration: none; }

/* Bookmark blocks (rich link previews). None in the current export, but handled defensively. */
.kb-prose .bookmark, .kb-prose a.bookmark {
    display: block;
    border: 1px solid var(--kb-line);
    border-radius: 10px;
    padding: 14px 16px;
    margin: 14px 0;
    color: var(--kb-ink);
    text-decoration: none;
}
.kb-prose .bookmark:hover, .kb-prose a.bookmark:hover { border-color: var(--kb-accent); }
.kb-prose .bookmark-title { font-weight: 600; display: block; }
.kb-prose .bookmark-description { color: var(--kb-muted); font-size: 14px; }

/* Notion multi-column layout. Notion wraps each .column in a display:contents div (its display is
   dropped on import, so that wrapper becomes the flex item) and gives the columns inline percentage
   widths sized for Notion's wide canvas. Even out whichever element ends up the flex item and drop the
   inline widths so the columns do not collapse to one word per line in the narrower article body. */
.kb-prose .column-list { display: flex; flex-wrap: wrap; gap: 24px; margin: 18px 0; }
.kb-prose .column-list > * { flex: 1 1 220px; min-width: 0; }
.kb-prose .column { flex: 1 1 220px; min-width: 0; width: auto !important; }

/* Anchor jumps (the on-this-page TOC and recovered in-page links) land below the sticky site header. */
.kb-prose h1, .kb-prose h2, .kb-prose h3, .kb-prose h4 { scroll-margin-top: calc(var(--kb-header-offset) + 16px); }
/* In-page "jump to section" links recovered from Notion's flattened heading links. */
.kb-prose a.kb-jumplink { font-weight: 600; }

/* Left navigation tree -------------------------------------------------------------------------
   An optional sidebar listing the whole collection > category > article tree. The page wraps its
   content in .kb.kb-has-nav so the sidebar and the existing centred .kb-wrap sit side by side. */
.kb-has-nav { display: flex; align-items: flex-start; }
.kb-main-col { flex: 1 1 auto; min-width: 0; }

.kb-nav {
    flex: 0 0 282px; width: 282px; align-self: stretch;
    position: sticky; top: var(--kb-header-offset); max-height: calc(100vh - var(--kb-header-offset) - 16px); overflow-y: auto;
    padding: 16px 10px 28px; border-right: 1px solid var(--kb-line); background: var(--kb-paper);
}
.kb-nav-head { display: flex; align-items: center; justify-content: space-between; padding: 0 6px 10px; margin-bottom: 8px; border-bottom: 1px solid var(--kb-line); }
.kb-nav-title { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--kb-muted); }

.kb-nav-tree ul { list-style: none; margin: 0; padding: 0; }
.kb-nav-children { display: none; padding-left: 13px; }
.kb-nav-node.is-open > .kb-nav-children { display: block; }

.kb-nav-row { display: flex; align-items: center; gap: 2px; border-radius: 8px; padding: 1px 4px; }
.kb-nav-row:hover { background: var(--kb-cream); }
.kb-nav-row.is-current { background: var(--kb-cream); }

.kb-nav-link { display: block; flex: 1 1 auto; min-width: 0; color: var(--kb-ink-soft); font-size: 13.5px; line-height: 1.35; padding: 5px 4px; text-decoration: none; }
.kb-nav-link:hover { text-decoration: none; color: var(--kb-ink); }
.kb-nav-collection-link { color: var(--kb-ink); font-weight: 600; font-size: 14px; }
.kb-nav-row.is-current > .kb-nav-link { color: var(--kb-accent); font-weight: 600; }

.kb-nav-spacer { flex: 0 0 16px; width: 16px; }
.kb-nav-toggle { flex: 0 0 16px; width: 16px; height: 22px; padding: 0; border: 0; background: transparent; cursor: pointer; position: relative; }
.kb-nav-toggle::before {
    content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px;
    border-right: 2px solid var(--kb-muted); border-bottom: 2px solid var(--kb-muted);
    transform: rotate(-45deg); transition: transform .15s ease;
}
.kb-nav-node.is-open > .kb-nav-row > .kb-nav-toggle::before { transform: rotate(45deg); }

.kb-nav-hide { width: 24px; height: 24px; border: 0; border-radius: 6px; background: transparent; cursor: pointer; position: relative; }
.kb-nav-hide:hover { background: var(--kb-cream); }
.kb-nav-hide::before { content: ""; position: absolute; left: 9px; top: 8px; width: 7px; height: 7px; border-left: 2px solid var(--kb-muted); border-bottom: 2px solid var(--kb-muted); transform: rotate(45deg); }

.kb-nav-show {
    display: none; flex: 0 0 auto; align-items: center; gap: 8px; align-self: flex-start;
    position: sticky; top: var(--kb-header-offset); margin: 14px 0 0 14px; padding: 8px 14px;
    border: 1px solid var(--kb-line); border-radius: 8px; background: var(--kb-paper);
    color: var(--kb-ink-soft); font: inherit; font-size: 13px; cursor: pointer;
}
.kb-nav-show:hover { background: var(--kb-cream); }
.kb-nav-show-bars { display: inline-block; width: 14px; height: 2px; background: currentColor; box-shadow: 0 4px 0 currentColor, 0 8px 0 currentColor; position: relative; top: -4px; }

.kb-has-nav.kb-nav-collapsed > .kb-nav { display: none; }
.kb-has-nav.kb-nav-collapsed > .kb-nav-show { display: inline-flex; }

@media (max-width: 900px) {
    .kb-article { grid-template-columns: 1fr; }
    .kb-toc { display: none; }
    .kb-results { grid-template-columns: 1fr; }
    .kb-facets { order: 2; }
}

@media (max-width: 700px) {
    .kb-prose .column-list { flex-direction: column; gap: 8px; }
    .kb-prose .column-list > *, .kb-prose .column { flex: 0 0 auto; }
}

/* The dimmed backdrop is only used by the mobile nav drawer; hidden otherwise. */
.kb-nav-backdrop { display: none; }

/* Below this width the nav becomes an off-canvas drawer opened by the "Contents" button. */
@media (max-width: 1000px) {
    .kb-has-nav { display: block; }
    .kb-main-col { width: 100%; }
    .kb-nav {
        position: fixed; top: 0; left: 0; bottom: 0; height: 100%;
        width: 300px; max-width: 86vw; max-height: none; z-index: 1200;
        transform: translateX(-100%); transition: transform .2s ease;
    }
    .kb-has-nav.kb-nav-collapsed > .kb-nav { display: block; }
    .kb-has-nav.kb-nav-mobile-open > .kb-nav { transform: translateX(0); box-shadow: 0 18px 60px rgba(16, 21, 28, .35); }
    .kb-nav-backdrop { position: fixed; inset: 0; z-index: 1100; background: rgba(16, 21, 28, .45); }
    .kb-has-nav.kb-nav-mobile-open > .kb-nav-backdrop { display: block; }
    .kb-has-nav > .kb-nav-show,
    .kb-has-nav.kb-nav-collapsed > .kb-nav-show { display: inline-flex; position: static; margin: 12px 0 0; }
}