/* ------------------- Fonts - has to be on the top of the css file ------------------- */
/* @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,400italic&subset=latin,latin-ext); */
/* @import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400;1,700&display=swap'); */
/* @import url('https://fonts.googleapis.com/css?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap'); */
@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible+Next:ital,wght@0,200..800;1,200..800&display=swap');

/* ----------- CSS Color variables ------------- */
:root {
    --text-color: rgb(9,12,52);         /* Boja teksta */
    --header-bg-color: #46535C;         /* Glavna boja gornje trake */
    --nav-bg-color: #38424B;            /* Boja u nav traci, malo tamnija od gornje trake */
    --nav-hover-color: #e67e22;         /* Kad prijeđemo mišem preko nav trake */
    --nav-hover-darker-color: #d35400;  /* Donji rub kad prijeđemo mišem, malo tamnije od gornje boje */
    --link-color: #e67e22;              /* Boja linka */
    --link-bgcolor: #fff9f2;            /* Boja pozadine linka */

    --header-bg-color-right: color-mix(in srgb, var(--header-bg-color) 80%, white);
}

/* ------------------- Minimal reset ------------------- */
*,*::before,*::after { box-sizing: border-box; }
* { margin: 0; }
html:focus-within { scroll-behavior: smooth; }
body { min-height: 100vh; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; line-height: 1.65; }
img, svg { max-width:100%; display: block; }

/* ------------------- Style ------------------- */
body {
    /* font: 16px/24px 'Atkinson Hyperlegible', sans-serif; */
    font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Noto, Arial, Ubuntu, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    font-size: 18px;
    line-height: 27px;
    /*font-weight: 100;*/
    font-weight: 300;
    text-align: justify;
}

header > h1.title {
    font-size: 2.5em;
    /*font-weight: 200;*/
    font-weight: 400;
    text-shadow: 3px 3px 5px rgb(0,0,0);
    padding-left: 10px;
}

nav {
    text-transform: uppercase;
    letter-spacing: 2px;
    /*font-weight: 200;*/
    font-weight: 400;
    font-size: 0.85em;
}

aside h3 {
    font-size: 0.9em;
    /*font-weight: 200;*/
    font-weight: 400;
}

aside p {
    font-size: 0.8em;
    line-height: 1.3em;
}

aside p b {
    font-weight: 600;
}


aside h3:before { content: "\f071\0020"; font-family: FontAwesome; }

footer {
    /* font: 12px/16px 'Open Sans', sans-serif; */
    font-size: .8em;
    /*font-weight: 200;*/
    font-weight: 200;
    text-shadow: 1px 1px 1px #aaa;
}

footer a { text-decoration: none; }

#main h3 {
    font-size: 24px;
    /*font-weight: 200; */
    font-weight: 700;
    /*text-align: left;*/
}

#main b {
    font-weight: 600;
}

/* ------------------- Colors ------------------- */
body { color: var(--text-color); }

header .title {
    color: white;
}

header {
    background-color: var(--header-bg-color); /* ... Glavna boja gornje trake */
    /* background: linear-gradient(to bottom, var(--header-bg-color), var(--nav-bg-color)); */
}

footer, footer a {
    background: #ececec;
    color: var(--text-color);
}

footer { box-shadow: 0 -2px 2px #aaa;  }

nav {
    background-color: var(--nav-bg-color);         /* nav-bg-color ... Malo tamnija od glavne boja gornje trake */
    box-shadow: 0 5px 5px #aaa;
}

nav a:hover {
    background-color: var(--nav-hover-color);                /* nav-hover-color ... Kad mišem pređem preko navigacije, boja kutija s obavijestima i linkova */
    border-bottom: solid 3px var(--nav-hover-darker-color);  /* nav-bottom-color ... Malo tamnija od boje navigacije, mali rub na dnu */
    border-top: solid 3px var(--nav-hover-color);            /* nav-hover-color ... Kad mišem pređem preko navigacije, boja kutija s obavijestima i linkova */
}

nav a {
    border-bottom: solid 3px var(--nav-bg-color);  /* nav-bgcol ... Malo tamnija od glavne boja gornje trake */
    border-top: solid 3px var(--nav-bg-color);     /* nav-bgcol ... Malo tamnija od glavne boja gornje trake */
}

aside section {
    border: solid 1px var(--nav-hover-color);  /* nav-hover-color ... Kad mišem pređem preko navigacije, boja kutija s obavijestima i linkova */
    margin-bottom: 20px;
    box-shadow: 3px 3px 3px #aaa;
    border-radius: 3px;
}

aside section h3 {
    background-color: var(--nav-hover-color);         /* nav-hover ... Kad mišem pređem preko navigacije, boja kutija s obavijestima i linkova */
    margin: 0;
    padding: 5px 10px 5px 10px;
    color: white;
    text-align: left;
}

aside section p {
    padding: 0px 10px 0px 10px;
}

a {
    text-decoration: none;
    color: var(--link-color);                     /* nav-hover ... Kad mišem pređem preko navigacije, boja kutija s obavijestima i linkova */
    font-weight: 400;
}


a:hover { text-decoration: underline; }
nav a:hover { text-decoration: none; }

section a {
    background-color: var(--link-bgcolor);
} 

section a .fa, section a .fa-regular  {
    background-color: white;
}


a:hover { text-decoration: underline; }
nav a:hover { text-decoration: none; }

.warn {
    border: #7BA2BE solid 1px;
    border-left: #7BA2BE solid 5px;
    padding: 5px;
    border-radius: 3px;
}

/* ------------------- Layout ------------------- */


/* --- Mobile --- */
header { height: 150px; line-height: 150px; }
header .title { padding-left: 5px; margin: 20px 10px; text-align: center; display: inline-block; vertical-align: bottom; line-height: normal; }

#main, aside { margin-left: 5px; margin-right: 5px; }

#main, aside {
    margin-top: 10px;
    margin-bottom: 10px;
    padding: 10px;
}


/* --- Mid size --- */
@media screen and (min-width: 769px) {
    header .title   { padding-left: 20px; text-align: justify; }
    #main           { padding-left: 20px; padding-right: 20px; }
    aside           { padding-right: 20px; padding-left: 20px; }
}


#main section .tablicaNastava { width: 100%; min-width: 100%; font-size: 0.9em; line-height: 1.5em; border-collapse: collapse; }
#main section .tablicaNastava th { font-weight: 600; border-bottom-width: 2px; padding: 0px; text-align: center; }

#main section .tablicaNastava td
{
    text-align: center;
    border: solid 1px #555555;
    padding: 5px;
}

/* --- Ultra wide --- */
@media all and (min-width: 1140px) {
    header .title {
        max-width: 1026px;
        margin: 0 auto;
        display: block;
        height: 100%;
        line-height: 150px;
    }

    header .title span {
        margin: 20px 10px; text-align: center; display: inline-block; vertical-align: bottom; line-height: normal;
    }

    #wrapper-main-aside {
        max-width: 1026px;
        margin: 20px auto;
        display: table;
    }

    #main { display: table-cell; width: 65%;  }
    aside { display: table-cell; width: 30%;  }

    footer { clear: both; }
}


/* ------------------- Navigation ------------------- */

/* --- Wide --- */
nav > ul {
    list-style: none;
    margin: 0;

    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -webkit-flex-flow: row wrap;
    flex-flow: row wrap;

    -webkit-box-pack: center; -moz-box-pack: center;
    -ms-flex-pack: center;
    -webkit-justify-content: center;
    justify-content: flex-end;
}

nav a {
    text-decoration: none;
    display: block;
    padding: .9em;
    color: white;
}


/* --- Mid-size --- */
@media all and (max-width: 1140px) {
    nav > ul {
        -webkit-box-pack: space-around; -moz-box-pack: space-around;
        -ms-flex-pack: space-around;
        -webkit-justify-content: space-around;
        justify-content: space-around;
    }

    #wrapper-main-aside { display: flex; width: 100%; flex-wrap: wrap; }
    #main, aside { display: inline-block; width: 100%;}
    #main { order: 2; }
    aside { order: 1; }
}

/* --- Mobile --- */
@media all and (max-width: 600px) {
    nav > ul {
        -webkit-flex-flow: column wrap;
        flex-flow: column wrap;
        padding: 0;
    }

    nav a {
        text-align: center;
        padding: 10px;
        border-top: 1px solid rgba(255,255,255,0.3);
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }

    nav li:last-of-type a {
        border-bottom: none;
    }

    #wrapper-main-aside { display: flex; width: 100%; flex-wrap: wrap; }
    #main, aside { display: inline-block; width: 100%;}
    #main { order: 2; }
    aside { order: 1; }
}



/* ------------------- Footer ------------------- */
footer {
    text-align: center; padding: 20px;
}

#wrapper-footer-inner { margin: 0 auto; display: inline-block; min-height: 100%; line-height: normal; vertical-align: middle;}

footer .logo { display: table-cell; margin-right: 10px; vertical-align: middle;  }
footer .logo img { width: 50px; height: 50px; vertical-align: middle; }
footer .copyright { display: table-cell; vertical-align: middle; }

/* --- Other --- */
.lineHeight2x { line-height: 2em; }

div.spacer { min-height: 20px; }