:root {
    --grid-size: minmax(8vh, 7vw);
    --font-size: 1rem;
    --background-color: #ffffec;
    --text-color: #252525;
    --border-color: rgba(0,0,0,0.1);
    --serif-font: "STIX Two Text", "Times New Roman", serif;
    --sans-font: "Schibsted Grotesk", "Inter", sans-serif;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--sans-font);
    background-color: var(--background-color);
    font-variant-ligatures: common-ligatures;
    font-feature-settings: "dlig";
}

a:hover {
    background-color:var(--text-color);
    color:var(--background-color)
}

.header {
    position:sticky;
    display: flex;
    margin:auto;
    width:100%;
    height:2.4rem;
    top: 0;  
    font-family: "Felipa", serif;
    color:red;
    border-bottom: 1px solid var(--border-color);
    background-color: var(--background-color);
    z-index: 1000;
}

.header-logo {
    font-size: 1.7em;
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    cursor:pointer;
}

.main-grid {
    position: fixed;
    top:0;
    display: grid;
    width:100vw;
    height:100vh;
    grid-template-columns:   var(--grid-size) 
                             var(--grid-size) 
                            1fr 
                             var(--grid-size)
                             var(--grid-size);
    
    grid-template-rows:      var(--grid-size) 
                             var(--grid-size) 
                            1fr 
                             var(--grid-size)
                             var(--grid-size);
    box-sizing: border-box;
    padding:5px;
}
.main-container {
    background-color: var(--background-color);
    grid-column: 2/5;grid-row:2/5;
    margin:0;
    padding:0;
    border:1px solid var(--border-color);    
    overflow-y: scroll;
    z-index: 1000;
    scrollbar-width: none;
}
.main-container::-webkit-scrollbar { display: none; }

.grid-container {
    display: grid;
    width:100vw;
    height: 100vh; /* Full viewport height */
    box-sizing: border-box;
    position: fixed; /* Context for potentially absolute positioning if needed */
    top:0;
    gap: 5px;  
    grid-template-columns:   var(--grid-size) 
                             var(--grid-size) 
                            1fr 
                             var(--grid-size)
                             var(--grid-size);
    
    grid-template-rows:   var(--grid-size) 
                             var(--grid-size) 
                            1fr 
                             var(--grid-size)
                             var(--grid-size);}

.main-text {
    margin:1em auto auto auto;
    width:calc(100% - 10em);
    max-width: 40em;
}

.footer {
    background: blue;
    margin:0;
    padding:0;
    height:500px;
}

.image-square {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    background-size: cover;
    background-position: center; /* Center the background image */
    background-repeat: repeat;
    position: relative; /* Needed for label positioning */
    width: 100%; /* Explicit width */
    height: 100%; /* Explicit height */
    box-sizing: border-box;
    transition: opacity 100ms ease-out;
}



.image-square label {
    font-size: 24px; /* Size of the pencil icon */
    color: var(--text-color);
    cursor: pointer;
    display: flex; /* Use flex to center content easily */
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    position: absolute; /* Cover the div */
    top: 0;
    left: 0;
}

img.uploaded-image {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}
/*
.image-square:hover, img.uploaded-image:hover {
    box-shadow: inset -1px -1px 0 0 var(--text-color), 
                inset 1px 1px 0 0 var(--background-color);
    opacity:.95;
}
.image-square:active, img.uploaded-image:active {    
    box-shadow: inset 1px 1px 0 0 var(--text-color), 
                inset -1px -1px 0 0 var(--background-color);
}*/

.image-square input[type="file"] {
    display: none; 
}

/* Re-do square placements based on 5 columns */
#sq-1 { grid-column: 1; grid-row: 1; }
#sq-2 { grid-column: 2/6; grid-row: 1; }
#sq-3 { grid-column: 1; grid-row: 2; }
#sq-4 { grid-column: 5; grid-row: 2; }
#sq-5 { grid-column: 5; grid-row: 3/6;}

#sq-6 { grid-column: 4; grid-row: 5; } /* Right side */
#sq-7 { grid-column: 3; grid-row: 5; }
#sq-8 { grid-column: 2; grid-row: 5; }
#sq-9 { grid-column: 1; grid-row: 3/5;}
#sq-10 { grid-column: 1; grid-row: 5; }

h1 {
    margin:0;
    padding:0;
}


.post_container {

    padding: 1em 1em 4em 1em;
    max-width: 100em;
    background: var(--background-color);
    color: var(--text-color);
}

.post_container:not(:last-child) {
    border-bottom: 1px solid var(--border-color);
    margin-bottom:3em;
}

.post_header {
    display: grid;
    grid-template-columns: auto auto;
    margin-bottom:1em;
    overflow-wrap: anywhere;
}

.post_body {
    font-family: var(--serif-font);
    margin-top: .6em;
    line-height: 1.55rem;
        font-size: 1.13rem;
        font-weight: 400;
}
.post_body > .post_body {text-indent: 1em;}

.tagline {    
    font-family: var(--serif-font);
    font-style: italic;
    color:red;
    font-size: 1.4em;
    text-align: center;
    padding: 1rem 1rem 2rem 1rem;
        font-weight: 400;
}
.kontakt-grid {    
    font-family: var(--serif-font);
    display: grid;
    row-gap: 17px;
    grid-template-columns: 9em 1.5fr;
        font-weight: 400;
}

.dato {
    font-family: "Schibsted Grotesk", Inter;
    font-size: 0.8em;
    opacity: 0.5;
    grid-column:1;
    grid-row:1;
}

.tall {
    font-family: "Schibsted Grotesk", Inter;
    font-size: 0.8em;
    opacity: 0.5;
    justify-self:end;
    grid-column:2;
    grid-row:1;
}

.ny {    
    grid-column: 1 / 3;
    margin-top: 1em;
    font-size: 2em;
    font-weight: 600;
}

.buttonHolder {
    position:absolute;
    display:flex;
    pointer-events: none;
}

.italiareisen {    
    border-radius: 0.3vh;
    border: 7px solid transparent;    
    border-bottom: 7px solid transparent !important;
    border-image: url(border.png) 100 stretch;
    padding: 1em 1em 1em 1em;
    margin-bottom:5px;
}

.info_symbol {    
    margin-top: .2rem;
    mix-blend-mode: difference;
}
.info_holder {
    display: grid;
    cursor: pointer;
    grid-template-columns: 2em 1fr 4em;    
    padding: 1em;
    color:var(--text-color);
}
.info_holder:not(:last-child) {    
    border-bottom: 1px solid var(--border-color);
}
.info_holder:hover {
    background:var(--text-color);
    color:var(--background-color)
}
.info_dato, .info_tall {
    opacity:.4;
}
.info_dato {
    display: flex;
    justify-content: flex-end;
}
.it_flagg {
    /*background: var(--accent_2);*/
    /* margin-left: 5vw; */
    grid-column: 1 / 3;
    font-family:  var(--serif-font);
        font-weight: 400;
    line-height: 1.1em;
    font-style: italic;
    margin-top: 1em;
    padding: .9em 1em .9em 1em;
    background-color: rgba(255,255,0,0.1)
}
.it_flagg_header {
    font-family: "Schibsted Grotesk", Inter;
    padding-bottom: .2em;
    font-size: .76rem;
}

#visitor-count-display {
    display:none;
}

.menu-button, .close-button, #close-popup-btn, #select-image-btn {
    pointer-events: auto;
    display: flex;
    border:none;
        background:var(--background-color);
        color:var(--text-color);
    border-right: 1px solid var(--border-color);
    padding: 10px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    height:2.4rem;
    min-width:2.4rem;
    z-index: 3000;
    justify-content: center;
    font-family: var(--sans-font);
    transition: transform 70ms ease-in, opacity 100ms ease-out; 
  opacity: 1;
}

.menu-button.hidden, .info-button.hidden {
  transform: translateX(-10px);
  opacity: 0; /* Animate opacity to 0 to make it invisible */
  pointer-events: none; /* Prevents clicking on the hidden elements */
}

.close-button, #close-popup-btn {
    border-right:0;
    border-bottom:1px solid var(--border-color);
    border-left:1px solid var(--border-color);
    font-family: "Felipa", serif;
    font-size:1.4em;
    position: sticky;
    top: 0;
    left: 100%;
    overflow:hidden;
}
#backButton {
    opacity:0;
    pointer-events: none;
    background:var(--background-color);
    color:var(--text-color);
    font-family: var(--sans-font);
    transition: opacity 50ms ease-in;
}
.menu-button:hover, .close-button:hover, #backButton:hover, #close-popup-btn:hover, #select-image-btn:hover {
    background-color:var(--text-color);
    color:var(--background-color);
}

.hamburger-icon {
    width: 100%;
    height: 4px; /* Thickness of each bar */
    background-color: var(--text-color); /* Color of the bars */
    border-radius: 2px;
}

/* Optional: Add some spacing between the bars */
.hamburger-icon:not(:last-child) {
    margin-bottom: 5px;
}

.arkiv_holder {
    opacity:0;
    pointer-events: none;
    position:fixed;
    background:var(--background-color);
    outline:1px solid var(--border-color);
    top:50%;
    left:50%;
    transform: translate(-50%, calc(-50% - 10px));
    width:70vw;
    height:90vh;
    max-width:40em;
    max-height:100vh;
    box-sizing: border-box;
    z-index: 2000;
    box-shadow: 0 0 0 1000vw rgba(0, 0, 0, 0.2);
    scrollbar-width: none;    
    overflow-y: scroll;
    transition: transform 50ms ease-in, opacity 100ms ease-in;
}
.arkiv_holder::-webkit-scrollbar { display: none; }
.arkiv_holder.active {
    opacity:1;
    pointer-events: auto;
    transform: translate(-50%, -50%);
}

#hideButton {
    display: none;
}

.info_side {
    line-height: 1.4rem;
}


#image-upload-popup {
    position:fixed;
    background:var(--background-color);
    outline:1px solid var(--border-color);
    top:50%;
    left:50%;
    width: auto;
    height: auto;
    max-width:40em;
    max-height:100vh;
    box-sizing: border-box;
    z-index: 2000;
    box-shadow: 0 0 0 1000vw rgba(0, 0, 0, 0.2);
    scrollbar-width: none;    
    overflow-y: scroll;
    transition: transform 50ms ease-in, opacity 100ms ease-in;

    opacity:0;
    pointer-events: none;
    transform: translate(-50%, calc(-60% - 10px));
    transition: transform 50ms ease-in, opacity 100ms ease-in;
}
.popupShow {    
    opacity:1 !important;
    pointer-events: auto !important;
    transform: translate(-50%, -60%) !important;
}
.popup-content {
    width: 100%;
    height: 100%;
}
.popup-content p {
    text-align: center;
    font-size: 16px;
    color: var(--text-color);
    margin: 1rem 2rem 2rem 2rem;
    text-wrap: balance;
}
#select-image-btn {
    width: calc(100% - 4rem);
    margin: 0 2rem 2rem 2rem;
    color: black;
    padding: 1.5rem;
    border: 1px solid var(--border-color);
    cursor: pointer;
    font-size: 1rem;
}
#select-image-btn:hover {
    background-color: var(--text-color);
    color: var(--background-color);
}


/*VERTIKAL SKJERM:*/

@media only screen and (max-width:90vh) {
    .post_body {
}
    #hideButton {
        display: block;
        z-index:9000;
    }
    #image-upload-popup {
        width:calc(100vw - 10px);
    }
    .grid-container{
        all: unset;
        display: grid;
        width: 100vw; 
        height:100%;
        box-sizing: border-box; /* Include padding in width/height */
        position: fixed; 
        opacity: 1;
        top: 0;
        bottom: 0;
        gap: 5px;  
        grid-template-columns:   var(--grid-size) 
                                var(--grid-size) 
                                1fr 
                                var(--grid-size)
                                var(--grid-size);
        
        grid-template-rows:   var(--grid-size) 
                                var(--grid-size) 
                                1fr 
                                var(--grid-size)
                                var(--grid-size);

    }

    #sq-1 { grid-column: 1; grid-row: 1; }
    #sq-2 { grid-column: 3; grid-row: 1; }
    #sq-3 { grid-column: 2; grid-row: 1; }
    #sq-4 { grid-column: 4; grid-row: 1; }
    #sq-5 { grid-column: 5; grid-row: 1; }

    #sq-6 { grid-column: 1; grid-row: 5; } /* Right side */
    #sq-7 { grid-column: 3; grid-row: 5; }
    #sq-8 { grid-column: 2; grid-row: 5; }
    #sq-9 { grid-column: 4; grid-row: 5; }
    #sq-10 { grid-column:5; grid-row: 5; }

    .main-container {
        grid-column:1/6;grid-row:2/5;
        margin:0 5px;
        overflow-x: hidden;
    }

    .main-text {
        width:unset;
        padding:0 5px;
        margin:5px auto auto auto;
    }

    .arkiv_holder {
        width: calc(100vw - 10px);
        height: calc(100% - 10px);
        top: 5px;
        left: 5px;
        transform: none;
        max-width: none;
        transform: translate(0,-10px);
    }
.arkiv_holder.active {
    opacity:1;
    pointer-events: auto;
        transform: translate(0,0);
}

    .buttonHolder {
    width: 100%;
    position: absolute;
    display: flex;
    justify-content: space-between;
    }

    #backButton {
        border-left:1px solid var(--border-color);
        border-right:0;
        background:var(--background-color);
        color:var(--text-color);
    }

    .post_container:not(.italiareisen, :last-child):after {
    content: "";
    border-bottom:1px solid var(--border-color);
    display: block;
    margin: 5em auto 0 -50px;
    /* position: absolute; */
    /* bottom: 0; */
    /* left: 0; */
    width: 200%;
    height: 1px;}

    .post_container:not(.italiareisen) {
     border-bottom: 0; 
     margin-bottom: 0;
}
    .tagline {
        padding: 1rem;
    }
    .kontakt-grid {
        grid-template-columns: .8fr 1.5fr;
        font-size: .9rem;
    }
}



.menu-button.visible {
    pointer-events: auto !important;
    opacity: 1 !important;
}