/* =====================================================================
   Nature & Future — responsywność mobilna
   Dołączane do każdej strony przez <helmet>. Reguły używają !important,
   bo strona jest budowana ze stylami "inline".
   ===================================================================== */

/* Stabilny scrollbar-gutter — zapobiega przesuwaniu layoutu między stronami */
html { scrollbar-gutter: stable; }

/* Przycisk hamburgera — ukryty na desktopie, widoczny na mobile */
.nf-burger{
  display:none;
  background:rgba(20,32,20,.55);
  border:1px solid rgba(122,170,114,.45);
  border-radius:6px;
  color:#cfe3c6;
  width:46px; height:40px;
  font-size:20px; line-height:1;
  cursor:pointer;
  align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent;
}

/* Przełącznik języka PL/EN — mobilny (bezpośredni child .nf-nav)
   jest ukryty na desktopie, natomiast ten w prawej grupie akcji (zagnieżdżony
   głębiej) jest widoczny. Na mobile oba widoczne. */
.nf-nav > .nf-lang{ display:none; }

/* Panel admina — przycisk zwijania i tło szuflady: na desktopie ukryte
   (boczny panel jest tam zwykłą kolumną, zawsze widoczną). */
.nf-dash-toggle{ display:none; }
.nf-dash-backdrop{ display:none; }

/* ---------- DESKTOP: nagłówek zawsze w tym samym miejscu ----------
   Nav ma inline `display:flex; justify-content:space-between`, więc pozycja
   środkowych linków zależy od szerokości prawej grupy akcji. Ta różni się
   między stronami (np. sklep ma „Koszyk" z licznikiem zamiast „Kontakt",
   admin dodatkowo przycisk panelu) → linki „przeskakują" przy zmianie strony.
   Siatka 1fr/auto/1fr trzyma środkowe linki dokładnie na środku ekranu na
   każdej podstronie; logo zawsze przy lewej, akcje zawsze przy prawej.
   Dzieci: 1=logo, 2=PL/EN(mobile, ukryte), 3=hamburger(ukryty), 4=linki, 5=akcje.

   WAŻNE: te reguły adresują dzieci nawigacji po POZYCJI, więc działają tylko
   dla starego markupu. Strony przeniesione na nowy styl mają nav zbudowany
   z klas (.nf-nav--deep) i własne reguły w assets/nf-ui.css — dlatego są tu
   wyłączone przez :not(). Gdy ostatnia strona przejdzie na nowy styl, cały
   ten blok znika razem z pozostałymi regułami pozycyjnymi poniżej. */
@media (min-width: 861px){
  .nf-nav:not(.nf-nav--deep){
    display:grid !important;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
  }
  .nf-nav:not(.nf-nav--deep) > a:first-child{ justify-self:start; }   /* logo */
  .nf-nav:not(.nf-nav--deep) > :nth-child(4){ justify-self:center; }  /* linki */
  .nf-nav:not(.nf-nav--deep) > :nth-child(5){ justify-self:end; }     /* akcje */
}

@media (max-width: 860px){

  html, body{ overflow-x:hidden; max-width:100%; }

  /* ---------- NAWIGACJA → menu hamburger ---------- */
  .nf-nav:not(.nf-nav--deep){
    flex-wrap:wrap !important;
    padding:14px 16px !important;
    row-gap:16px !important;
  }
  .nf-nav:not(.nf-nav--deep) .nf-burger{ display:inline-flex !important; }

  /* Logo nieco mniejsze na mobile, by logo + PL/EN + hamburger zmieściły się
     w jednym rzędzie (zakres ograniczony do .nf-nav). */
  .nf-nav:not(.nf-nav--deep) img{ width:32px !important; height:32px !important; }
  .nf-nav:not(.nf-nav--deep) [style*="font-size:16px"],
  .nf-nav:not(.nf-nav--deep) [style*="font-size: 16px"]{ font-size:13px !important; }

  /* Kolejność dzieci nav: 1=logo, 2=PL/EN, 3=hamburger, 4=linki, 5=akcje.
     Linki (4) i akcje (5) chowamy do rozwijanego menu. */
  .nf-lang{
    display:inline-flex !important;
    align-items:center; gap:5px;
    margin-left:auto; margin-right:8px;
    font-family:'Space Mono',monospace; font-size:13px; letter-spacing:.04em;
    color:#b8b0a0; white-space:nowrap;
    border:1px solid rgba(122,170,114,.4); border-radius:6px;
    padding:7px 9px; cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }
  .nf-lang b{ color:#8aba82; font-weight:700; }

  .nf-nav:not(.nf-nav--deep) > :nth-child(4),
  .nf-nav:not(.nf-nav--deep) > :nth-child(5){
    display:none !important;
    flex-basis:100% !important;
    width:100% !important;
    white-space:normal !important;
  }
  .nf-nav:not(.nf-nav--deep).nf-open > :nth-child(4),
  .nf-nav:not(.nf-nav--deep).nf-open > :nth-child(5){
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:16px !important;
  }
  .nf-nav:not(.nf-nav--deep) > :nth-child(4) a{ font-size:18px !important; }

  /* ---------- UKŁAD: siatki wielokolumnowe → jedna kolumna ---------- */
  [style*="grid-template-columns"]{ grid-template-columns:1fr !important; }

  /* media nie wychodzą poza ekran */
  img, video{ max-width:100% !important; }

  /* ---------- TYPOGRAFIA: mniejsze, skalowane nagłówki na mobile ----------
     Skalujemy po TAGU (h1/h2/h3) z !important — działa też na stronach
     z komponentem (sklep/panel/konto), które re-serializują style inline,
     więc selektory [style*="font-size:.."] tam nie trafiały.
     overflow-wrap:anywhere — tylko 'anywhere' zmniejsza intrinsic min-content,
     dzięki czemu długie słowa (np. "Mikropropagacja") nie rozpychają sekcji. */
  h1, h2, h3{
    overflow-wrap:anywhere !important;
    word-break:normal !important;
    hyphens:none !important;
  }
  h1{ font-size:clamp(30px, 8.8vw, 48px) !important; line-height:1.12 !important; }
  h2{ font-size:clamp(26px, 7.2vw, 40px) !important; line-height:1.14 !important; }
  h3{ font-size:clamp(20px, 5.2vw, 28px) !important; line-height:1.2 !important; }

  /* ---------- Przełącznik kategorii (sklep) — zwężamy, by mieścił się w ekranie ----------
     Strony z komponentem re-serializują styl do formy ze spacjami ("align-items: stretch"),
     więc dopasowujemy obie warianty (zwartą i ze spacjami). */
  [style*="align-items:stretch"][style*="border-radius:8px"],
  [style*="align-items: stretch"][style*="border-radius: 8px"]{ max-width:100% !important; flex-wrap:wrap; }
  [style*="align-items:stretch"][style*="border-radius:8px"] span,
  [style*="align-items: stretch"][style*="border-radius: 8px"] span{ font-size:13px !important; }

  /* ---------- PANEL ADMINA: boczny panel jako wysuwana szuflada ----------
     Domyślnie panel jest schowany za lewą krawędzią i nie zasłania treści.
     Przycisk „☰ Menu panelu" (pływający, lewy dolny róg) wysuwa go/chowa;
     kliknięcie w przyciemnione tło lub w pozycję menu również go zamyka. */
  .nf-dash-sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:80% !important; max-width:290px;
    z-index:1200;
    transform:translateX(-100%);
    transition:transform .28s ease;
    box-shadow:0 0 46px rgba(0,0,0,.65);
    padding-top:74px !important;   /* miejsce pod pasek nawigacji na górze */
  }
  .nf-dash-sidebar.nf-dash-open{ transform:translateX(0); }

  /* Pływający przycisk zwijania/rozwijania */
  .nf-dash-toggle{
    display:inline-flex !important;
    position:fixed; left:14px; bottom:14px; z-index:1210;
    align-items:center; gap:8px;
    font-family:'Space Mono',monospace; font-size:12px; letter-spacing:.06em;
    color:#0a1a0c; background:linear-gradient(180deg,#6a9a62,#3d6a38);
    border:1px solid #8aba82; border-radius:24px;
    padding:11px 16px; cursor:pointer;
    box-shadow:0 4px 16px rgba(0,0,0,.5);
    -webkit-tap-highlight-color:transparent;
  }

  /* Przyciemnione tło — pojawia się tylko przy otwartej szufladzie */
  .nf-dash-backdrop{
    display:block; position:fixed; inset:0; z-index:1190;
    background:rgba(4,7,4,.55); opacity:0; pointer-events:none;
    transition:opacity .28s ease;
  }
  .nf-dash-sidebar.nf-dash-open ~ .nf-dash-backdrop{
    opacity:1; pointer-events:auto;
  }

  /* ---------- ODSTĘPY: duże poziome paddingi sekcji ---------- */
  [style*="padding:66px 40px 58px"],
  [style*="padding:80px 40px 100px"],
  [style*="padding:80px 40px 90px"],
  [style*="padding:60px 40px 90px"],
  [style*="padding:50px 40px 80px"],
  [style*="padding:70px 40px 40px"],
  [style*="padding:80px 40px"],
  [style*="padding:70px 40px"],
  [style*="padding:60px 40px"],
  [style*="padding:50px 40px"]{
    padding-left:20px !important;
    padding-right:20px !important;
  }
}