/*
 * Main Navigation
 *
 * Robert Stacey, 2024-03-22
 * Improvements to support tabbing and operation on touch screens
 */
.menu1,
.menu2 {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
	padding-top: 5px;
}

ul.nav,
ul.nav ul {
	display: flex;
	flex-wrap: wrap;
	list-style: none;
	padding: 0;
	margin: 0;
	white-space: nowrap;
}

ul.nav ul {
	visibility: hidden;
	position: absolute;
	flex-direction: column;
	z-index: 2;
	padding: 4px;
	transition: visibility 0.2s linear;
	background-color: #dfdfdf;
}

ul.nav ul ul {
	left: 100%;
	margin-left: -5px; /* same as width of submenus, or -1px if you have borders, to avoid 2 x 1px borders side by side adding up to a 2 px border */
	margin-top: -21px; /* adjust to move submenus up/down a bit so the submenu's top border lines up with the parent LI's top border */
	background-color: #cfcfcf;
}

ul.nav li a {
	display: block;
	text-decoration: none;
	transition: background-color 0.2s linear;
}

ul.nav li button {
	all: unset;
	display: block;
	color: -webkit-link;
	cursor: pointer;
}

ul.nav li {
	padding: 2px;
}

/* Only the first menu items have background color */
.menu1 ul.nav > li {
	background-color: #efefef;
	margin: 2px;
}

ul.nav > li {
	padding: 4px;
	margin: 0 4px;
}

ul.nav li:hover,
ul.nav li:focus-within {
	background-color: #ffff66;
}

/* Show submenus */
ul.nav li:hover > ul,
ul.nav li:focus-within > ul {
	visibility: visible;
}

/* If hover is supperted */
@media (hover: hover) {
	ul.nav li:hover > ul {
		visibility: visible;
	}
}