/*****************************************************************************************************************/
/**************************************      General page setup    ***********************************************/
/*****************************************************************************************************************/
/* The body is the main container. It consists of:
    o  the header, which is the top menu.
    o  the page, which is the page content, defined by which page button is pressed in the top menu
    o  the footer which contains the copyright info. */

*{
    /* font-family: "Merriweather", serif; */
    font-family: "asap";/*
    /*font-family: "Montserat";/**/
    box-sizing: border-box; /* This is to prevent the width from being affected by the padding and border. */
    margin: 0;
    padding: 0;
}

@font-face { /*load asap font.*/
    font-family: 'asap';
    src: url('fonts/asap/Asap-VariableFont_wdth,wght.ttf') format('truetype');
}

@font-face {
    font-family: 'open sans';
    src: url('fonts/open_sans/OpenSans-VariableFont_wdth,wght.ttf') format('truetype');
}

.darkColor, h1, h2, h3, p, a {           color: rgb(76, 50, 37); text-decoration: none;} /* text-decoration: none  Removes underline from links*/
.darkBackground           {background-color: rgb(76, 50, 37);}
.lightColor               {           color: rgb(228, 218, 197);}
.lightBackground          {background-color: rgb(228, 218, 197);}
.imgToDark                {filter: sepia(100%) hue-rotate(346deg) brightness(150%);} /* Høvl & Spåner logo */
.imgToDark2              {filter: sepia(100%) hue-rotate(346deg) brightness(100%);} /* FB and instagram icons */

h1, h2, h3 {
    font-family: "asap";
    font-weight: 700; /*700 is bold*/
}

p {text-decoration: none;} 

/* Wide screen */
@media screen and (min-width: 1100px) {
    h1 { font-size: 40px; }
    h2 { font-size: 30px; }
    h3 { font-size: 20px; }
}

/* Slim: Smart phone */
@media screen and (max-width: 1099px) {
    h1 { font-size: 24px; }
    h2 { font-size: 20px; }
    h3 { font-size: 16px; }
}


body {
    display: flex;
    flex-direction: column;
    align-items: center;            /* Center horizontally. */
    min-height: 100vh;              /* 100vh should work better than 100%. If content takes more space, then body will adapt. */
    width: 100%;                    /* 100% works perfect. 100vw will cause a horizontal scroll bar to appear. */
    justify-content: flex-start;    /* Place elements top down. */
    /* background-color: white; */
    /* color: rgb(34, 34, 34); */
    overflow-x: hidden;
    overflow-y: scroll; /* Makes the scrollbar appear always. Gives consistent position of elements sideways.*/
    /*opacity: 0;
    transition: opacity 0.2s ease-in-out;*/
}
.h1Container {
    display: flex; 
    align-items: center; 
    justify-content: center;
    gap: 10px;
    width: 100%; /*Useful for placing logo and text start the same place.*/
}


p {
    font-family: "sans serif";
    font-size: 18px;
    font-weight: 500;   
    line-height: 1.3;
}
i {
    font-family: "sans serif";
    font-style: italic;
}
em {
    font-family: "sans serif";
    font-style: normal;
    font-weight: 700;
}

/* .pageContainer {
    position: relative;
    width: 100%;
    overflow: hidden;
    flex-grow: 1;    /*Makes sure the page takes up the space available in height, so that the footer is in the botton. */                       
/*} */
.page {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;            /* Center horizontally. */
    width: 100%;
    flex-grow: 1;    /*Makes sure the page takes up the space available in height, so that the footer is in the botton. */                       
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;

}
.pageHidden {
    display: none;
    opacity: 0;
    pointer-events: none;
}
.pageVisible {
    display: flex;
    opacity: 1;
    pointer-events: all;
}

footer {
    text-align: center;
    margin-top: 0px;
    font-size: 12px;
    width: 100%;
    background-color: rgb(34, 34, 34);
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
}
button, .aMenu {
    display: flex;
    justify-content: left;
    align-items: center;
    border: none;
    padding: 0px 5px 0px 5px;
    background: none; /* Using background-color is not enough */
    cursor: pointer;  /* Arrow changes to a hand when hovering over the button */
    font-size: 20px;
    transition: background-color 0.2s;
    white-space: nowrap; /* Forces the text to not wrap to the next line */
}



.flexWrapper { /* Used for containing elements in a row, but when width is reduced, e.g. on smart phones, the elements will stack on top of each other.*/
    position: relative;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    max-width: 1200px;
    padding: 0 10px;
}
.flexWrapItem { /*A standard box that can be used inside a flexWrapper. It adjusts well to computer and mobile screens.*/
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    padding: 0 10px;
}
.imgElement {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 40px 10px;
}
/*****************************************************************************************************************/
/**************************************      headerWide        ***************************************************/
/*****************************************************************************************************************/
.headerWide {
    display: flex;
    justify-content: center;
    align-items: center;      /* This positions the right menu (page menu) to the right. Notice that the rest of children elements are position: absolute (center menu and username). */
    width: 100%;                    /* Width is full screen. Height is not defined and will adjust to the children elements. */
    /*height: 60px;*/
    /*border-top: 5px solid rgb(34, 34, 34);/**/
    padding: 20px;
}

.headerSlim { /* CURRENTLY SLIM IS SAME AS WIDE*/
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;      
    width: 100%;                    /* Width is full screen. Height is not defined and will adjust to the children elements. */
    /*height: 60px;*/
    /*border-top: 5px solid rgb(34, 34, 34);/**/
    padding: 20px;
}

.headerContactInfoWide {
    position: absolute;
    right: 40px;
    display: flex;
    align-items: center;
    gap: 25px;
}

.headerContactInfoSlim {
    position: absolute;
    left: 10px;
    display: flex;
    align-items: center;
    height: 40px;
    gap: 15px;
}
.contactFontWide {
    font-size: 16px;
}
.contactFontSlim {
    font-size: 14px;
}

.headerLogoWide {
    position: absolute; 
    left: 60px; 
    height: 40px;
}

.headerLogoSlim {
    display: none;
    height: 60px;
}

.textHeaderLogoWide {
    height: 70px;
    margin-right: 15px;
}

.textHeaderLogoSlim {
    height: 40px;
    margin-right: 15px;
}


.navigationMenuWide{
    display: flex;
    flex-direction: row;
    direction: rtl;
}
.navigationMenuSlim{
    display: flex;
    flex-direction: column;
    direction: rtl;
}

.menuButtonsContainerWide{
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    direction: ltr;
    transition: height 0s , opacity 0.5s;
    overflow: hidden;
    /* Height is set in script.js */
    /* Width is set in script.js */
    gap: 10px;
}
.menuButtonsContainerSlim{
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    direction: rtl;
    transition: height 0.5s , opacity 0.5s;
    overflow: hidden;
    gap: 5px;
    /* Height is set in script.js */
    /* Width is set in script.js */
}


#buttonMenuID { /* Menu button (three dots) */
    flex-direction: column;
    width: 40px;
    height: 40px;
    justify-content:space-between;
    padding: 10px 0px 10px 0px;
}

#buttonMenuID span { /* Menu button (three dots) */
    width: 20px;
    height: 2px;
    border-radius: 1px;
}

.buttonMenu {
    height: 40px;
    transition: border-bottom 0.2s;    
    box-sizing: content-box; /* Prevents the text from jumping the hovering over the button. */
    border-bottom: none; /*This value is changed in script.js depending on which page is active*/
    font-size: 24px;
    font-weight: 600;
     text-decoration: none;                     /* This code prevents blue color on iphone.*/
    -webkit-tap-highlight-color: transparent;   /* This code prevents blue color on iphone.*/
    -webkit-text-fill-color: rgb(76, 50, 37); /* Prevents blue button text in Safari webapp */
}
.buttonMenu:hover {
    border-bottom: 2px solid rgb(76, 50, 37);
}
.buttonMenuActive {
    border-bottom: 2px solid rgb(76, 50, 37);
}


.facebookIcon {
    display: flex; 
    justify-content: right; 
    align-items: center;
}
.facebookIcon:hover {
    transition: transform 0.3s ease-in-out;
    transform: scale(0.9);
}

.instagramIcon {
    display: flex; 
    justify-content: right; 
    align-items: center;
}
.instagramIcon:hover {
    transition: transform 0.3s ease-in-out;
    transform: scale(0.9);
}

.phone {
    text-align: right;
    font-size: 16px;
}
.phone:hover {
    text-decoration: underline;
}

.mail {
    text-align: right;
    font-size: 16px;
}
.mail:hover {
    text-decoration: underline;
}

/*****************************************************************************************************************/
/**************************************      headerSlim        ***************************************************/
/*****************************************************************************************************************/
#buttonThreeDotsID {
    flex-direction: column;
    width: 40px;
    height: 40px;
    justify-content:space-around;
}
#buttonThreeDotsID span {
    width: 5px;
    height: 5px;
    background: #fff;
}
#menuiconID {
    writing-mode: vertical-rl;
    width: 120px;
    height: 40px;
}
/*****************************************************************************************************************/
/**************************************      Forside            ***************************************************/
/*****************************************************************************************************************/
.frontPageImages {
    position: relative;
    width: 100vw;
    height: 20vw;
    min-height: 200px;
    overflow: hidden;
}
.frontPageImages img {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity 1.5s;
}


.menuItem {
    position: relative;
    width: 500px;
    aspect-ratio: 2 / 1; /*Ensures that the image is square.*/
    overflow: hidden; /*If image is not square, it will not overflow the container*/

    font-family: "asap", sans-serif;
    color: white; /* Text color */
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.menuItemText {
    position: absolute;
    z-index: 2;
    font-family: "asap";
    font-weight: 600;
    text-align: center;
    font-size: 30px; /* Font size relative to the width of the closest parent div */
    pointer-events: none; /* This makes the text not clickable and the cursor is instead acting on the galleryMenuItemOverlay */
}

.menuItem img {
    object-fit: cover;
    z-index: -2;
    width: 100%;
    height: 100%;
}
.menuItemOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.5); /* Dark background with 50% opacity */
    transition: all 0.2s;
    cursor: pointer;
}

.menuItem:hover .menuItemOverlay { /* When hovering over the galleryMenuItem, the overlay is scaled down to 90% */
    scale: 0.9;
    background-color: rgba(0, 0, 0, 0.6); /* Dark background with 50% opacity */
}
/*****************************************************************************************************************/
/**************************************      Galleri Menu      ***************************************************/
/*****************************************************************************************************************/
/* .galleryMenu {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;   
    width: 100%;
    max-width: 600px;
    align-content: flex-start; /* Aligns rows to the start of the container */
/*} */

.galleryMenuButton {   /* This is a class for items creates in JS. */
    position: relative;
    width: calc(100% / 3 - 1%); /* Gives 3 images in a row.*/
    margin: 0.5%; /* Gives 3 images in a row.*/
    aspect-ratio: 1 / 1; /*Ensures that the image is square.*/
    overflow: hidden; /*If image is not square, it will not overflow the container*/

    font-family: "asap", sans-serif;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}
.galleryMenuButton img{
    width: 100%;
    height: 100%;
    object-fit: 'cover';
}

.gallery-container {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;   
    width: 100%;
    max-width: 600px;
    align-content: flex-start; /* Aligns rows to the start of the container */
}


.galleryMenuItem {
    position: relative;
    width: 300px;
    aspect-ratio: 2 / 1; /*Ensures that the image is square.*/
    overflow: hidden; /*If image is not square, it will not overflow the container*/

    font-family: "asap", sans-serif;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 3;
}

.galleryMenuItemText {
    position: absolute;
    z-index: 2;
    font-family: "asap";
    font-weight: 600;
    text-align: center;
    font-size: 20px; /* Font size relative to the width of the closest parent div */
    pointer-events: none; /* This makes the text not clickable and the cursor is instead acting on the galleryMenuItemOverlay */
}

.galleryMenuItem img {
    object-fit: cover;
    z-index: -2;
    width: 100%;
    height: 100%;
}
.galleryMenuItemOverlay {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.4); /* Dark background with 50% opacity */
    transition: all 0.2s;
    cursor: pointer;
}

.galleryMenuItem:hover .galleryMenuItemOverlay { /* When hovering over the galleryMenuItem, the overlay is scaled down to 90% */
    scale: 0.9;
    background-color: rgba(0, 0, 0, 0.6); /* Dark background with 50% opacity */
}

/*****************************************************************************************************************/
/**************************************      Galleri  category content ***************************************************/
/*****************************************************************************************************************/
/* The container for the category items */
.itemContainer {
    display: flex; 
    flex-direction: row; 
    justify-content: center; 
    align-items: flex-start; 
    flex-wrap: wrap; 
    gap: 10px;
    width: 100%;
    max-width: 1200px;
}

/* The category item */
.categoryItem {
    position: relative;
    width: 95%;
    aspect-ratio: 3/4;
    max-width:       250px;
    max-height: calc(250px * 4 / 3);
    border-radius: 5px;
    overflow: hidden; /* Makes border radius work. */
}





.pswp-gallery {
    width: 100%;
    height: 100%;
}

.pswp-gallery > a > img { /*Targets the thumbnail images*/
    width: 100%;
    height: 100%;
    object-fit: cover; /*This makes the image cover the entire div, even if it's not square. And maintain aspect ratio.*/
}
.pswp__img { /* Targets the fullscreen image */
    object-fit: contain;
}
.pswp__img--placeholder {/* Initially in full screen mode, the thumbnailimage is stretched. This is a workaround to hide it. */
    display: none;
}

.imagesAvailable {
    position: absolute; 
    top: 5px; 
    right: 5px; 
    background: rgba(0,0,0,0.3); 
    padding: 5px 10px; 
    border-radius: 5px; 
    color: white; 
    display: flex; 
    align-items: center; 
    gap: 5px;
}
.imgDescription {
    position: absolute;
    bottom: 0px;
    background: rgba(0, 0, 0, 0.6); 
    padding: 5px 5px 5px 5px; 
    color: white; 
    display: flex; 
    align-items: center; 
    gap: 5px;
    width: 100%;
    pointer-events: none;
    font-family: "asap";
    font-size: 16px;
    font-weight: 400;
}