/* ==========================================================
   FAFA - LAYOUT.CSS
   Basislayout van de website
   ========================================================== */

/* =========================
   RESET
   ========================= */

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

/* =========================
   PAGINA
   ========================= */

body{
    font-family:Arial,Helvetica,sans-serif;
    background:#ff5a00;
}

#wrapper{
    max-width:1400px;
    margin:0 auto;
    padding:15px;
}

/* =========================
   HEADER
   ========================= */

#header{
    margin-bottom:20px;
}

.home-link{
    display:block;
    text-decoration:none;
    color:inherit;
}

/*
   Desktop:
   logo links
   tekst rechts
*/

.site-header{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:40px;
}

.logo-column,
.title-column{
    flex:1;
}

.logo-column{
    text-align:center;
}

.title-column{
    text-align:left;
}

.site-logo{
    display:block;
    width:100%;
    max-width:380px;
    height:auto;
    margin:0 auto;
}

.tagline{
    font-family:"Arial Black",Arial,sans-serif;
    font-size:42px;
    font-weight:900;
    line-height:1.05;
}

/* =========================
   HOOFDLAYOUT
   ========================= */

#main{
    display:grid;
    grid-template-columns:250px 1fr 250px;
    gap:20px;
}

#sidebar-left,
#sidebar-right,
#content{
    padding:20px;
    border-radius:10px;
    background:#ff5a00;
}

/* =========================
   DESKTOP
   ========================= */

@media (min-width:901px){

    /*
       Linkermenu blijft zichtbaar
    */

    #sidebar-left{
        position:sticky;
        top:20px;
        align-self:start;

        max-height:calc(100vh - 40px);
        overflow-y:auto;
    }

    /*
       Klok blijft zichtbaar
    */

    #sidebar-right{
        position:sticky;
        top:20px;
        align-self:start;
    }

}

/* =========================
   TABLET / MOBIEL
   ========================= */

@media (max-width:900px){

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

    .site-header{
        flex-direction:column;
        gap:15px;
    }

    .logo-column,
    .title-column{
        width:100%;
        text-align:center;
    }

    .site-logo{
        max-width:180px;
    }

    .tagline{
        font-size:26px;
        line-height:1.1;
    }

}

/* =========================
   KLEINE TELEFOONS
   ========================= */

@media (max-width:500px){

    .site-logo{
        max-width:220px;
    }

    .tagline{
        font-size:24px;
    }

}

/* ==========================================================
   BREAKPOINTS VOOR JAVASCRIPT
   ========================================================== */

body{
    --desktop-layout: 0;
}

@media (min-width:901px){

    body{
        --desktop-layout: 1;
    }

}