/* Shared stylesheet for the Sku download page, its translations and the
   generated patch note pages.  Kept deliberately plain: this site is read
   with a screen reader far more often than it is looked at, so the markup
   carries the structure and the CSS only has to stay out of the way and be
   readable for the sighted helpers who also use it. */

:root {
    color-scheme: light dark;
    --bg: #ffffff;
    --fg: #1c1c1c;
    --muted: #555555;
    --link: #0b4fa2;
    --link-visited: #6b2f9c;
    --accent: #0b4fa2;
    --accent-fg: #ffffff;
    --notice-border: #b34700;
    --notice-bg: #fff6ef;
    --notice-fg: #8a3600;
    --cross-bg: #eef4fd;
    --rule: #cccccc;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #16181c;
        --fg: #e8e8e8;
        --muted: #b6b6b6;
        --link: #8ab4f8;
        --link-visited: #c9a3f0;
        --accent: #2f6fd0;
        --accent-fg: #ffffff;
        --notice-border: #e08a3c;
        --notice-bg: #2a2018;
        --notice-fg: #f0c08a;
        --cross-bg: #1b2230;
        --rule: #3a3f46;
    }
}

body {
    font-family: Arial, Helvetica, sans-serif;
    max-width: 46em;
    margin: 0 auto;
    padding: 20px;
    line-height: 1.6;
    color: var(--fg);
    background: var(--bg);
}

h1 { margin-top: 0; font-size: 1.8em; }
h2 { margin-top: 1.8em; font-size: 1.35em; }
h3 { margin-top: 1.4em; font-size: 1.1em; }

a { color: var(--link); text-decoration: underline; }
a:visited { color: var(--link-visited); }
a:focus { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Jump link for keyboard users; visible as soon as it takes focus. */
.skiplink {
    position: absolute;
    left: -9999px;
    top: 0;
}
.skiplink:focus {
    position: static;
    display: inline-block;
    margin-bottom: 1em;
}

.download-link {
    display: inline-block;
    margin: 8px 0;
    padding: 8px 16px;
    background: var(--accent);
    color: var(--accent-fg);
    text-decoration: none;
    border-radius: 4px;
    font-size: 1.05em;
}
.download-link:visited { color: var(--accent-fg); }
.download-link:hover,
.download-link:focus {
    background: var(--link);
    color: var(--accent-fg);
    outline: 3px solid var(--accent);
    outline-offset: 2px;
}

section { margin-bottom: 2em; }

.notice {
    border-left: 4px solid var(--notice-border);
    background: var(--notice-bg);
    padding: 12px 16px;
    margin: 1.5em 0;
}
.notice strong { color: var(--notice-fg); }

.crosslink {
    border-left: 4px solid var(--accent);
    background: var(--cross-bg);
    padding: 12px 16px;
    margin: 1.5em 0;
}

/* Language switcher and the prev/next row on a patch note page: one line of
   links, but still a real list so a screen reader announces how many. */
.langnav,
.pagenav {
    margin: 0 0 1.5em 0;
    padding: 0;
}
.langnav li,
.pagenav li {
    display: inline;
    margin-right: 1em;
}

/* "On this page" */
.toc { margin: 0 0 2em 0; padding-left: 1.2em; }
.toc li { margin: 0.2em 0; }

.versionlist { padding-left: 1.2em; }
.versionlist li { margin: 0.3em 0; }
.latest { color: var(--muted); }

hr {
    border: 0;
    border-top: 1px solid var(--rule);
    margin: 2em 0;
}

footer { color: var(--muted); }
footer a { color: var(--link); }