/*
 * ShotShield dark scheme, design direction A ("Mat Night"). Loaded after shotshield-theme.css (and shotshield-woo.css)
 * only while Appearance > Customize > ShotShield color scheme is Dark. The light scheme ("Weigh-In") is the two base
 * files alone, so switching back to Light removes this file and nothing else changes.
 *
 * Mai's own palette for this scheme (page ground, body text, buttons, links) is in inc/scheme.php. This file re-points
 * the theme's tokens and fixes the places where one light-scheme token played two roles (ink as text and as a fill).
 */

/* ---------- Tokens ---------- */

:root {
	--ssg-paper: #0b1117;      /* the page ground */
	--ssg-white: #ffffff;      /* text on fills; product photo tiles stay white */
	--ssg-ink: #e6ecf2;        /* text */
	--ssg-ink-2: #b9c5d2;
	--ssg-muted: #93a1b1;
	--ssg-line: #233142;
	--ssg-line-dark: #1f2b39;
	--ssg-steel: #93a1b1;
	--ssg-blue: #33b9f2;       /* electric blue, from the logo */
	--ssg-blue-deep: #7fd3f7;  /* hover: lighter on a dark ground */
	--ssg-blue-bright: #7fd3f7;
	--ssg-red: #f0444c;        /* as text on the ground: 5.1:1 (the mockup's #e5262f is 4.2:1) */

	/* Dark scheme only. */
	--ssg-night: #05080c;      /* deepest bands: announcement bar, fact strip, footer */
	--ssg-panel: #121a23;      /* alternate sections, cards */
	--ssg-rule: #3a4b5e;       /* borders that need to show on panel */
	--ssg-on-blue: #04131c;    /* text on electric blue: 8.4:1 */
}

/* Buttons on electric blue take dark text (white on it is 2.4:1). Mai renders outline buttons as .button-outline in
   the same blue and fills them on hover, so their hover text is dark too. */
body {
	--button-color: var(--ssg-on-blue);
	--button-color-hover: var(--ssg-on-blue);
	--button-outline-color-hover: var(--ssg-on-blue);
	--button-secondary-color: var(--ssg-white);
	--button-secondary-color-hover: var(--ssg-white);
	--button-secondary-background: var(--ssg-line);
	--button-secondary-background-hover: #31455e;
}

::selection {
	background: var(--ssg-blue);
	color: var(--ssg-on-blue);
}

/* ---------- Sections ---------- */

/* Sections saved with the White background become the dark panel, so the page still alternates ground / panel.
   The rule is more specific than Mai's has-white-background-color and also !important, so it wins. */
.wp-block-cover .wp-block-cover__background.has-white-background-color {
	background-color: var(--ssg-panel) !important;
}

/* Core marks these covers "light" (they were white and paper), which would set their text black. */
.wp-block-cover.is-light,
.wp-block-cover.is-light .wp-block-cover__inner-container {
	color: var(--ssg-ink);
}

/* ---------- Buttons ---------- */

.nav-header .button,
.mobile-menu .button {
	--button-background: var(--ssg-blue);
	--button-color: var(--ssg-on-blue);
	--button-background-hover: var(--ssg-blue-deep);
	--button-color-hover: var(--ssg-on-blue);
}

/* ---------- Header and announcement bar ---------- */

/* Mai draws desktop dropdowns as a white panel even under a dark header; here they are the dark panel. The
   current page in a dropdown is electric blue (on Mai's white it was 2.2:1). */
.site-header {
	--site-header-border-bottom: 1px solid var(--ssg-line);
	--sub-menu-background: var(--ssg-panel);
	--sub-menu-border: 1px solid var(--ssg-line);
	--sub-menu-link-color: var(--ssg-ink);
	--sub-menu-link-color-hover: var(--ssg-blue);
}

/* 1000-1099px: the 300px logo pushes Shop Now to a second row; 240px is the widest that keeps one row at 1000px
   (measured). From 1100px the 300px logo fits. */
@media (min-width: 1000px) and (max-width: 1099px) {
	body {
		--custom-logo-width: 240px;
	}
}

.ssg-announcement-bar.has-primary-background-color {
	background-color: var(--ssg-night) !important;
	border-bottom: 1px solid var(--ssg-line-dark);
}

.ssg-announcement-bar,
.ssg-announcement-bar .ssg-announcement {
	color: var(--ssg-white) !important;
}

/* ---------- Components ---------- */

.wp-block-image.ssg-label-caption figcaption {
	background: var(--ssg-night);
	color: var(--ssg-white);
}

.ssg-card {
	background: var(--ssg-panel);
}

.ssg-weigh-card {
	border-color: var(--ssg-rule);
}

.ssg-weigh-card-head {
	border-bottom-color: var(--ssg-rule);
}

.ssg-size-table tbody tr,
.ssg-size-table tbody tr:last-child {
	border-color: var(--ssg-rule);
}

.ssg-product-badge {
	background: #d3232c; /* white on it: 5.2:1 */
}

.ssg-product-foot .button.ssg-button-outline {
	--button-color: var(--ssg-blue);
	--button-color-hover: var(--ssg-on-blue);
	--button-background-hover: var(--ssg-blue);
	border-color: var(--ssg-blue);
}

.ssg-history .ssg-eras {
	border-top-color: var(--ssg-rule);
}

@media (max-width: 600px) {
	.ssg-history .ssg-era {
		border-bottom-color: var(--ssg-rule);
	}
}

/* ---------- Footer ---------- */

.ssg-footer.has-black-background-color {
	border-top: 1px solid var(--ssg-line-dark);
}

.ssg-footer {
	color: var(--ssg-ink-2);
}

/* ---------- WooCommerce ---------- */

/* Size buttons only: the colour circles keep their own fill (--ssg-swatch), so a selected Black still shows black. */
.ssg-swatch:not(.ssg-swatch-color) {
	background: var(--ssg-panel);
	border-color: var(--ssg-rule);
	color: var(--ssg-ink);
}

.ssg-swatch:not(.ssg-swatch-color):hover:not(:disabled) {
	border-color: var(--ssg-ink);
}

.ssg-swatch:not(.ssg-swatch-color).is-selected {
	background: var(--ssg-blue);
	border-color: var(--ssg-blue);
	color: var(--ssg-on-blue);
}

/* Mai paints the active tab white and hovers tab text to black; on the dark ground the active tab joins the page. */
.wc-tabs {
	--link-color-hover: var(--ssg-blue);
}

.wc-tabs li.active a,
.wc-tabs li.active a:focus-visible {
	background-color: var(--ssg-paper);
	border-bottom-color: var(--ssg-paper);
}

.woocommerce-message,
.woocommerce-info,
.woocommerce-error,
.woocommerce-cart-form,
.cart_totals,
.woocommerce-checkout-review-order,
.woocommerce-billing-fields,
.woocommerce-shipping-fields {
	background: var(--ssg-panel);
}