: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)) * ((var(--vw_) - 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)) * ((var(--vw_) - 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)) * ((var(--vw_) - 1280px) / (1920 - 1280))); /* { readonly: true } */
	
	--hdr-nv-sp: 35; /* { 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)) * ((var(--vw_) - 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 {
	
	z-index: 5;
	position: relative;
	
	.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);
		min-width: 2.778rem;
	}
	
	.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) {
		
		--hdr-lg-mx-wd-mbl: 50; /* { 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)) * ((var(--vw_) - 320px) / (1920 - 320))); /* { readonly: true } */
		
		.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: 34rem;
			min-width: 23rem;
			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 ));
			}

		}

		/* Grandchild accordion inside a flyout (details/summary) */
		.fly-nv {

			.fly-nv-acc-sm {
				cursor: pointer;
				list-style: none;
			}

			.fly-nv-acc-sm::-webkit-details-marker {
				display: none;
			}

			.fly-nv-acc-lbl {
				flex: 1;
			}

			.nv-chv-acc {
				width: 0.55em;
				height: auto;
				align-self: center;
				/* widen the tap target beyond the small glyph (~36px square); keep padding symmetric so rotation pivots on the glyph center */
				box-sizing: content-box;
				padding: 1rem 0.9rem;
				margin-left: 0.4rem;
				margin-right: -0.9rem;
				transition: rotate var(--g-trn-sp) var(--g-trn-tf), scale var(--g-trn-sp) var(--g-trn-tf), color var(--g-trn-sp) var(--g-trn-tf);
			}

			/* Hover/focus lands on the arrow region (the label link fills the rest of the row) */
			.fly-nv-acc-sm:is(:hover, :focus-visible):not(:has(a:hover)) .nv-chv-acc {
				color: var(--link-hover);
				scale: 1.3;
			}

			.fly-nv-acc[open] .nv-chv-acc {
				rotate: 180deg;
			}

			/* Animate expand/collapse (browsers without interpolate-size fall back to instant) */
			.fly-nv-acc {
				interpolate-size: allow-keywords;
			}

			.fly-nv-acc::details-content {
				height: 0;
				overflow: clip;
				transition: height var(--g-trn-sp) var(--g-trn-tf), content-visibility var(--g-trn-sp) var(--g-trn-tf) allow-discrete;
			}

			.fly-nv-acc[open]::details-content {
				height: auto;
			}

			.fly-nv-acc-list {
				list-style: none;
				margin: 0 0 calc(var(--sp-qk) * var(--sp-t-mpt-30));
				padding: 0 0 0 calc(var(--sp-qk) * var(--sp-t-mpt-60));
				border-left: 2px solid hsl(from var(--bdr-clr, var(--text-color)) h s l / var(--bdr-clr-o));

				a {
					display: block;
				}
			}
		}

		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;
			z-index: 1;
		}

	}

	@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-mnu {
					width: 67%;
				}
			}

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

			.chld-arw {
				padding: 0.7rem;
				padding-right: 0;
			}
		}

		.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;
	}
	
}