/* =========================================================================
   VETKA — biblioteka UI v2 · warstwa 1: tokeny i most
   =========================================================================
   Ten plik działa na CAŁYM serwisie. Nie stylizuje komponentów — ustala
   słownik wartości i przedefiniowuje zmienne obcych systemów, z których
   korzysta wygenerowany CSS Elementora i motywu nadrzędnego.

   Dlaczego to wystarcza: 164 z 207 reguł font-size w CSS strony i praktycznie
   cała stopka odwołują się do `var(--e-global-*)`. Przedefiniowanie tych
   zmiennych zmienia paletę i typografię u źródła, zamiast nadpisywać
   selektory widok po widoku.

   Specyficzność: Kit deklaruje swoje zmienne na `.elementor-kit-<id>`, czyli
   na <body> — (0,1,0). Samo `body` to (0,0,1) i przegrywa. Stąd klasa
   `vetka-ui` dokładana w inc/v2/loader.php: `body.vetka-ui` daje (0,1,1)
   i wygrywa bez `!important` oraz bez wiązania się z numerem Kitu.

   Bez @layer. Reguły spoza warstw kaskadowych wygrywają z regułami wewnątrz
   nich niezależnie od specyficzności, a CSS Elementora w żadnej warstwie nie
   jest — opakowanie tego pliku w @layer odebrałoby mu skuteczność.
   ========================================================================= */

:root {
	/* --- Powierzchnie ---------------------------------------------------- */
	--v2-bg:          #FFFFFF;
	--v2-bg-soft:     #F6F6F4;  /* karty, hover, sekcje alternatywne          */
	--v2-dark:        #0F1A14;  /* płaszczyzny kontrastowe: kontakt, stopka   */

	/* --- Tekst ----------------------------------------------------------- */
	--v2-ink:         #121512;  /* nagłówki i tekst główny · 18,7:1 na bieli  */
	--v2-ink-2:       #3A3F39;  /* tekst drugorzędny · 10,8:1                 */
	--v2-ink-3:       #6B7268;  /* podpisy, etykiety, meta · 5,0:1            */
	--v2-on-accent:   #FFFFFF;  /* tekst na akcencie i na ciemnym tle         */
	--v2-on-dark:     rgba(255, 255, 255, .78);
	--v2-placeholder: rgba(255, 255, 255, .5);

	/* --- Portret zastępczy ------------------------------------------------
	   Kwadrat z monogramem tam, gdzie w CPT nie ma jeszcze zdjęcia osoby.
	   Kontrast jest niski celowo i nie łamie WCAG: monogram jest ozdobą
	   (`aria-hidden`), a nie treścią — informację niesie nazwisko pod nim.  */
	--v2-avatar-bg:   #E9EBE7;
	--v2-avatar-ink:  #A7ADA3;

	/* --- Kadr zastępczy ---------------------------------------------------
	   Powierzchnia pod obrazem wyróżniającym wpisu: widać ją, zanim obraz się
	   wczyta, i zostaje na stałe, gdy wpis obrazu nie ma. Chłodniejsza od
	   `--v2-bg-soft`, żeby czytała się jak miejsce na zdjęcie, a nie jak
	   karta o innym tle.                                                     */
	--v2-thumb-bg:    #F6F7F8;

	/* --- Linie ----------------------------------------------------------- */
	--v2-line:        #E4E6E1;  /* hairline — główny budulec układu           */
	--v2-line-2:      #D3D6CF;  /* mocniejszy: pola formularza                */
	--v2-line-dark:   rgba(255, 255, 255, .14);

	/* --- Akcent ---------------------------------------------------------- */
	/* Zieleń VETKA z brandbooku. 7,7:1 w obie strony, więc działa i jako tło
	   przycisku, i jako kolor linku. Dawka: jedno główne CTA na widok.       */
	--v2-accent:      #1B5E43;
	--v2-accent-2:    #12432F;  /* hover                                      */
	--v2-focus:       #6FBF97;  /* pierścień focusu na ciemnym tle            */

	/* Alert pilnej pomocy. Osobny token, choć dziś wskazuje na akcent: to
	   funkcja bezpieczeństwa, nie ozdoba, więc gdyby okazało się, że wymaga
	   własnego koloru ostrzegawczego, zmienia się tutaj jedną linią.        */
	--v2-alert:       var(--v2-accent);
	--v2-hover-light: #E7EDE9;  /* hover białego przycisku na ciemnym         */
	--v2-focus-ring:  rgba(27, 94, 67, .22);  /* pierścień focusu na jasnym    */

	/* --- Geometria -------------------------------------------------------
	   Trzy stopnie, zgodnie z pomiarem zapier.com: kontrolki i karty 4px,
	   duże CTA i kafle 8px, panele zbiorcze (akordeon, sekcje) 16px.        */
	--v2-r:           4px;
	--v2-r-lg:        8px;
	--v2-r-panel:     16px;

	--v2-wrap:        1200px;   /* szerokość kontenera                        */
	--v2-measure:     680px;    /* maksymalna szerokość kolumny tekstu        */

	/* --- Rytm ------------------------------------------------------------ */
	/* Wysokość paska nagłówka: 76 px z handoffu strony głównej, logo 40 px
	   plus 18 px oddechu z góry i z dołu. Jedno miejsce, bo wartość powtarza
	   się w ośmiu regułach układu.

	   UWAGA na kompromis: logo niesie pod nazwą podpis „KLINIKA
	   WETERYNARYJNA", który przy 40 px wysokości robi się drobny. Wcześniej
	   pasek miał 106 px przy logo 60–90 px właśnie z tego powodu. Jeśli
	   podpis okaże się nieczytelny, wraca się tu i w `chrome.css`
	   (`max-height` logo) — to dwie wartości, nie przebudowa.              */
	--v2-header-h:    76px;

	/* Wysokość paska na mobile'u i tablecie (handoff `design_handoff_mobile`,
	   wzorzec globalny „Header mobilny"). Pasek jest tam niższy, bo nie ma
	   w nim ani nawigacji, ani CTA — zostaje logo i dwa cele dotykowe 44 px. */
	--v2-header-h-m:  60px;

	--v2-section:     88px;
	--v2-section-sm:  56px;

	/* --- Typografia i ruch ----------------------------------------------- */
	--v2-font:        "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	--v2-ease:        .15s ease;
}

/* =========================================================================
   PROGI (breakpointy)
   =========================================================================
   Wartości progów nie mogą być zmiennymi CSS — `@media` ich nie czyta —
   więc zapisujemy je tutaj jako umowę, a w arkuszach powtarzamy liczbami.
   Pochodzą z handoffu `design_handoff_mobile` (README, „Implementacja"):

     max-width: 640px     mobile   · kontener 20 px, siatki 1 kolumna
     max-width: 1024px    tablet   · kontener 40 px, siatki 2–3 kolumny
     min-width: 1025px    desktop  · układy z pozostałych paczek handoffu

   Wyjątkiem jest CHROM (nagłówek i menu): tam próg to `max-width: 1199.98px`,
   bo dokładnie tam motyw nadrzędny zwija nawigację do szuflady
   (`navbar-expand-xl` Bootstrapa). Gdyby chrom łamał się przy 1024 px, pas
   1025–1199 px zostałby bez nawigacji: desktopowe menu jest tam już zwinięte,
   a mobilne jeszcze nie włączone. Patrz assets/css/v2/menu-mobilne.css.
   ========================================================================= */

/* =========================================================================
   MOST
   =========================================================================
   Przedefiniowanie zmiennych trzech obcych systemów tokenów, które dziś
   działają równolegle: Elementor Kit (--e-global-*), motyw nadrzędny
   z Reduksa (--pgs_*) i komponenty motywu potomnego (--vk-*).

   Nagłówek strony celowo NIE jest tu ruszany. Na podstronach pasek jest
   przezroczysty nad ciemnym pasem tytułowym, więc przestawienie linków na
   kolor tekstu dałoby ciemne na ciemnym. Kolory nagłówka zmieniają się
   razem z całym chromem, gdy pasek dostanie własne tło.
   ========================================================================= */

body.vetka-ui {

	/* --- Elementor Kit: kolory globalne ---------------------------------- */
	/* `primary` i `accent` to już #1B5E43 — zostają nietknięte.             */
	--e-global-color-secondary: var(--v2-ink);      /* było #003B26          */
	--e-global-color-text:      var(--v2-ink-2);    /* było #8F91AB          */
	--e-global-color-d97c151:   var(--v2-ink-3);    /* było #8F91AB          */
	--e-global-color-b4d81d1:   var(--v2-bg-soft);  /* krem #F4EFE6          */
	--e-global-color-067ef75:   var(--v2-ink);      /* było #003B26          */

	/* --- Elementor Kit: rodziny krojów (12 sztuk, wszystkie Outfit) ------ */
	--e-global-typography-primary-font-family:   var(--v2-font);
	--e-global-typography-secondary-font-family: var(--v2-font);
	--e-global-typography-text-font-family:      var(--v2-font);
	--e-global-typography-accent-font-family:    var(--v2-font);
	--e-global-typography-9a291a1-font-family:   var(--v2-font);
	--e-global-typography-2264634-font-family:   var(--v2-font);
	--e-global-typography-f16a036-font-family:   var(--v2-font);
	--e-global-typography-e9c3cc2-font-family:   var(--v2-font);
	--e-global-typography-71bf481-font-family:   var(--v2-font);
	--e-global-typography-f51d14c-font-family:   var(--v2-font);
	--e-global-typography-2413293-font-family:   var(--v2-font);
	--e-global-typography-57d000a-font-family:   var(--v2-font);

	/* --- Elementor Kit: wagi nagłówków ----------------------------------- */
	/* 600 -> 500. Najtańsza zmiana o największym efekcie: nagłówki cięższe
	   niż 500 są głównym powodem, dla którego strona sprawia wrażenie
	   krzyczącej. H5 i H6 są małe i zostają na 600.                         */
	--e-global-typography-primary-font-weight:   500;
	--e-global-typography-secondary-font-weight: 500;
	--e-global-typography-9a291a1-font-weight:   500;
	--e-global-typography-2264634-font-weight:   500;
	--e-global-typography-f16a036-font-weight:   500;
	--e-global-typography-e9c3cc2-font-weight:   500;

	/* --- Motyw nadrzędny: kolory ----------------------------------------- */
	--pgs_primary_color:   var(--v2-accent);
	--pgs_accent_color:    var(--v2-accent);
	--pgs_secondary_color: var(--v2-ink);
	--pgs_heading_color:   var(--v2-ink);
	--pgs_text_color:      var(--v2-ink-2);
	--pgs_body_color:      var(--v2-ink-2);

	/* --- Motyw nadrzędny: przyciski -------------------------------------- */
	--pgs_btn_text_color:         var(--v2-on-accent);
	--pgs_btn_bg_color:           var(--v2-accent);
	--pgs_btn_border_color:       var(--v2-accent);
	--pgs_btn_hover_text_color:   var(--v2-on-accent);
	--pgs_btn_hover_bg_color:     var(--v2-accent-2);
	--pgs_btn_hover_border_color: var(--v2-accent-2);
	--pgs_btn_border_radius:      var(--v2-r);

	/* --- Motyw nadrzędny: stopka ----------------------------------------- */
	--pgs_footer_bg_color:                  var(--v2-dark);
	--pgs_footer_widget_link_color_hover:   var(--v2-on-accent);
	--pgs_footer_widget_link_color_active:  var(--v2-on-accent);
	--pgs_footer_widget_link_color_visited: var(--v2-on-dark);
	--pgs_footer_bottom_link_color_hover:   var(--v2-on-accent);
	--pgs_footer_bottom_link_color_active:  var(--v2-on-accent);
	--pgs_footer_bottom_link_color_visited: var(--v2-on-dark);

	/* --- Motyw nadrzędny: detale ----------------------------------------- */
	--pgs_backtotop_border_fill_color:   var(--v2-accent);
	--pgs_back_to_top_border_fill_color: var(--v2-accent);

	/* --- Komponenty motywu potomnego ------------------------------------- */
	/* feature-cards.css deklaruje --vk-* w :root globalnie; tu przestawiamy
	   je na paletę v2, bez dotykania tamtego pliku.                         */
	--vk-green:        var(--v2-ink);
	--vk-green-mid:    var(--v2-ink-2);
	--vk-cream:        var(--v2-bg);
	--vk-sage:         var(--v2-ink-3);
	--vk-sage-soft:    var(--v2-ink-3);
	--vk-terracotta:   var(--v2-ink);
	--vk-ink-soft:     var(--v2-ink-3);
	--vk-rule-cream:   var(--v2-line);
	--vk-rule-green:   var(--v2-line);
	--vk-feature-font: var(--v2-font);
}

/* =========================================================================
   KRÓJ
   =========================================================================
   Most przestawia rodzinę wszędzie, gdzie reguła korzysta ze zmiennej Kitu.
   Ta reguła domyka resztę — motyw ustawia Outfit również poza zmiennymi.

   :where() nie podnosi specyficzności, a wykluczenia chronią webfonty ikon
   (Font Awesome, Bootstrap Icons, Linearicons, Dashicons, eicons) przed
   podmianą kroju — na serwisie żyje pięć zestawów ikon naraz.
   ========================================================================= */
body.vetka-ui :where(h1, h2, h3, h4, h5, h6, p, li, a, span, div, button,
		input, textarea, select, label, blockquote, figcaption, td, th, dt, dd)
		:not([class*="fa-"]):not([class*="icon"]):not([class*="lnr"]):not(.eicon):not(.bi):not([class^="bi-"]):not([class*=" bi-"]):not([class*="dashicons"]):not([class*="pgsel-icon"]) {
	font-family: var(--v2-font);
}

body.vetka-ui,
body.vetka-ui :where(h1, h2, h3, h4, h5, h6, p, li, a, span, button, label) {
	font-family: var(--v2-font);
	-webkit-font-smoothing: antialiased;
}

/* =========================================================================
   MOST DO MODUŁÓW MOTYWU POTOMNEGO
   =========================================================================
   Specjalizacje, kariera i zespół mają własne, niezależne zestawy tokenów
   o identycznych wartościach: #003b26 / #1b5e43 / #f4efe6 / #c4622d,
   promień 20px, Montserrat, przejście .38s. Razem to ~2100 linii CSS.

   Zamiast przepisywać te pliki, ich tokeny stają się aliasami do palety v2.
   Zero zmian w markupie, zero w selektorach — trzy moduły zmieniają wygląd
   z jednego miejsca, a rollback to usunięcie tego bloku.

   Specyficzność: --vk-spec-* siedzi w :root (0,1,0), więc bije je
   `body.vetka-ui` (0,1,1). --vk-k-* i --vk-team-* są na komponentach
   (0,1,0), więc wymagają prefiksu z klasą komponentu → (0,2,1).
   ========================================================================= */

body.vetka-ui {
	/* --- Specjalizacje (16 podstron + hub) ------------------------------- */
	--vk-spec-green:      var(--v2-ink);
	--vk-spec-green-mid:  var(--v2-accent);
	--vk-spec-sage:       var(--v2-ink-3);
	--vk-spec-cream:      var(--v2-bg-soft);
	--vk-spec-terracotta: var(--v2-alert);
	--vk-spec-ink:        var(--v2-ink-2);
	--vk-spec-rule:       var(--v2-line);
	--vk-spec-font:       var(--v2-font);
	--vk-spec-radius:     var(--v2-r-panel);
}

body.vetka-ui .vk-kariera {
	--vk-k-green:      var(--v2-ink);
	--vk-k-green-mid:  var(--v2-accent);
	--vk-k-cream:      var(--v2-bg-soft);
	--vk-k-terracotta: var(--v2-alert);
	--vk-k-sage:       var(--v2-ink-3);
	--vk-k-sage-soft:  var(--v2-ink-3);
	--vk-k-ink:        var(--v2-ink-3);
	--vk-k-rule:       var(--v2-line);
	--vk-k-rule-dark:  var(--v2-line-dark);
	--vk-k-radius:     var(--v2-r-panel);
	--vk-k-ease:       var(--v2-ease);
	--vk-k-font:       var(--v2-font);
}

body.vetka-ui .vk-team {
	--vk-team-green:     var(--v2-ink);
	--vk-team-green-mid: var(--v2-accent);
	--vk-team-cream:     var(--v2-bg-soft);
	--vk-team-rule:      var(--v2-line);
	--vk-team-ease:      var(--v2-ease);
	--vk-team-font:      var(--v2-font);
}