/**
 * file: css/om.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/background2.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;
  }
  .content {
    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;
  }


  .content h1 {
    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 h1 {
    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;
  }


  
  .vision ul {
    list-style-position: inside; /* Gør så prikkerne er lige ud for teksten */
    padding-left: 0; /* Fjerner venstre indrykning */
  }
  
  .vision li {
    font-size: 16px; /* Tilpasser tekststørrelse, hvis nødvendigt */
    line-height: 1.5; /* Giver lidt afstand mellem linjerne */
  }
  

  .afrunding h3 {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 16px;
    margin-top: 50px;
  }


  .gallery {
    text-align: center;
    padding: 20px;
    margin-bottom: 20px;
  }
  
  .image-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolonner */
    gap: 15px; /* Mellemrum mellem billederne */
    margin-top: 20px;
  }
  
  .image-item img {
    width: 100%; /* Gør billedet responsivt, fylder containerens bredde */
    height: 200px; /* Sætter en fast højde på billederne */
    object-fit: cover; /* Sørger for at billederne dækker området uden at blive forvrænget */
    border-radius: 8px; /* Afrundede hjørner på billederne */
  }
  
  




/* 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) {



    /* Responsivt logo*/
    .logo {
      width: 150px; /* Mindre logo på mindre skærme */
      margin-top: 10px; /* Reducerer mellemrum øverst */
      margin-left: 10px; /* Reducerer venstre margin */
      right: 40px;
    }
  
/*Responsiv burgermenu*/

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


    .image-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 kolonner på små skærme */
      }
    
      .image-item img {
        width: 100%; /* Gør billederne responsive */
        height: auto; /* Bevarer proportioner på små skærme */
        max-width: 100%; /* Sørger for at billederne ikke udvider 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 */
  }
}