Popravljen desktop meni

css/components/_buttons.css

@@ -26,6 +26,7 @@
     text-decoration: none;
     display: inline-block;
     text-align: center;
+    white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelamljanje besedila */
 }
 
 /* 2. Različice gumbov */

css/layout/_header.css

@@ -6,9 +6,10 @@
  * Ta datoteka vsebuje stile za glavo (header) spletne strani.
  *
  * 1. Glavni kontejner za glavo
- * 2. Vsebina glave (logotip, namizna navigacija)
+ * 2. Vsebina glave (logotip, navigacija)
  * 3. Gumbi in akcije v glavi (vključno z izbiro jezika)
- * 4. Stili za mobilno glavo in navigacijo
+ * 4. Stili za namizni "dropdown" meni (PRENOVLJEN DIZAJN)
+ * 5. Stili za mobilno glavo in "accordion" meni (optimizirano)
  */
 
 /* 1. Glavni kontejner za glavo */
@@ -25,12 +26,20 @@
     z-index: 1000;
 }
 
-/* 2. Vsebina glave (logotip, namizna navigacija) */
+/* 2. Vsebina glave (logotip, navigacija) */
 
 .header-content {
     display: flex;
     align-items: center;
-    gap: 40px;
+    flex-grow: 1; 
+    gap: 48px;
+}
+
+/* KLJUČNA SPREMEMBA: Navigacijskemu ovoju damo možnost rasti, da zapolni prostor */
+.header-content > nav {
+    flex-grow: 1;
+    display: flex;
+    height: 100%;
 }
 
 .logo-link .logo-img {
@@ -38,17 +47,55 @@
    width: auto;
 }
 
-.navigation.desktop-nav {
+/* Osnovna struktura navigacije (UL/LI) */
+.navigation {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     display: flex;
-    gap: 32px;
+    align-items: center;
+    height: 100%;
+    width: 100%; /* Dovolimo, da seznam zasede celotno širino <nav> elementa */
 }
 
-.navigation a {
+/* KLJUČNA SPREMEMBA: Poravnamo elemente na desno znotraj razpoložljivega prostora */
+.navigation.desktop-nav {
+    justify-content: flex-end; 
+}
+
+.navigation .menu-item {
+    position: relative;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+
+/* Povezave v glavnem meniju - z več razmika */
+.navigation > .menu-item > a {
     text-decoration: none;
     color: #667085;
     font-weight: 600;
     font-size: 16px;
-    padding: 4px 0;
+    padding: 0 20px;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    transition: color 0.2s ease-in-out;
+    white-space: nowrap; /* KLJUČNA SPREMEMBA: Prepreči prelom besedila */
+}
+
+.navigation > .menu-item > a:hover {
+    color: #101828;
+}
+
+/* Puščica za podmeni */
+.navigation .menu-item-has-children > a::after {
+    content: '\f078';
+    font-family: 'Font Awesome 6 Free';
+    font-weight: 900;
+    font-size: 12px;
+    transition: transform 0.3s ease-in-out;
 }
 
 /* 3. Gumbi in akcije v glavi */
@@ -56,41 +103,31 @@
 .navigation-actions {
     display: flex;
     align-items: center;
-    gap: 24px;
+    gap: 12px;
+    flex-shrink: 0; /* Preprečimo, da bi se gumbi stisnili */
 }
 
-/* Stili za izbiro jezika */
+/* Stili za izbiro jezika (ostanejo enaki) */
 .language-selector {
     position: relative;
     cursor: pointer;
 }
-
 .current-lang {
     display: flex;
     align-items: center;
     gap: 8px;
     color: #646E82;
-    padding: 8px; /* Dodan enakomeren padding za lažji klik */
-    border-radius: 6px; /* Rahlo zaobljeni robovi za lepši videz */
+    padding: 8px;
+    border-radius: 6px;
     transition: background-color 0.2s ease-in-out;
 }
-
-.current-lang:hover {
-    background-color: #F9FAFB; /* Svetlo ozadje ob prehodu z miško */
-}
-
-.current-lang span {
-    font-weight: 600;
-}
-
-.current-lang .fa-chevron-down {
-    transition: transform 0.3s ease-in-out; /* Animacija puščice */
-}
-
+.current-lang:hover { background-color: #F9FAFB; }
+.current-lang span { font-weight: 600; }
+.current-lang .fa-chevron-down { transition: transform 0.3s ease-in-out; }
 .lang-dropdown {
-    display: block; /* Meni je vedno v DOM-u, vidnost nadzorujemo drugače */
+    display: block;
     position: absolute;
-    top: calc(100% + 8px); /* Postavi se pod sprožilec z majhnim odmikom */
+    top: calc(100% + 8px);
     right: 0;
     background-color: #FFFFFF;
     border: 1px solid #EAECF0;
@@ -99,24 +136,17 @@
     padding: 8px;
     z-index: 1001;
     min-width: 180px;
-    /* Tranzicije za gladek prikaz in izginotje */
     opacity: 0;
     visibility: hidden;
     transform: translateY(10px);
     transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
 }
-
-/* Stanje, ko je menjalnik jezika odprt (aktiven) */
 .language-selector.active .lang-dropdown {
     opacity: 1;
     visibility: visible;
     transform: translateY(0);
 }
-
-.language-selector.active .current-lang .fa-chevron-down {
-    transform: rotate(180deg); /* Zasuka puščico navzgor */
-}
-
+.language-selector.active .current-lang .fa-chevron-down { transform: rotate(180deg); }
 .lang-dropdown a {
     display: block;
     padding: 10px 12px;
@@ -127,28 +157,72 @@
     white-space: nowrap;
     border-radius: 6px;
 }
+.lang-dropdown a:hover { background-color: #F9FAFB; }
 
-.lang-dropdown a:hover {
+
+/* 4. Stili za namizni "dropdown" meni - PRENOVLJEN DIZAJN */
+
+.dropdown-menu {
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    background-color: #FFFFFF;
+    border: 1px solid #EAECF0;
+    list-style: none;
+    margin: 8px 0 0 0; /* Povečan odmik za zračnost */
+    padding: 8px;
+    min-width: 260px;
+    border-radius: 12px;
+    box-shadow: 0 12px 24px -4px rgba(16, 24, 40, 0.08);
+    z-index: 1000;
+    
+    opacity: 0;
+    visibility: hidden;
+    transform: translateX(-50%) translateY(10px);
+    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s;
+}
+
+.navigation .menu-item:hover > .dropdown-menu {
+    opacity: 1;
+    visibility: visible;
+    transform: translateX(-50%) translateY(0);
+}
+
+.navigation .menu-item:hover > a::after {
+    transform: rotate(180deg);
+}
+
+.dropdown-menu li {
+    padding: 0;
+}
+
+.dropdown-menu a {
+    display: block;
+    padding: 12px 16px;
+    color: #344054;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 16px;
+    border-radius: 6px;
+    transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out;
+    white-space: nowrap;
+}
+
+.dropdown-menu a:hover {
     background-color: #F9FAFB;
+    color: #2D738C;
 }
 
-
-/* 4. Skrivanje mobilnih elementov na namizju */
-
-.mobile-menu-icon {
-    display: none;
-}
-
-.mobile-nav-panel {
+.mobile-menu-icon, .mobile-nav-panel {
     display: none;
 }
 
 
 /* ==========================================================================
-   Mobile Header Styles
+   5. Stili za mobilno glavo in "accordion" meni - OPTIMIZIRANO
    ========================================================================== */
 
-@media (max-width: 768px) {
+@media (max-width: 1024px) { 
 
     .dropdown-header-navigation {
         position: fixed;
@@ -158,18 +232,23 @@
         height: 60px;
         box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.06);
         border-bottom: none;
-        z-index: 1002; /* Biti mora nad panelom, ki ima 1001 */
+        z-index: 1002;
     }
+    
+    /* === GLAVNI POPRAVEK ZA DELOVANJE MOBILNEGA MENIJA === */
+    /* Preprečimo, da bi .header-content zavzel ves prostor na mobilni napravi,
+       kar je sicer pravilno za namizje, a na mobilni napravi potisne ikono menija
+       izven vidnega polja ali prepreči klik nanjo. */
+    .header-content {
+        flex-grow: 0;
+    }
+    /* ======================================================= */
 
-    /* Skrij namizne elemente */
-    .navigation.desktop-nav {
-        display: none;
-    }
+    .navigation.desktop-nav,
     .dropdown-header-navigation .container > .navigation-actions {
         display: none;
     }
 
-    /* Prikaži mobilno ikono */
     .mobile-menu-icon {
         display: block;
         font-size: 24px;
@@ -177,41 +256,27 @@
         cursor: pointer;
         z-index: 1002;
     }
-
-    .mobile-menu-icon .fa-times {
-        display: none;
-    }
-
-    body.nav-open .mobile-menu-icon .fa-bars {
-        display: none;
-    }
-
-    body.nav-open .mobile-menu-icon .fa-times {
-        display: block;
-    }
+    .mobile-menu-icon .fa-times { display: none; }
+    body.nav-open .mobile-menu-icon .fa-bars { display: none; }
+    body.nav-open .mobile-menu-icon .fa-times { display: block; }
     
-    /* Stiliziraj mobilni panel */
     .mobile-nav-panel {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        justify-content: flex-start;
-        gap: 48px;
         position: fixed;
-        top: 60px; /* Začne se pod glavo */
+        top: 60px;
         left: 0;
         width: 100%;
         height: calc(100vh - 60px);
         background: #FFFFFF;
-        padding: 40px 24px;
+        padding: 24px;
         box-sizing: border-box;
         transform: translateX(100%);
         transition: transform 0.3s ease-in-out;
-        z-index: 1001; /* Pod glavo, a nad vsebino strani */
+        z-index: 1001;
         overflow-y: auto;
     }
 
-    /* Logika za odpiranje panela */
     body.nav-open .mobile-nav-panel {
         transform: translateX(0);
     }
@@ -219,38 +284,98 @@
     .mobile-nav-panel .navigation.mobile-nav {
         display: flex;
         flex-direction: column;
-        align-items: center;
-        gap: 24px;
+        align-items: stretch;
+        width: 100%;
+        gap: 0;
     }
 
-    .mobile-nav-panel .navigation a {
+    .mobile-nav .menu-item {
+        height: auto;
+        border-bottom: 1px solid #EAECF0;
+    }
+    .mobile-nav .menu-item:last-of-type {
+        border-bottom: none;
+    }
+    
+    .mobile-nav .menu-item > a {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        width: 100%;
+        padding: 16px 0;
         font-size: 20px;
         color: #101828;
+        font-weight: 600;
+        height: auto;
+    }
+
+    .mobile-nav .menu-item.open > a::after {
+        transform: rotate(180deg);
+    }
+    
+    .mobile-nav .dropdown-menu {
+        position: static;
+        background-color: #F9FAFB;
+        box-shadow: none;
+        border-radius: 0;
+        padding: 0 0 0 16px;
+        min-width: auto;
+        width: 100%;
+        max-height: 0;
+        overflow: hidden;
+        opacity: 1;
+        visibility: visible;
+        transform: none;
+        transition: max-height 0.4s ease-in-out, padding 0.4s ease-in-out;
+    }
+
+    .mobile-nav .menu-item.open > .dropdown-menu {
+        max-height: 500px;
+        padding: 16px 0 16px 16px;
+    }
+    
+    .mobile-nav .dropdown-menu ul {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    .mobile-nav .dropdown-menu a {
+        color: #344054;
+        font-weight: 500;
+        font-size: 18px;
+        padding: 10px 0;
+    }
+    .mobile-nav .dropdown-menu a:hover {
+        background-color: transparent;
+        color: #101828;
     }
 
     .mobile-nav-panel .navigation-actions {
-        display: flex; /* Mora biti flex za prikaz vsebine */
+        display: flex;
         flex-direction: column;
-        align-items: center;
         gap: 16px;
         width: 100%;
+        margin-top: auto;
+        padding-top: 32px;
     }
 
     .mobile-nav-panel .navigation-actions .btn {
         width: 100%;
-        max-width: 300px;
+        max-width: 340px;
+        align-self: center;
     }
 
     .mobile-nav-panel .language-selector {
         margin-top: 16px;
-        text-align: center; /* Poskrbi za poravnavo dropdown menija */
+        text-align: center;
     }
 
-    /* Na mobilnih napravah dropdown meni potrebuje malo drugačno pozicijo */
     .mobile-nav-panel .lang-dropdown {
         left: 50%;
-        transform: translateX(-50%); /* Centriranje menija pod ikono */
+        transform: translateX(-50%);
         right: auto;
-        /* Tranzicije so podedovane iz namizne različice */
+        bottom: calc(100% + 8px);
+        top: auto;
     }
 }