/* ==========================================================================
   NOWY DESIGN ELDAGO -> Kadence
   Źródło: eldago-netlify-prezentacja-2026-09-25 (tokeny.css, baza.css,
   typografia.css, komponenty.css). Wszystko jest ograniczone do
   body.nowy-design, więc stare strony zostają bez zmian.
   ========================================================================== */

/* --- Font: Geist (zmienny 100-900), self-hosted, latin + latin-ext --- */
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonty/geist-100-900-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Geist'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonty/geist-100-900-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================================
   1. ZMIENNE KADENCE (paleta, fonty, szerokości)
   ========================================================================== */
body.nowy-design {
  /* Paleta główna – role zgodne z Kadence */
  --global-palette1: #FFD600;  /* akcent (przyciski, wyróżnienia)        = --akcent */
  --global-palette2: #EFC300;  /* akcent hover                           = --akcent-hover */
  --global-palette3: #101418;  /* najciemniejszy: nagłówki, tekst, tła ciemne = --tekst / --tlo-ciemne */
  --global-palette4: #3F4A5C;  /* tekst drugorzędny, leady               = --tekst-drugi */
  --global-palette5: #59647A;  /* tekst wygaszony, podpowiedzi, menu     = --tekst-wygaszony */
  --global-palette6: #C9D0D9;  /* mocne linie, obramowania pól           = --linia-mocna */
  --global-palette7: #E4E8ED;  /* linie, podziały                        = --linia */
  --global-palette8: #F6F8FA;  /* jasne tło sekcji                       = --tlo-alt */
  --global-palette9: #FFFFFF;  /* tło                                    = --tlo */

  /* Paleta dodatkowa */
  --global-palette11: #13612E; /* sukces   = --sukces */
  --global-palette13: #C20000; /* czerwień z logo = --czerwien */
  --global-palette9rgb: 255, 255, 255;

  /* Linki: w nowym designie dziedziczą kolor tekstu i mają podkreślenie */
  --global-palette-highlight: var(--global-palette3);
  --global-palette-highlight-alt: var(--global-palette3);
  --global-palette-highlight-alt2: var(--global-palette9);

  /* Przyciski globalne Kadence */
  --global-palette-btn-bg: var(--global-palette1);
  --global-palette-btn-bg-hover: var(--global-palette2);
  --global-palette-btn: var(--global-palette3);
  --global-palette-btn-hover: var(--global-palette3);
  --global-palette-btn-sec-bg: transparent;
  --global-palette-btn-sec-bg-hover: var(--global-palette8);
  --global-palette-btn-sec: var(--global-palette3);
  --global-palette-btn-sec-hover: var(--global-palette3);

  /* Presety kolorów WordPressa. Klasy .has-theme-palette-X-color i
     -background-color mają !important, ale czytają te zmienne, a Kadence
     wpisuje w nie hexy ze starej palety. Przepinamy je na nową paletę. */
  --wp--preset--color--theme-palette-1: var(--global-palette1);
  --wp--preset--color--theme-palette-2: var(--global-palette2);
  --wp--preset--color--theme-palette-3: var(--global-palette3);
  --wp--preset--color--theme-palette-4: var(--global-palette4);
  --wp--preset--color--theme-palette-5: var(--global-palette5);
  --wp--preset--color--theme-palette-6: var(--global-palette6);
  --wp--preset--color--theme-palette-7: var(--global-palette7);
  --wp--preset--color--theme-palette-8: var(--global-palette8);
  --wp--preset--color--theme-palette-9: var(--global-palette9);
  --wp--preset--color--theme-palette-10: var(--global-palette10);
  --wp--preset--color--theme-palette-11: var(--global-palette11);
  --wp--preset--color--theme-palette-12: var(--global-palette12);
  --wp--preset--color--theme-palette-13: var(--global-palette13);
  --wp--preset--color--theme-palette-14: var(--global-palette14);
  --wp--preset--color--theme-palette-15: var(--global-palette15);

  /* Fonty */
  --global-body-font-family: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --global-heading-font-family: var(--global-body-font-family);
  --global-primary-nav-font-family: var(--global-body-font-family);

  /* Szerokości: kontener 1200 px, wąski 760 px, padding 24 px.
     calc-content-width w Kadence ma wpisane 1290px na sztywno, więc liczymy od nowa. */
  --global-content-width: 1200px;
  --global-content-wide-width: calc(1200px + 230px);
  --global-content-narrow-width: 760px;
  --global-content-edge-padding: 24px;
  --global-calc-content-width: calc(1200px - var(--global-content-edge-padding) - var(--global-content-edge-padding));
  --wp--style--global--content-size: var(--global-calc-content-width);

  /* ------------------------------------------------------------------
     Tokeny nowego designu (nazwy z prezentacji), podpięte pod paletę
     Kadence tam, gdzie się da – jedno źródło prawdy.
     ------------------------------------------------------------------ */
  --akcent: var(--global-palette1);
  --akcent-hover: var(--global-palette2);
  --akcent-ciemny: #C9A800;
  --akcent-tekst: #705D00;       /* żółty jako tekst na jasnym tle, 4,5:1 */
  --akcent-tint: #FFFBE6;
  --czerwien: var(--global-palette13);
  --czerwien-tint: #FDF2F2;
  --sukces: var(--global-palette11);
  --sukces-tint: #EEF7F1;

  --tlo: var(--global-palette9);
  --tlo-alt: var(--global-palette8);
  --tlo-ciemne: var(--global-palette3);
  --tlo-ciemne-alt: #1A202C;
  --tlo-ciemne-karta: #1E252F;

  --tekst: var(--global-palette3);
  --tekst-drugi: var(--global-palette4);
  --tekst-wygaszony: var(--global-palette5);
  --tekst-na-ciemnym: #FFFFFF;
  --tekst-na-ciemnym-drugi: #CBD4E0;

  --linia: var(--global-palette7);
  --linia-mocna: var(--global-palette6);
  --linia-ciemna: rgba(255, 255, 255, .14);

  --rozmiar-hero: clamp(2.25rem, 1.5rem + 2.6vw, 4rem);
  --rozmiar-h2: clamp(1.75rem, 1.35rem + 1.55vw, 2.75rem);
  --rozmiar-h3: clamp(1.125rem, 1rem + .45vw, 1.375rem);
  --rozmiar-h4: 1.125rem;
  --rozmiar-lead: clamp(1.0625rem, 1rem + .2vw, 1.1875rem);
  --rozmiar-tekst: 1rem;
  --rozmiar-maly: .875rem;
  --rozmiar-mikro: .75rem;

  --o-1: 4px; --o-2: 8px; --o-3: 12px; --o-4: 16px; --o-5: 24px; --o-6: 32px;
  --o-7: 40px; --o-8: 56px; --o-9: 72px; --o-10: 96px; --o-11: 128px;
  --sekcja-y: clamp(56px, 4vw + 32px, 96px);
  --sekcja-y-gesta: clamp(40px, 3vw + 24px, 64px);

  --radius-s: 8px;          /* małe elementy, ikony */
  --radius-m: 12px;         /* pola formularzy */
  --radius-l: 18px;         /* karty, zdjęcia, panele */
  --radius-pigulka: 999px;  /* przyciski, tagi */

  --cien-s: 0 1px 2px rgba(16, 20, 24, .04), 0 2px 8px rgba(16, 20, 24, .04);
  --cien-m: 0 4px 24px rgba(151, 151, 151, .12);
  --cien-l: 0 12px 40px rgba(16, 20, 24, .10);
  --cien-panel: 0 24px 60px rgba(16, 20, 24, .22);

  --czas-krotki: 150ms;
  --czas-bazowy: 300ms;
  --czas-dlugi: 600ms;
  --easing: cubic-bezier(.44, 0, .56, 1);
  --easing-out: cubic-bezier(0, 0, .3, 1);
}

/* ==========================================================================
   2. TYPOGRAFIA I PODSTAWY
   Kadence wpisuje rozmiary h1–h6 i body na sztywno, więc nadpisujemy selektorami.
   ========================================================================== */
body.nowy-design {
  background: var(--tlo);
  -webkit-font-smoothing: antialiased;
}
body.nowy-design,
:where(body.nowy-design) :is(input, select, optgroup, textarea) {
  font-family: var(--global-body-font-family);
  font-size: var(--rozmiar-tekst);
  line-height: 1.65;
  color: var(--tekst);
}

/* :where = zero specyficzności dla body, więc każdy komponent z klasą (.x h2) wygrywa */
:where(body.nowy-design) :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--global-heading-font-family);
  color: var(--tekst);
  text-wrap: balance;
}
:where(body.nowy-design) h1 { font-size: var(--rozmiar-hero); font-weight: 650; line-height: 1.1;  letter-spacing: -.035em; }
:where(body.nowy-design) h2 { font-size: var(--rozmiar-h2);   font-weight: 650; line-height: 1.15; letter-spacing: -.03em; }
:where(body.nowy-design) h3 { font-size: var(--rozmiar-h3);   font-weight: 650; line-height: 1.3;  letter-spacing: -.018em; }
:where(body.nowy-design) h4 { font-size: var(--rozmiar-h4);   font-weight: 700; line-height: 1.35; letter-spacing: -.01em; }
:where(body.nowy-design) h5 { font-size: 1rem;                font-weight: 700; line-height: 1.4; }
:where(body.nowy-design) h6 { font-size: var(--rozmiar-maly); font-weight: 700; line-height: 1.4; color: var(--tekst-drugi); }

body.nowy-design p { text-wrap: pretty; }

/* Linki w treści: specyficzność jak zwykłe `a`, więc każdy własny komponent
   (np. .eldago-lp-terminy .wiersz__rezerwuj) ma pierwszeństwo. */
:where(body.nowy-design .entry-content) a:where(:not(.button, .kb-button, .wp-block-button__link, .wp-element-button)) {
  color: inherit;
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, currentColor 40%, transparent);
  text-underline-offset: 3px;
}
:where(body.nowy-design .entry-content) a:where(:not(.button, .kb-button, .wp-block-button__link, .wp-element-button)):hover {
  text-decoration-color: currentColor;
}

body.nowy-design :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--tekst);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* Liczby w cenach równej szerokości */
body.nowy-design .cena,
body.nowy-design .woocommerce-Price-amount { font-variant-numeric: tabular-nums; }

/* Menu mobilne: highlight jest teraz ciemny, więc aktywna pozycja w szufladzie dostaje akcent */
body.nowy-design .mobile-navigation ul li.current-menu-item > a,
body.nowy-design .mobile-navigation ul li.current-menu-item.menu-item-has-children > .drawer-nav-drop-wrap,
body.nowy-design .mobile-toggle-open-container .menu-toggle-open:hover {
  color: var(--akcent);
}

/* ==========================================================================
   3. PRZYCISKI (globalne Kadence, core i Kadence Blocks)
   Pigułka, 600, strzałka w kółku jak w prezentacji.
   ========================================================================== */
/* Klasy WP/Kadence: styl wymuszony. Gołe <button>/<input> bez podbitej specyficzności,
   żeby przyciski we własnych komponentach zachowały swój wygląd. */
body.nowy-design :is(.button, .wp-block-button__link, .wp-element-button, .kb-button),
:where(body.nowy-design) :is(button, input[type="button"], input[type="reset"], input[type="submit"]) {
  border-radius: var(--radius-pigulka);
  font-family: var(--global-body-font-family);
  font-size: var(--rozmiar-tekst);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -.01em;
  box-shadow: none;
  transition: background var(--czas-bazowy) var(--easing),
              color var(--czas-bazowy) var(--easing),
              border-color var(--czas-bazowy) var(--easing),
              transform var(--czas-krotki) var(--easing);
}
body.nowy-design :is(.button, .wp-block-button__link, .wp-element-button, .kb-button),
:where(body.nowy-design) input[type="submit"] {
  padding: 13px 26px;
}
body.nowy-design :is(.button, .wp-block-button__link, .wp-element-button, .kb-button):hover {
  transform: translateY(-1px);
  box-shadow: none;
}
body.nowy-design :is(.button, .wp-block-button__link, .wp-element-button, .kb-button):active {
  transform: translateY(0) scale(.985);
}

/* Warianty – klasę wpisujesz w bloku przycisku w „Dodatkowe klasy CSS”.
   Selektory łapią klasę na samym linku i na wrapperze bloku. */
body.nowy-design :is(.btn--drugi.kb-button, .btn--drugi .kb-button, .btn--drugi.wp-block-button__link, .btn--drugi .wp-block-button__link) {
  background: transparent; color: var(--tekst); border: 1px solid var(--linia-mocna);
}
body.nowy-design :is(.btn--drugi.kb-button, .btn--drugi .kb-button, .btn--drugi.wp-block-button__link, .btn--drugi .wp-block-button__link):hover {
  background: var(--tlo-alt); color: var(--tekst); border-color: var(--tekst);
}

body.nowy-design :is(.btn--ciemny.kb-button, .btn--ciemny .kb-button, .btn--ciemny.wp-block-button__link, .btn--ciemny .wp-block-button__link) {
  background: var(--tekst); color: #fff; border: 1px solid transparent;
}
body.nowy-design :is(.btn--ciemny.kb-button, .btn--ciemny .kb-button, .btn--ciemny.wp-block-button__link, .btn--ciemny .wp-block-button__link):hover {
  background: #2A323D; color: #fff;
}

body.nowy-design :is(.btn--na-ciemnym.kb-button, .btn--na-ciemnym .kb-button, .btn--na-ciemnym.wp-block-button__link, .btn--na-ciemnym .wp-block-button__link) {
  background: rgba(255, 255, 255, .08); color: #fff; border: 1px solid var(--linia-ciemna);
}
body.nowy-design :is(.btn--na-ciemnym.kb-button, .btn--na-ciemnym .kb-button, .btn--na-ciemnym.wp-block-button__link, .btn--na-ciemnym .wp-block-button__link):hover {
  background: rgba(255, 255, 255, .16); color: #fff;
}

body.nowy-design :is(.btn--maly.kb-button, .btn--maly .kb-button, .btn--maly.wp-block-button__link, .btn--maly .wp-block-button__link) {
  padding: 9px 18px; font-size: var(--rozmiar-maly);
}
body.nowy-design :is(.btn--pelny.kb-button, .btn--pelny .kb-button, .btn--pelny.wp-block-button__link, .btn--pelny .wp-block-button__link) {
  width: 100%; justify-content: center;
}

/* Strzałka w kółku na końcu CTA (jak .btn::after w prezentacji) */
body.nowy-design :is(.btn--strzalka.kb-button, .btn--strzalka .kb-button, .btn--strzalka.wp-block-button__link, .btn--strzalka .wp-block-button__link) {
  display: inline-flex; align-items: center; gap: var(--o-3);
  padding-right: 8px;
}
body.nowy-design :is(.btn--strzalka.kb-button, .btn--strzalka .kb-button, .btn--strzalka.wp-block-button__link, .btn--strzalka .wp-block-button__link)::after {
  content: "\2192";
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; flex: none;
  border-radius: 50%;
  background: color-mix(in srgb, currentColor 14%, transparent);
  font-family: sans-serif; font-size: 18px; font-weight: 700; line-height: 1;
  transition: background var(--czas-bazowy) var(--easing), transform var(--czas-bazowy) var(--easing);
}
body.nowy-design :is(.btn--strzalka.kb-button, .btn--strzalka .kb-button, .btn--strzalka.wp-block-button__link, .btn--strzalka .wp-block-button__link):hover::after {
  background: color-mix(in srgb, currentColor 26%, transparent);
  transform: translateX(3px);
}
body.nowy-design :is(.btn--maly.btn--strzalka .kb-button, .btn--maly.btn--strzalka.kb-button, .btn--maly.btn--strzalka .wp-block-button__link)::after {
  width: 26px; height: 26px; font-size: 15px;
}

@media (max-width: 420px) {
  body.nowy-design :is(.kb-button, .wp-block-button__link) { white-space: normal; text-align: center; }
}

/* Link ze strzałką / żółtym podkreśleniem */
body.nowy-design a.link-strzalka,
body.nowy-design .link-strzalka a {
  display: inline-flex; align-items: center; gap: var(--o-2);
  font-weight: 600; text-decoration: none !important;
  border-bottom: 2px solid var(--akcent); padding-bottom: 2px;
}

/* ==========================================================================
   4. FORMULARZE
   ========================================================================== */
:where(body.nowy-design) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea) {
  width: 100%;
  min-height: 48px;
  padding: 11px 16px;
  background: var(--tlo);
  color: var(--tekst);
  border: 1px solid var(--linia-mocna);
  border-radius: var(--radius-m);
  box-shadow: none;
  transition: border-color var(--czas-bazowy) var(--easing), box-shadow var(--czas-bazowy) var(--easing);
}
:where(body.nowy-design) :is(input, textarea)::placeholder { color: var(--tekst-wygaszony); }
:where(body.nowy-design) :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="date"], select, textarea):focus {
  outline: none;
  border-color: var(--tekst);
  box-shadow: 0 0 0 3px rgba(255, 214, 0, .45);
}
:where(body.nowy-design) label { font-size: var(--rozmiar-maly); font-weight: 600; }
@media (max-width: 720px) {
  :where(body.nowy-design) :is(input, select, textarea) { font-size: 16px; } /* bez zoomu na iOS */
}

/* ==========================================================================
   5. KLASY DO BLOKÓW (Kadence Row Layout, Section, Advanced Text, core)
   Wpisujesz je w „Zaawansowane → Dodatkowe klasy CSS”.
   ========================================================================== */

/* --- Sekcje: na Row Layout padding Kadence siedzi na .kt-row-column-wrap --- */
body.nowy-design .sekcja:not(.kb-row-layout-wrap),
body.nowy-design .kb-row-layout-wrap.sekcja > .kt-row-column-wrap {
  padding-top: var(--sekcja-y);
  padding-bottom: var(--sekcja-y);
}
body.nowy-design .sekcja--gesta:not(.kb-row-layout-wrap),
body.nowy-design .kb-row-layout-wrap.sekcja--gesta > .kt-row-column-wrap {
  padding-top: var(--sekcja-y-gesta);
  padding-bottom: var(--sekcja-y-gesta);
}
body.nowy-design .sekcja--alt   { background-color: var(--tlo-alt); }
body.nowy-design .sekcja--tint  { background-color: var(--akcent-tint); }
body.nowy-design .sekcja--ciemna { background-color: var(--tlo-ciemne); }

/* --- Ciemne powierzchnie: jeden przełącznik --- */
body.nowy-design :is(.na-ciemnym, .sekcja--ciemna) { color: var(--tekst-na-ciemnym); }
:where(body.nowy-design) :is(.na-ciemnym, .sekcja--ciemna) :where(h1, h2, h3, h4, h5, h6, p, li, a:not(.kb-button, .wp-block-button__link, .button)) {
  color: var(--tekst-na-ciemnym);
}
body.nowy-design :is(.na-ciemnym, .sekcja--ciemna) :is(.lead, .naglowek-sekcji p) { color: var(--tekst-na-ciemnym-drugi); }
body.nowy-design :is(.na-ciemnym, .sekcja--ciemna) .etykieta { color: var(--akcent); }
body.nowy-design :is(.na-ciemnym, .sekcja--ciemna) :where(a, button, input, select, summary):focus-visible { outline-color: var(--akcent); }

/* --- Nagłówek sekcji: etykieta + tytuł + lead --- */
body.nowy-design .naglowek-sekcji { margin-bottom: var(--o-7); max-width: 46rem; }
body.nowy-design .naglowek-sekcji p { color: var(--tekst-drugi); font-size: var(--rozmiar-lead); margin-bottom: 0; }
body.nowy-design .naglowek-sekcji.srodek { margin-inline: auto; text-align: center; }

/* --- Etykieta nad tytułem (z żółtą kreską) --- */
body.nowy-design .etykieta {
  display: inline-block;
  font-size: var(--rozmiar-mikro);
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--tekst-drugi);
  margin-bottom: var(--o-3);
}
body.nowy-design .etykieta::before {
  content: '';
  display: inline-block;
  width: 18px; height: 2px;
  background: var(--akcent);
  vertical-align: middle;
  margin-right: var(--o-2);
  translate: 0 -2px;
}

/* --- Lead --- */
body.nowy-design .lead,
body.nowy-design .lead p { font-size: var(--rozmiar-lead); line-height: 1.6; color: var(--tekst-drugi); max-width: 66ch; }

/* --- Tekst pomocniczy --- */
body.nowy-design .tekst-drugi     { color: var(--tekst-drugi); }
body.nowy-design .tekst-wygaszony { color: var(--tekst-wygaszony); }
body.nowy-design .tekst-maly      { font-size: var(--rozmiar-maly); }
body.nowy-design .tekst-akcent    { color: var(--akcent-tekst); }
body.nowy-design .srodek          { text-align: center; margin-inline: auto; }

/* --- Karta (Section / kolumna Kadence albo core Group) --- */
body.nowy-design .karta {
  display: flex; flex-direction: column;
  background: var(--tlo);
  border: 1px solid var(--linia);
  border-radius: var(--radius-l);
  overflow: hidden;
  transition: transform var(--czas-bazowy) var(--easing),
              box-shadow var(--czas-bazowy) var(--easing),
              border-color var(--czas-bazowy) var(--easing);
}
body.nowy-design .karta > .kt-inside-inner-col { border-radius: inherit; }
body.nowy-design .karta--hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--cien-l);
  border-color: var(--linia-mocna);
}
body.nowy-design .karta--wyrozniona { border-color: var(--akcent-ciemny); box-shadow: 0 0 0 3px var(--akcent-tint); }
body.nowy-design .karta--ciemna { background: var(--tlo-ciemne-karta); border-color: var(--linia-ciemna); }
body.nowy-design .karta img { border-radius: 0; }

/* Zaokrąglone zdjęcia i panele */
body.nowy-design .zaokraglone,
body.nowy-design .zaokraglone img { border-radius: var(--radius-l); overflow: hidden; }

/* Cena na karcie */
body.nowy-design .cena {
  font-family: var(--global-heading-font-family);
  font-size: 1.375rem; font-weight: 800; letter-spacing: -.02em;
}
body.nowy-design .cena small { font-size: var(--rozmiar-maly); font-weight: 500; color: var(--tekst-drugi); }

/* Cienie */
body.nowy-design .cien-s { box-shadow: var(--cien-s); }
body.nowy-design .cien-m { box-shadow: var(--cien-m); }
body.nowy-design .cien-l { box-shadow: var(--cien-l); }

/* ==========================================================================
   6. RUCH
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  body.nowy-design *, body.nowy-design *::before, body.nowy-design *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}