/* dijotech.com - one shared stylesheet.
   Goals: readable for low-vision users, clean for screen readers'
   sighted companions, dark/light per system preference, no surprises. */

:root {
    --bg: #ffffff;
    --text: #1a1a1a;
    --accent: #0a4d8c;
    --accent-text: #ffffff;
    --border: #cccccc;
    --soft: #f2f5f8;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #121212;
        --text: #eaeaea;
        --accent: #5aa9e6;
        --accent-text: #0b0b0b;
        --border: #444444;
        --soft: #1e242b;
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: "Segoe UI", Arial, sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--text);
    background: var(--bg);
}

.skip-link {
    position: absolute;
    left: -9999px;
}
.skip-link:focus {
    position: static;
    display: inline-block;
    padding: 0.5rem 1rem;
    background: var(--accent);
    color: var(--accent-text);
}

header.site-header {
    background: var(--soft);
    border-bottom: 2px solid var(--border);
    padding: 1rem 1.5rem;
}

.site-name {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 0.5rem 0;
}
.site-name a {
    color: var(--text);
    text-decoration: none;
}

nav.site-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}
nav.site-nav a {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
nav.site-nav a:hover,
nav.site-nav a:focus {
    text-decoration: underline;
}
nav.site-nav a[aria-current="page"] {
    text-decoration: underline;
    color: var(--text);
}

main {
    max-width: 46rem;
    margin: 0 auto;
    padding: 1.5rem;
}

h1 { font-size: 1.9rem; line-height: 1.25; }
h2 { font-size: 1.45rem; margin-top: 2rem; }
h3 { font-size: 1.2rem; }

a { color: var(--accent); }

a:focus,
button:focus {
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

.button {
    display: inline-block;
    background: var(--accent);
    color: var(--accent-text);
    padding: 0.6rem 1.4rem;
    border-radius: 6px;
    text-decoration: none;
    font-weight: bold;
}

.notice {
    background: var(--soft);
    border-left: 4px solid var(--accent);
    padding: 0.75rem 1rem;
    margin: 1rem 0;
}

table.listing {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
}
table.listing th,
table.listing td {
    border: 1px solid var(--border);
    padding: 0.5rem 0.75rem;
    text-align: left;
    vertical-align: top;
}
table.listing th {
    background: var(--soft);
}
table.listing code {
    word-break: break-all;
    font-size: 0.85rem;
}

footer.site-footer {
    margin-top: 3rem;
    border-top: 2px solid var(--border);
    background: var(--soft);
    padding: 1rem 1.5rem;
    font-size: 0.95rem;
}
footer.site-footer ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1.25rem;
}