com.xaymar.www/_sass/_header.scss

@keyframes menu_show {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}
@keyframes menu_hide {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}

// --------------------------------------------------------------------------------
// Header
// --------------------------------------------------------------------------------
#header {
	padding: 5px;
	background: $theme-header-background;
	color: $theme-header-color;
}

#header > .content {
	display: grid;
	grid-template-columns: min-content auto;
	max-width: $theme-width;
	margin-left: auto;
	margin-right: auto;
}

// --------------------------------------------------------------------------------
// Header > Logo
// --------------------------------------------------------------------------------
#header > .content .logo {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 20px 0 0;
	padding: 0;
}

#header > .content .logo > .icon {
	justify-self: stretch;
	align-self: stretch;
	height: 90px;
	margin: 0 10px 0 0;
	padding: 0;
}

#header > .content .logo > figcaption {
	justify-self: left;
	align-self: center;
	margin: 0;
	padding: 0;
	font-family: "Oswald";
	font-size: 2.0rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .20ch;
}

// --------------------------------------------------------------------------------
// Header > Navigation
// --------------------------------------------------------------------------------
#navigation {
	font-size: 1.0rem;
	color: $theme-menu-color;
}

#navigation .menu {
	list-style: none inside;
}

#navigation .menu > .entry > .item {
	color: $theme-menu-color;
}
#navigation .menu > .entry > .item:hover,
#navigation .menu > .entry > .item:active,
#navigation .menu > .entry > .item:focus {
	color: $theme-menu-color-active;
}
#navigation .menu > .entry > .item {
	/* Menu - Entry Style */
	display: block;
	padding: .67em .67em;
	white-space: nowrap;
	cursor: pointer;
}
#navigation .menu > .entry > span.item {
	cursor: default;
}

// Responsive Layout
@media (max-width: 767px), (hover: none), (hover: on-demand) {
	#navigation-toggle {
		justify-self: stretch;
		align-self: center;
		display: block;
		margin: 0;
		padding: 0rem 2.5rem;
		text-align: right;
		font-size: 3.0rem;
		color: $theme-menu-color;
	}

	#navigation {
		grid-column-start: span 2;
	}

	// Show/Hide menu
	#navigation {
		display: none;
	}
	#navigation.open {
		display: block;
	}

	#navigation .menu {
		margin: 0;
		padding: 0;
		background: transparent;
	}

	#navigation .menu .menu {
		padding-left: 1.5rem;
		background: $theme-menu-background;
		box-shadow: 2px 2px 5px 0px black;
	}
	#navigation .menu .menu > .entry > .item:hover,
	#navigation .menu .menu > .entry > .item:focus,
	#navigation .menu .menu > .entry > .item:active {
		/* Menu - Entry Style Hover/Active */
		background: $theme-menu-light-background;
	}

	#navigation .menu > .entry > .item {
		padding: 1em 1em;
		transition: color 250ms linear;
	}
}

@media (min-width: 768px) and (hover: hover) {
	#navigation-toggle {
		display: none;
	}

	#navigation {
		justify-self: stretch;
		align-self: center;
	}

	/* Menu - Base Style */
	#navigation .menu {
		/* Menu - Menu Style */
		position: absolute;
		margin: 0;
		padding: .25em .25em;
		z-index: 1;

		background: $theme-menu-background;
		box-shadow: 2px 2px 5px 2px black;

		text-transform: none;
	}

	#navigation .menu > .entry {
		/* Menu - Entry Style */
		position: relative;
		display: block;
		margin: 0;
		padding: 0;

		cursor: default;
	}
	#navigation .menu > .entry:hover,
	#navigation .menu > .entry:focus,
	#navigation .menu > .entry:active {
		/* Menu - Entry Style Hover/Active */
		background: $theme-menu-light-background;
	}

	#navigation .has-menu > .menu {
		/* Menu - Sub-menu Style */
		position: absolute;
		display: none;
		min-width: 5em;

		pointer-events: none;

		animation-name: menu_hide;
		animation-duration: 100ms;
		animation-fill-mode: both;
		animation-direction: reverse;
	}
	#navigation .has-menu:hover > .menu,
	#navigation .has-menu > .menu:hover,
	#navigation .has-menu:focus > .menu,
	#navigation .has-menu > .menu:focus,
	#navigation .has-menu:active > .menu,
	#navigation .has-menu > .menu:active {
		/* Menu - Sub-menu Style (Active) */
		display: block;

		pointer-events: auto;

		animation-name: menu_show;
		animation-duration: 100ms;
		animation-fill-mode: both;
		animation-direction: normal;
	}

	#navigation .has-menu > .menu > .has-menu > span:after,
	#navigation .has-menu > .menu > .has-menu > a:after {
		/* Menu - Entry with Sub-Menu inside of Top-Level Menu */
		content: "❯";
	}

	#navigation .has-menu > .menu > .has-menu > .menu {
		/* Menu - Sub-Menu in Sub-Menu */
		left: calc(100% - .5em);
		top: 0;
		margin-top: -.25em;
		z-index: 2;
	}

	/* 1st Level Menu */
	#navigation > .menu {
		position: relative;
		z-index: auto;
		text-transform: uppercase;
		background: transparent;
		box-shadow: none;
	}
	#navigation > .menu > .entry {
		display: inline-block;
		padding: 0.25em 0;
		margin: 0;
		background: transparent;
	}
	#navigation > .menu > .entry:hover,
	#navigation > .menu > .entry:active,
	#navigation > .menu > .entry:focus {
		background: transparent;
	}
	#navigation > .menu > .has-menu > .menu {
		top: 3.0em;
	}
	#navigation > .menu > .entry > .item {
		padding: .5em .25em;
	}


	/* Menu with Menu


	#navigation .menu > li > .menu {
		display: block;
		position: absolute;
		padding: 0px .5em;
		margin: 0;
		cursor: auto;
		background: $theme-menu-background;
		box-shadow: 2px 2px 5px 0px black;
	}

	#navigation .menu > li > .menu > li {
		display: block;
		padding: 0 .5em;
		margin: 0;
	}
	*/

}