/*
 * Knowledgebase additions.
 *
 * Only what WordPress renders that the static site has no equivalent for. Every
 * value comes from the tokens already defined in site.css, so this file never
 * introduces a colour, radius or type size of its own.
 */

/* --- layout -------------------------------------------------------------- */

.kb-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    gap: 48px;
    align-items: start;
}

@media (max-width: 900px) {
    .kb-shell { grid-template-columns: 1fr; gap: 28px; }
}

/* --- sidebar ------------------------------------------------------------- */

.kb-side {
    position: sticky;
    /* Clears the site's fixed header. */
    top: 96px;
}

@media (max-width: 900px) {
    .kb-side { position: static; }
}

.kb-side__title {
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet);
    margin: 0 0 12px;
}

.kb-side__list { list-style: none; margin: 0 0 28px; padding: 0; }

.kb-side__list a {
    display: block;
    padding: 7px 0;
    font-size: 0.93rem;
    color: var(--text-body);
    border-bottom: 1px solid var(--border-light);
}

.kb-side__list a:hover { color: var(--violet); text-decoration: none; }
.kb-side__list .is-current > a { color: var(--violet); font-weight: 600; }

/* --- article ------------------------------------------------------------- */

.kb-article { max-width: 72ch; }

.kb-article h2 { font-size: 1.5rem; margin-top: 1.8em; }
.kb-article h3 { font-size: 1.15rem; margin-top: 1.6em; }

.kb-article p,
.kb-article li { font-size: 1rem; line-height: 1.75; }

.kb-article ul,
.kb-article ol { padding-left: 1.3em; margin-bottom: 1.2em; }

.kb-article li { margin-bottom: 0.45em; }

.kb-article img,
.kb-article iframe {
    max-width: 100%;
    height: auto;
    border-radius: var(--r-sm);
}

.kb-article blockquote {
    margin: 1.4em 0;
    padding: 2px 0 2px 18px;
    border-left: 3px solid var(--violet);
    color: var(--text-body);
}

/* Code is the reason a documentation site exists; it gets real treatment
   rather than the browser default. */
.kb-article code {
    font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
    font-size: 0.88em;
    background: var(--slate-light);
    border: 1px solid var(--border-light);
    border-radius: 6px;
    padding: 1px 6px;
}

.kb-article pre {
    background: var(--dark);
    color: var(--text-light);
    border-radius: var(--r-sm);
    padding: 18px 20px;
    overflow-x: auto;
    font-size: 0.86rem;
    line-height: 1.6;
}

.kb-article pre code {
    background: none;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
}

.kb-article table {
    width: 100%;
    border-collapse: collapse;
    margin: 1.4em 0;
    font-size: 0.93rem;
}

.kb-article th,
.kb-article td {
    text-align: left;
    padding: 10px 12px;
    border-bottom: 1px solid var(--border-light);
}

.kb-article th { font-family: var(--font-display); font-weight: 600; color: var(--text-heading); }

/* --- meta and lists ------------------------------------------------------ */

.kb-meta {
    font-size: 0.84rem;
    color: var(--text-muted);
    margin-bottom: 26px;
}

.kb-list { list-style: none; margin: 0; padding: 0; }

.kb-list__item { padding: 22px 0; border-bottom: 1px solid var(--border-light); }
.kb-list__item:first-child { padding-top: 0; }

.kb-list__item h2 { font-size: 1.2rem; margin: 0 0 6px; }
.kb-list__item p { margin: 0; color: var(--text-body); font-size: 0.95rem; }

/* --- search -------------------------------------------------------------- */

.kb-search { display: flex; gap: 10px; margin-bottom: 30px; }

.kb-search input[type="search"] {
    flex: 1;
    min-width: 0;
    padding: 13px 16px;
    font: inherit;
    color: var(--text-heading);
    background: var(--white);
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
}

.kb-search input[type="search"]:focus-visible {
    outline: 3px solid var(--cyan);
    outline-offset: 2px;
    border-color: var(--violet);
}

/* --- pagination ---------------------------------------------------------- */

.kb-pagination { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 32px; }

.kb-pagination .page-numbers {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid var(--border-light);
    border-radius: var(--r-sm);
    font-size: 0.9rem;
    color: var(--text-body);
}

.kb-pagination .page-numbers.current {
    background: var(--violet);
    border-color: var(--violet);
    color: #fff;
}

/* --- figures and infographics -------------------------------------------- */

/*
 * Diagrams are inline SVG, not images.
 *
 * A raster screenshot of a diagram is heavier, blurs on a retina screen, and
 * carries no text a search engine or screen reader can read. An SVG drawn from
 * the site's own tokens scales, themes and is searchable, and it does not need
 * hosting or an alt-text apology. It is also the honest option here: these are
 * concept diagrams, and a stock photograph of a laptop would illustrate nothing.
 */
.kb-figure {
    margin: 2em 0;
    padding: 24px;
    background: var(--slate-light);
    border: 1px solid var(--border-light);
    border-radius: var(--r-card);
}

.kb-figure svg { display: block; width: 100%; height: auto; }

.kb-figure figcaption {
    margin-top: 14px;
    font-size: 0.84rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* Text inside the diagrams, so every label inherits the page's type rather
   than whatever the SVG happens to default to. */
.kb-figure text {
    font-family: var(--font-body);
    fill: var(--text-body);
}

.kb-figure .fig-title { font-family: var(--font-display); font-weight: 700; fill: var(--text-heading); }
.kb-figure .fig-accent { fill: var(--violet); }
.kb-figure .fig-muted  { fill: var(--text-muted); }

/* --- key-points callout -------------------------------------------------- */

.kb-takeaway {
    margin: 1.8em 0;
    padding: 20px 24px;
    background: var(--white);
    border: 1px solid var(--border-light);
    border-left: 3px solid var(--violet);
    border-radius: var(--r-sm);
}

.kb-takeaway p:first-child { margin-top: 0; }
.kb-takeaway p:last-child,
.kb-takeaway ul:last-child { margin-bottom: 0; }

.kb-takeaway__label {
    display: block;
    font-family: var(--font-display);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--violet);
    margin-bottom: 8px;
}

/* --- FAQ ----------------------------------------------------------------- */

.kb-faq { margin: 2.2em 0 0; }

.kb-faq details {
    border-bottom: 1px solid var(--border-light);
    padding: 4px 0;
}

.kb-faq summary {
    cursor: pointer;
    padding: 14px 0;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-heading);
    /* The default triangle sits oddly against a display face. */
    list-style: none;
}

.kb-faq summary::-webkit-details-marker { display: none; }

.kb-faq summary::after {
    content: '+';
    float: right;
    color: var(--violet);
    font-weight: 700;
}

.kb-faq details[open] summary::after { content: '\2212'; }

.kb-faq details > *:not(summary) { padding-bottom: 14px; }

/* --- post meta ----------------------------------------------------------- */

.kb-cats { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }

.kb-cats a {
    display: inline-block;
    padding: 4px 12px;
    border-radius: var(--r-pill);
    background: var(--slate-light);
    border: 1px solid var(--border-light);
    font-family: var(--font-display);
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--violet);
}

.kb-cats a:hover { text-decoration: none; border-color: var(--violet); }