/* ==========================================================================
   Mega Menu ESG  —  Max Mega Menu
   --------------------------------------------------------------------------
   Lokalizacja pliku : /wp-content/themes/<child>/css/mega-menu.css
   Ladowany przez    : functions.php  (wp_enqueue_style, zaleznosc: 'megamenu')
   Co stylizuje      : panel mega menu "ESG" — uklad 5 kolumn w stylu
                       materiality, z nieklikalnymi naglowkami kategorii.
   Gdzie zmieniac    : kolory i odstepy w sekcji :root ponizej (jedno miejsce).
   Zasada dzialania  : naglowek kategorii = pozycja menu, ktora MA dzieci;
                       link uslugi = pozycja BEZ dzieci. Nie trzeba niczego
                       recznie oznaczac — wystarczy poprawna hierarchia w menu.
   UWAGA (slug)      : 'primary' = slug lokalizacji menu. Jesli w zrodle strony
                       wrapper nazywa sie inaczej (np. #mega-menu-wrap-main),
                       podmien WSZYSTKIE wystapienia 'primary' w tym pliku.
   ========================================================================== */

:root {
  --mm-accent:  #922221;   /* akcent firmowy (czerwien jak tlo headera): gorna linia, podkreslenia, hover */
  --mm-header:  #1f1f1f;   /* kolor naglowkow kategorii (nieklikalnych)        */
  --mm-link:    #46504b;   /* kolor linkow uslug                               */
  --mm-panel:   rgba(255,255,255,.82);   /* tlo panelu — polprzezroczyste pod GLASS */
  --mm-divider: #e7ece9;   /* pionowe linie miedzy kolumnami                   */
  --mm-gap:     26px;      /* wewnetrzny odstep kolumn                         */
}

/* --- PANEL (caly rozwijany obszar pod "ESG") ------------------------------- */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > ul.mega-sub-menu {
  background: var(--mm-panel) !important;
  padding: 32px 36px !important;
  border-top: 3px solid var(--mm-accent) !important;
  box-shadow: 0 18px 44px rgba(60, 16, 16, .14) !important;
  border-radius: 0 0 20px 20px !important;          /* glebsze zaokraglenie ramki */
  backdrop-filter: blur(16px) saturate(140%) !important;          /* GLASS — szklany, rozmyty panel jak u materiality */
  -webkit-backdrop-filter: blur(16px) saturate(140%) !important;
}

/* --- KOLUMNY + linie dzialowe --------------------------------------------- */
#mega-menu-wrap-primary .mega-menu-column {
  padding: 0 var(--mm-gap) !important;
  border-left: 1px solid var(--mm-divider) !important;
}
#mega-menu-wrap-primary .mega-menu-column:first-child {
  border-left: 0 !important;
}

/* --- NAGLOWEK KATEGORII = pozycja z dziecmi (nieklikalna) ------------------ */
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item-has-children > a.mega-menu-link {
  pointer-events: none !important;       /* brak klikniecia na naglowku        */
  cursor: default !important;
  color: var(--mm-header) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  padding: 0 0 9px !important;
  margin-bottom: 8px !important;
  border-bottom: 2px solid var(--mm-accent) !important;
  background: transparent !important;
}
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item-has-children > a.mega-menu-link .mega-indicator {
  display: none !important;              /* ukryj strzalke przy naglowku       */
}
#mega-menu-wrap-primary .mega-menu-column .mega-menu-item-has-children {
  margin-bottom: 24px !important;        /* odstep miedzy grupami w kolumnie   */
}

/* --- LINKI USLUG = pozycje bez dzieci ------------------------------------- */
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link {
  color: var(--mm-link) !important;
  font-size: 14.5px !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  padding: 7px 0 !important;
  background: transparent !important;
  transition: color .15s ease !important;
}
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:hover {
  color: var(--mm-accent) !important;
  font-weight: 500 !important;        /* lekkie pogrubienie, BEZ przesuwania */
  background: transparent !important;
}
/* klikniecie + aktualnie otwarta strona = mocne pogrubienie */
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item:not(.mega-menu-item-has-children) > a.mega-menu-link:active,
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item.mega-current-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary .mega-sub-menu .mega-menu-item.current-menu-item > a.mega-menu-link {
  color: var(--mm-accent) !important;
  font-weight: 700 !important;
  background: transparent !important;
}

/* --- MOBILE: naglowki jako etykiety sekcji, bez linii dzialowych ----------- */
@media (max-width: 768px) {
  #mega-menu-wrap-primary .mega-menu-column {
    border-left: 0 !important;
    padding: 0 14px !important;
  }
  #mega-menu-wrap-primary .mega-sub-menu .mega-menu-item-has-children > a.mega-menu-link {
    margin-top: 10px !important;
  }
}

/* ==========================================================================
   ESG — uklad jak materiality: 2 szerokie kolumny + PIONOWY scroll (rolka)
   --------------------------------------------------------------------------
   Rozpoznaje panel ESG po linku pozycji (.../esg/) — BEZ klasy CSS.
   Dlaczego grid, a nie column-count: natywne kolumny CSS NIE umieja
   przewijac w pionie (przelewaja sie w bok). Grid potrafi — wiec przy
   wysokim panelu rolka przewija SAM panel, nie strone.
   - 2 szerokie kolumny  -> kazda usluga miesci sie w jednej linii,
   - grid-auto-flow:column -> grupy ukladaja sie pionowo w kolumnie
     (jak u materiality), a nie wierszami,
   - 3 wiersze = 5 grup w 2 kolumnach (4. i 5. grupa pod spodem).
   Gdy DOLOZYSZ 6. kategorie — daj znac, podbije liczbe wierszy.
   ========================================================================== */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(> a.mega-menu-link[href$="/esg/"]) > ul.mega-sub-menu {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;  /* 2 szerokie kolumny */
  grid-template-rows: repeat(3, min-content) !important;        /* 5 grup -> 2 kolumny po max 3 */
  grid-auto-flow: column !important;                            /* wypelniaj kolumnami, nie wierszami */
  column-gap: 52px !important;
  row-gap: 22px !important;
  align-content: start !important;
  padding: 28px 40px !important;

  /* ROLKA przewija panel, nie strone */
  max-height: calc(100vh - 130px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;

  /* pionowa kreska dzialowa miedzy kolumnami (grid nie ma column-rule) */
  background-image: linear-gradient(var(--mm-divider), var(--mm-divider)) !important;
  background-size: 1px 100% !important;
  background-position: 50% 0 !important;
  background-repeat: no-repeat !important;

  /* SZEROKOSC: panel na caly pasek menu (parent li ma position:static nizej) */
  left: 0 !important;
  right: auto !important;
  width: 100% !important;
  max-width: 1280px !important;     /* gorny limit, by kolumny nie byly za szerokie */
  box-sizing: border-box !important;
}
/* zdejmujemy kotwiczenie panelu pod sama pozycja "ESG" — dzieki temu
   width:100% = pelna szerokosc paska menu, a nie waski wycinek pod "ESG" */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(> a.mega-menu-link[href$="/esg/"]) {
  position: static !important;
}
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(> a.mega-menu-link[href$="/esg/"]) > ul.mega-sub-menu > li.mega-menu-item {
  display: block !important;
  width: auto !important;
  float: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}
/* naglowek kategorii: podkreslenie na cala szerokosc kolumny (jak u materiality) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(> a.mega-menu-link[href$="/esg/"]) > ul.mega-sub-menu > li.mega-menu-item > a.mega-menu-link {
  display: block !important;
}

/* ==========================================================================
   ESG — krotkie tytuly zostaja w 1 linii; najdluzszy moze sie zawinac, zeby
   NIE wchodzic w srodkowa kreske. Przy szerokim panelu prawie wszystko
   miesci sie w jednej linii i tak.
   ========================================================================== */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:has(> a.mega-menu-link[href$="/esg/"]) > ul.mega-sub-menu .mega-menu-item > a.mega-menu-link {
  white-space: normal !important;
  overflow-wrap: anywhere !important;
}