/*
 * wcag-contrast.css
 * Poprawki kontrastu do WCAG 2.1 AA (1.4.3 / 1.4.11) dla spzlo.wieliczka.pl
 * Nadpisuje domyślne kolory Bootstrap 2. Ładować PO bootstrap.css i main.css.
 *
 * Wszystkie wartości zweryfikowane: kontrast >= 4.5:1 dla tekstu,
 * >= 3:1 dla komponentów UI/dużego tekstu.
 */

/* --- Linki: #0088cc (3.89:1) -> #0067a3 (6.05:1 na bieli, 4.85:1 na stopce) ---
   Alternatywa: #0000dd = 10.27:1 (bardzo mocny kontrast, ale jaskrawy niebieski).
   Obie wersje zgodne z AA. Poniżej wersja stonowana. */
a { color: #0067a3; }
a:hover, a:focus { color: #004e7a; }   /* ciemniejszy niż domyślne #005580, spójny */

/* --- Tekst pomocniczy / wyszarzony: #999 (2.85:1) -> #6f6f6f (5.02:1) --- */
.muted,
.help-block,
.help-inline,
small.muted,
.text-muted,
legend small,
.form-actions .help-block {
    color: #6f6f6f;
}
/* .muted na tle .well / .table-striped (#f5f5f5): #6f6f6f = 4.61:1 -> OK */

/* --- Kolory kontekstowe tekstu (alerty inline, .text-*) --- */
.text-warning { color: #8a6100; }   /* było #c09853 = 2.67:1 -> 5.54:1 */
.text-info    { color: #2a6f8f; }   /* było #3a87ad = 4.00:1 -> 5.57:1 */
.text-success { color: #3a7238; }   /* było #468847 = 4.31:1 -> 5.76:1 */
/* .text-error #b94a48 = 5.08:1 -> już zgodne, nie ruszamy */

/* --- Alert boxy: przyciemnienie tekstu dla pewności AA na jasnym tle --- */
.alert            { color: #5c4400; }  /* domyślny alert (żółty) - ciemny brąz */
.alert-info       { color: #205064; }
.alert-success    { color: #2f5c2e; }
.alert-error, .alert-danger { color: #953b3b; }

/* --- Label / Badge "info" (użyte przy akordeonach Laboratorium): 
       tło #3a87ad z białym tekstem = 4.00:1 (FAIL dla małego tekstu) 
       -> ciemniejsze tło #2a6f8f = 5.57:1 --- */
.label-info,
.badge-info {
    background-color: #2a6f8f;
    color: #ffffff;
}
.label-info[href],
.badge-info[href] {
    background-color: #205064;
}

/* --- Przyciski info (jeśli używane) - to samo tło co label --- */
.btn-info {
    background-color: #2a6f8f;
    background-image: none;
    border-color: #205064;
}
.btn-info:hover,
.btn-info:focus,
.btn-info:active {
    background-color: #205064;
}

/* --- Menu górne: obniżenie jasności linków dla stanu spoczynku ---
   #D8CEF0 na #29166f = 9.74:1 -> już OK, zostawiamy.
   Dodajemy tylko wyraźny focus (WCAG 2.4.7 Focus Visible). */

/* --- Nav disabled (wg sugestii): #999 -> #222 (15.91:1) ---
   UWAGA: element disabled jest wyłączony spod WCAG 1.4.3; ta zmiana
   sprawia, że wyłączona pozycja menu wygląda jak aktywny link.
   Oryginalny kolor Bootstrap: #999999  (podmień poniżej, jeśli chcesz wrócić). */
.nav .disabled > a,
.nav .disabled > a:hover,
.nav .disabled > a:focus {
    color: #222222;   /* oryginał: #999999 */
}

/* --- Widoczny wskaźnik fokusu klawiatury (dobra praktyka, 2.4.7) --- */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
.btn:focus,
.dropdown-toggle:focus {
    outline: 2px solid #ffbf47;   /* żółty, kontrastuje z granatem menu i bielą treści */
    outline-offset: 2px;
}

/* --- Placeholdery formularzy: domyślnie #999 (2.85:1) -> #6f6f6f --- */
::-webkit-input-placeholder { color: #6f6f6f; }
::-moz-placeholder          { color: #6f6f6f; opacity: 1; }
:-ms-input-placeholder      { color: #6f6f6f; }
::placeholder               { color: #6f6f6f; }

/* ============================================================
 * OPCJA A: Nadpisanie inline'owych kolorów z treści (WYSIWYG).
 * Kolory zaszyte w atrybutach style="color:..." w plikach dane/**.html
 * nie przechodziły AA. Selektory atrybutowe + !important je nadpisują.
 * Mapowanie na najbliższy ciemniejszy odcień (wszystkie >= 5.4:1 na bieli).
 *
 * UWAGA: to rozwiązanie globalne — zmienia dany kolor wszędzie.
 * Alternatywa (docelowa) = poprawa wprost w treści przez CMS.
 * ============================================================ */
[style*="color:#ff0000"], [style*="color: #ff0000"],
[style*="color:#FF0000"], [style*="color: #FF0000"] { color: #d40000 !important; }

[style*="color:#ff8c00"], [style*="color: #ff8c00"] { color: #9a5b00 !important; }

[style*="color:#f39c12"], [style*="color: #f39c12"] { color: #8a5a00 !important; }

[style*="color:#e74c3c"], [style*="color: #e74c3c"] { color: #c0392b !important; }

[style*="color:#3498db"], [style*="color: #3498db"] { color: #1f6ba8 !important; }

[style*="color:#c09853"], [style*="color: #c09853"] { color: #8a6100 !important; }

/* --- .nav-header (nagłówki sekcji na listach, np. "Ośrodek Zdrowia w ...")
       Bootstrap: #999 = 2.85:1 przy 11px bold -> FAIL.
       -> #6b6b6b = 5.33:1 na bieli, 4.89:1 na #f5f5f5.
       Usuwamy też jasny text-shadow, który obniża czytelność. --- */
.nav-header {
    color: #6b6b6b;              /* oryginał: #999999 */
    text-shadow: none;          /* oryginał: 0 1px 0 rgba(255,255,255,.5) */
}

/* --- Link Facebook w stopce: zamiana inline onmouseover/onmouseout
       (JS zależny od myszy, niedostępny z klawiatury) na CSS :hover + :focus.
       Rozwiązuje warning "Device dependent event handler" + WCAG 2.1.1. --- */
.fb-link {
    float: left;
    display: block;
    padding: 10px;
    line-height: 1;
    opacity: 0.85;
    transition: opacity 0.2s;
}
.fb-link:hover,
.fb-link:focus {
    opacity: 1;
}
.fb-link svg {
    vertical-align: middle;
}

/* --- .sr-only: treść czytelna dla czytników ekranu, niewidoczna wizualnie.
       Używane do ukrytych <h1>/<h2>/<h3> (WAVE: missing first level heading,
       skipped heading level) bez zmiany wyglądu strony.
       Standardowa technika (jak w Bootstrap 3+). --- */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* --- Kolorowanie wierszy tabel (.info/.warning/.calm) na <th> ---
       Bootstrap koloruje wiersze regułą "tr.info > td" - celuje wyłącznie
       w <td>. Odkąd js/main.js zamienia komórki nagłówkowe na prawdziwe
       <th> (naprawa WAVE: "layout table"), te wiersze straciły kolor,
       bo selektor Bootstrapa ich nie łapał. Douzupełniamy o "> th". --- */
.table tbody tr.info > th {
    background-color: #d9edf7;
}
.table tbody tr.warning > th {
    background-color: #fcf8e3;
}
.table tbody tr.calm > th {
    background-color: #afd1ff;
}
.table tbody tr.success > th {
    background-color: #dff0d8;
}
.table tbody tr.error > th {
    background-color: #f2dede;
}
.table-hover tbody tr.info:hover > th {
    background-color: #c4e3f3;
}
.table-hover tbody tr.warning:hover > th {
    background-color: #faf2cc;
}
.table-hover tbody tr.calm:hover > th {
    background-color: #afd1ff;
}
.table-hover tbody tr.success:hover > th {
    background-color: #d0e9c6;
}
.table-hover tbody tr.error:hover > th {
    background-color: #ebcccc;
}

/* --- Etykieta typu pliku dopisywana przez enhanceDocumentLinks() (js/main.js)
       przy linkach do PDF/DOC/XLS itd. Kolor #6f6f6f = 5.02:1, zgodny AA. --- */
.doc-type-badge {
    color: #6f6f6f;
    font-weight: normal;
    font-size: 0.9em;
}

/* --- Naprawa przycinania obramowania fokusu w górnym menu -------------
 * Globalny styl fokusu (a:focus { outline-offset: 2px }) rysuje
 * obramowanie NA ZEWNĄTRZ elementu. W pasku menu elementy stoją
 * ciasno obok siebie (float, brak odstępu), więc prawa krawędź
 * obramowania jednego linku bywa wizualnie przycięta przez sąsiedni
 * element z prawej. W samym #menu-bar rysujemy fokus DO WEWNĄTRZ
 * (ujemny outline-offset) - nie zależy to od sąsiadów. --- */
#menu-bar a:focus {
    outline-offset: -2px;
}

/* --- Skip-link (WCAG 2.4.1): ukryty do momentu otrzymania fokusu ------ */
.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;          /* nad navbar-fixed-top (z-index 1030) */
    padding: 8px 16px;
    background: #29166f;    /* granat spójny z paskiem menu */
    color: #ffffff;         /* kontrast na granacie: duży */
    font-weight: bold;
    text-decoration: none;
}
.skip-link:focus {
    left: 8px;
    top: 8px;
    color: #ffffff;
    outline: 2px solid #ffbf47;
    outline-offset: 2px;
}

/* --- Fokus/kotwice nie chowają się pod przyklejonym paskiem menu ------
 * (WCAG 2.2, kryterium 2.4.11 Focus Not Obscured, AA). Pasek
 * navbar-fixed-top zasłania górne ~40-60px okna; bez tej reguły element,
 * do którego przewinęła strona (fokus z Tab, skok skip-linku do
 * #content_1, kotwice #EFS2022 itd.), potrafi wylądować pod paskiem. */
html {
    scroll-padding-top: 70px;
}

/* --- Redukcja ruchu na życzenie systemu -------------------------------
 * Użytkownicy z ustawioną systemową redukcją animacji (dostępność,
 * zaburzenia przedsionkowe) dostają natychmiastowe rozwijanie
 * akordeonów/menu zamiast animacji height 0.35s z Bootstrapa. */
@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* --- Rozmiar celu dotykowego (WCAG 2.2 - 2.5.8 Target Size, AA) ------
 * Minimum 24x24px dla elementów interaktywnych. Wyjątek "inline" (linki
 * w zdaniach) nie wymaga zmian, ale samodzielne linki w listach
 * (wykazy ogłoszeń, zamówień, dokumentów) przy line-height 20px mają
 * ~21px wysokości i stoją zbyt ciasno. Podnosimy wysokość linii i cel
 * kliknięcia w listach treści. Menu boczne (padding 3px -> ~26px)
 * i górne (padding 10px) już spełniają wymóg. */
#content_1 li > a {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}
#content_1 li {
    line-height: 24px;
}
/* Samodzielne linki w <p> (bez otaczającego tekstu) - klasa dodawana
 * przez markStandaloneParagraphLinks() w js/main.js, bo czysty CSS nie
 * potrafi odróżnić tego od linku wtopionego w zdanie (patrz komentarz
 * przy tej funkcji). */
#content_1 a.standalone-link-target {
    display: inline-block;
    min-height: 24px;
    line-height: 24px;
}

/* --- Przycisk "Przeczytaj na głos" (initReadAloud, js/main.js) --------
 * Kolory spełniają AA (biel na granacie 14.6:1); rozmiar celu >= 24px. */
.read-aloud-btn {
    display: inline-block;
    margin: 0 0 10px 0;
    padding: 6px 14px;
    min-height: 24px;
    background-color: #29166f;
    background-image: none;
    color: #ffffff;
    border: 1px solid #1d0f52;
    text-shadow: none;
}
.read-aloud-btn:hover,
.read-aloud-btn:focus {
    background-color: #3e326f;
    color: #ffffff;
}
.read-aloud-icon {
    margin-right: 4px;
}

/* --- Wyśrodkowanie logotypów w stopce -----------------------------------
 * DRUGIE PODEJŚCIE: flexbox (display:flex + align-items:center) mimo
 * poprawnie zastosowanych reguł (potwierdzone w DevTools) nie centrował
 * <a> w praktyce - prawdopodobnie niejednoznaczność w liczeniu
 * shrink-to-fit dla elementu flex zawierającego blokowy <p>. Porzucamy
 * flexbox na rzecz najstarszej, najpewniejszej techniki: <a> jako
 * display:inline-block (gwarantowane kurczenie do szerokości zawartości,
 * zachowanie zdefiniowane w CSS od zawsze, bez niuansów flexa), a
 * wyśrodkowanie robi zwykłe text-align:center z .pagination-centered
 * (już obecne na rodzicu). Celujemy tylko w kolumny z logami
 * (.span3/.span2), NIE w kolumnę z adresem (.span4). --- */
#footer .span3.pagination-centered > a,
#footer .span2.pagination-centered > a {
    display: inline-block;
    text-align: center;
}
#footer img {
    max-width: 100%;
    height: auto;
}

/* --- A: kursor "łapka" na przełącznikach akordeonu ---------------------
 * Usunięcie href (naprawa klawiatury, patrz historia zmian) miało efekt
 * uboczny: <a> bez href nie dostaje domyślnie kursora pointer od
 * przeglądarki, mimo że jest klikalny/aktywny. Przywracamy jawnie. --- */
.accordion-toggle {
    cursor: pointer;
}

/* --- E: obrót ikony chevron przy rozwinięciu akordeonu -----------------
 * Wizualna wskazówka stanu dla WSZYSTKICH użytkowników (nie tylko
 * czytników ekranu) - opiera się na aria-expanded, które i tak już
 * aktualizujemy w js/main.js przy każdym otwarciu/zamknięciu. --- */
.accordion-toggle .icon-chevron-down {
    transition: transform 0.2s ease;
}
.accordion-toggle[aria-expanded="true"] .icon-chevron-down {
    transform: rotate(180deg);
}

/* --- WCAG 1.4.1 Use of Color: linki w treści muszą być odróżnialne od
 * otaczającego tekstu czymś więcej niż samym kolorem (technika G183).
 * Bootstrap domyślnie NIE podkreśla linków w spoczynku (dopiero na
 * hover/focus) - to jego oryginalne zachowanie z 2013 r., nieruszane
 * przy naszych poprawkach kolorów.
 *
 * Zasięg: #content (CAŁY kontener treści strony), NIE #content_1.
 * Powód: na stronie startowej dodatkowa "studnia" z ogłoszeniem grantowym
 * (dane/start/efs.php i podobne) renderuje się MIĘDZY contentDivOpen()
 * a content_1DivOpen() - czyli jest wewnątrz #content, ale POZA
 * #content_1. Węższy zasięg (#content_1) pomijał ten przypadek.
 * #content nie obejmuje menu bocznego ani stopki (to jego rodzeństwo
 * w drzewie DOM), więc nie ma ryzyka podkreślenia czegoś w nawigacji.
 *
 * Wyjątek: .accordion-toggle (nagłówki-przełączniki sekcji: "Ogłoszenia -
 * Aktualne (0)" itd.) - to nie jest link wtopiony w zdanie, cały
 * <div class="accordion-heading"> to tylko ten link, bez sąsiedniego
 * zwykłego tekstu. WCAG 1.4.1 tu nie ma zastosowania. --- */
#content a {
    text-decoration: underline;
}
#content a.accordion-toggle {
    text-decoration: none;
}