/*
 * ===========
 * Header
 * ===========
 */

/* -- Main Banner -- */
.main-banner a {
	justify-content: center;
	display: flex;
	align-items: center;
}

/* -- Main Header -- */
.main-header-section {
	position: sticky;
	width: 100%;
	top: 0;
	z-index: 1000;
	backdrop-filter: blur(5px);
	-webkit-backdrop-filter: blur(5px);
	background: rgba(0, 51, 102, 0.75);
	color: var(--hue-light);

	.main-header {
		display: flex;
		flex-wrap: wrap; /* This is required for main-nav to wrap to next line in mobile */
		align-items: center;
		justify-content: space-between;

		.logo {
			width: calc(var(--card) * 0.35);
			padding: var(--space-25) 0;

			@media( min-width: 500px )  {
				width: calc(var(--card) * 0.50);
			}
			@media( min-width: 1500px )  {
				width: calc(var(--card) * 0.65);
			}
		}

		.menu-toggle {
			cursor: pointer;
			width: var(--space-100);
			height: var(--space-100);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			gap: var(--space-min);

			background: color-mix(in srgb, var(--hue-primary) 25%, transparent);
			backdrop-filter: blur(3px);
			-webkit-backdrop-filter: blur(3px);
			
			border-radius: var(--space-min);
			/*border-radius: 50%;*/
			transition: var(--transition-speed) var(--transition-ease);

			* { pointer-events: none; }

			.icon-bar {
				width: var(--space-50);
				height: 2px;
				background-color: var(--hue-light);
				border-radius: 1px;
				transition: transform var(--transition-speed) var(--transition-ease),
							opacity var(--transition-speed) var(--transition-ease);
			}

			@media( min-width: 1000px ) {
				display: none;
			}
		}

		.menu-toggle:hover { box-shadow: inset 0 0 0 var(--border-width) var(--hue-light); }

		.main-nav {
			flex-basis: 100%;	/* This is required for main-nav to wrap to next line in mobile */
			
			height: 100vh;		/* For Collapsing Mobile Menu */
			max-height: 0;		/* -"- */
			overflow: clip;		/* -"- */
			transition: max-height .5s ease-in-out;

			@media( min-width: 1000px )  {
				flex-basis: auto;
				height: auto;
				max-height: none;
			}

			ul {
				list-style: none;
				display: flex;
				flex-direction: column;
				align-items: flex-end;
				padding-top: var(--space-min);

				@media( min-width: 1000px )  {
					flex-direction: row;
					/*gap: var(--space-50);*/
					padding: 0;
				}
				@media( min-width: 1000px ) {
					gap: var(--space-75);
				}
			}

			li { margin: 0; }

			.link {
				display: inline-block;
				font-size: var(--h5);
				line-height: 2;
				margin-bottom: var(--space-25);
				color: var(--hue-light);

				@media( min-width: 1000px )  {
					/*font-size: var(--label);*/
					margin: 0;
				}
				@media( min-width: 1000px ) {
					font-size: var(--p);
				}
			}
		}
	}
}

/* -- Menu Toggle "Checked" Actions -- */
#menu-toggle-checkbox:checked ~ .main-header-section {
	@media( max-width: 999px ) {
		background: rgba(0, 51, 102, 1);

		/* -- Menu Button "X" animation -- */
		.menu-toggle {
			.icon-bar:nth-child(1) { transform: translateY(calc((var(--space-min) + 2px) * 1)) rotate(45deg); }
			.icon-bar:nth-child(2) { opacity: 0; }
			.icon-bar:nth-child(3) { transform: translateY(calc((var(--space-min) + 2px) * -1)) rotate(-45deg); }
		}

		.main-nav {
			max-height: 120vh;
			overflow-y: scroll;
		}
	}
}

@media( min-width: 500px )  {}
@media( min-width: 1000px ) {}
@media( min-width: 1500px ) {}