/* ==========================================================================
   VSP front-end dark mode
   Loaded only while the Customizer option "Show dark mode toggle in header"
   is on. Light mode is the default; nothing here applies until the visitor
   switches and html[data-theme="dark"] is set (pre-paint script in
   functions.php reads localStorage['vsp-theme']).

   Section A  Toggle button (mode-independent)
   Section B  Dark tokens
   Section C  Overrides for hardcoded / !important light rules
   Section D  Plugin output (later pass — same --vsp-* tokens)
   ========================================================================== */

/* --------------------------------------------------------------------------
   A. Toggle button
   -------------------------------------------------------------------------- */

/* Mobile: absolutely positioned in .header-titles-wrapper like the search
   (right:6rem) and menu (right:0) toggles, further left so those two keep
   their existing tuned positions. */
.vsp-theme-toggle--mobile {
	position: absolute;
	top: 50%;
	bottom: auto;
	left: auto;
	right: 10.5rem;
	transform: translateY(-50%);
}

.vsp-theme-toggle--mobile .toggle-inner {
	padding-top: 0;
}

.vsp-theme-toggle .toggle-icon {
	height: 2.5rem;
	display: flex;
	align-items: center;
	justify-content: center;
}

.vsp-theme-toggle svg {
	height: 2.3rem;
	width: 2.3rem;
}

@media (min-width: 1000px) {
	.vsp-theme-toggle--mobile {
		display: none !important;
	}
}

@media (max-width: 999px) {
	.vsp-theme-toggle-wrapper {
		display: none;
	}
	.header-titles {
		padding-left: 9rem;
		padding-right: 9rem;
	}
}

/* Show one icon per mode. */
.vsp-theme-toggle__icon--sun {
	display: none;
}
html[data-theme='dark'] .vsp-theme-toggle__icon--sun {
	display: flex;
}
html[data-theme='dark'] .vsp-theme-toggle__icon--moon {
	display: none;
}

.vsp-theme-toggle:focus-visible {
	outline: 3px solid var(--yellow-primary);
	outline-offset: 2px;
}

/* Optional dark-mode logo (Customizer > Site Identity > Dark mode logo).
   Injected as a second <img> by vsp_dark_mode_logo_html(); the pair is
   swapped here and nothing is injected while the mod is empty. */
.custom-logo--dark {
	display: none;
}
html[data-theme='dark'] .custom-logo-link .custom-logo:not(.custom-logo--dark) {
	display: none;
}
html[data-theme='dark'] .custom-logo--dark {
	display: inline-block;
}

/* --------------------------------------------------------------------------
   B. Tokens
   -------------------------------------------------------------------------- */

html {
	color-scheme: light;
}

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

	--vsp-bg: #14181d;
	--vsp-surface: #1c2128;
	--vsp-surface-2: #242a33;
	--vsp-input-bg: #0f1216;
	--vsp-text: #e6e8eb;
	--vsp-text-muted: #a8b0ba;
	--vsp-link: #8ab4f8;
	--vsp-link-hover: #b3d1ff;
	--vsp-visited: #c4a7f0;
	--vsp-border: #2e3540;
	--vsp-border-strong: #7a8390;
	--vsp-focus: #fac864;
	--vsp-header-bg: #1b2a3a;
	--vsp-header-titles-bg: #0b1a29;
	--vsp-footer-bg: #111417;
	--vsp-button-bg: #4a5262;
	--vsp-button-hover-bg: #44516b;
	--vsp-dark-button-bg: #3a4150;

	/* Existing brand tokens whose light value is unreadable on a dark ground. */
	--blue-secondary: #8ab4f8;
	--light-grey: #1c2128;
}

/* --------------------------------------------------------------------------
   C. Overrides
   -------------------------------------------------------------------------- */

/* Page ground and text (child style.css:2002 sets body #ffffff; parent
   Customizer inline CSS also sets body background/color). */
html[data-theme='dark'] body {
	background: var(--vsp-bg);
	color: var(--vsp-text);
}

html[data-theme='dark'] h1,
html[data-theme='dark'] h2,
html[data-theme='dark'] h3,
html[data-theme='dark'] h4,
html[data-theme='dark'] h5,
html[data-theme='dark'] h6,
html[data-theme='dark'] .entry-title,
html[data-theme='dark'] .has-blue-primary-color,
html[data-theme='dark'] .has-grey-primary-color {
	color: var(--vsp-text);
}

html[data-theme='dark'] figcaption,
html[data-theme='dark'] .wp-caption-text,
html[data-theme='dark'] .post-meta,
html[data-theme='dark'] hr.styled-separator {
	color: var(--vsp-text-muted);
}

/* Links (child style.css:264-272 is !important via --blue-secondary, which
   is re-pointed above; hover/visited need their own rules). */
html[data-theme='dark'] a {
	color: var(--vsp-link);
}
html[data-theme='dark'] .entry-content a:hover,
html[data-theme='dark'] .entry-content a:focus {
	color: var(--vsp-link-hover) !important;
}
html[data-theme='dark'] .entry-content a:visited {
	color: var(--vsp-visited) !important;
}
html[data-theme='dark'] .has-blue-secondary-color {
	color: var(--vsp-link);
}

/* Header and footer chrome (child style.css:530, 607, 390-393, 971-975). */
html[data-theme='dark'] #site-header {
	background-color: var(--vsp-header-bg) !important;
}
html[data-theme='dark'] .header-titles-wrapper {
	background: var(--vsp-header-titles-bg);
}
html[data-theme='dark'] .footer-nav-widgets-wrapper.header-footer-group {
	background-color: var(--vsp-header-bg) !important;
}
html[data-theme='dark'] #site-footer.header-footer-group {
	background-color: var(--vsp-footer-bg);
}

/* Entry / archive headers and featured-media mask (parent defaults #fff). */
html[data-theme='dark'] .archive-header,
html[data-theme='dark'] .singular .entry-header,
html[data-theme='dark'] .singular .featured-media::before,
html[data-theme='dark'] .search-modal-inner {
	background-color: var(--vsp-bg);
}
html[data-theme='dark'] .search-modal-inner {
	background: var(--vsp-surface);
}
html[data-theme='dark'] .search-modal .search-field {
	color: var(--vsp-text);
}

/* Buttons (child style.css:412-457, 1772-1785). */
html[data-theme='dark'] .entry-content .wp-block-button__link,
html[data-theme='dark']
	.entry-content
	.wp-block-button.is-style-sticky-menu
	.wp-block-button__link {
	background-color: var(--vsp-button-bg) !important;
	color: var(--white) !important;
}
html[data-theme='dark'] .entry-content .wp-block-button__link:hover,
html[data-theme='dark']
	.entry-content
	.wp-block-button.is-style-sticky-menu
	.wp-block-button__link:hover {
	background-color: var(--vsp-button-hover-bg) !important;
}
html[data-theme='dark'] .entry-content .wp-block-button__link:focus {
	outline: 3px solid var(--vsp-focus);
	outline-offset: 2px;
}
html[data-theme='dark'] .entry-content .wp-block-button.is-style-dark-button .wp-block-button__link,
html[data-theme='dark'] .page-template-template-missing a.button {
	background-color: var(--vsp-dark-button-bg) !important;
}
html[data-theme='dark']
	.entry-content
	.wp-block-button.is-style-dark-button
	.wp-block-button__link:hover,
html[data-theme='dark'] .entry-content a.button:hover {
	background-color: var(--vsp-button-hover-bg) !important;
}
html[data-theme='dark'] button:not(.toggle),
html[data-theme='dark'] .button,
html[data-theme='dark'] .faux-button,
html[data-theme='dark'] .wp-block-file .wp-block-file__button,
html[data-theme='dark'] input[type='button'],
html[data-theme='dark'] input[type='reset'],
html[data-theme='dark'] input[type='submit'],
html[data-theme='dark'] .comment-reply-link {
	background-color: var(--vsp-button-bg) !important;
	color: var(--white);
}

/* Form controls (parent style.css:770-813 uses #fff / #dcd7ca / #000). */
html[data-theme='dark'] input[type='text'],
html[data-theme='dark'] input[type='password'],
html[data-theme='dark'] input[type='email'],
html[data-theme='dark'] input[type='url'],
html[data-theme='dark'] input[type='date'],
html[data-theme='dark'] input[type='month'],
html[data-theme='dark'] input[type='time'],
html[data-theme='dark'] input[type='datetime'],
html[data-theme='dark'] input[type='datetime-local'],
html[data-theme='dark'] input[type='week'],
html[data-theme='dark'] input[type='number'],
html[data-theme='dark'] input[type='search'],
html[data-theme='dark'] input[type='tel'],
html[data-theme='dark'] input[type='color'],
html[data-theme='dark'] select,
html[data-theme='dark'] textarea,
html[data-theme='dark'] .wp-block-search__input {
	background: var(--vsp-input-bg);
	color: var(--vsp-text);
	border-color: var(--vsp-border-strong);
}
html[data-theme='dark'] input::placeholder,
html[data-theme='dark'] textarea::placeholder {
	color: var(--vsp-text-muted);
}

/* Accordions (child style.css:1788-1810). */
html[data-theme='dark'] .wp-block-coblocks-accordion-item__title,
html[data-theme='dark'] .wp-block-coblocks-accordion-item__title.has-background {
	background-color: var(--vsp-button-bg) !important;
}
html[data-theme='dark'] .wp-block-coblocks-accordion-item__title.has-background:hover {
	background-color: var(--vsp-header-titles-bg) !important;
}
html[data-theme='dark'] .wp-block-coblocks-accordion-item__title.has-background:focus {
	outline: 2px solid var(--vsp-focus);
	outline-offset: 2px;
}
html[data-theme='dark'] .wp-block-coblocks-accordion-item details[open] summary,
html[data-theme='dark'] .wp-block-coblocks-accordion-item__content {
	border-color: var(--vsp-border-strong);
	background-color: var(--vsp-surface);
}

/* Cards, contact blocks, ACF block partials (child style.css:1972-1994,
   partials/*.php). */
html[data-theme='dark'] .division,
html[data-theme='dark'] .shadow-sm,
html[data-theme='dark'] .hq-contact,
html[data-theme='dark'] .field-office-contact,
html[data-theme='dark'] .media-contacts,
html[data-theme='dark'] .agency-rectangle,
html[data-theme='dark'] .care-sidebar-block,
html[data-theme='dark'] .care-landing-main,
html[data-theme='dark'] .legal-modal-content,
html[data-theme='dark'] .eligibility-tooltip,
html[data-theme='dark'] .ron-modal-inline {
	background-color: var(--vsp-surface);
	color: var(--vsp-text);
	border-color: var(--vsp-border);
}
html[data-theme='dark'] .eligibility-tooltip::before {
	border-color: transparent transparent var(--vsp-border) transparent;
}
html[data-theme='dark'] .alert-details-wrap.is-style-wide {
	border-bottom-color: var(--vsp-border-strong);
}

/* style-2025.css hardcoded text colours. */
html[data-theme='dark'] .legal-modal-button {
	color: var(--vsp-link);
}
html[data-theme='dark'] .close-legal-modal,
html[data-theme='dark'] .ron-close,
html[data-theme='dark'] .welcome,
html[data-theme='dark'] .new-agency {
	color: var(--vsp-text);
}
html[data-theme='dark'] .close-legal-modal:hover,
html[data-theme='dark'] .close-legal-modal:focus,
html[data-theme='dark'] .ron-close:hover {
	color: var(--vsp-link-hover);
}
html[data-theme='dark'] nav.vsp-breadcrumb li + li::before {
	color: var(--vsp-text-muted);
}
html[data-theme='dark'] .toggle-group label {
	background-color: var(--vsp-surface-2);
	color: var(--vsp-text);
}
html[data-theme='dark'] .toggle-group input[type='radio']:checked + label {
	background-color: var(--vsp-button-bg);
}

/* Block palette helpers (child style.css:52+) and parent palette defaults.
   !important because core's global-styles inline CSS prints the palette
   classes as `background-color: var(--wp--preset--color--…) !important`,
   which otherwise kept these blocks white / #f8f8f8 under light text
   (report W-22, Professional Standards and Firearms FAQ). */
html[data-theme='dark'] .has-white-background-color,
html[data-theme='dark'] .has-light-grey-background-color,
html[data-theme='dark'] :root .has-background-background-color,
html[data-theme='dark'] .has-background-background-color,
html[data-theme='dark'] .has-subtle-background-background-color {
	background-color: var(--vsp-surface) !important;
	color: var(--vsp-text);
}

/* Customizer Additional CSS (database, not in this theme): `.box:nth-child(odd)`
   paints every other Group block #eef2f4 with a #ddd border, and `.close-gap`
   is #484848 (W-22: Amber Alert, VCIN, Payment Options, Professional
   Standards). */
html[data-theme='dark'] .box:nth-child(odd) {
	background-color: var(--vsp-surface);
}
html[data-theme='dark'] .box,
html[data-theme='dark'] .box-clean,
html[data-theme='dark'] .box-clean-left,
html[data-theme='dark'] .bluebox,
html[data-theme='dark'] .accordionboxsize {
	border-color: var(--vsp-border);
}
html[data-theme='dark'] .close-gap {
	color: var(--vsp-text-muted);
}

/* Latest Posts block excerpt and date (parent Customizer inline CSS and
   style.css set #6d6d6d, 3.44:1 on the dark ground; W-22). */
html[data-theme='dark'] .wp-block-latest-posts__post-excerpt,
html[data-theme='dark'] .wp-block-latest-posts__post-date,
html[data-theme='dark'] .wp-block-latest-comments__comment-date {
	color: var(--vsp-text-muted);
}

/* Core blocks and rules that use the parent's #dcd7ca border. */
html[data-theme='dark'] hr,
html[data-theme='dark'] .wp-block-separator,
html[data-theme='dark'] .post-separator,
html[data-theme='dark'] .wp-block-quote,
html[data-theme='dark'] blockquote,
html[data-theme='dark'] .wp-block-table td,
html[data-theme='dark'] .wp-block-table th,
html[data-theme='dark'] table td,
html[data-theme='dark'] table th,
html[data-theme='dark'] .comment-respond,
html[data-theme='dark'] .pagination-single hr,
html[data-theme='dark'] #criminal-history-col2 {
	border-color: var(--vsp-border-strong);
}
html[data-theme='dark'] .wp-block-table.is-style-stripes tbody tr:nth-child(odd),
html[data-theme='dark'] .wp-block-code,
html[data-theme='dark'] .wp-block-preformatted,
html[data-theme='dark'] pre,
html[data-theme='dark'] code {
	background-color: var(--vsp-surface-2);
	color: var(--vsp-text);
}
html[data-theme='dark'] .wp-block-pullquote::before {
	background-color: var(--vsp-bg);
}

/* --------------------------------------------------------------------------
   D. Plugin output — later pass. Each vsp plugin's public stylesheet gets its
   own html[data-theme='dark'] block using the --vsp-* tokens above (they are
   set on <html>, so they cascade into plugin markup). Gravity Forms and
   MetaSlider rules will be added here.
   -------------------------------------------------------------------------- */

/* --vsp-danger: #c02b0a, Gravity Forms' red, is 3.04:1 on --vsp-bg. */
html[data-theme='dark'] {
	--vsp-danger: #ff8a80;
}

/* vsp-thank-a-trooper: the header promo buttons stay yellow (#fac864, hover
   #fef1d7) in both modes, so their text must stay dark. The global dark link
   colour above had turned it #8ab4f8 (1.35:1, every page; W-22). */
html[data-theme='dark'] .tat-description-button-wrapper a,
html[data-theme='dark'] .tat-description-button-wrapper-2 a {
	color: var(--vsp-bg);
}

/* Gravity Forms (gravity-theme): character counter #767676 and required /
   error red #c02b0a are below 4.5:1 on the dark ground (W-22). The Thank a
   Trooper page keeps its own yellow required marker (vsp-tat-styles.css). */
html[data-theme='dark'] .gform_wrapper.gravity-theme .ginput_counter,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_description,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gform_fileupload_rules {
	color: var(--vsp-text-muted);
}
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_required,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_validation_message,
html[data-theme='dark'] .gform_wrapper.gravity-theme .validation_message,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_error legend,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_error label,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gform_validation_errors > h2,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gform_validation_errors li,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gform_validation_errors a {
	color: var(--vsp-danger);
}
html[data-theme='dark'] .gform_wrapper.gravity-theme .gform_validation_errors,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_validation_message,
html[data-theme='dark'] .gform_wrapper.gravity-theme .validation_message {
	background-color: var(--vsp-surface);
	border-color: var(--vsp-danger);
}
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_error input,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_error select,
html[data-theme='dark'] .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: var(--vsp-danger);
}