/* Light/dark/nocturnal modes are defined as custom properties. */
:root {
--bg-color:		#FFFFFF; /* White */
--text-color:	#000000; /* black */
--a-link:		#0000FF; /* 0000FF blue */
--a-visited:	#551A8B; /* 551A8B is default on Firefox */
--a-hover:		#4169E1; /* 4169E1 royalBlue */
--a-active:		#FF0000; /* FF0000 red */
--heading-opacity:	1.0; /* not used (only for dark/noct modes) */
--img-opacity:		1.0; /* not used (only for noct mode) */
--img-opacity-trans: 0.0s; /* not used (only for noct mode) */
--hr-color:		#8f8f8f; /* white, 56% = 8f8f8f */
--toptext-color:		#545454; /* white, 33% = 545454 */
--toptext-border-color: #bfbfbf; /* white, 75% = bfbfbf */
--crumb-a-hover:		#6489f5; /* royalBlue 4169E1, lighter & less saturated: 6489f5 */
--sect-border-color:	#C9C9C9; /* white, 79% = C9C9C9 */
--table-border-color:	#999; /* white, 60% = 999 */
--table-alt-row-bg:		#f2f2f2; /* white, 95% = f2f2f2 */
--bold-color:	#000000; /* black. (Dark & noct modes need a different color) */
}

/* Lightmode is the default, it's :root */
.lightmode {
}

.darkmode {
--bg-color:		#121212; /* 121212 almost black */
--text-color:	#FFFFFF; /* white */
--a-link:		lightSkyBlue; /* lightSkyBlue 87CEFA */
--a-visited:	#bb86fc; /* bb86fc purple */
--a-hover:		#7bffff; /* cyan 00FFFF, less saturated, lighter: 7bffff */
--a-active:		#DDA0DD; /* plum DDA0DD; */
--heading-opacity: 0.92; /* the headings are a little bright in darkmode */
--img-opacity:			1.0;	/* not used */
--img-opacity-trans:	0.0s;	/* not used */
--hr-color:		#858585; /* white, 52% = 848484 */
--toptext-color:		#9C9C9C; /* white, 61% = 9C9C9C */
--toptext-border-color: #636363; /* white, 39% = 636363 */
--crumb-a-hover:		#63c2c2; /* cyan 00FFFF made darker: 63c2c2 */
--sect-border-color:	#4A4A4A; /* white, 29% = 4A4A4A */
--table-border-color:	#696969; /* white, 41% = 696969 */
--table-alt-row-bg:		#212121; /* white, 13% = 212121 */
--bold-color:	#FFBC00; /* FFBC00 amber. but a little brighter than noctmode's plain text. */
}

/* This mode is intended for a dark environment, or before bed time (there's no blue which
 * can interfere with "circadian rhythm"). Darkmode is more of the daytime mode. */
.noctmode {
--bg-color:		#000000; /* black */
--text-color:	#FFB900; /* amber FFB900
					Online ref says FFB000. Or, FFCC00 which is lighter. decimal 28 apart.
					Another ref says FFBF00. decimal 15 difference. I like FFB7 - B9. */
--a-link:		#FF8C00; /* darkOrange FF8C00. I like darker & more red: fd8a00 . this isn't bad: ff8800 */
--a-visited:	#32b000; /* 32b000 dimmer than an old-school CRT green */
--a-hover:		#f24200; /* orangeRed FF4500 but darker: f24200*/
--a-active:		#FFD700; /* gold FFD700 */
--heading-opacity:		0.86;	/* the headings are a little bright in noctmode */
--img-opacity:			0.5;	/* dim the images. Mouseover to brighten them */
--img-opacity-trans:	0.5s;	/* mouseover transition time */
--hr-color:				#805d00; /* amber FFB900, 50% = 805d00 */
--toptext-color:		#c28d00; /* amber FFB900, 76% = c28d00 */
--toptext-border-color: #7d5b00; /* amber FFB900, 49% = 7d5b00 */
--crumb-a-hover:		#c25400; /* orangeRed FF4500, darkened and desaturated */
--sect-border-color:	#4f3900; /* amber FFB900, 31% = 4f3900 */
--table-border-color:	#735300; /* amber FFB900, 45% = 735300 */
--table-alt-row-bg:		#1c1400; /* amber FFB900, 11% = 1c1400 */
--bold-color:	#E4E400; /* E4E400 yellow. This mode doesn't have many choices for color. This is all that's left. */
}


* {box-sizing: border-box;}

body {margin: 0;
	background-color: var(--bg-color);
	color: var(--text-color);
	line-height:1.5;
	font-family:Verdana,sans-serif;}

h1,h2,h3,h4,h5,h6{font-family:"Segoe UI",Arial,sans-serif;font-weight:400;margin:10px 0}

main {margin: 0 2%;}

h1 {margin-top: 0.3rem;} /* h1 is snugged under the breadcrumbs and display mode */
h1, h2, h3, h4, h5, h6 {opacity: var(--heading-opacity);}

/* Heading sizes comes from w3.css. It uses a base font-size: 15px. I don't set a base font-size. So, I made
 * the heading sizes proportional. */
/* h1{font-size:36px}h2{font-size:30px}h3{font-size:24px}h4{font-size:20px}h5{font-size:18px}h6{font-size:16px} */
h1{font-size:2.4rem}h2{font-size:2.0rem}h3{font-size:1.6rem}h4{font-size:1.33rem}h5{font-size:1.2rem}h6{font-size:1.07rem}

/* Increase the touchable area of links */
a {display: inline-block;
	position: relative;
	padding: 0.5rem;
	margin: -0.5rem;}

a:link {color: var(--a-link);}
a:visited {color: var(--a-visited);}
a:hover {color: var(--a-hover);}
a:active {color: var(--a-active);}

hr {border: none;
	height: 2px;
	background-color: var(--hr-color);}

/* misc style */
.center {text-align: center;}
.smaller {font-size: 90%;}
.archived {font-size: smaller;}
.archived a {font-style: italic;}

/* Fake "sup" appearance */
a.fn {font-size: 0.88rem;
	vertical-align: text-top;
	position: relative;
	top: -0.17rem;
	right: -0.01rem;}

/* bold, strong & table headings (dark & noct mode):
 * Bold doesn't stand out enough. I think this styling works. The small-caps
 * suggest bold/strong. The color too. */
body.darkmode b, body.darkmode strong, body.darkmode th,
body.noctmode b, body.noctmode strong, body.noctmode th {
font-family: "Courier New", monospace;
color: var(--bold-color);
font-weight: 600; /* this is supposed to be less heavy than bold's default 700. */
font-variant: small-caps;
letter-spacing: 0.03rem; /* a little more space between letters */
word-spacing: -0.4rem; /* a litte less space between words */
}

/* Courier (dark & noct modes) is smaller than the default text. It needs to be
 * larger to fit normal text */
body.darkmode b, body.darkmode strong,
body.noctmode b, body.darkmode strong {
font-size: 1.28rem;
}

/* I like table headings to be smaller (and have been set smaller at the bottom
 * of this file). But, courier (used for dark & noct modes) is smaller. I need
 * it to be larger. Courier also benefits from a different padding. */
body.darkmode th, body.noctmode th {
font-size: 1.19rem;
padding: 0 .28rem; /* 0 top/bottom, .28 left/right */
}

img {max-width: 100%; height: auto;
	aspect-ratio: 4 / 3;
	opacity: var(--img-opacity); transition: opacity var(--img-opacity-trans) ease-in;} /* used for nocturnal only */
img:hover {opacity: 1.0;}  /* used for nocturnal only */

/* SINGLE IMAGE
 * Images will left-align with the page, but have centered text beneath them, and
 * responsive to small screens (shrink to fit) */
div.image {text-align: left;
	/* Images will indent at the same rate as the nested sections do, and as
	 * tables do. */
	margin-left: clamp(1rem, 2.1vw, 1.75rem);}

div.image > div > span {display: inline-block;
	text-align: center;
	font-size: 90%;
	/* this is needed for Lighthouse touch size being too small/close */
	line-height: 1.33em;}

/* this is needed for Lighthouse touch size being too small/close
 * - This is for additional links (multi-line, like the leash-sleeve's paper snap-hole template) */
div.image > div > span > span.addl-links {
	line-height: 1.7em;}
/* END SINGLE IMAGE */


/* GROUP OF IMAGES
/* Images will left-align with the page, but have centered text beneath them, and
 * responsive to small screens (shrink to fit) */
div.images {text-align: left;
/*	width: 95%; */
	/* This container of images will indent at the same rate as the nested sections do, and as
	 * tables do (and as single images do). */
	margin-left: clamp(1rem, 2.1vw, 1.75rem);}

div.images::after { /* clear floating images */
	content: "";
	clear: both;
	display: table;}

div.images img {display: inline-block; float: left;
/*	width: 25vw;
	max-width: max-content; */
	margin: 2px;}

/* Revert the touchable area of links (Lighthouse objects) */
div.images a {padding: 0;
	margin: 0;}
/* END GROUP OF IMAGES */


/* footnote section */
section#fn > hr {margin-top: 1.75rem;}
section#fn > p:first-of-type {margin-top: .75rem;}
section#fn > h2 {display: none;}

/* Indent the nested sections (the div container which immediately follows the
 * first h1-6 of the section) */
section > h2:first-child + div,
section > h3:first-child + div,
section > h4:first-child + div,
section > h5:first-child + div,
section > h6:first-child + div {border-left: .09rem dashed var(--sect-border-color);
/* - margin-left causes the border to line up with the left-edge of the first
 * character of the heading above it.
 * - padding-left can be as large as 1.75rem (counting the margin-left's
 * contribution). But, no smaller than 1rem (counting margin-left's conribution).
 * It expands at a rate of 2.1vh. (A smaller vh expands slower. A larger vh
 * will reach the max padding sooner (a narrower window) */
			margin-left: .12rem;
			padding-left: clamp(.88rem, 2.1vw, 1.63rem);}


/* ------------ Header, breadcrumb links & display mode ------------ */

/* The header element is a flex container. The breadcrumb links & display mode
 * are displayed on opposite sides of the screen. Much easier than float left &
 * right. */
header {display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	/* after setting the body line height to 1.5, the breadcrumb links seem to have more.
	 * that might not be bad except the display mode doesn't. It looks uneven. This fixes it,
	 * but only if it's applied here. Applied to the ul or li, it doesn't. */
	line-height: 1.0;}

/* Style the list */
header > nav > ul {
	padding: 2px 10px;
	list-style: none;
	display: inline;
	vertical-align: middle;
	margin: 0;
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: var(--toptext-border-color);}

/* Display list items side by side */
header > nav > ul li {
	display: inline;
	font-size: 0.90rem;}

/* Add a slash symbol (>) before/behind each list item */
header > nav > ul li+li:before {
	padding: 2px;
	color: var(--toptext-border-color);
	content: ">\00a0";}

/* Add a color to all links inside the list */
header > nav > ul li a {
	color: var(--toptext-color) !important;
	text-decoration: none;}

/* Add a color on mouse-over */
header > nav > ul li a:hover {
	color: var(--crumb-a-hover) !important;
	text-decoration: underline;}

/* --- Display mode choices --- */
div#display-mode {
	background-color: var(--bg-color);
	color: var(--toptext-color);
	border-style: solid;
	border-width: 0 0 0 0;
	border-color: var(--toptext-border-color);}

header div#display-mode label {
	font-size: 0.90rem;}

header div#display-mode select {
	background-color: var(--bg-color);
	color: var(--toptext-color);
	border-width: 0 0 1px 0;
	border-style: solid;
	border-color: var(--toptext-border-color);
	font-size: 0.90rem;
	/* alternative to line-height on the header element, you can push the select
	 * down this way to match the breadcrumb */
	padding-top: 2px;}


/* -------------- Footer -------------- */
footer {font-style: italic;
	text-align: right;
	font-size: 0.94rem;
	color: var(--toptext-color);
	margin: 0 2% 0.8rem 2%;}

/* -------------- Tables --------------
 * The font-size and padding (for dark & noct modes) is set elsewhere. */
table th {font-size: 0.905rem;}

/* Borders */
table, table th, table td {
	border-style: solid;
	border-color: var(--table-border-color);
	border-width: 2px;
	border-collapse: collapse;}

/* cell padding (the th cell pading is changed for dark/light mode
 * because it uses a different font. The td font & padding remains the same) */
table th, table td {padding: .05rem .30rem;} /* .05 top/bottom, .30 left/right */

/* Indent tables */
table#costs-collars, table#costs-leashes, table#donations,
table#alloc-collars, table#alloc-leashes,
table#collars-materials, table#collars-lengths,
table#leashes-materials, table#leashes-lengths,
table#clamps-collars, table#settings-collars,
table#clamps-leashes, table#settings-leashes {
/* this is the same min & max as the nested sections get, and images get. These
 * images, tables and nested sections (the paragraph text within a section) should
 * indent the same amounts. */
margin-left: clamp(1rem, 2.1vw, 1.75rem);}