/*
 * ===========
 * 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(255, 255, 255, 0.75);
	transition: background var(--transition-speed) var(--transition-ease);

	&:hover {
		background: rgba(255, 255, 255, 0.95);
	}

	.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.666);
			padding: var(--space-25) 0;

			/*@media( min-width: 500px )  {
				width: calc(var(--card) * 0.666);
			}*/

			@media( min-width: 1000px )  {
				width: calc(var(--card) * 0.7);
			}
			@media( min-width: 1500px )  {
				width: calc(var(--card) * 0.85);
			}
		}

		.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-light-light) 66%, var(--hue-light));
			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; }

			&:hover { box-shadow: inset 0 0 0 var(--border-width) var(--hue-primary); }

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

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


		.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;
					padding: 0;
					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-dark);

				transition: color var(--transition-speed) var(--transition-ease);

				&:hover {
					color: var(--hue-primary);
				}

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

/* -- Menu Toggle "Checked" Actions -- */
#menu-toggle-checkbox:checked ~ .main-header-section {

	background: rgba(255, 255, 255, 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 ) {}