* {
    margin: 0;
    padding: 0;
  }

/* ======= UNDERSTREG AKTIV DROPDOWN (Find din vin) ======= */


/* Understreg i desktopvisning */
body.page-findvin .main-nav .nav-left > details:nth-of-type(2) > summary span:first-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}


/* Understreg i desktopvisning */
body.page-vingaarden .main-nav .nav-left > details:nth-of-type(1) > summary span:first-child {
  text-decoration: underline;
  text-underline-offset: 4px;
}


  body {
    margin: 0;
    font-family: 'Open Sans', sans-serif;
    background-color: #ffffff;
    color: #333;
  }
  
  .logo {
    cursor: pointer;
  }
  
  /* ========== TYPOGRAFI ========== */
  h4 {
    font-family: 'Bebas Neue', cursive;
    font-weight: normal;
    font-size: 16px;
    margin-bottom: 0.5rem;
    color: #167544;
  }
  
  h1, h2, h3 {
    font-family: 'Bebas Neue', cursive;
    font-weight: normal;
    color: #167544;
  }



  /* ========== HEADER ========== */
  header {
    background-color: #EEE1D1;
    padding: 20px 0;
    z-index: 1000;
    position: sticky;
    top: 0;
  }
  
  .main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
  }
  
  .main-nav a {
    font-family: 'Bebas Neue', cursive;
    text-decoration: none;
    color: #167544;
    padding: 10px;
    font-size: 16px;
  }
  
  .main-nav a:hover {
    text-decoration: underline;
  }
  
  .nav-left,
  .right-nav,
  .logo {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 45px;
  }
  
  .logo {
    flex-shrink: 0;
  }
  
  .logo img {
    height: 50px;
  }
  
  .icon {
    height: 22px;
  }
  
  
  /* ========== DROPDOWN ========== */
  summary::-webkit-details-marker {
    display: none;
  }
  
  details {
    position: relative;
  }
  
  details summary {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: 'Bebas Neue', cursive;
    color: #167544;
    padding: 10px;
  }

  details[open] .arrow {
    transform: rotate(180deg);
  }

  .arrow {
    transition: transform 0.2s;
    font-size: 0.8em;
  }
  


  summary span:first-child:hover {
    text-decoration: underline;
    text-underline-offset: 4px;
  }
  
  
  .dropdown-menu {
    position: absolute;
    background-color: #EEE1D1;
    list-style: none;
    margin: 0;
    padding: 0;
    z-index: 1000;
    margin-top: 5px;
  }
  
  .dropdown-menu li {
    padding: 5px 10px;
    white-space: nowrap;
  }
  
  .dropdown-menu a {
    display: block;
    color: #167544;
    padding: 5px 10px;
  }
  
  .dropdown-menu a:hover {
    background-color: #e0d1b8;
    text-decoration: underline;
  }
  

  
  header {
    background-color: #EEE1D1;
    padding: 20px 0;
    z-index: 1000;
    position: sticky;
    top: 0;
  }

  .mobil-nav {
    display: none;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    position: relative;
  }

  .logo img {
    height: 50px;
  }

  #kurv {
    width: 30px;
    height: auto;
  }

  .burger-toggle {
    display: none;
  }

  .burger-label {
    font-size: 36px;
    color: #167544;
    cursor: pointer;
    padding: 10px;
    display: flex;
    align-items: center;
  }

  .mobile-menu {
    display: none;
    flex-direction: column;
    padding: 20px;
    background-color: #EEE1D1;
    position: absolute;
    top: 100px;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
    position: fixed;
  }

  .mobile-menu summary, .hoejremenu {
    margin-bottom: 10px;
    padding: 10px;
  }

  
  .mobile-menu summary, .hoejremenu {
    font-size: 18px;
    font-family: 'Bebas Neue', cursive;
    color: #167544;
    cursor: pointer;

  }

  /* Styling for højremenu links */
.hoejremenu {
    font-size: 18px;
    font-family: 'Bebas Neue', cursive;
    color: #167544; /* Standard tekstfarve */
    text-decoration: none; /* Fjern understregning */
    margin-right: 15px; /* Tilføj afstand mellem links */
    transition: color 0.3s ease, text-decoration 0.3s ease; /* Glidende overgang */
  }
  
  /* Hover-effekt */
  .hoejremenu:hover {
    color: #145f3b; /* Ændrer farven ved hover */
    text-decoration: underline; /* Tilføjer understregning ved hover */
  }


  .mobile-menu a:not(summary) {
    font-size: 18px;
    font-family: 'Bebas Neue', cursive;
    color: #167544;
    text-decoration: none;
  }

  .burger-toggle:checked ~ .mobile-menu {
    display: flex;
  }

  /* Styling for dropdown på mobil */
.dropdown1, .dropdown2, .dropdown3 {
    margin-bottom: 10px;
  }
  
  .dropdown1 summary, .dropdown2 summary, .dropdown3 summary {
    font-size: 18px;
    font-family: 'Bebas Neue', cursive;
    color: #167544;
    cursor: pointer;
    padding: 10px 10px;
    list-style: none; /* Fjern standard pil */
  }
  

  /* Hover-effekt kun på teksten */
.dropdown3 summary span:not(.arrow):hover {
    text-decoration: underline; /* Understreg kun teksten ved hover */
  }


  .dropdown-menu1, .dropdown-menu2, .dropdown-menu3  {
    margin: 10px 0 0 20px; /* Indrykning for dropdown-indhold */
    padding: 0;
    list-style: none; /* Fjern punkttegn */
  }
  
  .dropdown-menu1 li, .dropdown-menu2 li, .dropdown-menu3 li {
    margin-bottom: 10px;
  }
  
  .dropdown-menu1 a, .dropdown-menu2 a, .dropdown-menu3 a {
    font-size: 16px;
    color: #167544;
    text-decoration: none;
  }
  
  .dropdown-menu1 a:hover, .dropdown-menu2 a:hover, .dropdown-menu3 a:hover {
    text-decoration: underline;
    background-color: #e0d1b8;
  }


  /* Vis mobilnavigation kun på mobil (f.eks. max-width: 768px) */
@media (max-width: 1250px) {

  .main-nav {
    display: none!important;; /* Skjul desktopnavigation på mobil */
    }
    .mobil-nav {
        display: flex; /* Vis mobilnavigation */
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    #kurv {
        display: block; /* Sørg for, at kurven vises */
    }


 
}

@media (max-width: 420px) {
    .mobil-nav {
        display: flex; /* Vis mobilnavigation */
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
    }

    #kurv {
        display: block; /* Sørg for, at kurven vises */
    }

    .main-nav {
        display: none!important;; /* Skjul desktopnavigation på mobil */
    }
}