/* =========================================================================
   AECRL dark theme
   -------------------------------------------------------------------------
   Everything here is scoped to html[data-theme="dark"], which a few bytes of
   script in the <head> set before the page paints (functions.php,
   aecrl_theme_boot). Without that attribute this file does nothing.

   HOW IT WORKS. Nearly every colour on the site comes from WordPress's
   palette variables (--wp--preset--color--*), so the dark theme is mostly
   those variables redefined. The rest of this file handles the colours that
   do two jobs, where flipping the variable would be wrong for one of them:

     "background" (white)  is the page background AND the text colour on the
                           dark hero and footer; the text must stay light.
     "secaccent" (navy)    is the body text colour AND the footer's
                           background; the footer must stay dark.
     "accent-text" copper  is the link colour AND the button background; links
                           need a lighter copper on dark, buttons the darker
                           one, or white button text becomes unreadable.

   The palette. Not an inversion of the light one: a deep aubergine-navy
   ground (the laboratory's navy, lowered), warm light text, and the copper
   lifted so it still reads as the same copper against the dark.
   ========================================================================= */

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

	--aecrl-d-ground: #14111b;
	--aecrl-d-panel: #1b1724;
	--aecrl-d-panel-blue: #1b2230;
	--aecrl-d-deep: #0d0b12;
	--aecrl-d-ink: #ece8f2;
	--aecrl-d-muted: #aaa5b5;
	--aecrl-d-line: #2e2839;
	--aecrl-d-copper: #dda56c;
	--aecrl-d-copper-line: #c98a4c;
	--aecrl-d-button: #8a5622;

	--wp--preset--color--background: var(--aecrl-d-ground);
	--wp--preset--color--fourground: var(--aecrl-d-panel);
	--wp--preset--color--secbackground: var(--aecrl-d-panel-blue);
	--wp--preset--color--primary: var(--aecrl-d-ink);
	--wp--preset--color--tertiary: #e2dde9;
	--wp--preset--color--secaccent: var(--aecrl-d-ink);
	--wp--preset--color--muted: var(--aecrl-d-muted);
	--wp--preset--color--hairline: var(--aecrl-d-line);
	--wp--preset--color--accent: var(--aecrl-d-copper-line);
	--wp--preset--color--accent-text: var(--aecrl-d-copper);

	--wp--preset--color--status-ok-bg: #15301f;
	--wp--preset--color--status-ok-fg: #8bd9a3;
	--wp--preset--color--status-warn-bg: #372a11;
	--wp--preset--color--status-warn-fg: #f0c46e;
	--wp--preset--color--status-alert-bg: #3a1a1c;
	--wp--preset--color--status-alert-fg: #f29d9d;

	/* The air background reads these (assets/air.js). */
	--air-sulfate: 132, 178, 210;
	--air-organic: 214, 150, 88;
	--air-soot: 190, 184, 204;
	--air-dust: 222, 196, 150;
	--air-wind: 150, 176, 204;
	--air-strength: 1.45;
	--air-haze: 205, 188, 160;
	--air-haze-scale: 0.55;

}

/* The page colour. Only body gets it, never <html>: while <html> has no
   background of its own, the browser paints body's colour underneath
   everything, beneath even the air background's canvas (z-index -1). Giving
   <html> a background would put body's colour ABOVE the canvas and hide the
   particles, which is exactly what the first version did. */
html[data-theme="dark"] body {
	background-color: var(--aecrl-d-ground);
	color: var(--aecrl-d-ink);
}

/* "background" as a TEXT colour: text laid on the hero photograph and on the
   footer. It stays light. */
html[data-theme="dark"] .has-background-color {
	color: #fff !important;
}

/* "secaccent" as a BACKGROUND: the footer and the dark bands. Kept dark, a
   step deeper than the page so the footer still reads as its own block. */
html[data-theme="dark"] .has-secaccent-background-color:not(.wp-block-cover__background) {
	background-color: var(--aecrl-d-deep) !important;
}

/* A photograph's darkening layer carries the same class, but it must stay a
   see-through gradient (interface.css); a solid colour here hid the homepage
   photograph entirely. */

/* Buttons keep the darker copper under white text (6:1). */
html[data-theme="dark"] .wp-block-button__link.has-accent-background-color,
html[data-theme="dark"] .wp-block-button .wp-block-button__link.has-accent-background-color,
html[data-theme="dark"] .wp-block-button__link.has-accent-text-background-color {
	background-color: var(--aecrl-d-button) !important;
	color: #fff !important;
}

/* The header: the parent theme paints it white. */
html[data-theme="dark"] .wp-site-blocks header,
html[data-theme="dark"] header.wp-block-template-part,
html[data-theme="dark"] .header-box-upper,
html[data-theme="dark"] .inner-menu-col {
	background-color: var(--aecrl-d-ground) !important;
}

html[data-theme="dark"] .wp-site-blocks header {
	box-shadow: 0 1px 0 var(--aecrl-d-line);
}

/* Photographs: a touch less bright, so a white-sky photo does not glare out
   of a dark page. Logos and the FRNK emote are left alone. */
html[data-theme="dark"] main img:not([src*="logo"]):not([src$=".svg"]) {
	filter: brightness(0.92);
}

/* -------------------------------------------------------------------------
   The switch (assets/theme.js). Sits at the end of the header's menu column,
   in either theme; it is added by script, so it never shows without one.
   ------------------------------------------------------------------------- */
.header-inner-menu.has-theme-toggle {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	/* Wide enough apart that a thumb meant for one does not land on the
	   other (was 0.6rem, about 10px, and read as one cramped cluster). */
	gap: 1.1rem;
}

/* Beside the 44px menu disc, the switch at 40px so the pair reads as a set. */
.header-inner-menu.has-theme-toggle .aecrl-theme-toggle {
	width: 2.5rem;
	height: 2.5rem;
}

.aecrl-theme-toggle {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	padding: 0;
	border: 1px solid var(--wp--preset--color--hairline, #e2e2e6);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--primary, #000);
	cursor: pointer;
	transition: border-color 160ms ease, color 160ms ease;
}

.aecrl-theme-toggle:hover {
	border-color: var(--wp--preset--color--accent, #b87333);
	color: var(--wp--preset--color--accent-text, #8a5622);
}

/* In the header's top-right corner on wide screens (theme.js moves it there).
   The header is sticky, so it is the button's containing block. */
.wp-site-blocks header {
	position: sticky;
}

.aecrl-theme-toggle.is-corner {
	position: absolute;
	top: 0.6rem;
	right: 0.75rem;
	width: 2rem;
	height: 2rem;
	z-index: 2;
}

/* Room for it: the menu stops short of the corner. */
header.has-corner-toggle .header-inner-menu {
	padding-right: 2.75rem !important;
}

.aecrl-theme-toggle.is-corner svg {
	width: 16px;
	height: 16px;
}

.aecrl-theme-toggle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent-text, #8a5622);
	outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Components with white written into them (aecrl.css, interface.css)
   ------------------------------------------------------------------------- */

/* Cards: the project cards, the network cards. */
html[data-theme="dark"] .aecrl-proj-card,
html[data-theme="dark"] .aecrl-net {
	background: var(--aecrl-d-panel);
}

/* Plates: the catalogue photographs of instruments are shot on white, so they
   keep a light plate (a dark one would frame them as a hole in the page),
   dimmed so they do not glare. */
html[data-theme="dark"] .aecrl-collection__item--plate .aecrl-collection__figure,
html[data-theme="dark"] .aecrl-net__figure.is-plate,
html[data-theme="dark"] .aecrl-single__figure.is-plate img {
	background: #e4e0ea;
}

/* The banner's arrows sit on photographs: dark discs, light arrows. */
html[data-theme="dark"] .aecrl-band__btn {
	background: rgba(20, 17, 27, 0.86);
	color: var(--aecrl-d-ink);
}

html[data-theme="dark"] .aecrl-band__btn:hover {
	background: var(--aecrl-d-ground);
}

/* The Join us form's fields. */
html[data-theme="dark"] .aecrl-join__input {
	background: var(--aecrl-d-panel);
	color: var(--aecrl-d-ink);
	border-color: var(--aecrl-d-muted);
}

/* "Skip to content": navy with white text in light; deep with light text. */
html[data-theme="dark"] .aecrl-skip-link,
html[data-theme="dark"] .aecrl-skip-link:focus {
	background: var(--aecrl-d-deep);
	color: var(--aecrl-d-ink);
	box-shadow: 0 0 0 2px var(--aecrl-d-copper);
}

/* Co-author initials: white on the darker copper, as in light. */
html[data-theme="dark"] .aecrl-coauthor__mark {
	background: var(--aecrl-d-button);
}

/* The selected filter (Publications, Theses): navy with white text in light,
   the darker copper with white text in dark. */
html[data-theme="dark"] .aecrl-filter__btn[aria-pressed="true"] {
	background: var(--aecrl-d-button);
	border-color: var(--aecrl-d-button);
	color: #fff;
}

/* The Join us "Send" button: navy in light, the darker copper in dark. */
html[data-theme="dark"] .aecrl-join__submit button {
	background: var(--aecrl-d-button);
	border-color: var(--aecrl-d-button);
	color: #fff;
}

html[data-theme="dark"] .aecrl-join__submit button:hover {
	background: #a4662d;
	border-color: #a4662d;
}

/* The phone menu, open: navy full-screen panel in light; the deep ground in
   dark (the navy variable is light text in this theme). The parent forces the
   colour with !important, and so must this. */
html[data-theme="dark"] .wp-site-blocks header .wp-block-navigation__responsive-container.is-menu-open {
	background-color: var(--aecrl-d-deep) !important;
}

/* A selected chip (the theme filters on Research and on record lists). */
html[data-theme="dark"] .aecrl-chip[aria-checked="true"] {
	background: var(--aecrl-d-button);
	border-color: var(--aecrl-d-button);
	color: #fff;
}

/* Air quality, graded: the Dhaka card, the pollutant tiles and the division
   table's cells keep their pale category tints in dark, so they keep dark
   text too, exactly as in light. Done by giving the tile back the light
   theme's text colours; ungraded ones (Haze) follow the dark theme. */
html[data-theme="dark"] .aecrl-aq-overall.is-graded,
html[data-theme="dark"] .aecrl-aq-tile.is-graded,
html[data-theme="dark"] .aecrl-aq-cell.is-graded {
	--aecrl-rule: #1b1725;
	--aecrl-muted: #4a4553;
	--wp--preset--color--secaccent: #1b1725;
	--wp--preset--color--primary: #1b1725;
	--wp--preset--color--muted: #4a4553;
	color: #1b1725;
}


/* Join us: the form panel is the dark panel, so its fields drop to the ground
   to stay visible as fields. */
html[data-theme="dark"] .aecrl-join-formcol .aecrl-join__input {
	background: var(--aecrl-d-ground);
}

/* A paper's abstract: the read-more link in the light copper. */
html[data-theme="dark"] .aecrl-abstract__more {
	color: var(--aecrl-d-copper);
}

html[data-theme="dark"] .aecrl-abstract__more:hover,
html[data-theme="dark"] .aecrl-abstract__more:focus-visible {
	color: var(--aecrl-d-ink);
}

/* Lab news: the kind label in the light copper. */
html[data-theme="dark"] .aecrl-ln__kind {
	color: var(--aecrl-d-copper);
}