/**
 * @package     Gystiq.Template.CassiopeiaGystiq
 * @copyright   (C) 2026 GYSTiq
 * @license     GNU General Public License version 2 or later
 *
 * Command Center look (1.3.0): the finishing touches from the CCMKE demo, as
 * opt-in style params. Every rule sits under a body class that index.php adds
 * only when its param is on (helper/Look.php), so a style that never sets them
 * renders exactly as 1.2.x. No color literals: brand variables only
 * (tests/KitContractTest.php enforces both).
 */

/* ============================ Tinted page background ============================
   The canvas takes a trace of the brand; cards and panels keep --body-bg, so
   they lift off it. --body-bg itself is not changed, because Bootstrap paints
   cards, tables and inputs with it. */
body.gystiq-canvas {
    background-color: color-mix(in srgb, var(--cassiopeia-color-primary) 5%, var(--body-bg));
}
/* In dark mode a brand trace barely shows, so the canvas goes a step darker than the cards instead. */
html[data-bs-theme="dark"] body.gystiq-canvas {
    background-color: color-mix(in srgb, var(--black) 22%, var(--body-bg));
}

/* ============================ Accent rule under the header ============================ */
body.gystiq-accent-rule .container-header {
    border-bottom: 4px solid var(--gystiq-accent, var(--primary-text-emphasis));
}

/* ============================ Accent pill for the active menu item ============================
   Top-level items of dropdown (metismenu) menus, wherever the module sits
   (header, top-a, below-top). Sidebar menus keep their own styling. */
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li > :is(a, button) {
    padding: .45rem .8rem;
    border-radius: var(--border-radius);
    text-decoration: none;
}
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li > :is(a, button):hover {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
    text-decoration: none;
}
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li.active > :is(a, button) {
    color: var(--gystiq-accent-text, var(--white));
    background-color: var(--gystiq-accent, var(--primary));
    font-weight: 600;
}
/* 1.3.2: an item with a dropdown is a link plus an arrow button. Painted
   separately they read as two pills with a seam, so the inner corners are
   squared and the arrow sits close, and hovering either part tints both (the
   active item keeps its accent). */
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li:has(> button) > a {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
    padding-inline-end: .3rem;
}
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li:has(> a) > button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
    padding-inline-start: 0;
    align-self: stretch;
    height: auto;
}
body.gystiq-nav-pill :is(.container-header, .container-topbar, .container-below-top, .container-top-a, .container-nav) .metismenu.mod-menu > li:not(.active):has(> button):hover > :is(a, button) {
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}
/* Cassiopeia draws an underline bar under header menu items; the pill replaces it. */
body.gystiq-nav-pill .container-header .metismenu > li > a::after,
body.gystiq-nav-pill .container-header .metismenu > li > button::before {
    display: none;
}

/* ============================ Display font for page titles ============================
   Page titles only (the one h1 in <main>). Card and section headings keep the
   heading font, which is what keeps a display face from getting busy. */
body.gystiq-display-font main h1,
body.gystiq-display-font .gystiq-display {
    font-family: var(--gystiq-font-display);
    font-weight: 700;
    letter-spacing: -.01em;
}

/* ============================ Sticky header ============================
   Cassiopeia's own Sticky Header param; a soft shadow so content visibly slides beneath it. */
body.gystiq-sticky .container-header {
    box-shadow: var(--box-shadow-sm);
}
/* Below lg a header menu stacks vertically, so a pinned header would cover half
   the screen. Cassiopeia's .sticky-top pins at every width; pin on wide screens only. */
@media (max-width: 991.98px) {
    body.gystiq-sticky .container-header.sticky-top {
        position: relative;
    }
}