/**
 * file: css/event.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;   
  background-color: transparent;
  border: none;
  cursor: pointer;
  color: #ffffff;
  padding: 20px 40px;  /* 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 */
 
  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;
}


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




/* Event detaljer styling */
.details {
  padding: 20px;
  max-width: 800px;
  margin: 0 auto;
}

.details h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 32px;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.detail {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  border-radius: 10px;
  padding: 10px;
}

.detail img {
  width: 200px; /* Øger bredden */
  height: 200px; /* Øger højden */
  border-radius: 50%; /* Beholder den runde form */
  margin-right: 20px;
  object-fit: cover; /* Sikrer, at hele billedet vises */
}

.detail .text p {
  font-size: 16px;
  line-height: 1.5;
  color: #ffffff;
  font-family: Arial, Helvetica, sans-serif;
}

.detail .text strong {
  display: block;
  margin-top: 10px;
  color: #ffffff; /* Gul for at fremhæve billetpris */
  font-family: Arial, Helvetica, sans-serif;
}





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


/* Infographic */

  .info-billede {
    max-width: 80%; /* Gør billedet bredere for bedre synlighed */
    margin: 30px auto; /* Reducerer margin for mere plads */
  
  }

/* Event detaljer */

  .details {
    padding: 10px;
    max-width: 100%; /* Fylder hele skærmen */
  }

  .details h1 {
    font-size: 20px; /* Reducerer størrelsen på overskriften */
  }

  .detail {
    flex-direction: column; /* Stabler billede og tekst vertikalt */
    text-align: center; /* Centrerer teksten */
    padding: 15px;
  }

  .detail img {
    width: 150px; /* Mindre billede */
    height: 150px; 
    margin: 0 auto 15px; /* Centrerer billedet og tilføjer bundmargin */
  }

  .detail .text p {
    font-size: 10px; /* Mindre tekst */
    line-height: 1.4; /* Reduceret linjeafstand */
    margin: 0 10px; /* Tilføjer margin til venstre og højre for at holde teksten inden for skærmen */
  }


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