/* SEMANAT — NAV-01 (14.10.2026): panele działów w menu głównym + klejony, kompaktowy nagłówek. Rozszerza wzorzec panelu
   „Baza wiedzy” z SITE TOOLS 01 (ikona · tytuł · opis · podświetlenie). Jeden komponent dla PL / EN / DE — treść to konfiguracja
   w motywie (functions.php: semanat_nav_config). Kolory, odstępy i stany w jednym miejscu (zmienne niżej), bez bibliotek.
   Próg desktop/mobile = próg nagłówka Astry (1200 px, filtr astra_header_break_point). */
:root {
  --sem-nav-hover-bg: #DCEBF8;              /* --sem-blue-100: mocniejsze niż dawne #EEF5FB, nadal jasne; tekst #1B2228 ≈ 13:1 */
  --sem-nav-hover-ico: #0F3B78;             /* akcent ikony po najechaniu */
  --sem-nav-open-bg: #EEF5FB;               /* przycisk otwartego działu */
  --sem-nav-focus: #1580C9;                 /* obrys fokusu klawiatury */
  --sem-nav-panel-bg: #fff;
  --sem-nav-panel-border: var(--sem-border, #DDE3E7);
  --sem-nav-panel-shadow: 0 22px 44px -20px rgba(11, 31, 58, .38), 0 2px 6px rgba(11, 31, 58, .06);
  --sem-nav-radius: 14px;
  --sem-nav-item-radius: 10px;
  --sem-nav-gap: 2px;
  --sem-nav-ico: #fff;
  --sem-nav-ico-bg: linear-gradient(135deg, #0F3B78, #1580C9);
  --sem-nav-ico-bg-2: linear-gradient(135deg, #1580C9, #2E9A5B);
  --sem-nav-ico-bg-3: linear-gradient(135deg, #1E7A46, #2E9A5B);
  --sem-nav-t: var(--sem-ink, #1B2228);
  --sem-nav-d: var(--sem-muted, #66737D);
  --sem-nav-k: #0F3B78;
  --sem-nav-k-bg: #EEF5FB;
  --sem-nav-wide: 680px;
  --sem-nav-narrow: 380px;
  --sem-nav-ease: var(--sem-ease, cubic-bezier(.2,.7,.2,1));
  --sem-hdr-h: 152px;                       /* wysokość klejonego bloku (pasek + nagłówek) — skrypt podaje aktualną */
}

/* ---------------------------------------------------------------- pozycja menu: odnośnik + strzałka */
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel { position: relative; }
/* strzałka siedzi w prawym marginesie odnośnika (bez dodatkowej szerokości: 8 pozycji i 5 strzałek mieszczą się w jednym wierszu od 1200 px) */
/* odstępy pozycji najwyższego poziomu: reguła Astry (.ast-builder-menu-1 … .menu-link { padding }) ma wyższą swoistość — stąd selektor z id
   nagłówka. 8 px z boków (zamiast 14) i 28 px po prawej przy strzałce (8 + 20): etykieta nie wchodzi pod strzałkę (odstęp ≥ 5 px), a 8 pozycji
   menu PL mieści się w jednym wierszu także na 1200 px (budżet szerokości: +4 px względem układu bez strzałek; zmierzone sondą). */
body.semanat-v2 #ast-desktop-header .ast-builder-menu .main-header-menu > .menu-item > .menu-link { padding-left: 8px; padding-right: 8px; }
body.semanat-v2 #ast-desktop-header .ast-builder-menu .main-header-menu > .menu-item.sem-nav-has-panel > .menu-link.sem-nav-link,
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-link { padding-right: 28px; }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-link::after { right: 28px; }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 24px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 7px; color: var(--sem-ink, #1B2228); cursor: pointer; -webkit-appearance: none; appearance: none; box-shadow: none; line-height: 1;
  transition: background-color 140ms var(--sem-nav-ease), color 140ms var(--sem-nav-ease);
}
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow svg { width: 11px; height: 11px; transition: transform 160ms var(--sem-nav-ease); }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow:hover { background: var(--sem-nav-hover-bg); color: var(--sem-nav-hover-ico); }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel.is-open > .sem-nav-arrow { background: var(--sem-nav-open-bg); color: var(--sem-nav-hover-ico); }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel.is-open > .sem-nav-arrow svg { transform: rotate(180deg); }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel.is-open > .sem-nav-link { color: var(--sem-green-600, #1E7A46); }
body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow:focus-visible { outline: 3px solid var(--sem-nav-focus); outline-offset: 1px; }
/* most dla kursora między pozycją a panelem — panel nie znika w szczelinie */
.sem-nav-has-panel.is-open::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 12px; }

/* ---------------------------------------------------------------- panel (desktop) */
.sem-nav-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 1200;
  width: var(--sem-nav-narrow); max-width: calc(100vw - 32px); padding: 10px; background: var(--sem-nav-panel-bg); border: 1px solid var(--sem-nav-panel-border);
  border-radius: var(--sem-nav-radius); box-shadow: var(--sem-nav-panel-shadow); overflow: hidden; text-align: left;
}
.sem-nav-panel--wide { width: var(--sem-nav-wide); }
.sem-nav-panel.is-right { left: auto; right: 0; }
.sem-nav-panel::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--sem-grad, linear-gradient(90deg, #0F3B78, #1F9AD6, #2E9A5B)); }
.sem-nav-panel[hidden] { display: none; }
.sem-nav-grid { display: grid; grid-template-columns: 1fr; gap: 6px 14px; margin-top: 4px; }
.sem-nav-panel--wide .sem-nav-grid { grid-template-columns: 1fr 1fr; }
.sem-nav-group__t { margin: 6px 12px 4px; font-size: 11.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sem-nav-d); }
.sem-nav-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sem-nav-gap); }
.sem-nav-list li { margin: 0; padding: 0; }
body.semanat-v2 .sem-nav-it {
  display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 12px; row-gap: 1px; align-items: start;
  padding: 9px 12px; border-radius: var(--sem-nav-item-radius); text-decoration: none; color: var(--sem-nav-t); line-height: 1.35; background: transparent;
  transition: background-color 140ms var(--sem-nav-ease); outline: none;
}
body.semanat-v2 .sem-nav-it:hover { background: var(--sem-nav-hover-bg); color: var(--sem-nav-t); }
body.semanat-v2 .sem-nav-it:focus-visible { background: var(--sem-nav-hover-bg); box-shadow: inset 0 0 0 2px var(--sem-nav-focus); }
body.semanat-v2 .sem-nav-it[aria-current="page"] { box-shadow: inset 3px 0 0 var(--sem-green-500, #2E9A5B); background: #F4F8FB; }
.sem-nav-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; color: var(--sem-nav-ico); background: var(--sem-nav-ico-bg); flex: none; }
.sem-nav-ico svg { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sem-nav-list li:nth-child(3n+2) .sem-nav-ico { background: var(--sem-nav-ico-bg-2); }
.sem-nav-list li:nth-child(3n) .sem-nav-ico { background: var(--sem-nav-ico-bg-3); }
body.semanat-v2 .sem-nav-it:hover .sem-nav-ico, body.semanat-v2 .sem-nav-it:focus-visible .sem-nav-ico { box-shadow: 0 0 0 2px var(--sem-nav-hover-ico); }
.sem-nav-t { font-weight: 600; font-size: 15px; color: var(--sem-nav-t); }
.sem-nav-k { display: inline-block; vertical-align: 1px; margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 10.5px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--sem-nav-k); background: var(--sem-nav-k-bg); }
.sem-nav-d { font-size: 13px; color: var(--sem-nav-d); }
body.semanat-v2 .sem-nav-it--cta .sem-nav-t { color: var(--sem-green-600, #1E7A46); }
.sem-nav-foot { margin-top: 8px; padding: 8px 4px 2px; border-top: 1px solid var(--sem-nav-panel-border); display: flex; flex-direction: column; gap: 4px; }
body.semanat-v2 .sem-nav-all { display: inline-block; padding: 8px 12px; border-radius: 8px; font-weight: 600; font-size: 14px; color: var(--sem-green-600, #1E7A46); text-decoration: none; align-self: flex-start; }
body.semanat-v2 .sem-nav-all:hover, body.semanat-v2 .sem-nav-all:focus-visible { background: var(--sem-nav-hover-bg); outline: none; }
body.semanat-v2 .sem-nav-all:focus-visible { box-shadow: inset 0 0 0 2px var(--sem-nav-focus); }
.sem-nav-panel--offers .sem-nav-d { font-size: 12.5px; }

/* ---------------------------------------------------------------- klejony nagłówek (pasek języka + nagłówek Astry) */
.sem-hdr { position: sticky; top: 0; z-index: 1100; background: #fff; }
.sem-hdr .ast-primary-header-bar { transition: none; }
/* Astra animuje „all 0.2s” na odnośnikach menu i logo — wysokość wiersza zmieniałaby się przez 200 ms, a przekładka pod nagłówkiem jest
   liczona raz; zostają tylko przejścia kolorów */
body.semanat-v2 .sem-hdr #ast-desktop-header .main-header-menu > .menu-item > .menu-link { transition-property: color, background-color, border-color; }
body.semanat-v2 .sem-hdr .custom-logo-link, body.semanat-v2 .sem-hdr .custom-logo-link img { transition: none; }
body.semanat-v2 .sem-hdr .site-header .custom-logo-link img { transition: none; } /* zmiana wysokości logo bez animacji: przekładka pod nagłówkiem liczona raz, treść nie przesuwa się w trakcie przejścia */
body.semanat-v2.sem-hdr-compact .sem-hdr { box-shadow: 0 2px 10px rgba(11, 31, 58, .08); }
body.semanat-v2.sem-hdr-compact .sem-hdr .sem-topbar__in { min-height: 44px; }   /* 0.16.17: pasek z wejściem „SEMANAT w praktyce” zostaje czytelny po pomniejszeniu (było 26 px) */
body.semanat-v2.sem-hdr-compact .sem-hdr .site-header .custom-logo-link img { max-height: 44px; }
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-desktop-header .ast-primary-header-bar { padding-top: 5px; padding-bottom: 5px; }
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-desktop-header .site-primary-header-wrap { min-height: 0; }
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-desktop-header .main-header-menu > .menu-item > .menu-link,
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-desktop-header .main-header-menu > .menu-item { line-height: 50px; }
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-desktop-header .ast-custom-button { padding-top: 11px; padding-bottom: 11px; min-height: 0; }
body.semanat-v2.sem-hdr-compact .sem-hdr #ast-mobile-header .custom-logo-link img { max-height: 36px; }
html { scroll-padding-top: calc(var(--sem-hdr-h) + 12px); }
.sem-hdr-spacer { height: 0; }

/* ---------------------------------------------------------------- menu mobilne (szuflada Astry, < 1200 px): akordeon */
@media (max-width: 1198.99px) {
  /* nazwa działu i przycisk-strzałka w JEDNYM wierszu (odnośnik Astry ma width:100% → bez flex-basis 0 i min-width 0 strzałka spadała pod nazwę,
     np. „Oferty”), panel w następnym wierszu (flex-basis 100%) */
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel { display: flex; flex-wrap: wrap; align-items: stretch; }
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-link { flex: 1 1 0%; min-width: 0; width: auto; padding-right: 20px; }
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow { flex: 0 0 48px; }
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-panel { flex: 0 0 calc(100% - 20px); }   /* 20 px = margin-left panelu; 100% wystawało poza ekran */
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow { position: static; transform: none; width: 48px; height: auto; min-height: 44px; margin: 0; border-radius: 0; border-left: 1px solid var(--sem-nav-panel-border); }
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow svg { width: 14px; height: 14px; }
  .sem-nav-has-panel.is-open::after { display: none; }
  .sem-nav-panel, .sem-nav-panel--wide, .sem-nav-panel.is-right { position: static; width: 100%; max-width: none; box-shadow: none; border: 0; border-left: 3px solid var(--sem-blue-100, #DCEBF8); border-radius: 0; margin: 0 0 8px 20px; padding: 2px 0 2px 6px; flex: 0 0 calc(100% - 20px); width: auto; box-sizing: border-box; }   /* width:100% + margin-left 20px wystawało 20 px poza ekran (ucięte etykiety) */
  .sem-nav-panel::before { display: none; }
  .sem-nav-panel--wide .sem-nav-grid { grid-template-columns: 1fr; }
  body.semanat-v2 .sem-nav-it { padding: 10px 10px; }
  .sem-nav-ico { width: 34px; height: 34px; border-radius: 9px; }
  .sem-nav-ico svg { width: 18px; height: 18px; }
  body.semanat-v2 .sem-nav-it { grid-template-columns: 34px 1fr; }
  .sem-nav-d { font-size: 12.5px; }
  .sem-nav-t, .sem-nav-d, .sem-nav-group__t { min-width: 0; overflow-wrap: anywhere; }   /* długie wyrazy (DE) zawijają się, nic nie wychodzi poza kartę */
  /* wybór języka w szufladzie (kopia paska języka, bo pasek nie jest przyklejony na telefonie) */
  .sem-lang--drawer { padding: 12px 20px 20px; border-top: 1px solid var(--sem-nav-panel-border); }
  .sem-lang--drawer .sem-lang__list { display: flex; gap: 14px; margin: 0; padding: 0; list-style: none; }
  .sem-lang--drawer a { font-weight: 600; font-size: 14px; }
  .sem-lang--drawer a[aria-current="page"] { color: var(--sem-green-600, #1E7A46); }
  /* telefon: po przewinięciu pasek języka znika z klejonego bloku (wybór języka jest w szufladzie) — zostaje jeden wiersz: logo · szukaj · menu */
  body.semanat-v2.sem-hdr-compact .sem-hdr .sem-topbar { display: none; }
  body.semanat-v2.sem-hdr-compact .sem-hdr #ast-mobile-header .ast-primary-header-bar,
  body.semanat-v2.sem-hdr-compact .sem-hdr #ast-mobile-header .site-primary-header-wrap { padding-top: 6px; padding-bottom: 6px; min-height: 0; line-height: 44px; } /* min-height Astry (68–88 px) nie trzyma wysokości; wiersz = przyciski 44 px */
}
@media (prefers-reduced-motion: reduce) {
  body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow, body.semanat-v2 .main-header-menu .menu-item.sem-nav-has-panel > .sem-nav-arrow svg,
  body.semanat-v2 .sem-nav-it, body.semanat-v2 .sem-hdr .site-header .custom-logo-link img { transition: none; }
}

/* ==========================================================================================
 * SEMANAT W PRAKTYCE (0.16.17) — wejście w nagłówku, wariant B. Komputer (≥ 1200 px): zielony przycisk w górnym pasku przed „Szukaj na stronie”,
 * ta sama wysokość i wielkość tekstu co wyszukiwarka (36 px / 15 px); wyszukiwarka i języki trochę większe. Telefon i tablet (< 1200 px):
 * jeden zielony pasek pod nagłówkiem. Oba w klejonym bloku #sem-hdr — widoczne podczas przewijania i po pomniejszeniu nagłówka.
 * ========================================================================================== */
.sem-practice-pill, .sem-practice-bar { display: none; }
.sem-practice-pill svg, .sem-practice-bar svg { width: 16px; height: 16px; flex: none; fill: currentColor; }
@media (min-width: 1200px) {
  body.semanat-v2 .sem-topbar__in { min-height: 48px; gap: 14px; }
  body.semanat-v2 .sem-search-open.sem-search-open--bar { font-size: 15px; min-height: 36px; padding: 6px 16px 6px 13px; gap: 8px; }
  body.semanat-v2 .sem-search-open.sem-search-open--bar svg { width: 18px; height: 18px; }
  body.semanat-v2 .sem-practice-pill { display: inline-flex; align-items: center; gap: 9px; min-height: 36px; padding: 6px 18px 6px 14px; border-radius: 999px; box-sizing: border-box;
    background: var(--sem-green-600, #1E7A46); border: 1px solid var(--sem-green-600, #1E7A46); color: #fff; font-size: 15px; font-weight: 700; letter-spacing: .01em;
    line-height: 1.2; text-decoration: none; white-space: nowrap; }
  body.semanat-v2 .sem-practice-pill:hover, body.semanat-v2 .sem-practice-pill:focus, body.semanat-v2 .sem-practice-pill[aria-current] { background: var(--sem-green-700, #175F37); border-color: var(--sem-green-700, #175F37); color: #fff; }
  body.semanat-v2 .sem-practice-pill:focus-visible { outline: 2px solid var(--sem-blue-600, #0B6BB5); outline-offset: 2px; }
  body.semanat-v2 .sem-topbar .sem-lang a { font-size: 15px; padding: 6px 3px; }
  body.semanat-v2 .sem-topbar .sem-lang__list li + li::before { margin: 0 .7em; }
}
@media (max-width: 1199px) {
  body.semanat-v2 .sem-practice-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 46px; padding: 8px 16px; box-sizing: border-box;
    background: var(--sem-green-600, #1E7A46); color: #fff; text-decoration: none; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; line-height: 1.25; }
  body.semanat-v2 .sem-practice-bar:hover, body.semanat-v2 .sem-practice-bar:focus, body.semanat-v2 .sem-practice-bar[aria-current] { background: var(--sem-green-700, #175F37); color: #fff; }
  body.semanat-v2 .sem-practice-bar:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
  .sem-practice-bar__t { display: inline-flex; align-items: center; gap: 10px; min-width: 0; }
  .sem-practice-bar__go { flex: none; font-size: 14px; font-weight: 600; }
  body.semanat-v2 .sem-topbar .sem-lang a { font-size: 15px; padding: 7px 3px; }
}
/* 0.16.17: menu EN ma 8 pozycji z „Offers” i dłuższe nazwy — przy 1200–1279 px brakowało ok. 30 px do jednego rzędu. Bez zmniejszania tekstu
   i bez przesuwania progu menu mobilnego: mniejsze odstępy (lewy pozycji, prawy tylko przy pozycjach bez strzałki) i węższy przycisk „CONTACT US”. */
@media (min-width: 1200px) and (max-width: 1279px) {
  html[lang^="en"] body.semanat-v2 #ast-desktop-header .main-header-menu > .menu-item > .menu-link { padding-left: 6px; }
  html[lang^="en"] body.semanat-v2 #ast-desktop-header .main-header-menu > .menu-item:not(.sem-nav-has-panel) > .menu-link { padding-right: 6px; }
  html[lang^="en"] body.semanat-v2 #ast-desktop-header .ast-header-button-1 .ast-custom-button { padding-left: 20px; padding-right: 20px; }
}