/*
 * HoR Menu SAFE v1.3.0
 * Zakres: wyłącznie menu HoR oznaczone klasami hor-menu-*.
 * Nie zmienia treści stron, Elementora, WooCommerce ani globalnej typografii.
 */

@media (min-width: 922px) {
  /* Główne pozycje menu HoR: bez stałego żółtego koloru na kilku pozycjach naraz. */
  #masthead .main-header-menu > li.hor-menu-start > a,
  #masthead .main-header-menu > li.hor-menu-learn > a,
  #masthead .main-header-menu > li.hor-menu-tools > a,
  #masthead .main-header-menu > li.hor-menu-world > a,
  #masthead .main-header-menu > li.hor-menu-shop > a,
  #masthead .main-header-menu > li.hor-menu-account > a {
    color: #fff !important;
    box-shadow: none !important;
    border-bottom-color: transparent !important;
    white-space: nowrap;
    padding-left: clamp(9px, 1.05vw, 17px) !important;
    padding-right: clamp(9px, 1.05vw, 17px) !important;
    font-size: clamp(14px, .96vw, 17px) !important;
  }

  /* Tylko jedna pozycja otrzymuje stan aktywny nadany przez bezpieczny JS. */
  #masthead .main-header-menu > li.hor-menu-active > a {
    color: #FFCF3F !important;
    box-shadow: inset 0 -3px 0 #FFCF3F !important;
  }

  /* Hover/focus wygrywa chwilowo z aktywną pozycją, więc nie ma dwóch żółtych zakładek. */
  #masthead .main-header-menu > li.hor-menu-start:hover > a,
  #masthead .main-header-menu > li.hor-menu-learn:hover > a,
  #masthead .main-header-menu > li.hor-menu-tools:hover > a,
  #masthead .main-header-menu > li.hor-menu-world:hover > a,
  #masthead .main-header-menu > li.hor-menu-shop:hover > a,
  #masthead .main-header-menu > li.hor-menu-account:hover > a,
  #masthead .main-header-menu > li.hor-menu-start:focus-within > a,
  #masthead .main-header-menu > li.hor-menu-learn:focus-within > a,
  #masthead .main-header-menu > li.hor-menu-tools:focus-within > a,
  #masthead .main-header-menu > li.hor-menu-world:focus-within > a,
  #masthead .main-header-menu > li.hor-menu-shop:focus-within > a,
  #masthead .main-header-menu > li.hor-menu-account:focus-within > a {
    color: #FFCF3F !important;
    box-shadow: inset 0 -3px 0 #FFCF3F !important;
  }

  #masthead .main-header-menu:has(> li:hover) > li.hor-menu-active:not(:hover) > a,
  #masthead .main-header-menu:has(> li:focus-within) > li.hor-menu-active:not(:focus-within) > a {
    color: #fff !important;
    box-shadow: none !important;
  }

  /* Mega-menu UCZ SIĘ: pozycjonowanie jest liczone względem viewportu przez JS. */
  #masthead li.hor-menu-learn > .sub-menu {
    position: fixed !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    width: min(1120px, calc(100vw - 32px)) !important;
    max-width: calc(100vw - 32px) !important;
    max-height: calc(100vh - 132px) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    z-index: 999999 !important;
    border-radius: 0 0 18px 18px !important;
    box-sizing: border-box !important;
  }

  /* Trzy kolumny są wewnątrz bezpiecznej szerokości dropdownu. */
  #masthead li.hor-menu-learn > .sub-menu > li.hor-menu-heading {
    float: left !important;
    width: 33.333333% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  #masthead li.hor-menu-learn > .sub-menu::after {
    content: "";
    display: block;
    clear: both;
  }

  /* Trzeci poziom w kolumnach jest zawsze widoczny dopiero wewnątrz otwartego mega-menu. */
  #masthead li.hor-menu-learn > .sub-menu > li.hor-menu-heading > .sub-menu {
    position: static !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    width: 100% !important;
    min-width: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    border: 0 !important;
  }

  #masthead li.hor-menu-learn > .sub-menu > li.hor-menu-heading > a {
    pointer-events: none;
    cursor: default;
  }
}

/* Węższy desktop: nadal 3 kolumny, ale z mniejszym oddechem. */
@media (min-width: 922px) and (max-width: 1180px) {
  #masthead li.hor-menu-learn > .sub-menu {
    width: calc(100vw - 24px) !important;
    max-width: calc(100vw - 24px) !important;
  }
}

/* Mobile/tablet pozostawiamy mechanizmowi motywu; kasujemy tylko desktopowe wymuszenia, jeśli breakpoint motywu różni się o 1 px. */
@media (max-width: 921px) {
  #masthead li.hor-menu-learn > .sub-menu,
  #masthead li.hor-menu-learn > .sub-menu > li.hor-menu-heading,
  #masthead li.hor-menu-learn > .sub-menu > li.hor-menu-heading > .sub-menu {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}