/* Základní styly pro menu */
.menu {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 40;
}

.menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}

.menu .menu-item {
  text-align: center;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0; /* odstraněno padding, aby výška byla přesně 100% */
}

.menu .menu-item:hover {
  background-color: var(--ktn-dark-blue); 
  color: #fff;
  height: 64px; /* zajistí, že hover efekt je přesně stejně vysoký jako menu */
  padding: 0; /* odstraněno padding */
}

/* Active state for current page */
.menu-item.active {
  background-color: var(--ktn-dark-blue);
  color: #fff;
}

.menu-item.active .menu-toggle span,
.menu-item.active .menu-single span {
  color: #fff;
}

.menu-section {
  background-color: var(--ktn-light-blue);
}

.menu-item.relative {
  position: relative;
}

.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  background-color: var(--ktn-light-blue);
  height: auto;
  min-width: 160px;
  z-index: 10;
  font-size: 0.875rem;
  display: none; /* Skrytí submenu ve výchozím nastavení */
}

.submenu.absolute {
  position: absolute;
  top: 100%;
  left: 0; /* Změna z right: 0 na left: 0 */
  background-color: var(--ktn-light-blue);
  height: auto;
  right: auto; /* Zrušení right hodnoty */
  min-width: 160px;
  z-index: 100;
  font-size: 0.875rem;
}

.submenu li a {
  color: var(--ktn-black);
  font-size: 0.875rem;
  padding: 0.5rem 1rem;
  display: block;
  text-decoration: none;
  text-align: left; /* Zarovnání textu vlevo */
}

.submenu li a:hover {
  background-color: var(--ktn-dark-blue);
  color: #fff;
}

/* Menu item styling */
.menu-item {
    position: relative;
    min-height: 2rem;
}

.menu-item .menu-toggle,
.menu-item .menu-single {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5rem;
}

/* Focus styles */
.menu-item a:focus,
.menu-item button:focus,
.menu-toggle:focus,
.menu-single:focus {
  outline: 2px solid #000;
  outline-offset: -2px;
}

.submenu li a:focus {
  outline: 2px solid #000;
  outline-offset: -2px;
}

.menu-single:hover > span, .menu-toggle:hover > span {
  color: #fff;
  text-decoration: underline solid 4px;
  text-decoration-color: var(--ktn-red);
  text-underline-offset: 8px;
}

/* Keep parent menu item styled when submenu is open */
.menu-item:has(.submenu[style*="display: block"]) {
  background-color: var(--ktn-dark-blue);
}

.menu-item:has(.submenu[style*="display: block"]) .menu-toggle span {
  color: #fff;
  text-decoration: underline solid 4px;
  text-decoration-color: var(--ktn-red);
  text-underline-offset: 8px;
}

/* Keep parent styled when hovering over submenu */
.menu-item:has(.submenu:hover) {
  background-color: var(--ktn-dark-blue);
}

.menu-item:has(.submenu:hover) .menu-toggle span {
  color: #fff;
  text-decoration: underline solid 4px;
  text-decoration-color: var(--ktn-red);
  text-underline-offset: 8px;
}

/* Centrování textu v menu */
.absolute-center.w-100 {
  width: 100%;
  text-align: center;
}

/* Responzivní velikost textu pro menu */
@media (max-width: 81.25em) { /* 81.25em = 1300px */
  .menu .menu-item a,
  .menu .menu-item button {
    font-size: 0.875rem; /* Menší font pro střední obrazovky */
  }
}

@media (max-width: 60em) and (min-width: 30em) { /* 480px - 960px */
  .menu .menu-item a,
  .menu .menu-item button {
    font-size: 1.1rem; /* Větší font pro střední mobily */
  }
}