/*
 *   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: #fff;
	--nav-list-repeat: no-repeat;
	/*background: #fff;
	background-repeat: no-repeat;
	  border: none;
	border-top: none;*/
	
  }
}
/*
@media (min-width: 60em) {
  nav ul {
    --nav-list-gap: 1.25rem;
  }
}
*/
nav {
  position: var(--nav-position, static);	
  /*
  position: var(--nav-position, fixed);
  inset-block-start: 1rem;
  inset-inline-end: 1rem;*/
}
/* Remove the default list styling and create a flexible layout for the list */
nav ul {
  /*
  --nav-list-bg: #fff;
  background: var(--nav-list-bg, #fff);
 */
 background: var(--nav-list-bg, #fff);
  /*background: 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: no-repeat no-repeat;*/
	
	 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);
  /*box-shadow: var(--nav-list-shadow, -5px 0 11px 0 rgb(0 0 0 / 0.2));*/
  display: flex;
  flex-direction: var(--nav-list-layout, column);
  flex-wrap: var(--nav-list-wrap, nowrap);
  gap: var(--nav-list-gap, 0.25em);
  /*gap: 1rem;*/
  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; */
  /*
  inset-inline-end: calc(0.5rem - 5vw);
  */
  width: var(--nav-list-width, calc(100vw - 1rem));
  visibility: var(--nav-list-visibility, visible);
  /*justify-content: var(--nav-list-justify, space-evenly);*/
  justify-content: var(--nav-list-justify, center);
  border: var(--nav-list-border, var(--padding-stage) solid #fff);
  /*
  border: var(--nav-list-border, var(--padding-stage) solid #DAD8B2);
  */
  /*
  border: var(--nav-list-border, calc(5vw - 0.5rem) solid yellow);
  */
  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;
	}
}

body:has([aria-expanded="true"]) .logo {
	position: relative;
	z-index: 99;
}


/* 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);
}

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