/* ### DESKTOP/POINTER ### */
@media screen {

	#menuburger {
		display: none;
	}

	header {
		justify-content: center;
	}
	header > nav {
		flex: auto;
		flex-direction: row;
		gap: 1em;
		align-items: center;
		max-width: 900px;
	}

	header > nav > menu {
		flex: auto;
		display: flex;
		flex-direction: row;
		gap: 2em;
		justify-content: center;
	}

	/* forces an overflow down on break to keep the top row of text level w/other items, adjust first row to more or less line up with logo text - sloppy but whatever! */
	header > nav > menu > li {
		height: 1em;
		padding-bottom: 1rem;
	}

	header a {
		text-align: center;
	}

	header li.has-menu > a::after {
		content: '';
		display: inline-block;
		width: 20px;
		height: 13px;
		background: url(/img/arrow-down.svg) no-repeat center right;
	}

	header menu#primary menu li.has-menu > a::after {
		float: right;
		height: 20px;
		background-image: url(/img/arrow-right.svg);
	}

	header #user menu li.has-menu > a::after {
		float: left;
		height: 20px;
		background-image: url(/img/arrow-left.svg);
	}


	/* submenu parent elements must be relative for their absolute positioning to relate appropriately */
	header li,
	#user {
		position: relative;
	}

	header > nav menu li > menu,
	#user menu {
		position: absolute;
		left: -999em;
		width: 200px;
		background-color: var(--bg-color);
		z-index: 1;

		filter: drop-shadow(rgba(0, 0, 0, 0.03) 0px 20px 13px) drop-shadow(rgba(0, 0, 0, 0.08) 0px 8px 5px);

		border-radius: 0.25rem;
		opacity: 0;
		transition: opacity 0.1s ease-out;

		padding: 0.25em;
	}

	header > nav menu li:hover > menu,
	#user:hover menu {
		opacity: 1;
	}

	header > nav menu li:hover > menu {
		left: 0px;
	}

	#user:hover > menu {
		left: auto;
		right: 0px;
	}

	header > nav menu menu li:hover > menu {
		top: 0px;
		left: 190px;
	}

	#user:hover menu li:hover > menu {
		top: 10px;
		left: -190px;
	}

	/* submenu item spacing */
	header > nav > menu menu li,
	#user li {
		padding: 0.5em 0.25em;
		border-radius: 0.2em;
	}

	/* submenu item hover highlight */
	header > nav > menu menu li:hover,
	#user li:hover {
		background-color: var(--highlighter-color);
	}

	/* badge down arrow */
	#badge img:last-child {
		padding: 0em 0.5rem;
	}

	/* overflow ellisis */
	#badge strong, #badge span {
		display: block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		max-width: 200px;
	}


}