:root {
  --nav_visina: 50px;
  /* RGB boje */
  --nav_pozadina_boja: 34, 34, 34;
  --nav_aktivan_pozadina_boja: 59, 59, 59;
  --nav_podmeni_pozadina_boja: var(--nav_aktivan_pozadina_boja);
  --nav_podmeni_aktivan_pozadina_boja: 84, 84, 84;
  --nav_tekst_boja: var(--tekst_boja);
}

nav {
  display: flex;
  align-items: stretch;
  background-color: rgb(var(--nav_pozadina_boja));
  position: relative; /* Bitno da bi mega meni bio vezan za dno celog nav-a */
  /*min-height: var(--nav_visina);*/
}

nav section {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  flex-wrap: nowrap;
}

nav a,
nav button {
  color: white;
  background-color: transparent;
  border: none;
  outline: none;
  font-size: 1.2rem;
  padding: 8px 16px;
  text-decoration: none;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 50px;
  transition: background-color 0.2s ease;
}

nav a:hover,
nav button:hover,
nav a:focus,
nav button:focus,
/* Naredna četiri su da bi zadržali izgled kada su otvoreni podmeniji */
nav section > div:hover > button,
nav section > div:hover > a,
/* Dodato: Da zadrže izgled kada je bilo šta unutar podmenija u fokusu */
nav section > div:focus-within > button,
nav section > div:focus-within > a {
  background-color: rgb(var(--nav_aktivan_pozadina_boja));
  font-weight: bold;
}

nav a:hover *,
nav button:hover *,
nav a:focus *,
nav button:focus * {
  display: inline-block; /* Neophodno da bi transform: scale radio na unutrašnjim elementima */
  transform: scale(1.08); /* Uvećava tekst/ikonicu za 8% */
  transition: transform 0.2s ease;
}

nav .mdi {
  font-size: 2rem;
}

/*******************************************************************************
          SEKCIJA SREDINA
*******************************************************************************/
/* Ikonica za horizontalni padajući meni */
nav section.sredina > div > button:first-of-type::after {
  content: "\F035D";
  font-family: "Material Design Icons";
  font-weight: normal;
  font-size: 2rem;
  display: inline-block;
  margin-left: 5px;
  vertical-align: middle;
  transition: transform 0.3s ease;
}
nav section.sredina > div:hover > button::after,
nav section.sredina > div:focus-within > button::after {
  transform: rotate(180deg);
}

/* Sakrivanje scrollbara */
nav section.sredina,
nav section div ul {
  -ms-overflow-style: none;
  scrollbar-width: none;
}
nav section.sredina::-webkit-scrollbar,
nav section div ul::-webkit-scrollbar {
  display: none;
}

/* Strelice za meni */
nav section.sredina button.meni_pomeri_levo,
nav section.sredina button.meni_pomeri_desno {
  display: none; /* podrazumevano sakriveni (prikazujemo ih samo na desktopu) */
  padding: 0;
  z-index: 5;
  background-color: rgb(var(--nav_pozadina_boja));
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 1;
  visibility: visible;
  position: sticky;
}
nav section.sredina button.meni_pomeri_levo {
  left: 0;
}
nav section.sredina button.meni_pomeri_desno {
  right: 0;
}
nav section.sredina button.meni_pomeri_levo.nevidljivo,
nav section.sredina button.meni_pomeri_desno.nevidljivo {
  visibility: hidden;
  opacity: 0;
  pointer-events: none; /* Sprečava da korisnik klikne na strelicu dok je nevidljiva */
}

/* Strelice za podmeni */
nav section.sredina > div button.podmeni_pomeri_levo,
nav section.sredina > div button.podmeni_pomeri_desno {
  display: none; /* Sakrivene po defaultu (i na mobilnom) */
  position: absolute;
  top: 100%; /* Spušta ih tačno u ravan sa podmenijem */
  z-index: 15; /* Moraju biti iznad samog ul menija koji ima z-index 10 */
  background-color: rgb(var(--nav_aktivan_pozadina_boja));
  box-shadow: 0 0 10px rgba(0,0,0,0.5);
  transition: opacity 0.3s ease, visibility 0.3s ease;
  padding: 0;
}
nav section.sredina > div button.podmeni_pomeri_levo {
  left: 0;
}
nav section.sredina > div button.podmeni_pomeri_desno {
  right: 0;
}
nav section.sredina > div button.podmeni_pomeri_levo.nevidljivo,
nav section.sredina > div button.podmeni_pomeri_desno.nevidljivo {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
nav section.sredina > div button.podmeni_pomeri_levo:hover,
nav section.sredina > div button.podmeni_pomeri_desno:hover,
nav section.sredina > div button.podmeni_pomeri_levo:focus,
nav section.sredina > div button.podmeni_pomeri_desno:focus {
  background-color: rgb(var(--nav_podmeni_aktivan_pozadina_boja));
}

/* Link u podmeniju */
nav section.sredina > div ul li a:hover,
nav section.sredina > div ul li a:focus {
  background-color: rgb(var(--nav_podmeni_aktivan_pozadina_boja));
}

/*******************************************************************************
          SEKCIJA DESNO
*******************************************************************************/
nav section.desno {
  display: flex;
  flex-shrink: 0;
  margin-left: auto;
}
nav section.desno button {
  padding: 0 1rem;
}

/* Vertikalni padajući meni */
nav section.desno > div {
  position: relative; /* Ograničava padajući meni da bude tačno ispod ovog dugmeta */
  display: flex;
  height: 100%;
}
nav section.desno ul {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;           /* Poravnava meni sa desnom ivicom dugmeta, da ne ispadne van ekrana */
  left: auto;         /* Poništava left: 0 iz mega menija */
  width: max-content; /* Širina zavisi od najduže reči u meniju */
  min-width: 100%;
  flex-direction: column; /* Linkovi idu jedan ispod drugog */
  padding: 0;
  background-color: rgb(var(--nav_podmeni_pozadina_boja));
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  z-index: 20;
  overflow: visible;  /* Gasi skrol koji smo stavili za srednji meni */
}
nav section.desno ul li a {
  justify-content: flex-start;
  padding: 12px 20px;
  width: 100%;
}
nav section.desno ul li a:hover,
nav section.desno ul li a:focus {
  background-color: rgb(var(--nav_podmeni_aktivan_pozadina_boja));
}
nav section.desno > div:hover ul,
nav section.desno > div:focus-within ul {
  /* Otvaranje vertikalnog padajućeg menija na prelazak mišem ili fokus */
  display: flex;
}



/*******************************************************************************
      DESKTOP & TABLET ZAJEDNO (minimalno 768px)
*******************************************************************************/
@media screen and (min-width: 768px) {
  /* "Hamburger" dugme, vidljivo samo na mobilnim telefonima */
  nav > button:first-of-type {
    display: none;
  }

  nav section.levo {
    display: flex;
    flex-shrink: 0;
  }

  nav section.sredina {
    display: flex;
    flex-grow: 1;
    overflow-x: auto; /* Omogućen skrol levo-desno */
    scroll-behavior: smooth; /* Glatko klizanje kad se kliknu strelice */
  }

  nav section.sredina > div {
    display: flex;
  }

  nav section.sredina > div *:focus ul {
    display: flex;
  }

  /* Strelice za meni */
  nav section.sredina button.meni_pomeri_levo,
  nav section.sredina button.meni_pomeri_desno {
    display: flex;
    flex-shrink: 0;
  }
  /* Strelice za podmeni */
  nav section.sredina > div:hover button.podmeni_pomeri_levo,
  nav section.sredina > div:hover button.podmeni_pomeri_desno,
  nav section.sredina > div:focus-within button.podmeni_pomeri_levo,
  nav section.sredina > div:focus-within button.podmeni_pomeri_desno {
    display: flex;
  }

  /* PADAJUĆI MENI KAO HORIZONTALNA TRAKA */
  nav section div ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: rgb(var(--nav_aktivan_pozadina_boja));
    margin: 0;
    padding: 0 25px;
    list-style-type: none;
    z-index: 10;
    flex-direction: row;
    overflow-x: auto;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  }

  /* Linkovi unutar horizontalnog dropdowna */
  nav section div ul li {
    flex: 0 0 auto; /* Sprečava da se linkovi sabijaju */
  }

  nav section.sredina > div:hover ul,
  nav section.sredina > div:focus-within ul {
    display: flex;
  }
}

/*******************************************************************************
      Mobilni telefon (maksimalno 767px)
*******************************************************************************/
@media screen and (max-width: 767px) {
  nav {
    flex-wrap: wrap;
    height: auto;
  }

  /* Hamburger dugme */
  nav > button:first-of-type {
    display: flex;
    order: 1;
  }

  nav section.desno {
    order: 2;
  }

  nav section.levo,
  nav section.sredina {
    display: none;
    order: 3;
    width: 100%;
    flex-direction: column;
    max-height: calc(100vh - 50px);
    overflow-y: auto; /* Vertikalni skrol za telefon */
  }

  nav[data-open] section.levo,
  nav[data-open] section.sredina {
    display: flex;
  }

  nav section.sredina > div {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  nav section.levo > a,
  nav section.sredina > a,
  nav section.sredina > div > button {
    width: 100%;
    justify-content: flex-start;
    border-top: 1px solid #444;
  }

  nav section div ul {
    display: none;
    position: static;
    background-color: #444;
    margin: 0; padding: 0; list-style-type: none;
    width: 100%;
  }

  nav section.sredina > div:hover ul,
  nav section.sredina > div:focus-within ul {
    display: flex;
    flex-direction: column;
  }

  nav section div ul li,
  nav section div ul li a {
    width: 100%;
  }

  nav section div ul li a {
    padding-left: 30px;
    border-top: 1px solid #555;
    justify-content: flex-start;
  }
}