/* Base variables that control near-everything */
:root {
    --default_text_size: 1rem;
    --large_text_size: 1.33rem;
    --very_large_text_size: 2rem;
    
    --tinier_space: 0.12rem;
    --tiny_space: 0.25rem;
    --smaller_space: 0.5rem;
    --small_space: 1rem;
    --large_space: 2rem;
    --largest_space: 2.5rem;
    
    --page_background_color: #333333;
    --main_background_color: white;
    --main_text_color: black;
    
    --menu_background_color_light: #e5e5e5;
    --menu_background_color_dark: #222222;
    --menu_focus_color: #e5e5e5;
    --border_color: #bcbcbc;
    
    --link_color: #3344dd;
    --visited_link_color: #804180;
    
    /* https://modernfontstacks.com/ - Humanist */
    --font_family_humanist: Seravek, 'Gill Sans Nova', Ubuntu, Calibri, 'DejaVu Sans', source-sans-pro, sans-serif;
}

/* TODO: color tweaks for a dark mode go here if we add some */

/* Base */
:root {
    background: var(--page_background_color);
    color: var(--main_text_color);
    
    font-family: var(--font_family_humanist);
    font-weight: normal;
    font-size: var(--default_text_size);
}

/* Layout */
/* Main body: one big column with wide margins */
body {
    max-width: 900px;
    margin: auto;
}

/* The pages nav / ribbon menu is laid out entirely by utility classes, see below */
/* Sidebar structure */
.sidebar_container {
    display: flex;
    flex-wrap: wrap;
}

/* Main content, which takes up all the available space minus sidebar */
.sidebar_main {
    flex-basis: 0;
    flex-grow: 999;
    /* Required to prevent min-width from being larger than max-width and messing everything up */
    min-width: 0;
    max-width: 100%;
    /* Push sidebar down if we shrink the screen */
    min-inline-size: 60%;
}

/* Sidebar, with fixed-ish size */
.sidebar_side {
    flex-grow: 1;
}

/* Styling */
/* General */
a {
    color: var(--link_color);
    text-decoration: none;
}

a:visited {
    color: var(--visited_link_color);
}

a:focus,
a:hover,
a:active {
    text-decoration: underline;
}

img {
    display: block;
    max-width: 100%;
    margin: 0;
}

main figure {
    margin: 0;
    padding: var(--smaller_space);
    
    background: var(--menu_focus_color);
    border: 1px solid var(--border_color);
}

main figure figcaption {
    padding-top: var(--smaller_space);
    
    text-align: center;
}

/* Main content / text */
main {
    background: var(--main_background_color);
}

h1 {
    margin-top: var(--small_space);
    margin-bottom: var(--smaller_space);
    font-size: var(--very_large_text_size);
    font-weight: bold;
}

h2 {
    margin-top: var(--small_space);
    margin-bottom: var(--smaller_space);
    font-size: var(--large_text_size);
    font-weight: bold;
}

h3 {
    margin-top: var(--smaller_space);
    margin-bottom: var(--smaller_space);
    font-size: var(--default_text_size);
}

/* Header / banner / top menu */
body > header {
    background: var(--menu_background_color_dark);
}

.pages_nav {
    background: var(--menu_background_color_dark);
}

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

.pages_nav a {
    color: var(--main_background_color);
    text-decoration: none;
}

.pages_nav li:hover > a,
.pages_nav a:focus {
    background: var(--menu_focus_color);
    color: var(--main_text_color);
}

.pages_nav a:focus,
.pages_nav a:active,
.pages_nav a:hover {
    text-decoration: none;
}

.pages_nav li.active a {
    font-weight: bold;
}

/* Articles */
pre {
    overflow: scroll;
    background: var(--menu_focus_color);
    padding: var(--tiny_space);
}

blockquote {
    text-indent: 0;
    margin-left: var(--smaller_space);
    margin-right: var(--smaller_space);
    padding-left: var(--small_space);
    padding-right: var(--small_space);
    padding-top: var(--smaller_space);
    padding-bottom: var(--smaller_space);
    background-color: var(--menu_focus_color);
}

article > p,
article > ul > li,
article figcaption {
    line-height: var(--large_text_size);
}

article > p,
article > ul > li {
    text-align: start;
}

article figcaption {
    text-align: center;
}

/* Remove space between p and ul, but restore bottom margin on end of article */
article > p {
    margin-bottom: 0;
    text-indent: var(--small_space);
}

article ul {
    margin-top: 0;
}

article > p:last-of-type,
article > blockquote > p:last-of-type {
    margin-bottom: revert;
}

.article_meta {
    padding: var(--smaller_space);
    
    background: var(--menu_focus_color);
    border: 1px solid var(--border_color);
}

.article_meta p {
    margin: 0;
}

.article_tag {
    padding: var(--tinier_space);
    border: 1px solid var(--border_color);
}

main nav {
    display: flex;
    flex-direction: row;
    
    margin-top: var(--small_space);
    margin-bottom: var(--small_space);
    
    padding: var(--smaller_space);
    
    background: var(--menu_focus_color);
    border: 1px solid var(--border_color);
}

main nav span {
    flex-grow: 999;
}

main nav a {
    flex-grow: 1;
}

/* Sidebar */
.sidebar_side {
    background: var(--menu_background_color_light);
    color: var(--main_text_color);
}

.sidebar_side p {
    margin-top: var(--small_space);
    margin-bottom: var(--tiny_space);
}

.sidebar_side ul {
    margin-top: var(--tiny_space);
    margin-bottom: var(--small_space);
    
    padding-left: var(--small_space);
}

.sidebar_side address {
    font-style: normal;
}

/* Footer */
footer {
    background: var(--menu_background_color_dark);
    color: var(--main_background_color);
    text-align: center;
}

footer p {
    margin: 0;
}

/* Layout utilities */
.fullwidth {
    max-width: 100%;
    width: 100%;
    display: block;
    box-sizing: border-box;
}

.inline_block {
    display: inline-block;
}

.smaller_vertical_padding {
    padding-top: var(--smaller_space);
    padding-bottom: var(--smaller_space);
}

.small_vertical_padding {
    padding-top: var(--small_space);
    padding-bottom: var(--small_space);
}

.small_lateral_padding {
    padding-left: var(--small_space);
    padding-right: var(--small_space);
}

.large_lateral_padding {
    padding-left: var(--large_space);
    padding-right: var(--large_space);
}

.spacer_vertical_tiny {
    padding-bottom: var(--tiny_space);
}

.spacer_horizontal_tiny {
    padding-right: var(--tiny_space);
}

/* Special case: banner */
.logo {
    margin: 0;
}

div.logo {
    background-image: url("../images/banner.png");
    background-size: cover;
    background-repeat: no-repeat;
    aspect-ratio: 1000/144;
}

p.logo {
    color: var(--main_background_color);
    font-size: var(--very_large_text_size);
}