/* Typefaces */

/* wdth:  25 -  151  Width */
/* wght:   1 - 1000  Weight */
/* GRAD:   0 -  100  Grad */
/* ROND:   0 -  100  Roundness */
/* slnt: -10 -    0  Italics */
@font-face {
	font-family: 'Google Sans Flex';
	font-style: oblique -10deg 0deg; /* Maps the Slant (slnt) axis */
	font-weight: 100 900;            /* Maps the Weight (wght) axis */
	font-stretch: 25% 151%;          /* Maps the Width (wdth) axis */
	font-display: swap;              /* Ensures fallback text shows while loading */
	src: url('../fonts/google-sans-flex-variable.woff2') format('woff2-variations'),
		url('../fonts/google-sans-flex-variable.woff2') format('woff2'); 
}
/* Typefaces */

/* Begin Reset Styles */
* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
/* End Reset Styles */

.darkmode {
	--cwa-orange: #000;
    --cwa-green: #000;
    --cwa-blue: #000;
	--cwa-logo-tall-orange: #bfbfbf;
    --cwa-logo-tall-green: #e5e5e5;
    --cwa-logo-tall-blue: #999999;
    --cwa-logo-tall-title: #fff;
    --cwa-logo-tall-subtitle: #bfbfbf;
    --cwa-logo-tall-tagline: #fff;
    --cwa-logo-wide-orange: #bfbfbf;
    --cwa-logo-wide-green: #e5e5e5;
    --cwa-logo-wide-blue: #999999;
    --cwa-logo-wide-title: #fff;
    --cwa-logo-wide-subtitle: #bfbfbf;
    --cwa-logo-wide-tagline: #fff;
	--cwa-bg: #ccc;
	--cwa-nav-bg: #454545;
	--cwa-footer-bg: #454545;
	--cwa-nav-footer-p: #9f9f9f;
	--cwa-nav-menu-a: #fff;
	--cwa-nav-menu-a-hover: #b7b7b7;
	--cwa-nav-menu-a-underline: #fff;
	--cwa-mobile-nav: #fff;
	--cwa-mobile-nav-menu-overlay: #2c2c2c;
	--cwa-mobile-nav-menu-a: #fff;
	--cwa-link: #959595;
	--cwa-link-hover: #ffff;
	--cwa-social-media-a: #a4a9ad;
	--cwa-social-media-a-hover: #fff;
	--cwa-paragraph-h: #000;
	--cwa-paragraph-h-rev: #fff;
	--cwa-paragraph-p: #000;
	--cwa-paragraph-p-rev: #fff;
	--cwa-blue: #000;
	--cwa-grey: #545a60;
	--cwa-button-bg: #000;
	--cwa-button-hover: #545a60;
	--cwa-button-text: #fff;
	--cwa-button-icon: #fff;
	--cwa-black: #000;
	--cwa-white: #fff;
	--cwa-card-bg: #efefef;
	--cwa-border: #000;
	--cwa-image-filter: 100%;
	--cwa-box-shadow-strength: 90%;
	--cwa-filter-invert: 100%;
	--cwa-nav-footer-header-icons: #ccc;
	--cwa-theme-search-hamburger-bg: #000;
	--cwa-theme-search-hamburger-border: #fff;
	--cwa-theme-search-hamburger-icon: #fff;
	--cwa-search-icon: #000;
	--cwa-search-icon-hover: #545a60;
	--cwa-highlight: #fff;
	--cwa-forms-bg: #efefef;
	--cwa-forms-input-focus: #000;
	--cwa-forms-placeholder: #6f6f6f;
	--cwa-forms-placeholder-error: #990000;
	--cwa-forms-text: #000;
	--cwa-forms-submit: #000;
	--cwa-forms-clear: #6f6f6f;
	--cwa-forms-error: #000;
	--cwa-social-media-descriptor: #fff;
	--cwa-scrollbar-thumb: #000;
	--cwa-topo: brightness(0) saturate(100%) invert(15%) sepia(12%) saturate(6%) hue-rotate(339deg) brightness(99%) contrast(89%);
}

/* Begin Global Elements */
:root {
	--cwa-orange: #ff5600;
    --cwa-green: #93e11a;
    --cwa-blue: #0095ef;
	--cwa-logo-tall-orange: #ff5600;
    --cwa-logo-tall-green: #93e11a;
    --cwa-logo-tall-blue: #0095ef;
    --cwa-logo-tall-title: #545a60;
    --cwa-logo-tall-subtitle: #0095ef;
    --cwa-logo-tall-tagline: #000;
    --cwa-logo-wide-orange: #ff5600;
    --cwa-logo-wide-green: #93e11a;
    --cwa-logo-wide-blue: #0095ef;
    --cwa-logo-wide-title: #545a60;
    --cwa-logo-wide-subtitle: #0095ef;
    --cwa-logo-wide-tagline: #000;
	--cwa-bg: #fff;
	--cwa-nav-bg: #f3f3f3;
	--cwa-footer-bg: #f3f3f3;
	--cwa-nav-footer-p: #3e4348;
	--cwa-nav-menu-a: #545a60;
	--cwa-nav-menu-a-hover: #0095ef;
	--cwa-nav-menu-a-underline: #ff5600;
	--cwa-mobile-nav: #545a60;
	--cwa-mobile-nav-menu-overlay: #0095ef;
	--cwa-mobile-nav-menu-a: #fff;
	--cwa-link: #0095ef;
	--cwa-link-hover: #ff5600;
	--cwa-social-media-a: #0095ef;
	--cwa-social-media-a-hover: #ff5600;
	--cwa-paragraph-h: #3e4348;
	--cwa-paragraph-h-rev: #fff;
	--cwa-paragraph-p: #3e4348;
	--cwa-paragraph-p-rev: #fff;
	--cwa-blue: #0095ef;
	--cwa-grey: #545a60;
	--cwa-button-bg: #ff5600;
	--cwa-button-hover: #0095ef;
	--cwa-button-text: #fff;
	--cwa-button-icon: #fff;
	--cwa-black: #000;
	--cwa-white: #ffffff;
	--cwa-card-bg: #fff;
	--cwa-border: #efefef;
	--cwa-image-filter: 0%;
	--cwa-box-shadow-strength: 20%;
	--cwa-filter-invert: 0%;
	--cwa-nav-footer-header-icons: #ccc;
	--cwa-theme-search-hamburger-bg: #fff;
	--cwa-theme-search-hamburger-border: #545a60;
	--cwa-theme-search-hamburger-icon: #545a60;
	--cwa-search-icon: #545a60;
	--cwa-search-icon-hover: #0095ef;
	--cwa-highlight: #ffff33;
	--cwa-forms-bg: #fff;
	--cwa-forms-input-focus: #0095ef;
	--cwa-forms-label: #000;
	--cwa-forms-placeholder: #ccc;
	--cwa-forms-placeholder-error: #000;
	--cwa-forms-submit: #0095ef;
	--cwa-forms-clear: #ff5600;
	--cwa-forms-error: #ff5600;
	--cwa-social-media-descriptor: #ff5600;
	--cwa-scrollbar-thumb: #0095ef;
	--cwa-topo: brightness(0) saturate(100%) invert(92%) sepia(100%) saturate(1%) hue-rotate(62deg) brightness(105%) contrast(100%);
}

/* Begin All Page Transitions */
@view-transition {
	navigation: auto;
}
::view-transition-group(root) {
  animation-duration: 1s;
}
/* End All Page Transitions */

html {
	overflow-y: scroll;
	scrollbar-gutter: stable;
	scrollbar-color: hsl(from var(--cwa-scrollbar-thumb) h s l) transparent;
	scrollbar-width: thin;
}
html, body {
	background: hsl(from var(--cwa-bg) h s l);
	font-family: 'Google Sans Flex', sans-serif;
	font-size: 1rem;
	font-optical-sizing: auto;
	font-style: normal;
}
/* End Global Elements */

/* Begin CWA Logo Elements: Tall Vers */
.cwa-logo-tall-blue {
    fill: hsl(from var(--cwa-logo-tall-blue) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-tall-green {
	fill: hsl(from var(--cwa-logo-tall-green) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-tall-orange {
	fill: hsl(from var(--cwa-logo-tall-orange) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-tall-tagline {
	fill: hsl(from var(--cwa-logo-tall-tagline) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-tall-title {
	fill: hsl(from var(--cwa-logo-tall-title) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-tall-subtitle {
	fill: hsl(from var(--cwa-logo-tall-subtitle) h s l);
	transition: fill 0.3s ease;
}
/* End  CWA Logo Elements: Tall Vers */

/* Begin CWA Logo Elements: Wide Vers */
.cwa-logo-wide-blue {
    fill: hsl(from var(--cwa-logo-wide-blue) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-wide-green {
	fill: hsl(from var(--cwa-logo-wide-green) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-wide-orange {
	fill: hsl(from var(--cwa-logo-wide-orange) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-wide-tagline {
	fill: hsl(from var(--cwa-logo-wide-tagline) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-wide-title {
	fill: hsl(from var(--cwa-logo-wide-title) h s l);
	transition: fill 0.3s ease;
}
.cwa-logo-wide-subtitle {
	fill: hsl(from var(--cwa-logo-wide-subtitle) h s l);
	transition: fill 0.3s ease;
}
/* End CWA Logo Elements: Tall Vers */

/* Begin Animating Tall CWA Logo Elements on Hover */
#animated-tall-logo-link:hover .cwa-logo-tall-blue {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.3s ease-in-out 1;
    animation-delay: 0.0s;
}
#animated-tall-logo-link:hover .cwa-logo-tall-green {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.35s ease-in-out 1;
    animation-delay: 0.27s;
}
#animated-tall-logo-link:hover .cwa-logo-tall-orange {
	transform-origin: center; 
	animation: animated-tall-logo-link 0.4s ease-in-out 1;
    animation-delay: 0.49s;
}
@keyframes animated-tall-logo-link {
    0% {
        transform: scale(1); /* Starting normal size */
    }
    50% {
        transform: scale(0.95); /* Grows 50% larger at the midpoint */
    }
    100% {
        transform: scale(1); /* Shrinks back to normal size at the end */
    }
}
/* End Animating Tall CWA Logo Elements on Hover */

/* Begin Animating Wide CWA Logo Elements on Hover */
#animated-wide-logo-link:hover .cwa-logo-wide-blue {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.3s ease-in-out 1;
    animation-delay: 0.0s;
}
#animated-wide-logo-link:hover .cwa-logo-wide-green {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.35s ease-in-out 1;
    animation-delay: 0.27s;
}
#animated-wide-logo-link:hover .cwa-logo-wide-orange {
	transform-origin: center; 
	animation: animated-wide-logo-link 0.4s ease-in-out 1;
    animation-delay: 0.49s;
}
@keyframes animated-wide-logo-link {
    0% {
        transform: scale(1); /* Starting normal size */
    }
    50% {
        transform: scale(0.985); /* Grows 50% larger at the midpoint */
    }
    100% {
        transform: scale(1); /* Shrinks back to normal size at the end */
    }
}
/* End Animating Wide CWA Logo Elements on Hover */