/*
 * Site overrides, loaded after main.css from blog-storage.
 * Adds light/dark theming, the shan-shui background layers, solid nav buttons and
 * the theme toggle.
 */

/* Theme tokens */

	:root {
		color-scheme: light;
		--text: #1d2733;
		--text-soft: rgba(29, 39, 51, 0.78);
		--text-shadow: 0 1px 14px rgba(255, 255, 255, 0.65);
		--sky-top: #e9eef3;
		--sky-bot: #cfd9e3;
		--mist: rgba(238, 243, 247, 0.8);
		--footer-fade: rgba(255, 255, 255, 0.45);
		--btn-bg: rgba(255, 255, 255, 0.9);
		--btn-bg-hover: #fff;
		--btn-fg: #1f2d3d;
		--btn-border: rgba(31, 45, 61, 0.14);
		--btn-shadow: 0 2px 8px rgba(31, 45, 61, 0.12);
		--btn-shadow-hover: 0 8px 22px rgba(31, 45, 61, 0.22);
		--ring: rgba(42, 68, 102, 0.45);
		--accent: #2c3e50;
	}

	:root[data-theme="dark"] {
		color-scheme: dark;
		--text: #f1f5f9;
		--text-soft: rgba(241, 245, 249, 0.78);
		--text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
		--sky-top: #0b1220;
		--sky-bot: #142033;
		--mist: rgba(8, 13, 24, 0.7);
		--footer-fade: rgba(0, 0, 0, 0.5);
		--btn-bg: rgba(17, 24, 39, 0.88);
		--btn-bg-hover: rgba(30, 41, 59, 0.98);
		--btn-fg: #e2e8f0;
		--btn-border: rgba(226, 232, 240, 0.16);
		--btn-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
		--btn-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.5);
		--ring: rgba(159, 179, 200, 0.6);
		--accent: #9fb3c8;
	}

	/* No JavaScript: follow the OS setting. */
	@media (prefers-color-scheme: dark) {
		:root:not([data-theme]) {
			color-scheme: dark;
			--text: #f1f5f9;
			--text-soft: rgba(241, 245, 249, 0.78);
			--text-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
			--sky-top: #0b1220;
			--sky-bot: #142033;
			--mist: rgba(8, 13, 24, 0.7);
			--footer-fade: rgba(0, 0, 0, 0.5);
			--btn-bg: rgba(17, 24, 39, 0.88);
			--btn-bg-hover: rgba(30, 41, 59, 0.98);
			--btn-fg: #e2e8f0;
			--btn-border: rgba(226, 232, 240, 0.16);
			--btn-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
			--btn-shadow-hover: 0 10px 26px rgba(0, 0, 0, 0.5);
			--ring: rgba(159, 179, 200, 0.6);
			--accent: #9fb3c8;
		}
	}

/* Basic */

	body {
		background: var(--sky-bot);
	}

	body, input, select, textarea {
		color: var(--text);
	}

	#header h1 {
		text-shadow: var(--text-shadow);
	}

	#header p {
		color: var(--text-soft);
		opacity: 1;
		text-shadow: var(--text-shadow);
	}

/* BG: replaces the scrolling bg.jpg */

	#bg {
		animation: none;
		background: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
		overflow: hidden;
		width: 100%;
	}

	#ss-sky {
		background-color: var(--sky-bot);
		background-image: linear-gradient(to bottom, var(--sky-top), var(--sky-bot));
		inset: 0;
		position: absolute;
	}

	#ss-track {
		bottom: 0;
		left: 0;
		mix-blend-mode: multiply;
		opacity: 0.92;
		position: absolute;
		transition: opacity 0.35s ease-in-out;
		width: 100%;
		will-change: transform;
	}

		/* Set by background.js from the colours the panels are drawn in, which lag the
		   page theme while a switch is in progress. */
		#ss-track[data-theme="dark"] {
			mix-blend-mode: screen;
			opacity: 0.85;
		}

		#ss-track.is-fading {
			opacity: 0;
		}

	.ss-panel {
		display: block;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: 0;
		transition: opacity 1.2s ease-in-out;
		user-select: none;
	}

		.ss-panel.is-ready {
			opacity: 1;
		}

/* Overlay: a soft mist behind the header instead of the dot pattern */

	#overlay {
		background-image: radial-gradient(ellipse 60% 50% at 50% 46%, var(--mist), transparent 72%);
		background-size: cover;
	}

/* Nav buttons: solid, with a lift on hover. Icons are inline SVGs from
   assets/icons/icons.svg, sized to match the Font Awesome glyphs they replace. */

	#header nav li {
		align-items: center;
		display: inline-flex;
		justify-content: center;
		vertical-align: top;
	}

	#header nav a {
		align-items: center;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		background-color: var(--btn-bg);
		border: solid 1px var(--btn-border);
		border-radius: 100%;
		box-shadow: var(--btn-shadow);
		color: var(--btn-fg);
		display: inline-flex;
		height: 4.375em;
		justify-content: center;
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out, font-size 0.2s ease-in-out;
		vertical-align: middle;
		width: 4.375em;
	}

		#header nav a:before {
			content: none;
		}

		#header nav a svg {
			fill: currentColor;
			height: 1.75em;
			width: 1.75em;
		}

	#header nav a:hover,
	#header nav a:focus-visible {
		background-color: var(--btn-bg-hover);
		box-shadow: var(--btn-shadow-hover);
		color: var(--accent);
		transform: translateY(-2px);
	}

	#header nav a:active {
		background-color: var(--btn-bg-hover);
		box-shadow: var(--btn-shadow);
		color: var(--accent);
		transform: translateY(0);
	}

	#header nav a:focus {
		outline: none;
	}

	#header nav a:focus-visible {
		box-shadow: var(--btn-shadow-hover), 0 0 0 3px var(--ring);
	}

/* Footer */

	#footer {
		background-image: linear-gradient(to bottom, transparent, var(--footer-fade) 75%);
	}

		#footer .copyright {
			color: var(--text-soft);
		}

/* Theme toggle */

	#theme-toggle {
		align-items: center;
		animation: theme-toggle 1s 3s forwards;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
		background: var(--btn-bg);
		border: solid 1px var(--btn-border);
		border-radius: 100%;
		bottom: calc(16px + env(safe-area-inset-bottom, 0px));
		box-shadow: var(--btn-shadow);
		color: var(--btn-fg);
		cursor: pointer;
		display: flex;
		height: 40px;
		justify-content: center;
		opacity: 0;
		padding: 0;
		position: fixed;
		right: calc(16px + env(safe-area-inset-right, 0px));
		transition: background-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out, color 0.2s ease-in-out, transform 0.2s ease-in-out;
		width: 40px;
		z-index: 10;
	}

		#theme-toggle:hover,
		#theme-toggle:focus-visible {
			background: var(--btn-bg-hover);
			box-shadow: var(--btn-shadow-hover);
			color: var(--accent);
			transform: translateY(-2px);
		}

		#theme-toggle:focus {
			outline: none;
		}

		#theme-toggle:focus-visible {
			box-shadow: var(--btn-shadow-hover), 0 0 0 3px var(--ring);
		}

		#theme-toggle svg {
			display: block;
			height: 20px;
			width: 20px;
		}

		/* Show the mode a click switches to. */
		#theme-toggle .icon-sun,
		:root[data-theme="dark"] #theme-toggle .icon-moon {
			display: none;
		}

		:root[data-theme="dark"] #theme-toggle .icon-sun {
			display: block;
		}

	@keyframes theme-toggle {
		to {
			opacity: 1;
		}
	}

/* Reduced motion: no fades beyond the essentials */

	@media (prefers-reduced-motion: reduce) {
		.ss-panel, #ss-track, #theme-toggle, #header nav a {
			transition: none;
		}
	}