.computer-Menu{
    position: -webkit-sticky;
    position: sticky;  /* přichytí se při scrollu */
    top: 0;            /* pozice od horní hrany */
    z-index: 1050;     /* nad ostatními prvky */
}
#menuWrapper{
    background-color: var(--colorPrimary);
}
#menuWrapper{
    background-color: var(--colorPrimary);
    position: sticky;  /* přichytí se při scrollu */
    top: 0;            /* pozice od horní hrany */
    z-index: 1050;     /* nad ostatními prvky */
}
#menuWrapper .nav .btn {
  width: 130px;         /* fixní šířka */
  white-space: normal; /* dovolí zalomení textu */
  text-align: center;  /* centrovaný text */
}
.menuBtnWrap{
    margin-left: 12.5rem;
}
.btn-group:hover{
    background-color: var(--colorBackground);
}
/* dropdown se zobrazí při hover nad tlačítkem */
.btn-group:hover .dropdown-menu {
  display: block;
  position: absolute;  /* absolutní pozice */
  top: 100%;           /* hned pod tlačítkem */
  left: 0;
  z-index: 1000;       /* aby byl nad ostatními prvky */
}

/* zachování šířky tlačítka */
#menuWrapper .btn-group .btn {
  /*width: 70px;*/
  white-space: normal;
  text-align: center;
}

/* volitelně stejná šířka dropdown menu jako tlačítka */
#menuWrapper .btn-group .dropdown-menu {
  /*min-width: 70px; */
  text-align: center;
}
.btn-group .dropdown-toggle::after {
  display: none;
}

/* vertikální centrování textu v tlačítkách */
#menuWrapper .btn {
  display: flex;          /* flex pro centrování */
  align-items: center;    /* vertikální centrování */
  justify-content: center; /* horizontální centrování */
  height: 70px;           /* pevná výška tlačítka (nebo podle potřeby) */
  width: 70px;            /* pevná šířka */
  white-space: normal;    /* zalamování textu */
  text-align: center;
  padding: 0.5rem;        /* lehce doladit padding */
}

#menuWrapper .btn,
#menuWrapper .dropdown-menu {
  border-radius: 0;  /* hranaté */
}

/* zarovnání textu v dropdown vlevo a předřazení ">" */
#menuWrapper .dropdown-menu .dropdown-item {
  text-align: left;           /* vlevo */
  padding-left: 1rem;         /* odsazení od okraje */
}

#menuWrapper .dropdown-menu .dropdown-item::before {
  content: "> ";              /* přidá znak > před text */
  display: inline-block;
  width: 1.2rem;              /* fixní šířka pro zarovnání */
}

#menuWrapper .dropdown-menu li {
    border-bottom: 1px solid var(--menuBoxShadowColor);

}

#menuWrapper .btn,
#menuWrapper .btn-group > .btn {
  position: relative;
  overflow: hidden;
}

/* pseudo-element pro spodní pruh */
#menuWrapper .btn::after,
#menuWrapper .btn-group::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;             /* výška pruhu */
}
@media (max-width:1271px){
  .menuBtnWrap{ margin-left: 0;}
}
@media (max-width:880px){
  .btn-group { margin-left: 0 !important;margin-right: 0 !important;}
}


#menuWrapper .btn-group .btn{
  color:#fff;
}

/* 1) Červená */
#menuWrapper .btn-group:nth-of-type(1) .btn{
  background-color: var(--rainbow-red);
  border-color:     var(--rainbow-red);
}
#menuWrapper .btn-group:nth-of-type(1) .btn:hover,
#menuWrapper .btn-group:nth-of-type(1) .btn:focus{
  filter: brightness(0.92);
}
#menuWrapper .btn-group:nth-of-type(1) .dropdown-item:hover,
#menuWrapper .btn-group:nth-of-type(1) .dropdown-item:focus{
    background-color: var(--rainbow-red) !Important;
    border-color:     var(--rainbow-red) !Important;
    color: white !Important;
}

/* 2) Oranžová */
#menuWrapper .btn-group:nth-of-type(2) .btn{
  background-color: var(--rainbow-orange);
  border-color:     var(--rainbow-orange);
  color:#212529;
}
#menuWrapper .btn-group:nth-of-type(2) .btn:hover,
#menuWrapper .btn-group:nth-of-type(2) .btn:focus{
  filter: brightness(0.92);
}

/* 3) Žlutá – tmavší text kvůli kontrastu */
#menuWrapper .btn-group:nth-of-type(3) .btn{
  background-color: var(--rainbow-yellow);
  border-color:     var(--rainbow-yellow);
  color:#212529;
}
#menuWrapper .btn-group:nth-of-type(3) .btn:hover,
#menuWrapper .btn-group:nth-of-type(3) .btn:focus{
  filter: brightness(0.95);
}
#menuWrapper .btn-group:nth-of-type(3) .dropdown-item:hover,
#menuWrapper .btn-group:nth-of-type(3) .dropdown-item:focus{
    background-color: var(--rainbow-yellow) !Important;
    border-color:     var(--rainbow-yellow) !Important;
    color: black !Important;
}

/* 4) Zelená */
#menuWrapper .btn-group:nth-of-type(4) .btn{
  background-color: var(--rainbow-green);
  border-color:     var(--rainbow-green);
}
#menuWrapper .btn-group:nth-of-type(4) .btn:hover,
#menuWrapper .btn-group:nth-of-type(4) .btn:focus{
  filter: brightness(0.92);
}

/* 5) Modrá */
#menuWrapper .btn-group:nth-of-type(5) .btn{
  background-color: var(--rainbow-blue);
  border-color:     var(--rainbow-blue);
}
#menuWrapper .btn-group:nth-of-type(5) .btn:hover,
#menuWrapper .btn-group:nth-of-type(5) .btn:focus{
  filter: brightness(0.92);
}

/* 6) Fialová */
#menuWrapper .btn-group:nth-of-type(6) .btn{
  background-color: var(--rainbow-violet);
  border-color:     var(--rainbow-violet);
}
#menuWrapper .btn-group:nth-of-type(6) .btn:hover,
#menuWrapper .btn-group:nth-of-type(6) .btn:focus{
  filter: brightness(0.92);
}