:root {
    --bg-color: #282828;
    --h1-color: #fb4934;
    --h2-color: #fabd2f;
    --h3-color: #b8bb26;
    --p-color: #ebdbb2;
    --ink-color: #d3869b;
    --hover-color: #689d6a;
    --link-color: #458588;
    --nav-color: #fbf1c7;
    /* Gruvbox samples */
    --bg0: #282828;
    --bg0_h: #1d2021;
    --bg0_s: #32320f;
    --bg1: #3c3836;
    --bg2: #504945;
    --bg3: #665c54;
    --bg4: #7c6f64;
    --fg0: #fbf1c7;
    --fg1: #ebdbb2;
    --fg2: #d5c4a1;
    --fg3: #bdae93;
    --fg4: #a89984;
    --red: #fb4934;
    --green: #b8bb26;
    --yellow: #fabd2f;
    --blue: #83a598;
    --purple: #d3869b;
    --aqua: #8ec07c;
    --gray: #928374;
    --orange: #fe8019;
    --red-alt: #cc241d;
    --green-alt: #98971a;
    --yellow-alt: #d79921;
    --blue-alt: #458588;
    --purple-alt: #b16286;
    --aqua-alt: #689d6a;
    --gray-alt: #a89984;
    --orange-alt: #d65d0e;
}

/* Global styles */
body {
    /* background-color: */
    background: url("img/background.jpg") center / cover no-repeat fixed;
    margin: 0;
    font-family: "JetBrains Mono", monospace;
    text-align: center;
    padding-bottom: 4rem;
    font-size: 1.3rem;
}

/* ── Rofi window ── */
.rofi-window {
    max-width: 1000px;
    margin: 4rem auto;
    border: 0.1rem solid var(--fg0);
    overflow: hidden;
    background-color: var(--bg0);
    text-align: left;
}

/* ── Rofi input bar ── */
.rofi-bar {
    display: flex;
    align-items: center;
    padding: 0.8rem 1.2rem;
    background-color: var(--bg1);
    border-bottom: 0.1rem solid var(--fg0);
    font-size: 1.3rem;
}

.rofi-prompt {
    color: var(--fg3);
    font-weight: bold;
}

.rofi-input {
    color: var(--yellow);
    font-weight: bold;
    margin-left: 0.2rem;
    animation: blink 1s step-end infinite;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ── Rofi menu items ── */
.rofi-menu {
    display: flex;
    flex-direction: column;
    border-bottom: 0.1rem solid var(--fg0);
}

.rofi-item {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.4rem;
    color: var(--fg1);
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.15s;
}

.rofi-item:nth-child(odd) {
    background-color: var(--bg0);
}

.rofi-item:nth-child(even) {
    background-color: var(--bg1);
}

.rofi-item:hover {
    background-color: var(--bg4);
    color: var(--fg0);
}

.rofi-item.active {
    background-color: var(--bg4);
    color: var(--fg0);
}

.rofi-icon {
    font-size: 1.2rem;
}

/* ── Breadcrumb bar ── */
.rofi-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 1.4rem;
    background-color: var(--bg0);
    border-bottom: 0.05rem solid var(--fg0);
    font-size: 0.95rem;
    color: var(--fg3);
}

.crumb {
    color: var(--fg3);
}

.crumb:not(:last-child)::after {
    content: "›";
    margin-left: 0.3rem;
    color: var(--bg4);
}

.crumb.active {
    color: var(--aqua);
    font-weight: bold;
}

/* ── Rofi content area ── */
.rofi-content {
    padding: 1.2rem;
    text-align: left;
}

.rofi-content h1 {
    color: var(--red);
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
}

.rofi-content h2 {
    color: var(--yellow);
    margin-top: 0.2rem;
    margin-bottom: 0.8rem;
}

.rofi-content h3 {
    color: var(--green);
    margin-bottom: 0.8rem;
    font-weight: normal;
}
.rofi-content h4 {
    color: var(--purple);
    margin-bottom: 0.8rem;
    font-weight: normal;
}

.rofi-content p {
    color: var(--fg1);
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.rofi-content a {
    color: var(--blue);
    text-decoration: none;
}

.rofi-content a:hover {
    color: var(--aqua-alt);
    text-decoration: underline;
}
/* ── various lists ── */
ul {
    color: var(--fg0);
    padding-left: 1.2rem;
}
ol {
    color: var(--fg0);
    padding-left: 2.5rem;
}
li {
    margin-top: 1rem;
    margin-bottom: 1rem;
}
.callout {
    padding: 0.2rem 1.5rem;
    margin: 1.5rem 0;
    border-left: 6px solid;
}
.callout.note {
    background: var(--blue-alt);
    border-color: var(--yellow-alt);
}
/* ── Code blocks ── */
pre {
    background-color: var(--bg0_h);
    padding: 1rem;
    overflow-x: auto;
    text-align: left;
    white-space: pre-wrap;
}
iframe {
    border: 0px;
}

code {
    color: var(--fg1);
    font-family: "JetBrains Mono", monospace;
}