/* Hlavní kontejner menu s barevným přechodem pozadí, zarovnáním textu a fontem */
.custom-menu {
  background: linear-gradient(to right, #4CAF50, #2196F3); /* přechod z zelené do modré */
  text-align: center; /* text zarovnaný na střed */
  font-family: Arial, sans-serif; /* použitý font */
  margin-bottom: 15px; /* mezera pod menu */
}

/* Nečíslovaný seznam v menu bez výchozího odrážkování, s nulovými okraji a paddingem,
   uspořádaný jako flexibilní řádek s možností zalomení a vycentrováním položek */
.custom-menu ul {
  list-style: none; /* odstranění odrážek */
  margin: 0; /* nulový vnější okraj */
  padding: 0; /* nulový vnitřní okraj */
  display: flex; /* položky vedle sebe */
  flex-wrap: wrap; /* povolení zalomení do dalšího řádku */
  justify-content: center; /* vycentrování položek */
}

/* Jednotlivé položky seznamu s malou mezerou mezi sebou */
.custom-menu ul li {
  margin-right: 2px; /* mezera mezi položkami */
}

/* Odkazy mají čáru | vpravo kromě posledního */
.custom-menu a {
  display: block; /* aby padding platil kolem celého bloku */
  padding: 1px 1px; /* odsazení kolem textu */
  color: white; /* barva textu */
  text-decoration: none; /* bez podtržení */
  transition: background 0.3s; /* hladký přechod pozadí při hover */
  font-weight: bold; /* tučný text */
  font-size: 22px; /* velikost písma */
  position: relative; /* pro správné umístění pseudo-elementu */
}

/* Přidání svislé čáry | za každý odkaz kromě posledního */
.custom-menu a:not(:last-child)::after {
  content: "|";             /* samotná svislá čára */
  color: white;             /* barva čáry */
  position: absolute;       /* absolutní pozice */
  right: 0;                 /* zarovnání doprava */
  top: 50%;                 /* svislé centrování */
  transform: translateY(-50%); /* přesné vycentrování - opraveno */
  padding-left: 10px;       /* mezera vlevo od čáry */
}

/* Efekt při najetí myší: světlé průhledné pozadí a zaoblení rohů */
.custom-menu a:hover {
  background: rgba(255, 255, 255, 0.2); /* světlý průhledný podklad */
  border-radius: 4px; /* zaoblené rohy */
}

/* Poslední položka nemá pravý margin, aby menu neskákalo */
.custom-menu ul li:last-child {
  margin-right: 0;
}

/* Skrytí textu výchozí stav pro jazykové odkazy */
.custom-menu a.flag-cz,
.custom-menu a.flag-de,
.custom-menu a.flag-en {
  position: relative;
  display: inline-block;
  padding-left: 6px;
  padding-right: 6px;
  vertical-align: middle;

  color: transparent;  /* text je neviditelný */
  transition: color 0.3s ease;
}

/* Vlajka jako pozadí přes pseudo-element */
.custom-menu a.flag-cz::before,
.custom-menu a.flag-de::before,
.custom-menu a.flag-en::before {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 16px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

/* Obrázky vlajek (SVG pro ostrost) */
.custom-menu a.flag-cz::before { background-image: url('https://flagcdn.com/cz.svg'); }
.custom-menu a.flag-de::before { background-image: url('https://flagcdn.com/de.svg'); }
.custom-menu a.flag-en::before { background-image: url('https://flagcdn.com/gb.svg'); }

/* Hover: vlajka plynule zmizí, text plynule objeví */
.custom-menu a.flag-cz:hover,
.custom-menu a.flag-de:hover,
.custom-menu a.flag-en:hover {
  color: white; /* text se objeví */
}

.custom-menu a.flag-cz:hover::before,
.custom-menu a.flag-de:hover::before,
.custom-menu a.flag-en:hover::before {
  opacity: 0; /* vlajka zmizí */
}