/*
blacklisted.work — Body / Content Component
Purpose:
- Main content “skin” and content formatting
- Cards, headings, code blocks, utilities used in body content
*/

nav.site-nav {
    background: var(--panel);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow);
}

nav.site-nav a {
    color: var(--text);
    background: transparent;
    border: 1px solid transparent;
}

nav.site-nav a:hover {
    border-color: var(--border-strong);
    background: rgba(222, 92, 0, 0.08);
}

nav.site-nav a.active {
    border-color: var(--bw-orange);
    background: rgba(222, 92, 0, 0.14);
}

/* Content card skin */
.content-card {
    background: var(--panel);
    border: 1px solid var(--border);
    box-shadow: var(--shadow);
}

.content-card h1,
.content-card h2,
.content-card h3 {
    color: var(--text);
    text-shadow: var(--glow);
}

/* Code blocks */
pre, code, kbd, samp {
    font-family: var(--font-body);
}

code {
    background: rgba(0, 0, 0, 0.55);
    padding: 0.12em 0.35em;
    border: 1px solid rgba(72, 72, 72, 0.7);
    border-radius: 8px;
}

pre {
    background: var(--panel-2);
    border: 1px solid rgba(72, 72, 72, 0.75);
    border-left: 4px solid var(--bw-orange);
    border-radius: 14px;
    padding: 14px;
    overflow: auto;
    box-shadow: var(--shadow);
}

/* Utilities used in content */
.muted { color: var(--muted); }
.accent { color: var(--accent); }
.accent-2 { color: var(--accent-2); }

.notice {
    border-left: 4px solid var(--bw-orange);
    padding: 10px 12px;
    background: rgba(222, 92, 0, 0.08);
    border-radius: 12px;
}

.danger {
    border-left: 4px solid var(--bw-crimson);
    padding: 10px 12px;
    background: rgba(79, 3, 3, 0.18);
    border-radius: 12px;
}

/* Scrollbar (optional, webkit browsers) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--panel-2); }
::-webkit-scrollbar-thumb {
    background: rgba(222, 92, 0, 0.40);
    border-radius: 10px;
    border: 2px solid var(--panel-2);
}
::-webkit-scrollbar-thumb:hover { background: rgba(222, 92, 0, 0.60); }