/* Custom styling for Claude Code Deep Dive book */

/* Content layout */
.content {
    padding: 0 15px;
    max-width: 850px;
    margin: 0 auto;
}

/* Better headings */
.content h2 {
    font-size: 2.2em;
    margin-top: 1.8em;
    margin-bottom: 0.8em;
    border-bottom: 1px solid var(--theme-popup-border);
    padding-bottom: 0.3em;
}

.content h3 {
    font-size: 1.7em;
    margin-top: 1.5em;
    margin-bottom: 0.7em;
}

/* Center all mermaid diagrams */
.mermaid {
    display: flex;
    justify-content: center;
    margin: 2em auto;
    width: 100%;
}

/* Better paragraph styling */
.content p {
    line-height: 1.7;
    margin: 1em 0;
    font-size: 1.05em;
}

/* Code blocks */
pre {
    border-radius: 6px;
    padding: 1em;
    margin: 1em 0;
    overflow-x: auto;
    border: 1px solid var(--theme-popup-border);
}

/* Better blockquotes */
blockquote {
    border-left: 4px solid var(--quote-border);
    padding-left: 1em;
    margin: 1em 0;
    padding: 0.8em 1em;
    border-radius: 0 6px 6px 0;
    background-color: var(--quote-bg);
}

/* Keyboard keys */
kbd {
    display: inline-block;
    padding: 0.2em 0.4em;
    font-size: 0.85em;
    vertical-align: middle;
    border: 1px solid var(--theme-popup-border);
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 var(--theme-popup-border);
}

/* Mermaid diagram styling */
.mermaid {
    display: flex;
    justify-content: center;
    margin: 2em auto;
    width: 100%;
}

/* Base mermaid styles */
:root {
    --mermaid-font-family: var(--content-font-family);
    --mermaid-font-size: 1rem;
    --mermaid-edge-color: var(--fg);
    
    /* Theme-aligned colors */
    --mermaid-node-bg-primary: var(--links);
    --mermaid-node-border-primary: var(--sidebar-active);
    --mermaid-node-bg-secondary: var(--quote-border);
    --mermaid-node-border-secondary: var(--quote-bg);
    --mermaid-node-bg-tertiary: var(--searchbar-border-color);
    --mermaid-node-border-tertiary: var(--theme-popup-border);
    --mermaid-node-text: var(--bg);
}

/* Style mermaid nodes */
.mermaid .node rect,
.mermaid .node circle,
.mermaid .node ellipse,
.mermaid .node polygon,
.mermaid .node path {
    stroke-width: 2px;
}

/* Style mermaid edges */
.mermaid .edgePath .path {
    stroke: var(--mermaid-edge-color);
    stroke-width: 1.5px;
}

/* Style mermaid labels */
.mermaid .label {
    font-family: var(--mermaid-font-family);
    font-size: var(--mermaid-font-size);
    color: var(--mermaid-node-text);
}

/* Style mermaid clusters */
.mermaid .cluster rect {
    fill: transparent;
    stroke: var(--mermaid-edge-color);
    stroke-width: 1px;
    stroke-dasharray: 5;
}

/* Info boxes */
.info-box {
    background-color: var(--quote-bg);
    border-left: 5px solid var(--links);
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 5px 5px 0;
}

.warning-box {
    background-color: var(--quote-bg);
    border-left: 5px solid var(--warning-color, var(--quote-border));
    padding: 15px;
    margin: 20px 0;
    border-radius: 0 5px 5px 0;
}

/* Component styles */
.mermaid .default {
    fill: var(--mermaid-node-bg-primary);
    stroke: var(--mermaid-node-border-primary);
}

.mermaid .uiStyle {
    fill: var(--mermaid-node-bg-primary);
    stroke: var(--mermaid-node-border-primary);
}

.mermaid .msgStyle {
    fill: var(--mermaid-node-bg-secondary);
    stroke: var(--mermaid-node-border-secondary);
}

.mermaid .queryStyle {
    fill: var(--mermaid-node-bg-tertiary);
    stroke: var(--mermaid-node-border-tertiary);
}

.mermaid .apiStyle {
    fill: var(--mermaid-node-bg-primary);
    stroke: var(--mermaid-node-border-primary);
}

.mermaid .toolStyle {
    fill: var(--mermaid-node-bg-secondary);
    stroke: var(--mermaid-node-border-secondary);
}

.mermaid .parStyle {
    fill: var(--mermaid-node-bg-tertiary);
    stroke: var(--mermaid-node-border-tertiary);
}