/* ========================================================================== */
/* ROOT / GLOBAL                                                              */
/* ========================================================================== */

:root{
    /* Page dimensions */
    --sidebar-width: 212px;
    --rightbar-width: 180px;

    /* Content dimensions */
    --content-max-width: 1900px;

    /* General spacing */
    --page-gap: 0px;
    --content-gap: 20px;
    --row-gap: 5px;

    /* Background-Colors */
    --bgc-body: #f3efda;
    --bgc-main: rgba(243, 239, 221, 0.75);
    --bgc-bars: rgba(243, 239, 221, 0.2);
    --bgc-nav: rgba(243, 239, 221, 0.7);
    --bgc-navheading: rgba(0, 0, 0, 0.5);
    --bgc-heading: rgba(243, 239, 221, 0.5);
    --bgc-div: #fffdf2;
    --bgc-text: #fffdf2;
    --bgc-shade: #fffdf2;

    /* Text-color */
    --txtcolor-navtext: yellow;

    /* Borders */
    --border-main: 0px solid rgba(0, 0, 0, 0.8);
    --border-radius: 1px;

    /* Fonts */
    --headerfont: "Times New Roman", Times, Baskerville, Georgia, serif;
    --infofont: "Times New Roman", Times, Baskerville, Georgia, serif;
    --headingfont: "Times New Roman", Times, Baskerville, Georgia, serif;
    --contentfont: "Times New Roman", Times, Baskerville, Georgia, serif;

    /* List variables */
    --listgap: 10px;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    scroll-behavior: smooth;
}

html,
body{
    width: 100%;
    min-height: 100%;
    overflow: hidden;
}

body{
    height: 100vh;

    background-image: url(../img/backgrund_test2.jpeg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-attachment: fixed;

    font-family: Arial, Helvetica, sans-serif;
    text-align: center;

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr)
        var(--rightbar-width);

    grid-template-rows:
        auto
        minmax(0, 1fr)
        auto;

    grid-template-areas:
        "navbar navbar navbar"
        "leftbar main rightbar"
        "footer footer footer";

    gap: var(--page-gap);
}


/* ========================================================================== */
/* LINKS                                                                      */
/* ========================================================================== */

a{
    color: rgb(0, 0, 0);
    text-decoration: none;
}

a:visited{
    color: rgb(44, 42, 42);
}

a:hover,
a:active{
    color: #ffffff;
}


/* ========================================================================== */
/* NAVBAR                                                                     */
/* ========================================================================== */

#navdiv{
    grid-area: navbar;

    position: sticky;
    top: 0;
    z-index: 100;

    width: 100%;

    display: grid;

    grid-template-columns:
        var(--sidebar-width)
        minmax(0, 1fr)
        var(--rightbar-width);

    grid-template-areas:
        "logo navcontent leftcontent";

    align-items: stretch;

    background-color: var(--bgc-bars);
    border: var(--border-main);

    margin-bottom: var(--row-gap);
}


/* -------------------------------------------------------------------------- */
/* Logo                                                                       */
/* -------------------------------------------------------------------------- */

#logodiv{
    grid-area: logo;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px;

    background-color: var(--bgc-bars);
    border-right: var(--border-main);
}

.logo{
    display: block;

    width: 110px;
    height: 110px;

    object-fit: contain;

    border: 1px solid black;
    border-radius: 50%;
}


/* -------------------------------------------------------------------------- */
/* Navbar text                                                                */
/* -------------------------------------------------------------------------- */

#navcontentdiv{
    grid-area: navcontent;

    display: flex;
    align-items: center;
    justify-content: center;

    min-width: 0;

    background-color: var(--bgc-nav);

    font-family: var(--headerfont);

    border-radius: 5px;
}

#navtxtdiv{
    width: fit-content;

    font-size: clamp(20px, 2vw, 32px);
    line-height: 1.25;

    padding: 10px 20px;

    border: 2px solid black;
    border-radius: 5px;

    background-color: var(--bgc-navheading);
    color: var(--txtcolor-navtext);
}


/* ========================================================================== */
/* LEFT SIDEBAR                                                               */
/* ========================================================================== */

#leftbardiv{
    grid-area: leftbar;

    align-self: stretch;

    background-color: var(--bgc-bars);

    border-left: var(--border-main);
    border-right: var(--border-main);
    border-bottom: var(--border-main);

    padding: 0px 5px;

    overflow-y: auto;
}


/* -------------------------------------------------------------------------- */
/* Sidebar lists                                                              */
/* -------------------------------------------------------------------------- */

.sbul{
    width: 100%;

    display: flex;
    flex-direction: column;

    gap: var(--listgap);

    list-style: none;

    margin: 0 0 20px 0;
    padding: 0;
}

.sbli{
    width: 100%;

    display: flex;
    align-items: center;
    justify-content: flex-start;

    gap: 8px;

    padding: 8px;

    background-color: var(--bgc-shade);

    text-align: left;
}

.sbli:hover{
    background-color: rgba(82, 199, 245, 1);
}

.sbli img{
    width: 22px;
    height: 22px;

    flex: 0 0 auto;

    object-fit: contain;
}

.sbp{
    white-space: normal;
}


/* ========================================================================== */
/* RIGHT SIDEBAR                                                              */
/* ========================================================================== */

#rightbardiv{
    grid-area: rightbar;

    align-self: stretch;

    padding: 0px 5px;

    background-color: var(--bgc-bars);

    border-left: var(--border-main);
    border-right: var(--border-main);
    border-bottom: var(--border-main);

    overflow-y: auto;
}

#rightbardiv ul{
    list-style: none;

    display: flex;
    flex-direction: column;

    gap: 5px;
}


/* ========================================================================== */
/* MAIN                                                                       */
/* ========================================================================== */

#maindiv{
    grid-area: main;

    min-width: 0;
    min-height: 0;

    width: 100%;

    padding: 20px;

    background-color: var(--bgc-main);

    border-bottom: var(--border-main);
    border-radius: 5px;

    overflow-y: auto;
    overflow-x: hidden;
}


/* ========================================================================== */
/* BYDYNAMIKK INTRODUCTION                                                    */
/* ========================================================================== */

#bdinfodiv{
    width: min(100%, var(--content-max-width));

    margin: 0 auto 20px auto;
    padding: 10px;

    display: grid;

    grid-template-columns:
        minmax(300px, 1fr)
        minmax(400px, 1.6fr);

    gap: 20px;

    align-items: start;

    background-color: var(--bgc-div);

    border: var(--border-main);
    border-radius: var(--border-radius);
}


/* -------------------------------------------------------------------------- */
/* Intro text                                                                 */
/* -------------------------------------------------------------------------- */

#bdtextdiv{
    width: 100%;
    min-width: 0;

    padding: 10px;

    background-color: var(--bgc-text);

    border: var(--border-main);
    border-radius: var(--border-radius);

    font-family: var(--infofont);
}


/* ========================================================================== */
/* TEXT CONTAINERS                                                            */
/* ========================================================================== */

.txtcontainer{
    line-height: 1.7;

    padding: 15px;

    border: var(--border-main);
    border-radius: var(--border-radius);

    font-family: var(--infofont);

    text-align: justify;
}

.txtcontainer p{
    margin-bottom: 12px;
}

.txtcontainer p:last-child{
    margin-bottom: 0;
}

.txtcontainer ul{
    list-style-type: square;
    list-style-position: outside;

    padding-left: 30px;

    text-align: left;
}

.txtcontainer li{
    margin-bottom: 6px;
}


/* ========================================================================== */
/* OPTION CARDS                                                               */
/* ========================================================================== */

#bdoptionsdiv{
    width: 100%;
    min-width: 0;

    padding: 10px;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(200px, 1fr));

    gap: 10px;

    background-color: var(--bgc-text);

    border: var(--border-main);
    border-radius: var(--border-radius);
}

.selectable{
    width: 100%;

    position: relative;

    aspect-ratio: 2 / 1;

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;

    border: 1px solid rgb(161, 157, 157);
    border-radius: var(--border-radius);

    cursor: pointer;

    transition:
        transform 0.15s ease,
        box-shadow 0.15s ease;
}

.selectable .bdoi{
    position: absolute;
    inset: 0;

    display: block;
}

.selectable:hover{
    transform: translateY(-2px);

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}


/* -------------------------------------------------------------------------- */
/* Individual option images                                                   */
/* -------------------------------------------------------------------------- */

#apoptiondiv{background-image: url(../img/illpic_arealplan.JPG);}
#naoptiondiv{background-image: url(../img/illpic_naering.JPG);}
#mkoptiondiv{background-image: url(../img/illpic_mbkart.JPG);}
#mapoptiondiv{background-image: url(../img/illpic_intkart.JPG);}
#umoptiondiv{background-image: url(../img/illpic_miljo.JPG);}
#dboptiondiv{background-image: url(../img/illpic_dbase.JPG);}

/* ========================================================================== */
/* MAIN CONTENT                                                               */
/* ========================================================================== */

#contentdiv{
    width: min(100%, var(--content-max-width));

    margin: 0 auto;

    display: flex;
    flex-direction: column;

    gap: 20px;
}


/* ========================================================================== */
/* INTRODUCTION / DESCRIPTION                                                 */
/* ========================================================================== */

#desctxtdiv{
    width: 100%;

    padding: 10px;

    background-color: var(--bgc-text);

    border: var(--border-main);
    border-radius: var(--border-radius);
}

.headingtxt{
    width: 100%;

    padding: 8px 10px;

    background-color: var(--bgc-heading);

    border: var(--border-main);
    border-radius: var(--border-radius);

    font-family: var(--headingfont);
}


/* ========================================================================== */
/* INFORMATION SECTIONS - GENERAL                                             */
/* ========================================================================== */

/*
    All information boxes use the same outer structure:

    Heading
    Introduction
    Content

    The internal content layout is controlled by a modifier class:

    .infobox--split
        Text | Picture

    .infobox--stacked
        Text A | Text B
        Picture
*/

.infobox{
    width: 100%;
    min-width: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

    padding: 10px;

    background-color: var(--bgc-div);

    border: var(--border-main);
    border-radius: var(--border-radius);

    font-family: var(--contentfont);
}


/* -------------------------------------------------------------------------- */
/* Infobox introduction                                                       */
/* -------------------------------------------------------------------------- */

.infodescription{
    width: 100%;
    min-width: 0;

    padding: 15px;

    background-color: var(--bgc-text);

    border: var(--border-main);
    border-radius: var(--border-radius);

    line-height: 1.7;

    text-align: justify;
}

.infodescription p{
    margin-bottom: 12px;
}

.infodescription p:last-child{
    margin-bottom: 0;
}


/* -------------------------------------------------------------------------- */
/* Infobox content                                                            */
/* -------------------------------------------------------------------------- */

.infocontent{
    width: 100%;
    min-width: 0;

    display: grid;

    gap: var(--content-gap);

    align-items: stretch;
}


/* -------------------------------------------------------------------------- */
/* Detailed text                                                              */
/* -------------------------------------------------------------------------- */

.infotext{
    width: 100%;
    min-width: 0;

    padding: 15px;

    background-color: var(--bgc-text);

    border: var(--border-main);
    border-radius: var(--border-radius);

    line-height: 1.7;

    text-align: justify;
}

.infotext p{
    margin-bottom: 12px;
}

.infotext p:last-child{
    margin-bottom: 0;
}

.infotext h3{
    margin-bottom: 8px;
}

.infotext h3:not(:first-child){
    margin-top: 15px;
}

.infotext ul{
    list-style-type: square;
    list-style-position: outside;

    padding-left: 30px;

    text-align: left;
}

.infotext li{
    margin-bottom: 6px;
}


/* ========================================================================== */
/* INFOBOX LAYOUT - TEXT | PICTURE                                            */
/* ========================================================================== */

.infobox--split .infocontent{
    grid-template-columns:
        minmax(0, 1fr)
        minmax(0, 1fr);
}


/* ========================================================================== */
/* INFOBOX LAYOUT - TEXT A | TEXT B / PICTURE                                 */
/* ========================================================================== */

.infobox--stacked .infocontent{
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.infobox--stacked .descpic{
    grid-column: 1 / -1;
}

/* ========================================================================== */
/* INFOBOX LAYOUT - STACKED WITH HORIZONTAL IMAGES                             */
/* ========================================================================== */

/*
    Same content layout as .infobox--stacked,
    but figures are arranged horizontally.
*/

.infobox--stacked--horimg .infocontent {
    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: var(--content-gap);
}

/* Picture container spans both content columns. */

.infobox--stacked--horimg .descpic {
    grid-column: 1 / -1;

    display: grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap: 20px;

    align-items: start;
}

/* Each figure occupies one column. */

.infobox--stacked--horimg .indexfigure {
    width: 100%;
    min-width: 0;
    margin: 0;
}

/* Preserve original image proportions. */

.infobox--stacked--horimg .indexfigure img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
}


/* ========================================================================== */
/* INFORMATION SECTION PICTURES                                               */
/* ========================================================================== */

.descpic{
    width: 100%;
    min-width: 0;
    min-height: 0;

    display: flex;
    flex-direction: column;

    gap: 10px;

    align-items: center;
    justify-content: center;

    padding: 10px;

    border: var(--border-main);
    border-radius: var(--border-radius);

    overflow: hidden;
}

.descpic img{
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}


/* -------------------------------------------------------------------------- */
/* Figures and captions                                                       */
/* -------------------------------------------------------------------------- */

.indexfigure{
    width: 100%;

    margin: 0;
}

.indexfigure img{
    display: block;

    width: 100%;
    height: auto;

    object-fit: contain;
}

.indexfigure figcaption{
    margin-top: 6px;

    padding: 4px;

    font-size: 14px;
    line-height: 1.4;

    text-align: center;
}


/* ========================================================================== */
/* BACK TO TOP BUTTON                                                         */
/* ========================================================================== */

#myBtn0,
#myBtn1,
#myBtn2,
#myBtn3,
#myBtn4,
#myBtn5{
    width: fit-content;

    margin-top: 15px;

    padding: 10px 14px;

    background-color: rgb(161, 187, 241);
    color: white;

    border: none;
    border-radius: 5px;

    cursor: pointer;
}

#myBtn0:hover,
#myBtn1:hover,
#myBtn2:hover,
#myBtn3:hover,
#myBtn4:hover,
#myBtn5:hover{
    background-color: #a2e3ee;
}


/* ========================================================================== */
/* FOOTER                                                                     */
/* ========================================================================== */

#footerdiv{
    grid-area: footer;

    width: 100%;
    min-height: 10px;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 10px 20px;

    background-color: var(--bgc-bars);

    border-top: var(--border-main);
}

#footercontdiv{
    width: min(100%, var(--content-max-width));
}


/* ========================================================================== */
/* RESPONSIVE - MEDIUM SCREENS                                                */
/* ========================================================================== */

@media (max-width: 1100px){

    :root{
        --sidebar-width: 150px;
        --rightbar-width: 150px;
    }

    #bdinfodiv{
        grid-template-columns: 1fr;
    }

    /*
        Both information-box layouts collapse to one column.
        Heading and introduction are unaffected.
    */

    .infobox--split .infocontent,
    .infobox--stacked .infocontent,
    .infobox--stacked--horimg .infocontent{
        grid-template-columns: 1fr;
    }

    .infobox--stacked--horimg .descpic {
    grid-column: auto;
    }

    .infobox--stacked .descpic{
        grid-column: auto;
    }

    .descpic{
        min-height: 350px;
    }
}


/* ========================================================================== */
/* RESPONSIVE - SMALL SCREENS                                                 */
/* ========================================================================== */

@media (max-width: 800px){

    body{
        grid-template-columns: 1fr;

        grid-template-rows:
            auto
            auto
            auto
            auto
            auto;

        grid-template-areas:
            "navbar"
            "leftbar"
            "main"
            "rightbar"
            "footer";
    }
    
    .infobox--stacked--horimg .descpic {
    grid-template-columns: 1fr;
    }

    #navdiv{
        position: relative;

        grid-template-columns:
            100px
            1fr;

        grid-template-areas:
            "logo navcontent";
    }

    #logodiv{
        padding: 5px;
    }

    .logo{
        width: 80px;
        height: 80px;
    }

    #leftbardiv,
    #rightbardiv{
        position: relative;
        top: auto;

        width: 100%;
        min-height: 0;
    }

    .sbul{
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .sbli{
        width: auto;
    }

    #maindiv{
        padding: 10px;
    }

    #bdoptionsdiv{
        grid-template-columns: 1fr;
    }
}