/**
 * typography.css — Motyw T (trenerzy.org.pl)
 * Podstawy: reset, zmienne, fonty, elementy HTML, utilities
 * Ładowany zarówno na froncie JAK I w edytorze Gutenberga.
 */

@import url('https://fonts.googleapis.com/css2?family=Fira+Sans:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

/* ============================================
   ZMIENNE CSS
   ============================================ */
:root {
    --kide-primary: #EE1C25;
    --kide-primary-dark: #c01018;
    --kide-dark: #3a3a3c;
    --kide-gray: #6E6E70;
    --kide-light: #F2F2F2;
    --kide-white: #ffffff;
    --kide-spacing: 1rem;
    --kide-back: #3a3a3c;
    --kide-background-blue: #EE1C25; /* alias — zachowany dla kompatybilności */
}

/* ============================================
   RESET & BASE
   ============================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    font-size: 16px;
    /* scroll-behavior: smooth — wyłączone: Chrome animuje scroll do kotwicy
       przez całą stronę zamiast skakać bezpośrednio do elementu */
}

body {
    font-family: "Fira Sans", ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
    font-size: 5dvw;
    line-height: 1.6;
    color: #6E6E70;
    background-color: #ffffff;
}

img { max-width: 100%; height: auto; display: block; border-radius: .25rem; }

h1, h2, h3 { font-size: 4rem; text-align: center; margin: 3rem .25rem; color: var(--kide-back); }
h2 { font-size: 3rem; }
h3 { font-size: 2rem; }

a { text-decoration: underline #9ca3af 1px ; color: inherit;  }
a:hover{text-decoration: underline var(--kide-primary) 1px; color: red}
p, li { font-size: 1.30rem; margin-bottom: 1rem; color: var(--kide-back); }
ul  { margin-left: 1.5rem; }
ol  { margin-left: 1.5rem; list-style-type: decimal; }

input, textarea, select, label {
    padding: 1rem;
    outline: none;
    background-color: var(--kide-light);
}

hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right,
        rgba(224, 224, 224, 0) 0%,
        rgba(224, 224, 224, 1) 50%,
        rgba(224, 224, 224, 0) 100%
    );
    margin: 30px 0;
}

table :where(td, th) { padding: 1rem; border: solid 1px #ccc; }
table label { display: none; }
table th { background-color: green; color: #fff; }

/* ============================================
   CONTAINER
   ============================================ */
.kide_container {
    width: 100%;
    max-width: 1360px;
    margin: 0 auto;
    padding: 0 1.5rem;
    font-size: 1.4rem;
}

/* ============================================
   KLASY POMOCNICZE
   ============================================ */
.separator   { display: block; width: 100%; height: 3rem; }
.txt_center  { text-align: center !important; }
.txt_left    { text-align: left !important; }
.flex_center { justify-content: center; align-content: center; justify-items: center; align-items: center; }
.column      { flex-direction: column; }

.round {
    display: flex; flex-direction: column;
    align-content: center; justify-content: center;
    background-color: #666;
    font-weight: bold; font-size: 2rem;
    width: 6rem; height: 6rem;
    border: solid 1px #666;
    border-radius: calc(infinity * 1px);
    box-shadow: rgba(0,0,0,0) 0 0 0 0, rgba(0,0,0,0) 0 0 0 0,
                rgba(0,0,0,.1) 0 20px 25px -5px, rgba(0,0,0,.1) 0 8px 10px -6px;
    margin: auto; color: #fff;
}

.paginator {
    display: flex; align-content: center; justify-content: center;
    padding: 3rem 1rem; gap: 2rem;
}
.paginator :where(a, span, div) { font-size: 1.25rem; }
.paginator span { color: #fff; background-color: var(--kide-primary); padding: .1rem .75rem; border-radius: 50%; }
.paginator a:not(.prev):not(.next) { color: #fff; background-color: #ccc; padding: .1rem .75rem; border-radius: 50%; }
.paginator :where(.prev, .next) { color: var(--kide-primary); }




.post-template-single-tytul-orazek-wyrozniajacyphp img{width: 100%; margin: o auto;}





/* ============================================================
   ACCESSIBILITY PLUGIN OVERRIDES
   Wtyczka: WP Accessibility Helper (WPAH) + One Click Accessibility (OCA)
   Paleta: motyw t / PTTB (#EE1C25)
   Autor: ZOLTAN Multimedia
   Data: 2026-04
   UWAGA: Cały blok można usunąć jednocześnie po wyborze wtyczki.
   ============================================================ */

/* ----------------------------------------------------------
   WYSOKI KONTRAST
   WPAH: body.wah-contrast
   OCA:  body.oca-high-contrast
   ---------------------------------------------------------- */
body.wah-contrast,
body.oca-high-contrast {
    background-color: #000 !important;
    color: #fff !important;
}

body.wah-contrast a,
body.oca-high-contrast a {
    color: #ff0 !important; /* żółty — standardowy kolor linków w trybie HC */
}

body.wah-contrast a:hover,
body.oca-high-contrast a:hover {
    color: #fff !important;
    text-decoration: underline !important;
}

/* Czerwień PTTB w HC: zamieniamy na żółty, żeby spełnić kontrast WCAG AA */
body.wah-contrast .t-btn--primary,
body.wah-contrast .t-cta,
body.oca-high-contrast .t-btn--primary,
body.oca-high-contrast .t-cta {
    background-color: #ff0 !important;
    color: #000 !important;
    border-color: #fff !important;
}

body.wah-contrast header,
body.wah-contrast footer,
body.oca-high-contrast header,
body.oca-high-contrast footer {
    background-color: #111 !important;
    border-bottom: 2px solid #fff !important;
}

/* ----------------------------------------------------------
   NEGATYW (odwrócone kolory)
   WPAH: body.wah-negative-contrast
   OCA:  body.oca-negative-contrast
   ---------------------------------------------------------- */
body.wah-negative-contrast,
body.oca-negative-contrast {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* Obrazki i wideo — cofamy invert, żeby wyglądały normalnie */
body.wah-negative-contrast img,
body.wah-negative-contrast video,
body.wah-negative-contrast iframe,
body.oca-negative-contrast img,
body.oca-negative-contrast video,
body.oca-negative-contrast iframe {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* ----------------------------------------------------------
   JASNE TŁO (tryb dla wrażliwych na ciemne motywy)
   OCA:  body.oca-light-background
   ---------------------------------------------------------- */
body.oca-light-background {
    background-color: #fff !important;
    color: #111 !important;
}

/* ----------------------------------------------------------
   PODKREŚLANIE LINKÓW
   WPAH: body.wah-links-underline
   OCA:  body.oca-links-underline
   ---------------------------------------------------------- */
body.wah-links-underline a,
body.oca-links-underline a {
    text-decoration: underline !important;
}

/* ----------------------------------------------------------
   CZYTELNA CZCIONKA (OpenDyslexic lub serif systemowy)
   WPAH: body.wah-readable-font
   OCA:  body.oca-readable-font
   ---------------------------------------------------------- */
body.wah-readable-font,
body.wah-readable-font *,
body.oca-readable-font,
body.oca-readable-font * {
    font-family: "OpenDyslexic", Georgia, serif !important;
    letter-spacing: 0.05em !important;
    line-height: 1.8 !important;
}

/* ----------------------------------------------------------
   ROZMIAR FONTU
   WPAH: body.wah-font-size-lg / body.wah-font-size-xl
   OCA:  manipuluje bezpośrednio font-size na html — brak klas,
         więc dla OCA można dodać regułę poniżej jeśli potrzeba
   ---------------------------------------------------------- */
body.wah-font-size-lg {
    font-size: 120% !important;
}

body.wah-font-size-xl {
    font-size: 140% !important;
}

/* ----------------------------------------------------------
   WIDGET / PRZYCISK WTYCZKI — dopasowanie do palety PTTB
   WPAH używa #wah-switch-wrap, OCA używa #pojo-a11y-toolbar
   ---------------------------------------------------------- */
#wah-switch-wrap,
#pojo-a11y-toolbar {
    --a11y-accent: #EE1C25; /* czerwień PTTB */
}

#wah-switch-wrap .wah-switch-btn,
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle {
    background-color: #EE1C25 !important;
    color: #fff !important;
    border-radius: 4px !important;
}

#wah-switch-wrap .wah-switch-btn:focus,
#pojo-a11y-toolbar .pojo-a11y-toolbar-toggle:focus {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
}
.a_module_title{font-size: 1rem !important}

/* ============================================================
   KONIEC ACCESSIBILITY PLUGIN OVERRIDES
   ============================================================ */