/* Styling til mobiludgave. Denne slår også igennem på desktop med mindre den er ændret i media queryen (@media only screen and (min-width: 768px)) */

* {
  margin: 0;
  padding: 0;
}

nav .menu-btn {
  z-index: 69420;
}

body {
  font-family: "Roboto", sans-serif;
}

main {
  margin: 0.5rem;
}

main section article img {
  width: 100%;
}

h1,
p {
  margin: 2rem 0;
}

nav {
  height: auto;
  background-color: hsl(0, 0%, 50%);
  line-height: 50px;
}

nav ul {
  display: none; /* I mobilvisning skal menuen ikke vises, før brugeren har klikket på hamburger menu ikonet */
  width: 100%;
  position: relative;
  list-style-type: none;
  text-transform: uppercase;
  font-size: 24px;
  background-color: gray;
}

nav li {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

nav ul li:hover {
  background-color: hsla(0, 0%, 20%, 0.8);
}

nav ul li h2 {
  color: gainsboro;
  font-size: 24px;
  cursor: pointer;
  padding: 0rem 2rem;
  height: 50%;
}

nav ul li a {
  text-decoration: none;
  padding: 1rem;
}

nav img {
  width: 15%;
}

/* Fælles styling for checkbox og menuikoner */
nav .menu-btn,
nav > img {
  height: 40px;
  position: absolute;
  top: 5px;
  right: 10px;
}

.menuicon,
.closeicon {
  position: absolute;
  margin-right: -4.5%;
}

/* Separat styling for checkbox */
nav .menu-btn {
  display: block;
  width: 40px;
  z-index: 100000;
  opacity: 0;
  cursor: pointer;
}

/* Separat styling for menuikoner */
nav > img {
  z-index: 6;
}

.submenu-btn {
  margin-top: -15%;
  z-index: 69;
  opacity: 0;
  position: sticky;
  width: 100%;
  height: 5rem;
  cursor: pointer;
}

.submenu-btn:checked ~ ul {
  display: block;
  z-index: 70;
}

/* Hamburger menu ikonen vises som default */
nav .menu-btn ~ .menuicon {
  display: block;
}

/* Lukke ikonet til menuen skjules som default */
nav .menu-btn ~ .closeicon {
  display: none;
}

nav .menu-btn:checked ~ .menuicon {
  display: none;
}

nav .menu-btn:checked ~ .closeicon {
  display: block;
}

nav .menu-btn:checked ~ ul {
  display: flex;
  flex-direction: column;
}

/* Særlig styling til desktop - minimum viewport bredde på 768 pixels */
@media only screen and (min-width: 768px) {
  /* Checkbox og hamburger menu ikon vises ikke på desktop */
  nav .menu-btn ~ .menuicon,
  nav .menu-btn {
    display: none;
  }

  nav ul {
    display: flex;
    justify-content: space-evenly;
    height: auto;
  }

  nav ul li {
    padding: 0;
  }

  nav ul li a {
    color: gainsboro;
  }

  /* Checkbox og pil ned ikon skal ikke vises i desktop visning */
  nav ul li img,
  nav ul li input {
    display: none;
  }

  /* Styling af dropdown menu. Den skal ikke vises (display: none), før man hover over det overliggende menupunkt */
  nav ul li ul {
    display: none;
    position: absolute;
    background-color: hsl(0, 0%, 80%);
    text-transform: none;
    width: 235px;
    font-size: 20px;
    text-align: left;
  }

  /* Når brugeren hover over det overliggende menupunkt, skal dropdown menuen vises */
  nav ul li:hover ul {
    display: block;
  }

  nav ul li:hover a {
    color: darkslategray;
  }

  nav ul li ul li {
    display: block;
    padding: 0 1rem;
  }

  nav ul li ul li:hover {
    background-color: hsla(0, 0%, 20%, 0.6);
  }

  nav ul li ul li:hover a {
    color: gainsboro;
  }
}