/* Homage brand treatment for BookStack — mirrors severn-rd's Filament admin
   (app/Providers/Filament/AdminPanelProvider.php, Brand Guideline REV 1/8/2026).
   Palette: Cardinal #C8102E · Black #262626 · Grey #F7F7F7 · Parchment #F9F2E7
   · Cream #FEFBF6. Loaded after layouts.parts.custom-styles, so plain :root
   declarations here win over the setting-driven values by source order; the
   doubled :root matches severn-rd's approach and keeps them winning regardless. */

/* Licensed fonts — same public/fonts/ paths as severn-rd. Until the woff2
   files are dropped in, everything renders in Figtree (loaded in the blade). */
@font-face {
    font-family: "Alte Haas Grotesk";
    src: url("/fonts/alte-haas-grotesk/AlteHaasGroteskRegular.woff2") format("woff2");
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "Alte Haas Grotesk";
    src: url("/fonts/alte-haas-grotesk/AlteHaasGroteskBold.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: "HOMAGE Logo Block";
    src: url("/fonts/homage-logo-block/HomageLogoBlock.woff2") format("woff2");
    font-weight: 700; font-style: normal; font-display: swap;
}

:root:root {
    --homage-cardinal: #C8102E;
    --homage-black: #262626;
    --homage-grey: #F7F7F7;
    --homage-parchment: #F9F2E7;
    --homage-cream: #FEFBF6;

    /* BookStack theme hooks (override Settings > Customization colors) */
    --color-primary: var(--homage-cardinal);
    --color-primary-light: rgba(200, 16, 46, 0.15);
    --color-link: var(--homage-cardinal);

    --font-body: "Alte Haas Grotesk", "Figtree", ui-sans-serif, system-ui,
        -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-heading: "HOMAGE Logo Block", "Alte Haas Grotesk", "Figtree", sans-serif;
}

/* Dark mode: lighter cardinal (severn-rd's primary-400 ramp step) for contrast. */
html.dark-mode:root {
    --color-primary: #D9586D;
    --color-primary-light: rgba(217, 88, 109, 0.15);
    --color-link: #D9586D;
}

/* Black header bar with the cardinal accent rail across the full width of the
   top of the app (severn-rd's .fi-topbar border-top treatment). */
#header.primary-background {
    background-color: var(--homage-black) !important;
    border-top: 3px solid var(--homage-cardinal);
}

/* Warm cream canvas in light mode; leave dark mode to BookStack. */
html:not(.dark-mode) body {
    background-color: var(--homage-cream);
}

/* Compact uppercase section labels, matching severn-rd's sidebar group labels. */
.tri-layout-container h5,
.sidebar h5 {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-body);
}

/* Cardinal accent rail on the active sidebar item (severn-rd's inset-shadow
   trick — box-shadow paints the rail without shifting content like a border). */
.sidebar-page-nav .current-heading,
.book-tree .list-item-page.selected,
.book-tree .list-item-chapter.selected,
.entity-list-item.selected {
    box-shadow: inset 3px 0 0 0 var(--homage-cardinal);
}

/* ---- Cross-panel switcher (header) ----
   Styles the dropdown toggle in layouts/parts/header-panel-switcher.blade.php
   to match the plain header links (.links a in _header.scss), since BookStack
   only styles anchors there. */
header .links .panel-switcher {
    display: inline-block;
    vertical-align: top;
    padding-inline: 0;
}
header .links .panel-switcher-toggle {
    display: inline-block;
    padding: 10px 16px;
    color: #FFF;
    fill: #FFF;
    border-radius: 3px;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    cursor: pointer;
}
header .links .panel-switcher-toggle:hover {
    background-color: rgba(255, 255, 255, 0.15);
}
header .links .panel-switcher .dropdown-menu {
    text-align: start;
    min-width: 180px;
}
/* Below BookStack's $bp-l the header menu becomes a light card; restyle the
   toggle to match the stacked dark-text links. */
@media screen and (max-width: 1000px) {
    header .links .panel-switcher-toggle {
        width: 100%;
        text-align: start;
        color: #444;
        fill: #444;
        padding: 8px 16px;
        border-radius: 0;
    }
    header .links .panel-switcher-toggle:hover {
        background-color: var(--color-primary-light);
        color: var(--color-primary);
    }
}