body {
  --nav-height: 70px;

  /* Teal navbar on light and dark mode */
  --color-nav: var(--color-teal-700);
  --color-nav-items: white;
  --color-nav-separator: var(--color-teal-800);

  --color-dark-nav: var(--color-teal-700);
  --color-dark-nav-separator: var(--color-slate-700);

  /* (TEST) White navbar */
  /*--color-nav: var(--color-gray-50);*/
  /*--color-nav-items: var(--text-gray);*/

  /* (TEST) Dark navbar */
  /*--color-nav: var(--color-gray-800);*/
  /*--color-dark-nav: var(--color-gray-800);*/
  /*--color-nav-items: white;*/
}

body::before {
  content: " ";
  display: block;
  height: var(--nav-height);
  background-color: var(--color-nav);
}

/* ------- LARGE NAVBAR ------- */
#navbar--lg {
  display: none;
  align-items: end;
  justify-content: space-between;
  padding: 1.6rem 4rem;
  background-color: var(--color-nav);
}

#navbar--lg #navbar-logo {
  width: 200px;
}

#navbar--lg ul.navbar-lg__menu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-width: 40%;
  font-size: 1.3rem;
  margin-bottom: 0.8rem;

  li {
    padding: 0 1rem;
  }
  .navbar-lg-menu__item {
    color: var(--color-nav-items);
    cursor: pointer;
    &:hover, &:focus-visible {
      text-decoration: underline;
      text-underline-offset: 8px;
      text-decoration-color: var(--color-gray-200);
      outline: none;
    }
  }
}

/*!* LARGE NAVBAR -- Color menu items on hover: *!*/
/* - For menu items that open submenus (condition: check their submenu is open). */
#navbar--lg ul.navbar-lg__menu li:has(> coup-doeil) coup-doeil[data-popover-open="true"] {
  color: var(--color-teal-700);
}

/* - For current menu items.*/
#navbar--lg ul.navbar-lg__menu li.active-item > coup-doeil > .navbar-lg-menu__item  {
  text-decoration: underline;
  text-underline-offset: 8px;
  text-decoration-color: var(--color-gray-200);
}

/* LARGE NAVBAR -- Popovers */

.navbar__submenu-popover {
  background: var(--color-accent-sm);
  padding: 0.6rem;
  box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
  max-width: 24rem;
  border-radius: 0.25rem;
  position: relative;
  z-index: 10;

  li {
    padding: 0.5rem 0.8rem;
  }
  li:hover, a:focus-visible > li {
    background-color: var(--color-accent-md);
    border-radius: 4px;
    color: var(--color-teal-700);
  }
  li.active-item {
    background-color: var(--color-accent-sm);
    border-radius: 4px;
    color: var(--color-teal-700);
    path {
      filter: brightness(0) saturate(100%) invert(37%) sepia(14%) saturate(3340%) hue-rotate(131deg) brightness(89%) contrast(88%);
    }
  }
  a:focus-visible {
    outline: none;
  }
}

/* ------- SMALL NAVBAR ------- */

#navbar--sm {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 1rem;
  background-color: var(--color-nav);
}

#navbar--sm #navbar-logo {
  width: 120px;
}

#navbar--sm .navbar-sm__top-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* SMALL NAVBAR -- Main menu */

#navbar--sm ul.navbar-sm__menu {
  display: none;
  font-size: 1rem;
  flex-grow: 1;
  color: white;
  padding-left: 0.5rem;

  background-image: url("/logos/logo_eime_white_no_text.png");
  background-size: 25%;
  background-position: bottom 2% center;
  background-blend-mode: lighten;
  background-repeat: no-repeat;
}

#navbar--sm:has(#navbar-burger.open) {
  height: 100vh;
  width: 100vw;
  z-index: 3;
  position: fixed;
  overflow: scroll;

  ul.navbar-sm__menu {
    display: block;
  }

  #navbar-logo {
    display: none;
  }
}

/* SMALL NAVBAR -- Main menu list items, first level */

#navbar--sm .navbar-sm__menu > li {
  /* Add discrete border bottom and margin to every list item except the last one */
  &:not(:last-of-type) {
    border-bottom: 1px solid var(--color-nav-separator);
    margin: 0.5rem 0;
  }

  /* Add padding to list item with children (details element) */
  & > details > summary {
    padding: 0.9rem 0.5rem 0.9rem 1rem;
    cursor: pointer;
  }

  /* Add padding to list item without children (direct link) */
  & > a > .navbar-sm__direct-link {
    width: 100%;
    display: block;
    padding: 1rem 0.5rem 0.9rem 1rem;
  }
}

/* SMALL NAVBAR -- Main menu list item, second level */
#navbar--sm ul.navbar-sm-menu__submenu {
  padding: 0rem 0 1rem 1.5rem;

  & > a > li {
    padding: 0.3rem 0 0 0.5rem;
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(101%) contrast(101%);
  }
}

/* SMALL NAVBAR -- Main menu list item, second level, summary marker */

#navbar--sm details summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  &::after {
    content: url("/assets/icons/flaticon-fi-rr-angle-small-down-3cfd12d5.svg");
    filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(221deg) brightness(101%) contrast(101%);
  }
  [open] &::after {
    content: url("/assets/icons/flaticon-fi-rr-angle-small-up-f1c1b90f.svg");
  }
}

#navbar--sm details summary::-webkit-details-marker {
  display: none;
}

/* SMALL NAVBAR -- BURGER ICON */

/* Note on burger bars:
- Original burger icon is from Jess Couch on https://codepen.io/designcouch/pen/ExvwPY
- Original icon was 3 times larger, so we will divide pixel positions by 3.
- It displays weird when top position of first bar is at 0px, so we add one pixel for every bar. */

#navbar-burger {
  width: 20px; /* Original icon : 60px. 60/3 = 20px */
  height: 15px; /* Original icon : 45px. 45/3 = 20px */
  position: relative;
  margin-left: 0.5rem;
  transform: rotate(0deg);
  transition: .5s ease-in-out;
  cursor: pointer;
}

#navbar-burger span {
  display: block;
  position: absolute;
  height: 2px;
  width: 100%;
  background: white;
  border-radius: 9px;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: .25s ease-in-out;
}

#navbar-burger span:nth-child(1) {
  top: 1px; /* Original icon : 0px. 0px + 1 = 1px */
  transform-origin: left center;
}

#navbar-burger span:nth-child(2) {
  top: 7px; /* Original icon : 18px. 18/3 + 1 = 7px */
  transform-origin: left center;
}

#navbar-burger span:nth-child(3) {
  top: 13px; /* Original icon : 36px. 36/3 + 1 = 13px */
  transform-origin: left center;
}

#navbar-burger.open span:nth-child(1) {
  transform: rotate(45deg);
  top: -1px;
  left: 3px;
}

#navbar-burger.open span:nth-child(2) {
  width: 0;
  opacity: 0;
}

#navbar-burger.open span:nth-child(3) {
  transform: rotate(-45deg);
  top: 13px;
  left: 3px;
}

body:has(#navbar--sm > .navbar-sm__top-bar > #navbar-burger-hitzone > #navbar-burger.open) {
  &::before {
    height: 0;
  }
}

/* COMMON TO LARGE AND SMALL NAVBARS -- Used to hide / reveal navbar on scroll  */

#navbar--lg, #navbar--sm:has(#navbar-burger:not(.open)) {
  width: 100%;
  height: var(--nav-height);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 3;

  transition: transform 0.2s;
}

.navbar--hidden {
  transform: translateY(calc(-1 * var(--nav-height)));
  box-shadow: none;
}


/* ------- MEDIA QUERIES ------- */

@media (prefers-color-scheme: dark) {
  body {
    --color-nav: var(--color-dark-nav);
    --color-nav-separator: var(--color-dark-nav-separator);
  }
  body:has(#navbar--sm:not(.hidden))::before {
    background-color: var(--color-body-bg);
  }
  #navbar--sm {
    background-color: var(--color-body-bg);
  }
  #navbar-burger span {
    background: var(--color-default-on-body);
  }
  .navbar__submenu-popover {
    li:hover, a:focus-visible > li {
      color: var(--color-default-on-body);
    }
    li.active-item {
      color: var(--color-teal-400);
      path {
        filter: brightness(0) saturate(100%) invert(51%) sepia(95%) saturate(400%) hue-rotate(124deg) brightness(96%) contrast(88%);
      }
    }
  }
}

@media (width >= 1024px) {
  body {
    --nav-height: 105px;
  }

  #navbar--sm { display: none !important; }
  #navbar--lg { display: flex; }
}