:root {
	--hdr-mnu-btn-s: 2.2rem; /* { min: 1.5, max: 3, step: .1, friendly: 'Mobile | Header Menu Button Size', group: 'Calculations' } */
	--hdr-phn-icn-s: 1.3rem; /* { min: 1, max: 2, step: .1, friendly: 'Mobile | Header Phone Icon Size', group: 'Calculations' } */
	
	--hdr-lg-mx-wd: 280; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Width Desktop', group: 'Calculations' } */
	--hdr-lg-mx-wd-mbl: 170; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Width Mobile', group: 'Calculations' } */
	--hdr-lg-mx-wd-clc: calc((var(--hdr-lg-mx-wd-mbl) * 1px) + (var(--hdr-lg-mx-wd) - var(--hdr-lg-mx-wd-mbl)) * ((100vw - 320px) / (1920 - 320))); /* { readonly: true } */
	
	--hdr-lg-mx-ht: 180; /* { min: 50, max: 500, step: 10, friendly: 'Logo Max Height Desktop', group: 'Calculations' } */
	--hdr-lg-mx-ht-mbl: 100; /* { min: 10, max: 300, step: 1, friendly: 'Logo Max Height Mobile', group: 'Calculations' } */
	--hdr-lg-mx-ht-clc: calc((var(--hdr-lg-mx-ht-mbl) * 1px) + (var(--hdr-lg-mx-ht) - var(--hdr-lg-mx-ht-mbl)) * ((100vw - 320px) / (1920 - 320))); /* { readonly: true } */
	
	--hdr-lg-sp: 100; /* { min: 50, max: 500, step: 10, friendly: 'Logo Margin Desktop', group: 'Calculations' } */
	--hdr-lg-sp-lpt: 50; /* { min: 10, max: 300, step: 1, friendly: 'Logo Margin Laptop', group: 'Calculations' } */
	--hdr-lg-sp-clc: calc((var(--hdr-lg-sp-lpt) * 1px) + (var(--hdr-lg-sp) - var(--hdr-lg-sp-lpt)) * ((100vw - 1280px) / (1920 - 1280))); /* { readonly: true } */
	
	--hdr-nv-sp: 50; /* { min: 50, max: 500, step: 10, friendly: 'Top Nav Link Spacing Desktop', group: 'Calculations' } */
	--hdr-nv-sp-lpt: 20; /* { min: 10, max: 300, step: 1, friendly: 'Top Nav Link Spacing Laptop', group: 'Calculations' } */
	--hdr-nv-sp-clc: calc((var(--hdr-nv-sp-lpt) * 1px) + (var(--hdr-nv-sp) - var(--hdr-nv-sp-lpt)) * ((100vw - 1280px) / (1920 - 1280))); /* { readonly: true } */
	
	--hdr-bnr-icn-sz: 1.2em; /* { readonly: true } */
	
	--hdr-tb-arw-s: 0.9rem; /* { readonly: true } */
	
	--ovlp-hdr-bg-o: 0; /* { min: 0, max: 0.9, step: 0.05, friendly: 'Overlap Header BG Opacity', group: 'Calculations' } */
}

#HeaderZone {
	z-index: 10;
	position: relative;
}

.hdr {
	
	.tp-lg {
		max-width: var(--hdr-lg-mx-wd-clc);
		
		img {
			max-height: var(--hdr-lg-mx-ht-clc);
		} 
	}
	
	.nv .el-tab,
	.nv .el-sec-tab {
		outline: none;
		font-size: var(--hdr-tb-arw-s);
		margin-left: var(--hdr-tb-arw-s);
	}
	
	.nv .el-tab:is(:hover, :focus),
	nav li.selected > a {
		color: var(--link-hover);
	}
	
	/* Menu Button Styles */
	.mnu-btn {
		position: relative;
		cursor: pointer;
		font-size: var(--hdr-mnu-btn-s);
	}
	
	.btn-tp {
	    top: 0;
	    right: 0;
		z-index: 4;
	    position: fixed;
	    padding: 1.222rem;
	    visibility: hidden;
	    transform: translateX(100%);
	    transition: transform var(--btn-trn-sp) var(--btn-trn-tf) 0s, background-color var(--btn-trn-sp) var(--btn-trn-tf) 0s, color var(--btn-trn-sp) var(--btn-trn-tf) 0s, visibility var(--btn-trn-sp) var(--btn-trn-tf) 0s;
	    transition-behavior: allow-discrete;
	}
	
	.nt-bnr svg {
		font-size: var(--hdr-bnr-icn-sz);
	}
	
	.srch {
		font-size: 1.5rem;
	}

	@media screen and (min-width:1280px) {

		.tp-lg {
			margin-right: var(--hdr-lg-sp-clc);
		}

		.nv > ul:not(.mnu-nv) > li + li {
			margin-left: var(--hdr-nv-sp-clc);
		}

		.nv:last-child > ul li:last-child {
		    margin-right: 0;
		}

		.fly-nv {
			max-width: 25rem;
			min-width: 15rem;
			width: max-content;
			max-height: calc(100dvh - 20rem);
			position: absolute;
			left: 0;
			top: 100%;
			opacity: 0;
			overflow-y: auto;
			visibility: hidden;
			display: block;
			transition: visibility var(--g-trn-sp) var(--g-trn-tf) 0s, opacity var(--g-trn-sp) var(--g-trn-tf) 0s;
			transition-behavior: allow-discrete;

			ul li a:not(:only-child) {
			    max-width: calc(100% - (var(--hdr-tb-arw-s) * 2 ));
			}

		}

		li:is(:hover,:focus-visible) > .fly-nv,
		li:has(a:is(:hover,:focus-visible)) > .fly-nv,
		.fly-nv:has(a:is(:hover,:focus-visible)) {
			opacity: 1;
			visibility: visible;
		}

	}

	@media screen and (max-width:1279px) {

		.mbl-mnu {
			width: 83%;
			height: 100dvh;
			left: 0;
			right: auto;
			overflow: auto;
			padding-top: 0.811rem;
			padding-bottom: 4rem;
			translate: -100% 0;
			border: none;
			position: fixed;
			transition: translate var(--g-trn-sp) var(--g-trn-tf), display var(--g-trn-sp) var(--g-trn-tf) allow-discrete, overlay var(--g-trn-sp) var(--g-trn-tf) allow-discrete;

			&::backdrop {
				opacity: 0;
				background: hsl(from var(--black) h s l / var(--bx-sdw-o));
				transition: opacity var(--g-trn-sp) var(--g-trn-tf);
				backdrop-filter: blur(3px);
			}

		    &:popover-open {
				translate: 0 0;

				&::backdrop {
					opacity: 1;
				}

				@starting-style {
					translate: -100% 0;

					&::backdrop {
						opacity: 0;
					}

				}
			}

			.mbl-mnu {
				width: 75%;
			}

			.mbl-nv {
				flex: 1 1 auto;
			}
		}

		.phn-icn {
		    font-size: var(--hdr-phn-icn-s);
		    border-radius: 50%;
		    padding: 0.922rem;
		}

		.input-text {
		    border: none;
		}

		.lg-bx {
			width: 100%;
		}

	    &.lt-bg .nv {
			background-color: var(--inner-bg);
		}

		&.dk-bg .nv {
			background-color: var(--inner-bg-alt);
		}
	}

}

.overlap #HeaderZone {
	position: absolute;
	width: 100%;
	top: 0;
	left: 0;
	
	.hdr {
		background-color: hsl(from var(--background) h s l / var(--ovlp-hdr-bg-o));
	}
}

/* To Top Button Styles */
.scrolled-down .btn-tp {
    visibility: visible;
    transform: translateX(0);
}

@media screen and (min-width:1921px) {
	:root {
		--hdr-nv-sp-clc: calc(var(--hdr-nv-sp) * 1px);
	}
}

@media screen and (max-width:1279px) {

	.mnu-opn .hdr .nv {
		transform: translateX(0);
		opacity: 1;
		visibility: visible;
	}

}

@media screen and (max-width:700px) {
	
	.cms-content .hdr .nv {
		position: relative;
		transform: none;
		opacity: 1;
		width: 20rem;
		max-height: 20rem;
	}
	
}