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


/* -- Footer Section -- */

.header-section {}
.header-section .logo {
	display: inline-block;
	/*width: calc(var(--card)*.75);*/
}

/* -- Menu Toggle Button --  */

.menu-toggle {
	cursor: pointer;
	position: fixed;
	top: var(--space-100);
	right: var(--column-unit);
	z-index: 1001;
	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-light) 25%, transparent);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
	
	border-radius: 50%;
	transition: var(--transition-speed) var(--transition-ease);
}
.menu-toggle * {
	pointer-events: none;
}
.menu-toggle:hover {
	box-shadow: inset 0 0 0 var(--border-width) var(--hue-primary);
}

.menu-toggle .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);
}

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


/* -- Main Nav -- */

.main-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1000;
	
	padding: var(--space-100) var(--column-unit);
	text-align: right;
	color: var(--hue-neutral-70);

	visibility: hidden;
	opacity: 0;
	/*transform: scale(0.95);*/
	transform: scale(1.15);
	transition: opacity var(--transition-speed) var(--transition-ease),
				visibility var(--transition-speed) var(--transition-ease),
				transform var(--transition-speed) var(--transition-ease);
	overflow-y: scroll;

	background: color-mix(in srgb, var(--hue-light) 85%, transparent);
	backdrop-filter: blur(7px);
	-webkit-backdrop-filter: blur(7px);
}

#menu-toggle-checkbox:checked ~ .main-nav {
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}

.main-nav .menu-list {}

.main-nav .menu-list ul,
.main-nav .menu-list ol,
.main-nav .menu-list li {
	list-style: none;
}

.main-nav .menu-list li {
	font-size: var(--h5);
	margin: 0;
}

.main-nav .menu-list a {
	display: inline-block;
	padding: var(--space-min);
	white-space: nowrap;
}

.main-nav .menu-list .submenu-label {
	display: inline-block;
	cursor: pointer;
	padding: var(--space-min);
	font-size: var(--h5);
}
.main-nav .menu-list .submenu-label:after {
	content: " + ";
}

.main-nav .menu-list .submenu-checkbox:checked ~ .submenu-label:after {
	content: " – ";
}

.main-nav .menu-list .sub-menu {
	max-height: 0;
	overflow-y: clip;
	transition: max-height var(--transition-speed) var(--transition-ease);
	font-size: var(--p);
	color: var(--hue-dark);
}

.main-nav .menu-list .submenu-checkbox:checked ~ .sub-menu {
	max-height: 1500px;
}

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