/* ============================================================
   LISTA KATEGORII - barvy podle loga TECHNOLINE
   css/menu-barvy.css   (nacita se az za layout.css)

   Barvy z loga:  #00C0FF tyrkys (TECHNO)   #A0A0A0 seda (LINE)
   Barvy stranek: #0A2557 navy, #16407F navy svetlejsi

   Dve varianty, prepina se tridou na <nav class="hl-menu ...">
   (nastavuje scripts/menu.php):

     styl-a  navy lista jako horni pruh, tyrkysova linka dole
             a tyrkysove podtrzeni aktivni polozky
     styl-c  svetla (bila) lista, tmave modre nazvy, sede
             oddelovace z loga, tyrkysove podtrzeni

   Tyrkys se nepouziva na text na bilem - je moc svetly
   (kontrast 2:1), jen na linky, podtrzeni a ikony.
   ============================================================ */

.hl-menu.styl-a, .hl-menu.styl-c {
  --ml-navy:   #0A2557;
  --ml-navy2:  #16407F;
  --ml-tyrkys: #00C0FF;
  --ml-seda:   #A0A0A0;
}

/* ================= A: navy + tyrkys ================= */

.hl-menu.styl-a { background: var(--ml-navy); box-shadow: inset 0 -3px 0 var(--ml-tyrkys); }
.hl-menu.styl-a .hl-tlacitko { border-right-color: rgba(255, 255, 255, .14); padding-bottom: 15px; }
.hl-menu.styl-a .hl-polozka:first-child .hl-tlacitko { border-left-color: rgba(255, 255, 255, .14); }
.hl-menu.styl-a .hl-popis { color: #9FC2F0; }

.hl-menu.styl-a .hl-tlacitko:hover,
.hl-menu.styl-a .hl-tlacitko:focus-visible {
  background: var(--ml-navy2);
  box-shadow: inset 0 -3px 0 var(--ml-tyrkys);
}
.hl-menu.styl-a .hl-tlacitko[aria-expanded="true"] {
  background: #fff; color: var(--ml-navy);
  box-shadow: inset 0 3px 0 var(--ml-tyrkys);
}
.hl-menu.styl-a .hl-tlacitko[aria-expanded="true"] .hl-popis { color: #5A6B78; }
.hl-menu.styl-a .hl-tlacitko:focus-visible { outline-color: var(--ml-tyrkys); }

.hl-menu.styl-a .hl-panel { border-top: 0; box-shadow: 0 14px 30px rgba(10, 37, 87, .18); }
.hl-menu.styl-a .hl-dlazdice strong { color: var(--ml-navy); }
.hl-menu.styl-a .hl-dlazdice:hover,
.hl-menu.styl-a .hl-dlazdice:focus-visible { background: #EEF3FA; }
.hl-menu.styl-a .hl-dlazdice:hover .hl-ikona { border-color: var(--ml-tyrkys); }

.hl-menu.styl-a .hl-prepinac { background: var(--ml-navy); box-shadow: inset 0 -3px 0 var(--ml-tyrkys); }

/* ================= C: svetla lista ================= */

.hl-menu.styl-c { background: #fff; border-bottom: 1px solid #D8E3EB; }
.hl-menu.styl-c .hl-tlacitko {
  color: var(--ml-navy);
  border-right: 1px solid #E1E1E1;
  padding-bottom: 15px;
}
.hl-menu.styl-c .hl-polozka:first-child .hl-tlacitko { border-left: 1px solid #E1E1E1; }
.hl-menu.styl-c .hl-nazev { font-weight: 700; }
.hl-menu.styl-c .hl-popis { color: #7A7A7A; }   /* seda z loga ztmavena kvuli citelnosti (4,3:1) */

.hl-menu.styl-c .hl-tlacitko:hover,
.hl-menu.styl-c .hl-tlacitko:focus-visible {
  background: #F4FBFF;
  box-shadow: inset 0 -4px 0 var(--ml-tyrkys);
}
.hl-menu.styl-c .hl-tlacitko[aria-expanded="true"] {
  background: #F4FBFF; color: var(--ml-navy);
  box-shadow: inset 0 -4px 0 var(--ml-tyrkys);
}
.hl-menu.styl-c .hl-tlacitko[aria-expanded="true"] .hl-popis { color: #5A6B78; }
.hl-menu.styl-c .hl-tlacitko:focus-visible { outline: 2px solid var(--ml-navy); outline-offset: -4px; }

.hl-menu.styl-c .hl-panel { border-top: 0; box-shadow: 0 14px 30px rgba(10, 37, 87, .16); }
.hl-menu.styl-c .hl-dlazdice strong { color: var(--ml-navy); }
.hl-menu.styl-c .hl-dlazdice:hover,
.hl-menu.styl-c .hl-dlazdice:focus-visible { background: #F4FBFF; }
.hl-menu.styl-c .hl-dlazdice:hover .hl-ikona { border-color: var(--ml-tyrkys); }

.hl-menu.styl-c .hl-prepinac { background: #fff; color: var(--ml-navy); border-bottom: 3px solid var(--ml-tyrkys); }

/* ================= mobil (obe varianty) ================= */

@media (max-width: 900px) {
  .hl-menu.styl-a, .hl-menu.styl-c { box-shadow: none; }
  .hl-menu.styl-a .hl-tlacitko { border-bottom-color: rgba(255, 255, 255, .14); padding-bottom: 13px; }
  .hl-menu.styl-c .hl-tlacitko { border: 0; border-bottom: 1px solid #E1E1E1; padding-bottom: 13px; }
  .hl-menu.styl-c .hl-polozka:first-child .hl-tlacitko { border-left: 0; }
  .hl-menu.styl-a .hl-tlacitko:hover, .hl-menu.styl-a .hl-tlacitko[aria-expanded="true"],
  .hl-menu.styl-c .hl-tlacitko:hover, .hl-menu.styl-c .hl-tlacitko[aria-expanded="true"] {
    box-shadow: inset 4px 0 0 var(--ml-tyrkys);
  }
}