/**
 * file: css/css.css
 * purpose: styling
 **/

/* Define variables in the :root */
:root {
  --contrast: rgb(229, 229, 229);
  --backgr: #000;
}

/* Baggrundsbillede */
html, body {
  height: 100%; /* Sørger for, at body og html strækker sig til hele vinduets højde */
  margin: 0; /* Fjerner margin for at undgå mellemrum omkring siden */
}

body {
  background-image: url("../images/background1.png");
  background-size: cover; /* Strækker billedet til at dække hele skærmen */
  background-repeat: no-repeat; /* Undgår gentagelse af billedet */
  background-position: center; /* Centrerer billedet */
  background-attachment: fixed; /* Baggrunden følger ikke med, når man scroller */
  background-color: transparent; /* Fallback-farve kan fjernes eller sættes til gennemsigtig */
}

/* Styling for main content */
main {
  color: var(--contrast);
  background-color: transparent; /* Sørger for, at baggrunden er gennemsigtig */
  z-index: 1; /* Sørger for, at main-indholdet vises foran baggrundsbilledet */
  position: relative; /* Bevarer sin position i layoutet */
}

/* Styling for logo */
.logo {
  width: 200px;
  margin-top: 20px; /* Tilføjer ekstra mellemrum over logoet */
  margin-left: 20px; /* Tilføjer mellemrum fra venstre */
}

/* Dropdown Menu knap */
.menu {
  position: absolute;   /* Brug absolute positioning */
  top: 20px;            /* Juster højden af menuen */
  right: 20px;          /* Placerer menuen i højre hjørne */
  z-index: 1000;        /* Sørger for, at menuen er synlig over baggrunden */
}

.menu-btn {
  font-size: 100px;   /* Dobbelt så stor skriftstørrelse */
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 20px 40px;  /* Dobbelt så stor padding for større knap */
  margin-right: 0;
  margin-top: -40px; /* Flytter knappen op med 40px */
  position: relative;
  z-index: 1001;
}

/* Dropdown menu */
.dropdown-content {
  display: none;
  position: absolute;
  top: 50px;  /* Placerer dropdown-menuen under knappen */
  right: 100%; /* Placerer dropdown-menuen til venstre for knappen */
  background-color: var(--baggrundsfarve);
  border: 2px solid #4B0082;
  padding: 10px;
  width: 180px;
  box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.3);
  z-index: 1000;
}

.dropdown-content a {
  display: block;
  color: #ffffff;
  padding: 10px 0;
  font-size: 18px;
  font-weight: bold;
  text-decoration: none;
}

.dropdown-content a:hover {
  background-color: #4B0082;
}

/* Når musen er over menuen, vis dropdown */
.menu:hover .dropdown-content {
  display: block;
}

/* Forside billede */
.hero-billede {
  max-width: 50%; /* Begrænser billedets bredde til 50% af containerens bredde */
  height: auto; /* Bevarer billedets proportioner */
  display: block;
  margin: 50px auto; /* Centrerer billedet og giver 50px margin både øverst og nederst */
}


/* Main Content */

.content, .donation {
  max-width: 800px; /* Begrænser bredden af indholdet til 800px */
  margin: 10px auto; /* Tilføjer en mindre margin oven og neden */
  text-align: center; /* Centrerer teksten */
  padding: 20px; /* Tilføjer lidt afstand omkring teksten */
  line-height: 1.8; /* Gør teksten endnu mere læsbar */
  font-family: Arial, Helvetica, sans-serif;
}

/* Styling til overskrifter i .content og .donation */
.content h1, .donation h2 {
  font-size: 32px; /* Gør overskrifterne større */
  margin-bottom: 10px; /* Tilføjer afstand under overskriften */
  text-align: center; /* Centrerer overskrifterne */
  margin-top: 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.content, .donation p {
  font-size: 16px; /* Gør teksten større (ca. 19px) */
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.8; /* Øger linjehøjden for bedre læsbarhed */
}

/* Justerer tekstens placering ved at flytte hele sektionen op */
main {
  margin-top: -50px; /* Trækker indholdet længere op på siden */
}


.donation .cta-button {
  display: inline-block;
  margin-top: 20px;
  padding: 10px 20px;
  background-color: #FFFFFF; /* Hvid baggrund */
  color: #4B0082; /* Mørk lilla tekst for at matche siden */
  text-decoration: none;
  font-size: 18px;
  font-weight: bold;
  border: 2px solid #4B0082; /* Lilla kant for at matche teksten */
  border-radius: 5px; /* Afrundede hjørner */
  text-align: center;
  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Tilføjer en skygge for dybde */
}

.donation .cta-button:hover {
  background-color: #4B0082; /* Mørk lilla baggrund ved hover */
  color: #FFFFFF; /* Hvid tekst ved hover */
  transition: background-color 0.3s ease, color 0.3s ease; /* Glidende overgang */
}




/* Footer styling */
footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 60px;

  color: #ffffff;
  font-size: 0.9em;
  border-top: 1px solid #ffffff;
 }
 footer div {
  flex: 1;
  text-align: center;
  line-height: 1.6;
  margin: 0 10px;
 }
 .aabeningstider {
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 5px;
 }
 .aabeningstider p {
  margin: 0;
 }
 .aabeningstider div {
  display: flex;
  justify-content: space-between;
  width: 100px;
  margin: 0 auto;
 }
 .aabeningstider .day {
  text-align: left;
  width: 50%;
 }
 .aabeningstider .time {
  text-align: right;
  width: 50%;
 }
 .nyhedsbrev {
  text-align: center;
}

.nyhedsbrev input[type="email"] {
  padding: 5px;
  margin-top: 5px;
  width: 80%;
  border: 1px solid #ffffff;
  border-radius: 5px;
  font-size: 0.9em;
}

.nyhedsbrev button {
  background-color: #6a33a8; /* Lilla baggrund */
  color: #ffffff; /* Hvid tekst */
  padding: 5px 20px;
  border: 1px solid #ffffff;
  cursor: pointer;
  margin-top: 10px;
  border-radius: 5px;
  transition: background-color 0.3s, color 0.3s; /* Blød overgang for hover-effekten */
}

.nyhedsbrev button:hover {
  background-color: #4b2480; /* Mørkere lilla ved hover */
  color: #fff;
}


/* Media query for iPhone 12 (390px bredde) */
@media (max-width: 390px) {

    .logo {
      width: 150px; /* Mindre logo på mindre skærme */
      margin-top: 10px; /* Reducerer mellemrum øverst */
      margin-left: 10px; /* Reducerer venstre margin */
      right: 40px;
    }
  
    .menu-btn {
      font-size: 70px; /* Øget størrelse på knappen */
      padding: 20px 40px; /* Øget padding */
      margin-top: -50px;  /* Flytter knappen lidt højere op */
    
    }
  
    .dropdown-content {
      top: 40px;  /* Mindre afstand fra knappen */
      right: 0%;  /* Placerer dropdown-menuen til højre */
      width: 150px;  /* Mindre bredde på dropdown-menuen */
    }
  
    .dropdown-content a {
      font-size: 16px; /* Mindre tekst i dropdown */
      padding: 8px 0;  /* Mindre padding på links */
    }

    .hero-billede {
      max-width: 80%; /* Gør billedet større på mindre skærme */
      margin: 20px auto; /* Reducerer marginerne for at skabe mere plads */
    }


  /* Gør indholdet mindre på små skærme */
  .content, .donation {
    max-width: 100%; /* Fuld bredde for indholdet */
    padding: 10px; /* Mindre padding for at spare plads */
    
  }

  /* Justering af overskrifter */
  .content h1, .donation h2 {
    font-size: 24px; /* Mindre overskriftsstørrelse på små skærme */
    margin-bottom: 8px;
    margin-top: 20px;
  }

  /* Justering af brødtekst */
  .content p, .donation p {
    font-size: 1rem; /* Reducer font-størrelse for brødtekst */
  }

  /* CTA-knappen */
  .donation .cta-button {
    font-size: 16px; /* Mindre font-størrelse på CTA-knappen */
    padding: 8px 16px; /* Mindre padding på CTA-knappen */
  }

  footer {
    flex-direction: column;
    padding: 10px 20px; /* Mindre padding på mobil */
    margin-right: 30px;
  }

  .aabeningstider div {
    width: 100%; /* Gør div'ene i aabeningstider til 100% bredde */
    flex-direction: column; /* Stak items vertikalt */
    margin-bottom: 10px; /* Tilføj lidt afstand mellem elementerne */
  }

  .aabeningstider .day,
  .aabeningstider .time {
    width: 100%; /* Hver item tager 100% bredde */
    text-align: left; /* Juster tekst til venstre for bedre læsbarhed */
  }

  .nyhedsbrev input[type="email"] {
    width: 100%; /* Gør input-feltet til 100% bredde på mobil */
    margin-top: 10px;
  }

  .nyhedsbrev button {
    width: 100%; /* Gør knappen til 100% bredde på mobil */
    padding: 10px 0; /* Øg padding på knappen for bedre touch-interaktion */
  }

  /* Juster footer tekstplacering for små skærme */
  footer div {
    text-align: center;
    margin-bottom: 15px; /* Tilføj margin mellem footer elementer */
  }
}