/* ============================= */
/* 0. PERSONAL THEME TOKENS      */
/* ============================= */

:root {
    /* Borrowed from your personal site palette */
    --bz-bg-gradient-onyx: linear-gradient(to bottom right,
            hsl(240, 1%, 25%) 3%,
            hsl(0, 0%, 19%) 97%);
    --bz-bg-gradient-jet: linear-gradient(to bottom right,
            hsla(240, 1%, 18%, 0.25) 0%,
            hsla(240, 2%, 11%, 0) 100%),
        hsl(240, 2%, 13%);
    --bz-text-gradient-yellow: linear-gradient(to right,
            hsl(45, 100%, 72%),
            hsl(35, 100%, 68%));

    --bz-onyx: hsl(240, 1%, 17%);
    --bz-eerie-1: hsl(240, 2%, 13%);
    --bz-yellow: hsl(45, 100%, 72%);
    --bz-gold: hsl(45, 54%, 58%);
}


/* ============================= */
/* 1. MAIN CONTENT WIDTH         */
/* ============================= */

html .md-grid {
    max-width: 75rem !important;
}

html .md-content {
    max-width: 68rem !important;
}


/* ============================= */
/* 2. RIGHT TOC POSITION         */
/* ============================= */

html .md-sidebar--secondary {
    padding-right: 0.5rem !important;
}

html .md-sidebar--secondary .md-sidebar__inner {
    padding-right: 0.5rem !important;
}

@media (min-width: 1220px) {
    html .md-sidebar--secondary {
        width: 13rem !important;
    }
}


/* ============================= */
/* 3. SPACING POLISH             */
/* ============================= */

html .md-main__inner {
    column-gap: 1.25rem !important;
}

html .md-nav--secondary .md-nav__item {
    margin-bottom: 0.15rem;
}


/* ============================= */
/* 4. HEADER + TITLE STYLING     */
/* ============================= */

/* Remove the top-left logo/icon in the header */
.md-header__button.md-logo,
.md-header__button.md-logo * {
    display: none !important;
}

/* First H1 = document title (stronger) */
.md-content__inner>h1:first-of-type {
    color: var(--md-default-fg-color);
    font-weight: 650;
    font-size: 2.05em;
    letter-spacing: -0.01em;
}

/* Other H1s = normal sections (slightly muted) */
.md-content__inner>h1:not(:first-of-type) {
    color: var(--md-default-fg-color--light);
    font-weight: 650;
}


/* ============================= */
/* 5. MODERN YELLOW × BLACK HEADER */
/* ============================= */

.md-header {
    background:
        linear-gradient(135deg,
            hsl(240, 2%, 13%) 0%,
            hsl(240, 2%, 10%) 55%,
            hsl(45, 90%, 55%) 140%) !important;

    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.35);
    border-bottom: 1px solid rgba(255, 200, 80, 0.15);
}

/* Thin gold accent line (very important for “premium” feel) */
.md-header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    background: linear-gradient(to right,
            hsl(45, 100%, 72%),
            hsl(35, 95%, 58%));
    opacity: 0.85;
}

/* Header text + icons */
.md-header__title,
.md-header__button,
.md-header__button .md-icon {
    color: hsl(45, 100%, 85%) !important;
    font-weight: 500;
}

/* Hover effect — subtle, not flashy */
.md-header__button:hover {
    background: rgba(255, 215, 100, 0.12) !important;
    border-radius: 8px;
}

/* Search bar — dark glass */
.md-search__form {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 215, 100, 0.25) !important;
    border-radius: 14px !important;
    backdrop-filter: blur(6px);
}

/* Search input text */
.md-search__input {
    color: hsl(45, 100%, 88%) !important;
}


/* ============================= */
/* 6. LIGHT MODE TWEAK           */
/* ============================= */

/*
  In light mode, a fully dark header can feel heavy.
  Keep the same gradient style but slightly soften it.
*/

html[data-md-color-scheme="default"] .md-header {
    background: var(--bz-bg-gradient-onyx) !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}

html[data-md-color-scheme="default"] .md-header__title,
html[data-md-color-scheme="default"] .md-header__button,
html[data-md-color-scheme="default"] .md-header__button .md-icon {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* Hide site icon in navigation drawer title, keep text */
.md-nav__title .md-logo {
    display: none !important;
}

/* ============================= */
/* X. HIDE SIDEBAR SCROLLBARS    */
/* ============================= */

/* Primary Sidebar (Course Modules) and Secondary Sidebar (TOC) */
.md-sidebar .md-sidebar__scrollwrap::-webkit-scrollbar {
    display: none;
}

.md-sidebar .md-sidebar__scrollwrap {
    -ms-overflow-style: none;
    /* IE and Edge */
    scrollbar-width: none;
    /* Firefox */
}