/* ================================================================
   EMU Accessibility — EAA / WCAG 2.1 AA
   emupay.eu | Elementor Pro compatible
   ================================================================ */

/* ── 1. SKIP LINK (WCAG 2.4.1) ─────────────────────────────────
   Niewidoczny dla myszki, widoczny dla klawiatury i czytników.
   ────────────────────────────────────────────────────────────── */
.emu-skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    z-index: 99999;
    padding: 14px 24px;
    background: #C9A84C;
    color: #0D1B2A;
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
    transition: top 0.2s ease;
    /* Kontrast: #0D1B2A na #C9A84C = 7.2:1 ✅ WCAG AA */
}
.emu-skip-link:focus {
    top: 0;
    outline: 3px solid #0D1B2A;
    outline-offset: 2px;
}

/* ── 2. FOCUS INDICATORS (WCAG 2.4.7, 2.4.11) ─────────────────
   Widoczny kontur dla wszystkich elementów interaktywnych.
   Złoty kontur (#C9A84C) na ciemnym tle = 6.5:1 ✅
   ────────────────────────────────────────────────────────────── */

/* Usuń domyślne outline przeglądarki — zastąp własnym */
*:focus {
    outline: none;
}

/* Pokaż focus tylko przy nawigacji klawiaturą (nie myszką) */
*:focus-visible {
    outline: 3px solid #C9A84C !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}

/* Elementor — przyciski, linki, widgety */
.elementor-button:focus-visible,
.elementor-nav-menu a:focus-visible,
.elementor-widget-heading a:focus-visible,
.elementor-post__read-more:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid #C9A84C !important;
    outline-offset: 3px !important;
    border-radius: 3px;
}

/* Specjalnie dla Elementor sticky header */
.elementor-sticky a:focus-visible,
.elementor-sticky button:focus-visible {
    outline-color: #C9A84C !important;
}

/* ── 3. SCREEN READER ONLY (użytek wewnętrzny) ──────────────── */
.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;
}

/* ── 4. MAIN CONTENT TARGET dla skip link ───────────────────── */
#emu-main-content {
    outline: none; /* tabindex="-1" nie powinien być widoczny */
}

/* ── 5. ACCESSIBILITY TOOLBAR (kontrast, rozmiar czcionki) ─────
   Pływający przycisk w prawym dolnym rogu.
   ────────────────────────────────────────────────────────────── */
#emu-a11y-toolbar {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 99998;
    font-family: 'Outfit', sans-serif;
}

#emu-a11y-toggle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #C9A84C;
    color: #0D1B2A;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 20px rgba(201,168,76,0.4);
    transition: all 0.2s ease;
    margin-left: auto;
}
#emu-a11y-toggle:hover,
#emu-a11y-toggle:focus-visible {
    background: #E8C96A;
    transform: scale(1.08);
    outline: 3px solid #0D1B2A;
    outline-offset: 3px;
}

#emu-a11y-panel {
    position: absolute;
    bottom: 64px;
    right: 0;
    background: #0D1B2A;
    border: 1px solid rgba(201,168,76,0.3);
    border-radius: 12px;
    padding: 20px;
    width: 220px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
#emu-a11y-panel[hidden] {
    display: none;
}

.emu-a11y-panel-title {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #C9A84C;
    margin-bottom: 14px;
}

#emu-a11y-panel button {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 8px;
    color: #CDD8E3;
    font-family: 'Outfit', sans-serif;
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s ease;
}
#emu-a11y-panel button:hover,
#emu-a11y-panel button:focus-visible {
    background: rgba(201,168,76,0.15);
    border-color: rgba(201,168,76,0.4);
    color: #fff;
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}
#emu-a11y-panel button[aria-pressed="true"] {
    background: rgba(201,168,76,0.2);
    border-color: #C9A84C;
    color: #C9A84C;
}
#emu-a11y-reset {
    background: transparent !important;
    border-color: rgba(255,255,255,0.06) !important;
    font-size: 12px !important;
    color: #7A8FA0 !important;
}
.emu-a11y-statement-link {
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.08);
    margin-top: 4px;
}
.emu-a11y-statement-link a {
    font-size: 12px;
    color: #C9A84C;
    text-decoration: underline;
}
.emu-a11y-statement-link a:focus-visible {
    outline: 2px solid #C9A84C;
    outline-offset: 2px;
}

/* ── 6. HIGH CONTRAST MODE ──────────────────────────────────────
   Aktywowany przez toolbar. Klasa na <html>.
   ────────────────────────────────────────────────────────────── */
html.emu-high-contrast {
    filter: none; /* nie używaj CSS filter — psuje layouty */
}
html.emu-high-contrast body {
    background: #000000 !important;
    color: #FFFFFF !important;
}
html.emu-high-contrast a,
html.emu-high-contrast button,
html.emu-high-contrast .elementor-button {
    background: #FFFF00 !important;
    color: #000000 !important;
    border-color: #FFFFFF !important;
}
html.emu-high-contrast h1,
html.emu-high-contrast h2,
html.emu-high-contrast h3,
html.emu-high-contrast h4 {
    color: #FFFF00 !important;
}
html.emu-high-contrast .elementor-section,
html.emu-high-contrast .e-con {
    background: #000000 !important;
    border-color: #FFFFFF !important;
}
html.emu-high-contrast img {
    filter: contrast(1.2) brightness(0.9);
}
html.emu-high-contrast *:focus-visible {
    outline: 4px solid #FFFF00 !important;
}

/* ── 7. FONT SIZE SCALING (WCAG 1.4.4) ─────────────────────────
   Tekst musi być możliwy do powiększenia do 200% bez utraty treści.
   Klasy dodawane przez toolbar.
   ────────────────────────────────────────────────────────────── */
html.emu-font-lg body,
html.emu-font-lg p,
html.emu-font-lg li,
html.emu-font-lg td,
html.emu-font-lg .elementor-widget-text-editor {
    font-size: 1.2em !important;
    line-height: 1.7 !important;
}
html.emu-font-xl body,
html.emu-font-xl p,
html.emu-font-xl li,
html.emu-font-xl td,
html.emu-font-xl .elementor-widget-text-editor {
    font-size: 1.4em !important;
    line-height: 1.8 !important;
}

/* ── 8. NAWIGACJA KLAWIATURĄ — Elementor Nav Menu ───────────── */
.elementor-nav-menu .sub-menu {
    /* Podmenu musi być widoczne przy focus, nie tylko hover */
}
.elementor-nav-menu li:focus-within > .sub-menu,
.elementor-nav-menu li:focus-within > a + .sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* ── 9. FORMULARZE (WCAG 1.3.1, 3.3.2) ─────────────────────── */
.elementor-form .elementor-field-label {
    /* Etykiety muszą być widoczne — nie ukrywaj przez display:none */
    display: block !important;
    margin-bottom: 6px;
    font-weight: 500;
}
.elementor-form input:invalid,
.elementor-form select:invalid,
.elementor-form textarea:invalid {
    border-color: #E05252; /* Błąd — czerwona obwódka */
    /* + tekst błędu musi być dodany przez Elementor Form settings */
}
.elementor-form .elementor-field-required::after {
    content: ' *';
    color: #E05252;
    aria-hidden: true; /* dekoracyjny — czytnik ignoruje */
}

/* ── 10. ANIMACJE — WCAG 2.3.3 (Reduced Motion) ────────────── */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    /* Elementor animations */
    .elementor-invisible,
    .animated,
    [data-settings*="animation"] {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ── 11. OBRAZY — alt text placeholder (awaryjnie) ─────────── */
img:not([alt]) {
    /* Wizualna wskazówka dla dewelopera że brakuje alt */
    outline: 3px dashed #E05252;
}

/* ── 12. RESPONSIVE TEXT (WCAG 1.4.4) ──────────────────────── */
/* Upewnij się że tekst nie jest ucinany przy zoom 200% */
.elementor-widget-container {
    overflow-wrap: break-word;
    word-break: break-word;
}

/* ── 13. KONTRAST LINKÓW (WCAG 1.4.1) ──────────────────────── */
/* Linki muszą być odróżnialne nie tylko kolorem */
.elementor-widget-text-editor a,
.entry-content a,
.wp-block-paragraph a {
    text-decoration: underline;
    text-underline-offset: 3px;
}