/* Dark mode (inc/dark-mode.php): the notebook at night.
   The colours themselves are the variables at the top of style.css. This file
   holds the switch, and repaints what is not a variable: the drawings, the
   notebook's edges and cover, and a few boxes. Nothing here applies until
   html has the class rhr-dark, except the switch itself. */

/* ---- The switch, beside the magnifying glass ---- */

.rhr-theme-toggle {
	position: absolute;
	z-index: 40;
	top: calc(var(--u) * 34);
	right: calc(var(--u) * 46 + max(30px, var(--u) * 66) + 1.3em);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.05em;
	margin: 0;
	padding: 0.2em;
	border: 0;
	background: none;
	color: inherit;
	font: inherit;
	font-size: 0.72em;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
	transition: color 0.12s ease, transform 0.15s ease;
}

.rhr-theme-toggle[hidden] {
	display: none;
}

.rhr-theme-toggle:hover {
	color: var(--ink-blue);
	transform: rotate(-3deg) scale(1.04);
}

.rhr-moon {
	display: block;
	width: max(30px, calc(var(--u) * 66));
	height: auto;
	overflow: visible;
}

/* Off: an outline of a moon. On: the moon inked in, with two stars. */
.rhr-moon__face {
	fill: none;
}

.rhr-moon__stars {
	display: none;
}

.rhr-theme-toggle[aria-pressed="true"] .rhr-moon__face {
	fill: var(--marker);
}

.rhr-theme-toggle[aria-pressed="true"] .rhr-moon__stars {
	display: inline;
}

/* On phones the drawings fill the width, so the moon sits under the glass. */
@media (max-width: 900px) {
	.rhr-theme-toggle {
		top: calc(var(--u) * 20 + max(30px, var(--u) * 66) + 1.9em);
		right: calc(var(--vw) * 3 + 0.5em);
		font-size: 0.62em;
	}
}

.rhr-theme-toggle--corner,
.rhr-theme-toggle--corner:hover {
	top: calc(var(--u) * 34);
	right: calc(var(--u) * 46);
}

@media (max-width: 900px) {
	.rhr-theme-toggle--corner,
	.rhr-theme-toggle--corner:hover {
		top: calc(var(--u) * 20);
		right: calc(var(--vw) * 3);
	}
}

@media (prefers-reduced-motion: reduce) {
	.rhr-theme-toggle,
	.rhr-theme-toggle:hover {
		transition: none;
		transform: none;
	}
}

/* ---- The drawings ---- */

/* Black pen turns to pale ink; the red flames, blue tabs and white lettering
   stay as drawn (the filter is printed at the top of the body).
   :where() keeps this below the blue hover ink and the drawings' own filters. */
:where(.rhr-dark) .rhr-art,
:where(.rhr-dark) .rhr-fcard::after,
:where(.rhr-dark) .rhr-pic::after,
:where(.rhr-dark) .rhr-box::before {
	filter: url(#rhr-ink-night);
}

/* Lettering drawn over hand-colouring (the yellow logo and section headings,
   the green Buy buttons, the blue tabs) stays black: pale ink on yellow or
   green would be hard to read. */
:where(.rhr-dark) .rhr-inked--logo > .rhr-art,
:where(.rhr-dark) .rhr-inked--cur-deals > .rhr-art,
:where(.rhr-dark) .rhr-inked--cur-reviews > .rhr-art,
:where(.rhr-dark) .rhr-inked--cur-videos > .rhr-art,
:where(.rhr-dark) .rhr-inked--buy .rhr-art,
:where(.rhr-dark) .rhr-label .rhr-art {
	filter: none;
}

/* The play button over a photo: pale ink with a dark halo. */
.rhr-dark .rhr-video__play.rhr-art {
	filter: url(#rhr-ink-night) drop-shadow(0 0 5px var(--glow)) drop-shadow(0 0 2px var(--glow));
}

/* ---- The notebook ---- */

/* --paper-bg's picture would be looked for beside this file, not beside
   style.css, so the night paper is spelled out here. */
.rhr-dark .rhr-page {
	background:
		linear-gradient(to right, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.14) 10px, rgba(0, 0, 0, 0) 34px),
		var(--paper) url(../img/night/notebook-paper-texture.jpg) 0 0 / 384px 384px;
}

@media (min-width: 1320px) {
	.rhr-dark .rhr-page {
		background:
			linear-gradient(to right, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.36) 8px, rgba(0, 0, 0, 0.16) 28px, rgba(0, 0, 0, 0.06) 66px, rgba(0, 0, 0, 0) 120px),
			linear-gradient(to left, rgba(0, 0, 0, 0.12), rgba(0, 0, 0, 0) 14px),
			var(--paper) url(../img/night/notebook-paper-texture.jpg) 0 0 / 384px 384px;
		/* the edges of the pages underneath, in shadow */
		box-shadow:
			1px 1px 0 #0d0c0b,
			3px 3px 0 #2a2823,
			4px 4px 0 #0e0d0c,
			6px 6px 0 #272520,
			7px 7px 0 #0d0c0b,
			9px 9px 0 #24221e,
			10px 10px 0 #0b0a09,
			13px 14px 12px rgba(0, 0, 0, 0.8);
	}

	/* the cover and spine, in lamplight */
	.rhr-dark .rhr-page::before {
		background:
			linear-gradient(to right, #120a05, #4a3220 5px, #2a1a0f 12px, #3e2818 19px, #160d06 22px, rgba(22, 13, 6, 0) 23px),
			linear-gradient(160deg, #3f2a19, #2a1c11);
		box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6), inset 0 1px 0 1px rgba(255, 220, 180, 0.06), 0 1px 2px rgba(0, 0, 0, 0.6), 0 3px 8px rgba(0, 0, 0, 0.5), 6px 22px 46px rgba(0, 0, 0, 0.6);
	}
}

/* ---- Boxes and fields ---- */

.rhr-dark .rhr-central .rhr-slider--inside > .rhr-slider__arrow {
	background: rgba(34, 32, 28, 0.86);
}

.rhr-dark select.rhr-field {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.3c1.7 1.9 3.2 3.6 5 5.4 1.6-1.9 3.3-3.6 5-5.3' fill='none' stroke='%23ece5d3' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
}

.rhr-dark ::placeholder {
	color: #a9a293;
	opacity: 1;
}

.rhr-dark .rhr-preview-banner {
	background: #4a3d0c;
}

.rhr-dark ::selection {
	background: var(--marker);
	color: var(--on-marker);
}

/* Photos stay as taken; only a hair dimmer, so a white product shot does not glare. */
.rhr-dark .rhr-pic__media > img:not(.rhr-art),
.rhr-dark .rhr-fcard__photo > img:not(.rhr-art),
.rhr-dark .rhr-product__image > img:not(.rhr-art) {
	filter: brightness(0.92);
}

/* Scampers (inc/scampers.php) keeps his pale skin and black spots; a thin
   pale edge keeps his outline from sinking into the dark paper. */
.rhr-dark .rhr-scampers__frames,
.rhr-dark .rhr-scampers-note__art {
	filter: drop-shadow(0 0 1px #ece5d3) drop-shadow(0 0 1px #ece5d3);
}

.rhr-dark .rhr-scampers-note {
	background-image: url(../img/night/notebook-paper-texture.jpg);
}