/* ============================================================
   WĘDROWNIK (Klub Turystów Pieszych) — motyw kolorystyczny.

   ARCHITEKTURA (ZMIENIONA 2026-07-31): main.css jest wspólny dla
   wszystkich 9 serwisów. Pierwotnie ten plik nadpisywał TYLKO blok
   :root ze zmiennymi --site-*/--bs-* (main.css używa ich wszędzie),
   co powinno przemalować cały wygląd jednym miejscem.

   TO NIE ZADZIAŁAŁO w praktyce: mimo poprawnego ładowania pliku
   (potwierdzone: kolejność <link>, treść bajt-w-bajt, status 200
   z wyłączonym cache, test na telefonie na danych komórkowych,
   nawet z !important) — wartości zmiennych --site-* zdefiniowane
   TUTAJ nie wygrywały w przeglądarce użytkownika z tymi z main.css,
   mimo że zwykłe (nie-zmienne) właściwości CSS w tym samym pliku
   nadpisywały się poprawnie. Przyczyny nie ustalono mimo wyczerpującej
   diagnostyki (nie cache, nie service worker, nie @layer, nie błąd
   składni) — prawdopodobnie jakaś rzadka osobliwość silnika CSS
   przeglądarki przy kaskadzie zmiennych :root między dwoma plikami.

   ROZWIĄZANIE: ten plik NIE używa już zmiennych CSS w ogóle. Zamiast
   nadpisywać :root, powiela WSZYSTKIE selektory z main.css, które
   tam korzystają z --site-*, podstawiając wprost literalne kolory
   Wędrownika. To sprawdzona, działająca metoda (potwierdzona przez
   użytkownika: bezpośrednie nadpisania właściwości DZIAŁAJĄ
   niezawodnie, w przeciwieństwie do zmiennych). Wada: przy każdej
   zmianie odpowiedniej sekcji w main.css trzeba ręcznie powtórzyć
   zmianę tutaj (i w plikach kolejnych serwisów) — nie ma już
   pojedynczego źródła prawdy. Zaakceptowane świadomie w zamian za
   pewność, że kolory faktycznie się wyświetlają.

   Paleta Wędrownika:
   primary #6F4E37 (głęboki brąz) | primary-hover/dark #3E2A1F
   primary-active/darker #261911  | secondary #B89775 (ciepła sepia)
   text #55463C | accent #D2B48C (beż) | accent-dark #EEDC82
   lighter #FDFBF7 | light #F4EFE6 | warning #D49B41 (miodowy ugier)

   PEŁNA PALETA dostarczona przez użytkownika (potwierdzona ponownie
   2026-08-03) - zapisana w CAŁOŚCI, także kolory jeszcze NIE użyte
   nigdzie w tym pliku (success/danger), żeby nie zgubić ich drugi raz:
   $primary:    #6F4E37  (głęboki brąz - główne elementy, nagłówki)
   $secondary:  #B89775  (ciepła sepia - elementy drugorzędne, odznaki)
   $tertiary:   #D2B48C  (klasyczny beż - akcenty strukturalne, obramowania)
   $quaternary: #EEDC82  (stonowany piaskowy - dodatkowy akcent)
   $default:    #55463C  (ciemny brązowo-szary - domyślny kolor tekstu)
   $success:    #5F7149  (przygaszona, oliwkowa zieleń)
   $info:       #4A6B82  (stonowany, zgaszony błękit)
   $warning:    #D49B41  (ciepły, miodowy ugier)
   $danger:     #A64B44  (matowa, ceglasta czerwień)
   $lighter:    #FDFBF7  (bardzo jasny krem - tło strony)
   $light:      #F4EFE6  (jasny beż - karty, sekcje, tła bloków)
   $dark:       #3E2A1F  (bardzo ciemny brąz - ciemne sekcje, stopka)
   $darker:     #261911  (głęboka, prawie czarna czekolada)
   ($info użyty w sekcji 10, tło baneru cookieconsent - jedyny dotąd
   użyty z "nieużywanej" czwórki success/info/warning/danger).

   Podpięcie: config/sites/wedrownik/setup.typoscript, page.includeCSS,
   ładowane po main.css (kolejność bez znaczenia teraz, żadna reguła
   tu nie zależy od kolejności względem main.css — same bezpośrednie
   nadpisania tych samych lub bardziej swoistych selektorów).
   ============================================================ */

/* Mostek do reszty ekosystemu Bootstrap (klasy narzędziowe typu
   .text-primary/.bg-primary/.border-primary, alerty, odznaki itd.,
   których main.css nie nadpisuje selektor-po-selektorze) — literalne
   wartości, bez zależności od --site-*. */
:root {
    --bs-primary:               #6F4E37;
    --bs-primary-rgb:           111, 78, 55;
    --bs-link-color:            #6F4E37;
    --bs-link-color-rgb:        111, 78, 55;
    --bs-link-hover-color:      #6F4E37;
    --bs-link-hover-color-rgb:  111, 78, 55;
    --bs-body-color:            #55463C;
    --mainnavigation-hightlight: #B89775;
}


/* ============================================================
   0. KOLORY MARKI — komponenty, które bootstrap-package "wypieka"
      na sztywno przy kompilacji SCSS (nie czytają zmiennej --bs-primary
      w locie), więc trzeba je nadpisać wprost, per komponent.
   ============================================================ */

/* przyciski — gradient secondary→primary, na hover pogłębiony do primary→dark */
.btn-primary,
.frame-type-felogin_login input[type=submit] {
    --bs-btn-color:               #ffffff;
    --bs-btn-bg:                  #6F4E37;
    --bs-btn-border-color:        #6F4E37;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            #3E2A1F;
    --bs-btn-hover-border-color:  #3E2A1F;
    --bs-btn-active-bg:           #261911;
    --bs-btn-active-border-color: #261911;
    --bs-btn-focus-shadow-rgb:    111, 78, 55;
    background-image: linear-gradient(135deg, #B89775, #6F4E37);
    border: none;
    box-shadow: 0 2px 8px rgba(3, 37, 42, .25);
    transition: box-shadow .2s ease, transform .2s ease, background-image .2s ease;
}

.btn-primary:hover,
.frame-type-felogin_login input[type=submit]:hover {
    background-image: linear-gradient(135deg, #6F4E37, #3E2A1F);
    box-shadow: 0 4px 14px rgba(3, 37, 42, .35);
    transform: translateY(-1px);
}

.btn-outline-primary {
    --bs-btn-color:               #B89775;
    --bs-btn-border-color:        #B89775;
    --bs-btn-hover-color:         #ffffff;
    --bs-btn-hover-bg:            #B89775;
    --bs-btn-hover-border-color:  #B89775;
}

/* tła ramek (pole "Ramka" → kolor tła elementu treści) — gradient dla głębi.
   Wariant "ciemny środek" (ujednolicony 2026-08-09 na wszystkich serwisach) -
   TE SAME dwa kolory co poprzednio (secondary/primary), tylko układ: primary
   (ciemniejszy) na środku, secondary (jaśniejszy) rozchodzący się na boki,
   poziomo (90deg). */
.frame-background-primary {
    --frame-color:            #ffffff;
    --frame-background:       #6F4E37;
    --frame-link-color:       #ffffff;
    --frame-link-hover-color: #ffffff;
    background-image: linear-gradient(90deg, #B89775 0%, #6F4E37 50%, #B89775 100%);
}

.frame-background-dark {
    --frame-color:            #ffffff;
    --frame-background:       #3E2A1F;
    --frame-link-color:       #6F4E37;
    --frame-link-hover-color: #3E2A1F;
}

.frame-background-light {
    --frame-color:            #3E2A1F;
    --frame-background:       #f8f9fa;
    --frame-link-color:       #6F4E37;
    --frame-link-hover-color: #3E2A1F;
}

/* stopka górna (linki, cała treść) — linki w kolorze akcentu, NIE primary:
   primary jest tak ciemny, że na ciemnym tle stopki byłby praktycznie
   niewidoczny (ciemne na ciemnym). */
.footer-section-content {
    /* ten sam kąt co gradient nagłówków (135°), ale z jaśniejszym środkiem
       (secondary) i ciemnymi krawędziami (dark) zamiast płaskiego dwustopniowego */
    background: linear-gradient(135deg, #3E2A1F 0%, #6F4E37 50%, #3E2A1F 100%) !important;
    --frame-color:             #ffffff;
    --frame-background:        #3E2A1F;
    --frame-link-color:        #D2B48C;
    --frame-link-hover-color:  #ffffff;
}

/* przycisk "do góry" — stały kolor to dotychczasowy hover (primary),
   hover to akcent (--site-accent, $tertiary). Kolor ikony na hover
   przełączony na ciemny (primary) — biała ikona na jasnym piaskowym
   tle byłaby słabo czytelna. */
.scroll-top {
    --scrolltop-bg: #6F4E37;
    --scrolltop-hover-bg: #D2B48C;
    --scrolltop-hover-color: #6F4E37;
    transition: background-color .3s ease-in-out, color .3s ease-in-out, transform .25s ease, box-shadow .25s ease;
}

/* Uniesienie + poświata w kolorze akcentu na hover, ten sam charakter
   co unoszenie kart tekst-ikona/galerii — tylko przeniesiony na
   okrągły przycisk, w umiarkowanym zakresie (1.08), żeby przycisk
   przypięty do rogu ekranu nie wyglądał na "nerwowy". */
.scroll-top:hover,
.scroll-top:focus {
    transform: scale(1.08);
    box-shadow: 0 6px 18px rgba(210, 180, 140, .55);
}

.scroll-top .scroll-top-icon {
    transition: transform .25s ease;
}

.scroll-top:hover .scroll-top-icon,
.scroll-top:focus .scroll-top-icon {
    /* rotate(45deg) to baza kształtu strzałki (theme) — trzeba go
       zachować w tym samym transform, inaczej podbicie nadpisałoby
       obrót i ikona straciłaby kształt */
    transform: rotate(45deg) translateY(-3px);
}

/* Ikony w modułach "Tekst i ikona" — dotychczas kolor tła kółka był zapisany
   na sztywno (inline style) per element treści, z poprzedniej, zielonej
   palety. Nadpisujemy !important, żeby wszystkie ikony spójnie używały
   nowego zestawu barw niezależnie od tego, co ma w sobie rekord. */
.texticon-inner-icon {
    background-image: linear-gradient(135deg, #B89775, #6F4E37) !important;
    background-color: #6F4E37 !important;
    color: #ffffff !important;
}


/* ============================================================
   0b. PASEK NAWIGACJI — nowe tło, tekst, dolna linia, podkreślenie hover
   ============================================================
   Dotyczy TYLKO stanów z pełnym tłem (.navbar-default na podstronach,
   .navbar-transition na stronie głównej po scrollu) — stan przezroczysty
   na starcie strony głównej (na tle karuzeli, biały tekst) zostaje bez zmian,
   bo ma osobne, bardziej specyficzne reguły w bootstrap-package. */

.navbar-mainnavigation {
    /* tło paska w stanie "solid" — .navbar-default/.navbar-transition czytają
       kolor przez rgba(var(--bs-white-rgb), var(--bs-bg-opacity)), więc
       wystarczy podmienić samą zmienną RGB zamiast walczyć z !important */
    --bs-white-rgb: 253, 251, 247; /* #FDFBF7 - --site-lighter Wędrownika (BYŁ literalny RGB szlakbrdy, nie var(), więc skrypt-generator go nie podmienił - patrz pamięć projektu, sekcja "tło menu") */
    /* tekst i ikony linków menu w stanie "solid" — transparentny stan
       ma WŁASne, bardziej specyficzne nadpisanie na biało, więc to tutaj
       go nie dotyczy */
    --bs-navbar-color:        #6F4E37;
    --bs-navbar-hover-color:  #6F4E37;
    --bs-navbar-active-color: #6F4E37;
}

.navbar-default,
.navbar-mainnavigation.navbar-transition {
    border-bottom: 1.5px solid #E1D3BA;
}

/* Podkreślenie najechanej pozycji menu — grubsze, w kolorze warning,
   animacja "wysuwania" (scaleX) zamiast domyślnego zanikania opacity,
   ten sam charakter co animowane podkreślenie linków w treści. */
.navbar-mainnavigation .nav-link.nav-link-main:before {
    height: 3px;
    background: #D49B41;
    opacity: 1;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease;
}

.navbar-mainnavigation .nav-link.nav-link-main:hover:before,
.navbar-mainnavigation .nav-link.nav-link-main:focus-visible:before {
    opacity: 1;
    transform: scaleX(1);
}


/* ============================================================
   1. NAWIGACJA — drobne uzupełnienia, których SCSS nie obejmuje
   ============================================================ */

/* Logo skaluje się razem z paskiem przy scrollowaniu (BP używa --mainnavigation-nav-height).
   Mnożnik WIĘKSZY niż uniwersalne 0.45 z main.css (szlakbrdy) - logo Wędrownika
   to kompaktowa, kwadratowa emblematyka klubowa (nie szeroki logotyp jak
   szlakbrdy), przy tym samym mnożniku wysokości wygląda wizualnie mniejsze/
   mniej wyraziste, więc per-site podbite do 0.7 (dopasowanie do KSZTAŁTU
   konkretnego loga, nie zmiana mechanizmu skalowania). */
.navbar-mainnavigation .navbar-brand-image img {
    max-height: calc(var(--mainnavigation-nav-height) * 0.7);
    transition: max-height 0.27s cubic-bezier(0, 0, 0.58, 1);
}

/* Ikony logowania / wyszukiwania dodane w MainAfter.html — kolor jak standardowy
   Bootstrap "navbar-light" (taki sam odcień jak reszta ikon/togglera w jasnym pasku).
   Na stronie głównej (navbar-default-transition) białe dopóki nie przewinięto -
   te same selektory co bootstrap-package używa dla .nav-link (patrz theme.css:
   ".navbar-default-transition:not(.navbar-transition) .navbar-nav>li>.nav-link"),
   więc zachowanie jest identyczne i tak samo niezawodne (czysty CSS, bez JS-timingu). */
a.nav-login-icon,
a.nav-search-icon {
    color: #6F4E37;
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.15s ease;
}

a.nav-login-icon {
    margin-left: 1.5rem;
}

a.nav-search-icon {
    margin-left: 1rem;
}

a.nav-login-icon:hover,
a.nav-search-icon:hover {
    color: rgba(0, 0, 0, .9);
}

a.nav-login-icon svg,
a.nav-search-icon svg {
    width: 20px;
    height: 20px;
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon {
    color: rgba(255, 255, 255, .9);
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-inverse-transition:not(.navbar-transition) a.nav-search-icon:hover {
    color: #fff;
}

/* Białe teksty/ikony menu w stanie przezroczystym (na tle karuzeli) z main.css
   zakładają CIEMNE zdjęcie w tle (jak na szlakbrdy) - zdjęcie karuzeli
   Wędrownika jest jasne, biały tekst byłby na nim nieczytelny. Nadpisanie
   na ciemny brąz z WŁASNEJ palety (ten sam odcień co hover przycisków),
   PO regułach main.css (ta sama specyficzność, wygrywa przez kolejność
   wczytania pliku) - dotyczy tylko strony głównej, przed przewinięciem. */
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link {
    --bs-nav-link-color: #3E2A1F;
    --bs-nav-link-hover-color: #3E2A1F;
    --bs-navbar-active-color: #3E2A1F;
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon {
    color: #3E2A1F;
}

.navbar-default-transition:not(.navbar-transition) a.nav-login-icon:hover,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon:hover {
    color: #261911;
}

/* main.css (wczytany PRZED tym plikiem) dodaje text-shadow/drop-shadow do
   białego menu na przezroczystym pasku - tu tekst/ikony są ciemne (patrz
   wyżej), więc ciemny cień za ciemnym tekstem tylko go rozmywa. Zerujemy. */
.navbar-default-transition:not(.navbar-transition) .navbar-nav > li > .nav-link,
.navbar-default-transition:not(.navbar-transition) .navbar-brand-image img,
.navbar-default-transition:not(.navbar-transition) a.nav-login-icon,
.navbar-default-transition:not(.navbar-transition) a.nav-search-icon,
.navbar-default-transition:not(.navbar-transition) .navbar-toggler {
    text-shadow: none;
    filter: none;
}

/* Strzałka rozwijania dropdownu (::after Bootstrapa) w stanie przezroczystym
   dziedziczy kolor tekstu przez currentColor - już objęta przez --bs-nav-link-color
   wyżej, tylko wskaźnik "toggle" (osobny element) trzeba dociemnić osobno. */
.navbar-default-transition:not(.navbar-transition) .nav-link-toggle .nav-link-indicator {
    filter: none;
}
.navbar-default-transition:not(.navbar-transition) .nav-link-toggle {
    color: #3E2A1F;
}

/* Reguła wymuszająca hamburger 992-1199px USUNIĘTA 2026-08-12 - był to ślepy
   duplikat main.css bez żadnej personalizacji per-site (patrz zasada w
   feedback_css_theming), main.css teraz obsługuje ten zakres inaczej (poziomy
   pasek bez ikon, tak jak 1200-1399px), duplikat tutaj by to blokował. */


/* ============================================================
   1c. NAGŁÓWKI KARUZELI (Border/Header Media) — białe i pogrubione
   ============================================================
   Produkcja ustawia kolor nagłówka karuzeli inline (style="color:#FFFFFF"
   na otaczającym divie .valign) per slajd. Nowsza wersja bootstrap-package
   w tym projekcie nie generuje już tego wrappera/inline stylu wcale
   (uproszczona struktura karuzeli), więc domyślnie tekst wychodził ciemny
   i nieczytelny na zdjęciu w tle. Odtworzone jako stały, globalny styl. */

.carousel-header,
.carousel-subheader {
    color: #fff;
    font-weight: 700;
    text-shadow: 0 2px 6px rgba(0, 0, 0, .75);
}

/* Gradient od dołu slajdu USUNIĘTY na życzenie użytkownika (2026-08-01) -
   patrz main.css sekcja 1c po wyjaśnienie. */
.carousel-content {
    position: relative;
}

.carousel-content-inner {
    position: relative;
    z-index: 1;
}


/* ============================================================
   1d. ELEMENT TREŚCI "TYLKO NAGŁÓWEK" (CType=header) — białe, pogrubione
   ============================================================
   Ten typ elementu w bootstrap-package zawsze renderuje się z kolorowym
   tłem (frame-background-primary, zielone), więc potrzebuje białego,
   pogrubionego tekstu żeby był czytelny - w przeciwieństwie do zwykłych
   nagłówków innych elementów (texticon itp.), które mają jasne tło i
   muszą zostać przy domyślnym ciemnym kolorze. */

.frame-type-header .element-header {
    color: #fff;
    font-weight: 700;
}

.frame-type-header .element-subheader {
    color: #fff;
    font-weight: 400;
}


/* ============================================================
   1e. MENU BOCZNE (subnav) — stylistyka "karty", jak zakładki (tabs):
   biały panel z ramką/cieniem, aktywna/najechana pozycja podświetlona
   tłem + kolorowy pasek z boku zamiast domyślnego trójkąta.
   ============================================================ */

/* Ramka menu bocznego - "light" tej witryny (#F4EFE6) jest zbyt blisko
   bieli tła panelu, ledwo widoczna (zgłoszenie użytkownika, 2026-08-09) -
   zamieniona na neutralny szary, ten sam co ramka kart galerii
   main.css (rgba(3,37,42,.12)), niezależny od palety. */
.subnav-nav {
    background: #ffffff;
    border: 1px solid rgba(3, 37, 42, .12);
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}

.subnav-item + .subnav-item {
    border-top: 1px solid rgba(3, 37, 42, .12);
}

.subnav-link {
    border: none !important;
    padding: .65rem 1rem;
    color: #6F4E37;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}

.subnav-link:before {
    display: none !important;
}

.subnav-link:hover,
.subnav-link:focus {
    background-color: #FDFBF7 !important;
    color: #6F4E37;
    padding-left: 1.25rem;
    /* linia boczna na hover w primary — dla pozycji aktywnej i tak
       wygrywa box-shadow z reguły .active (deklarowana niżej, ta sama
       specyficzność, kolejność w pliku rozstrzyga), więc kolor warning
       aktywnej pozycji zostaje nienaruszony nawet pod kursorem */
    box-shadow: inset 3px 0 0 0 #6F4E37;
}

.active > .subnav-link {
    color: #6F4E37 !important;
    background-color: #FDFBF7 !important;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #D49B41;
}


/* ============================================================
   1f. STOPKA DOLNA (footer-section-meta) — odcień jak produkcja
   ============================================================
   Analogicznie: domyślny motyw daje tu #212121, produkcja ma #232323. */

.footer-section-meta {
    background: #261911 !important;
    --frame-background: #261911;
    --frame-link-color: #D2B48C;
    --frame-link-hover-color: #ffffff;
}


/* ============================================================
   1g. STOPKA GÓRNA, KOLUMNA ŚRODKOWA — logo PTTK wyśrodkowane
   ============================================================
   Element treści (textpic/gallery) domyślnie wyrównuje obrazek do lewej
   krawędzi kolumny (flex, justify-content: flex-start). */

.footer-section-content-column-middle .gallery-row {
    justify-content: center;
}

/* To samo miejsce renderuje też logo PTTK jako element "galerii" (textpic) —
   ale logo jest okrągłe, więc ogólny styl "karty" (biała ramka, cień,
   padding) dodany niżej dla właściwych galerii zdjęć wygląda tu źle
   (białe kwadratowe tło pod okrągłym logo). Neutralizujemy go punktowo. */
.footer-section-content-column-middle .gallery-item figure {
    border: none;
    box-shadow: none;
    padding: 0;
    background: transparent;
    border-radius: 0;
}

.footer-section-content-column-middle .gallery-item:hover figure {
    box-shadow: none;
    border-color: transparent;
}

.footer-section-content-column-middle .gallery-item figure img {
    background-color: transparent;
}

.footer-section-content-column-middle .frame :not(.btn) > a:not([class]),
.footer-section-content-column-middle .frame p a:not([class]) {
    background-image: none;
}

/* Na telefonach (poniżej 768px kolumny stopki górnej stackują się jedna
   pod drugą) — wyśrodkuj całą zawartość, łącznie z kolumną "Dane rejestrowe"
   (ma na sztywno .text-end) i "Strony oddziałowe" (domyślnie do lewej). */
@media (max-width: 767.98px) {
    .footer-section-content-column {
        text-align: center;
    }

    .footer-section-content-column .text-end,
    .footer-section-content-column .text-start,
    .footer-section-content-column .text-right,
    .footer-section-content-column .text-left {
        text-align: center !important;
    }
}


/* ============================================================
   2. KONTENER TREŚCI
   ============================================================ */

#page-content {
    max-width: 1320px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    width: 100%;
}

/* ============================================================
   TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja CLAUDE
   ============================================================ */
/* TEXT AND ICON — ramka z zaokrąglonymi narożnikami i cieniem wersja GEMINI
   wyrównuje wysokości ramek */

/* 1. RAMKA + TŁO — gradient secondary->tertiary->biel (na życzenie
   użytkownika, zamiast ogólnego light->lighter->biel z main.css),
   ramka w kolorze secondary */
.frame-type-texticon .texticon {
    border: 1.5px solid #B89775 !important;
    border-radius: 8px;
    padding: 1.5rem;
    /* radialny, niecentryczny — "źródło światła" w lewym górnym rogu,
       gasnące przez tertiary do bieli w kierunku przeciwległego rogu.
       Tło większe niż karta (background-size) + przesuwana pozycja,
       żeby "światło" mogło płynnie wędrować na hover (patrz niżej) */
    background: radial-gradient(circle at 20% 15%, #B89775 0%, #D2B48C 10%, #ffffff 40%);
    background-size: 160% 160%;
    background-position: 0% 0%;
    transition: box-shadow .25s ease, border-color .25s ease, border-width .25s ease, transform .25s ease, background-position .5s ease;
}

/* 2. ŁAŃCUCH WYSOKOŚCI (EQUAL HEIGHT) */

/* Rząd musi być flexem */
.section-row {
    display: flex !important;
    flex-wrap: wrap;
    align-items: stretch !important;
}

/* Kolumna musi być flexem */
.section-column-third {
    display: flex !important;
    flex-direction: column !important;
}

/* WYMUSZENIE WZROSTU NA WSZYSTKICH WARSTWACH WEWNĄTRZ */
/* Dodajemy tutaj klasy, które widzę w Twoim inspektorze: .frame-container-default oraz .frame-inner */
.section-column-third .frame,
.frame-group-container,
.frame-group-inner,
.frame-container-default,
.frame-inner,
.texticon {
    display: flex !important;
    flex-direction: column !important;
    flex-grow: 1 !important;
    height: auto !important;
}

/* Opcjonalnie: upewnij się, że tekst w środku nie jest ściśnięty */
.texticon-content {
    flex-grow: 1;
}

/* Hover dla ramki — lekkie uniesienie + głębszy cień. Kolor ramki
   zostaje w tej samej rodzinie (secondary), tylko "przyciemniony" do
   primary (ten sam zabieg co animowane podkreślenie linków — nie
   zmiana koloru, tylko pogłębienie tego samego tonu) + delikatnie
   grubsza. */
.frame-type-texticon .texticon:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, 0.18);
    border-width: 2.5px !important;
    border-color: #6F4E37 !important;
    transform: translateY(-3px);
    /* "światło" wędruje w stronę przeciwległego rogu */
    background-position: 100% 100%;
}


/* ============================================================
   ODŚWIEŻENIE WYGLĄDU 2026-07-27 — mikroanimacje i detale
   ============================================================ */

/* Galeria zdjęć — jednakowa wysokość kafli z zachowaniem proporcji zdjęć
   (bez przycinania), delikatna ramka, cień pogłębiający się po najechaniu,
   plus zoom samego zdjęcia. Ten sam wzorzec co custom-online.css. */
.gallery-row {
    align-items: stretch;
}

.gallery-item {
    display: flex;
    flex-direction: column;
}

.gallery-item figure {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin-bottom: 0;
    overflow: hidden;
    border-radius: var(--bs-border-radius);
    border: 1px solid rgba(3, 37, 42, .12);
    padding: 6px;
    /* cień bez przesunięcia (0 0) — rozkłada się równo dookoła zamiast "uciekać" w dół */
    box-shadow: 0 0 8px rgba(3, 37, 42, .08);
    transition: box-shadow .25s ease, border-color .25s ease;
}

.gallery-item:hover figure {
    box-shadow: 0 0 22px rgba(3, 37, 42, .4);
    border-color: rgba(3, 37, 42, .3);
}

.gallery-item figure picture,
.gallery-item figure a {
    flex: 1;
    display: flex;
    min-height: 140px;
}

.gallery-item figure img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center center;
    background-color: #ffffff;
    display: block;
    transition: transform .35s ease;
}

.gallery-item:hover figure img {
    transform: scale(1.06);
}

/* Podpis pod zdjęciem — wyśrodkowany, z odstępem odsuwającym go od
   zdjęcia (transform:scale na hover wizualnie "wjeżdża" na sąsiada
   w tym samym elemencie figure, bo overflow:hidden tnie tylko na
   zewnętrznej krawędzi, nie między rodzeństwem) */
.gallery-item .caption {
    text-align: center;
    margin-top: .6rem;
}

/* Linki w treści — animowane podkreślenie zamiast statycznego,
   ten sam język co pasek nawigacji (nav-link-main:before) */
.frame :not(.btn) > a:not([class]),
.frame p a:not([class]) {
    text-decoration: none;
    background-image: linear-gradient(#D49B41, #D49B41);
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size .25s ease, color .15s ease;
}

.frame :not(.btn) > a:not([class]):hover,
.frame p a:not([class]):hover {
    background-size: 100% 2px;
}

/* Pasek nawigacji — efekt "szkła" i cień, gdy ma pełne tło (podstrony
   z .navbar-default ORAZ strona główna po przewinięciu, .navbar-transition).
   Stan przezroczysty (hero na stronie głównej przed scrollem) zostaje bez
   zmian, żeby nie rozmywać zdjęcia w tle karuzeli. */
.navbar-default,
.navbar-mainnavigation.navbar-transition {
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 20px rgba(3, 37, 42, .22);
}

.navbar-default,
.navbar-default-transition.navbar-transition {
    --bs-bg-opacity: .92;
}

/* Cytat / wyróżniony fragment tekstu — akcent w kolorze marki zamiast
   domyślnej szarej kreski Bootstrapa */
.frame blockquote,
blockquote.blockquote {
    border-left: 3px solid #D2B48C;
    padding-left: 1rem;
    font-style: italic;
}

/* Nagłówek karuzeli — delikatne wejście przy załadowaniu strony */
@keyframes szb-fade-up {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.carousel-item.active .carousel-header {
    animation: szb-fade-up .6s ease-out both;
}

.carousel-item.active .carousel-subheader {
    animation: szb-fade-up .6s ease-out .12s both;
}

@media (prefers-reduced-motion: reduce) {
    .carousel-item.active .carousel-header,
    .carousel-item.active .carousel-subheader {
        animation: none;
    }
}

/* ============================================================
   ZAKŁADKI (element "Tabs") — wygląd "połączonej karty": aktywna
   zakładka zlewa się wizualnie z panelem treści pod nią, akcentowany
   górny pasek w kolorze warning, reszta w języku kart z innych sekcji
   (biel, delikatna ramka, zaokrąglenie, cień).
   ============================================================ */

/* Kontener zakładek (.contentcontainer, b13/container) to CSS grid
   z globalnym odstępem --contentcontainer-gap:40px (używanym też do
   rozstawiania kolumn w innych typach kontenerów, np. 2/3/4-kolumnowych)
   — to on wpychał 40px przerwy między pasek zakładek a panel treści,
   mimo że oba mają być wizualnie połączone. Zerowany TYLKO tutaj. */
.contentcontainer[data-container-identifier="szlakbrdy_tabs"] {
    --contentcontainer-gap: 0;
}

.nav-tabs {
    border-bottom: 1px solid #F4EFE6;
    gap: .25rem;
}

.nav-tabs .nav-link {
    position: relative;
    border: 1px solid transparent;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    color: #6F4E37;
    font-weight: 600;
    padding: .6rem 1.25rem;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
    border-color: transparent;
    background-color: #FDFBF7;
    isolation: isolate;
}

.nav-tabs .nav-link.active {
    color: #6F4E37;
    background-color: #ffffff;
    border-color: #F4EFE6 #F4EFE6 #ffffff;
    box-shadow: 0 -4px 14px rgba(3, 37, 42, .1);
}

.nav-tabs .nav-link.active:before {
    content: "";
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    height: 3px;
    border-top-left-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    background: linear-gradient(90deg, #D49B41, #D2B48C);
}

.tab-content {
    background-color: #ffffff;
    border: 1px solid #F4EFE6;
    border-top: none;
    border-bottom-left-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
    border-top-right-radius: var(--bs-border-radius);
    padding: 1.5rem;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}


/* ============================================================
   3. SUBMENU GÓRNEGO MENU (dropdown) — ten sam język "karty"
   co menu boczne (subnav, patrz 1e.): biały panel, ramka w
   --site-light, cień, kolorowy pasek z boku przy najechanej/
   aktywnej pozycji zamiast domyślnego szarego tła Bootstrapa.
   Na desktopie (pełne poziome menu, od 1200px — patrz breakpoint
   hamburgera w 1.) rozwija się dodatkowo po najechaniu myszką,
   niezależnie od dotychczasowego mechanizmu kliknięcia (Bootstrap
   JS/Popper) używanego na dotyku/mobile — oba działają równolegle.
   ============================================================ */

.navbar-mainnavigation .dropdown-menu {
    --bs-dropdown-bg: #ffffff;
    --bs-dropdown-border-color: #F4EFE6;
    --bs-dropdown-border-radius: var(--bs-border-radius);
    --bs-dropdown-box-shadow: 0 8px 22px rgba(3, 37, 42, .16);
    padding: .4rem 0;
    overflow: hidden;
}

.navbar-mainnavigation .dropdown-menu-simple .dropdown-nav > .nav-item + .nav-item,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav > .nav-item + .nav-item {
    border-top: 1px solid #F4EFE6;
}

.navbar-mainnavigation .nav-link-dropdown {
    padding: .65rem 1rem;
    color: #6F4E37;
    transition: background-color .2s ease, color .2s ease, padding-left .2s ease, box-shadow .2s ease;
}

.navbar-mainnavigation .nav-link-dropdown:hover,
.navbar-mainnavigation .nav-link-dropdown:focus {
    background-color: #FDFBF7;
    color: #6F4E37;
    padding-left: 1.25rem;
    /* jw. (subnav) — linia boczna na hover w primary, aktywna pozycja
       (reguła .active niżej, ta sama specyficzność) zachowuje warning */
    box-shadow: inset 3px 0 0 0 #6F4E37;
}

.navbar-mainnavigation .nav-link-dropdown.active {
    color: #6F4E37;
    background-color: #FDFBF7;
    font-weight: 600;
    box-shadow: inset 3px 0 0 0 #D49B41;
}

/* Rozwijanie po najechaniu myszką — tylko tam, gdzie realnie widać
   pełne poziome menu bez hamburgera (patrz sekcja 1.: 992-1199px jest
   celowo wymuszony na hamburger, więc prawdziwy próg desktopu to
   1200px). Menu trzyma się w layoucie (position:absolute niezależnie
   od hover), więc pokazywanie/ukrywanie przez opacity+visibility
   zamiast display nie powoduje "skoków" treści pod spodem i pozwala
   na płynne przejście spójne z resztą mikroanimacji serwisu. */
@media (min-width: 1200px) {
    .navbar-mainnavigation .nav-style-simple .dropdown-menu,
    .navbar-mainnavigation .nav-style-mega .dropdown-menu {
        display: block;
        top: 100%;
        /* margin-top:0 (nie --bs-dropdown-spacer, domyślnie .5rem) —
           motyw zostawiał martwą, niehoverowalną strefę między linkiem
           a panelem; kursor tracił hover w tej przerwie zanim zdążył
           dotrzeć do menu, więc ono znikało zanim dało się kliknąć
           pozycję. Panel przylega teraz bezpośrednio do paska. */
        margin-top: 0;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(6px);
        /* przy CHOWANIU dodatkowy grace period (.28s) zanim visibility
           faktycznie przełączy się na hidden — margines bezpieczeństwa
           na wypadek chwilowej niedokładności ruchu myszką; przy hover
           (:hover/:focus-within) ten delay jest zerowany, więc otwarcie
           reaguje od razu, bez opóźnienia */
        transition: opacity .18s ease, transform .18s ease, visibility 0s linear .28s;
    }

    .navbar-mainnavigation .nav-style-simple .dropdown-menu {
        left: 0;
    }

    .navbar-mainnavigation .nav-item.nav-style-simple:hover > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-mega:hover > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-simple:focus-within > .dropdown-menu,
    .navbar-mainnavigation .nav-item.nav-style-mega:focus-within > .dropdown-menu {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }

    /* Strzałka rozwijania niepotrzebna przy hover — chowamy ją tylko
       wizualnie (klik nadal działa dla klawiatury/dotyku na tym
       breakpoincie, gdyby ktoś mimo wszystko z niego skorzystał). */
    .navbar-mainnavigation .nav-link-toggle .nav-link-indicator {
        transition: transform .18s ease;
    }

    .navbar-mainnavigation .nav-item.nav-style-simple:hover .nav-link-toggle .nav-link-indicator,
    .navbar-mainnavigation .nav-item.nav-style-mega:hover .nav-link-toggle .nav-link-indicator {
        transform: rotate(180deg);
    }
}


/* ============================================================
   4. TABELE (element treści "Tabela") — kontener jak karta
   (ramka --site-light, cień, zaokrąglone rogi), nagłówek w
   --site-secondary z białym pogrubionym tekstem, wiersze treści
   naprzemienne: pierwszy biały, potem co drugi --site-lighter.
   ============================================================ */

.frame-type-table .table-responsive {
    border: 1px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    /* tylko overflow-y ukryty (żeby zaokrąglenie realnie przycinało
       górne/dolne rogi tabeli) — overflow-x zostaje auto, inaczej
       szerokie tabele straciłyby poziomy scroll na wąskich ekranach */
    overflow-x: auto;
    overflow-y: hidden;
}

.frame-type-table .table {
    margin-bottom: 0;
    --bs-table-border-color: #F4EFE6;
}

.frame-type-table .table > :not(caption) > * > * {
    padding: .65rem 1rem;
    vertical-align: middle;
}

.frame-type-table thead th {
    background-color: #B89775;
    color: #ffffff;
    font-weight: 700;
    border-bottom-color: #B89775;
}

.frame-type-table tbody tr td {
    background-color: #ffffff;
}

.frame-type-table tbody tr:nth-child(even) td {
    background-color: #FDFBF7;
}

.frame-type-table tbody tr td {
    transition: background-color .2s ease;
}

.frame-type-table tbody tr:hover td {
    background-color: #F4EFE6;
}

/* Akcentowy pasek "wysuwający się od środka" w pierwszej kolumnie —
   ten sam motyw animacji (transform:scaleY, transform-origin:center)
   co podkreślenie linku w menu głównym i w treści, tylko obrócony
   pionowo. */
.frame-type-table tbody tr td:first-child {
    position: relative;
    transition: background-color .2s ease, color .2s ease, font-weight .2s ease;
}

.frame-type-table tbody tr td:first-child:before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 3px;
    background: #D49B41;
    transform: scaleY(0);
    transform-origin: center;
    transition: transform .22s ease;
}

.frame-type-table tbody tr:hover td:first-child:before {
    transform: scaleY(1);
}

.frame-type-table tbody tr:hover td:first-child {
    color: #6F4E37;
    font-weight: 600;
}

.frame-type-html {
    overflow-x: auto;
}

.frame-type-html table {
    border-collapse: collapse;
    max-width: 100%;
}

.frame-type-html table td,
.frame-type-html table th {
    border: 1px solid #F4EFE6;
    padding: .5rem .75rem;
}


/* ============================================================
   5. POLA FORMULARZY — spójna kolorystyka z paletą marki. Motyw
   "wypieka" kolor ramki/fokusu na sztywno przy kompilacji SCSS
   (patrz zasada w sekcji 0.), więc trzeba go nadpisać wprost.
   Obejmuje też "gołe" pola felogin bez klasy .form-control w
   markupie (motyw celuje w nie osobno przez input[type], w tym
   samym miejscu co .form-control — stąd te same selektory tutaj)
   oraz checkbox zgody RODO w rejestracji sf_register: markup tego
   pola to .custom-control/-input/-label, klasy z Bootstrapa 4 —
   ten motyw (BS5) nie ma dla nich ŻADNEGO CSS, więc bez tych
   reguł pole renderowało się jako gołe, natywne query bez stylu.
   ============================================================ */

.form-control,
.form-select,
.frame-type-felogin_login input[type=text],
.frame-type-felogin_login input[type=password] {
    border-color: #F4EFE6;
    /* kreska pod polem, "wysuwana" na fokusie — ten sam motyw co
       podkreślenie linków w treści/menu, tu w kolorze warning dla
       kontrastu z tealową ramką fokusu (2 tony zamiast dublowania
       tego samego koloru w dwóch miejscach) */
    background-image: linear-gradient(#D49B41, #D49B41);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: 0% 2px;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out, background-size .3s ease;
}

.form-control:focus,
.form-select:focus,
.form-group input[type=file]:focus,
.frame-type-felogin_login input[type=text]:focus,
.frame-type-felogin_login input[type=password]:focus {
    border-color: #B89775;
    box-shadow: 0 0 0 .25rem rgba(184, 151, 117, .25);
    background-size: 100% 2px;
}

.form-control:-webkit-autofill,
.form-control:-webkit-autofill:hover,
.form-control:-webkit-autofill:focus,
.frame-type-felogin_login input:-webkit-autofill,
.frame-type-felogin_login input:-webkit-autofill:hover,
.frame-type-felogin_login input:-webkit-autofill:focus {
    -webkit-text-fill-color: #55463C;
    -webkit-box-shadow: 0 0 0 1000px #ffffff inset;
    box-shadow: 0 0 0 1000px #ffffff inset;
    transition: background-color 5000s ease-in-out 0s, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

.form-label {
    color: #6F4E37;
    font-weight: 600;
    transition: color .2s ease;
}

/* Etykieta reaguje na fokus pola pod nią — mikro-feedback, że pole
   jest aktywne. Trzy różne miejsca to trzy różne markupy formularzy
   (EXT:form ma klasę .form-label, felogin/sf_register mają gołe
   <label> bez klasy), stąd osobne selektory per typ formularza. */
.form-element:focus-within .form-label {
    color: #B89775;
}

.frame-type-felogin_login fieldset > div:focus-within label,
.frame-type-sfregister_create div:focus-within label,
.frame-type-sfregister_edit div:focus-within label {
    color: #B89775;
    transition: color .2s ease;
}

.required {
    color: #D49B41;
    font-weight: 700;
}

.custom-control {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
}

.custom-control-input {
    appearance: none;
    flex-shrink: 0;
    width: 1.2em;
    height: 1.2em;
    margin-top: .15em;
    border: 1.5px solid #F4EFE6;
    border-radius: .3em;
    background-color: #ffffff;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.custom-control-input:checked {
    background-color: #B89775;
    border-color: #B89775;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% 65%;
    animation: szb-checkbox-pop .3s ease;
}

@keyframes szb-checkbox-pop {
    0% { transform: scale(1); }
    40% { transform: scale(1.25); }
    100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
    .custom-control-input:checked {
        animation: none;
    }
}

.custom-control-input:focus {
    outline: 0;
    border-color: #B89775;
    box-shadow: 0 0 0 .2rem rgba(184, 151, 117, .25);
}

.custom-control-label {
    cursor: pointer;
    padding-top: .1em;
}


/* ============================================================
   6. MAPA NA STRONACH KONTAKTOWYCH — ta sama "ramka" co zdjęcia
   w galerii (biała karta, delikatna ramka, zaokrąglone rogi,
   padding), ale bez hover/cienia (mapa nie jest klikalną kartą).
   Selektor celuje w konkretny wrapper (div[style*=max-width:600px])
   zamiast całego .frame-type-html, żeby nie dotknąć innych,
   niepowiązanych elementów HTML na stronie.
   ============================================================ */

.frame-type-html div[style*="max-width:600px"] {
    border: 1px solid rgba(3, 37, 42, .12);
    border-radius: var(--bs-border-radius);
    padding: 6px;
    background-color: #ffffff;
    overflow: hidden;
}


/* ============================================================
   7. BREADCRUMB — tło $lighter, delikatna linia oddzielająca od
   treści pod spodem.
   ============================================================ */

.breadcrumb-section {
    background-color: #FDFBF7;
    border-bottom: 1px solid #F4EFE6;
}


/* ============================================================
   8. AKORDEON, PANEL (alert) I GRUPA KART — dociągnięcie do
   stylistyki serwisu. Sporo kolorów tu jest "wypieczonych" przy
   kompilacji SCSS (stary, zielony motyw domyślny) niezależnie od
   naszych nadpisań --bs-primary itd., więc trzeba je nadpisać
   wprost — ten sam wzorzec co w sekcjach 0./5.
   ============================================================ */

/* --- Akordeon (szlakbrdy_accordion_grid) — nagłówek (zwinięty) w
   tym samym języku co panel/alert: kolorowe tło, biały pogrubiony
   tekst. Rozwinięty panel zostaje przy dotychczasowym jasnym stylu
   (--site-lighter/--site-primary) — to teraz "stan aktywny". */
.accordion {
    --bs-accordion-btn-bg: #B89775;
    --bs-accordion-btn-color: #ffffff;
    --bs-accordion-active-bg: #FDFBF7;
    --bs-accordion-active-color: #6F4E37;
    --bs-accordion-border-color: #F4EFE6;
    --bs-accordion-btn-focus-box-shadow: 0 0 0 .25rem rgba(184, 151, 117, .25);
    /* ikony strzałki — SVG ma kolor "wypieczony" (stary zielony motyw),
       w data-URI nie da się użyć var(), stąd literalny hex dla obu
       stanów: biała na kolorowym tle nagłówka, ciemna na jasnym tle
       rozwiniętego panelu */
    --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23ffffff' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    --bs-accordion-btn-active-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236F4E37' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
    border-radius: var(--bs-border-radius);
    overflow: hidden;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
}

.accordion-button {
    font-weight: 600;
    transition: background-color .2s ease, color .2s ease;
}

.accordion-button:hover {
    background-color: #3E2A1F;
}

.accordion-button:not(.collapsed):hover {
    background-color: #FDFBF7;
}

/* "wodotryski": strzałka odbija się przy rozwijaniu (spring-easing
   zamiast liniowego obrotu), treść wjeżdża z lekkim fade-up — ten
   sam motyw co nagłówek karuzeli (szb-fade-up, zdefiniowany wyżej) */
.accordion-button::after {
    transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}

.accordion-collapse.show .accordion-body {
    animation: szb-fade-up .35s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
    .accordion-collapse.show .accordion-body {
        animation: none;
    }
}

/* --- Panel (alert card, CType=panel) — kolor nagłówka per wariant
   (card-panel-primary/secondary/info/warning), reszta wariantów
   (success/danger/light/dark) zostaje na razie na domyślnych
   kolorach motywu, bo w treści serwisu nie występują */
.card-panel-primary {
    --cardpanel-header-background: #6F4E37;
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: #6F4E37;
}

.card-panel-secondary,
.card-panel-info {
    --cardpanel-header-background: #B89775;
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: #B89775;
}

.card-panel-warning {
    --cardpanel-header-background: #D49B41;
    --cardpanel-header-color: #ffffff;
    --cardpanel-border-color: #D49B41;
}

.frame-type-panel .btn-info {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: #B89775;
    --bs-btn-border-color: #B89775;
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: #3E2A1F;
    --bs-btn-hover-border-color: #3E2A1F;
    --bs-btn-active-bg: #3E2A1F;
    --bs-btn-active-border-color: #3E2A1F;
    --bs-btn-focus-shadow-rgb: 184, 151, 117;
}

/* --- Grupa kart (card_group) — scalona z językiem "karty" tekst-ikona
   (ten sam wariant gradientu co .frame-type-texticon .texticon wyżej -
   secondary->tertiary->biel, WŁASNY dla Wędrownika, nie uniwersalny
   light->lighter z main.css), zamiast osobnego, prostszego stylu.
   Nagłówek/treść/przycisk wyśrodkowane. */
.card-group-element-item .card {
    border: 1.5px solid #B89775 !important;
    border-radius: 8px;
    background: radial-gradient(circle at 20% 15%, #B89775 0%, #D2B48C 10%, #ffffff 40%);
    background-size: 160% 160%;
    background-position: 0% 0%;
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    transition: box-shadow .25s ease, border-color .25s ease, border-width .25s ease, transform .25s ease, background-position .5s ease;
    position: relative;
    text-align: center;
}

.card-group-element-item .card:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-width: 2.5px !important;
    border-color: #6F4E37 !important;
    background-position: 100% 100%;
}

.card-group-element-item .card-footer {
    background: transparent;
    border-top: none;
}

.card-group-element-item .card-footer .btn {
    position: static;
}

.card-group-element-item .card-footer .btn:after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
}

.card-group-element-item .card-title {
    color: #6F4E37;
    font-weight: 600;
}

/* Zagnieżdżony (3.) poziom w mega-dropdownie górnego menu (patrz main.css) */
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav {
    margin-top: .15rem;
    margin-bottom: .35rem;
}

.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown {
    padding-top: .35rem;
    padding-bottom: .35rem;
    padding-left: 1.5rem;
    font-size: .875rem;
    font-weight: 400;
    color: #B89775;
}

.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:hover,
.navbar-mainnavigation .dropdown-menu-mega .dropdown-nav .dropdown-nav .nav-link-dropdown:focus {
    padding-left: 1.75rem;
}

/* ============================================================
   1h. TŁO STRONY — fotografia Wędrownika (odpowiednik main.css/szlakbrdy,
   ale WŁASNY plik - ten blok jest per-site, nie ma go w main.css)
   ============================================================ */

body {
    /* Font serwisu (self-hosted, fonts-local.css) - :root override nie działa
       cross-file w tym projekcie, więc ustawiony bezpośrednio jako właściwość */
    font-family: 'Lora', Georgia, 'Times New Roman', serif;
    background-image: url('/fileadmin/user_upload/wedrownik/background_wedrownik.webp');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
}

/* ============================================================
   9. AKTUALNOŚCI I RELACJE (georgringer/news, styl Twb5) - odpowiednik
   main.css sekcja 9, kolory literalne Wędrownika
   ============================================================ */

.news-list-view {
    list-style: none;
    padding-left: 0;
    display: flex;
    flex-direction: column;
    /*gap: 2.25rem;*/
    gap: 4rem !important;
}

.news-list-view .list-group-item {
    background: linear-gradient(135deg, #FDFBF7, #F4EFE6);
    border: 1px solid #D2B48C;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    padding: 1.5rem;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.news-list-view .list-group-item:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-color: #B89775;
    transform: translateY(-3px);
}

.news-list-item h3 {
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.news-list-item h3 a {
    color: #6F4E37;
    text-decoration: none;
    transition: color .15s ease;
}

.news-list-item h3 a:hover {
    color: #B89775;
}

.news-list-item .extra,
.frame-type-news_newsdetail .extra {
    color: #B89775;
    font-size: .875rem;
    margin-bottom: .75rem;
}

.news-list-item .extra i,
.frame-type-news_newsdetail .extra i,
.frame-type-news_newsdetail .news-related i {
    display: none;
}

.news-list-item .extra .label,
.frame-type-news_newsdetail .extra .label {
    background: #FDFBF7;
    color: #6F4E37;
    padding: .1rem .6rem;
    border-radius: 1rem;
    font-size: .8rem;
}

.news-list-item .lead {
    font-size: 1rem;
    color: #55463C;
}

.pagination {
    gap: .35rem;
}

.pagination .page-link {
    border: 1.5px solid #F4EFE6;
    color: #6F4E37;
    border-radius: var(--bs-border-radius);
    transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.pagination .page-link:hover {
    background-color: #FDFBF7;
    border-color: #B89775;
    color: #6F4E37;
}

.pagination .page-item.active .page-link {
    background-color: #6F4E37;
    border-color: #6F4E37;
    color: #ffffff;
}

.pagination .page-item.disabled .page-link {
    border-color: #F4EFE6;
    color: #B89775;
    opacity: .5;
}


.frame-type-news_newsdetail .frame-inner {
    background: linear-gradient(135deg, #FDFBF7, #F4EFE6);
    border: 1px solid #D2B48C;
    border-radius: var(--bs-border-radius);
    padding: 1.5rem;
}

.frame-type-news_newsdetail h1 {
    border-color: #F4EFE6 !important;
    color: #6F4E37;
}

.frame-type-news_newsdetail .lead {
    font-size: 1.1rem;
}

.frame-type-news_newsdetail .thumbnail {
    border: 1.5px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    padding: .5rem;
    margin-bottom: 1rem;
    background: #ffffff;
}

.frame-type-news_newsdetail .thumbnail img {
    border-radius: calc(var(--bs-border-radius) - 3px);
}

.frame-type-news_newsdetail .thumbnail .caption {
    text-align: center;
    margin-top: .5rem;
    font-size: .9rem;
    color: #B89775;
}

.frame-type-news_newsdetail .news-related .list-group-item {
    border: none;
    border-top: 1px solid #F4EFE6;
    border-radius: 0;
    padding: .65rem 0;
}

.frame-type-news_newsdetail .news-related .list-group-item:first-child {
    border-top: none;
}

/* Wymuszenie odstępów między elementami listy Bootstrap */
.news-list-view .list-group-item {
    margin-bottom: 0.3rem !important; /* Tutaj regulujesz wielkość odstępu */
}

/* Usunięcie marginesu pod ostatnim elementem, żeby nie psuł układu strony */
.news-list-view .list-group-item:last-child {
    margin-bottom: 0 !important;
}


/* ============================================================
   10. BANER COOKIECONSENT (bootstrap-package) — literalny odpowiednik
   sekcji main.css "10. BANER COOKIECONSENT", paleta Wędrownika.
   Tło baneru używa koloru "info" z ORYGINALNEGO zestawu palety Wędrownika
   ($info: #4A6B82, dostarczony przez użytkownika 2026-08-03), NIE
   primary/dark - gradient to jasny/ciemny ODCIEŃ TEJ SAMEJ barwy info
   (przeliczone w HSL, nie inny kolor marki), ten sam wzorzec co main.css.
   ============================================================ */
:root {
    --cookieconsent-bg: #1A252D;
    --cookieconsent-color: #ffffff;
    --cookieconsent-link-color: #8AA8BC;
    --cookieconsent-button-bg: #6F4E37;
}

.cc-window {
    background-image: linear-gradient(135deg, #1A252D, #10181D);
    box-shadow: 0 -4px 20px rgba(16, 24, 29, .3);
    position: fixed;
}

.cc-header {
    color: #8AA8BC;
}

.cc-link:hover,
.cc-link:focus {
    color: #ffffff;
}

/* "Wodotrysk" - przesuwający się pasek światła, patrz main.css (ten sam
   mechanizm/animacja, uniwersalny - nic tu nie trzeba zmieniać per-site
   poza tym, że keyframes "cc-shine" musi istnieć raz globalnie w main.css,
   co już jest - ten plik ładuje się PO main.css). */
.cc-window::after {
    content: '';
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .16), transparent);
    animation: cc-shine 7s ease-in-out infinite;
    pointer-events: none;
}

.cc-btn {
    border-radius: var(--bs-border-radius);
    background-image: linear-gradient(135deg, #B89775, #6F4E37);
    border: none;
    color: #ffffff;
    box-shadow: 0 2px 8px rgba(38, 25, 17, .25);
    transition: box-shadow .2s ease, transform .2s ease, background-image .2s ease;
}

.cc-btn:hover,
.cc-btn:focus {
    background-image: linear-gradient(135deg, #6F4E37, #3E2A1F);
    box-shadow: 0 4px 14px rgba(38, 25, 17, .35);
    transform: translateY(-1px);
    color: #ffffff;
}
/* ============================================================
   11. STRONA WYNIKÓW WYSZUKIWANIA (ke_search) - odpowiednik
   main.css sekcja 11, kolory literalne Wedrownik
   ============================================================ */

.tx-kesearch-pi1 .clearer {
    display: block;
    height: 0;
    line-height: 0;
    clear: both;
}

.tx-kesearch-pi1 form {
    margin-bottom: 1.5rem;
}

.kesearch_searchbox {
    border: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .75rem;
}

.kesearchbox {
    flex: 1 1 260px;
    margin-bottom: 0;
}

#ke_search_sword {
    width: 100%;
    border: 1px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    padding: .6rem .9rem;
    font-size: 1rem;
    color: #55463C;
}

#ke_search_sword:focus {
    outline: none;
    border-color: #6F4E37;
    box-shadow: 0 0 0 .15rem #FDFBF7;
}

/* Przyciski Anuluj/Szukaj wyrównane wysokością z polem tekstowym
   (padding .6rem + border 1px z obu stron = calc niżej), tak samo jak
   .nav-search-submit w sekcji 1. (dropdown w górnym menu). */
span.resetbutt a.resetButton,
span.submitbutt input[type="submit"] {
    display: inline-flex;
    align-items: center;
    height: calc(1.5em + 1.2rem + 2px);
    padding: 0 1.3rem;
    border-radius: var(--bs-border-radius);
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

span.submitbutt input[type="submit"] {
    border: 1px solid #6F4E37;
    background: #6F4E37;
    color: #fff;
}

span.submitbutt input[type="submit"]:hover {
    background: #3E2A1F;
    border-color: #3E2A1F;
}

span.resetbutt a.resetButton {
    border: 1px solid #F4EFE6;
    background: transparent;
    color: #6F4E37;
}

span.resetbutt a.resetButton:hover {
    background: #FDFBF7;
    border-color: #6F4E37;
}

#kesearch_num_results {
    color: #B89775;
    font-size: .9rem;
    margin-bottom: .75rem;
}

/* Sortowanie wyników (opcja w BE wtyczki - obecnie wyłączona na
   wszystkich serwisach, ale styl gotowy "na przyszłość" tak jak
   indeksery ke_search - patrz project_ke_search_news_indexing.md) */
#kesearch_ordering .ordering {
    margin-bottom: 1rem;
}

#kesearch_ordering ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .5rem 1rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

#kesearch_ordering li.sortlink a {
    color: #6F4E37;
    text-decoration: none;
    font-size: .9rem;
}

#kesearch_ordering li.sortlink a:hover {
    text-decoration: underline;
}

#kesearch_ordering span.up,
#kesearch_ordering span.down {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: .3em;
    vertical-align: middle;
}

#kesearch_ordering span.up {
    border-style: solid;
    border-width: 0 .3em .35em;
    border-color: transparent transparent #6F4E37;
}

#kesearch_ordering span.down {
    border-style: solid;
    border-width: .35em .3em 0;
    border-color: #6F4E37 transparent transparent;
}

/* Karty wyników - ten sam wzorzec co .news-list-view (sekcja 9) */
#kesearch_results {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.result-list-item {
    background: linear-gradient(135deg, #FDFBF7, #F4EFE6);
    border: 1px solid #D2B48C;
    border-radius: var(--bs-border-radius);
    box-shadow: 0 8px 22px rgba(3, 37, 42, .08);
    padding: 1.75rem 2rem;
    transition: box-shadow .25s ease, border-color .25s ease, transform .25s ease;
}

.result-list-item:hover {
    box-shadow: 0 10px 24px rgba(3, 37, 42, .18);
    border-color: #B89775;
    transform: translateY(-3px);
}

.result-number {
    color: #B89775;
    font-weight: 600;
    margin-right: .4rem;
}

.result-title {
    display: block;
    font-size: 1.2rem;
    font-weight: 600;
    color: #6F4E37;
    margin-bottom: .5rem;
}

/* Wynik może nie mieć linku (strona docelowa ukryta w drzewie stron -
   przypadek Seniorzy, patrz project_ke_search_news_indexing.md) -
   .result-title jest wtedy zwykłym tekstem bez <a>, poniższe reguły
   celują tylko w <a>, więc taki wynik zostaje czytelny, po prostu bez
   podkreślenia/koloru linku. */
.result-title a {
    color: inherit;
    text-decoration: none;
}

.result-title a:hover {
    text-decoration: underline;
}

.add-info {
    font-size: .85rem;
    color: #B89775;
    margin-bottom: .75rem;
}

.add-info i {
    font-style: normal;
    font-weight: 600;
}

.teaser_icon img {
    float: left;
    max-width: 90px;
    max-height: 90px;
    object-fit: cover;
    border-radius: var(--bs-border-radius);
    margin: 0 1rem .5rem 0;
    border: 1px solid #F4EFE6;
    background: #ffffff;
}

.result-teaser {
    display: block;
    color: #55463C;
    line-height: 1.55;
}

/* Podświetlenie trafionej frazy w zajawce (wtyczka sama owija ją w
   <span class="hit"> w resultrow.teaser) - kolor warning, tak jak reszta
   akcentów/podświetleń w serwisie (np. aktywna pozycja menu, sekcja 1/8) */
.result-teaser .hit,
.result-title .hit {
    background: #D49B41;
    color: #261911;
    font-weight: 700;
    padding: 0 .15em;
    border-radius: 2px;
}

/* Stronicowanie */
.pages_total {
    padding: .75rem 0;
    margin: 1.5rem 0;
    border-top: 1px solid #F4EFE6;
    border-bottom: 1px solid #F4EFE6;
    text-align: center;
}

.result_txt {
    font-size: .85rem;
    color: #B89775;
    margin-bottom: .5rem;
}

.kesearch_pagebrowser ul.pagination {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.kesearch_pagebrowser .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.2rem;
    height: 2.2rem;
    padding: 0 .6rem;
    border: 1px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    color: #6F4E37;
    text-decoration: none;
    font-size: .9rem;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.kesearch_pagebrowser .page-link:hover {
    background: #FDFBF7;
    border-color: #6F4E37;
}

.kesearch_pagebrowser .page-item.active .page-link {
    background: #6F4E37;
    border-color: #6F4E37;
    color: #fff;
}

.kesearch_pagebrowser .page-item.disabled .page-link {
    opacity: .4;
    pointer-events: none;
}

#kesearch_query_time {
    text-align: center;
    font-size: .8rem;
    color: #B89775;
    margin-top: 1rem;
}

/* Filtry (opcja w BE wtyczki, obecnie nieużywana na żadnym serwisie) -
   styl gotowy "na przyszłość", tak jak sortowanie wyżej */
#kesearch_filters {
    margin-bottom: 1rem;
}

#kesearch_filters select {
    border: 1px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    padding: .5rem .7rem;
    margin-bottom: .75rem;
}

#kesearch_filters .list {
    border: 1px solid #F4EFE6;
    border-radius: var(--bs-border-radius);
    padding: .75rem;
    margin-bottom: .75rem;
    width: auto;
    max-width: 320px;
}

#kesearch_filters .list .head {
    display: block;
    font-weight: 600;
    color: #6F4E37;
    border-bottom: 1px solid #F4EFE6;
    padding-bottom: .5rem;
    margin-bottom: .5rem;
}

#kesearch_filters .list ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

#kesearch_filters .list li {
    margin-bottom: .35rem;
}

#kesearch_filters .list li a {
    color: #55463C;
    text-decoration: none;
}

#kesearch_filters .list li a:hover {
    color: #6F4E37;
    text-decoration: underline;
}

#kesearch_filters .list li.selected {
    font-weight: 600;
    color: #6F4E37;
}

#kesearch_filters label {
    display: block;
    font-weight: 600;
    color: #6F4E37;
    margin-bottom: .35rem;
}

/* ============================================================
   ODŚWIEŻENIE WYGLĄDU (2026-08-13) — odpowiednik main.css sekcja 12,
   kolor literalny Wędrownika. Wypróbowane najpierw TYLKO tutaj na
   wyraźną prośbę, potem zaakceptowane i rozszerzone na resztę serwisów -
   reszta efektu (wow-reveal, animacja banera, prefers-reduced-motion)
   jest teraz wspólna w main.css, tu zostaje TYLKO nadpisanie koloru
   domalówki na miniaturkach Aktualności/Relacji. */
.news-list-item .col-md-3::after {
    background: linear-gradient(160deg, #6F4E37 0%, transparent 65%);
}