/* =====================================================
   PROJEKT RASP
   SKUPNA GLAVA - HEADER.CSS

   Namen:
   - enotna glava za vse spletne strani
   - slikovni logotip na levi strani
   - navigacija O PROGRAMU, KONTAKT in POMOČ
   - spustni meni za pisna in video navodila

   Datoteka:
   web_pages/static/css/header.css
   ===================================================== */


/* =====================================================
   OSNOVNE NASTAVITVE
   ===================================================== */

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    font-family: Arial, sans-serif;
}


/* =====================================================
   OKNO 2 - SKUPNA ZGORNJA NAVIGACIJSKA VRSTICA
   ===================================================== */

.okno-2 {
    width: 100%;
    height: 50px;

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

    padding: 0 60px;

    background-color: #FFFFFF;
    border-bottom: 1px solid #E8F3F1;

    position: relative;
    z-index: 1000;
}


/* =====================================================
   LOGOTIP NA LEVI STRANI
   ===================================================== */

.logo {
    display: flex;
    align-items: center;

    flex-shrink: 0;

    text-decoration: none;
}

.logo img {
    display: block;

    width: auto;
    height: 50px;

    max-width: 180px;

    object-fit: contain;
}


/* =====================================================
   GLAVNI NAVIGACIJSKI MENI
   ===================================================== */

.meni {
    display: flex;
    align-items: center;

    gap: 35px;

    color: #333333;
    font-size: 15px;
}


/* =====================================================
   POVEZAVE V NAVIGACIJI
   ===================================================== */

.meni > a {
    display: inline-flex;
    align-items: center;

    min-height: 40px;

    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.15s ease;
}

.meni > a:hover {
    color: #0C9488;
}


/* =====================================================
   POMOČ - OSNOVNI ELEMENT SPUSTNEGA MENIJA
   ===================================================== */

.pomoc {
    position: relative;

    display: flex;
    align-items: center;
}


/* =====================================================
   GUMB POMOČ
   ===================================================== */

.pomoc-gumb {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    gap: 7px;

    min-height: 40px;
    padding: 0;

    border: none;
    background: transparent;

    color: #333333;

    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    white-space: nowrap;

    cursor: pointer;

    transition: color 0.15s ease;
}

.pomoc-gumb:hover,
.pomoc-gumb:focus-visible {
    color: #0C9488;
}


/* =====================================================
   PUŠČICA PRI GUMBU POMOČ
   ===================================================== */

.pomoc-puscica {
    display: inline-block;

    font-size: 12px;

    transition: transform 0.15s ease;
}


/* Obrnjena puščica, ko je meni odprt. */

.pomoc-gumb[aria-expanded="true"] .pomoc-puscica {
    transform: rotate(180deg);
}


/* =====================================================
   SPUSTNI MENI POMOČ
   ===================================================== */

.pomoc-meni {
    position: absolute;

    top: 100%;
    right: 0;

    min-width: 190px;
    margin-top: 5px;
    padding: 6px 0;

    background-color: #FFFFFF;

    border: 1px solid #DDEBE8;
    border-radius: 7px;

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}


/* Skriti meni ne sme zavzemati prostora ali biti prikazan. */

.pomoc-meni[hidden] {
    display: none !important;
}


/* =====================================================
   POVEZAVE V SPUSTNEM MENIJU
   ===================================================== */

.pomoc-meni a {
    display: block;

    padding: 11px 16px;

    color: #333333;

    font-family: Arial, sans-serif;
    font-size: 14px;

    text-decoration: none;
    white-space: nowrap;

    transition:
        background-color 0.15s ease,
        color 0.15s ease;
}

.pomoc-meni a:hover,
.pomoc-meni a:focus-visible {
    background-color: #F1FDFB;
    color: #0C9488;
}


/* =====================================================
   DOSTOPNOST - VIDEN FOKUS TIPKOVNICE
   ===================================================== */

.logo:focus-visible,
.meni a:focus-visible,
.pomoc-gumb:focus-visible,
.pomoc-meni a:focus-visible {
    outline: 2px solid #0C9488;
    outline-offset: 3px;
}


/* =====================================================
   PRILAGODITEV ZA MANJŠE ZASLONE
   ===================================================== */

@media (max-width: 700px) {

    .okno-2 {
        min-height: 60px;
        height: auto;

        padding: 10px 18px;

        gap: 18px;
        flex-wrap: wrap;
    }

    .logo img {
        height: 32px;
        max-width: 130px;
    }

    .meni {
        gap: 16px;
        flex-wrap: wrap;

        font-size: 13px;
    }

    .meni > a,
    .meni-neaktivno,
    .pomoc-gumb {
        font-size: 13px;
    }

    .pomoc-meni {
        right: 0;
    }
}


/* =====================================================
   KONEC HEADER.CSS
   ===================================================== */

/* Začasno neaktivne navigacijske možnosti */
.meni-neaktivno { color: #333333; white-space: nowrap; }
.pomoc-neaktivno { display: block; padding: 11px 16px; color: #777777; font-size: 14px; white-space: nowrap; }

/* =====================================================
   LEVI DEL GLAVE - LOGOTIP IN DOMOV
   ===================================================== */

.glava-levo {
    display: flex;
    align-items: center;
    gap: 35px;
    flex-shrink: 0;
}

/* Povezava DOMOV */

.domov-gumb {
    display: inline-flex;
    align-items: center;

    min-height: 40px;

    color: #333333;
    font-family: Arial, sans-serif;
    font-size: 15px;
    font-weight: 400;

    text-decoration: none;
    white-space: nowrap;

    transition: color 0.15s ease;
}

/* Barva ob prehodu miške */

.domov-gumb:hover {
    color: #0C9488;
}

/* Fokus pri uporabi tipkovnice */

.domov-gumb:focus-visible {
    outline: 2px solid #0C9488;
    outline-offset: 3px;
}

/* Manjši zasloni */

@media (max-width: 700px) {
    .glava-levo {
        gap: 16px;
    }

    .domov-gumb {
        font-size: 13px;
    }
}