@charset 'utf-8';

/* ---- VARIABLES ---- */
/* TODO: look into relative color definitions, esp for 'subdued' def 
    see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_colors/Relative_colors
    esp the Color palette generator example, monochrome */
* {  
	--primary-bg-color: #fff;
    --secondary-bg-color: #ededed;
    --construction-bg-color: #f3e62d4e;
    --primary-txt-color: #171717;
	--secondary-txt-color: #73787c;
 /*   --primary-link-color: #46b;
    --secondary-link-color: #84b;
*/
    --primary-link-color: #171717;
    --secondary-link-color: #171717;
    --sans-serif-font-stack: ui-sans-serif, system-ui, sans-serif;
    --monospace-font-stack: ui-monospace, monospace;
}

@media (prefers-color-scheme: dark) {
    * {
		--primary-bg-color: #121212;
		--secondary-bg-color: #282828;
		--primary-txt-color: #aaa;
		--secondary-txt-color: #969696;
/*        --primary-link-color: #6c88b0;
        --secondary-link-color: #76678a;
*/
		--primary-link-color: #aaa;
		--secondary-link-color: #aaa;
    }
}

/* ---- END VARIABLE DEFINITIONS ---- */
/* ---- START STYLING ---- */
html {
	font-family: var(--sans-serif-font-stack);
	background: var(--primary-bg-color);
    max-width: 70ch;
    padding: 1em;
    margin: auto;
    line-height: 1.75;
	color: var(--primary-txt-color);
	/* next 3 lines disable auto-inflate on various mobile browsers */
	-moz-text-size-adjust: none;
	-webkit-text-size-adjust: none;
	text-size-adjust: none; 
}

/* ------ HYPERLINKS ------- */
/* style links to be unobtrusive but clear */
a {
    color: var(--primary-link-color);
    text-decoration-line: underline; /* text-decoration single line shorthand not working in Safari */
    text-decoration-style: dashed;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.3rem;
}
a:link {
    text-decoration-color: var(--primary-link-color);
}
a:hover { /* :focus puts a border around a link by default, so no need to add this for a:focus */
    font-weight: bolder;
}
a:visited {
    color: var(--secondary-link-color);
    text-decoration-color: var(--secondary-link-color);
}

/* ------- ASIDES and DETAILS ------- */
aside , details { /* style the same; their function is the same, only one is closable */ 
    border-top: 1px dotted var(--primary-txt-color);
    border-bottom: 1px dotted var(--primary-txt-color);
    background: var(--secondary-bg-color);
    margin: 3rem 0;
    padding: 1rem 2rem;
    font-size: 1rem;
}
details > summary { /* the freaking triangle is so tiny, I've made the text 'click to read' pfft */
    color: var(--secondary-txt-color);
}

aside.construction {
    background-color: var(--construction-bg-color);
}

/* ------- BLOCKQUOTES ------- */
/* for quotes in running text */
blockquote {
    font-style: italic;
    color: var(--secondary-txt-color);
	margin: 2em;
    border-left: 3px solid;
    padding-left: 1em;  
}
/* for top-of-page quotes on the main site */
figure > blockquote {
    border-left: none;
}
figure > blockquote, figure > blockquote > p {
        line-height: 1.3; /* for quotes that break over more than one line */
        margin-bottom: 0.2rem; /* so figcaption for author is closer */
}

/* ------- FIGURES ------- */
/* eg, story artwork at top of story page; blockquotes at top of main site pages */
figure {
    text-align: center;
    margin-bottom: 3em;
}
img {
    max-width: 80%;
    object-fit: contain;
    padding-bottom: 0.2em;
}
figcaption {
    font-size: 0.8rem;
    font-style: italic;
}

/* for multiple smaller images, easier to compare, such as MRI images */
/* note that on mobile it doesn't much make sense to put them side by side,
   so we'll skip that and just make them not honking wide on desktop */
figure > figure {
    margin-bottom: 0;
}

/* ------- HEADINGS and SUBTITLES ------- */
h1, h2, h3 {
	font-weight: normal;
	line-height: 1.3;
}
h2 { /* section titles */
    margin-top: 3rem;  /* more white space in pages with multiple sections */
}
h1.has-subtitle, h2.has-subtitle {
    margin-bottom: 0.3rem; 
}
h1.has-subtitle + p, h2.has-subtitle + p { /* first p elt after h1 or h2 is author, date, or similar */
    font-style: italic;
    color: var(--secondary-txt-color);
    margin-top: 0rem;
}
h1.has-subtitle + p { /* for pages with subtitles, add space to start of main content */
    margin-bottom: 2rem;
}

/* ------- DIVIDERS ------- */
hr {  /* used semantically, as scene divider */
    border: none;
    overflow: visible;
    text-align: center;
    height: 2rem;
    font-size: 2rem;
    padding: 1rem 0;
    font-weight: bold;
}
hr:after {
    content: '§';
    position: relative;
    top: -0.8rem; /* to vertically center it; depends also on <p> margins/padding */
}

/* ------- NAVIGATION ------- */
main > nav { /* link blocks above TOC on collection index pages */
    text-align: center;
    margin: 2rem 0;
}

/* ------- PREFORMATTED ------- */

pre.liz, pre.liz > code { /* for the stage directions in Liz Builds a Robot */
    background: var(--primary-bg-color);
    font-family: var(--monospace-font-stack);
    text-align: center;
    font-size: 0.7rem;
    line-height: 1.3;
    margin-top: 0.4em; 
    margin-bottom: 0.4em;
}

/* ------- TABLE OF CONTENTS ------- */
section.toc {
    margin: 2rem 0;
}
section.toc h1 { /* toc title, such as 'Table of Contents' */
   font-size: 2rem; /* smaller in section, article, aside, nav elts; compensate */
   margin-bottom: 1rem;
}
section.toc h1 + p { /* reset behavior when years separate sets of links in the toc */
    font-style: normal;
    color: var(--primary-txt-color);
    margin-bottom: 1rem;
}
section.toc.has-subtitle h1 { /* reproduce usual subtitle behavior in TOC */
    margin-bottom: 0.3rem;
}
section.toc.has-subtitle h1 + p { /* idem */
    font-style: italic;
    color: var(--secondary-txt-color);
    margin-top: 0;
    margin-bottom: 2rem;
}

/* ------- SPANS ------- */
 /* to use for first words of a new section, where desired */
span.newthought {
    font-variant: small-caps;
    font-size: 1.2em;
}

/* ------- TABLES ------- */
table {
    margin: 2rem 0;
    border-collapse: separate;
    border-spacing: 0;
    text-align: center;
    border: 1px dotted var(--secondary-txt-color);
}
thead {
    font-size: 0.8rem;
    background-color: var(--secondary-bg-color);
}
thead th {
    position: sticky; /* headers stay in view when user scrolls */
    top: 0;
    background-color: var(--secondary-bg-color);
    border-bottom: 2px solid var(--primary-txt-color);
    padding: 0.3rem;
    z-index: 1;
}
td {
    border-bottom: 1px solid var(--primary-txt-color);
    padding: 0.6rem;
}

tr:nth-child(even) { /* row background */
    background-color: var(--secondary-bg-color);
}
tr :nth-child(2) { /* override for text column */
    text-align: left;
}

/* ------- HEADERS and FOOTERS ------- */
/* I'm using multiple header and footer elements for the various
   levels of nav from 'this page' to 'this site' to 'the main site'.
   The below sets their relative spacing to one another and to the page's
   main content. The setup for header should mirror that for footer
   (and obv. vice versa). Note: if I ever decide I want mini-headers and
   footers within the page's main content, use main > <elt> to override 
   these settings.
*/
/* global header, footer settings common to both */
header, footer {
    text-align: center;
    font-size: 0.9rem;
}
/* spacing from page edge and main content */
header {
	margin-bottom: 3rem; /* to page content */
    margin-top: 1rem; /* from edge of page */
}
footer {
    margin-top: 3rem; /* from page content */
    margin-bottom: 1rem; /* to edge of page */
}
/* text elements marking the edge of the page content from the site nav */
header > p { /* name of site */
	font-size: 1rem; /* note, larger than the rest of header/footer text */
    border-bottom: 1px solid var(--secondary-txt-color);
    margin-bottom: 0.3rem; /* normally equals font size; brings the following nav links closer */
    padding-bottom: 0.2rem;  /* spacing from text to border; enough for link underline to look good */
}
footer > p { /* copyright text, link to license */
    border-top: 1px solid var(--secondary-txt-color);
    padding-top: 0.2rem;  /* spacing from border to text; needed bc font size smaller than in header */
}

/* --- end of page header / footer styling --- */