/*
 * https://web.dev/articles/website-navigation
 */

@media (min-width: 48em) {
  nav {
    --nav-button-display: none;
    --nav-position: static;
  }
  nav ul {
    --nav-list-layout: row;
    --nav-list-position: static;
    --nav-list-padding: 0;
    --nav-list-height: auto;
    --nav-list-width: 100%;
    --nav-list-shadow: none;
    --nav-list-visibility: visible;
    --nav-list-gap: 1.25rem;
    --nav-list-bg: transparent;
    --nav-list-border: none;
    --nav-list-justify: flex-start;
    --nav-list-wrap: wrap;
	
	--nav-list-bg: var(--color-light);
	--nav-list-repeat: no-repeat;

  }
}
nav {
  position: var(--nav-position, static);	
}
nav ul {
	background: var(--nav-list-bg, linear-gradient(#fff, #fff) 10px 10px / calc(100% - 20px) calc(100% - 20px),
	linear-gradient(90deg, var(--color-primary) 0%, var(--color-primary) 100%));
	background-repeat:  var(--nav-list-repeat, no-repeat no-repeat);
	display: flex;
	flex-direction: var(--nav-list-layout, column);
	flex-wrap: var(--nav-list-wrap, nowrap);
	gap: var(--nav-list-gap, 0.25em);
	height: var(--nav-list-height, 100dvh);
	list-style: none;
	margin: 0;
	padding: var(--nav-list-padding, 2rem);
	position: var(--nav-list-position, fixed);
	inset-block-start: 0; /* Logical property. Equivalent to top: 0; */
	inset-inline-end: calc(0.5rem - 5vw); /* Logical property. Equivalent to right: 0; */
	width: var(--nav-list-width, calc(100vw - 1rem));
	visibility: var(--nav-list-visibility, visible);
	justify-content: var(--nav-list-justify, center);
	border: var(--nav-list-border, var(--padding-stage) solid #fff);
	border-top: var(--nav-list-border, 3.75rem solid #fff);
}
nav ul li {
	padding-inline: var(--nav-list-padding, 2rem);
}
@media (max-width: 47.938em) and (orientation: landscape) {
	nav ul {
		--nav-list-layout: row !important;
		--nav-list-justify: flex-start !important;
		--nav-list-wrap: wrap !important;
		align-items: center;
	}
}

/* Hide the list on narrow viewports, if it comes after an element with
   aria-expanded set to "false". */
[aria-expanded="false"] + ul {
  visibility: var(--nav-list-visibility, hidden);
  background: none;
}

/* Reset button styling */
button {
  all: unset;
  padding-block: 0.5rem;
  cursor: pointer;
  display: var(--nav-button-display, flex);
  position: relative;
  z-index: 66;
}