/*-------------------------------------------------
  Dark mode + theme toggle.

  Additive: loaded after default_right.css, which is kept exactly as restored
  from the archive. Every colour goes through a custom property whose light
  value is the original one, so the light theme renders unchanged.

  Cascade, in order:
    1. no [data-theme]      -> light, unless the OS asks for dark
    2. [data-theme="dark"]  -> dark,  overriding the OS
    3. [data-theme="light"] -> light, overriding the OS

  The dark block is written twice on purpose. Collapsing it would need
  light-dark() or style queries, and this page should stay readable on the
  older browsers its audience may well be using; custom properties alone go
  back much further.
-------------------------------------------------*/

:root
{
	color-scheme: light;

	--page-bg:         white;
	--surface:         white;
	--text:            #222;
	--border:          #E0E0E0;

	--link:            #58e;
	--link-hover:      black;

	--banner:          url(images/header_sm.jpg);
	--banner-text:     #222;

	--toggle-bg:       #ffffff;
	--toggle-border:   #d8d8d8;
	--toggle-fg:       #4a4a4a;
	--toggle-bg-hover: #f4f4f4;

	/* Which toggle icon shows. Rides the same cascade as the colours, so the
	   icon can never disagree with the theme that is actually applied. */
	--icon-sun:        none;
	--icon-moon:       block;
}

/* The gold banner is the site's identity, so dark mode keeps the gradient and
   deepens it rather than falling back to grey. Same hue and the same 162px
   strip geometry as the original image, at far lower luminance. */
@media (prefers-color-scheme: dark)
{
	:root:not([data-theme="light"])
	{
		color-scheme: dark;

		--page-bg:         #0f1114;
		--surface:         #16191d;
		--text:            #d7dae0;
		--border:          #2a2f36;

		--link:            #7fb4ff;
		--link-hover:      #ffffff;

		--banner:          linear-gradient(to bottom, #4a3d0d 0%, #6d5809 100%);
		--banner-text:     #f7efd4;

		--toggle-bg:       #1e2228;
		--toggle-border:   #333941;
		--toggle-fg:       #d7dae0;
		--toggle-bg-hover: #262b32;

		--icon-sun:        block;
		--icon-moon:       none;
	}
}

:root[data-theme="dark"]
{
	color-scheme: dark;

	--page-bg:         #0f1114;
	--surface:         #16191d;
	--text:            #d7dae0;
	--border:          #2a2f36;

	--link:            #7fb4ff;
	--link-hover:      #ffffff;

	--banner:          linear-gradient(to bottom, #4a3d0d 0%, #6d5809 100%);
	--banner-text:     #f7efd4;

	--toggle-bg:       #1e2228;
	--toggle-border:   #333941;
	--toggle-fg:       #d7dae0;
	--toggle-bg-hover: #262b32;

	--icon-sun:        block;
	--icon-moon:       none;
}

/*-------------------------------------------------
  Apply over default_right.css.
  Only selectors that match something in this page are listed.
-------------------------------------------------*/

body              { background: var(--page-bg); color: var(--text); }
#header,
#mainwrapper,
#wrapper          { background: var(--surface); }
#mainwrapper      { border-color: var(--border); }

#header h1
{
	color: var(--banner-text);
	background: var(--surface) var(--banner) repeat-x 0 6px;
	background-size: auto 162px;
}

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

/* hr is left to the UA default; color-scheme above makes it adapt on its own. */

/*-------------------------------------------------
  Toggle button
-------------------------------------------------*/

/* Hidden until theme.js marks the document as scripted. Without JS the button
   could not do anything, and the OS preference already applies. */
.theme-toggle              { display: none; }
:root.has-js .theme-toggle { display: block; }

.theme-toggle
{
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 2;

	width: 34px;
	height: 34px;
	padding: 0;
	border: 1px solid var(--toggle-border);
	border-radius: 50%;
	background: var(--toggle-bg);
	color: var(--toggle-fg);

	cursor: pointer;
	line-height: 0;
	text-align: center;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.theme-toggle:hover         { background: var(--toggle-bg-hover); }
.theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.theme-toggle svg
{
	width: 18px;
	height: 18px;
	display: block;
	margin: 0 auto;
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.theme-toggle .icon-sun  { display: var(--icon-sun); }
.theme-toggle .icon-moon { display: var(--icon-moon); }

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

/*-------------------------------------------------
  The layout is a fixed 1004px, so on a narrower screen the button would sit
  off-canvas. Pin it to the viewport there instead.
-------------------------------------------------*/
@media (max-width: 1003px)
{
	.theme-toggle { position: fixed; top: 10px; right: 10px; }
}