@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@300;400;500;700&display=swap');

:root {
    /* --- 1. Normal Colors (Top Row) --- */
    --gruvbox-bg: #282828;
    --gruvbox-red: #cc241d;
    --gruvbox-green: #98971a;
    --gruvbox-yellow: #d79921;
    --gruvbox-blue: #458588;
    --gruvbox-purple: #b16286;
    --gruvbox-aqua: #689d6a;
    --gruvbox-gray: #a89984;

    /* --- 2. Bright Colors (Second Row) --- */
    --gruvbox-bright-gray: #928374;
    --gruvbox-bright-red: #fb4934;
    --gruvbox-bright-green: #b8bb26;
    --gruvbox-bright-yellow: #fabd2f;
    --gruvbox-bright-blue: #83a598;
    --gruvbox-bright-purple: #d3869b;
    --gruvbox-bright-aqua: #8ec07c;
    --gruvbox-fg: #ebdbb2;

    /* --- 3. Background Variants & Dark Orange --- */
    --gruvbox-bg0-h: #1d2021;
    /* Hard */
    --gruvbox-bg0: #282828;
    /* Medium */
    --gruvbox-bg1: #3c3836;
    --gruvbox-bg2: #504945;
    --gruvbox-bg3: #665c54;
    --gruvbox-bg4: #7c6f64;
    --gruvbox-dark-orange: #d65d0e;

    /* --- 4. Soft BG, FG Variants & Bright Orange --- */
    --gruvbox-bg0-s: #32302f;
    /* Soft */
    --gruvbox-fg4: #a89984;
    --gruvbox-fg3: #bdae93;
    --gruvbox-fg2: #d5c4a1;
    --gruvbox-fg1: #ebdbb2;
    --gruvbox-fg0: #fbf1c7;
    --gruvbox-orange: #fe8019;

    --MAIN-TEXT-color: var(--gruvbox-fg1);
    --MAIN-TITLES-TEXT-color: var(--gruvbox-fg0);
    --MAIN-LINK-color: var(--gruvbox-bright-blue);
    --MAIN-LINK-HOVER-color: var(--gruvbox-bright-aqua);
    --MAIN-ANCHOR-color: var(--gruvbox-bright-blue);

    --MENU-HOME-LINK-color: var(--gruvbox-dark-orange);
    --MENU-HOME-LINK-HOVER-color: var(--gruvbox-fg0);

    --MENU-HEADER-BG-color: var(--gruvbox-bg0-h);
    --MENU-HEADER-BORDER-color: var(--gruvbox-bg1);

    --MENU-SEARCH-BG-color: var(--gruvbox-bg0-h);
    --MENU-SEARCH-BOX-color: var(--gruvbox-bg1);
    --MENU-SEARCH-BOX-ICONS-color: var(--gruvbox-gray);

    --MENU-SECTIONS-ACTIVE-BG-color: var(--gruvbox-bg0-h);
    --MENU-SECTIONS-BG-color: var(--gruvbox-bg0-h);
    --MENU-SECTIONS-LINK-color: var(--gruvbox-gray);
    --MENU-SECTIONS-LINK-HOVER-color: var(--gruvbox-fg1);
    --MENU-SECTION-ACTIVE-CATEGORY-color: var(--gruvbox-fg0);
    --MENU-SECTION-ACTIVE-CATEGORY-BG-color: var(--gruvbox-dark-orange);

    --MENU-VISITED-color: var(--gruvbox-bright-green);
    --MENU-SECTION-HR-color: var(--gruvbox-bg1);

    /* --- Terminal Font Stack --- */
    --terminal-font: 'Noto Sans Mono', 'Consolas', 'Monaco', 'Courier New', Courier, monospace, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Segoe UI Symbol";
}

body {
    background-color: var(--gruvbox-bg0-h) !important;
    color: var(--MAIN-TEXT-color) !important;
    font-family: var(--terminal-font) !important;
}

#main {
    background: var(--gruvbox-bg0-h) !important;
}

h1 {
    color: var(--gruvbox-bright-green) !important;
    text-align: left !important;
    font-size: 2.2rem !important;
    font-family: var(--terminal-font) !important;
    border-bottom: 2px solid var(--gruvbox-bg1) !important;
    padding-bottom: 0.5rem;
}

#chapter {
    display: block !important;
    text-align: left !important;
}

#chapter h3 {
    display: none !important;
}

#chapter p {
    text-align: left !important;
}

#chapter h1 {
    text-align: left !important;
    font-size: 2.5rem !important;
    border-bottom: 2px solid var(--gruvbox-bg1) !important;
    padding-bottom: 0.5rem;
}

h2,
h3,
h4,
h5 {
    color: var(--gruvbox-bright-yellow) !important;
    font-family: var(--terminal-font) !important;
}

a {
    color: var(--MAIN-LINK-color);
}

.anchor {
    color: var(--MAIN-ANCHOR-color);
}

a:hover {
    color: var(--MAIN-LINK-HOVER-color);
}

#sidebar {
    background-color: var(--gruvbox-bg0-h) !important;
    font-family: var(--terminal-font) !important;
}

#sidebar #header-wrapper {
    background: var(--gruvbox-bg0-h) !important;
    border-color: var(--gruvbox-bg1) !important;
}

#sidebar #header-wrapper a {
    color: var(--gruvbox-dark-orange) !important;
}

#sidebar .searchbox {
    border-color: var(--MENU-SEARCH-BOX-color) !important;
    background: var(--MENU-SEARCH-BG-color) !important;
}

#sidebar ul.topics>li.parent,
#sidebar ul.topics>li.active {
    background: var(--MENU-SECTIONS-ACTIVE-BG-color) !important;
}

#sidebar ul.topics>li.parent>a i,
#sidebar ul.topics>li.active>a i {
    color: var(--gruvbox-orange) !important;
}

#sidebar .searchbox * {
    color: var(--MENU-SEARCH-BOX-ICONS-color) !important;
}

#sidebar a {
    color: var(--gruvbox-fg4) !important;
}

#sidebar a:hover {
    color: var(--gruvbox-fg1) !important;
}

#sidebar ul li.active>a {
    background: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) !important;
    color: var(--MENU-SECTION-ACTIVE-CATEGORY-color) !important;
}

#sidebar hr {
    border-color: var(--gruvbox-bg1) !important;
}

#sidebar ul li.visited>a {
    color: var(--gruvbox-bright-green) !important;
}

#sidebar ul li.visited>a .read-icon {
    color: var(--gruvbox-bright-green) !important;
}

#homelinks {
    background: var(--gruvbox-bg0-h) !important;
    border-bottom: 2px solid var(--gruvbox-bg1) !important;
}

#homelinks a {
    color: var(--gruvbox-dark-orange) !important;
}

#homelinks a:hover {
    color: var(--MENU-HOME-LINK-HOVER-color) !important;
}

/* Page Title Link */
.page-title {
    background: var(--gruvbox-bright-purple) !important;
    font-family: var(--terminal-font) !important;
}

/* Code blocks override */
code {
    background: var(--gruvbox-bg1) !important;
    border: 1px solid var(--gruvbox-bg2) !important;
    color: var(--gruvbox-fg1) !important;
    font-family: var(--terminal-font) !important;
}

pre {
    background: var(--gruvbox-bg0) !important;
    border: 1px solid var(--gruvbox-bg1) !important;
}

pre code {
    color: var(--gruvbox-fg1) !important;
    background: transparent !important;
}

/* Tables */
table,
td {
    border-color: var(--gruvbox-bg1) !important;
    font-family: var(--terminal-font) !important;
}

th {
    background: var(--gruvbox-bg1) !important;
    color: var(--gruvbox-fg0) !important;
}

/* Blockquotes */
blockquote {
    border-left: 5px solid var(--gruvbox-bg2) !important;
    background: var(--gruvbox-bg0) !important;
    padding: 1rem !important;
}

blockquote p {
    color: var(--gruvbox-fg4) !important;
}

/* Horizontal rule */
hr {
    border-bottom: 2px solid var(--gruvbox-bg1) !important;
}

/* Notices - subtle adjustments for dark theme */
div.notices.info p {
    border-top-color: var(--gruvbox-blue) !important;
    background: var(--gruvbox-bg0) !important;
    color: var(--gruvbox-fg1) !important;
}

div.notices.warning p {
    border-top-color: var(--gruvbox-red) !important;
    background: var(--gruvbox-bg0) !important;
    color: var(--gruvbox-fg1) !important;
}

div.notices.note p {
    border-top-color: var(--gruvbox-yellow) !important;
    background: var(--gruvbox-bg0) !important;
    color: var(--gruvbox-fg1) !important;
}

div.notices.tip p {
    border-top-color: var(--gruvbox-green) !important;
    background: var(--gruvbox-bg0) !important;
    color: var(--gruvbox-fg1) !important;
}

/* Navigation buttons (hidden) */
#body .nav {
    display: none !important;
}

#top-bar {
    background: var(--gruvbox-bg0-h) !important;
    border-bottom: 1px solid var(--gruvbox-bg1) !important;
    padding: 0 !important;
    /* Remove top-bar padding to align with main content */
    margin-bottom: 1rem;
}

#breadcrumbs {
    padding-left: 0 !important;
    /* Align breadcrumbs with left edge */
    font-family: var(--terminal-font) !important;
}

/* Buttons */
.button {
    background: var(--gruvbox-bright-orange) !important;
    color: var(--gruvbox-bg0) !important;
    box-shadow: 0 3px 0 var(--gruvbox-dark-orange) !important;
    font-family: var(--terminal-font) !important;
    text-transform: uppercase;
    font-weight: bold;
}

.button:hover {
    background: var(--gruvbox-orange) !important;
    box-shadow: 0 3px 0 var(--gruvbox-dark-orange) !important;
}

.button-secondary {
    background: var(--gruvbox-bright-green) !important;
    color: var(--gruvbox-bg0) !important;
    box-shadow: 0 3px 0 var(--gruvbox-green) !important;
    font-family: var(--terminal-font) !important;
    text-transform: uppercase;
    font-weight: bold;
}

.button-secondary:hover {
    background: var(--gruvbox-green) !important;
    box-shadow: 0 3px 0 var(--gruvbox-green) !important;
}

/* Search Input */
.searchbox input {
    font-family: var(--terminal-font) !important;
}