/*
 * dthers website style sheet
 * contains css variables (may be turned to processed css later)
 * desktop only atm
 * TODO phone mode
 */
:root {
	/* palette inspired by less eye-searing version of the ANSI standard terminal colors */
	/* TODO for "just" named colours, a preprocessor would be better */
	/* TODO actual color palette? might rethink this...
	#393939 #ca674a #96a967 #d3a94a #5778c1 #9c35ac #6eb5f3 #a9a9a9
	#535551 #ea2828 #87dd32 #f7e44d #6f9bca #a97ca4 #32dddd #e9e9e7 
	#d7d7d7 #101010
	*/
	--black: #111;
	--white: #FFF;

	/* Hmm. */
	/*--dblack: #333;*/
	--dblack: #222;
	--dred: #ca674a;
	/*--dgreen: #96a967;*/
	--dgreen: darkgreen;
	--dyellow: goldenrod;
	--dblue: navy;
	--dmagenta: darkmagenta;
	--dcyan: darkcyan;
	--dwhite: lightgray;

	--lblack: gray;
	--lred: red;
	--lgreen: #87dd32;
	--lyellow: gold;
	--lblue: #6f9bca;
	--lmagenta: magenta;
	--lcyan: cyan;
	--lwhite: whitesmoke;

	/* default case: page side margins approx. a golden grid */
	/* phi = 0.618 = 61.8%
	 * phi^2 = 0.382 = 38.2%
	 * phi^3 = 0.236 = 23.6%
	 */
	--mainmargin: 23.6vw;

	/* narrow viewport: No side margins (though sections will likely be padded) */
	@media (max-width: 80ex) {
		/*--mainmargin: 1ex;*/
		--mainmargin: 0;
	}

	/* TODO i use text width a lot, i ought to explain why in the README
	 * it's because it helps the graphics look just a little old-fashioned.
	 * As though they were made using box-drawing characters. */
}

body {
	background-color: var(--lblue);
	margin: 0;
	font-family: sans-serif;
	min-height: 100vh;

	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

/* general purpose logo class for [dther.xyz] */
.dtherxyz {
	color: var(--lblue);
	background: var(--black);
	text-decoration: none;

	.bracket {
		color: var(--lred);
	}

	.tld {
		color: var(--lgreen);
	}

	.dot {
		color: var(--lyellow);
	}
}

/* header shared on all pages, contains the navbar */
header {
	background: var(--dwhite);
	font-weight: bold;
	margin: 0;
	display: flex;
	align-items: stretch;
	justify-content: center;

	/* logo + link to index */
	a.dtherxyz {
		padding: 0 1em;
		&:hover {
			text-decoration: underline;
			background: var(--lblack);
		}

		&:active {
			color: var(--lwhite);
		}

		/* abuse flexbox, again, to center text*/
		display: flex;
		align-items: center;
		h1 {
			font-size: 1.5em;
		}
	}

	menu {
		flex-grow: 2;
		display: flex;
		justify-content: center;
		margin: 0;
		padding: 0;
		align-items: stretch;
		height: 100%;
	}

	li {
		background: var(--dwhite);
		display: flex;

		a {
			border: outset var(--lwhite);
			padding: .5ex 1em;
			margin: 0;
			color: var(--black);
			text-decoration: none;
		}

		a:hover {
			background: var(--lblack);
			color: var(--dwhite);
		}

		a:active {
			border: inset var(--dwhite);
			background: var(--lblack);
			color: var(--lwhite);
		}
	}

}

/* FIXME: i'm running into a semantic problem in that I use "main" to mean something different in each page
 * on the home page it means the entire viewport that isn't the nav bar or the footer
 * almost everywhere else it means the portion directly underneath the nav bar
 * I don't know how to square this.
 */
main {
	margin: 0 var(--mainmargin);
	flex-grow: 1;
	/* TODO account for phones (no/very narrow margins) */
}

/* TODO alternative main settings for narrow viewports:
 * center the heading and the readable content
 */
/*main { text-align: center; * {text-align: initial;} }*/

footer {
	text-align: right;
	margin: 1em 0 0;
	bottom: 0;
	right: 0;
}

button, .button {
	/* originally just for index's button.flip, but
	 * I quite like how this looks as a "default" for button appearance
	 */
	border: outset;
	border-width: .5ex;
	border-radius: 1em;

	font-size: 1em;
	padding: 1ex;
	font-weight: bold;

	box-shadow: .5ex .5em var(--dblack);
	background: var(--lwhite);

	/* FIXME this is some weird selection behaviour.
	See the mdn web docs for CSS nesting > Compound selectors. */
	&:hover {
		background: var(--dwhite);
		cursor: pointer;
	}
	&:focus-visible {
		/* feedback for people using keyboard navigation! */
		background: var(--dwhite);
	}
	&:active {
		border: inset;
		background: var(--lblack);
		color:white;
		box-shadow: none;
	}
}

/* remove default margins/padding for common phrasing elements for more control */
h1, h2, h3, h4, h5, h6, p, hgroup {
	margin: 0;
	padding: 0;
}

/* Paragraphs should have indents by default */
p {
	text-indent: 2ex;
}

/* unless it's a subtitle */
hgroup p {
	text-indent: 0;
}

/* .main.headings are the first heading on the page.
 * They are generally an hgroup containing h1.
 * Most pages have custom styling for their main heading. */
.main.heading {
	position: relative;
	margin: 1em 0;
	display: inline-block;
	/*box-shadow: 1ex 1em var(--dblack);*/
}

/* .backdrop: imgs or svgs that are backdrops to transparent content */
.backdrop {
	/* NOTE: container MUST have a definite size somehow, else .backdrop will expand to be the size of the viewport.
	 *
	 * in Chromium this can be done by putting a non-absolute sized sibling
	 * immediately after svg.backdrop,
	 * combined with giving the parent container a drop shadow filter
	 * or making the parent container position:relative
	 * 
	 * ... yeah, this is getting into weird, undefined territory.
	 * this may be a sign that I desperately need to use a simpler mechanism for this
	 */
	width: 100%;
	height: 100%;
	/* TODO see if I can size SVG according to text (em/ex) */
	position: absolute;
	z-index: -1;
	filter: drop-shadow(1ex 1em var(--dblack));
	display:inline;
}

/* In most cases, I want text to be on a white background,
 * so as to resemble a piece of paper with small margins.
 * .paper or .textbox will accomplish this.
 */
.paper, .textbox {
	padding: 1em 1ex 1em;
	background: var(--lwhite);
}

/* breadcrumbs: makes a nav element with an ordered list of links look like this:
 * Index > ... > Content (you are here) */
.breadcrumbs {
	display: block;
	text-indent: 0;
	margin: 1em;

	ol {
		padding: 0;
		margin: 0;
	}

	a {
		color: inherit;
	}

	a:hover {
		background: var(--lblack);
	}

	li {
		display: inline;
	}

	li::after {
		content: ' >';
	}

	/* current location */
	.current {
		font-weight: bold;
		small {
			font-weight: normal;
		}
	}

	.current::after {
		/* TODO I want to put "you are here". Do i do that here or in HTML? */
		/*font-weight: normal;
		content: " (you are here)";*/
		content: normal;
	}
}

/* .polaroid: picture that looks like it came from an analog instant camera.
 * The most well-known examples were produced by the Polaroid camera company.
 * look like this:
 *  ___________ 
 * | _________ |
 * ||         ||
 * ||         ||
 * || picture ||
 * ||         ||
 * ||_________||
 * |           |
 * |  caption  |
 * |___________|
 *
 * "picture" might not be an image or inlined SVG,
 * it could be a link to a bigger image, MathML, a paragraph, or ASCII art,
 * so i'm using the :first-child selector with .picture as a fallback.
 */
.polaroid {
	background: var(--dwhite);
	text-align: center;
	box-shadow: 1ex 1em var(--dblack);
	display: flex;
	flex-direction: column;
	border: outset;

	.caption {
		margin: 1em;
		text-align: center;
	}

	.picture, :first-child {
		/* TODO generally, polaroids have a square picture.
		 * Can we force this somehow? */
		background: var(--lblack);
		flex-grow: 10;
		margin: 1em 1ex 0;
	}
}

/* In testing, visually subtle text hints were noted
 * as useful for members within the target demographic
 * who were not of a technical background while not distracting
 * other users.
 *
 * making these "visually subtle" is context dependent,
 * but in general they're exactly one line long,
 * take up as little space as possible,
 * and have a colour that blends in to the background somewhat,
 * but become more visible when hovered over.
 *
 * example hints:
 * - (click to zoom)
 * - (click+drag to pan)
 * - Jump to section...
 */
.hint {
	margin: 0;
	padding: 0;
	min-width: max-content;
	max-height: min-content;
}

/* color which section we're in */
.navbar .active {
	background: var(--lblue);
	color: var(--lwhite);
	border: ridge .25em var(--lwhite);
}