/* Głowa strony nad treścią */
#sp-main-body { padding-top: 10px !important; }

/* —————————————————————————————————————————————
   MENU (992–1399.98px): jedna linia + poziomy scroll + caret w linii
   ————————————————————————————————————————————— */
@media (max-width: 1399.98px) and (min-width: 992px){
  :root { --menuH: 48px; --menuGap: 8px; }

  /* Wrappery Helixa muszą się kurczyć */
  #sp-header .sp-megamenu-wrapper { display:flex; align-items:center; height:var(--menuH) !important; overflow:hidden !important; flex:1 1 auto !important; min-width:0 !important; }

  /* Lista pozycji: flex, brak zawijania, poziomy scroll */
  #sp-header .sp-megamenu-parent{
    display:flex !important;
    flex-wrap:nowrap !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    white-space:nowrap !important;
    gap:0;
    scrollbar-width:none;                 /* Firefox: ukryj pasek */
    -webkit-overflow-scrolling:touch;
    height:var(--menuH) !important;
  }
  #sp-header .sp-megamenu-parent::-webkit-scrollbar { display:none; }

  /* Elementy listy w jednej linii */
  #sp-header .sp-megamenu-parent > li{
    float:none !important;
    flex:0 0 auto !important;
    height:var(--menuH) !important;
  }

  /* Linki oraz rodzice z podmenu (SPAN) – wspólne skalowanie i układ */
  #sp-header .sp-megamenu-parent > li > a,
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading{
    display:inline-flex !important;
    align-items:center !important;
    height:100% !important;
    line-height:1 !important;
    white-space:nowrap !important;
    padding:0 12px !important;
    gap:var(--menuGap) !important;
    font-size:clamp(11px, 1vw, 14px) !important;
  }

  /* Dodatkowe wrapy tytułu – dziedziczą rozmiar i nie zawijają się */
  #sp-header .sp-megamenu-parent > li > a .menu-title,
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading .menu-title{
    font-size:inherit !important;
    line-height:inherit !important;
    white-space:nowrap !important;
  }

  /* Caret/ikona – w jednej linii, skaluje się jak tekst */
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading{
    padding-right:12px !important; /* lekki zapas z prawej */
  }
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading .sp-caret,
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading i.fa,
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading svg{
    position:static !important;
    transform:none !important;
    width:auto !important;
    height:auto !important;
    font-size:1em !important;
    line-height:1 !important;
    flex:0 0 auto !important;
    pointer-events:none;
    display:inline-block !important;
    vertical-align:middle !important;
  }
  /* Jeżeli caret jest pseudo-elementem */
  #sp-header .sp-megamenu-parent > li.sp-has-child > span.sp-menu-heading::after{
    position:static !important;
    transform:none !important;
    margin-left:var(--menuGap) !important;
    font-size:1em !important;
    vertical-align:middle;
  }

  /* Logo nie wypycha menu */
  #sp-header .logo img,
  #sp-header .logo-image{
    max-height:calc(var(--menuH) - 12px) !important;
    height:auto !important;
    width:auto !important;
  }
}

/* —————————————————————————————————————————————
   HERO (kontener + tytuł + obraz + overlay)
   ————————————————————————————————————————————— */
.hero-ctp{
  text-align:center;
  margin:20px auto;
  max-width:1920px;
  position:relative;
}

.hero-title{
  font-weight:700;
  background:#de8206;
  color:#fff;
  display:inline-block;
  border-radius:4px;
  margin:0 0 20px 0;
  padding:8px 20px;
  font-size:clamp(16px, 4.8vw, 24px);
  line-height:1.2;
}

.hero-media{ position:relative; }       /* overlay pozycjonuje się do media */
.hero-img{
  max-width:100%;
  height:auto;
  border-radius:6px;
  display:block;
}

/* Overlay – desktop/tablet domyślnie na obrazie */
.hero-overlay{
  position:absolute;
  top:55%;
  left:50%;
  transform:translate(-50%,-50%);
  width:95%;
  background:#ffffffdd;
  border:1px solid #000;
  color:#000;
  border-radius:6px;
  text-align:center;
  font-size:clamp(14px, 3.8vw, 18px);
  line-height:1.4;
  padding:clamp(10px, 3.5vw, 20px) clamp(12px, 4.5vw, 30px);
  z-index:1;
}
.hero-overlay p{ margin:0 0 10px 0; }
.hero-overlay p:last-child{ margin-bottom:0; }

/* Tablety – delikatna korekta */
@media (max-width: 992px){
  .hero-overlay{
    top:52%;
    font-size:clamp(13px, 3.6vw, 16px);
    padding:12px 16px;
  }
}

/* Telefony – overlay wyżej i ciaśniej na obrazie */
@media (max-width: 576px){
  .hero-overlay{
    top:35%;
    bottom:auto;
    left:50%;
    transform:translateX(-50%);
    width:88%;
    font-size:clamp(8px, 3.5vw, 13px);
    padding:6px 8px;
    line-height:1.3;
    max-height:30vh;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
  }
}

/* Telefony – wariant: ramka pod zdjęciem (statycznie) */
@media (max-width: 576px){
  .hero-media{ position:static; }
  .hero-overlay{
    position:static;
    transform:none;
    width:100%;
    margin-top:10px;
    background:#fff;
    border:1px solid #e5e5e5;
    border-radius:6px;
    font-size:clamp(14px, 4.2vw, 16px);
    line-height:1.4;
    padding:12px 14px;
    max-height:none;
    overflow:visible;
  }
}