/* style.css */

body {
    --body-font:
        system-ui, -apple-system, 'Segoe UI', Roboto, Ubuntu, sans-serif;
    font-family: var(--body-font);
    line-height: 1.6; /* Improve line spacing */
    color: #333;
    margin: 0; /* Remove default body margin */
    padding: 0;
    background-color: #fafaf4; /* Slightly off-white background */
}

/* ====== Layout Styles ====== */

/* Wrapper for nav and main content */
.layout-wrapper {
    max-width: 1200px; /* Optional: Max width for the whole layout */
    margin: 0 auto; /* Center the wrapper */
    padding: 0 0.2em; /* Side padding for mobile */
}

/* Sidebar Navigation Styling (chapter tree) */
.site-nav {
    /* Mobile: hidden — the prev/Topics/next bars handle navigation there. */
    display: none;
}
.site-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.site-nav a {
    text-decoration: none;
    color: #444;
    font-size: 0.85em;
    line-height: 1.3;
    display: block;
    padding: 0.15em 0;
}
.site-nav a:hover {
    color: #0077cc;
}
.site-nav a[aria-current='page'] {
    font-weight: bold;
    color: #005599;
}
.site-nav .site-nav-home {
    font-size: 0.8em;
    color: #888;
}
.site-nav .site-nav-book {
    font-weight: bold;
    font-size: 0.95em;
    color: #333;
    margin-bottom: 0.5em;
}
.site-nav .site-nav-section {
    font-size: 0.72em;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #999;
    margin: 0.9em 0 0.2em;
}
.site-nav .site-nav-tier {
    font-size: 0.8em;
    font-style: italic;
    color: #999;
    margin-top: 1.2em;
    padding-top: 0.6em;
    border-top: 1px solid #eee;
}
.site-nav .site-nav-contents {
    margin-top: 0.9em;
}
.site-nav .site-nav-contents a {
    color: #888;
}

/* Styling for the Previous/Next Navigation */
.pagination-nav {
    display: flex; /* Use flexbox for layout */
    justify-content: space-between; /* Push prev/next divs to opposite ends */
    align-items: center; /* Vertically align items */
    padding: 0.5em 0; /* Vertical padding */
}

.pagination-nav .nav-prev {
    text-align: left; /* Align text within the left div (default) */
}

.pagination-nav .nav-next {
    text-align: right; /* Align text within the right div */
}

/* Make sure the divs don't shrink if content is small */
.pagination-nav .nav-prev,
.pagination-nav .nav-next {
    flex-basis: 48%; /* Give roughly half the space, adjust as needed */
    /* Or just let them take content width if preferred */
}

/* Optional: Link styling */
.pagination-nav a {
    color: #0056b3; /* Example color */
    text-decoration: none;
    display: inline-block; /* Prevents text alignment issues */
}

.pagination-nav a:hover {
    text-decoration: underline;
}

/* Optional: Placeholder styling */
.pagination-nav span {
    display: inline-block; /* Ensure it takes space */
    min-height: 1.2em; /* Match approximate line height */
    color: #aaa; /* Optional: make placeholder less visible */
}

.main-content-area {
    /* Example: Allow main column to grow */
    /* flex-grow: 1; */
    /* Or just use standard block layout */
    max-width: 900px; /* Example max width */
    margin: 0 auto; /* Center if needed */
    padding: 0 0; /* Padding */
}

/* Main Content Area Styling */
main {
    max-width: 75ch; /* Keep max-width for readability */
    /* Remove horizontal centering margin */
    margin: 0;
    padding: 1em 0em; /* Keep internal padding */
    background-color: #fffffa;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Desktop Sidebar Layout using Flexbox */
@media (min-width: 900px) {
    /* Adjust this breakpoint as needed */
    .layout-wrapper {
        display: flex;
        align-items: flex-start; /* Align tops of nav and main */
        gap: 2em; /* Space between nav and main */
        padding: 0 2em; /* Adjust overall padding */
    }

    .site-nav {
        display: block;
        flex: 0 0 210px; /* Sidebar: Don't grow, don't shrink, fixed width */
        order: -1; /* Ensure nav appears first (left side) */
        padding: 1.5em 0 1em; /* Align top with main content padding */
        /* Sticky, with its own scrollbar if the tree outgrows the viewport */
        position: sticky;
        top: 0;
        max-height: 100vh;
        overflow-y: auto;
    }

    main {
        flex: 1; /* Allow main content to take remaining space */
        /* max-width: 75ch; /* Already set, applies within the flex item */
        padding: 1em 2em; /* Keep padding */
    }
}

/* ====== End Layout Styles ====== */

/* ====== Basic Page Readability Styles ====== */

/* Side margin for direct children -- this one directly appears as margin for mobile */
main > * {
    margin-left: 1em;
    margin-right: 1em;
}

blockquote {
    border-left: 3px solid #ccc;
    padding-left: 0.75em;
}

h1,
h2,
h3 {
    line-height: 1.2;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
}

h1 {
    text-align: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5em;
}

/* Subtitle line inside a page title (h1 ... <br/><small>subtitle</small>) */
h1 small {
    font-size: 0.55em;
    font-weight: normal;
}

/* Page front matter: epigraph and byline, tucked under the title rule. */
.epigraph {
    text-align: center;
    font-style: italic;
    font-size: 0.95em;
    color: #555;
    margin: 0.75em auto 0;
    max-width: 32em;
}
.byline {
    text-align: center;
    font-size: small;
    color: #777;
    margin: 0.5em 0 2.5em;
}

/* Opening hook paragraph: a step between display type and body text. */
p.lede {
    font-weight: 600;
}

a {
    color: #0077cc;
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}

code {
    background-color: #f0f0f0;
    padding: 0.1em 0.4em;
    border-radius: 3px;
    font-size: 0.9em;
}

pre code {
    display: block;
    padding: 1em;
    overflow-x: auto;
}

ul,
ol {
    /* Controls per-nesting-level indenting */
    padding-inline-start: 1.5em;
}

details {
    border: 1px dashed #ccc;
}

main > table {
    margin-left: auto;
    margin-right: auto;
}

table {
    border-collapse: collapse;
}

th,
td {
    border: 1px solid #eee;
    padding: 5px;
}

tr:nth-child(even) {
    background-color: #f2f2f2;
}

tr:hover {
    background-color: #ddd;
}

th {
    background-color: #cae4ff;
}

main > figure {
    /* Center figures horizontally (but allow to break past normal text margins), add vertical space */
    margin: 1.5em auto;
}
figure {
    break-inside: avoid; /* for printing */
}
figure > * {
    /* Figure contents centered automatically */
    margin-left: auto;
    margin-right: auto;
}

figure.diagram-placeholder {
    height: 250px;
    max-width: 350px;
    border: 1px dashed #ccc;
    padding: 20px;
    text-align: center;
    background-color: rgba(0.5, 0.5, 0.5, 0.05);
}

.demo-container {
    padding: 0.5em;
    border: 1px solid #eee;
    border-radius: 5px;
    background-color: #fdfdfd;
}

/* Diagram controls do nothing without JS (they drive the live figure). Render
   them visibly inert until the no-js -> js flip in base.njk enables them, so a
   no-JS visitor isn't misled into dragging a dead slider. */
.no-js .bd-control input,
.no-js .bd-control button,
.no-js .bd-control select {
    pointer-events: none;
    opacity: 0.45;
    cursor: not-allowed;
}

/* Pre-rendered circuitikz figures: scale to container, follow text color. */
.circuit-svg {
    display: block;
    width: 100%;
    height: auto;
    margin: 0.25em auto;
}

figcaption {
    font-size: small;
}

/* Suppress paragraph first/last margins to be consistent with unparagraphed figcaption. */
figcaption :first-child {
    margin-block-start: 0;
}
figcaption :last-child {
    margin-block-end: 0;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

figure {
    animation: fadeIn 0.6s ease-out forwards;
}

/* ?static (deterministic render): the html element gets .static-render from a
   head script; kill ALL css animations/transitions, not just the figure one. */
.static-render *,
.static-render *::before,
.static-render *::after {
    animation: none !important;
    transition: none !important;
}

/* Styles for ESBD examples' frame and controls */

.controls.esbd-controls {
    padding: 5px; /* if needed */
    flex-shrink: 0;
}

.control-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 4px;
    min-height: 1.8em;
}

.control-label {
    margin-right: 10px;
    text-align: right;
    font-size: 0.85em;
    color: #333;
}

.controls input[type='range'] {
    width: 180px;
    margin-right: 5px;
    vertical-align: middle;
}

.controls output {
    font-weight: bold;
    min-width: 45px;
    display: inline-block;
    font-family: monospace;
    font-size: 1.1em;
}

.controls select {
    vertical-align: middle;
    margin-left: 10px;
    font-size: 0.9em;
}

/* Radio button group styling */
.radio-group {
    align-items: center;
    margin-bottom: 4px; /* Consistent reduced margin */
}
.radio-group legend.control-label {
    margin-bottom: 0;
    padding: 0;
    float: none;
    width: auto;
    display: inline-block;
    margin-right: 10px;
}
.radio-group div {
    display: inline-block;
}
.radio-group input[type='radio'] {
    vertical-align: middle;
    margin: 0 2px 0 0;
}
.radio-group label {
    min-width: initial;
    margin-left: 0;
    margin-right: 10px;
    font-weight: normal;
    font-size: 0.85em;
    vertical-align: middle;
    cursor: pointer;
}

/* Typical band diagram container size */
.bd-container {
    height: 250px;
}

/* the corner legend chip linking every diagram to /esbd/reading/ */
.bd-legend-link {
    position: absolute;
    top: 3px;
    right: 3px;
    z-index: 5;
    font-size: 11px;
    line-height: 1;
    padding: 2px 6px;
    border-radius: 9px;
    color: #aaa;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid #ddd;
    text-decoration: none;
}
.bd-legend-link:hover {
    color: #1d4ed8;
    border-color: #aaa;
}

/* ====== Start ResponsivePlot Styles ====== */

/* For drawLabelsFancy - neutralizes the line-height of the foreignObject
   so it doesn't interfere with the vertical alignment of its content. */
.rp-label-foreign-object {
    line-height: 0;
}

/* Restore a sensible line-height for the text content itself. */
.rp-label-foreign-object > .rp-label-span {
    /* The KaTeX font size is overridden to 1.1em and has a line-height of 1.2.
       This makes the effective line-height of math content 1.1 * 1.2 = 1.32.
       We set this on all labels to ensure consistent height. */
    line-height: 1.32;
}

/* Y-Axis Label (used by BandDiagram, EnergyLevelsDiagram, etc.) */
.rp-y-axis-label > span.rp-label-span {
    font-size: 11px;
    color: #333;
}

/* ====== End ResponsivePlot Styles ====== */

/* ====== Start BandDiagram Styles ====== */

/* D3 Axis Styling */
.bd-x-axis path,
.bd-y-axis path,
.bd-x-axis line,
.bd-y-axis line {
    stroke: #aaa; /* Slightly lighter axis lines */
    shape-rendering: geometricPrecision;
}
.bd-x-axis text,
.bd-y-axis text {
    font-size: 9px; /* Smaller axis text */
    fill: #555;
}

/* D3 Data Line Defaults */
.bd-data-line {
    fill: none;
}

.bd-region-label {
    font-family: 'KaTeX_Main', 'Times New Roman', Times, serif;
    font-size: 12px;
    fill: #555;
}

/* KaTeX Labels on Plot */
.bd-line-label > span.rp-label-span,
.xy-trace-label > span.rp-label-span {
    font-size: 11px; /* Slightly smaller labels */
    padding: 1px 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

/* popup */
.bd-popup {
    max-width: 250px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
    font-size: 11px;
    padding: 2px;
    border-radius: 5px;
    background: rgba(245, 245, 245, 0.95);
}

/* ====== End BandDiagram Styles ====== */

/* ====== EnergyLevelsDiagram Styles ====== */

/* SVG container for the level diagram */
.energy-levels-svg {
    display: block; /* Prevents extra space below */
    /* Width/Height set by JS/Container */
    font-family: sans-serif; /* Inherit or set specific font */
}

/* Plot area group (margins applied via transform) */
.energy-levels-plot-area {
    /* No specific styles usually needed */
}

/* Axes Styling */
.energy-levels-x-axis .domain,
.energy-levels-y-axis .domain {
    /* Domain lines are removed in JS, but could hide here too */
    /* stroke: none; */
}

.energy-levels-x-axis .tick line,
.energy-levels-y-axis .tick line {
    stroke: #ccc; /* Color for axis ticks / grid lines */
}

/* Style for Y-axis grid lines (created via tickSize(-width)) */
.energy-levels-y-axis .tick line {
    stroke-dasharray: 2, 2; /* Make grid lines dashed */
    opacity: 0.7;
}

.energy-levels-x-axis text,
.energy-levels-y-axis text {
    font-size: 10px; /* Adjust axis label size */
    fill: #555;
}

.energy-levels-x-axis text {
    /* Optional: Adjustments if category labels overlap */
    /* transform: rotate(-30deg) translate(-5px, -5px); */
    /* text-anchor: end; */
}

/* Level Group Elements */
.level-group {
    /* Styles applied dynamically */
}

.level-line {
    /* Default stroke/width set dynamically, but could add defaults */
    /* stroke: black; */
    /* stroke-width: 2; */
    shape-rendering: crispEdges;
}

.level-label > span.rp-label-span {
    font-size: 10px;
    padding: 1px 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

.level-arrow-label > span.rp-label-span {
    font-size: 9px;
    padding: 0px 2px;
    background: rgba(255, 255, 255, 0.8);
}

/* ====== End EnergyLevelsDiagram Styles ====== */

/* ====== Start XYPlot Styles ====== */

.xy-x-axis text,
.xy-y-axis text {
    font-size: 9px;
    fill: #555;
}

.xy-x-axis-label > span.rp-label-span {
    font-size: 11px;
    color: #333;
}

.xy-trace-label > span.rp-label-span {
    font-size: 11px;
    padding: 1px 3px;
    background: rgba(255, 255, 255, 0.7);
    border-radius: 2px;
}

/* ====== End XYPlot Styles ====== */

/* ====== Print ====== */
@media print {
    .site-nav,
    .pagination-nav {
        display: none;
    }
}