/* Flint Engine Documentation - Custom Theme
   Dark theme with warm ember accents, built on mdBook's coal theme */

/* ========================================
   CSS Custom Properties
   ======================================== */

:root {
    --flint-ember: #E8913A;
    --flint-ember-dim: #C47830;
    --flint-ember-glow: #F0A050;
    --flint-ember-faint: rgba(232, 145, 58, 0.12);
    --flint-bg-deep: #141414;
    --flint-bg: #1a1a1a;
    --flint-bg-raised: #222222;
    --flint-bg-elevated: #2a2a2a;
    --flint-text: #d4d4d4;
    --flint-text-dim: #999999;
    --flint-text-bright: #e8e8e8;
    --flint-border: #333333;
    --flint-code-bg: #1e1e1e;
}

/* ========================================
   Typography
   ======================================== */

.coal {
    --sidebar-bg: var(--flint-bg-deep);
    --sidebar-fg: var(--flint-text);
    --sidebar-active: var(--flint-ember);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
        Ubuntu, Cantarell, sans-serif;
}

code, pre, .hljs {
    font-family: "JetBrains Mono", "Fira Code", "Cascadia Code",
        "Source Code Pro", Consolas, monospace !important;
    font-size: 0.88em;
}

pre {
    font-size: 0.92em;
}

/* ========================================
   Body & Content Area
   ======================================== */

.coal .page {
    padding: 0 2rem;
}

/* ========================================
   Headings
   ======================================== */

.coal h1, .coal h2, .coal h3, .coal h4, .coal h5, .coal h6 {
    color: var(--flint-text-bright);
}

.coal h1 {
    border-bottom: 2px solid var(--flint-ember);
    padding-bottom: 0.4em;
    margin-bottom: 1em;
}

.coal h2 {
    border-bottom: 1px solid var(--flint-border);
    padding-bottom: 0.3em;
    margin-top: 2em;
}

.coal h3 {
    color: var(--flint-ember-glow);
    margin-top: 1.6em;
}

/* ========================================
   Links
   ======================================== */

.coal a {
    color: var(--flint-ember);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color 0.15s ease;
}

.coal a:hover {
    color: var(--flint-ember-glow);
    border-bottom-color: var(--flint-ember-glow);
}

/* ========================================
   Code Blocks
   ======================================== */

.coal pre {
    background-color: var(--flint-code-bg) !important;
    border: 1px solid var(--flint-border);
    border-left: 3px solid var(--flint-ember);
    border-radius: 4px;
    padding: 1em 1.2em;
    margin: 1.2em 0;
    overflow-x: auto;
}

.coal code:not(pre > code) {
    background-color: var(--flint-bg-elevated);
    border: 1px solid var(--flint-border);
    border-radius: 3px;
    padding: 0.15em 0.4em;
    font-size: 0.88em;
    color: var(--flint-ember-glow);
}

/* Clipboard button styling */
.coal .clip-button {
    background-color: var(--flint-bg-elevated);
    border: 1px solid var(--flint-border);
    color: var(--flint-text-dim);
}

.coal .clip-button:hover {
    border-color: var(--flint-ember);
    color: var(--flint-ember);
}

/* ========================================
   Tables
   ======================================== */

.coal table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

.coal table th {
    background-color: var(--flint-bg-elevated);
    color: var(--flint-ember-glow);
    font-weight: 600;
    text-align: left;
    padding: 0.6em 1em;
    border-bottom: 2px solid var(--flint-ember-dim);
}

.coal table td {
    padding: 0.5em 1em;
    border-bottom: 1px solid var(--flint-border);
}

.coal table tr:hover td {
    background-color: var(--flint-ember-faint);
}

/* ========================================
   Blockquotes (used for stub notices)
   ======================================== */

.coal blockquote {
    border-left: 3px solid var(--flint-ember);
    background-color: var(--flint-ember-faint);
    color: var(--flint-text);
    padding: 0.6em 1em;
    margin: 1em 0;
    border-radius: 0 4px 4px 0;
}

.coal blockquote p {
    margin: 0;
}

/* ========================================
   Sidebar
   ======================================== */

.coal .sidebar {
    background-color: var(--flint-bg-deep);
    border-right: 1px solid var(--flint-border);
}

.coal .sidebar .sidebar-scrollbox {
    padding: 1em;
}

.coal .chapter li.chapter-item a {
    color: var(--flint-text);
    padding: 0.3em 0.6em;
    border-radius: 3px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.coal .chapter li.chapter-item a:hover {
    color: var(--flint-ember-glow);
    background-color: var(--flint-ember-faint);
}

.coal .chapter li.chapter-item a.active {
    color: var(--flint-ember);
    background-color: var(--flint-ember-faint);
    font-weight: 600;
}

/* Section titles in sidebar */
.coal .sidebar .chapter li.part-title {
    color: var(--flint-ember);
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.78em;
    letter-spacing: 0.08em;
    padding: 1.2em 0 0.3em 0.6em;
    border-bottom: 1px solid var(--flint-border);
    margin-bottom: 0.3em;
}

/* ========================================
   Top Menu Bar
   ======================================== */

.coal #menu-bar {
    background-color: var(--flint-bg-deep);
    border-bottom: 1px solid var(--flint-border);
}

.coal #menu-bar .icon-button {
    color: var(--flint-text-dim);
}

.coal #menu-bar .icon-button:hover {
    color: var(--flint-ember);
}

/* ========================================
   Search
   ======================================== */

.coal #searchbar {
    background-color: var(--flint-bg-elevated);
    border: 1px solid var(--flint-border);
    color: var(--flint-text);
    border-radius: 4px;
}

.coal #searchbar:focus {
    border-color: var(--flint-ember);
    box-shadow: 0 0 0 2px var(--flint-ember-faint);
}

.coal .search-results a {
    color: var(--flint-ember) !important;
}

.coal .search-results .teaser em {
    color: var(--flint-ember-glow);
    font-style: normal;
    font-weight: 600;
}

/* ========================================
   Navigation Arrows
   ======================================== */

.coal .nav-chapters:hover {
    color: var(--flint-ember);
    background-color: var(--flint-ember-faint);
}

/* ========================================
   Scrollbar
   ======================================== */

.coal ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.coal ::-webkit-scrollbar-track {
    background: var(--flint-bg);
}

.coal ::-webkit-scrollbar-thumb {
    background: var(--flint-border);
    border-radius: 4px;
}

.coal ::-webkit-scrollbar-thumb:hover {
    background: var(--flint-ember-dim);
}

/* ========================================
   Print styles
   ======================================== */

@media print {
    .coal h1 { border-bottom-color: #333; }
    .coal h3 { color: #333; }
    .coal pre { border-left-color: #666; }
    .coal a { color: #333; }
}

/* ========================================
   Responsive adjustments
   ======================================== */

@media (max-width: 1080px) {
    .coal .content {
        max-width: 100%;
    }
    .coal .page {
        padding: 0 1rem;
    }
}