/* ============================================================================
 * asound — MENU MOBILNE v2 (drawer nawigacji), 2026-08-14
 * Enqueue: mu-plugin asound-nav-v2.php (poza bundlem Vite — wariant A, no-build).
 *
 * ZASADA NADRZEDNA (MUST C1 z konsultacji Codex):
 * app.css NIE owija wlasnych regul w @layer, a `@import "tailwindcss"` wklada
 * utilities do `@layer utilities`. CSS BEZ warstwy bije KAZDY CSS w warstwie,
 * niezaleznie od specyficznosci — czyli nasze reguly nadpisalyby `2xl:hidden`
 * i `hidden 2xl:flex` takze na desktopie. Dlatego CALY ten plik siedzi w
 * DWOCH @media i nigdzie indziej:
 *   1) @media (max-width: 89.999rem)  — drawer (breakpoint 2xl = 90rem)
 *   2) @media (min-width: 90rem)      — pas bezpieczenstwa: display:none
 * Zadna regula nie moze wyjsc poza te dwa bloki. Weryfikacja: patrz NOTES.md.
 *
 * Wartosci (px / kolory / czasy / easing) — SPEC.md + makieta_menu_mobile.html
 * (style .nd-*). Namespace: .nd-* (drawer), .as-nav2-* (stan i triggery).
 * ========================================================================== */

@media (max-width: 89.999rem) {

  /* ---------------------------------------------------------------------
   * 1. Kontener drawera
   * Klasa stanu to .as-nav2-open — NIE .mobile_menu_active (MUST Z1):
   * stary kontroler w app.js:394-418 nadal zyje i toggluje tamta klase,
   * a app.css:306-350 nadal ma pod nia 9 regul. Rozdzielamy je calkowicie.
   * height: 100dvh + calc() z admin barem (MUST X6).
   * ------------------------------------------------------------------- */
  #site_nav_container.as-nav2 {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    top: var(--wp-admin--admin-bar--height, 0px);
    left: 0;
    right: 0;
    margin-left: 32px;
    height: 100vh;
    height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
    /* 2000: nad .plp2-mbar (140, pasek Filtry/Sortuj przykrywal drawer — bug
       2026-08-17), nad .mini-cart (1000) i wszystkimi sticky barami; pod
       Complianz (kontener 9999) i admin barem (99999). Okno 1001-9997. */
    z-index: 2000;
    background: #fff;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .2s cubic-bezier(.3, 0, .8, .15), visibility 0s .2s;
  }

  #site_nav_container.as-nav2.as-nav2-open {
    transform: none;
    visibility: visible;
    transition: transform .3s cubic-bezier(.05, .7, .1, 1);
  }

  /* #site_nav ma tailwindowe `flex items-center gap-3` — na mobile to kolumna. */
  #site_nav_container.as-nav2 > #site_nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  #site_nav_container.as-nav2 > #site_nav > div {
    width: 100%;
  }

  /* ---------------------------------------------------------------------
   * 2. Scrim — reuzywamy istniejacy <div class="sitebackdrop"> (header:18).
   * Stan otwarcia trzyma body.as-nav2-locked (nie .dialog_opened — ta klasa
   * nalezy do starego kontrolera i tu jej nie dotykamy).
   * ------------------------------------------------------------------- */
  /* Stan spoczynkowy MUSI juz byc position:fixed — inaczej przy zamykaniu
     element wraca do flow natychmiast i fade-out (200 ms) nie jest widoczny.
     Przezroczysty + pointer-events:none => nic nie przechwytuje klikniec. */
  .sitebackdrop {
    position: fixed;
    inset: 0;
    background: #000;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: 1990; /* pod drawerem (2000), nad paskami PLP (140) — przyciemnia je */
    transition: opacity .2s linear, visibility 0s .2s;
  }

  body.as-nav2-locked .sitebackdrop {
    opacity: .5;
    visibility: visible;
    pointer-events: auto;
    transition: opacity .2s linear;
  }

  /* Scroll lock; position:fixed + top:-scrollY dokłada JS (iOS). */
  body.as-nav2-locked {
    overflow: hidden;
  }

  /* ---------------------------------------------------------------------
   * 3. Tap targety triggerow headera — 48x48 BEZ zmiany layoutu (MUST X5).
   * Padding zostaje p-2 (40x40), hit-area rozszerza pseudo-element, wiec
   * wysokosc headera (57 px) i pozycja logo nie moga drgnac.
   * ------------------------------------------------------------------- */
  .as-nav2-trigger {
    position: relative;
  }

  .as-nav2-trigger::after {
    content: "";
    position: absolute;
    inset: -4px;
  }

  /* WARIANT A = ZERO buildu Vite, wiec w markupie wolno uzywac WYLACZNIE
     utility, ktore juz sa w zbudowanym app.css. `border-0` i `bg-transparent`
     tam NIE istnieja (preflight i tak daje `*{border:0 solid}` oraz
     `button{background-color:#0000;color:inherit;font:inherit}`), dlatego
     reset trzymamy tutaj — jawnie, zamiast liczyc na preflight. */
  button.as-nav2-trigger {
    background: transparent;
    border: 0;
    color: inherit;
    font: inherit;
  }

  /* ---------------------------------------------------------------------
   * 4. Naglowek drawera
   * ------------------------------------------------------------------- */
  .nd-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 12px 12px 20px;
  }

  .nd-head .nd-logo {
    width: 105px;
    height: auto;
  }

  .nd-close {
    width: 48px;
    height: 48px;
    border-radius: 99px;
    background: #f6f6f6;
    border: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #000;
    flex: none;
    padding: 0;
  }

  .nd-close svg {
    width: 24px;
    height: 24px;
  }

  /* ---------------------------------------------------------------------
   * 5. Pole wyszukiwania (kontener nasz, forma nalezy do AWS)
   * ------------------------------------------------------------------- */
  .nd-search {
    margin: 2px 20px 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #f6f6f6;
    border-radius: 10px;
    padding: 0 6px 0 14px;
    height: 48px;
  }

  .nd-search .nd-search-ic {
    display: flex;
    flex: none;
    color: #888;
  }

  .nd-search .nd-search-ic svg {
    width: 20px;
    height: 20px;
  }

  .nd-search .nd-search-go {
    width: 36px;
    height: 36px;
    border-radius: 99px;
    background: #da0e16;
    color: #fff;
    border: 0;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }

  .nd-search .nd-search-go svg {
    width: 18px;
    height: 18px;
    color: #fff;
  }

  /* --- AWS wewnatrz drawera -------------------------------------------
   * app.css:302 nadaje polu `.aws-wrapper .aws-search-field` pigulke 272 px
   * z paddingiem 48 px i tlem — w drawerze musi byc plaskie, 100% i 16 px
   * (ponizej 16 px iOS robi auto-zoom przy focusie). Czesc deklaracji ma
   * !important, bo tamta regula uzywa `@apply !rounded-full` itd.
   * ------------------------------------------------------------------- */
  #mobile_nav_search .aws-container {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
  }

  #mobile_nav_search .aws-search-form,
  #mobile_nav_search .aws-wrapper {
    width: 100%;
    height: 100%;
    position: relative;
  }

  #mobile_nav_search .aws-search-label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }

  #mobile_nav_search .aws-wrapper .aws-search-field {
    width: 100% !important;
    height: 100%;
    padding: 0 !important;
    margin: 0;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    font-family: inherit;
    font-size: 16px !important;
    line-height: 1.2;
    color: #000;
  }

  #mobile_nav_search .aws-wrapper .aws-search-field::placeholder {
    color: #454545;
    opacity: 1;
  }

  #mobile_nav_search .aws-wrapper .aws-search-field:focus {
    background: transparent !important;
  }

  /* MUST X1: app.css:888 wymusza `.aws-search-result { @apply !w-[400px] }`.
     UWAGA (zweryfikowane 2026-08-17): AWS wstrzykuje kontener wynikow jako
     dziecko <body> (#aws-search-result-N), NIE do #mobile_nav_search — dlatego
     scope po body.as-nav2-locked (klasa obecna tylko przy otwartym drawerze;
     numeracja -N jest krucha). !important przebija tez inline style AWS-a.
     left 52 / right 26 = krawedz drawera 32 + marginesy pola (.nd-search). */
  body.as-nav2-locked .aws-search-result {
    width: auto !important;
    max-width: none !important;
    left: 52px !important;
    right: 26px !important;
    z-index: 2010 !important; /* kontener zyje w <body> — musi byc NAD drawerem (2000) */
    max-height: 60vh;
    overflow-y: auto;
  }
  /* Stary guard zostaje na wypadek zmiany miejsca wstrzykiwania przez AWS. */
  #mobile_nav_search .aws-search-result {
    width: auto !important;
    max-width: 100%;
    left: 0;
    right: 0;
    max-height: 60vh;
    overflow-y: auto;
  }

  /* ---------------------------------------------------------------------
   * 6. Akordeony L1 (Panele akustyczne / Uslugi)
   * ------------------------------------------------------------------- */
  .nd-row {
    border-bottom: 1px solid #e7e7e7;
  }

  .nd-row--first {
    border-top: 1px solid #e7e7e7;
  }

  .nd-l1 {
    display: flex;
    align-items: stretch;
  }

  .nd-l1 > a {
    flex: 1;
    display: flex;
    align-items: center;
    padding-left: 24px;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    min-height: 56px;
    text-decoration: none;
  }

  .nd-exp {
    width: 56px;
    min-height: 56px;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    position: relative;
    padding: 0;
    flex: none;
  }

  /* Krotki separator 22 px przed chevronem (SPEC: nie pelna kreska). */
  .nd-exp::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 22px;
    width: 1px;
    background: #e7e7e7;
  }

  /* Wiersz "Uslugi": caly wiersz jest przyciskiem (brak strony nadrzednej). */
  .nd-exp--full {
    width: 100%;
    flex: 1;
    justify-content: space-between;
    padding: 0 16px 0 24px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 500;
    color: #000;
    text-align: left;
  }

  .nd-exp--full::before {
    display: none;
  }

  .nd-exp svg {
    width: 24px;
    height: 24px;
    flex: none;
    transition: transform .15s cubic-bezier(.2, 0, 0, 1);
  }

  .nd-row.active .nd-exp svg {
    transform: rotate(180deg);
  }

  .nd-acc {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .2s cubic-bezier(.2, 0, 0, 1);
  }

  .nd-row.active > .nd-acc,
  .nd-langwrap.active > .nd-acc {
    grid-template-rows: 1fr;
  }

  /* visibility:hidden na zwinietej zawartosci jest OBOWIAZKOWE: samo
     grid-template-rows:0fr + overflow:hidden daje wysokosc 0, ale linki
     ZOSTAJA w tab orderze i w drzewie dostepnosci. Opoznienie 0s .2s
     trzyma je widoczne przez caly czas animacji zwijania. */
  .nd-acc-in {
    overflow: hidden;
    min-height: 0;
    visibility: hidden;
    transition: visibility 0s .2s;
  }

  .nd-row.active > .nd-acc > .nd-acc-in,
  .nd-langwrap.active > .nd-acc > .nd-acc-in {
    visibility: visible;
    transition: visibility 0s 0s;
  }

  .nd-acc-pad {
    background: #fafafa;
    border-top: 1px solid #e7e7e7;
  }

  .nd-acc-pad a {
    display: flex;
    align-items: center;
    min-height: 48px;
    padding: 12px 20px 12px 24px;
    font-size: 15px;
    font-weight: 400;
    color: #454545;
    text-decoration: none;
    border-bottom: 1px solid #efefef;
    line-height: 1.35;
  }

  .nd-acc-pad a:last-child {
    border-bottom: 0;
  }

  .nd-acc-pad a.seeall {
    color: #da0e16;
    font-weight: 500;
    gap: 8px;
  }

  .nd-acc-pad a.seeall svg {
    width: 18px;
    height: 18px;
    flex: none;
  }

  .nd-acc-pad a.seeall .cnt {
    color: #888;
    font-weight: 400;
    font-size: 13px;
  }

  /* Biezaca kategoria — suma paddingu zachowana (3 + 21 = 24). */
  .nd-acc-pad a[aria-current="page"] {
    border-left: 3px solid #da0e16;
    padding-left: 21px;
    color: #0c0c0c;
    font-weight: 500;
  }

  /* ---------------------------------------------------------------------
   * 7. Blok linkow wtornych
   * ------------------------------------------------------------------- */
  .nd-sec {
    background: #f6f6f6;
    border-bottom: 1px solid #e7e7e7;
    padding: 6px 0;
  }

  .nd-sec a {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
    padding: 0 20px 0 24px;
    font-size: 15px;
    font-weight: 400;
    color: #3d3d3d;
    text-decoration: none;
  }

  .nd-sec a .nd-ic {
    display: flex;
    flex: none;
    color: #5d5d5d;
  }

  .nd-sec a .nd-ic svg {
    width: 20px;
    height: 20px;
  }

  /* ---------------------------------------------------------------------
   * 8. Przelacznik jezyka
   * Wnetrze akordeonu to ORYGINALNE wyjscie WPML (do_action) — klasy
   * wpml-ls-item / wpml-ls-link / wpml-ls-current-language musza przezyc,
   * bo wpml_xdomain_data.css_selector = "wpml-ls-item" (MUST X2). Stylujemy
   * je, nie podmieniamy.
   * ------------------------------------------------------------------- */
  .nd-langwrap {
    border-bottom: 1px solid #e7e7e7;
  }

  .nd-langrow {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-height: 56px;
    padding: 0 8px 0 24px;
    border: 0;
    background: #fff;
    cursor: pointer;
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    color: #000;
    text-align: left;
  }

  .nd-langrow .g {
    display: flex;
    flex: none;
    color: #000;
  }

  .nd-langrow .g svg {
    width: 20px;
    height: 20px;
  }

  .nd-langrow .val {
    margin-left: auto;
    font-weight: 400;
    color: #5d5d5d;
  }

  .nd-langrow .ch {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    flex: none;
  }

  .nd-langrow .ch svg {
    width: 22px;
    height: 22px;
    transition: transform .15s cubic-bezier(.2, 0, 0, 1);
  }

  .nd-langwrap.active .nd-langrow .ch svg {
    transform: rotate(180deg);
  }

  .nd-langopts {
    background: #fafafa;
  }

  .nd-langopts .wpml-ls,
  .nd-langopts .wpml-ls ul,
  .nd-langopts .wpml-ls li {
    display: block;
    margin: 0;
    padding: 0;
    list-style: none;
    float: none;
    width: auto;
    border: 0;
  }

  /* !important na 4 deklaracjach jest KONIECZNE: app.css (bundle Vite) ma
     `.wpml-ls-link { padding-inline/-block, font-size, font-weight }` z
     !important — bez kontr-!important lista jezykow dostaje 16px/14px/500
     (zweryfikowane CDP 2026-08-17). border-radius: 0 kasuje radius-lg stamtad. */
  .nd-langopts .wpml-ls-link {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    padding: 0 24px 0 58px !important;
    font-size: 15px !important;
    font-weight: 400 !important;
    border-radius: 0 !important;
    color: #454545;
    text-decoration: none;
    background: #fafafa;
  }

  /* Marker 18 px: pusty spacer, a przy biezacym jezyku — check. */
  .nd-langopts .wpml-ls-link::before {
    content: "";
    width: 18px;
    height: 18px;
    flex: none;
    background: no-repeat center / contain;
  }

  .nd-langopts .wpml-ls-current-language .wpml-ls-link {
    color: #da0e16;
    font-weight: 500 !important; /* musi przebic nasze wlasne 400 !important wyzej */
  }

  .nd-langopts .wpml-ls-current-language .wpml-ls-link::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23da0e16' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  }

  /* WPML dokleja "(Angielski)" w .wpml-ls-display — SPEC chce samych nazw natywnych. */
  .nd-langopts .wpml-ls-display {
    display: none;
  }

  .nd-langopts .wpml-ls-native {
    display: inline;
  }

  /* ---------------------------------------------------------------------
   * 9. Focus-visible (SPEC: outline #da0e16)
   * ------------------------------------------------------------------- */
  #site_nav_container.as-nav2 a:focus-visible,
  #site_nav_container.as-nav2 button:focus-visible,
  #site_nav_container.as-nav2 input:focus-visible,
  .as-nav2-trigger:focus-visible {
    outline: 2px solid #da0e16;
    outline-offset: 2px;
  }

  #site_nav_container.as-nav2 button:focus:not(:focus-visible),
  .as-nav2-trigger:focus:not(:focus-visible) {
    outline: none;
  }

  /* ---------------------------------------------------------------------
   * 10. prefers-reduced-motion: samo opacity 100 ms, bez transform (SPEC)
   * ------------------------------------------------------------------- */
  @media (prefers-reduced-motion: reduce) {
    #site_nav_container.as-nav2 {
      transform: none;
      opacity: 0;
      transition: opacity .1s linear, visibility 0s .1s;
    }

    #site_nav_container.as-nav2.as-nav2-open {
      opacity: 1;
      transition: opacity .1s linear;
    }

    .sitebackdrop {
      transition: opacity .1s linear, visibility 0s .1s;
    }

    body.as-nav2-locked .sitebackdrop {
      transition: opacity .1s linear;
    }

    .nd-acc,
    .nd-exp svg,
    .nd-langrow .ch svg {
      transition: none;
    }
  }
}

/* ============================================================================
 * PAS BEZPIECZENSTWA — desktop >= 1440 px.
 * Elementy drawera maja w markupie `2xl:hidden`, ale gdyby utility Tailwinda
 * kiedykolwiek zostalo przebite (albo klasa zgubiona przy edycji), desktop
 * musi zostac pixel-identyczny. Nic tu nie stylujemy — tylko chowamy.
 * ========================================================================== */
@media (min-width: 90rem) {
  .nd-head,
  .nd-search-wrap,
  .nd-search,
  .nd-row,
  .nd-sec,
  .nd-langwrap {
    display: none !important;
  }
}