/*
Theme Name: OceanWP WCAG Child Theme
Theme URI: https://fundacjapharmahelp.pl/
Description: Szablon potomny OceanWP dostosowany do standardu WCAG 2.1 AA dla Fundacji PharmaHelp.
Author: Łukasz Gręźlikowski
Author URI: https://grezlikowski.pl/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */


/* =========================================================
   LOGO – ograniczenie rozmiaru na mobile i tablecie
   Obejmuje cały zakres, gdzie widoczne jest menu hamburger
   (do 1024px = breakpoint Elementora dla widoku mobilnego).

   Naturalny rozmiar logo: 768×768 px → bez ograniczenia
   wypełnia cały nagłówek na tablecie i szerokim mobile.

   Cel: logo proporcjonalne do przycisku hamburger (~42px)
   i przycisku "Skontaktuj się!" (~40px).
   ========================================================= */
@media (max-width: 1024px) {
    #site-header .elementor-widget-image img,
    #site-header img.wp-image-47 {
        max-height: 56px !important;
        width: auto !important;
    }
}


/* ==========================================================================
   WCAG 2.1 AA – Poprawki kontrastu i dostępności
   Strona: fundacjapharmahelp.pl
   Wersja: 2 (2026-06-19)

   === KOLOR MARKI ===
   Nowy kolor podstawowy (ciemna zieleń): #2d6a00
     – biały tekst na #2d6a00 → kontrast 6.65:1  ✓
     – #2d6a00 tekst na białym tle  → kontrast 6.65:1  ✓
     (zastępuje #37880E = 4.14:1 i #91C73D = 1.92:1)

   === NAPRAWIONE W TEJ WERSJI ===
   v1: nav aktywny link, cookie przyciski, header CTA, hero gradient overlay
   v2: hero kolumna bg (H4/H6), ekit-double-btn, accordion, linki tel., PDF, focus
   ========================================================================== */

/* =========================================================
   1. MENU NAWIGACYJNE – aktywny link "Strona główna"
      Obecny: #91C73D na białym → 1.92:1  (FAIL)
      Po:     #2d6a00 na białym → 6.65:1  ✓
   ========================================================= */
#site-header ul li.current-menu-item > a,
#site-header ul li.current_page_item > a,
#site-header ul li.current-menu-ancestor > a {
    color: #2d6a00 !important;
}

/* =========================================================
   2. PRZYCISKI ELEMENTOR (zielone)
      Obecny: biały na #37880E → 4.14:1  (FAIL)
      Po:     biały na #2d6a00 → 6.65:1  ✓
      Dotyczy: "Czytaj więcej", "Kontakt", "Nasze usługi"
               i wszystkich innych przycisków na stronie
   ========================================================= */
.elementor-button.elementor-button-link,
.elementor-button {
    background-color: #2d6a00 !important;
    border-color: #2d6a00 !important;
}

.elementor-button.elementor-button-link:hover,
.elementor-button.elementor-button-link:focus,
.elementor-button:hover,
.elementor-button:focus {
    background-color: #1f4d00 !important;
    border-color: #1f4d00 !important;
}

/* =========================================================
   3. PRZYCISK "Skontaktuj się!" w nagłówku
      Ten sam kolor co przyciski Elementor – objęty regułą 2.
      Selektory dodatkowe dla pewności:
   ========================================================= */
#site-header .elementor-button,
#site-header a.elementor-button {
    background-color: #2d6a00 !important;
    border-color: #2d6a00 !important;
}

#site-header .elementor-button:hover,
#site-header .elementor-button:focus,
#site-header a.elementor-button:hover,
#site-header a.elementor-button:focus {
    background-color: #1f4d00 !important;
    border-color: #1f4d00 !important;
}

/* =========================================================
   4. SEKCJA HERO – wielowarstwowy gradient (redesign v3)
      Element: .elementor-element-668f79b8

      Poprzednia technika: prosty gradient left→right +
      ciemny prostokąt na kolumnie → efekt "pudełka",
      sztuczny wygląd

      Nowa technika: dwie warstwy gradientu (CSS multiple
      background-image) tworzące naturalne winieto od dołu
      i delikatnie od lewej – styl kinematograficzny:
        – zdjęcie farmaceutki widoczne w górnym rogu
        – tekst na ciemniejszym tle w dolnej-lewej strefie
        – brak ramki / twardych krawędzi

      Kontrast (najgorszy przypadek: jasne tło foto):
        H1  (48px bold, duży tekst)  – strefa ~65%: ~4.5:1 ✓ AA
        H4  (18px bold, duży tekst)  – strefa ~50%: ~5.0:1 ✓ AA
        H6  (15px, normalny)         – strefa ~38%: ~5.3:1 ✓ AA
        Przyciski                    – strefa ~12%: ~9.5:1 ✓ AAA

      Uwaga techniczna: ::before nie jest wykrywany jako
      background-color przez narzędzia WCAG – kontrast jest
      wizualnie zapewniony, ale audyt automatyczny może
      zgłaszać błąd. Docelowe rozwiązanie wymaga zmiany
      struktury w Elementorze.
   ========================================================= */

.elementor-element-668f79b8 {
    position: relative;
}

.elementor-element-668f79b8::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Warstwa 1 – pionowo od dołu: ciemna strefa CTA i tekstu */
        linear-gradient(
            to top,
            rgba(0, 12, 5, 0.85)  0%,
            rgba(0, 12, 5, 0.75) 12%,
            rgba(0, 10, 3, 0.65) 27%,
            rgba(0,  8, 2, 0.50) 42%,
            rgba(0,  5, 1, 0.25) 58%,
            rgba(0,  2, 0, 0.06) 72%,
            rgba(0,  0, 0, 0.00) 82%
        ),
        /* Warstwa 2 – poziomo od lewej: delikatna strefa tekstu */
        linear-gradient(
            to right,
            rgba(0, 10, 3, 0.40)  0%,
            rgba(0,  8, 2, 0.18) 42%,
            rgba(0,  4, 1, 0.05) 62%,
            rgba(0,  0, 0, 0.00) 80%
        );
    z-index: 1;
    pointer-events: none;
}

/* Treść sekcji hero nad nakładką */
.elementor-element-668f79b8 > .elementor-container {
    position: relative;
    z-index: 2;
}

/* =========================================================
   5. COOKIEYES – przyciski banneru zgód
      Obecny: #37880E (tekst i tło) → 4.14:1  (FAIL dla 14px)
      Po:     #2d6a00                → 6.65:1  ✓

      "Akceptuj wszystko" – biały tekst na zielonym tle
      "Odrzuć wszystkie" i "Dostosuj" – zielony tekst na białym
   ========================================================= */

/* Przycisk "Akceptuj wszystko" */
.cky-btn.cky-btn-accept {
    background-color: #2d6a00 !important;
    border-color: #2d6a00 !important;
    color: #ffffff !important;
}

.cky-btn.cky-btn-accept:hover,
.cky-btn.cky-btn-accept:focus {
    background-color: #1f4d00 !important;
    border-color: #1f4d00 !important;
}

/* Przyciski "Odrzuć wszystkie" i "Dostosuj" */
.cky-btn.cky-btn-reject,
.cky-btn.cky-btn-customize {
    color: #2d6a00 !important;
    border-color: #2d6a00 !important;
}

.cky-btn.cky-btn-reject:hover,
.cky-btn.cky-btn-reject:focus,
.cky-btn.cky-btn-customize:hover,
.cky-btn.cky-btn-customize:focus {
    background-color: rgba(45, 106, 0, 0.08) !important;
}

/* Panel ustawień cookie (przyciski kategorii) */
#ckyPreferenceCenter .cky-btn {
    background-color: #2d6a00 !important;
    border-color: #2d6a00 !important;
    color: #ffffff !important;
}

#ckyPreferenceCenter .cky-btn:hover,
#ckyPreferenceCenter .cky-btn:focus {
    background-color: #1f4d00 !important;
}

/* =========================================================
   6. SEKCJA HERO – kolumna z tekstem (redesign v3)
      Poprzednia: rgba(0,30,0,0.72) z border-radius → widoczna
      ciemna ramka/pudełko na zdjęciu

      Nowa: brak tła na kolumnie – kontrast wizualny
      zapewniają warstwy gradientu z reguły 4 (::before).
      Kolumna jest przezroczysta – tekst floatuje na zdjęciu.

      ekit-double-btn-two (Kontakt) zachowuje własne tło
      (reguła 7) dla czytelności przycisku.
   ========================================================= */
.elementor-element-34619f1c > .elementor-widget-wrap {
    background-color: transparent !important;
    border-radius: 0 !important;
}

/* =========================================================
   7. SEKCJA HERO – przyciski ElementsKit Double Button
      .ekit-double-btn-one "Nasze usługi":
        Obecny: biały na #37880E → 4.14:1  (FAIL)
        Po:     biały na #2d6a00 → 6.65:1  ✓
      .ekit-double-btn-two "Kontakt" (ghost):
        Obecny: biały na rgba(2,1,1,0) / transparent → FAIL
        Po:     biały na rgba(0,30,0,0.78) → ~5.8:1  ✓
   ========================================================= */
.ekit-double-btn.ekit-double-btn-one {
    background-color: #2d6a00 !important;
    border-color: #2d6a00 !important;
}

.ekit-double-btn.ekit-double-btn-one:hover,
.ekit-double-btn.ekit-double-btn-one:focus {
    background-color: #1f4d00 !important;
    border-color: #1f4d00 !important;
}

.ekit-double-btn.ekit-double-btn-two {
    background-color: rgba(0, 30, 0, 0.78) !important;
    border-color: rgba(255, 255, 255, 0.85) !important;
}

.ekit-double-btn.ekit-double-btn-two:hover,
.ekit-double-btn.ekit-double-btn-two:focus {
    background-color: rgba(0, 50, 0, 0.88) !important;
}

/* =========================================================
   8. FAQ ACCORDION – aktywny panel
      Obecny: biały tekst na #91C73D (jasna zieleń) → 1.92:1  (FAIL)
      Po:     biały tekst na #2d6a00 → 6.65:1  ✓
      Dotyczy: .ekit-accordion--toggler (ElementsKit accordion)
   ========================================================= */
.ekit-accordion--toggler,
.ekit-accordion--toggler.collapsed {
    background-color: #2d6a00 !important;
    color: #ffffff !important;
    border-color: #2d6a00 !important;
}

.ekit-accordion--toggler:hover,
.ekit-accordion--toggler:focus {
    background-color: #1f4d00 !important;
    color: #ffffff !important;
}

/* =========================================================
   9. SEKCJA KONTAKTOWA – linki telefoniczne
      Element: sekcja [data-id="49a51fb3"] (ciemne tło rgb(37,55,80))
      Problem: kolor linków rgb(37,55,80) = identyczny z tłem → 1:1
      Po:      biały → kontrast 7.8:1  ✓
   ========================================================= */
.elementor-element-49a51fb3 a:not(.elementor-button) {
    color: #ffffff !important;
}

.elementor-element-49a51fb3 a:not(.elementor-button):hover,
.elementor-element-49a51fb3 a:not(.elementor-button):focus {
    color: #c8e8a0 !important;
    text-decoration: underline;
}

/* =========================================================
   10. LINKI DO PDF – oznaczenie formatu (WCAG 2.4.4)
       Dodaje etykietę "(PDF)" po linku kończącym się na .pdf
       Informuje użytkownika przed kliknięciem o formacie pliku
   ========================================================= */
a[href$=".pdf"]::after,
a[href*=".pdf?"]::after {
    content: " (PDF)";
    font-size: 0.82em;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* =========================================================
   11. WIDOCZNY FOCUS (WCAG 2.4.7 – Focus Visible)
       Zapewnia wyraźny wskaźnik klawiatury na wszystkich
       elementach interaktywnych
   ========================================================= */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #2d6a00 !important;
    outline-offset: 3px !important;
    box-shadow: 0 0 0 5px rgba(45, 106, 0, 0.25) !important;
}

/* Przyciski i linki na ciemnym tle – biały focus */
#site-header a:focus-visible,
.elementor-element-49a51fb3 a:focus-visible,
.elementor-element-4252b18c a:focus-visible,
.elementor-element-2795bd07 a:focus-visible {
    outline-color: #ffffff !important;
    box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.4) !important;
}


/* ==========================================================================
   WCAG 2.1 AA – Poprawki strony głównej v3 (22.06.2026)
   Raport: AIM Score 8.8 | 4 błędy kontrastu | 12 ostrzeżeń
   ========================================================================== */

/* =========================================================
   12. SEKCJA KONTAKTOWA – tekst niebędący linkiem (Telefon:)
       Problem: etykieta ikony ".elementor-icon-list-text"
                ma kolor rgb(37,55,80) = identyczny z tłem sekcji
                → Reguła 9 naprawiła linki, ale nie zwykły tekst
       Po: #ffffff → kontrast vs #253750 = 8.07:1  ✓ AAA
   ========================================================= */
.elementor-element-49a51fb3 .elementor-icon-list-text,
.elementor-element-49a51fb3 .elementor-icon-list-icon,
.elementor-element-49a51fb3 li {
    color: #ffffff !important;
}

/* =========================================================
   13. STOPKA – sekcja z ciemnym tłem #253750
       Element: .elementor-element-4252b18c
       Problem: linki, ikony i tekst mają kolor rgb(37,55,80)
                identyczny z kolorem tła → kontrast 1:1 (FAIL)
       Po: #ffffff → kontrast vs #253750 = 8.07:1  ✓ AAA
   ========================================================= */
.elementor-element-4252b18c a,
.elementor-element-4252b18c .elementor-heading-title,
.elementor-element-4252b18c p,
.elementor-element-4252b18c li,
.elementor-element-4252b18c .elementor-icon-list-text,
.elementor-element-4252b18c .elementor-icon-list-icon,
.elementor-element-4252b18c .elementor-icon-box-title {
    color: #ffffff !important;
}

.elementor-element-4252b18c a:hover,
.elementor-element-4252b18c a:focus {
    color: #c8e8a0 !important;
    text-decoration: underline;
}

/* =========================================================
   14. KOMPENSACJA WIZUALNA – zmiany poziomów nagłówków (JS)
       wcag-fixes.js zmienia H4→H2 i H6→H3 w sekcji hero,
       oraz H6→H2 dla etykiety FAQ.
       Elementor steruje rozmiarem przez .elementor-element-XXXX
       więc zmiana tagu nie wpływa na wygląd. Ten blok resetuje
       domyślne style przeglądarki dla H2/H3 na wypadek gdyby
       były nadpisywane przez arkusz Elementor'a.
   ========================================================= */
h2.wcag-level-changed.elementor-heading-title,
h3.wcag-level-changed.elementor-heading-title,
h4.wcag-level-changed.elementor-heading-title,
h5.wcag-level-changed.elementor-heading-title {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin-top: inherit;
    margin-bottom: inherit;
    color: inherit;
}

/* =========================================================
   15. UKRYTY H1 – wstrzykiwany przez wcag-fixes.js (FIX 7)
       Identyfikator: h1_missing
       Widoczny tylko dla czytników ekranu (screen-reader-only)
   ========================================================= */
.wcag-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =========================================================
   16. WYRÓWNANIE TEKSTU – zakaz justowania (WCAG 1.4.8)
       Identyfikator: text_justified
       Dotyczy: /ochrona-i-promocja-zdrowia/ (×15),
                /inicjuj-z-fio-4-0/ (×3)
       Uzasadnienie: justowany tekst utrudnia czytanie
       osobom z dysleksją (nierówne przerwy między wyrazami).
   ========================================================= */
.elementor-widget-text-editor p,
.elementor-widget-text-editor div,
.elementor-widget-text-editor li {
    text-align: left !important;
}


/* ==========================================================================
   Poprawki CSS – strony typu "page"
   Strona: fundacjapharmahelp.pl
   v2 (2026-06-21)

   Plik dedykowany stronom WordPress klasy "page".
   Uzupełnia reguły globalne powyżej (wcag-contrast-fix).
   Każda reguła jest objęta selektorem body.page-id-XXX.

   RAPORT DOSTĘPNOŚCI – KONSULTACJE (19.06.2026, AIM 9.2)
   URL: https://fundacjapharmahelp.pl/konsultacje-farmaceutyczne/

   BŁĘDY KONTRASTU (naprawiane w tym pliku):
    ① H2 "Twoje zdrowie pod naszą opieką"
       Kolor: #333333 na tle #253750 → 1.04:1  ✗ (wymaga ≥3:1 dla dużego tekstu)
       Element: .elementor-element-2ef774d4 w kolumnie .elementor-element-4e8b59fc
    ② Tekst "Dbamy o Twoje zdrowie..."
       Kolor: #253750 na tle #253750 → 1.00:1  ✗ (niewidoczny tekst!)
       Element: .elementor-element-7555972a w kolumnie .elementor-element-4e8b59fc
   ========================================================================== */


/* =====================================================
   KONSULTACJE FARMACEUTYCZNE (page-id-113)
   ===================================================== */

/* -----------------------------------------------------
   1. SLIDER / PAGE HEADER – baner tytułowy z H1 i breadcrumbs
      Element: .elementor-element-347e22f8

      a) Usuń solid overlay color (zachowaj background-image jeśli jest)
      b) Gradient od dołu przez ::before – nie dotyka overlay
   ----------------------------------------------------- */

.page-id-113 .elementor-element-347e22f8 > .elementor-background-overlay {
    background-color: transparent !important;
}

.page-id-113 .elementor-element-347e22f8 {
    position: relative;
}

.page-id-113 .elementor-element-347e22f8::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 20, 0, 0.82) 0%,
        rgba(0, 20, 0, 0.55) 32%,
        rgba(0, 15, 0, 0.18) 58%,
        rgba(0,  0, 0, 0.00) 100%
    );
    z-index: 1;
    pointer-events: none;
}

/* Treść sekcji nad gradientem */
.page-id-113 .elementor-element-347e22f8 > .elementor-container {
    position: relative;
    z-index: 2;
}

/* H1 i breadcrumbs: biały tekst
   Kontrast biały na rgba(0,20,0,0.82) ≈ ~20:1 ✓ AAA */
.page-id-113 .elementor-element-347e22f8 .elementor-heading-title {
    color: #ffffff !important;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55);
}

.page-id-113 .elementor-element-347e22f8 .elementor-icon-list-text,
.page-id-113 .elementor-element-347e22f8 .elementor-icon-list-item a {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* -----------------------------------------------------
   2a. BŁĄD KONTRASTU – H2 "Twoje zdrowie pod naszą opieką"
       Audyt (19.06.2026): #333333 na tle #253750 → 1.04:1  ✗
       Wymóg WCAG 1.4.3: ≥ 3:1 dla dużego tekstu (H2 ≥18pt)
       Element: .elementor-element-2ef774d4
       Rozwiązanie: biały → kontrast 8.07:1  ✓ AAA
   ----------------------------------------------------- */
.page-id-113 .elementor-element-2ef774d4 .elementor-heading-title {
    color: #ffffff !important;
}

/* -----------------------------------------------------
   2b. BŁĄD KONTRASTU – tekst akapitowy (niewidoczny)
       Audyt (19.06.2026): #253750 na tle #253750 → 1.00:1  ✗
       Kolor tekstu = kolor tła → tekst całkowicie niewidoczny!
       Element: .elementor-element-7555972a
       Rozwiązanie: biały → kontrast 8.07:1  ✓ AAA
   ----------------------------------------------------- */
.page-id-113 .elementor-element-7555972a .elementor-widget-container,
.page-id-113 .elementor-element-7555972a p {
    color: #ffffff !important;
}

/* -----------------------------------------------------
   2c. KOLUMNA HERO – jawne ciemne tło
       Problem: kolumna 4e8b59fc wyświetla jasne/białe tło
                → biały tekst (2a/2b) jest nieczytelny
       Rozwiązanie: jawne ciemne tło na overlay kolumny
                #253750 → biały tekst: kontrast 8.07:1  ✓ AAA
   ----------------------------------------------------- */
.page-id-113 .elementor-element-4e8b59fc > .elementor-widget-wrap > .elementor-background-overlay {
    background-color: #253750 !important;
    opacity: 1 !important;
}