/* ------------------------------------------------------------------
   main.css -- layout & visual design

   ------------------------------------------------------------------ */

/* --- theme palettes (4 user colours each) ------------------------ */
/* Foreground is always white; everything else is auto-derived.
   To add a theme copy one block and pick 4 dark-background colours.  */

:root,
[data-theme="modern-simplicity"] {
    --palette-bg: #2a2c2d;
    --palette-surface: #3a3d3e;
    --palette-accent: #5f705e;
    --palette-masthead: #35383a;
}

[data-theme="parchment"] {
    --palette-bg: #2a2218;
    --palette-surface: #3a3020;
    --palette-accent: #c4a76e;
    --palette-masthead: #332818;
}

[data-theme="dark-fantasy"] {
    --palette-bg: #120a19;
    --palette-surface: #5e4069;
    --palette-accent: #c4181f;
    --palette-masthead: #7e1f23;
}

[data-theme="root-beer-float"] {
    --palette-bg: #3c1402;
    --palette-surface: #312b24;
    --palette-accent: #e96f1b;
    --palette-masthead: #ca9a57;
}

[data-theme="mango"] {
    --palette-bg: #4a1a2b;
    --palette-surface: #7a2824;
    --palette-accent: #b08a20;
    --palette-masthead: #a05018;
}

[data-theme="cga-streetlights"] {
    --palette-bg: #994488;
    --palette-surface: #1a1a1a;
    --palette-accent: #778877;
    --palette-masthead: #2a7a50;
}

[data-theme="mint"] {
    --palette-bg: #3a6078;
    --palette-surface: #3a7870;
    --palette-accent: #8a7a7c;
    --palette-masthead: #5a8a70;
}

[data-theme="lavender"] {
    --palette-bg: #060010;
    --palette-surface: #3a4a90;
    --palette-accent: #8a70a0;
    --palette-masthead: #8a3838;
}

[data-theme="froggy-os"] {
    --palette-bg: #2a2a2a;
    --palette-surface: #555555;
    --palette-accent: #1a6b3a;
    --palette-masthead: #8a8060;
}

/* --- shared derivation ------------------------------------------- */
/* One block maps the 4 palette colours into the 16 functional       */
/* variables consumed by the rest of the stylesheet.  Never touches  */
/* this block to add a theme -- only change the palette blocks above. */

:root,
[data-theme] {
    --color-page-bg: var(--palette-bg);
    --color-bg: var(--palette-surface);
    --color-bg-elevated: color-mix(in srgb, var(--palette-surface), white 10%);
    --color-bg-masthead: var(--palette-masthead);
    --color-fg: #ebebeb;
    --color-fg-muted: #bbbbbb;
    --color-accent: var(--palette-accent);
    --color-accent-strong: color-mix(in srgb, var(--palette-accent), white 18%);
    --color-border: var(--palette-accent);
    --color-border-strong: color-mix(in srgb, var(--palette-accent), white 28%);
    --color-link: color-mix(in srgb, var(--palette-accent), white 55%);
    --color-link-visited: color-mix(in srgb, var(--palette-accent), white 38%);
    --color-sidebar-link: #bbbbff;
    --color-sidebar-visited: #bbddee;
    --color-footer-bg: color-mix(
        in srgb,
        var(--palette-accent) 35%,
        var(--palette-bg) 65%
    );
    --color-code-bg: color-mix(in srgb, var(--palette-bg), black 12%);
    --palette-pattern: color-mix(in srgb, var(--palette-bg), white 8%);
}

/* --- base reset --------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    background:
        radial-gradient(
                100% 100% at 100% 100%,
                #0000 46%,
                var(--palette-pattern) 47% 53%,
                #0000 54%
            )
            32px 32px,
        radial-gradient(
                100% 100% at 0 0,
                #0000 46%,
                var(--palette-pattern) 47% 53%,
                #0000 54%
            )
            32px 32px,
        radial-gradient(
                100% 100%,
                #0000 22%,
                var(--palette-pattern) 23% 29%,
                #0000 30% 34%,
                var(--palette-pattern) 35% 41%,
                #0000 42%
            )
            var(--palette-bg);
    background-size: 64px 64px;
}

body {
    margin: 0;
    padding: 0;
    color: var(--color-fg);
    font-family: "Times New Roman", Times, serif;
    font-size: 14px;
    line-height: 1.5;
    word-spacing: 0.05em;
    letter-spacing: 0.03em;
}

/* --- page container ---------------------------------------------- */

.page-wrapper {
    position: relative;
    width: 750px;
    margin: 0 auto;
    background: var(--color-bg);
    border-left: 1px solid var(--color-accent);
    border-right: 1px solid var(--color-accent);
}

/* --- masthead ---------------------------------------------------- */
/* Reserved area for banner art. Drop a wide image (e.g. 750x180)
   in /static/imgs/masthead.jpg and uncomment the background line.  */

.masthead {
    position: relative;
    height: 180px;
    padding: 30px 40px;
    background: var(--color-bg-masthead);
    /* background: var(--color-bg-masthead) url("../imgs/masthead.jpg") no-repeat top left; */
    border-bottom: 1px solid var(--color-accent);
}

.masthead h1 {
    margin: 0;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 30px;
    font-weight: normal;
    letter-spacing: 0.12em;
    color: var(--color-fg);
}

.masthead .tagline {
    position: absolute;
    bottom: 20px;
    left: 40px;
    right: 40px;
    margin: 0;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

.masthead .tagline a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid var(--color-accent);
}

/* --- hero image (per-article) ----------------------------------- */
/* Source order in the template is <img> then the asciidoctor body,
   which starts with the article <h2>. Floating the image right puts
   it next to the title with body copy wrapping underneath.        */

.hero-portrait,
.hero-landscape {
    float: right;
    margin: 5px 0 15px 20px;
    border: 3px double var(--color-border-strong);
}

.hero-portrait {
    width: 170px;
}
.hero-landscape {
    width: 280px;
}

/* --- main content column ---------------------------------------- */

.main {
    float: left;
    width: 470px;
    padding: 25px 30px 30px 40px;
}

.main h2 {
    margin: 0 0 12px;
    padding-bottom: 6px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 20px;
    font-weight: normal;
    letter-spacing: 0.08em;
    color: var(--color-link);
    border-bottom: 1px solid var(--color-accent);
}

.main h3 {
    margin: 22px 0 8px;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-fg);
}

.main p {
    margin: 0 0 12px;
    color: var(--color-fg);
}

.main ul,
.main ol {
    margin: 0 0 12px;
    padding-left: 22px;
    color: var(--color-fg);
}

.main li {
    margin-bottom: 4px;
}

.main a {
    color: var(--color-link);
    text-decoration: none;
    border-bottom: 1px solid var(--color-link);
}

.main a:visited {
    color: var(--color-link-visited);
    border-bottom-color: var(--color-link-visited);
}

.main a:hover {
    color: var(--color-fg);
    border-bottom-color: var(--color-fg);
}

.main code,
.main pre {
    font-family: "Courier New", Courier, monospace;
    font-size: 12px;
}

.main pre {
    padding: 8px 10px;
    background: var(--color-code-bg);
    border: 1px solid var(--color-accent);
    color: var(--color-link);
    overflow: auto;
}

.main code {
    color: var(--color-link);
}

/* --- article list (home page and other list pages) -------------- */

/* When .list-nav also has .box (the default on list pages), the box
   supplies border, background, and padding. Strip the conflicting
   bits here and just keep the typography + spacing for the links. */
.list-nav {
    margin: 0 0 20px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.6;
}

.list-nav a {
    display: inline-block;
    margin-right: 10px;
    color: var(--color-link);
    text-decoration: none;
    border-bottom: none;
}

.list-nav a:visited {
    color: var(--color-link-visited);
}

.list-nav a:hover {
    color: var(--color-fg);
    text-decoration: underline;
}

.list-nav a.active {
    color: var(--color-fg);
    border-bottom: 1px solid var(--color-fg);
}

.list-nav-sep {
    display: inline-block;
    margin-right: 10px;
    color: var(--color-fg-muted);
}

.article-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.article-list li {
    margin: 0 0 14px;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--color-accent);
}

.article-list li:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.article-list a {
    font-family: Georgia, "Times New Roman", serif;
    font-size: 16px;
    color: var(--color-link);
    text-decoration: none;
    border-bottom: none;
}

.article-list a:visited {
    color: var(--color-link-visited);
}

.article-list a:hover {
    color: var(--color-fg);
}

/* Blogpost entry: linked title + small date line */
.article-list .article-title {
    display: block;
    font-size: 17px;
}

.article-list .article-meta,
.article-list .micro-meta {
    margin: 4px 0 0;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-fg-muted);
}

.article-list .micro-meta a {
    font-family: inherit;
    font-size: inherit;
    color: var(--color-link);
}

/* Microblogpost entry: inline body, left-border accent */
.article-list li.microblogpost {
    padding-left: 12px;
    border-left: 3px solid var(--color-accent);
}

.article-list .micro-body {
    margin: 0 0 6px;
    color: var(--color-fg);
    font-size: 14px;
}

.article-list .micro-body p {
    margin: 0 0 8px;
    color: var(--color-fg);
}

.article-list .micro-body p:last-child {
    margin-bottom: 0;
}

/* --- tag chips --------------------------------------------------- */

.tag-chips {
    margin: 6px 0 0;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    line-height: 1.6;
}

.tag-chip {
    display: inline-block;
    margin-right: 5px;
    padding: 1px 7px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border-strong);
    color: var(--color-fg-muted);
    text-decoration: none;
    border-radius: 0;
}

.tag-chip:visited {
    color: var(--color-fg-muted);
}

.tag-chip:hover {
    color: var(--color-fg);
    border-color: var(--color-fg);
}

/* Pull tag chips on the article page away from the body copy */
.main > .tag-chips {
    margin-top: 20px;
}

/* --- sidebar ----------------------------------------------------- */

.sidebar {
    float: right;
    width: 230px;
    padding: 25px 40px 30px 0;
}

.box {
    margin-bottom: 16px;
    padding: 8px 10px 10px;
    border: 3px double var(--color-border-strong);
    background: var(--color-bg-elevated);
}

.box h3 {
    margin: 0 0 8px;
    padding-bottom: 5px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 10px;
    font-weight: bold;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-link);
    border-bottom: 1px solid var(--color-border-strong);
}

/* Section spacing inside a multi-section box */
.box h3:not(:first-child) {
    margin-top: 16px;
}
.box ul:last-child,
.box .theme-switcher:last-child,
.box p:last-child {
    margin-bottom: 0;
}

.box ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.box li {
    position: relative;
    margin: 4px 0;
    padding-left: 13px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-fg);
}

.box li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 7px;
    width: 4px;
    height: 4px;
    background: var(--color-sidebar-link);
}

.box a {
    color: var(--color-sidebar-link);
    text-decoration: none;
}

.box a:visited {
    color: var(--color-sidebar-visited);
}

.box a:hover {
    color: var(--color-fg);
    text-decoration: underline;
}

.box p {
    margin: 0;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-fg-muted);
}

/* --- theme switcher --------------------------------------------- */

.theme-switcher label {
    display: block;
    margin: 4px 0;
    padding-left: 2px;
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    line-height: 1.4;
    color: var(--color-fg);
    cursor: pointer;
}

.theme-switcher input[type="radio"] {
    margin-right: 6px;
    vertical-align: -1px;
    accent-color: var(--color-accent-strong);
}

/* --- footer ------------------------------------------------------ */

footer {
    clear: both;
    padding: 10px 20px;
    text-align: center;
    background: var(--color-footer-bg);
    border-top: 1px solid var(--color-border-strong);
    font-family: Verdana, Tahoma, sans-serif;
    font-size: 11px;
    font-style: italic;
    color: var(--color-fg);
}

footer p {
    margin: 0;
}

footer a {
    color: var(--color-fg);
    text-decoration: none;
    border-bottom: 1px dotted var(--color-fg);
}

footer a:hover {
    border-bottom-style: solid;
}