/*/////////////////////////////*/
/*       Header styling        */
/*/////////////////////////////*/

:root {
	font-weight: 350;
    --site-theme: "dark";
    --unified-gutter: 2.4rem;
    --unified-space: .8rem;
    --unified-color-primary: #fff;							/* Used for search bar text */
	--unified-color-modal: #fff;							/* Text color for menu dropdowns */
	--unified-color-modal-border: #1A567E;					/* Color used for border color of dropdown */
	--unified-color-menu: #fff;								/* Text color in menu header, border color of dropdown, burger line color */
	--unified-color-menuactive: #e1f0ff;					/* Text color when menu is open */
	--unified-color-menuactivemobile: #e1f0ff;				/* Text color when menu is open on mobile */
	--unified-color-menuhighlight: rgb(51,139,189);			/* Text color in menu when we want option highlighted */
	--unified-color-menuhighlightmobile: rgb(51,139,189);	/* Text color in menu when we want option highlighted on mobile */
	--unified-color-footer: #fff;							/* Main text color in footer */
	--unified-color-footer-secondary: #fff;		/* Text color in footer subtext and footerLastRow (this is the copyright stuff) */
    --unified-bgcolor-header: #0E2C3F;						/* Background color of header, Network bar border */
	--unified-bgcolor-header-start: #0E2C3F;
	--unified-bgcolor-header-end: #144260;
    --unified-bgcolor-modal: #0f4364;						/* Background color of menu dropdowns and submenu in dropdowns */
	--unified-bgcolor-search: #185a83;						/* Background color of search bar input */
	--unified-bgcolor-searchbutton: #4e9bd3;				/* Background color of search bar button and border color of search bar input */
	--unified-bgcolor-secondary: rgb(6,44,66);				/* Background color of Network Bar (appears like the border around box) */
	--unified-bgcolor-ads: #fff;							/* Not currently used */
	--unified-bgcolor-footer: #0E2C3F;						/* Background color of footer section */
	--unified-bgcolor-burger: #073553;						/* Background color of container around menu burger */
	
	/*These are the dropdown arrows on the menu  Only edit where it has EC7140 or 478D90 in the stroke */
	
	--unified-dropdown-arrow: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' stroke='%23A4CBE7'><polyline points='22,13 16,19 10,13 ' transform='translate(0, 0)'></polyline></g></svg>") no-repeat;
	
	--unified-dropdown-arrow-active: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g stroke-linecap='round' stroke-linejoin='round' stroke-width='2' fill='none' stroke='%23A4CBE7'><polyline points='22,13 16,19 10,13 ' transform='translate(0, 0)'></polyline></g></svg>") no-repeat;

	
}

[data-site-theme="light"] {
	font-weight: 350;
    --unified-color-primary: #081c2A;						/* Used for search bar text */
	--unified-color-modal: #1A567E;							/* Text color for menu dropdowns */
	--unified-color-modal-border: #1A567E;					/* Color used for border color of dropdown */
	--unified-color-menu: #fff;								/* Text color in menu header, burger line color */
	--unified-color-menuactive: #A4CBE7;					/* Text color when menu is open */
	--unified-color-menuactivemobile: #A4CBE7;				/* Text color when menu is open on mobile */
	--unified-color-menuhighlight: #4e9bd3;					/* Text color in menu when we want option highlighted */
	--unified-color-menuhighlightmobile: #4e9bd3;			/* Text color in menu when we want option highlighted on mobile */
	--unified-color-footer: #1A567E;						/* Main text color in footer */
	--unified-color-footer-secondary: #1A567E;				/* Text color in footer subtext and footerLastRow (this is the copyright stuff) */
    --unified-bgcolor-header: #0E2C3F;						/* Background color of header, Network bar border */
	--unified-bgcolor-header-start: #0E2C3F;
	--unified-bgcolor-header-end: #1a567e;
    --unified-bgcolor-modal: #fff;							/* Background color of menu dropdowns and submenu in dropdowns */
	--unified-bgcolor-search: #fff;							/* Background color of search bar input */
	--unified-bgcolor-searchbutton: #4e9bd3;				/* Background color of search bar button and border color of search bar input */
	--unified-bgcolor-secondary: #4e9bd3;					/* Background color of Network Bar - appears like the border around box */
	--unified-bgcolor-footer: rgb(164,203,231);				/* Background color of footer section */
	--unified-bgcolor-burger: #1A567E;						/* Background color of container around menu burger */
	
}

#modals {
	position: sticky;
    top: 0;
	z-index: 9999;

	& a {
		text-decoration: none; height: 28px; line-height: 28px; cursor: pointer;
	}
	
	& ul {
		list-style: none;
		z-index: 999;
	}
}

.featured {
 padding-top: var(--space);	
}

header-element {
	min-height: 110px;
	display: block;
	align-self: flex-start;
    width: 100%;
    position: sticky;
    top: 0;
    z-index: 99998;
	background-color: var(--unified-bgcolor-header);
}

@media (min-width: 40em) {
	header-element {
		min-height: 65px;
`	}
}

/*
=========================
GQM Radial Network Button
=========================
*/

.gqm-network * {
	box-sizing: content-box;
}

/* Used for mobile to show/hide when class is added with js */
.gqm-open .gqm-list,
.gqm-open .gqm-one {
	opacity: 1;
	pointer-events: auto;
}
.gqm-network.gqm-open:focus-within .gqm-segments {
	animation-play-state: running;
	filter: grayscale(0);
	cursor: pointer;
}

/* GQM Network - container */
.gqm-network {
	position: fixed;
	bottom: 1.3em;
	left: 1.3em;
	display: flex;
	flex-direction: column;
	z-index: 100;
	animation: button-out .3s ease-in-out;
	--list-bg: #ebebeb;
	--list-item-hover: #fefefe;
}
/* Dark Style */
[data-site-theme="dark"] .gqm-network {
	--list-fg: #fff;
	--list-bg: #333;
	--list-item-hover: #222;
}
/* GQM Button */
.gqm-button {
	order: 1;
	border-radius: 150px;
	display: grid;
	place-items: center;
	transition: all .3s ease-out;
	cursor: pointer;
	filter: drop-shadow(0px 4px 3px rgba(0,0,0,.3));
	position: relative;
	background: #231f20;
	pointer-events: auto;
	left: 0;
	bottom: 0;
	width: 65px;
	height: 65px;
	aspect-ratio: 1/1;
	z-index: 10;
	border: none;
}
.gqm-button:focus,
.gqm-button:hover {
	outline: none !important;
	border: none !important;
}
.gqm-button svg {
	position: relative;
	z-index: 10;
	width: 100%;
	height: 100%;
}

.gqm-segments {
	position: absolute;
	inset: 0;
	z-index: 0;
	animation: rotateColor 15s linear infinite;
	transform-origin: 50% 50%;
	background: rgba(255,255,255,.5);
	animation-play-state: paused;
}

/* Only use hover effect on devices that have 'fine' pointers */
@media (pointer: fine) {
	.gqm-network:hover .gqm-segments,
	.gqm-network.gqm-open:focus-within .gqm-segments {
		animation-play-state: running;
		filter: grayscale(0);
		cursor: pointer;
	}
}

/* Required for proper hover effect */
.gqm-zone {
	position: absolute;
	bottom: 0;
	padding-bottom: 75px;
	pointer-events: none;
}

/* GQM List */
.gqm-list {
	display: flex;
	order: 0;
	background: var(--list-bg, #eaeaea);
	position: relative;
	left: 0;
	color: var(--list-fg, #222);
	width: auto;
	border-radius: .5em;
	flex-direction: column;
	margin-bottom: 1em;
	padding: .5em 0;
	filter: drop-shadow(0px 5px 3px rgba(0,0,0,.3));
	pointer-events: none;
	opacity: 0;
	transition: opacity .3s ease-in;
	z-index: 10;
	margin-bottom: 10px;
	isolation: isolate;
}
.gqm-list:after {
	content: '';
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: var(--list-bg, #eaeaea);
	border-bottom: 0;
	border-left: 0;
	margin-left: 0;
	margin-bottom: -30px;
	z-index: -1;
}
.gqm-list:before {
	content: '';
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	height: 20px;
	background: transparent;
}

.gqm-list a,
.gqm-list svg {
	display: block;
	width: 100%;
}
.gqm-list a {
	background: none;
	filter: grayscale(1);
	padding: .65em 1.2em;
	width: 100px;
	position: relative;
	z-index: 10;
	mix-blend-mode: multiply;
	transform: translateZ(0);
}
[data-site-theme="dark"] .gqm-list a {
	mix-blend-mode: screen;
}
.gqm-list a:hover,
.gqm-list a:focus {
	mix-blend-mode: normal;
	background: var(--list-item-hover, #ffffff);
	filter: grayscale(0);
	cursor: pointer;
}

/* GQM ONE */
.gqm-one {
	position: absolute;
	left: 1px;
	bottom: 0;
	height: 65px;
	background: #cae7ff;
	background: var(--network-bg, #231f20);
	border: 1px solid #2b2e30;
	padding-left: 75px;
	padding-right: 20px;
	border-radius: 100px;
	display: grid;
	place-items: center;
	opacity: 0;
	transition: opacity .3s ease-in;
	pointer-events: none;
	filter: drop-shadow(0px 4px 3px rgba(0,0,0,.3));
	z-index: 5;
}
.gqm-one a {
	text-decoration: none;
	color: white;
	font-weight: 600;
	transition: .2s ease-in-out scale;
}
.gqm-one:has(a:hover) {
	background: linear-gradient(to top right, var(--network-hover-from, #231f20),  var(--network-hover-to, #2c2c30));
}
.gqm-one small {
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: 400;
	margin-top: -1px;
	display: block;
}

/* Only use hover effect on devices that have 'fine' pointers */
@media (pointer: fine) {
	/* Hover Effects */
	.gqm-network:hover .gqm-list,
	.gqm-zone:hover .gqm-list {
		opacity: 1;
		pointer-events: auto;
	}

	.gqm-network:hover .gqm-one,
	.gqm-zone:hover .gqm-one,
	.gqm-button:hover + .gqm-zone {
		opacity: 1;
		pointer-events: auto;
	}
}

/* Rotation Animation */
@keyframes rotateColor {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(90deg);
    }
    50% {
        transform: rotate(180deg);
    }
    75% {
        transform: rotate(270deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
/* Custom Focus Ring */
.gqm-network :focus {
  	outline: 2px solid #17a2b8; /* Cyan outline for all focusable elements */
	outline-offset: -1px;
	user-select: none;
}

/*/////////////////////////////*/
/*     End Header styling      */
/*/////////////////////////////*/