@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;
    /* globnav och locnav pleceras på olika ställen i layouten och är därför också inlagda i varsitt nav-element i HTML-koden. */
    /* På en del sidor finns inte locnav i HTML-koden och då visas inte den andra raden i layouten, eftersom dess höjd är min-content, som då blir 0. */
}

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

/* Menyikonen ska från början vara dold och visas sedan i en media query */
#menuicon,
#menucheckbox {
    display: none;
}

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

/* Här blir det många regler, eftersom en del ska vara lika både för global och lokal navigering, medan en del ska vara olika för globnav och locnav. */
nav ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex; /* Flexbox för placering av li-elementen */
    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;
}
#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;
}

/* ------ 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; /* Kartan ppå första sidan läggs till höger om texten */
}

.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 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) {
    /* Både globnav och locnav läggs överst */
    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;
    }
    /* Ändra det som tidigare lags in med regler för #globnav ul och #locnav ul. Då måste selektorerna här vara likadana, så det räcker inte med nav ul, som har en lägre specificering. */
    #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.thisPage,
    #locnav a.thisPage {
        background-color: #deaa5e;
        border-bottom: none;
    }
}

@media screen and (max-width:720px) {
    /* Ändring till en kolumn. */
    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";
    }
}

@media screen and (max-width:600px) {
    /* Locnav flyttas ner, så att den hamnar under innehållet i main. */
    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";
    }
    /* Visa "hamburgerikonen" för den globala navigeringen. */
    #menuicon {
        background-image: url(../img/menuicon.png);
        width: 24px;
        height: 24px;
        display: inline-block;
        cursor: pointer;
    }
    #menucheckbox ~ ul { /* Dölj menyn */
        display: none;
    }
    #menucheckbox:checked ~ ul { /* Visa menyn */
        display: flex;
    }
    #globnav ul {
        flex-direction: column;
        gap: 4px;
    }
    #locnav ul {
        flex-wrap: wrap; /* Länkarna kan delas upp på flera rader */
        gap: 4px;
    }

    .collage {
        gap: 8px;
    }
    .collage img {
        box-shadow: 4px 4px 6px #999999;
    }
}

@media screen and (max-width:440px) {
    #map {
        /* Ta bort float på kartan */
        float: none;
        /* Centrera bilden */
        display: block;
        margin: 0 auto;
    }
}