/* ag-chrome.css — wspolny wyglad paska nawigacji i stopki dla wszystkich ukladow.
   Na stronie zyja rownolegle trzy systemy chrome, kazdy z wlasnym markupem:
     #nav            — strony glowne, uslugi, miasta, blog listing  (.row .links .navcta .btn)
     #amchrome-nav   — poradniki, narzedzia, blog artykuly          (.r .lk .rt .cta)
     .lp-top         — landing pod Google Ads, CELOWO bez menu      (.in .r .btn)
     header.nav      — /newsletter, CELOWO bez menu                 (.wrap .logo .back)
   Ten arkusz NIE ujednolica markupu (to byloby przepisanie 226 plikow), tylko sprowadza
   ich WYGLAD do jednej specyfikacji. Wpinany tuz przed </head>, zeby wygrywac z kopiami
   CSS wklejonymi w <style> na 29 stronach.

   Specyfikacja docelowa (zmierzona, nie zgadywana):
     wysokosc 64 px, tlo rgba(11,11,12,.92) + blur, linki 14.5/600/.8, odstep 22 px,
     CTA 14 px / 11x18 / r10 / bez lamania, logo 24 px.
*/

/* --- pasek: tlo, przyklejenie, obramowanie --- */
#nav,
#amchrome-nav,
.lp-top,
header.nav {
  position: sticky;
  top: 0;
  background: rgba(11, 11, 12, .92);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}

/* --- rzad: jedna wysokosc i jedna szerokosc kolumny --- */
#nav .row,
#amchrome-nav .r,
.lp-top .in,
header.nav > .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* --- logo --- */
#nav .logo img,
#amchrome-nav .lg img,
.lp-top .logo img,
header.nav .logo img {
  height: 24px;
  width: auto;
  display: block;
}

/* --- linki menu --- */
#nav .links,
#amchrome-nav .lk {
  gap: 22px;
}

#nav .links a,
#amchrome-nav .lk a {
  font-size: 14.5px;
  font-weight: 600;
  color: rgba(255, 255, 255, .8);
  text-decoration: none;
  white-space: nowrap;
}

#nav .links a:hover,
#amchrome-nav .lk a:hover {
  color: #fff;
}

/* strona biezaca */
#nav .links a.on,
#amchrome-nav .lk a.on {
  color: #bd0d18;
}

/* --- przycisk CTA ---
   white-space:nowrap jest tu kluczowe: bez niego przycisk lamie sie na dwie linie
   i rozpycha pasek do 73 px, gdy w rzedzie jest malo miejsca. */
#nav .navcta .btn:not(.burger),
#amchrome-nav .rt .cta,
.lp-top .r .btn {
  font-size: 14px;
  font-weight: 800;
  padding: 11px 18px;
  border-radius: 10px;
  white-space: nowrap;
  line-height: 1.2;
  text-decoration: none;
}

/* --- grupa po prawej --- */
#nav .navcta,
#amchrome-nav .rt,
.lp-top .r {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* --- burger: jedno pole dotyku 44x44 w obu systemach ---
   Selektory z id, bo #amchrome-nav .bg (1,1,0) wygrywa z sama klasa.
   Klase .agm-b nadaje ag-anim.js przy budowie menu pelnoekranowego. */
#nav .agm-b,
#amchrome-nav .agm-b {
  display: none;
  width: 44px;
  height: 44px;
  padding: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: 0;
  cursor: pointer;
  font-size: 0;
  -webkit-tap-highlight-color: transparent;
}

@media (max-width: 900px) {
  #nav .agm-b,
  #amchrome-nav .agm-b {
    display: flex;
  }

  /* rozwijane menu podstron juz nie jest uzywane: zastepuje je pelnoekranowe */
  #amchrome-nav .lk,
  #amchrome-nav.open .lk {
    display: none;
  }
}

/* ==========================================================================
   STOPKA — jeden markup dla calego serwisu, oznaczony klasa .ag-foot.
   Podstrony mialy wlasna stopke #amchrome-foot z innym markupem; zostala podmieniona.
   Reguly sa KOMPLETNE, bo poradniki i narzedzia nie laduja /style.css.

   DLACZEGO .ag-foot, a nie samo `footer`: kalkulatory maja WLASNA mini-stopke
   (linijka "Kalkulator ... (C) 2026") jako bezposrednie dziecko <body>. Reguly pisane
   na `footer` malowaly ja na czarno i robily z niej pas 93 px w srodku strony.
   ========================================================================== */

.ag-foot {
  background: #070707;
  color: rgba(255, 255, 255, .7);
  padding: 50px 0 28px;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* kalkulatory maja text-align:center na przodku i stopka to dziedziczyla */
  text-align: left;
}

.ag-foot > .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}

.ag-foot .fcols {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 26px;
}

.ag-foot .logo {
  color: #fff;
  font-weight: 900;
  font-size: 19px;
}

.ag-foot .logo b {
  color: #bd0d18;
}

.ag-foot p.d {
  font-size: 13.5px;
  line-height: 1.7;
  margin-top: 10px;
  max-width: 280px;
}

.ag-foot h4 {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin: 0 0 12px;
}

.ag-foot ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ag-foot li {
  margin-bottom: 9px;
  font-size: 14px;
}

.ag-foot a {
  color: inherit;
  text-decoration: none;
}

.ag-foot a:hover {
  color: #fff;
}

.ag-foot .bottom {
  margin-top: 36px;
  padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  font-size: 12.5px;
  /* bylo .45, czyli kontrast 4,1 przy wymaganych 4,5 */
  color: rgba(255, 255, 255, .6);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 20px;
}

.ag-foot .bottom b {
  color: #bd0d18;
}

.ag-foot .bottom a {
  color: rgba(255, 255, 255, .72);
  text-decoration: underline;
  text-underline-offset: 2px;
}

@media (max-width: 760px) {
  .ag-foot .fcols {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 480px) {
  .ag-foot .fcols {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   .agnx — JEDEN komponent linkowania wewnetrznego dla calego serwisu.
   Zastepuje cztery rozne bloki, ktore dotad robily to samo w czterech stylach:
     .pwz         "Powiazane poradniki i narzedzia"  (generowany automatycznie)
     .seealso     "Od pasji do dzialajacego lokalu"  (dopisywany recznie)
     .clienttools "Narzedzia dla naszych klientow"   (upsell do materialow za logowaniem)
     oraz "Wiecej artykulow" na blogu
   Szesc roznych naglowkow na jedna funkcje. Teraz jeden komponent i jeden naglowek.
   Uzywany na poradnikach, w narzedziach i na blogu.
   ========================================================================== */

.agnx {
  --agnx-red: #bd0d18;
  font-family: 'Inter', 'Segoe UI', system-ui, sans-serif;
  /* komponent stoi poza kolumna tresci (bezposrednio w stronie), wiec sam sie ustawia:
     1140 px to pole tresci sekcji poradnika, na blogu i w narzedziach zmiesci sie w swoim
     kontenerze dzieki max-width:100% */
  max-width: min(1140px, 100%);
  margin: 46px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

@media (max-width: 760px) {
  .agnx {
    padding: 0 18px;
    margin: 34px auto;
  }
}

.agnx-eyebrow {
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--agnx-red);
  margin-bottom: 8px;
}

.agnx h2 {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -.02em;
  line-height: 1.2;
  color: #0b0b0c;
}

.agnx-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.agnx-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6e6e9;
  border-radius: 14px;
  text-decoration: none;
  transition: border-color .18s, box-shadow .18s, transform .18s;
}

.agnx-card:hover {
  border-color: var(--agnx-red);
  box-shadow: 0 10px 26px -16px rgba(11, 11, 12, .45);
  transform: translateY(-1px);
}

.agnx-tag {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--agnx-red);
}

.agnx-title {
  font-size: 16.5px;
  font-weight: 800;
  color: #0b0b0c;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.agnx-desc {
  font-size: 14px;
  line-height: 1.55;
  color: #5b6675;
}

/* --- grupa materialow za logowaniem --- */
.agnx-locked {
  margin-top: 14px;
  background: #0b0b0c;
  border-radius: 16px;
  padding: 20px 22px 22px;
  color: rgba(255, 255, 255, .78);
}

.agnx-locked h3 {
  margin: 0 0 4px;
  font-size: 16px;
  font-weight: 800;
  color: #fff;
}

.agnx-locked p {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .66);
}

.agnx-locked ul {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: grid;
  gap: 8px;
}

.agnx-locked li {
  font-size: 14.5px;
  line-height: 1.5;
  padding-left: 24px;
  position: relative;
  color: rgba(255, 255, 255, .82);
}

.agnx-locked li::before {
  /* ikona liniowa w jezyku key visual, NIE emoji (emoji odrzucone jako ikony UI).
     Wczesniej bylo emoji wstawiane kodem znaku i rozsypalo sie na "F512". */
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 15px;
  height: 15px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='0.62' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4.5' y='10.5' width='15' height='9.5' rx='2.2'/%3E%3Cpath d='M8 10.5V7.8a4 4 0 0 1 8 0v2.7'/%3E%3C/svg%3E") no-repeat center / contain;
}

.agnx-locked a {
  color: #fff;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.agnx-btn {
  display: inline-block;
  background: var(--agnx-red);
  color: #fff !important;
  font-weight: 800;
  font-size: 14.5px;
  padding: 12px 20px;
  border-radius: 11px;
  text-decoration: none !important;
}

.agnx-btn:hover {
  background: #9c0a13;
}

@media (max-width: 760px) {
  .agnx-grid {
    grid-template-columns: 1fr;
  }

  .agnx h2 {
    font-size: 21px;
  }
}

/* --- Pasek: wiecej pozycji, mniej miejsca (09.10.2026) ---------------------
   Po dodaniu „Case study” menu ma 7 pozycji plus doklejana skryptem „Strefa klienta”
   i przycisk CTA. Przy 1280 px rzad wychodzil poza kolumne 1180 px (zmierzone:
   scrollWidth 1257). Zamiast chowac pozycje, scie­śniamy rzad na srednich ekranach:
   mniejszy odstep, mniejsze pismo, wezszy przycisk. Ponizej 900 px i tak wchodzi burger. */
@media (min-width: 1221px) {
  #nav .links,
  #amchrome-nav .lk {
    gap: 12px;
  }

  #nav .links a,
  #amchrome-nav .lk a {
    font-size: 13.5px;
  }

  .navcta .btn:not(.burger),
  #amchrome-nav .rt .cta {
    font-size: 13px;
    padding: 10px 14px;
  }
}

/* Pelny rzad mies­ci sie dopiero, gdy kolumna ma swoje 1180 px, czyli od okna ~1220 px.
   Ponizej tej granicy (a powyzej 900 px, gdzie i tak wchodzil burger) chowamy liste
   pozycji i zostawiamy logo, przycisk CTA i burgera z pelnoekranowym menu z ag-anim.js.
   Wczesniej rzad po prostu wychodzil poza kolumne i rozpychal stronę w bok. */
@media (min-width: 901px) and (max-width: 1220px) {
  #nav .links,
  #amchrome-nav .lk,
  #amchrome-nav.open .lk {
    display: none;
  }

  #nav .agm-b,
  #amchrome-nav .agm-b,
  #nav .burger {
    display: flex;
  }
}

/* ============================================================
   BANER ZGODY NA COOKIES (CookieYes)
   Duza nakladka na srodku ekranu, zeby decyzja nie byla pomijana.
   Wczesniej byl to maly box w lewym dolnym rogu.

   UWAGA: klase .cky-hide dodaje CookieYes po wyborze uzytkownika.
   Nie wolno jej nadpisywac, bo przyciemnienie zostaloby na ekranie na stale.
   Dlatego ukladem sterujemy tylko przez :not(.cky-hide).

   Te reguly sa tu, a nie w <style id="ag-cky"> w naglowku stron,
   bo ag-chrome.css laduje sie na KAZDEJ podstronie. Strony miejskie
   /marketing-restauracji-* nie maja bloku ag-cky i do tej pory
   pokazywaly surowy baner CookieYes.
   ============================================================ */

html .cky-consent-container.cky-hide { display: none !important; }

html .cky-consent-container:not(.cky-hide) {
  position: fixed !important;
  inset: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 24px !important;
  background: rgba(8, 8, 10, .74) !important;
  -webkit-backdrop-filter: blur(3px) !important;
  backdrop-filter: blur(3px) !important;
  overflow-y: auto !important;
  z-index: 2147483000 !important;
}

html .cky-consent-container:not(.cky-hide) .cky-consent-bar {
  width: min(100%, 640px) !important;
  max-width: 640px !important;
  margin: auto !important;
  padding: 34px 34px 30px !important;
  border-radius: 20px !important;
}

html .cky-consent-container .cky-title { font-size: 23px !important; }

html .cky-consent-container .cky-notice-des,
html .cky-consent-container .cky-notice-des * {
  font-size: 15px !important;
  line-height: 1.6 !important;
}

html .cky-consent-container .cky-btn {
  font-size: 15px !important;
  padding: 14px 22px !important;
}

@media (max-width: 600px) {
  html .cky-consent-container:not(.cky-hide) {
    padding: 14px !important;
    align-items: flex-end !important;
  }
  html .cky-consent-container:not(.cky-hide) .cky-consent-bar {
    padding: 26px 22px 22px !important;
  }
  html .cky-consent-container .cky-title { font-size: 20px !important; }
}

/* Wyglad marki dla banera. Powiela blok ag-cky z naglowka,
   zeby strony miejskie tez byly w kolorach Advantage. */
html .cky-consent-container .cky-consent-bar,
html .cky-preference-center {
  background: #0b0b0c !important;
  border: 1px solid rgba(255, 255, 255, .10) !important;
  box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .85) !important;
  font-family: 'Inter', system-ui, -apple-system, sans-serif !important;
}
html .cky-title,
html .cky-preference-title,
html .cky-accordion-btn { color: #fff !important; font-weight: 800 !important; letter-spacing: -.02em !important; }
html .cky-notice-des, html .cky-notice-des *,
html .cky-accordion-header-des, html .cky-accordion-header-des *,
html .cky-empty-cookies-text { color: rgba(255, 255, 255, .72) !important; }
html .cky-notice-des a, html .cky-show-desc-btn { color: #ff5f68 !important; }
html .cky-btn { border-radius: 10px !important; font-weight: 700 !important; min-width: 158px !important; }
html .cky-btn-accept { background: #bd0d18 !important; border: 1px solid #bd0d18 !important; color: #fff !important; }
html .cky-btn-accept:hover { background: #9c0a13 !important; border-color: #9c0a13 !important; }
html .cky-btn-reject, html .cky-btn-preferences { background: #26262b !important; border: 1px solid rgba(255, 255, 255, .32) !important; color: #fff !important; }
html .cky-btn-reject:hover, html .cky-btn-preferences:hover { background: #34343b !important; border-color: rgba(255, 255, 255, .55) !important; }
html .cky-btn-customize { background: transparent !important; border: 1px solid transparent !important; color: rgba(255, 255, 255, .7) !important; min-width: 0 !important; text-decoration: underline !important; }
html .cky-btn-customize:hover { color: #fff !important; }
html .cky-preference-header, html .cky-footer-wrapper,
html .cky-accordion-item, html .cky-horizontal-separator { border-color: rgba(255, 255, 255, .12) !important; }
html .cky-always-active { color: #7ec98f !important; }
html .cky-footer-shadow { display: none !important; }
html .cky-btn-revisit-wrapper { background: #bd0d18 !important; }
html .cky-notice-btn-wrapper { display: flex !important; flex-wrap: wrap !important; gap: 10px !important; align-items: center !important; }
html .cky-notice-btn-wrapper .cky-btn-accept,
html .cky-notice-btn-wrapper .cky-btn-reject { flex: 1 1 45% !important; width: auto !important; margin: 0 !important; min-width: 150px !important; }
html .cky-notice-btn-wrapper .cky-btn-customize { flex: 1 1 100% !important; order: 3 !important; padding: 4px 0 !important; text-align: left !important; }
html .cky-notice-btn-wrapper .cky-btn-accept { order: 1 !important; }
html .cky-notice-btn-wrapper .cky-btn-reject { order: 2 !important; }
/* linki do strony szefa kuchni Grzegorza Lisa (21.10.2026) */
a[href="/grzegorz-lis"]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
a[href="/grzegorz-lis"]:hover{text-decoration-thickness:2px}
@media (max-width: 600px) {
  html .cky-notice-btn-wrapper .cky-btn-accept,
  html .cky-notice-btn-wrapper .cky-btn-reject { width: 100% !important; flex: 0 0 auto !important; }
}
