/* Definerer de mest brugte farver og andre elementer i koden */
:root {
    --sort: #000;
    --hvid: #ffffff;
    --navigationsbar: #ffffff;
    --baggrundsfarve: #f5f5f5;
}

a {
    text-decoration: none; /* fjerner streger under links */
    color: inherit; /* fjerner den blå farve i links */
    font-size: 1rem; /* Skriftstørrelse */
    font-weight: 300; /* Skrifttykkelse */
    font-family: "Montserrat", sans-serif; /* Skrifttype */
}


/* Basic stylings - generelt for html */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Montserrat", sans-serif;
}

body {
    background-color: var(--baggrundsfarve); /* Baggrundsfarve */
    font-family: "Montserrat", sans-serif; /* Skrifttype */
}

main{
    margin-top: 5.7rem;  /* Rykker det ud under fra headeren */
}
/*---------------------------------------------------------------------------------------*/

/* NAVIGATIONSBAR STYLING */

/* Styling af nav-tag */
nav {
    font-weight: 300; /* Skrifttype */
    position: fixed; /* sikrer at nav følger skærmen, når der scrolles nedad */
    width: 100%; /* Fylder hele skærmen ud */
    top: 0; /* Placerer navigationen øverst på skærmen */
    z-index: 999; /* Høj z-index-værdi for at sikre, at det vises over andre elementer */
    background-color: var(--navigationsbar); /* Baggrundsfarve */
}

/* styling af den egentlige checkboks */
.nav-checkbox {
    display: none; /* fjerner den aktuelle checkboks fra syne*/
}

/* placering af burgermenu - bar */
.nav-toggle {
    position: absolute;
    cursor: pointer; /* Ændre mussen til et pointer */
    margin: 0rem 1rem; /* Luft over til siderne */
    right: 0; /* placerer elementet helt til højre */
    z-index: 1000; /* Sørger for, at burgermenu-ikonet vises over alt andet */
}

/* styling af burgermenu - bar */
.menu {
    margin: 1.5rem; /* placering af bar fra top */
    right: 0; /* placerer elementet helt til højre */
    position: relative;
}

/* styling af navigation */
.nav-menu {
    display: flex;
    flex-direction: column; /* elementer på række - mobil view*/
    right: 0; /* placerer elementet helt til højre */
    margin: 0.7rem; /* Giver luft omkring */
    margin-bottom: 0; /* fjerner margin i bund */
    z-index: 1000;
}

/* funktionalitet af burgermenu - bar-img */
#nav-checkbox:checked ~ ul.nav-menu li {
    display: block; /*kalder på liste elementerne, når der trykkes på bar */
}

/* styling af klik på links i nav */
a:active {
    background-color: var(--hvid); /* giver aktiverede links en mørkere baggrundsfarve:*/
}

/* layout af listede elementer */
.dropdown-styling {
    display: flex;
    justify-content: left; /* placerer menuen i venstre side */
    padding-left: 1rem; /*luft mellem elementer */
    padding-right: 1rem; /*luft mellem elementer */
    width: 100%; /* Fylder hele skærmen ud */
    border-bottom: 0.5px solid var(--sort); /* Streg under hvert element i dropdown-menu */
}

/* styling af tekst, i under-listede elementer */

/* styling af listede elementer*/
nav li { 
    list-style: none; /* fjerner prikker fra listede elementer */
    display: none; /* viser kun listede elementer, når der klikkes på burgermenu-logo/img */
}

/* placering af logo - i listede elementer */
li:first-child { /* first-child, fordi logo er første element i listede elementer. Denne skal være placeret anderledes. */
    margin-right: auto;
    display: block; /* sikrer at logo altid vises, selvom andre listede elementer er skjult */
}

ul {
    display: flex;
    flex-direction: column; /* Placerer elementerne i en kolonne */
    list-style: none; /* fjerner prikker fra listede elementer */
}

ul li a {
    display: block; 
    padding: 1rem 0.5rem; /* Afstand 1rem til top og bund. Afstand til siderne */
}

/* styling af logo-img */
.logo {
    width: 8rem; /* størrelse på img - rem pga. responsiv */
    margin-left: 0.8rem; /* luft omkring img, til nærliggende kanter */
}


/*------------------------------------------------------------------------------------------*/
/* Burgermenu Knappen STYLING */
.burgermenu-knap {
    display: inline-block; /* Giver mulighed for at indstille en bredde og højde på elementet */
    cursor: pointer; /* Ændre mussenmarkøren til en pegemarkør */
}
  
.bar1, .bar2, .bar3 {
    width: 35px; /* Bredden på burgermenuens bar */
    height: 3px; /* Tykkelsen på burgermenuens bar */
    background-color: var(--sort); /* Udfyldt farve af burgermenuens bar */
    margin: 8px 0; /* Afstanden mellem hver bar */
    transition: 0.4s; /* Tiden overgangen tager */
    border-radius: 2rem; /* Afrundet kanter */
}
.change .bar1 {
    transform: translate(0, 11px) rotate(-45deg); /* Rotere første bar */
}
  
.change .bar2 {
    opacity: 0; /* Fade ud anden bar */
}
  
.change .bar3 {
    transform: translate(0, -11px) rotate(45deg); /* Rotere sidste bar */
}
/*------------------------------------------------------------------------------------------*/
/*  */
/* FOOTER STYLING */
footer {
    background-color: #B2AC88; /* Baggrundsfarve på footer */
    width: 100%; /* Fylder hele skærmen ud */
    padding: 2.5rem 2.5rem 1rem; /* Afstand rundet om elementerne i rem, så det er responsivt */
    color: var(--hvid); /* Gør skriften hvid */
}
  
.footerContainer {
    display: flex;
    justify-content: space-between; /* Placerer elementerne i hver side af skærmen */
}
  
.footerAdresse p {
    padding: 3px; /* Afstand mellem teksten */
}
  
.footerSocialemedier{
    list-style: none; /* Fjerner prikker fra listede elementer */
}

.footerSocialemedier img {
    cursor: pointer; /* Ændre mussenmarkøren til en pegemarkør */
    width: 1.6rem; /* Definere størrelsen på ikonerne */
    height: auto;
}

.footerSocialemedier a {
    padding: 3px;  /* Luft omkring ikonerne */
}
.footerSocialemedier ul{
    display: flex;
    flex-direction: row;
}

.footerBottom {
    padding-top: 1.5rem;  /* Afstand til footerContainer over */
    text-align: center;  /* Placerer teksten i midten */
}

/*------------------------------------------------------------------------------------------*/

/* FORSIDE STYLING */
.forside-logo {
    width: 100%; /* Størrelse på logo */
    padding: 2rem 3.5rem 2rem 3.5rem; /* Luft omkring logo */
    display: flex;
    justify-content: center; /* Placering i midten */
}
.forside-velkomst {
    display: flex;
    flex-direction: column; /* Placerer elementerne i en kolonne */
    align-items: center; /* Placerer elementerne i midten */
    padding-bottom: 3.5rem; /* Afstand til næste section under */
}
.forside-velkomst h1 {
    font-weight: 400; /* Skrifttykkelse */
}
/*  */
.forside-nyhed {
    padding: 3rem 2rem 3.5rem 2rem; /* Afstand rundt om sectionen */
}
.forside-nyhed{
    list-style: none; /* Fjerner prikkerne fra listede elementer */
}
.forside-nyhed h2 {
    display: flex;
    justify-content: center; /* Placerer overskriften i midten */
    font-weight: 300; /* Skriftykkelsen */
}

/* Styling af nyhed billederne */
.forside-nyhed-billeder ul li a{
    display: flex;
    justify-content: center; /* Placerer billederne i midten */
}

.forside-nyhed-img {
    
    width: 80%; /* Størrelsen på billederne */
    padding: 1rem; /* Afstand rundt om billederne */
    cursor: pointer; /* Ændre mussenmarkøren til en pegemarkør */
}
/*------------------------------------------------------------------------------------------*/
/* ØL STYLING */

/* Styling af velkomst billed */
.billed-container-top {
    position: relative; /* Har ikke styr på hvad dette betyder??? */
}

.billed-container-top img {
    display: block; /* Har ikke styr på hvad dette betyder??? */
    width: 100%; /* Størrelsen på billedet */
    object-fit: cover; /* Har ikke helt styr på hvad det betyder??? */
    /* Ville gerne have at billedet kunne gøre lige som på Jakobsen - øl website, men kunne ikke regne ud hvordan det var gjort eller finde ud af hvordan jeg kunne gøre det :( */
}

/* Styling af tekst over billed */
.overlay-tekst {
    position: absolute;
    top: 50%; /* sikrer placering i midten, både vertikalt og horisontalt i forhold til det omsluttende billede. */
    left: 50%; /* sikrer placering i midten */
    transform: translate(-50%, -50%); /* Transform-funktionen bruges til at finjustere placeringen */
    padding: 1rem; /* Luft omkring tekst */
    color: var(--hvid); /* Gør skriften hvid */
    text-align: center; /* Placerer teksten i midten */
}

.overlay-heading {
    font-size: 2rem; /* Tekst størrelsen */
    font-weight: 400; /* Tykkelsen af teksten */
}

.overlay-bodytext {
    line-height: 1.8rem; /*linjeafstand*/
    font-weight: 200; /* Tykkelsen af teksten */
}

/* bodytext - teksten under billedet */
.beer-bodytext {
    display: flex;
    justify-content: center; /* Placerer tekstboksen i midten */
    text-align: center; /* Placere teksen i midten */
    padding: 3rem; /* Luft omkring tekstboksen */
}

/* Produkt galleri */
.products-gallery {
    width: 100%;
    display: flex;
    flex-direction: column; /* Placerer elementerne i en kolonne */
    padding: 1.5rem;  /* Luft omkring */
}

.products-gallery img {
    width: 100%;  /* Størrelsen på billedet */
    height: auto; 
    
}

.product-description {
    text-align: center;  /* Placerer teksten i midten */
}

/*------------------------------------------------------------------------------------------*/

/* EVENTS STYLING */

/* Overskrift */
.events-heading h1 {
    display: flex;
    justify-content: center; /* Placerer tekstboksen i midten */
    text-align: center; /* Placere teksen i midten */
    padding: 3rem; /* Luft omkring tekstboksen */
    font-weight: 500; /* Tykkelsen på teksten */
}
/*  */
.upcoming {
    text-align: center; /* Placere teksten i midten af skærmen */
    padding: 1.5rem; /* Afstand rundt omkring teksten */
    cursor: pointer; /* Ændre mussenmarkøren til en pegemarkør */
}

/* events dele */
.events-del {
    width: 100%; /* Størrelsen på elementerne */
    display: flex;
    flex-direction: column; /* Placerer elementerne i en kolonne */
    padding: 1rem 1rem; /* Luft omkring elementerne */
}

.events-del img {
    width: 100%;  /* Størrelsen på billedet */
    height: auto; 
    border-radius: 2rem; /* Afrundet kanter */
}

.events-description {
    text-align: center;  /* Placerer teksten i midten */
    padding-top: 1rem; /* Afstand mellem billed og tekst under */
}


/*------------------------------------------------------------------------------------------*/

/* BRYGHUSET STYLING */

/* Overskrift */
.brewery-heading h1 {
    display: flex;
    justify-content: center; /* Placerer tekstboksen i midten */
    text-align: center; /* Placere teksen i midten */
    padding: 3rem; /* Luft omkring tekstboksen */
    font-weight: 500; /* Tykkelsen på teksten */
}

.brewery-history {
    display: flex;
    flex-direction: column; /* Placerer elementerne i en kolonne */
    justify-content: center; /* Placerer elementerne i midten */
    padding: 0 3rem 3rem 3rem; /* Afstand rundt om  */
}

.brewery-history1 {
    padding-bottom: 3.5rem; /* Afstand til næste element under */
}

.brewery-history h4 {
    text-align:left; /* Placerer overskriften til venstre */
    font-weight: 600; /* Tykkelsen på overskriften */
}

.brewery-history p {
    font-weight: 200; /* Tykkelsen på teksten */
    padding-top: 1rem; /* Afstand til forrige element over */
    padding-bottom: 2rem; /* Afstand til næste element under */
}

.brewery-img1 {
    width: 100%; /* Størrelsen på billedet */
    padding-bottom: 1.5rem; /* Afstand til næste element under */
    border-radius: 1.75rem 6rem 0 6rem; /* Afrundede kanter */
}

.brewery-img2 {
    width: 100%; /* Størrelsen på billedet */
    padding-bottom: 1.5rem; /* Afstand til næste element under */
    border-radius: 6rem 1.75rem 6rem 0; /* Afrundede kanter */
}

/*------------------------------------------------------------------------------------------*/

/* RESPONSIVE - MEDIA QUERIES */

/* FOR MOBILE VIEW - LILLE MOBIL*/
@media only screen and (max-width: 320px) {
 /* STYLING AF FOOTER */
    .footerSocialemedier ul {
        flex-direction: column;  /* Placerer elementerne i en kolonne */
    }
    .footerSocialemedier img {
        margin: 3px;  /* Luften omkring elementerne */
    }
    footer {
        font-size: 0.5rem; /* Tekststørrelsen */
    }
}

/* FOR MOBILE VIEW - STOR MOBIL*/
@media only screen and (max-width: 425px) {
 /* FOOTER */
    footer {
        font-size: 0.8rem; /* Tekststørrelsen */
    }

    .footerSocialemedier {
        flex-direction: row;  /* Placerer elementerne i en kolonne */
    }

 /* ØL */
    .overlay-bodytext {
        display: none; /* Fjerne teksten, da jeg synes det ikke passer til mobil layout */
    }
}



/* FOR DESKTOP VIEW */
@media only screen and (min-width: 768px) {
 /* NAVIGATION */
    nav {
        border-bottom: 0.5px solid var(--sort);  /* Placere en streg under header */
    }
    .nav-toggle {
        display: none; /* skjuler bar-img i desktop view */
    }

    .nav-menu {
        /* styling af navigationsbar */
        flex-direction: row; /* ændrer opstilling/retning på listede elementer i nav */
        display: flex;
        right: 0; /* placerer elementet helt til højre */
        margin: 0.5rem; /* Afstand omkring */
        z-index: 100; /* Har ingen ide om hvad det betyder??? */
    }

    .dropdown-styling {
        margin-top: 0.5rem; /* gør teksten på linje med logo (midten) */
        margin-bottom: 0.5rem; /* gør giver sammen afstand som top til tekst til tekst til bund */
        border-bottom: none; /* Fjerne stregen under hvert element */
    }

    nav li {
        display: block; /* gør listede elementer synlige */
    }

    a {
        font-size: 0.9rem; /* tilpasser tekst størrelsen skærmstørrelsen */
    }


 /* FOOTER */
    .footerSocialemedier img {
        width: 2rem; /* Størrelsen af ikonerne */
        margin: 0.25rem; /* Afstanden rundt om ikonerne  */
    }


 /* FORSIDE */
    .forside-logo {
        width: 35%; /* Størrelsen på logo */
    }

    .forside-nyhed-billeder img{
        width: 80%; /* Størrelsen på billederne */
    }
    
    .forside-nyhed-billeder ul {
        flex-direction: row; /* Placerer billederne på en række */
    }


 /* ØL */
    .overlay-heading {
        font-size: 3rem; /* Tekstens størrelse */
        font-weight: 400; /* Tykkelsen på teksen */
    }

    .overlay-bodytext {
        font-size: 1.25rem; /* Tekstens størrelse */
    }

    /* Produkt galleri */
    .products-gallery-row {
        display: flex;
        flex-flow: row wrap; /* Placerer elementerne på en række med 'row' og med 'wrap' pakker elementerne på flere linjer. */
        justify-content: center; /* Placerer elementerne i midten */
    }

    .products-gallery {
        width: 50%; /* Størrelsen på elementerne */
    }

    .product-description {
        padding: 2rem; /* Luft omkring teksten */
    }


 /* EVENTS */
    /* Events dele */
    .events-row {
        display: flex;
        flex-flow: row wrap; /* Placerer elementerne på en række med 'row' og med 'wrap' pakker elementerne på flere linjer. */
        justify-content: center; /* Placerer elementerne i midten */
    }

    .events-del {
        width: 50%; /* Størrelsen på elementerne */
    }

    .events-description {
        padding: 2rem; /* Luft omkring teksten */
    }


 /* BREWERY */
    .brewery-history img {
        width: 75%; /* Størrelsen på billederne */
        display: flex;
        align-self: center; /* Placerer billederne i midten */
        padding-bottom: 2.5rem; /* Afstand til næste element under */
    }
}



@media only screen and (min-width: 769px) {
 /* NAVIGATION */
    a {
        font-size: 1rem; /* tilpasser tekst størrelsen skærmstørrelsen */
    }


 /* FOOTER */
    .footerSocialemedier img {
        width: 2.5rem; /* Størrelsen på ikonerne */
        margin: 0.5rem; /* Afstanden rundt om ikonerne */
    }


 /* FORSIDE */
    .forside-nyhed-img {
        padding: 3rem; /* Afstand rundt om billeder */

    }
    .forside-nyhed-billeder img{
        width: 90%; /* Størrelsen på billederne */
    }


 /* ØL */
    .overlay-heading {
        font-size: 4rem; /* Tekstens størrelsen */
    }

    .overlay-bodytext {
        font-size: 1.5rem; /* Tekstens størrelsen */
        line-height: 2.3rem; /* Linjeafstand */
    }

    /* Produkt galleri */
    .products-gallery-row {
        display: flex;
        flex-flow: row wrap; /* Placerer elementerne på en række med 'row' og med 'wrap' pakker elementerne på flere linjer. */
        justify-content: center; /* Placerer elementerne i midten */
    }

    .products-gallery {
        width: 25%; /* Størrelsen på elementerne */
    }


 /* EVENTS */
    /* events dele */
    .events-row {
        display: flex;
        flex-flow: row wrap; /* Placerer elementerne på en række med 'row' og med 'wrap' pakker elementerne på flere linjer. */
        justify-content: center; /* Placerer elementerne i midten */
    }

    .events-del {
        width: 25%; /* Størrelsen på elementerne */
    }


 /* BREWERY */
    .brewery-history img {
        width: 65%; /* Størrelsen på billederne */
        display: flex; 
        align-self: center; /* Placerer billederne i midten */
        padding-bottom: 2.5rem; /* Afstand til næste element under */
    }   
}