@media only screen and (min-width: 480px) {

  #dropdown ul {
    right: 0;
    }
  }


@media only screen and (max-width: 479px) {
  nav figure figcaption {
    display: none !important;
    }
  #dropdown ul {
    right: var(--negative-nav-padding);
    }

  }

nav {
  text-decoration: none;
  text-transform: uppercase;
  --negative-nav-padding: calc(var(--nav-padding) * -1);
  --text-color: white;
  color: var(--text-color);
  height: var(--child-height);
  position: -webkit-sticky;
  position: sticky;
  margin-top: var(--nav-margin);
  padding: var(--nav-padding) var(--margin-primary);
  z-index: 1000;
  align-items: center;
  top: 0;
  left: 0;
}
nav div[data-blur] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  z-index: -3;
  }
/*#region children */

/*#region typography */
nav ul {
  list-style: none;
}
nav ul * h2 {
  font: var(--font-elegant-text);
  transform: scale(103%);
  //font-weight: 300;
  letter-spacing: var(--letterspacing-xwide);
  }

//nav figure figcaption > * {
//  line-height: 0.8;
//}
:is(nav) :is(h1, h2) {
}
h1 {
  font-family: Noirpro, Arial, sans-serif;
  font-size: var(--fontsize-navbar-h1);
  //font-size: calc(var(--nav-interior-thickness) * 0.66);
  line-height: var(--minimal-line-height);
  white-space: nowrap;
  text-indent: -1px;
  letter-spacing: 0.15em;
  vertical-align: top;
  margin: 0;
  }
nav h1 ~ * {
  font: var(--font-elegant-text);
  //font-family: var(--fontface-body);
  //font-size: var(--fontsize-navbar-subtitle);
  //font-weight: 300;
  //line-height: 0.7rem;
  //letter-spacing: 0.2rem;
  letter-spacing: var(--letterspacing-xwide);
  white-space: nowrap;
}
/*#endregion typography */

nav li a {
  box-sizing: border-box;
}
nav a h2 {
  line-height: 1;
  vertical-align: center;
  box-sizing: border-box;
  padding: var(--nav-padding);
}
nav ul#menu-desktop li {
  display: inline-block;
  //padding: var(--nav-padding);
  height: 100%;
  width: auto;
  align-self: center;
  //line-height: 0;
  //background-color: lime;
}
nav ul#menu-desktop {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  //box-sizing: content-box;
  gap: var(--nav-padding);
  right: var(--negative-nav-padding);
  //This allows for a larger clickable
  // area on the anchor tags while
  // maintaining optical alignment
  // The value is declared within
  // the parent selector: nav.
}

nav * a,
nav * a:visited {
  color: var(--text-color);
  }
nav * a:hover {
  color: var(--color-accent);
  }
nav * a:active,
nav * a.active {
color: var(--color-bright);
  }
//nav .active {
//
//  }
//nav .active a {
//  color:var(--color-bright);
//  }

  /*#region brand*/

nav figure {
  display: flex;
  align-self: flex-start;
  //background-color: red;
}
nav figure img {
  height: 100%;
  align-self: center;
}
nav figure figcaption {
  //margin-left: var(--gutter-sm);
  padding: var(--gutter-micropadding) 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  margin: 0;
  box-sizing: content-box;
}

/*#endregion*/

:is(nav) :is(figure, > ul) {
  //max-height: var(--nav-interior-thickness);
  height: 100%;
  display: flex;
  flex-direction: row;
  //justify-content: center;
  align-content: center;
  width: auto;
  //background-color: #f26800;
  //  outline: dotted 2px orange;
  gap: var(--gutter-sm);
  //position: relative;
  //top: 0;
  //left: 0;
}

/*#region Mobile Menu*/
#menu-mobile {
  --gap: var(--gutter-md);
  //outline: dotted 2px blue;
  position: relative;
  display: flex;
  height: var(--nav-thickness);
  //top: var(--negative-nav-padding);
  box-sizing: border-box;
  //background-color: pink;
}

#dropdown {
  //content: "";
  //height: var(--nav-margin);
  width: 100vw;
  max-width: 100vw;
  //padding: var(--gutter-xl) var(--margin-primary);
  height: 0;
  overflow: hidden;
  position: absolute;
  top: var(--nav-thickness);
  right: var(--negative-margin-primary);
  //background-color: var(--color-alpha-black-med);
  text-align: right;
  //background-color: #b3d4fc;
  box-sizing: border-box;
  //padding: var(--gap) var(--margin-primary) var(--gap) var(--gap);
}

#dropdown.show {
  //overflow: clip;
  height: var(--nav-margin) !important;
  width: 100vw;
  max-width: 100vw;
  //max-width: 100%;
  //white-space: pre-line;
  padding: var(--gutter-xl) var(--margin-primary);
}


#dropdown ul {
  position: relative;
  top: 0;
  //right: 0;
  display: flex;
  flex-direction: column;
  align-content: flex-start;
  gap: var(--gap);
  width: 100%;
  height: 100%;
  padding: 0;
  //background-color: blue;
  //height: auto;
  //height: auto;
}

:is(nav) :is(#menu-mobile) :is(li, a) {
  width: auto;
  display: block;
  //background-color: #f26800;
}

#hamburger-wrapper {
  --thick: var(--gutter-xl);
  --thin: var(--gutter-xs);
  display: flex;
  align-items: center;
  width: var(--thick);
  height: var(--nav-thickness);
  //height: 120%;
  align-self: center;
  margin-right: var(--negative-nav-padding);
  padding: 0 var(--nav-padding);
  cursor: context-menu;
  //background-color: red;
}
.burger {
  position: relative;
  margin-left: auto;
  margin-right: auto;
}

.burger,
.burger:before,
.burger:after {
  padding: 0;
  background-color: var(--text-color);
  width: 100%;
  height: 3px;
  border-radius: 3px;
  transition: margin 0.1s 0.2s, transform 0.2s;
}
.burger:before,
.burger:after {
  margin: 0;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}
.burger:before {
  margin-top: calc(var(--thin) * -1);
}
.burger:after {
  margin-top: var(--thin);
}

/* STYLES FOR OUR BURGER WHEN THE MENU OPENS */
.open .burger {
  transform: rotate(45deg);
}
.open .burger,
.open .burger:before,
.open .burger:after {
  transition: margin 0.2s, transform 0.1s 0.2s;
}
.open .burger:before,
.open .burger:after {
  margin-top: 0;
}
.open .burger:after {
  transform: rotate(-90deg);
}
/*#endregion*/
/*#endregion nav children */