/* Custom overrides on top of Pico CSS */

body {
    max-width: 70ch;
    margin-inline: auto;
}

/* light mode (default) */
:root {
    --pico-primary: #3b82c4;
    --pico-primary-hover: #2b6cb0;
    --pico-primary-focus: rgba(43, 108, 176, 0.25);
    /* primary background is mainly for buttons, inputs, etc. */
    --pico-primary-background: #2b6cb0;
    --pico-primary-hover-background: #224e80;
    --pico-primary-inverse: #fff;
}

/* dark mode (system preference) */
@media (prefers-color-scheme: dark) {
    :root {
        --pico-primary: #72b4e0;
        --pico-primary-hover: #9acaeb;
        --pico-primary-focus: rgba(114, 180, 224, 0.25);
        --pico-primary-background: #2b6cb0;
        --pico-primary-hover-background: #224e80;
        --pico-primary-inverse: #fff;
    }
}

/* headings — subtle teal tint */
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #2a4a52;
}

@media (prefers-color-scheme: dark) {
    :is(h1, h2, h3, h4, h5, h6) {
        color: #8ec3d0;
    }
}

/* h2 and h3 — I prefer them a little bit smaller than Pico defaults */
h2 {
    font-size: 1.6em;
    margin-bottom: 0.5em;
}

h3 {
    font-size: 1.3em;
    margin-bottom: 0.4em;
}

/* post listing titles — smaller for index pages */
article > h2 {
    font-size: 1.25em;
    margin-bottom: 0.25em;
}

/* underline color matches link color */
a {
    text-decoration-color: currentColor;
}

a:hover {
    background-color: rgba(59, 130, 196, 0.08);
}

/* visited links — slightly muted, more purple-blue */
a:visited {
    color: #7d6ba8;
}

a:visited:hover {
    color: #6b5b95;
}

@media (prefers-color-scheme: dark) {
    a:visited {
        color: #b0a0d6;
    }

    a:visited:hover {
        color: #c4b8e3;
    }
}

/* site header layout */
body > header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.site-brand {
    line-height: 1.2;
}

.site-brand a {
    display: block;
    font-size: 1.5rem;
    font-weight: bold;
    text-decoration: none;
}

/* post header — extra spacing below */
main > header {
    margin-bottom: 1rem;
}