/* ===== Pasek dostepnosci WCAG ===== */
.flexilab-a11y-bar {
    position: fixed;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    z-index: 2000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    padding: 12px 10px;
    background: #1A1A1A;
    color: #fff;
    font-family: 'Lato', system-ui, sans-serif;
    font-size: 14px;
    border-radius: 10px 0 0 10px;
    box-shadow: -2px 2px 10px rgba(0,0,0,0.3);
}
.flexilab-a11y-bar .flexilab-a11y-label {
    font-weight: 600;
    text-align: center;
    margin-bottom: 2px;
    font-size: 12px;
    letter-spacing: 0.03em;
}
.flexilab-a11y-bar .flexilab-a11y-btn {
    width: 100%;
    text-align: center;
}
.flexilab-a11y-btn {
    border: 2px solid #fff;
    background: #1A1A1A;
    color: #fff;
    padding: 4px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    line-height: 1.2;
}
.flexilab-a11y-btn:hover {
    background: #fff;
    color: #1A1A1A;
}
.flexilab-a11y-btn:focus-visible {
    outline: 3px solid #FFD500;
    outline-offset: 2px;
}
.flexilab-a11y-btn[aria-pressed="true"] {
    background: #FFD500;
    color: #1A1A1A;
    border-color: #FFD500;
}

/* ===== Powiekszenie czcionki (skala globalna) ===== */
html.fs-lg { font-size: 112.5%; }
html.fs-xl { font-size: 125%; }

/* ===== Tryb wysokiego kontrastu (czarne tlo / ZOLTY tekst / zolte linki) ===== */
html.hc, html.hc body {
    background: #000 !important;
    color: #FFD500 !important;
}
html.hc *:not(.flexilab-a11y-bar):not(.flexilab-a11y-btn) {
    background-color: #000 !important;
    color: #FFD500 !important;
    border-color: #FFD500 !important;
    box-shadow: none !important;
}
html.hc a,
html.hc a * {
    color: #FFD500 !important;
    text-decoration: underline !important;
}
/* Przyciski akcji: czarne tlo, zolty tekst, zolta ramka.
   Ostatni selektor (wyzsza specyficznosc) odwraca tez czerwony przycisk "assess"/PDF,
   ktorego regula w home.css (.flexilab-students-action-assess) nie jest !important. */
html.hc button,
html.hc .flexilab-auth-submit,
html.hc .flexilab-students-action,
html.hc a.flexilab-students-action.flexilab-students-action-assess {
    background: #000 !important;
    background-color: #000 !important;
    color: #FFD500 !important;
    border: 2px solid #FFD500 !important;
}
html.hc input,
html.hc select,
html.hc textarea {
    background-color: #000 !important;
    color: #FFD500 !important;
    border: 2px solid #FFD500 !important;
}
html.hc img {
    /* obrazy zostawiamy widoczne, ale dajemy ramke dla oddzielenia */
    background: transparent !important;
}
html.hc *:focus-visible {
    outline: 3px solid #FFD500 !important;
    outline-offset: 2px;
}
/* pasek a11y w trybie HC pozostaje czytelny */
html.hc .flexilab-a11y-bar {
    background: #000 !important;
    border-bottom: 2px solid #fff;
}

/* ===== Strona glowna: kafle (bitmapy) -> lista tekstowa w trybie HC =====
   Tryb normalny: .flexilab-banner-text ukryty, widoczne bitmapy banerow.
   Tryb HC: bitmapy ukryte, widoczna czytelna lista "N. Nazwa" (zolta na czarnym). */
.flexilab-banner-text { display: none; }
html.hc .flexilab-banners {
    background: #000 !important;
    gap: 0 !important;
}
html.hc .flexilab-banner {
    background: #000 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 0.5em 0.3em !important;
    margin: 0 !important;
    border: 0 !important;
    border-bottom: 1px solid #333 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    display: block !important;
}
html.hc .flexilab-banner img {
    display: none !important;
}
html.hc .flexilab-banner-text {
    display: block !important;
    color: #FFD500 !important;
    font-weight: 700 !important;
    font-size: 1.25rem !important;
    text-decoration: underline !important;
    line-height: 1.4;
}

/* ===== Opis projektu: obrazek-tekst -> tekst w trybie HC =====
   Tryb normalny: .flexilab-info-text ukryty, widoczna bitmapa home-intro-cawi.png.
   Tryb HC: bitmapa ukryta, widoczny zolty tekst opisu. */
.flexilab-info-text { display: none; }
html.hc .flexilab-info img { display: none !important; }
html.hc .flexilab-info-text {
    display: block !important;
    color: #FFD500 !important;
    font-size: 1rem !important;
    line-height: 1.6 !important;
    max-width: 900px;
    margin: 0 auto;
    padding: 0.5em 0.2em;
    text-align: left;
}

/* ===== Skip link "Przejdz do tresci" (WCAG 2.4.1) =====
   Ukryty wizualnie, widoczny dopiero przy fokusie (klawiatura).
   Cel: element #flexilab-main (tabindex=-1) w layoutach. */
.flexilab-skip-link {
    position: absolute;
    left: 8px;
    top: -48px;
    z-index: 3000;
    background: #1A1A1A;
    color: #fff;
    padding: 8px 16px;
    border-radius: 0 0 6px 6px;
    font-family: 'Lato', system-ui, sans-serif;
    font-weight: 700;
    text-decoration: none;
    transition: top .15s ease;
}
.flexilab-skip-link:focus {
    top: 0;
    outline: 3px solid #FFD500;
    outline-offset: 2px;
}
/* nie pokazujemy duzej obwodki na samym kontenerze tresci po przeskoku */
#flexilab-main:focus {
    outline: none;
}