@charset "UTF-8";

/* ------ Grundstilen för sidorna ----- */

html {
    font-size: 16px;
}

html, body {
    height: 100%;
}

html, body, nav, header, main, article, aside, footer, section, div {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #eeeadd;
    color: #000000;
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    display: grid;
    grid-template-columns: auto 150px minmax(auto,850px) 200px auto;
    grid-template-rows: min-content min-content auto min-content;
    grid-template-areas:
        "header header  header header header"
        ".      .       locnav locnav ."
        ".      globnav main   aside  ."
        "footer footer  footer footer footer";
    gap: 1em;
}

/* ------ Stil för navigeringen ----- */

#menuicon,
#menucheckbox {
    display: none;
}

nav {
    font-size: 0.8rem;
}
#globnav {
    grid-area: globnav;
}
#locnav {
    grid-area: locnav;
}

nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    gap: 1em;
}
#globnav ul {
    margin-top: 3em;
    flex-direction: column;
}
#locnav ul {
    flex-direction: row;
}

nav a {
    color: #000000;
    text-decoration: none;
    padding: 2px;
}
nav a:hover {
    background-color: #783c08;
    color: #eeeadd;
}
#globnav a {
    display: inline-block;
    transition: transform 0.4s;
}
#globnav a:hover {
    transform: scale(1.5);
}
#locnav a {
    padding: 6px;
    border: 1px solid #666666;
    border-radius: 8px;
}
#globnav a.thisPage {
    border-bottom: 2px solid #999999;
}
#locnav a.thisPage {
    background-color: #deaa5e;
}

/* ------ Stil för sidhuvudet ----- */

header {
    grid-area: header;
    text-align: center;
}

header h1,
header h2 {
    margin: 0.1em 0 0 0;
}

#frontPageHeader {
    background-image: url(../img/clouds.jpg);
    background-size: cover;
    background-position: bottom;
    height: 220px;
    transition: background-color 12s;
}
#frontPageHeader:hover {
    background-color: rgba(231, 140, 12, 0.609);
    background-blend-mode: color-burn;
}

/* ------ Stil för sidans huvudinnehåll ----- */

main {
    grid-area: main;
    padding: 10px;
}

main ul {
    list-style-type: square;
}

main a:link,
main a:visited {
    color: #000000;
}

main a:hover,
main a:active {
    color: #ab5c18;
}

h1,
h2,
h3 {
    color: crimson;
}

img {
    max-width: 100%;
}

#map {
    width: 220px;
    float: right;
    transition: transform 0.5s;
}
#map:hover {
    transform: scale(2);
}

.collage {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    grid-template-areas:
        "img1 img2 img3"
        "img4 img4 img3";
    gap: 20px;
}

.collage img:nth-of-type(1) {
    grid-area: img1;
}
.collage img:nth-of-type(2) {
   grid-area: img2;
}
.collage img:nth-of-type(3) {
   grid-area: img3;
}
.collage img:nth-of-type(4) {
   grid-area: img4;
}
.collage img {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    box-shadow: 8px 8px 12px #999999;
}

/* ------ Stil för sidospalten ----- */

aside {
    grid-area: aside;
}

aside section {
    font-size: 0.7rem;
    border: 1px solid #666666;
    border-radius: 15px;
    padding: 10px;
    margin: 15px;
    background-color: #dfd9c4;
}

/* ------ Stil för tabell i aside ----- */

aside table {
    border-collapse: collapse; /* Inget avstånd mellan tabellrutorna */
    background-color: #f5f3eb;
    font-size: 0.8rem;
    width: 90%;
}
aside caption {
    font-weight: bold;
    text-align: left;
    padding: 0.5em 0;
}
aside th, aside td {
    border: 1px solid #000;
    padding: 3px;
    text-align: left;
}
aside th {
    background-color: #e9caa8
}

/* ------ Stil för sidfoten ----- */

footer {
    grid-area: footer;
    border-top: 1px solid black;
    margin-top: 20px;
    padding: 10px;
    font-style: italic;
    font-size: 0.8rem;
}

/* ------ Media queries ----- */

@media screen and (max-width:900px) {
    body {
        grid-template-columns: auto 200px;
        grid-template-rows: min-content min-content  min-content auto min-content;
        grid-template-areas:
            "globnav globnav"
            "locnav  locnav"
            "header  header"
            "main    aside"
            "footer  footer";
        gap: 0;
    }
    nav {
        font-size: 1.1rem;
        padding: 4px;
    }
    #globnav ul,
    #locnav ul {
        margin-top: 0;
        flex-direction: row;
    }
    nav li {
        flex-basis: auto;
        flex-shrink: 0;
        flex-grow: 1;
    }
    nav a {
        background-color: #e9caa8;
        display: block;
    }
    #locnav a {
        padding: 2px;
        border: none;
        border-radius: 0;
    }
    #globnav a {
        display: block;
        transition: none;
    }
    #globnav a:hover {
        transform: none;
    }
    #globnav a.thisPage,
    #locnav a.thisPage {
        background-color: #deaa5e;
        border-bottom: none;
    }
}

@media screen and (max-width:720px) {
    body {
        grid-template-columns: auto;
        grid-template-rows: min-content min-content min-content auto min-content min-content;
        grid-template-areas:
            "globnav"
            "locnav"
            "header"
            "main"
            "aside"
            "footer";
    }
    aside table {
        width: 50%;
    }
}

@media screen and (max-width:600px) {
    body {
        grid-template-columns: auto;
        grid-template-rows: min-content min-content min-content auto min-content min-content;
        grid-template-areas:
            "globnav"
            "header"
            "main"
            "locnav"
            "aside"
            "footer";
    }
    #menuicon {
        background-image: url(../img/menuicon.png);
        width: 24px;
        height: 24px;
        display: inline-block;
        cursor: pointer;
    }
    #menucheckbox ~ div ul {
        transform: translateY(-200px);
        transition: transform 0.5s;
    }
    #menucheckbox:checked ~ div ul {
        transform: translateY(0px);
    }
    nav {
        padding: 0;
    }
    #globnav > div {
        position: absolute;
        overflow: hidden;
        width: 100%;
    }
    #globnav ul {
        flex-direction: column;
        gap: 4px;
        background-color: #eeeadd;
    }
    #locnav ul {
        flex-wrap: wrap;
        gap: 4px;
    }
    .collage {
        gap: 8px;
    }
    .collage img {
        box-shadow: 4px 4px 6px #999999;
    }
}

@media screen and (max-width:440px) {
    #map {
        float: none;
        display: block;
        margin: 0 auto;
    }
}