/* Shared header and language-switcher component styles. */

header .logo-mobile {
  max-width: 200px;
}

header .header-actions {
  display: flex;
  align-items: center;
  gap: 16px;
}

header .lang-switcher {
  display: flex;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.5px;
}

header .lang-switcher-link {
  color: #fff;
  opacity: 0.6;
  text-decoration: none;
  padding: 4px 6px;
}

header .lang-switcher-link.is-active {
  opacity: 1;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.15);
}

/* Dotyková plocha prepínača jazykov. Odkazy majú 23x37 px na mobile a 30x40 px
   inde. To je pod odporúčaným minimom 44x44 px (Apple, Android, WCAG 2.5.5) a
   šírka 23 px je aj pod 24x24 px, ktoré ako jediné z toho žiada WCAG 2.2 na
   úrovni AA (2.5.8). Výšku dorovnáva priehľadný prekryv: ::after nevstupuje do
   rozloženia, takže hlavička vyzerá presne ako predtým.
   Do strán sa prekryv zámerne nerozťahuje — medzera medzi SK/EN/DE je na mobile
   2 px, takže bočné rozšírenie by dalo susedné plochy cez seba a prst by trafil
   iný jazyk, než na ktorý mieril. Šírku preto rieši odsadenie, nie prekryv. */
header .lang-switcher a { position: relative; }
header .lang-switcher a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
}

/* The Slovak desktop container becomes narrower below 1400px. Switch to the
   mobile header before that layout can wrap the service navigation.

   Every rule below is gated on `header.header-mobile`, and that class is added
   by designesia.js at a breakpoint that depends on the language: 1400px for
   Slovak, 1200px for the rest. The rules therefore do not need a language of
   their own. They used to carry `html[lang="sk"]`, which left the English
   pages with the hamburger closed and the menu still on screen, 20px past the
   right edge of the header. */
/* Hamburger musí existovať všade tam, kde je hlavička v mobilnom režime.
   Kde to je, určuje `designesia.js` triedou `header-mobile`, nie CSS. Staré
   štýly sa o hranicu doteraz nezhodli: `css/style.css` odkrýva `#menu-btn` do
   1199 px, `detect-konfigurator/css/style.css` iba do 992 px. Po zjednotení
   breakpointu tak na konfigurátore vzniklo pásmo 993–1199 px, kde bola mobilná
   hlavička a žiadny spôsob, ako menu otvoriť. Naviazanie na triedu, ktorú
   nastavuje skript, ten rozpor ruší. */
header.header-mobile #menu-btn {
  display: block;
  float: right;
  position: static;
  top: 0;
  right: 0;
  z-index: 1000;
}

@media (min-width: 1200px) and (max-width: 1399px) {
  header.header-mobile #mainmenu {
    position: absolute;
    top: 90px;
    left: 20px;
    z-index: 200;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 20px 30px 100px 0;
    overflow-y: auto;
  }

  header.header-mobile #mainmenu > li {
    display: block;
    width: 100%;
    margin: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  }

  header.header-mobile #mainmenu > li::before,
  header.header-mobile #mainmenu > li.has-child::after,
  header.header-mobile #mainmenu > li > a.menu-item::after {
    display: none;
  }

  header.header-mobile #mainmenu > li > a.menu-item {
    color: #fff;
    text-align: left;
    padding: 10px 6px 10px 0;
  }
}

/* A closed hamburger must never expose the active service link. */
@media (max-width: 1399px) {
  header.header-mobile:not(.menu-open) #mainmenu {
    display: none !important;
  }

  header.header-mobile.menu-open #mainmenu {
    display: block !important;
  }
}

@media (min-width: 768px) and (max-width: 1399px) {
  header.header-mobile.menu-open {
    height: 470px !important;
    min-height: 0 !important;
  }

  header.header-mobile.menu-open #mainmenu {
    top: 124px !important;
    left: 0 !important;
    width: 100% !important;
    padding-left: 44px !important;
    padding-right: 44px !important;
  }
}