/* DMA COLORS */
/* Define color variables in the root for each domain using this theme */
/* Other colors are changed at the theme level of WordPress */

/*
===========================================================
COLOR UPDATE GUIDE – WordPress Sites Where to Update Colors
===========================================================

Appearance > Editor > Styles > Colors > Palette
   - Primary Color: Change This (Blue is the primary color)
   - Secondary Color: Change This (Red is the secondary color)
   - Background Secondary: Change This (Greyish – check accessibility)

OneTap > Design > Color
   - Match color to site’s primary theme color
   - Set size to "small" if not already
   - >> Save when done <<

Smart Slider > Dashboard > Hero Slider > Controls
   - Arrow Style > Hover: Change This to secondary color
   - Bullet Style > Hover: Change This to primary color
   - For each slide: Edit > Button > Style > Background Hover: Change This to secondary color
   - >> Save when done <<

Tools > Theme File Editor
   - theme.json → Line 54 & 55: Update to new primary color
   - color.css → Update root colors as needed by theme use (Your in this file now, good work buddy!)
*/

:root {
	--color-white: #ffffff;
	--color-black: #000000;
	--color-red: #ff0000;
	--color-bg-sec: #efefef;
	--color-sec: #e61e4d;
	--color-pri: #337ab7;
	--color-border: #e9e9e9;
	--color-shadow: rgba(0, 0, 0, 0.1);
	--color-header: rgba(0, 0, 0, .35);
	--color-page-title: rgba(0, 0, 0, 0.005);
	--color-facebook: #0e72ec;
	--color-instagram: #e6006f;
	--color-twitter: #0b7bc1;
	--color-youtube: #e60000;
}

/* Icon colors */
.color-icons {
	color: var(--color-pri);
}

.home-icons {
	color: var(--color-white);
}

/* Social icon accessibility colors */
:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-facebook {
	background-color: var(--color-facebook);
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-instagram {
	background-color: var(--color-instagram);
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-twitter {
	background-color: var(--color-twitter);
}

:where(.wp-block-social-links:not(.is-style-logos-only)) .wp-social-link-youtube {
	background-color:  var(--color-youtube);
}

/* Page title styling */
.has-text-align-center.alignwide.wp-block-post-title {
	background-color: var(--color-page-title);
}

/* New button icons for downloads */
.download-icon-button .wp-block-button__link::before {
	color: var(--color-red);
}

.download-icon-button .wp-block-button__link:hover::before {
	color: var(--color-white);
}

/* Initial state of the header */
header.transparent-header {
	background: var(--color-header);
	color: var(--color-white);
}

/* Sticky state of the header after JavaScript */
header.transparent-header.sticky {
	background-color: var(--color-white);
	box-shadow: 0 2px 5px var(--color-shadow);
	border-bottom: 1px solid var(--color-border);
	color: var(--color-black) !important;
}

/* Site title inside the header */
header.transparent-header .site-title a {
	color: var(--color-white) !important;
}

/* Site title color when header is sticky */
header.transparent-header.sticky .site-title a {
	color: var(--color-black) !important;
}

/* Custom colors for table headers and text alignment */
.dma-table-styles th {
	background-color: var(--color-bg-sec);
}

/* Footer changes for some versions of this theme */
.footer-nav-custom li::before {
	color: var(--color-white);
}

/* Gutenify 2.0.0 base theme fixes */
.wp-block-quote {
	background: var(--wp--preset--color--background-secondary);
	border-color: var(--wp--preset--color--primary);
}

.wp-block-quote p {
	color: var(--wp--preset--color--foreground);
	font-size: var(--wp--preset--font-size--medium);
}

.wp-block-quote::before {
	color: var(--wp--preset--color--primary);
}

select:not(.wpforms-container *),
textarea:not(.wpforms-container *),
input:not([type=button]):not([type=submit]):not([type=reset]):not(.wpforms-container *) {
	background: var(--wp--preset--color--input-field);
	color: var(--wp--preset--color--foreground);
}

select:not(.wpforms-container *):focus,
textarea:not(.wpforms-container *):focus,
input:not([type=button]):not([type=submit]):not([type=reset]):not(.wpforms-container *):focus {
	color: var(--wp--preset--color--foreground);
	border: 1px solid var(--wp--preset--color--primary);
}

.wpforms-field-container select:focus,
.wpforms-field-container textarea:focus,
.wpforms-field-container input:not([type=button]):not([type=submit]):not([type=reset]):focus {
	color: initial;
	border: initial;
}

input[type=button],
input[type=reset],
input[type=submit] {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white);
}

input[type=button]:hover,
input[type=reset]:hover,
input[type=submit]:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--white);
}

.wp-block-query-pagination .page-numbers, .wp-block-query-pagination .wp-block-query-pagination-next, .wp-block-query-pagination .wp-block-query-pagination-previous {
	background: var(--wp--preset--color--secondary-background);
}

.wp-block-query-pagination .page-numbers.current, .wp-block-query-pagination a:hover, .wp-block-query-pagination a:focus, .wp-block-query-pagination a:active {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--white) !important;
}



/* Responsive Layout for Mobile Devices */
@media (max-width: 768px) {
	header.transparent-header {
		background-color: var(--color-black);
	}
}