/*header*/

/* generelle styles for header */

.header {
  background-color: #3C511B; /* Mørk olivengrøn baggrund */
  position: sticky; /* Gør headeren sticky så den bliver på skærmen, når man scroller */
  top: 0; /* Placerer headeren øverst på siden */
  z-index: 1000; /* Sørger for at headeren ligger over andre elementer på siden */
  display: flex; /* Flexbox for at få logo og navigationsmenu opdelt horisontalt */
  align-items: center; /* Centrerer indholdet i headeren */
  justify-content: space-between; /* Fordeler pladsen i flexbox, så logo er til venstre og navigationsmenu til højre */
  height: 150px; /* Højden på headeren */
  padding: 0 50px; /* Padding på 50px til venstre og højre for at skabe "luft" i siderne" */
}

/* Logo */

.logo a {
    display: flex; /* Flexbox for at centrere logo */
    width: 135px; /* Bredde på logo – dette og nedenstående for at styre størrelsen(SVG-fil) */
    height: 130px; /* Højde på logo */
}

.logo svg {
    width: 100%; /* Sørger for logoet fylder hele bredden af sin container */
    height: auto; /* Højden justeres automatisk for at bevare proportionerne */
    display: block; /* Fjerner eventuelt mellemrum under SVG'en */
}

/* styles for hovedmenupunkterne i navigationsmenuen */

.navigationsmenu {
    list-style: none; /* For at undgå det vises med punkttegn */
    display: flex; /* For at placere menupunkterne horisontalt frem for vertikalt */
    gap: 80px; /* Afstand mellem menupunkterne */
}

.navigationsmenu a {
    font-family: "marine-up", Helvetica, sans-serif; /* Marine Up til menupunkterne så disse matcher over- og underskrifter på resten af sitet */
    font-size: 24px; /* Størrelse på menupunkterne i navigationsmenuen */
    color: #fefefe; /* Hvid tekstfarve for at skabe kontrast og gøre teksten nem at læse på den mørkegrønne baggrund */
    text-decoration: none; /* For at fjerne understregning af links */
}
.navigationsmenu a:hover {
    color: #B06821; /* varm orange farve ved hover for at gøre det tydeligt, hvad man vælger */
}

.navigationsmenu .active > a {
  text-decoration: underline; /* Understreger det aktive menupunkt for at vise brugeren, hvilket hovedmenupunkt vedkommende er inde under for at forbedre brugeroplevelsen */
}

/* Dropdown-menuerne under navigationsmenuen */

.dropdown-undersider {
    list-style: none; /* Fjerner punkttegn */
}

.dropdown-undersider a {
    font-family: "marine-up", Helvetica, sans-serif; /* Marine Up til undersiderne, så de passer med hovedmenupunkternes udseende */
    color: #B06821; /* Matcher farven ved hover på hovedmenupunkterne */
    font-size: 18px; /* En lidt mindre størrelse i dropdown-menuen end på hovedmenupunkterne */
    line-height: 2rem; /* Linjeafstand for at skabe luft mellem menupunkterne */
}

.dropdown-undersider a:hover {
    font-weight: bold; /* Gør teksten fed ved hover for at fremhæve, hvilket punkt man er ved at vælge */
}

/* Dropdown-menufunktionalitet */

.dropdown-menu {
    position: relative; /* relative er nødvendig for at placere dropdown-menuerne i forhold til hovedmenuen */
}

.dropdown-undersider {
    display: none; /* Skjuler dropdown-menuerne som standard */
    position: absolute; /* Gør det muligt at placere dropdown-menuerne under hovedmenupunkterne */
    top: 100%; /* Placerer dropdown-menuerne lige under hovedmenupunkterne */
    left: 0; /* Venstrejustering for at matche hovedmenupunktets placering */
    background-color: rgba(254, 254, 254, 0.95); /* Samme hvide farve som skriften i hovedmenupunkterne, men med rgba-værdier for at kunne sætte gennemsigtighed til 95% (hvid som kontrast til den mørkegrønne farve på headeren) */
    padding: 10px; /* Padding for at give lidt luft omkring teksten i dropdown-menuen */
    min-width: 140px; /* Minimumbredde på dropdown-menuerne, så undermenupunkterne kan være i dem og teksten dermed holde sig på én linje */
    border-radius: 4px; /* Let rundede hjørner for et lidt blødere look, da matcher de rundede hjørner på f.eks. knapperne */
    z-index: 1000; /* Sørger for at dropdown-menuerne lægger sig over sidens øvrige elementer */
}

.længere-boks {
    min-width: 185px; /* længere dropdown-menu for at matche tekstlængden i hovedmenupunktet "bæredygtighed", da det er længere end de øvrige */
}

.dropdown-menu:hover .dropdown-undersider {
    display: block; /* Viser dropdown-menu, når musen føres over hovedmenupunktet */
}

/* responsiv header (burgermenu) */
.mobilmenu {
  position: relative; /* For at placere burgerikonet korrekt i headeren */
  display: none; /* skjules på desktop */
}

/* Vis burgerikon */
.burgerikon,
.luk {
  font-size: 40px; /* Størrelse på burger- og luk-ikon */
  color: #fefefe; /* Hvid farve for at matche headerens farve */
  cursor: pointer; /* Viser ikonerne er klikbare */
  position: absolute; /* For at placere ikonerne i headeren */
  z-index: 10001; /* Sørger for at ikonerne ligger over andre elementer */
  position: relative; /* For at placere ikonerne i midten af headeren vertikalt */
}

.burgerikon {
  display: block; /* Viser burgerikonet som standard */
}

.luk {
  display: none; /* Skjuler luk-ikonet som standard */
}

/* Skjul checkbox */
#mobilmenu-toggle {
  display: none; /* Skjuler checkboxen, da den kun skal bruges til at styre den visningen af mobilmenuen */
}

/* Mobilnavigation */
#navigation-mobil {
  display: none; /* Skjuler mobilnavigationen som standard */
  position: fixed; /* Fastlåser menuen, så den ikke scroller med siden */
  top: 0; /* Placerer menuen øverst på siden */
  left: 0; /* Venstrejustering for at dække hele skærmen */
  height: 100vh; /* Højden på menuen er 100% af viewportens højde */
  width: 100%; /* Bredde på menuen er 100% af viewportens bredde */
  background-color: #3C511B; /* Mørk olivengrøn baggrund for at matche headeren */
  z-index: 10000; /* Sørger for at menuen ligger over andre elementer på siden */
  overflow-y: auto; /* Gør det muligt at scrolle i menuen, hvis indholdet er for langt til at passe på skærmen */

}

/* Når checkbox er checked – vis menu og X */
#mobilmenu-toggle:checked ~ .burgerikon {
  display: none; /* Skjuler burgerikonet, når menuen er åben */
}

#mobilmenu-toggle:checked ~ .luk {
  display: block; /* Viser luk-ikonet, når menuen er åben */
}

#mobilmenu-toggle:checked ~ #navigation-mobil { /* Disse styles, der styrer menupunkternes placering gælder kun, når den responsive menu er åben (så de ikke ødelægger burger- og x-ikonernes funktionalitet og placering) */
  display: flex; /* Gør mobilnavigationen til en flex-container for at arrangere menupunkterne vertikalt */
  flex-direction: column; /* Arrangerer menupunkterne i en kolonne */
  justify-content: center; /* Centrerer menupunkterne vertikalt i menuen */
  align-items: center; /* Centrerer menupunkterne horisontalt i menuen */
  padding: 20px; /* Padding for at give luft omkring menupunkterne */
  text-align: center; /* Centrerer teksten i menupunkterne */
  overflow-y: hidden; /* skjul vertikal scrollbar, så der ikke kommer en scrollbar inde i selve overlay-menuen, når undermenupunkterne foldes ud. */
}

/* Responsive styles */

@media (max-width: 768px) {
  .mobilmenu {
    display: block; /* Viser burgerikonet på mobil */
  }

  #navigation-desktop {
    display: none; /* Skjuler desktop-navigationen på mobil for at undgå overlap med burgerikonet */
  }
.header {
  height: 100px; /* Højden på headeren */
  padding: 0 50px; /* Padding på 50px til venstre og højre for at skabe "luft" i siderne" */
}

.logo a {
    width: 85px; /* Bredde på logo – dette og nedenstående for at styre størrelsen(SVG-fil) */
    height: 80px; /* Højde på logo */
}
}

/* Undermenuer */
#navigation-mobil ul {
  padding: 0; /* Fjerner padding omkring menupunkterne */
}

/* Font i mobilmenu */
#navigation-mobil li {
  font-family: "marine-up", Helvetica, sans-serif; /* Marine Up til menupunkterne i mobilmenuen, så de matcher over- og underskrifter på resten af sitet */
  font-size: 20px; /* Mindre størrelse menupunkterne i mobilmenuen */
  color: #fefefe; /* Samme hvide tekstfarve som i resten af headeren */
  text-decoration: none; /* Fjerner understregning af links */
  list-style: none; /* Fjerner punkttegn fra menupunkter */
  padding: 10px 0; /* Padding for at gøre menupunkterne større og mere klikbare */
}

.mobil-undersider a {
  font-size: 16px; /* Lidt mindre skriftstørrelse for undermenupunkter */
  padding-left: 20px; /* Indrykning for at adskille undermenupunkter fra hovedmenupunkter */
}

#navigation-mobil a {
  color: #fefefe; /* Hvid tekstfarve for kontrast */
  text-decoration: none; /* Fjerner understregning af links */
}

/* Undermenu mobil - skjul checkboxe */
#navigation-mobil input[type="checkbox"] {
  display: none; /* Skjuler checkboxe, da de kun bruges til at få undermenuerne til at folde sig ud */
}

/* Skjul automatisk undermenupunkter i den responsive menu */
.mobil-undersider {
  display: none;
  padding-left: 20px;
}

/* Vis undermenupunkter, når det responsive overlay er åbent */

#navigation-mobil input[type="checkbox"]:checked + .mobil-undersider {
  display: block;
}

/* footer */
.footer {
  background-color: #3C511B;
  height: 300px; /* Højden på footer */
  color: #fefefe;
  display: flex; /* Flexbox for at få footer-sektionerne til at blive vist horisontalt */
  justify-content: space-between; /* Fordeler pladsen i flexboxen jævnt */
  padding: 60px; /* Padding for at skabe luft mellem elementerne og footerens kanter */
  flex-wrap: wrap; /* Hvis footer-sektionerne ikke kan være i én række, så de kan bryde til næste linje */
  gap: 20px; /* Giver luft mellem footer-sektionerne */
}

.footer h4 {
  margin-bottom: 20px; 
}

.footer p, .footer a {
  color: #fefefe;
  line-height: 1.5;
}

.footer a:hover {
  color: #B06821; /* varm orange farve ved hover for at matche øvrige hover-styles */
}

.footer .nyhedsbrev form {
  display: flex; /* Flexbox for at arrangere input og knap i en række */
  gap: 15px;
  margin-top: 30px;
}

.footer .some-ikoner {
  display: flex; /* Flexbox for at arrangere SoMe-ikonerne på række */
  margin-top: 20px;
  gap: 20px;
}

.footer .some-ikoner img {
  width: 50px; /* Billederne i SoMe-ikonerne skal have en fast bredde og højde */
  height: 50px;
}

.footer .nyhedsbrev .button {
  padding: 0.5rem 1rem; /* Padding for at gøre knappen større og mere klikbar */
  color: #fefefe;
}

/* Footer responsiv */

@media (max-width: 768px) {
  .footer {
    flex-direction: column; /* Arrangerer footer-sektionerne i en kolonne på mindre skærme */
    align-items: center; /* Centrerer footer-sektionerne horisontalt */
    height: auto; /* Højden på footer justeres automatisk for at passe til indholdet */
    padding: 40px 20px; /* Mindre padding på mindre skærme */
    text-align: center; /* Centrerer teksten i footer-sektionen */
  }

  .footer-sektion {
    margin-bottom: 30px; /* Margin under hver footer-sektion for at skabe luft */
  }

  .footer .nyhedsbrev form {
    width: auto; /* Gør formularen bred nok til at passe til indholdet */
    flex-direction: column; /* Arrangerer input og knap i en kolonne på mindre skærme */
  }

  .footer .nyhedsbrev input[type="email"] {
    padding: 10px; /* Padding for at gøre inputfeltet større og mere klikbart */
  }

  .footer .nyhedsbrev .button {
    display: inline-block; /* Gør knappen til en inline-block for at centrere den under feltet til e-mailadressen */
    text-align: center; /* Centrerer teksten i knappen */
    padding: 12px 0; /* Padding for at gøre knappen større og mere klikbar */
  }

  .footer .some-ikoner {
    justify-content: center; /* Centrerer SoMe-ikonerne horisontalt */
  }
}