/* Paleta serwisu wyprowadzona z logo TOWES (zieleń, błękit, żółć)
   oraz nadpisania nagłówka, menu i stopki motywu. Ładowane na każdej stronie. */

:root {
    /* Baza: jaśniejszy grafit — neutralny i elegancki, bez skojarzeń
       instytucjonalnych. Biały tekst na nim: 9,0:1, żółć akcentu: 6,3:1 */
    --tw-brand: #3d4a5c;
    --tw-brand-600: #4c596e;
    --tw-brand-dark: #2b3440;
    --tw-brand-deep: #1f262f;
    --tw-brand-soft: #eef1f4;
    --tw-brand-line: #d7dce2;

    /* Żółć z logo — akcent: podkreślenia, ikony na ciemnym tle, wyróżnienia.
       Na graficie daje 8,8:1, więc jest dobrze widoczna. */
    --tw-accent: #ffd400;
    --tw-accent-dark: #8a6800;
    --tw-accent-soft: #fff8e0;

    /* Chłodna szarość dla etykiet drugoplanowych */
    --tw-slate: #33475b;
    --tw-slate-soft: #eef1f4;

    --tw-ink: #232323;
    --tw-muted: #5f6368;
    --tw-line: #e4e6e8;
    --tw-surface: #f7f8f9;

    /* Zmienne motywu i Bootstrapa, żeby ich komponenty też trafiły w paletę */
    --theme-color: #3d4a5c;
    --theme-color2: #ffd400;
    --bs-primary: #3d4a5c;
    --bs-link-color: #3d4a5c;
    --bs-link-hover-color: #2b3440;
}

/* Motyw ustawia swoją czerwień (#ff4c3b) na body.theme-color-1, czyli niżej
   w drzewie niż :root — bez tego nadpisania wartość z :root nigdy nie dociera
   do komponentów motywu (przycisk menu, ikony, znaczniki). */
body.theme-color-1 {
    --theme-color: #3d4a5c;
    --theme-color2: #ffd400;
}

/* ── Pasek logotypów ────────────────────────────────────────────────────── */

/* Znaki Funduszy Europejskich muszą stać na bardzo jasnym tle. */
.eu-bar {
    background: #fff;
    padding: 10px 0;
    border-bottom: 1px solid var(--tw-line);
}

.eu-bar__logos {
    max-height: 54px;
    width: auto;
}

/* ── Górny pasek ────────────────────────────────────────────────────────── */

.pasek {
    background-color: var(--tw-brand-dark);
    border-bottom: 0;
}

.pasek__tresc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 24px;
    padding-top: 9px;
    padding-bottom: 9px;
}

.pasek__nazwa {
    margin: 0;
    min-width: 0;
    font-size: 13px;
    line-height: 1.4;
    color: rgba(255, 255, 255, .78);
}

/* Nazwa Platformy wysunięta na pierwszy plan, nazwa Ośrodka jako dopowiedzenie
   — jedną linią o równym natężeniu czytało się jak ciąg słów. */
.pasek__nazwa-glowna {
    font-weight: 700;
    color: #fff;
}

.pasek__nazwa-osrodek::before {
    content: " · ";
    color: var(--tw-accent);
}

.pasek__akcje {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
}

.pasek__akcja {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    color: #fff;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}

.pasek__akcja i {
    font-size: 13px;
    color: var(--tw-accent);
    transition: color .15s ease;
}

.pasek__ikona {
    display: inline-flex;
    align-items: center;
    /* Ikona rysowana jest w currentColor, więc barwę ustala ten kolor. */
    color: var(--tw-accent);
    transition: color .15s ease;
}

.pasek__ikona svg {
    width: 18px;
    height: auto;
}

.pasek__akcja:hover,
.pasek__akcja:focus-visible {
    background: var(--tw-accent);
    color: var(--tw-ink);
}

.pasek__akcja:hover i,
.pasek__akcja:focus-visible i,
.pasek__akcja:hover .pasek__ikona,
.pasek__akcja:focus-visible .pasek__ikona {
    color: var(--tw-ink);
}

/* Konto stoi po prawej i jest oddzielone od danych kontaktowych. */
.pasek__akcja--konto {
    margin-left: 8px;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35);
}

@media (max-width: 767px) {
    .pasek__tresc {
        justify-content: center;
        text-align: center;
    }

    /* Pełna nazwa Ośrodka zajmowałaby na telefonie trzy linie paska —
       zostaje nazwa Platformy, reszta jest w stopce i w tytule strony. */
    .pasek__nazwa-osrodek {
        display: none;
    }

    .pasek__akcja--konto {
        margin-left: 0;
    }
}

/* Motyw zwija górny pasek do zera na telefonie (.top-header { height: 0 }),
   bo w jego wersji nie było tam nic istotnego. U nas stoją tam telefon,
   język migowy i logowanie, więc pasek musi zostać widoczny. */
@media (max-width: 577px) {
    .pasek {
        height: auto;
    }

    .pasek__tresc {
        padding-top: 6px;
        padding-bottom: 6px;
    }

    /* Nazwa jest tuż niżej w logo i w tytule strony — na tej szerokości
       pasek niesie same akcje, w jednym rzędzie. */
    .pasek__nazwa {
        display: none;
    }

    .pasek__akcja {
        padding: 6px 8px;
        font-size: 12.5px;
    }
}

/* ── Menu ───────────────────────────────────────────────────────────────── */

header .main-menu {
    padding: 6px 0;
    border-bottom: 1px solid var(--tw-line);
}

.pixelstrap > li > a,
.pixelstrap > li > a:hover,
.pixelstrap > li > a:focus {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .01em;
    text-transform: none;
    color: var(--tw-ink);
}

/* Podkreślenie pozycji menu w kolorze marki zamiast zmiany koloru tekstu. */
.pixelstrap > li > a {
    position: relative;
}

.pixelstrap > li > a::after {
    content: "";
    position: absolute;
    left: 16px;
    right: 16px;
    bottom: 6px;
    height: 2px;
    background: var(--tw-accent);
    transform: scaleX(0);
    transition: transform .18s ease;
}

.pixelstrap > li > a:hover::after,
.pixelstrap > li > a:focus::after {
    transform: scaleX(1);
}

.pixelstrap > li > a:hover,
.pixelstrap > li > a:focus {
    color: var(--tw-brand);
}

/* ── Stopka ─────────────────────────────────────────────────────────────── */

.stopka {
    margin-top: 60px;
    background: var(--tw-surface);
    border-top: 1px solid var(--tw-line);
}

.stopka__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.1fr;
    gap: 40px;
    padding: 50px 0 44px;
}

.stopka__logo {
    display: block;
    width: 86px;
    height: auto;
    margin-bottom: 16px;
}

.stopka__opis {
    margin: 0;
    max-width: 42ch;
    font-size: 13.5px;
    line-height: 1.7;
    color: #4a4a4a;
}

.stopka__naglowek {
    margin: 0 0 16px;
    padding-bottom: 10px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--tw-ink);
    border-bottom: 2px solid var(--tw-accent);
    display: inline-block;
}

.stopka__lista,
.stopka__kontakt {
    margin: 0;
    padding: 0;
    list-style: none;
}

.stopka__lista li + li {
    margin-top: 9px;
}

.stopka__lista a {
    font-size: 14px;
    color: #454545;
    text-decoration: none;
    transition: color .15s ease;
}

.stopka__lista a:hover,
.stopka__lista a:focus {
    color: var(--tw-brand);
    text-decoration: underline;
}

.stopka__kontakt li {
    display: flex;
    gap: 11px;
    font-size: 14px;
    line-height: 1.65;
    color: #454545;
}

.stopka__kontakt li + li {
    margin-top: 14px;
}

.stopka__kontakt i {
    flex: 0 0 auto;
    width: 16px;
    margin-top: 4px;
    text-align: center;
    color: var(--tw-brand);
}

.stopka__kontakt a {
    color: #454545;
    text-decoration: none;
}

.stopka__kontakt a:hover {
    color: var(--tw-brand);
    text-decoration: underline;
}

.stopka__dol {
    background: var(--tw-brand);
}

.stopka__dol-tresc {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding-top: 15px;
    padding-bottom: 15px;
}

.stopka__dol-tresc p {
    margin: 0;
    font-size: 13px;
    color: rgba(255, 255, 255, .9);
}

.stopka__dol-projekt {
    font-weight: 600;
    color: var(--tw-accent) !important;
}

@media (max-width: 991px) {
    .stopka__grid {
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        padding: 38px 0 32px;
    }
}

@media (max-width: 575px) {
    .stopka__grid {
        grid-template-columns: 1fr;
    }

    .stopka__dol-tresc {
        justify-content: center;
        text-align: center;
    }
}

/* ── Elementy wspólne ───────────────────────────────────────────────────── */

.breadcrumb-section {
    background-color: var(--tw-surface);
    border-bottom: 1px solid var(--tw-line);
}

.breadcrumb-section .page-title h2,
.breadcrumb-section .page-title__tekst {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--tw-ink);
}

.breadcrumb-item a {
    color: var(--tw-muted);
}

.breadcrumb-item a:hover {
    color: var(--tw-brand);
}

.title1 h4 {
    color: var(--tw-brand);
    letter-spacing: .08em;
}

#cookie-banner {
    background: var(--tw-ink);
}

/* Selektory z „#cookie-banner”, bo custom.css celuje w „#cookie-banner button”
   i sama nazwa identyfikatora przycisku przegrywa specyficznością. */
#cookie-banner #accept-cookies {
    padding: 8px 18px;
    background: var(--tw-accent);
    color: var(--tw-ink);
    border: 0;
    border-radius: 0;
    font-size: 13px;
    font-weight: 700;
}

#cookie-banner #accept-cookies:hover,
#cookie-banner #accept-cookies:focus {
    background: #e6bf00;
}

/* Zieleń odstawała od palety; żółć daje na ciemnym tle 8,8:1. */
#cookie-banner a {
    color: var(--tw-accent);
}

/* ── Elementy motywu z kolorami wpisanymi na sztywno ────────────────────── */

/* Motyw ma czerwień #ff4c3b wpisaną poza zmienną --theme-color,
   m.in. w ikonach kontaktu, znacznikach i przyciskach. */
.contact-page .theme-form i,
.contact-page .contact-right ul li i,
.contact-right ul li .contact-icon i,
.footer-social i,
.subscribe h4 i,
.service-block svg,
.service-block1 svg,
.breadcrumb-item.active,
.tap-top {
    color: var(--tw-brand) !important;
}

.tap-top {
    background: var(--tw-brand) !important;
    color: #fff !important;
}

.contact-right ul li .contact-icon {
    border-color: var(--tw-brand-line);
}

/* Przyciski motywu */
.btn-solid,
.btn-solid:active,
.btn-outline:hover {
    border-color: var(--tw-brand);
    background-image: linear-gradient(30deg, var(--tw-brand) 50%, transparent 50%);
    color: #fff;
}

.btn-solid:hover,
.btn-solid:focus {
    color: var(--tw-brand);
    background-color: #fff;
}

.btn-outline {
    border-color: var(--tw-brand);
    color: var(--tw-brand);
    background-image: linear-gradient(30deg, var(--tw-brand) 50%, transparent 50%);
}

/* Odnośniki w treści stron statycznych */
.page-content a:not(.btn):not([class*="offer-"]):not([class*="company-"]),
.typo-content a,
.faq-content a {
    color: var(--tw-brand);
}

.page-content a:hover,
.typo-content a:hover,
.faq-content a:hover {
    color: var(--tw-brand-dark);
}

/* Akordeon FAQ i nagłówki sekcji motywu */
.accordion .card-header button,
.faq-tab .nav-tabs .nav-link.active {
    color: var(--tw-brand) !important;
}

/* Paginacja i elementy formularzy Bootstrapa poza naszymi arkuszami */
.form-control:focus,
.form-select:focus {
    border-color: var(--tw-brand);
    box-shadow: none;
}

::selection {
    background: var(--tw-brand-soft);
    color: var(--tw-ink);
}

/* ── Strony statyczne ───────────────────────────────────────────────────── */

/* Typografia treści mieszka w tresc.css, pod klasą .tresc — reguły celujące
   w cały .container łapały też paginację, kolumnę boczną i pola formularzy.
   Tu zostaje tylko tytuł sekcji dla stron, które własnego układu nie mają. */
.section-b-space .container > h1,
.section-b-space .container > h2 {
    margin-bottom: 18px;
    font-size: 24px;
    font-weight: 700;
    color: var(--tw-ink);
}

.contact-page .map iframe,
.contact-page .map > div {
    border: 1px solid var(--tw-line);
}

/* Motyw daje akapitom na stronie „o nas" ujemny margines
   (.about-page p { margin-bottom: -7px }) — sklejał sąsiadujące elementy.
   Odstępy akapitów zadają u nas komponenty. */
.about-page p {
    margin-bottom: 0;
}

/* ── Kontrast tekstu (WCAG 1.4.3, poziom AA) ────────────────────────────── */

/* Motyw ustawia akapitom i nagłówkom h3/h6 barwę #777, która na białym tle daje
   4,48:1 — o włos poniżej wymaganych 4,5:1. Szarość zostaje, ale w odcieniu
   z palety serwisu (6,05:1), więc tekst pozostaje drugoplanowy i czytelny.
   Nadpisanie jest tutaj, a nie w style.css, żeby nie zmieniać pliku motywu. */
p,
h3,
h6 {
    color: var(--tw-muted);
}

/* Na ciemnym tle dziedziczenie przegrywa z regułą p{color} z motywu — baner
   zgody na ciasteczka miał przez to szary tekst na grafitowym tle (3,5:1). */
#cookie-banner,
#cookie-banner p {
    color: #ffffff;
}

/* Przycisk zgody i odnośnik w banerze mają własne reguły wyżej w tym arkuszu
   (żółć akcentu na grafitowym tle, 10,98:1) — nie wymagają poprawki. */

/* ── Widoczny fokus (WCAG 2.4.7, poziom AA) ─────────────────────────────── */

/* Motyw wyłącza obwódkę fokusu globalnie (`:focus { outline: none }` oraz
   osobno dla a i button), przez co poruszanie się po stronie klawiaturą
   odbywało się bez żadnego śladu, gdzie stoi kursor.

   Obwódka jest dwubarwna: żółty rdzeń z ciemnym pierścieniem. Pojedyncza
   barwa gubi się na tle o zbliżonej jasności, a strona ma zarówno białe
   sekcje, jak i grafitową stopkę i ciemne nagłówki sekcji. */
/* Bez [tabindex="-1"]: to cele fokusu ustawianego skryptem (np. treść po
   „Przejdź do treści”), a nie elementy do obsługi — obwódka wokół całej
   treści tylko by myliła. Bez border-radius: spłaszczał zaokrąglone
   przyciski (np. uruchamiacz ułatwień). */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible {
    outline: 3px solid var(--tw-accent) !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(31, 38, 47, .75) !important;
}

/* Pola formularza rejestracji miały własne podświetlenie o kryciu 18% —
   za słabe, żeby odróżnić pole aktywne od sąsiednich. */
.rejestracja .form-control:focus-visible,
.rejestracja .form-select:focus-visible {
    border-color: var(--tw-brand-dark);
}

/* Pułapka na roboty w formularzach otwartych dla niezalogowanych (SpamTrapType).
   Odsunięta poza ekran, a nie ukryta przez display: none — część automatów
   pomija pola wyłączone tą własnością, a te odsunięte wypełnia. Pole ma własną
   etykietę i tabindex -1, więc osoba korzystająca z czytnika ekranu usłyszy,
   że ma je zostawić puste, i nie trafi na nie tabulatorem. */
.form-trap {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Przyciski menu mobilnego (wcześniej div) — bez wyglądu przycisku z przeglądarki. */
button.toggle-nav,
button.mobile-back {
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
}

button.mobile-back {
    display: block;
    width: 100%;
}

/* Miniatury galerii są przyciskami otwierającymi powiększenie. */
.offer-gallery-grid__przycisk {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: none;
    cursor: zoom-in;
}

.offer-gallery-grid__przycisk img {
    display: block;
    width: 100%;
}

/* Motyw zamienia każdy h1 na wersaliki (style.css). Tytuły stron i ofert
   w wersalikach czyta się trudniej, a czytniki ekranu potrafią je literować. */
.home-hero__title,
.offer-detail__title,
.offers-page__title,
.podmioty__tytul,
.rejestracja__tytul,
.tresc__tytul,
.company-card__name {
    text-transform: none;
}