/*
 * The Book of Shadows site frame: its tokens (ncbos.css, on :root) on the
 * whole page, so the template's header, menus, page, footer, buttons and
 * Bootstrap's own parts follow the member's theme in light and dark.
 * Loaded on every site page by plg_system_ncbos. The template (Helix
 * Ultimate) colours its frame from a preset stylesheet with plain
 * selectors; each rule here names the same part under html, so it wins
 * without !important. It colours the template's parts and never sets
 * their size, width or padding: those are the site's own, set in Helix
 * Ultimate's layout. Ported from ncworkbench's frame.css, written
 * against Helix Ultimate 2.2.10's preset stylesheet; the bands above the
 * header and the footer use the second panel colour.
 */

:root {
    color-scheme: light dark;
}

html {
    --bs-body-bg: var(--ncbos-canvas);
    --bs-body-color: var(--ncbos-ink);
    --bs-emphasis-color: var(--ncbos-ink);
    --bs-secondary-color: var(--ncbos-muted);
    --bs-tertiary-bg: var(--ncbos-panel-alt);
    --bs-border-color: var(--ncbos-border);
    --bs-link-color: var(--ncbos-accent);
    --bs-link-hover-color: var(--ncbos-accent-hover);
    --bs-link-color-rgb: initial;
    --bs-link-hover-color-rgb: initial;
    --bs-heading-color: var(--ncbos-ink);
    --bs-focus-ring-color: var(--ncbos-focus);
}

html body,
html .sp-preloader,
html .layout-boxed .body-innerwrapper {
    background-color: var(--ncbos-canvas);
    color: var(--ncbos-ink);
}

html a { color: var(--ncbos-accent); }
html a:hover, html a:focus, html a:active { color: var(--ncbos-accent-hover); }
html :focus-visible { outline: 3px solid var(--ncbos-focus); outline-offset: 2px; }
html h1, html h2, html h3, html h4, html h5, html h6 { color: var(--ncbos-ink); }

/* The bar above the header, the header and its menus. */
html #sp-top-bar { background: var(--ncbos-panel-alt); color: var(--ncbos-ink); }
html #sp-top-bar a { color: var(--ncbos-accent); }
html #sp-header { background: var(--ncbos-panel); box-shadow: 0 1px 0 var(--ncbos-border); }
html .sp-megamenu-parent > li > a,
html .sp-megamenu-parent > li > span,
html .sp-megamenu-parent .sp-mega-group > li > a,
html .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { color: var(--ncbos-ink); }
html .sp-megamenu-parent > li:hover > a,
html .sp-megamenu-parent > li.active > a,
html .sp-megamenu-parent > li.active:hover > a,
html .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
html .sp-megamenu-parent .sp-dropdown li.sp-menu-item.active > a { color: var(--ncbos-accent); }
html .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { background: var(--ncbos-panel); color: var(--ncbos-ink); }
html #offcanvas-toggler > .fa, html #offcanvas-toggler > .fas, html #offcanvas-toggler > .far { color: var(--ncbos-ink); }
html #offcanvas-toggler > .fa:hover, html #offcanvas-toggler > .fas:hover, html #offcanvas-toggler > .far:hover { color: var(--ncbos-accent); }
html .burger-icon > span { background-color: var(--ncbos-ink); }
html .offcanvas-menu { background-color: var(--ncbos-panel); color: var(--ncbos-ink); }
html .offcanvas-menu .offcanvas-inner a,
html .offcanvas-menu .offcanvas-inner ul.menu > li a,
html .offcanvas-menu .offcanvas-inner ul.menu > li span,
html .offcanvas-menu .offcanvas-inner ul.menu > li li a { color: var(--ncbos-ink); }
html .offcanvas-menu .offcanvas-inner a:hover,
html .offcanvas-menu .offcanvas-inner ul.menu > li a:hover,
html .offcanvas-menu .offcanvas-inner ul.menu > li span:hover { color: var(--ncbos-accent); }
html ul.social-icons > li a:hover, html #sp-menu ul.social-icons a:hover { color: var(--ncbos-accent); }


/* The title band, modules, pagination, tags. */
html .sp-page-title { background: var(--ncbos-panel-alt); }
html .sp-page-title .sp-page-title-heading, html .sp-page-title .breadcrumb, html .sp-page-title .breadcrumb a { color: var(--ncbos-ink); }
html .sp-module ul > li > a, html .sp-module .latestnews > div > a { color: var(--ncbos-ink); }
html .sp-module ul > li > a:hover, html .sp-module .latestnews > div > a:hover { color: var(--ncbos-accent); }
html .pagination > li > a, html .pagination > li > span { color: var(--ncbos-ink); }
html .pagination > .active > a, html .pagination > .active > span { border-color: var(--ncbos-accent); background-color: var(--ncbos-accent); color: var(--ncbos-on-accent); }
html .tags > li a { background: var(--ncbos-panel-alt); color: var(--ncbos-accent); }
html .tags > li a:hover { background: var(--ncbos-accent); color: var(--ncbos-on-accent); }
html .breadcrumb-item, html .breadcrumb-item + .breadcrumb-item::before { color: var(--ncbos-muted); }
html .breadcrumb-item.active { color: var(--ncbos-ink); }

/* Buttons and fields from Bootstrap and the template. */
html .btn-primary, html .sppb-btn-primary { border-color: var(--ncbos-accent); background-color: var(--ncbos-accent); color: var(--ncbos-on-accent); }
html .btn-primary:hover, html .sppb-btn-primary:hover { border-color: var(--ncbos-accent-hover); background-color: var(--ncbos-accent-hover); color: var(--ncbos-on-accent); }
html .form-control, html .form-select { background-color: var(--ncbos-panel); color: var(--ncbos-ink); border-color: var(--ncbos-field-border); }
html .form-control::placeholder { color: var(--ncbos-muted); }
html .card { background-color: var(--ncbos-panel); color: var(--ncbos-ink); border-color: var(--ncbos-border); }
html .alert { border-color: var(--ncbos-border); background: var(--ncbos-panel); color: var(--ncbos-ink); }

/* The footer and the band above it. */
html #sp-footer, html #sp-bottom { background: var(--ncbos-panel-alt); color: var(--ncbos-ink); }
html #sp-footer a, html #sp-bottom a { color: var(--ncbos-accent); }
html #sp-footer a:hover, html #sp-bottom a:hover { color: var(--ncbos-ink); }

/* The site's type: the Book of Shadows faces on every page. */
html body { font-family: var(--ncbos-font-body); }
html h1, html h2, html h3, html .sp-page-title-heading { font-family: var(--ncbos-font-display); }

/* The mega menu's column titles: the site's ink, set apart from the
   links under them. */
html .sp-megamenu-parent .sp-mega-group > li > a.sp-group-title { color: var(--ncbos-ink); font-weight: 600; letter-spacing: 0.04em; }
html .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner { border: 1px solid var(--ncbos-border); box-shadow: 0 4px 12px var(--ncbos-shadow); }

/* The header as her sites have it: the name left, the menu centred, the
   search and account right (Helix puts the menu right). The menu text at
   the site's small size, readable in its serif. */
html #sp-menu .sp-megamenu-wrapper { flex: 1 1 auto; }
html #sp-menu .sp-megamenu-parent { margin-left: auto; margin-right: auto; }
html .sp-megamenu-parent > li > a,
html .sp-megamenu-parent > li > span,
html .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a { font-size: var(--ncbos-fs-sm); }

/* The bar above the header only when something is put in it. */
html #sp-top-bar:not(:has(.sp-module)) { display: none; }

/* A full-width mega menu is placed against the header row, not the menu
   list (Helix makes the list its positioning box; centred, the list
   would start the panel in the wrong place). */
html #sp-menu .sp-megamenu-parent { position: static; }
html .sp-megamenu-parent > li > .sp-dropdown.sp-menu-full { left: 0; right: 0; margin-left: auto; margin-right: auto; max-width: 100%; }

/* The phone menu: its current page, close button and expand arrows in
   the site's colours (Helix's own are orange, black and faint grey). */
html .offcanvas-menu .offcanvas-inner ul.menu > li.active > a,
html .offcanvas-menu .offcanvas-inner ul.menu > li.current > a,
html .offcanvas-menu .offcanvas-inner ul.menu li.active > a { color: var(--ncbos-accent); }
html .offcanvas-menu .close-offcanvas .burger-icon > span { background-color: var(--ncbos-ink); }
html .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > a > .menu-toggler,
html .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent > .menu-separator > .menu-toggler,
html .offcanvas-menu .offcanvas-inner ul.menu > li.menu-parent .menu-toggler { color: var(--ncbos-ink); }

/* Joomla's own dialog (the quick entry and look-up windows), which
   Helix Ultimate leaves unstyled: the site's colours and corners, its
   title in the site's display face, the page behind dimmed. */
html joomla-dialog dialog { max-width: calc(100vw - 2rem); max-height: calc(100vh - 2rem); padding: 0; border: 1px solid var(--ncbos-border);
    border-radius: var(--ncbos-r-lg); background: var(--ncbos-canvas); color: var(--ncbos-ink); box-shadow: 0 8px 32px var(--ncbos-shadow); overflow: hidden; }
html joomla-dialog dialog::backdrop { background: var(--ncbos-backdrop); }
html .joomla-dialog-container { display: flex; flex-direction: column; height: 100%; }
html .joomla-dialog-header { display: flex; align-items: center; gap: var(--ncbos-sp-3); padding: var(--ncbos-sp-3) var(--ncbos-sp-4);
    border-bottom: 1px solid var(--ncbos-border); background: var(--ncbos-panel); }
html .joomla-dialog-header h3 { margin: 0; flex: 1; font-family: var(--ncbos-font-display); font-size: var(--ncbos-fs-lg); color: var(--ncbos-ink); }
html .joomla-dialog-header .header-icon { color: var(--ncbos-accent); }
/* The close button is Bootstrap's: its X is a background image, kept,
   and turned light on the dark theme. */
html .joomla-dialog-header .btn-close { width: 44px; height: 44px; padding: 0; background-size: 1em; opacity: 0.85; }
html[data-theme="dark"] .joomla-dialog-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .joomla-dialog-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
}
html .joomla-dialog-body { flex: 1; padding: 0; overflow: auto; background: var(--ncbos-canvas); }
html joomla-dialog iframe.iframe-content { display: block; width: 100%; height: 100%; min-height: 70vh; border: 0; background: var(--ncbos-canvas); }

/* Helix draws side-column module boxes and their lines, and the
   related-articles title line, in a fixed light grey (#f3f3f3), and an
   article's info links in a fixed near-black (#252525), whatever the
   theme: in dark the lines glared and the category link vanished (found
   2026-10-15). Its rules use the column ids and load after this file,
   so each is named here with html in front. */
html #sp-left .sp-module,
html #sp-right .sp-module,
html #sp-left .sp-module .sp-module-title,
html #sp-right .sp-module .sp-module-title,
html #sp-left .sp-module ul > li,
html #sp-right .sp-module ul > li,
html .related-article-list-container .related-article-title {
    border-color: var(--ncbos-border);
}

html .article-info > span a,
html .related-article-large .article-information > span a {
    color: var(--ncbos-accent);
}

html .article-info > span a:hover,
html .article-info > span a:focus,
html .related-article-large .article-information > span a:hover,
html .related-article-large .article-information > span a:focus {
    color: var(--ncbos-accent-hover);
}