/* Basis */
/* Standardindstillinger for hele siden */
body {
    margin: 0; /* Fjern standard margin for at sikre, at indholdet starter fra kanten */
    font-family: 'Cormorant Garamond', sans-serif; /* Klassisk skrifttype for at matche brandets stil */
    background-color: #FAF8F3; /* Lys baggrund for en ren og indbydende følelse */
    color: #2b2b2b; /* Mørk tekstfarve for god kontrast og læsbarhed */
}
 /* Overskrifter */
/* Ensartet skrifttype og stil for alle overskrifter */
h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', serif; /* Klassisk skrifttype for overskrifter */
}
  /* Navigation Links */
/* Styling for aktive links i navigationen */
.nav-links a.active {
    position: relative; /* Gør det muligt at tilføje en streg under teksten */
    color: #000; /* Fremhæv farven på det aktive link */
    font-weight: bold; /* Gør teksten fed for at fremhæve */
}

/* Tilføj en streg under det aktive link */
.nav-links a.active::after {
    content: ""; /* Tilføjer en dekorativ streg */
    position: absolute; /* Placerer stregen relativt til teksten */
    bottom: -5px; /* Placerer stregen lige under teksten */
    left: 0;
    width: 100%; /* Stregen fylder hele bredden af teksten */
    height: 0.5px; /* Tykkelsen af stregen */
    background-color: #000; /* Sort farve for stregen */
}

/* Standard styling for navigation links */
.nav-links a {
    font-family: 'Cormorant Garamond', serif; /* Behold skrifttypen for menupunkterne */
}
/* Brødtekst */
/* Styling for almindelig tekst og lister */
p, li {
    font-family: 'Mulish', sans-serif; /* Moderne skrifttype for brødtekst */
    font-size: 1rem; /* Standard tekststørrelse for god læsbarhed */
    margin-bottom: 1rem; /* Tilføjer afstand mellem tekstblokke */
}
/* Logo */
/* Standard: Vis kun det store logo */
.logo-desktop {
    display: block; /* Vis det store logo */
  }
  
  .logo-mobile {
    display: none; /* Skjul det lille logo */
  }
  
  /* På mindre skærme: Vis kun det lille logo */
  @media (max-width: 768px) {
    .logo-desktop {
      display: none; /* Skjul det store logo */
    }
  
    .logo-mobile {
      display: block; /* Vis det lille logo */
    }
  }
  /* Hero Sektion */
/* Styling for hero-billedet og teksten */
.hero {
    position: relative; /* Gør det muligt at placere tekst oven på billedet */
    width: 100%; /* Sørger for, at hero-sektionen fylder hele bredden af skærmen */
    height: 500px; /* Fast højde for konsistens */
    overflow: hidden; /* Skjuler eventuelle dele af billedet, der går uden for containeren */
}

.hero-image {
    width: 100%; /* Sørger for, at billedet fylder hele bredden af hero-sektionen */
    height: 100%; /* Sørger for, at billedet fylder hele højden af hero-sektionen */
    object-fit: cover; /* Bevarer billedets proportioner og beskærer det for at fylde containeren */
}

.hero-text {
    position: absolute; /* Placerer teksten oven på billedet */
    top: 50%; /* Centrerer teksten vertikalt */
    left: 50%; /* Centrerer teksten horisontalt */
    transform: translate(-50%, -50%); /* Justerer teksten, så den er præcist centreret */
    color: #FFECCE; /* Lys tekstfarve for at skabe kontrast mod baggrunden */
    text-align: center; /* Centrerer teksten horisontalt */
    font-size: 2rem; /* Gør teksten stor nok til at være iøjnefaldende */
    font-weight: bold; /* Gør teksten mere fremtrædende */
}
  
  
  .hero-text h1 {
    font-size: 2rem; /* Standard fontstørrelse */
    text-align: center;
    margin: 0;
}

.hero-text h1.mobile-text {
    display: none; /* Skjul mobilteksten som standard */
}

.hero-text h1.desktop-text {
    display: block; /* Vis desktopteksten som standard */
}

@media (max-width: 768px) {
    .hero-text h1.mobile-text {
        display: block; /* Vis mobilteksten på mindre skærme */
        font-size: 2rem; /* Mindre fontstørrelse til mobil */
    }

    .hero-text h1.desktop-text {
        display: none; /* Skjul desktopteksten på mindre skærme */
    }
}

/* Vores Historie Sektion */
/* Layout for tekst og billede */
.vores-historie {
    display: flex; /* Brug flexbox til at arrangere tekst og billede side om side */
    flex-wrap: wrap; /* Gør layoutet responsivt */
    gap: 20px; /* Afstand mellem tekst og billede */
    padding: 40px; /* Tilføjer indvendig afstand for bedre layout */
    background-color: #FAF8F3; /* Baggrundsfarve */
}

/* Tekstcontainer */
.tekst-container {
    flex: 1; /* Fylder pladsen tilgængelig */
    max-width: 600px; /* Maksimal bredde for teksten */
}

.tekst-container h2 {
    font-family: 'Cormorant Garamond', serif; /* Klassisk skrifttype for overskrifter */
    font-size: 2.5rem; /* Gør overskriften fremtrædende */
    margin-bottom: 20px; /* Tilføjer afstand under overskriften */
}

.tekst-container p {
    font-family: 'Work Sans', sans-serif; /* Moderne skrifttype for brødtekst */
    font-size: 1rem; /* Standard tekststørrelse */
    line-height: 1.6; /* Forbedrer læsbarheden */
    margin-bottom: 20px; /* Tilføjer afstand mellem tekstblokke */
}

.tekst-container h3 {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.8rem;
    margin-top: 20px;
}

/* Knap til at se mere */
.se-mere-knap {
    background-color: #C2A476; /* Knapfarve */
    color: #0e0d0d; /* Tekstfarve */
    border: none; /* Fjern kant for et rent udseende */
    padding: 10px 20px; /* Tilføjer indvendig afstand for bedre klikområde */
    font-size: 1rem; /* Standard tekststørrelse */
    cursor: pointer; /* Gør det tydeligt, at knappen er klikbar */
    font-family: 'Work Sans', sans-serif; /* Moderne skrifttype */
}

.se-mere-knap:hover {
    background-color: #A88A63; /* Mørkere farve ved hover */
}

/* Billedekontainer */
.billede-container {
    flex: 1; /* Fylder pladsen tilgængelig */
    max-width: 500px; /* Maksimal bredde for billedet */
    text-align: center; /* Centrerer billedet */
    margin-left: 100px; /* Rykker billedet længere til højre */
}

.billede-container img {
    width: 100%; /* Billedet fylder containerens bredde */
    height: auto; /* Bevarer proportionerne */
    border-radius: 0px; /* Ingen afrunding af hjørner */
}

.billedtekst {
    font-family: 'Work Sans', sans-serif; /* Moderne skrifttype */
    font-size: 0.9rem; /* Mindre tekststørrelse */
    color: #555; /* Grå farve for en subtil effekt */
    margin-top: 10px; /* Afstand over billedteksten */
}

/* Responsiv Design */
/* Tilpas layoutet til mindre skærme */
@media (max-width: 768px) {
    .vores-historie {
        flex-direction: column; /* Stabler tekst og billede lodret */
        align-items: center; /* Centrerer indholdet */
    }

    .tekst-container {
        order: 2; /* Flyt teksten til anden position */
        max-width: 100%; /* Fylder hele bredden */
    }

    .billede-container {
        order: 1; /* Flyt billedet til første position */
        max-width: 100%; /* Fylder hele bredden */
    }

    .tekst-container h2 {
        text-align: center; /* Centrer overskriften */
    }

    .billede-container img {
        max-width: 90%; /* Reducer billedets bredde på mobil */
    }
}