/* Custom styling for LinFIR documentation */

:root {
    --linfir-red-dark: #B93737;
    /* RGB 185, 65, 65 - LinFIR dark mode */
    --linfir-red-light: #dc4646;
    /* RGB 220, 70, 70 - LinFIR light mode */
}

/* Menu bar styling - light gray background (light themes only) */
.auto #mdbook-menu-bar,
.light #mdbook-menu-bar,
.auto #mdbook-menu-bar {
    background-color: rgb(255, 255, 255) !important;
}

/* Media queries for auto theme mode (follows OS preference) */
@media (prefers-color-scheme: dark) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--linfir-red-dark) !important;
    }

    a {
        color: var(--linfir-red-dark) !important;
    }

    a:hover {
        color: #cc3a3f !important;
    }

    blockquote {
        border-left: 4px solid var(--linfir-red-dark);
        padding-left: 1em;
        margin-left: 0;
        font-style: italic;
        background-color: rgba(170, 35, 40, 0.1);
    }
}

@media (prefers-color-scheme: light) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--linfir-red-light) !important;
    }

    a {
        color: var(--linfir-red-light) !important;
    }

    a:hover {
        color: var(--linfir-red-dark) !important;
    }

    blockquote {
        border-left: 4px solid var(--linfir-red-light);
        padding-left: 1em;
        margin-left: 0;
        font-style: italic;
        background-color: rgba(220, 70, 70, 0.05);
    }
}

@media (prefers-color-scheme: auto) {

    h1,
    h2,
    h3,
    h4,
    h5,
    h6 {
        color: var(--linfir-red-light) !important;
    }

    a {
        color: var(--linfir-red-light) !important;
    }

    a:hover {
        color: var(--linfir-red-dark) !important;
    }

    blockquote {
        border-left: 4px solid var(--linfir-red-light);
        padding-left: 1em;
        margin-left: 0;
        font-style: italic;
        background-color: rgba(220, 70, 70, 0.05);
    }
}

/* Apply LinFIR colors to ALL dark themes (coal, navy, ayu) */
.coal h1,
.coal h2,
.coal h3,
.coal h4,
.coal h5,
.coal h6,
.navy h1,
.navy h2,
.navy h3,
.navy h4,
.navy h5,
.navy h6,
.ayu h1,
.ayu h2,
.ayu h3,
.ayu h4,
.ayu h5,
.ayu h6 {
    color: var(--linfir-red-dark) !important;
}

.coal a,
.navy a,
.ayu a {
    color: var(--linfir-red-dark) !important;
}

.coal a:hover,
.navy a:hover,
.ayu a:hover {
    color: #cc3a3f !important;
}

.coal blockquote,
.navy blockquote,
.ayu blockquote {
    border-left: 4px solid var(--linfir-red-dark);
    padding-left: 1em;
    margin-left: 0;
    font-style: italic;
    background-color: rgba(170, 35, 40, 0.1);
}

/* Custom coal theme colors */
.coal {
    --bg: rgb(8, 8, 8) !important;
    --fg: rgb(255, 255, 255) !important;
}

.coal body,
.coal #content main,
.coal .content {
    background-color: rgb(8, 8, 8) !important;
    color: rgb(255, 255, 255) !important;
}

.coal p,
.coal li,
.coal td,
.coal th {
    color: rgb(255, 255, 255) !important;
}

.coal .sidebar,
.coal .sidebar-bg {
    background-color: rgb(22, 22, 22) !important;
}

/* Apply LinFIR colors to light themes (light, rust) */
.auto h1,
.auto h2,
.auto h3,
.auto h4,
.auto h5,
.auto h6,
.light h1,
.light h2,
.light h3,
.light h4,
.light h5,
.light h6,
.rust h1,
.rust h2,
.rust h3,
.rust h4,
.rust h5,
.rust h6 {
    color: var(--linfir-red-light) !important;
}

.auto a,
.light a,
.rust a {
    color: var(--linfir-red-light) !important;
}

.auto a:hover,
.light a:hover,
.rust a:hover {
    color: var(--linfir-red-dark) !important;
}

.auto blockquote,
.light blockquote,
.rust blockquote {
    border-left: 4px solid var(--linfir-red-light);
    padding-left: 1em;
    margin-left: 0;
    font-style: italic;
    background-color: rgba(220, 70, 70, 0.05);
}

.theme-popup .theme {
    width: auto;
}

.sidebar-scrollbox {
    overflow-y: auto;
}

.nav-chapters {
    font-size:
        0.9em;
}

code {
    background-color: rg ba(128, 128, 128,
            0.1);
    border-radius: 3px;
    padding: 2px 4px;
}

.war ning {
    background-color: rgba(255, 165, 0, 0.1);
    border-left: 4px solid orange;
    padding: 1em;
    margin: 1em 0;
}

/* Theme-aware images - show/hide based on theme */
/* Dark theme images */
img[src*="_dark.png"] {
    display: none;
}

.coal img[src*="_dark.png"],
.navy img[src*="_dark.png"],
.ayu img[src*="_dark.png"] {
    display: block;
}

.coal img[src*="_light.png"],
.navy img[src*="_light.png"],
.ayu img[src*="_light.png"] {
    display: none;
}

/* Light theme images */
.light img[src*="_light.png"],
.rust img[src*="_light.png"] {
    display: block;
}

.light img[src*="_dark.png"],
.rust img[src*="_dark.png"] {
    display: none;
}

/* Auto mode - use media queries */
@media (prefers-color-scheme: dark) {
    img[src*="_dark.png"] {
        display: block;
    }

    img[src*="_light.png"] {
        display: none;
    }
}

@media (prefers-color-scheme: light) {
    img[src*="_dark.png"] {
        display: none;
    }

    img[src*="_light.png"] {
        display: block;
    }
}

/* Zoom hover effect for toolbar images */
.toolbar-image-zoom {
    display: inline-block;
    position: relative;
    cursor: zoom-in;
    margin: 0.5em 0;

    transition: border-color 0.2s ease;
}

.toolbar-image-zoom:hover {
    border-color: rgba(128, 1288, 128, 0.6);
    z-index: 1000;
}

.toolbar-image -zoom img {
    display: block;
    width: 100%;
    transition: transform 0.15s ease;
    position: r8elative;
}

/* Context breadcrumb bar - fixed position below menu */
.context-breadcrumb {
    position: fixed;
    top: 50px;
    /* Below the menu bar */
    left: 300px;
    /* After the sidebar */
    right: 0;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    font-size: 0.85em;
    font-weight: 500;
    z-index: 99;
    border-bottom: 1px solid rgba(128, 128, 128, 0.2);
    transition: all 0.2s ease;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* When sidebar is hidden (mobile or toggled off) */
.sidebar-hidden .context-breadcrumb {
    display: none !important;
}

html.sidebar-hidden .context-breadcrumb {
    display: none !important;
}

body.sidebar-hidden .context-breadcrumb {
    display: none !important;
}

/* Responsive adjustments for smaller screens */
@media only screen and (max-width: 1080px) {
    .context-breadcrumb {
        left: 0;
    }
}

/* Adjust main content to account for breadcrumb bar */
#mdbook-content {
    padding-top: 35px;
}

/* When sidebar is hidden, remove breadcrumb padding */
.sidebar-hidden #mdbook-content {
    padding-top: 0;
}

/* Dark theme breadcrumb bar */
.coal .context-breadcrumb,
.navy .context-breadcrumb,
.ayu .context-breadcrumb {
    background-color: rgba(22, 22, 22, 0.95);
    color: var(--linfir-red-dark);
    backdrop-filter: blur(10px);
}

/* Light theme breadcrumb bar */
.light .context-breadcrumb,
.rust .context-breadcrumb,
.auto .context-breadcrumb {
    background-color: rgba(255, 255, 255, 0.95);
    color: var(--linfir-red-light);
    backdrop-filter: blur(10px);
}

/* Media queries for auto theme mode */
@media (prefers-color-scheme: dark) {
    .context-breadcrumb {
        background-color: rgba(22, 22, 22, 0.95);
        color: var(--linfir-red-dark);
    }
}

@media (prefers-color-scheme: light) {
    .context-breadcrumb {
        background-color: rgba(255, 255, 255, 0.95);
        color: var(--linfir-red-light);
    }
}

/* Print styles - hide sidebar and breadcrumb when printing */
@media print {

    .sidebar,
    .sidebar-bg,
    .context-breadcrumb,
    #mdbook-menu-bar,
    .menu-title,
    .nav-chapters,
    .menu-bar {
        display: none !important;
    }

    #mdbook-content main {
        padding-top: 0 !important;
    }
}