/* Soba Documentation - Custom Theme */

/* Signal type colors (matching the application) */
:root {
    /* Signal colors, from SignalType::color() in src/dsp/signal.rs */
    --signal-audio: #4287f5;      /* Blue */
    --signal-control: #f59e42;    /* Orange */
    --signal-gate: #42f587;       /* Green */
    --signal-midi: #b266ff;       /* Purple */
    --signal-bus: #c8cdd7;        /* Pale steel */

    /* Header colors, from ModuleCategory::color() in src/dsp/module_trait.rs */
    --category-source: #42a5f5;     /* Blue */
    --category-filter: #26a69a;     /* Teal */
    --category-modulation: #ffb74d; /* Orange */
    --category-effect: #4dd0e1;     /* Cyan */
    --category-utility: #9e9e9e;    /* Gray */
    --category-output: #7e57c2;     /* Purple */
}

/* A patch playing in the browser build (docs/src/recipes, installation) */
.patch-embed {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    border: 1px solid #2e2e4a;
    border-radius: 8px;
    background: #1a1a2e;
    margin: 1em 0 0.25em;
}

/* A film of a patch playing, with its sound: a YouTube embed (docs/src/recipes) */
.patch-film {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    border: 1px solid #2e2e4a;
    border-radius: 8px;
    background: #1a1a2e;
    margin: 1em 0 0.25em;
}

/* An embed's or film's italic caption sits close under it, as an image's
   caption does */
.patch-embed + p:has(> em:only-child),
.patch-film + p:has(> em:only-child) {
    margin-top: 0.25em;
}

/* Steinberg's ASIO Compatible logo and trademark line, which its licence
   asks for on every page that mentions ASIO. A dark tile keeps the white
   logo visible in the light themes too */
.asio-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 1em 0;
}
.asio-badge img {
    width: 64px;
    padding: 6px 8px;
    border-radius: 6px;
    background: #1a1a2e;
}
.asio-badge span {
    font-size: 0.85em;
    opacity: 0.75;
}

/* Module documentation styling */
.module-header {
    border-radius: 4px;
    padding: 8px 12px;
    margin-bottom: 16px;
}

/* Tables - better styling */
table {
    border-collapse: collapse;
    width: 100%;
    margin: 1em 0;
}

th, td {
    border: 1px solid var(--table-border-color);
    padding: 8px 12px;
    text-align: left;
}

th {
    background-color: var(--table-header-bg);
    font-weight: 600;
}

tr:nth-child(even) {
    background-color: var(--table-alternate-bg);
}

/* Code blocks in tables */
td code {
    background-color: var(--inline-code-color);
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.9em;
}

/* Patch diagrams (ASCII art) */
pre code {
    font-size: 0.85em;
    line-height: 1.4;
}

/* Blockquotes for tips */
blockquote {
    border-left: 4px solid var(--quote-border);
    padding-left: 16px;
    margin-left: 0;
    color: var(--quote-color);
}

/* Screenshots */
img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

img + em {
    display: block;
    text-align: center;
    color: var(--fg);
    opacity: 0.7;
    font-size: 0.9em;
    margin-top: -8px;
    margin-bottom: 16px;
}

/* Parameter tables */
table th:first-child {
    width: 20%;
}

/* Signal type indicators in text */
.signal-audio { color: var(--signal-audio); font-weight: 500; }
.signal-control { color: var(--signal-control); font-weight: 500; }
.signal-gate { color: var(--signal-gate); font-weight: 500; }
.signal-midi { color: var(--signal-midi); font-weight: 500; }
.signal-bus { color: var(--signal-bus); font-weight: 500; }

/* Color swatches: a glowing jack for signal types, a header bar for categories */
.swatch {
    display: inline-block;
    width: 0.75em;
    height: 0.75em;
    margin-right: 0.45em;
    border-radius: 50%;
    vertical-align: -0.05em;
    background-color: currentColor;
    box-shadow: 0 0 6px currentColor;
}
.swatch.bar {
    width: 1.4em;
    height: 0.55em;
    border-radius: 3px;
    vertical-align: 0.05em;
    box-shadow: none;
}
.swatch.audio { color: var(--signal-audio); }
.swatch.control { color: var(--signal-control); }
.swatch.gate { color: var(--signal-gate); }
.swatch.midi { color: var(--signal-midi); }
.swatch.bus { color: var(--signal-bus); }
.swatch.source { color: var(--category-source); }
.swatch.filter { color: var(--category-filter); }
.swatch.modulation { color: var(--category-modulation); }
.swatch.effect { color: var(--category-effect); }
.swatch.utility { color: var(--category-utility); }
.swatch.output { color: var(--category-output); }

/* Category headers */
h2 code {
    font-size: 0.85em;
    padding: 2px 8px;
    border-radius: 4px;
}

/* Better heading spacing */
h1 {
    margin-top: 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--theme-popup-border);
}

h2 {
    margin-top: 2em;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--theme-popup-border);
}

h3 {
    margin-top: 1.5em;
}

/* Summary/SUMMARY styling */
.chapter li.chapter-item {
    margin-top: 4px;
}

/* Keyboard shortcuts table */
table code {
    white-space: nowrap;
}

/* Connection examples - make them stand out */
h3 + pre {
    background-color: var(--code-bg);
    border-left: 3px solid var(--links);
}

/* Patch diagram styling */
.patch-diagram {
    font-family: monospace;
    background-color: var(--code-bg);
    padding: 16px;
    border-radius: 8px;
    overflow-x: auto;
}

/* Waveform representation in text */
.waveform {
    font-family: monospace;
    letter-spacing: -1px;
}

/* Print styles */
@media print {
    .sidebar {
        display: none;
    }

    .content {
        max-width: 100%;
    }

    pre {
        white-space: pre-wrap;
    }
}