/* Navbar */
.navbar {
  display: flex;
  align-items: center;
  padding: 20px;
  background-color: #ffffff;
}

/* Her er et link til min smatale med chatgpt, da den hjalp mig med at få gjort mit søgefelt til et forstørrelsesglas ikon: https://chatgpt.com/share/675abdc7-9980-800a-a002-063226dc68f3*/
/* Overordnet styling */
.søge-container {
  display: flex;
  justify-content: flex-start;
  flex: 1;
}

/* Forstørrelsesglas ikon */
.søge-ikon {
  font-size: 200%; /* Størrelse på ikonet */
  cursor: pointer;
  display: block;
}

.søge-ikon:hover {
  transform: scale(1.5); /* Gør ikonet større ved hover */
}

/* Skjul søgefeltet som standard */
.søge-felt {
  width: 0;
  height: auto; /* breddden på søgefeltet*/
  padding: 0;
  border: 0;
  overflow: hidden;
  position: relative; /* Søgefeltet bliver samme sted på siden i alle formater*/
  top: 0;
  left: 0;
}

/* Checkbox (skjult) */
.visning {
  display: none;
}


/* Når checkboxen er tændt */
.visning:checked ~ .søge-felt {
  width: 100%; /* Søgfeltets bredde */
  display: flex;
  margin-left: 2%;/* retter søgefeltet til så det står korekt udfra forstørrelsesikon */
  opacity: 1; /* Gør Søgfeltet synligt */
  width: 100%;
  max-width: 10%; /* Justere størrelsen på søgefeltet */
  padding: 1%;
  font-size: small;
  background-color: #371042;
  color: #ffffff;
  border-radius: 100px;
}

/* Logo */
.Logo {
  flex: 1; /* Sørger for at logo har samme størrelse som søgefletet*/
  align-items: center;
  }
.Logo img {
  max-width: 10%; /* Styrer logo størrelse*/
  height: auto;
  }
  
/* Burger-menu */
/* Gør burgermenuen synlig på siden*/
.burger-menu {
  display: flex;
  flex-direction: column; 
  justify-content: space-between;
  width: 25px;
  height: 20px;
  cursor: pointer;
  }
  
/* Giver burgermenuen de korrekt farver og mål */
.burger-menu span {
  background-color: #371042;
  height: 3px;
  border-radius: 3px;
  }
  
/* Navigation Links */
.nav-links {
  position: relative; 
  z-index: 10; /* Sørger for at burgermenuen har et højere z index end det store radar logo, således at den udfolder sig foran */
  display: none;
  flex-direction: column;
  align-items: start;   
  position: absolute;
  top: 9%;/* Burgermenuen ligger korrekt på siden når den udfoldes*/
  right: 1%;/* Burgermenuen ligger korrekt på siden når den udfoldes*/
  background-color: #4f2c8c;
  padding: 2%;
  border-radius: 5px;
  list-style: none; /* Fjerner prikker ud fra links*/
  }
  
/* Giver hvert link/artikel den korrekte størrelse når menuen displayes*/
.nav-links li {
  margin: 15px;
}
  
/* Giver hvert link/artikel den korrkete tekst og farve */
.nav-links a {
  text-decoration: none;/* Fjerner linjen under links*/ 
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
  font-size: 100%;
}

/* Sørger for at der er forskel på artikel overskrift og under-overskrift*/
.nav-links a p {
  font-size: small;
  font-style: oblique;
  margin-top: -1%;
}

/* Laver hover effekt på link/artikler når burgeren er udfoldet*/
.nav-links a:hover {
  color: #371042; /* Ændre farven på links når de hoveres */
}

/* Fjerner checkbox felt*/
.menu-knap {
  display: none;
}
  
/* Når burgeren er markeret, vises menuen */
.menu-knap:checked + .burger-menu + .nav-links {
  display: flex;
}

/* Juster burger-menuen, når den er åben */
.menu-knap:checked + .burger-menu span {
   background-color: #4f2c8c;
}
  


.footer {
  display: flex;
  justify-content: space-evenly;
  font-family: Arial, Helvetica, sans-serif, sans-serif;
  line-height: 2;
  background-color: #371042;
  color: #fff;
  margin-top: 5%;
}

/* Flex styling til hver footer-sektion */
.footer-sektion {
  display: flex;
  flex-direction: column; /* Laver en lodret stak af h2 og p */
  align-items: center; /* Justerer elementerne over hinanden */
  padding: 2%;
}

/* små overskrifter til hver footer-sektion */
.footer-sektion h4 {
  text-align: center;
  margin: 0;
  font-size: medium;
}

/* tekst i de forskellige sketioner */
.footer-sektion p{
  text-align: center;
  margin-top: 5%;
  font-size: small;
}


/*Media for tablet*/
@media only screen and (min-width: 701px) and (max-width: 1200px) {

  /* Logo */
  .Logo {
  flex: 1; /* Sørger for at logo har samme størrelse som søgefletet*/
  align-items: center;
  }
  .Logo img {
  max-width: 15%; /* Styrer logo størrelse*/
  height: auto;
  }

  /* Forstørrelsesglas ikon */
  .søge-ikon {
    font-size: 150%; /* Størrelse på ikonet */
    cursor: pointer;
    display: block;
    }


  .footer-sektion {
  display: flex;
  flex-direction: column; /* Laver en lodret stak af h2 og p */
  align-items: center; /* Justerer elementerne over hinanden */
  margin: 2%;
  padding: 2%;
  }
      
  .footer-sektion h4 {
  text-align: center;
  margin: 0;
  font-size: small;
  }
      
  .footer-sektion p{
  text-align: center;
  margin-top: 5%;
  font-size: x-small;
  }
}

/* Media for mobiltelefoner */
@media (max-width: 700px) {

  /* Logo */
    .Logo {
    flex: 1; /* Sørger for at logo har samme størrelse som søgefletet*/
    align-items: center;
    }
    .Logo img {
    max-width: 20%; /* Styrer logo størrelse*/
    height: auto;
    }

  .footer{
  flex-direction: column;
  align-items: center;
  padding-top: 8%;
  padding-bottom: 8%;
  }

  /* Forstørrelsesglas ikon */
  .søge-ikon {
  font-size: 100%; /* Størrelse på ikonet */
  cursor: pointer;
  display: block
  }

  .søge-ikon:hover {
  transform: scale(1); /* Gør ikonet større ved hover */
  }

  /* Når checkboxen er tændt */
  .visning:checked ~ .søge-felt {
  width: 100%; /* Søgfeltets bredde */
  display: flex;
  margin-left: 2%;/* retter søgefeltet til så det står korekt udfra forstørrelsesikon */
  opacity: 1; /* Gør Søgfeltet synligt */
  max-width: 20%; /* Justere størrelsen på søgefeltet */
  font-size: x-small; /* Gør teksten mindre i mobilformat */
  background-color: #371042;
  color: #ffffff;
  }
}