/* =======================================
   ORIGINAL USER CSS (unchanged)
   ======================================= */

/* --- Base colors --- */
:root [data-md-color-scheme="gtbLight"] {
    /* Text colors */

    /* main text */
    /*Light*/
    --md-primary-fg-color: #595652;
    --md-secondary-fg-color: #595652;
    --md-tertiary-fg-color: #595652;

    /* Backgrounds */

    /* page background */
    --md-default-bg-color: #595652;
    /* cards / panels */
    --md-surface-bg-color: #cfcfcf;
    /* top navigation */
    --md-toolbar-bg-color: #ffc800;
    /* side bar */
    --md-footer-bg-color: #b7c0e6;
    --md-sidebar-bg-color: #ffc800;

    /* Headings */
    --md-heading-color: #000000;
    --md-text-heading-color: #a67c00;

    /* Links / accents */
    --md-accent-fg-color: #a67c00;
    --md-accent-bg-color: #575448;

    /* Borders / dividers */
    --md-divider-color: #d9caa7;

    /* Buttons */
    --md-button-bg-color: #ffd633;
    --md-button-fg-color: #2b2b2b;

    /* Code blocks */
    --md-code-bg-color: #a67c00;
    --md-code-fg-color: #2b2b2b;

    /* Footer */
    --md-footer-fg-color: #ffffff;
    --md-footer-bg-color: #ffc800;
}

/* --- Body and main content --- */
body {
    background-color: var(--md-default-bg-color);
    color: var(--md-primary-fg-color);
}

.md-content,
.md-main,
.md-card {
    background-color: var(--md-surface-bg-color);
    color: var(--md-primary-fg-color);
}

.md-nav,
.md-nav__list,
.md-nav__group,
.md-nav__item {
    background-color: var(--md-toolbar-bg-color) !important;
    color: var(--md-primary-fg-color, #222) !important;
}

/* --- Links --- */
.md-nav__title {
    color: var(--md-accent-bg-color);
}

.md-ellipsis {
    color: var(--md-default-bg-color);
}

.md-typeset a {
    color: var(--md-text-heading-color);
}

a {
    color: var(--md-accent-fg-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #e6a700;
}

/* --- Headers --- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    color: var(--md-heading-color);
}

h5 {
    color: var(--md-heading-color);
}

h6 {
    color: var(--md-primary-fg-color);
}

/* --- Code blocks --- */
code {
    background-color: var(--md-code-bg-color);
    color: var(--md-code-fg-color);
    padding: 2px 4px;
    border-radius: 4px;
}

pre code {
    display: block;
    padding: 12px;
}

/* --- Navigation bar --- */
.md-header {
    background-color: var(--md-toolbar-bg-color);
    color: var(--md-primary-fg-color);
}

/* --- Footer --- */
.md-footer {
    border-color: var(--md-footer-fg-color);
    background-color: var(--md-footer-bg-color);
    color: var(--md-primary-fg-color);
}

/* --- Horizontal rules --- */
hr {
    border-color: var(--md-divider-color);
}

/* --- Optional: card hover effect (requested to keep) --- */
.md-card:hover {
    background-color: #0000ff;
}

/* =======================================
   DARK MODE THEME (unchanged)
   ======================================= */

:root [data-md-color-scheme="gtbDark"] {
    --md-primary-fg-color: #ffffff;
    --md-secondary-fg-color: #ffffff;
    --md-tertiary-fg-color: #ffffff;

    --md-default-bg-color: #ffffff;
    --md-surface-bg-color: #595652;
    --md-toolbar-bg-color: #a67c00;
    --md-footer-bg-color: #b7c0e6;
    --md-sidebar-bg-color: #a67c00;

    --md-heading-color: #ffffff;
    --md-text-heading-color: #ffc800;

    --md-accent-fg-color: #ffc800;
    --md-accent-bg-color: #575448;

    --md-divider-color: #d9caa7;

    --md-button-bg-color: #ffd633;
    --md-button-fg-color: #2b2b2b;

    --md-code-bg-color: #a67c00;
    --md-code-fg-color: #2b2b2b;

    --md-footer-fg-color: #ffffff;
    --md-footer-bg-color: #a67c00;
}

body {
    background-color: var(--md-default-bg-color);
    color: var(--md-primary-fg-color);
}

.md-content,
.md-main,
.md-card {
    background-color: var(--md-surface-bg-color);
    color: var(--md-primary-fg-color);
}

.md-sidebar__scrollwrap {
    background-color: var(--md-sidebar-bg-color);
}

.md-nav {
    border-right: 2px solid #d9caa7;
}

/* --- Links --- */
.md-nav__title {
    color: var(--md-accent-bg-color);
}

.md-ellipsis {
    color: var(--md-default-bg-color);
}

.md-typeset a {
    color: var(--md-text-heading-color);
}

a {
    color: var(--md-accent-fg-color);
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
    color: #e6a700;
}

/* --- Headers --- */
.md-typeset h1,
.md-typeset h2,
.md-typeset h3,
.md-typeset h4 {
    color: var(--md-heading-color);
}

h5 {
    color: var(--md-heading-color);
}

h6 {
    color: var(--md-primary-fg-color);
}

/* --- Code blocks --- */
code {
    background-color: var(--md-code-bg-color);
    color: var(--md-code-fg-color);
    padding: 2px 4px;
    border-radius: 4px;
}

pre code {
    display: block;
    padding: 12px;
}

/* --- Navigation bar --- */
.md-header {
    background-color: var(--md-toolbar-bg-color);
    color: var(--md-primary-fg-color);
}

/* --- Footer --- */
.md-footer {
    border-color: var(--md-footer-fg-color);
    background-color: var(--md-footer-bg-color);
    color: var(--md-primary-fg-color);
}

/* --- Horizontal rules --- */
hr {
    border-color: var(--md-divider-color);
}

/* --- Optional: card hover effect --- */
.md-card:hover {
    background-color: #0000ff;
}

/* --- FIX NAV OVERLAP ON MOBILE (added as requested) --- */
.md-nav__item {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
}

.md-nav__link {
    display: flex !important;
    align-items: center;
    padding: 0.6rem 1rem !important;
    line-height: 1.4 !important;
    white-space: normal !important;
}

.md-nav__title {
    display: block !important;
    padding: 0.8rem 1rem !important;
    line-height: 1.3 !important;
}

/* .md-nav--primary .md-nav__title {
    background-color: #0000ff;
    color: #ff0000;
} */

.md-nav__list {
    padding: 0 !important;
    margin: 0 !important;
}

/* =======================================
   ⭐ NEW: MOBILE NAVIGATION BACKGROUND FIX ⭐
   ======================================= */

@media (max-width: 76.1875em) {

    /* Mobile sidebar drawer */
    .md-sidebar--primary .md-nav--primary {
        background-color: var(--md-sidebar-bg-color) !important;
    }

    /* Mobile overlay */
    .md-overlay {
        background-color: var(--md-sidebar-bg-color) !important;
    }
}