/* Osnovne nastavitve za poravnavo robov in velikosti */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html, body {
    height: 100%;
    font-family: Verdana, Arial, sans-serif;
    font-size: 10pt;
    color: #000000;
}

/* Postavitev celotne strani v dveh vrsticah (Grid) */
#layout-container {
    display: grid;
    grid-template-rows: auto 1fr; 
    height: 100vh;                    
}

/* OBLIKOVANJE ZGORNJEGA MENIJA */

#zgornji-meni {
    background-color: #2c3e50;
    color: #fff;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Privzeto skrit hamburger gumb za PC */
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px 10px;
}

/* Osrednji meni se raztegne in centrira svoje elemente */
#zgornji-meni ul.glavni-meni {
    list-style: none;
    display: flex;  
    flex: 1;
    justify-content: center;
}

#zgornji-meni .logo {
    font-weight: bold;
    font-size: 1.2rem;
    color: #fff;
    margin-right: 30px;
}

#zgornji-meni li {
    position: relative;  
}

#zgornji-meni ul li a {
    text-decoration: none;
    color: #ecf0f1;
    font-weight: bold;
    display: block;
    padding: 18px 15px;
    transition: background-color 0.2s;
}

#zgornji-meni ul li a:hover {
    background-color: #34495e;
    color: #fff;
}

/* OBLIKOVANJE PODNIVOJA (Spustni meni - Dropdown za PC) */
#zgornji-meni ul.podmeni {
    display: none;                 
    position: absolute;            
    top: 100%;                     
    left: 0;
    background-color: #34495e;
    min-width: 200px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.15);
    flex-direction: column;        
    z-index: 100;
    list-style: none;
}

#zgornji-meni li.ima-podnivo:hover ul.podmeni {
    display: flex;
}

#zgornji-meni ul.podmeni li {
    width: 100%;
}

#zgornji-meni ul.podmeni li a {
    text-decoration: none;
    color: #ecf0f1;
    font-size: 0.95rem;
    display: block;
    padding: 12px 15px;
    transition: background-color 0.2s;
}

#zgornji-meni ul.podmeni li a:hover {
    background-color: #4e6d8c;
    color: #fff;
}

/* CENTRIRANJE GLAVNE VSEBINE */
#glavna-vsebina {
    padding: 30px 20px;
    overflow-y: auto;  
    background-color: #ffffff;
    
    display: flex;
    flex-direction: column;
    align-items: center; 
}

#glavna-vsebina > * {
    width: 100%;
    max-width: 850px;
    margin-left: auto !important;
    margin-right: auto !important;
}

#glavna-vsebina table {
    margin-left: auto !important;
    margin-right: auto !important;
}

/* TIPOGRAFIJA IN STILI ZA VSEBINO */
#glavna-vsebina p {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: #000000;
    margin-bottom: 8px;
}

#glavna-vsebina h3 {
    font-family: Verdana, sans-serif;
    color: #000000;
    font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    margin-bottom: 5px;
}

#glavna-vsebina h4 {
    font-family: Verdana, sans-serif;
    color: #B13A43;
    font-size: 13px;
    font-weight: bold;
    margin-top: 20px;
    margin-bottom: 8px;
}

#glavna-vsebina h5 {
    font-family: Verdana, sans-serif;
    color: #000000;
    font-size: 10pt;
    font-weight: bold;
    margin-top: 12px;
    margin-bottom: 3px;
}

#glavna-vsebina ul, #glavna-vsebina li {
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    margin-left: 20px;
    margin-bottom: 5px;
}

#glavna-vsebina a:link, #glavna-vsebina a:visited {
    font-weight: normal;
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: #B13A43;
    text-decoration: none;
}

#glavna-vsebina a:hover {
    font-weight: normal;
    font-family: Verdana, sans-serif;
    font-size: 10pt;
    color: #B13A43;
    text-decoration: underline;
}

/* OBLIKOVANJE ZASTAVIC ZA JEZIK */
.jezik-preklopnik img {
    width: 30px; 
    height: auto;
    vertical-align: middle;
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.2s, opacity 0.2s;
    opacity: 0.8;
}

.jezik-preklopnik img:hover {
    transform: scale(1.1); 
    opacity: 1.0;
}

@media print {
    .noprint {
        display: none !important;
    }
}

/* ================================================= */
/* MOBILNA PRILAGODITEV                               */
/* ================================================= */

@media screen and (max-width: 768px) {
    #layout-container {
        grid-template-rows: auto 1fr;
        height: auto;
        min-height: 100vh;
    }

    #zgornji-meni {
        flex-direction: row;
        flex-wrap: wrap;
        padding: 10px 15px;
        justify-content: space-between;
        align-items: center;
    }

    #zgornji-meni .logo {
        margin-right: 0;
        margin-bottom: 0;
        font-size: 1rem;
    }

    /* Prikaz gumba za hamburger meni na mobitelu */
    .mobile-menu-btn {
        display: block;
    }

    /* Privzeto skrit glavni meni na telefonu */
    #zgornji-meni ul.glavni-meni {
        display: none;
        width: 100%;
        flex-direction: column;
        margin-top: 10px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
    }

    /* Prikaz glavnega menija, ko je aktiven razred .odprto */
    #zgornji-meni ul.glavni-meni.odprto {
        display: flex;
    }

    #zgornji-meni ul li {
        width: 100%;
        text-align: left;
    }

    #zgornji-meni ul li a {
        padding: 12px 10px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    /* Na mobilnih napravah so podnivoji PRIVZETO SKRITI */
    #zgornji-meni ul.podmeni {
        display: none !important;
        position: static;
        box-shadow: none;
        width: 100%;
        background-color: #243342;
        flex-direction: column;
    }

    /* Ko uporabnik tapne kategorijo in dobi razred .odprt-podnivo, se podnivo prikaže */
    #zgornji-meni li.ima-podnivo.odprt-podnivo > ul.podmeni {
        display: flex !important;
    }

    #zgornji-meni ul.podmeni li a {
        padding-left: 25px;
        font-size: 0.9rem;
    }

    #glavna-vsebina {
        padding: 15px 10px;
        align-items: stretch;
    }

    #glavna-vsebina > * {
        max-width: 100% !important;
    }

    #glavna-vsebina table, 
    table.avditorne, 
    table.labskupine, 
    table.komentarji, 
    table.vsebina, 
    table.ustni {
        width: 100% !important;
        max-width: 100% !important;
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }

    #glavna-vsebina td, #glavna-vsebina th {
        white-space: normal;
        font-size: 9pt;
        padding: 6px;
    }

    #glavna-vsebina img {
        max-width: 100%;
        height: auto;
    }
}