/**
 * 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: #1a56a0;
    --kide-primary-dark: #0e3d7a;
    --kide-dark: #1f2937;
    --kide-gray: #6b7280;
    --kide-light: #f9fafb;
    --kide-white: #ffffff;
    --kide-spacing: 1rem;
    --kide-back: #444;
    --kide-background-blue: #1a56a0;
}

/* ============================================
   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;
}

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: #1f2937;
    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: none; color: inherit; }

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); }