/**
 * file: css/stoet.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 */
    
  }
  
  /* 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;
}

  .content {
    padding: 20px;
    text-align: center;
  }
  
  .intro, .support, .stottere {
    max-width: 800px; /* Begrænser tekstens bredde */
    margin: 0 auto; /* Centrerer teksten */
  }
  
  .intro h1, .support h2 {
    font-size: 30px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }

  .stottere h2 {
    font-size: 32px;
    margin-bottom: 20px;
    font-family: Arial, Helvetica, sans-serif;
  }
  
  .intro p, .support ul, .support li, .stottere {
    font-size: 16px;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
  }
  


  .cta-container {
    margin-top: 20px; /* Giver plads mellem teksten og knappen */
  }
  
  .cta-button {
    display: block; /* Sikrer, at knappen placeres på en ny linje */
    margin: 10px auto; /* Centrerer knappen */
    padding: 10px 20px;
    color: #4B0082;
    background-color: #FFFFFF;
    border-radius: 5px;
    text-decoration: none;
    font-weight: bold;
    width: fit-content; /* Tilpasser bredden til indholdet */

  }

  .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 */
  }
  

  .images {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
  }
  
  .images img {
    width: 200px;
    height: 150px;
    border-radius: 10px;
    object-fit: cover;
    cursor: pointer;
    transition: transform 0.3s ease;
  }
  
  .images img:hover {
    transform: scale(1.05); /* Laver en zoom-effekt ved hover */
  }
  
  


  /* 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 responsiv */
  .logo {
    width: 150px; /* Mindre logo på mindre skærme */
    margin-top: 10px; /* Reducerer mellemrum øverst */
    margin-left: 10px; /* Reducerer venstre margin */
    
    
  }

/*Burgermenu responsiv*/

  .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 */
  }



 /* Justeringer for tekst og layout */
 .support {
  padding: 15px; /* Tilføjer lidt ekstra padding på små skærme */
  margin-right: 40px;
}

.support h2 {
  font-size: 18px; /* Reducerer overskriftens fontstørrelse */
  margin-bottom: 10px; /* Mindre margin under overskriften */
}

.support li {
  font-size: 16px; /* Mindre tekststørrelse for bedre tilpasning */
  margin-bottom: 15px; /* Mindre afstand mellem listepunkter */
}

.cta-button {
  font-size: 14px; /* Mindre tekststørrelse på knappen */
  padding: 8px 12px; /* Reducerer padding på knappen */
  width: 100%; /* Gør knappen bred nok til at fylde hele containeren */
  text-align: center; /* Centrerer teksten i knappen */
  margin-right: 80px;
}

.images {
  gap: 5px; /* Mindre afstand mellem billeder på små skærme */
  flex-wrap: wrap; /* Gør det muligt for billeder at bryde linjen ved behov */
  justify-content: center; /* Centrerer billederne */
}

.images img {
  max-width: 100%; /* Gør billederne responsiv, fylder 100% af containerens bredde */
  height: auto; /* Bevarer billedets proportioner */
}



  
  /* Responsiv footer*/

  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 */
  }




}