/* =========================================================================
 * Dark mode
 * Loaded after style.css and responsive.css. a11y.js adds html.sc-dark when
 * the visitor turns it on with the contrast button in the top bar; the
 * choice is remembered in their browser.
 *
 * Deep navy surfaces with light saffron headings, so the site keeps its
 * tricolour identity. Body text is above 7:1 (WCAG AAA) on every surface.
 * Panels that are already dark in normal mode (top bar, hero, message and
 * events bands, footer) keep the normal palette, so they look as designed.
 * ====================================================================== */

html.sc-dark {
	color-scheme: dark;

	--wp--preset--color--base: #070b1f;
	--wp--preset--color--white: #121838;
	--wp--preset--color--surface: #0c122c;
	--wp--preset--color--border: #252d55;
	--wp--preset--color--contrast: #eceef8;
	--wp--preset--color--muted: #a9afcf;
	--wp--preset--color--primary: #ffc285;
	--wp--preset--color--primary-light: #ffd2a3;
	--wp--preset--color--accent: #ff9933;
	--wp--preset--color--accent-dark: #ffae5c;
	--wp--preset--color--accent-soft: #3d2200;
	--wp--preset--color--green: #6bcb63;
	--wp--preset--gradient--hero: linear-gradient(180deg, #070b1f 0%, #0c122c 100%);
	--wp--preset--gradient--ink: linear-gradient(160deg, #6b3300 0%, #7f3d00 55%, #934700 100%);

	--sc-gold-line: rgba(255, 153, 51, 0.38);
	--sc-shadow: 0 1px 2px rgba(0, 0, 0, 0.3), 0 16px 36px -14px rgba(0, 0, 0, 0.65);
	--sc-focus: #ffc285;
	--sc-on-accent: #00003d;
}

/* Panels that are dark in both modes: back to the normal palette inside. */
html.sc-dark :is(.sc-topbar, .sc-footer, .sc-hero, .sc-band-dark, .sc-split__media, .has-ink-gradient-background, .has-primary-background-color) {
	--wp--preset--color--base: #fffbf5;
	--wp--preset--color--white: #ffffff;
	--wp--preset--color--border: #f2dcc5;
	--wp--preset--color--contrast: #0a1033;
	--wp--preset--color--muted: #4b5175;
	--wp--preset--color--primary: #a85300;
	--wp--preset--color--primary-light: #c46200;
	--wp--preset--color--accent-dark: #8a4200;
	--wp--preset--color--accent-soft: #fde8d3;
	--wp--preset--color--green: #117a07;
	--sc-focus: #ff9933;
}

/* -------------------------------------------------------------------------
 * Header and footer: deeper than in normal mode so they sit with the page
 * ---------------------------------------------------------------------- */

html.sc-dark .sc-topbar {
	--wp--preset--color--primary: #8a4200;
}

html.sc-dark .sc-masthead {
	background: rgba(7, 11, 31, 0.92);
}

html.sc-dark .sc-brand .wp-block-site-logo img {
	box-shadow: 0 0 0 1px var(--sc-gold-line), 0 0 0 4px rgba(255, 153, 51, 0.08);
}

html.sc-dark .sc-nav__panel {
	box-shadow: 0 24px 32px -16px rgba(0, 0, 0, 0.6);
}

html.sc-dark .sc-footer {
	background: linear-gradient(180deg, #063803 0%, #042502 100%) !important;
}

/* -------------------------------------------------------------------------
 * Photos and shadows
 * ---------------------------------------------------------------------- */

html.sc-dark :is(.sc-portrait img, .sc-split__body .sc-newsletter) {
	box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* The offset frame is drawn in the page colour, not the restored ivory. */
html.sc-dark .sc-split__media {
	box-shadow: 22px 22px 0 -1px #0c122c, 22px 22px 0 0 #ff9933, 0 30px 60px -30px rgba(0, 0, 0, 0.8);
}

/* Take the glare off bright photos in content. */
html.sc-dark main :is(.wp-block-image, .wp-block-post-featured-image, .wp-block-gallery) img {
	filter: brightness(0.92);
}

/* -------------------------------------------------------------------------
 * Saffron fills: dark text on top (primary is light in this mode)
 * ---------------------------------------------------------------------- */

html.sc-dark .home main .wp-block-button__link {
	color: var(--sc-on-accent);
}

html.sc-dark .home main .wp-block-button__link:is(:hover, :focus) {
	background: var(--wp--preset--color--primary);
	color: var(--sc-on-accent);
}

html.sc-dark .home main :where(.sc-hero, .sc-band-dark, .sc-split__media) .wp-block-button__link:is(:hover, :focus) {
	background: #ffffff;
	color: #a85300;
}

html.sc-dark .home main .sc-split__body .wp-block-buttons .wp-block-button__link:is(:hover, :focus) {
	color: var(--sc-on-accent);
}

html.sc-dark .sc-aside__title {
	color: var(--sc-on-accent) !important;
}

html.sc-dark .sc-xfeed--cards .sc-xfeed__follow,
html.sc-dark .sc-xfeed--cards .sc-xfeed__follow:hover {
	color: var(--sc-on-accent);
}

html.sc-dark .sc-tile--white::before {
	background: var(--wp--preset--color--primary);
}

html.sc-dark .sc-tile--white::after {
	color: var(--wp--preset--color--primary);
}

html.sc-dark .sc-speech .wp-block-post-featured-image::after {
	background: var(--sc-on-accent);
}

html.sc-dark .sc-speech-details__watch {
	color: var(--sc-on-accent) !important;
}

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

html.sc-dark :is(.sc-form input[type="text"], .sc-form input[type="email"], .sc-form input[type="tel"], .sc-form select, .sc-form textarea, .wp-block-search__input) {
	background: #0a0f27;
	border-color: #3d4675;
}

html.sc-dark .sc-form :is(input, select, textarea)::placeholder {
	color: #8a90b3;
}

html.sc-dark .sc-form :is(input, select, textarea):hover {
	border-color: #6870a3;
}

html.sc-dark .sc-form :is(input, select, textarea):focus {
	border-color: var(--wp--preset--color--primary);
	box-shadow: 0 0 0 3px rgba(255, 153, 51, 0.3);
}

html.sc-dark .sc-form :is(input, select, textarea):user-invalid {
	border-color: #f97066;
}

html.sc-dark .sc-form__notice.is-success {
	background: #0b2a09;
	color: #a8e6a1;
}

html.sc-dark .sc-form__notice.is-error {
	background: #34140f;
	border-color: #f97066;
	color: #ffb4a8;
}

/* -------------------------------------------------------------------------
 * Small details
 * ---------------------------------------------------------------------- */

html.sc-dark .sc-placeholder {
	background: repeating-linear-gradient(-45deg, rgba(255, 153, 51, 0.1) 0 8px, transparent 8px 16px);
}

html.sc-dark .sc-xfeed__embed {
	color-scheme: light;
}

/* Smooth the switch itself, not every hover. */
html.sc-dark-switching,
html.sc-dark-switching * {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease !important;
}