/*
 * Book of Shadows site: the styles for its four articles (About, Guide,
 * Terms and Conditions, Privacy Policy), nothing else. Helix Ultimate
 * loads this file itself, after its own stylesheets, from
 * templates/shaper_helixultimate/css/custom.css; it is not part of the
 * template's zip, so a Helix update leaves it alone.
 *
 * Colours are the Book of Shadows' own tokens, so the articles follow
 * the site's theme in light and dark and keep the contrast the build
 * measures. The classes, for the article HTML:
 *
 *   bos-article  wraps the whole article: body text at the Book of
 *                Shadows reading size (18px), headings in its type
 *   bos-lead     the opening paragraph, a step larger
 *   bos-updated  the "Last updated" line, quieter
 *   bos-toc      an "On this page" list of links to the sections
 *   bos-note     a boxed note: a caution or something not to miss
 *
 * Author: Nikita
 * Created: 2026-10-15
 */

.bos-article {
    font-family: var(--ncbos-font-body);
    font-size: var(--ncbos-fs-base, 1.125rem);
    line-height: 1.6;
    color: var(--ncbos-ink);
}

.bos-article h2 {
    font-family: var(--ncbos-font-display);
    font-size: var(--ncbos-fs-lg, 1.75rem);
    font-weight: 700;
    line-height: 1.25;
    color: var(--ncbos-ink);
    margin: var(--ncbos-sp-7, 3rem) 0 var(--ncbos-sp-3, 0.75rem);
}

.bos-article h2:first-child {
    margin-top: 0;
}

.bos-article ul,
.bos-article ol {
    padding-left: 1.4em;
}

.bos-article li + li {
    margin-top: var(--ncbos-sp-2, 0.5rem);
}

.bos-article a {
    color: var(--ncbos-accent);
}

.bos-article a:hover,
.bos-article a:focus {
    color: var(--ncbos-accent-hover);
}

.bos-lead {
    font-size: var(--ncbos-fs-md, 1.375rem);
    line-height: 1.5;
}

.bos-updated {
    font-size: var(--ncbos-fs-sm, 1rem);
    color: var(--ncbos-muted);
}

.bos-toc {
    background: var(--ncbos-panel);
    border: 1px solid var(--ncbos-border);
    border-radius: var(--ncbos-r-lg, 12px);
    padding: var(--ncbos-sp-4, 1rem) var(--ncbos-sp-5, 1.5rem);
    margin: var(--ncbos-sp-5, 1.5rem) 0;
}

.bos-toc p {
    font-family: var(--ncbos-font-display);
    font-size: var(--ncbos-fs-md, 1.375rem);
    font-weight: 700;
    margin: 0 0 var(--ncbos-sp-2, 0.5rem);
}

.bos-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
    columns: 2 16rem;
    column-gap: var(--ncbos-sp-6, 2rem);
}

.bos-toc li + li {
    margin-top: var(--ncbos-sp-1, 0.25rem);
}

.bos-note {
    background: var(--ncbos-panel-alt);
    color: var(--ncbos-ink);
    border-left: 4px solid var(--ncbos-caution);
    border-radius: var(--ncbos-r-md, 8px);
    padding: var(--ncbos-sp-4, 1rem) var(--ncbos-sp-5, 1.5rem);
    margin: var(--ncbos-sp-4, 1rem) 0;
}

.bos-note > :last-child {
    margin-bottom: 0;
}