/*
 * style.css — mtxweb active stylesheet
 * ships ready to use. edit directly to customize.
 * built-in CSS in mtxweb.php loads first, this loads second — your values win.
 *
 * CSS variables:
 *   --mtx-bg         background color
 *   --mtx-fg         text color
 *   --mtx-accent     links, accents
 *   --mtx-border     borders, dividers
 *   --mtx-code-bg    code block background
 *   --mtx-max-width  content width
 *   --mtx-font       body font family
 *   --mtx-code-font  code font family
 */

:root {
    --mtx-bg: #fafafa;
    --mtx-fg: #1a1a1a;
    --mtx-accent: #2563eb;
    --mtx-border: #e5e5e5;
    --mtx-code-bg: #f0f0f0;
    --mtx-max-width: 720px;
    --mtx-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --mtx-code-font: 'SF Mono', 'Fira Code', 'Fira Mono', Menlo, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --mtx-bg: #1a1a1a;
        --mtx-fg: #e5e5e5;
        --mtx-accent: #60a5fa;
        --mtx-border: #333;
        --mtx-code-bg: #2a2a2a;
    }
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
    font-family: var(--mtx-font);
    background: var(--mtx-bg);
    color: var(--mtx-fg);
    line-height: 1.6;
    padding: 2rem 1rem;
    max-width: var(--mtx-max-width);
    margin: 0 auto;
}

h1, h2, h3, h4, h5, h6 { margin: 1.5em 0 0.5em; line-height: 1.3; }
h1 { font-size: 2rem; border-bottom: 2px solid var(--mtx-border); padding-bottom: 0.3em; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4, h5, h6 { font-size: 1rem; }

p, blockquote, pre, ul, ol, table, hr, dl { margin: 0.75em 0; }

a { color: var(--mtx-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

code {
    font-family: var(--mtx-code-font);
    background: var(--mtx-code-bg);
    padding: 0.15em 0.35em;
    border-radius: 3px;
    font-size: 0.9em;
}

pre {
    background: var(--mtx-code-bg);
    padding: 1em;
    border-radius: 6px;
    overflow-x: auto;
}
pre code { background: none; padding: 0; }

blockquote {
    border-left: 3px solid var(--mtx-accent);
    padding: 0.5em 1em;
    margin-left: 0;
    color: var(--mtx-fg);
    opacity: 0.85;
}

ul, ol { padding-left: 1.5em; }
li { margin: 0.25em 0; }

.mtx-checklist { list-style: none; padding-left: 0; }
.mtx-checklist input { margin-right: 0.5em; }

table { border-collapse: collapse; width: 100%; }
th {
    padding: 0.5em 0.75em;
    border: 1px solid var(--mtx-border);
    font-weight: bold;
    text-align: left;
}
td { padding: 0.5em 0.75em; border: 1px solid var(--mtx-border); }
thead th { border-bottom: 2px solid var(--mtx-border); }

hr { border: none; border-top: 1px solid var(--mtx-border); margin: 2em 0; }
img { max-width: 100%; height: auto; border-radius: 6px; }

small.mtx-footnote { display: block; font-size: 0.85em; opacity: 0.7; margin-top: 0.5em; }

dl { margin: 0.75em 0; }
dt { font-weight: bold; margin-top: 0.5em; }
dd { margin-left: 1.5em; margin-bottom: 0.25em; }

/* mtx utility — 12-column grid */
.mtx-grid, .mtx-grid-1, .mtx-grid-2, .mtx-grid-3, .mtx-grid-4,
.mtx-grid-5, .mtx-grid-6, .mtx-grid-7, .mtx-grid-8, .mtx-grid-9,
.mtx-grid-10, .mtx-grid-11, .mtx-grid-12 {
    display: grid; gap: 1em; margin: 1em 0;
}
.mtx-grid, .mtx-grid-1 { grid-template-columns: 1fr; }
.mtx-grid-2 { grid-template-columns: repeat(2, 1fr); }
.mtx-grid-3 { grid-template-columns: repeat(3, 1fr); }
.mtx-grid-4 { grid-template-columns: repeat(4, 1fr); }
.mtx-grid-5 { grid-template-columns: repeat(5, 1fr); }
.mtx-grid-6 { grid-template-columns: repeat(6, 1fr); }
.mtx-grid-7 { grid-template-columns: repeat(7, 1fr); }
.mtx-grid-8 { grid-template-columns: repeat(8, 1fr); }
.mtx-grid-9 { grid-template-columns: repeat(9, 1fr); }
.mtx-grid-10 { grid-template-columns: repeat(10, 1fr); }
.mtx-grid-11 { grid-template-columns: repeat(11, 1fr); }
.mtx-grid-12 { grid-template-columns: repeat(12, 1fr); }
@media (max-width: 768px) { .mtx-grid-7, .mtx-grid-8, .mtx-grid-9, .mtx-grid-10, .mtx-grid-11, .mtx-grid-12 { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 500px) { .mtx-grid, .mtx-grid-2, .mtx-grid-3, .mtx-grid-4, .mtx-grid-5, .mtx-grid-6, .mtx-grid-7, .mtx-grid-8, .mtx-grid-9, .mtx-grid-10, .mtx-grid-11, .mtx-grid-12 { grid-template-columns: 1fr; } }

/* mtx utility — card */
.mtx-card {
    border: 1px solid var(--mtx-border);
    border-radius: 6px;
    padding: 1.25em;
    transition: border-color 0.2s;
}
.mtx-card:hover { border-color: var(--mtx-accent); }
.mtx-card a { font-size: 1.1em; font-weight: bold; }

/* mtx utility — badge (numbered circle, tag, label) */
.mtx-badge {
    display: inline-block;
    background: var(--mtx-accent);
    color: var(--mtx-bg);
    min-width: 1.6em;
    height: 1.6em;
    line-height: 1.6em;
    text-align: center;
    border-radius: 50%;
    font-weight: bold;
    font-size: 0.85em;
    margin-bottom: 0.5em;
    padding: 0 0.3em;
}

/* mtx utility — responsive iframe/embed */
iframe { max-width: 100%; border: none; border-radius: 6px; margin: 0.75em 0; }

/* mtx utility — centered text block */
.mtx-center { text-align: center; }

/* mtx utility — muted/secondary text */
.mtx-muted { opacity: 0.7; font-size: 0.9em; }