* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

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

nav {
    width: 100%; /*Navigationen fylder 100% af skærmen*/
    height: 80px; /*Højden på navigationen*/
    padding: 0 2em; /*Der er brugt em så den bliver relativ i forhold til den font størrelse der er sat*/
    background-color: #919978;
    display: flex; /* Sørger for at sætte logo og links på samme linje */
    justify-content: space-between; /* Placerer logo og links i hver sin ende */
    align-items: center; /* Centrerer indholdet vertikalt */
    z-index: 200;
}

header {
  position: fixed; /* Gør at headeren scroller med siden */
  top: 0; /* Placere headeren helt øverst i browserens visningsvindue */
  left: 0; /* Placere headeren helt til venstre i browserens visningsvindue */
  width: 100%; /* Gør at headeren fylder hele bredden af browserens visningsvindue */
  z-index: 999; /* Sørger for at headeren er ovenpå alt andet indhold */
}

.logo {
    height: 40px; /* Højden på logoet */
}

#nav-links {
    list-style: none; /* Fjerner standard punkttegn fra listen */
    display: flex; /* Placere mine links på række */
}

#nav-links li a {
    display: block; /* Giver mere kontrol og gør at jeg kan tilføje padding/margin */
    color: black;
    padding: 0.5em 1em;
    font-size: 15px;
    text-decoration: none; /* Fjerner understregning på links */
}

#toggle-nav,
#toggle-nav-btn-open,
#toggle-nav-btn-close {
    display: none; /* Skjuler min toggle-nav checkbox som standard */
}

#toggle-nav-btn-open,
#toggle-nav-btn-close {
    font-size: 3rem;
}

/*Dropdown menu*/

#nav-links li {
    position: relative; /* nødvendig for at .dropdown positioneres korrekt */
}

.dropdown {
  position: absolute;
  top: 100%; /* Placerer dropdown under det overordnede element */
  left: 0; /* Justerer dropdown til venstre for det overordnede element */
  background-color: #3D495D;
  padding: 10px 0;
  min-width: 180px; /* Minimum bredde for dropdown-menuen */
  display: none; /* skjult som standard */
  z-index: 200;
  list-style: none; /* Fjerner standard punkttegn fra dropdown-menuen */
}

ul.dropdown a {
  color: #ffffff !important;
  text-decoration: none;
}

ul.dropdown a:hover {
  font-weight: bold;
}


/* Vis dropdown ved hover */
#nav-links li:hover .dropdown {
    display: block;
}

.dropdown li a {
    color: white;
    text-decoration: none;
}

@media screen and (max-width: 768px) {
    #nav-links {
        position: absolute;
        height: calc(100% - 80px); /* Højden bliver 100% minus 80px, og det er fordi med position absolute, så flytter det sig på hele skærmenm ne menuen i toppen, vil forblive der, det er kun UL vi fjerner væk fra dens struktur */
        opacity: 0;
        width: 50%; /*Bredden på vores slidefunktion*/
        top: 80px; /* rykker det ned 80px fra toppen, så det ikke lapper ud over logo */
        left: -100%; /* Skjuler som udgangspunkt menuen udenfor skærmen */
        
    
        z-index: -1; /*For at den ikke skal lappe ind over topmenuen */
        display: block; /* Denne fordi vores ul ikke længere har brug for en flextype, for at den kan vise elementerne under hinanden */
    }

    #nav-links li a {
        background: #919978; /* Jeg var nødsaget til at sætte en baggrundsfarve ind på links, da den ikke slog igennem på baggrundsfarven i nav-links, som jeg oprindeligt havde sat, for at den fyldte 100% i højden.*/
    } 

    /* Toggle-nav checkbox for at vise/hide menuen - Når checkbox er checked, så skal vi ind og åbne vores UL og ændre på opacity, som på left  */

    #toggle-nav:checked ~ #nav-links { /* Her er der brugt checked logikken, til at sige om den er markeret - For at den tager fast i min navlinks har jeg
      brugt en bølgeselector ~, som betyder at den tager det element der kommer efter checkboxen - Selvom vi tjekker på hvorvidt input felt er markeret,
      så skal den ikke arbejde med selve input feltet, men finde det næste felt der kommer efterfølgende - altså nav-links feltet */
        opacity: 1;
        left: 0; /* Når den er checked, så skal den ikke længere være udenfor - men have venstrekant af vores slider til position 0*/
    }

    #toggle-nav-btn-open {
        display: inline-block; /*synliggør burgermenuen */
    }

    #toggle-nav:checked ~ label #toggle-nav-btn-open {
        display: none; /*Når flueben er sat skal burgermenuen fjernes og vise krydset */
    }

    #toggle-nav:checked ~ label #toggle-nav-btn-close {
        display: inline-block;
    }

    #nav-links:hover .dropdown {
    display: none;
  }

#nav-links li:hover .dropdown {
  display: none;
}

#nav-links li:focus-within .dropdown {
    display: inline-block;
  }

.dropdown {
    position: static;
    background: #919978;
    padding: 0;
  }

#nav-links a.active {
  border-bottom: none;
  padding-bottom: 0;
}

ul.dropdown a {
  padding-left: 40px;
  color: rgb(255, 255, 255) !important;
}

ul.dropdown a:hover {
  font-weight: normal;
}

}

@media screen and (max-width: 600px) {
    #nav-links {
        width: 100%;
    }

}

/*footer styling*/

.footer {
  background-color: #919978;
  color: #000;
  padding: 20px;
  display: flex;
  flex-direction: column;
  margin-top: 30px;
}
.footer-logo img {
  margin-top: 50px;
  height: 30px;
}

.footer-kolonner {
  display: flex;
  gap: 150px;
  justify-content: space-between;
  margin: 0 auto;
}

.footer-kolonne h3 {
  font-weight: bold;
  font-family: "Work Sans", sans-serif;
  margin-bottom: 10px;
  font-size: 18px;
  color: #000;
}

.footer-kolonne p {
    font-size: 15px;
    
}

.social-icons img {
  margin-top: 20px;
  width: auto;
  height: 30px;
}

.social-icons {
  display: flex;
  gap: 20px;
  justify-content: center;
}

@media (max-width: 768px) {

  .footer {
    margin-top: 0;
  }
    
  .footer-kolonner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
    margin-bottom: 20px;
  }

  .footer-kolonne {
    text-align: center;
  }

  .social-icons {
    justify-content: center;
  }

}