/* ===
   font Google and all fonts
   ===*/
/* Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins: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');

/* Roboto */
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
/* ===
   ZMIENNE CSS DLA SZABLONU
   NORMALNA I KONTRASTOWA
   ZGODNE Z WCAG 2.0
   === */



body {
    /* --- Tło --- */
    --background-color: #ffffff;   /* białe tło */
    --background-color2: #dfe4ea;  /* np. sekcje / karty */
    --background-color3: #ff4757;
      --background-color4: #000000;
      --background-color5: #fff;
    --background-color7: #FF6348; 

    --background-color8: #b6babf;
  

   --gradient-color: radial-gradient(circle,rgba(255, 165, 2, 0.77) 0%, rgba(255, 71, 87, 0.52) 100%);

    /* --- Kolory tekstu --- */
    --color-primary: #000000;      /* główny tekst, nagłówki, linki */
    --color-link: #ffffff;         /* tekst linków + inne teksty */
    --color-secondary: #0d0d0f;   /* standardowy tekst */
    --color-inne: #ffffff;        /* inne teksty */
     --color-inne2: #ffffff;        /* inne teksty */
     

    /* --- Czcionki --- */
    --font-family-text: "Roboto", sans-serif;;
    --font-family-heading: "Poppins", sans-serif;

    /* --- Rozmiary tekstu i line-height --- */
   --font-size-small: 0.7rem;     /* drobny tekst, np. przypisy */
   --line-height-small: 1rem;

    --font-size-smallx: 1rem;     /* drobny tekst, np. przypisy */
   --line-height-smallx: 1.2rem;

   --font-size-base: 1.2rem;      /* tekst standardowy */
   --line-height-base: 1.4rem;

   --font-size-medium: 1.4rem;    /* podtytuły, większe elementy tekstu */
   --line-height-medium: 1.6rem;

   --font-size-large: 1.6rem;     /* nagłówki H3/H4 */
   --line-height-large: 1.9rem;

   --font-size-xlarge: 2rem;    /* nagłówki H2 */
   --line-height-xlarge: 2.3rem;

   --font-size-xxlarge: 2.5rem;   /* nagłówki H1 */
   --line-height-xxlarge: 2.9rem;

    /* --- Waga czcionki --- */
    --font-weight-light: 300;
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-bold: 700;

}

.padding-right-55 {
   padding-right: 55px;
}



/* Dodaj do all-style.css */
.visually-hidden.focusable:active,
.visually-hidden.focusable:focus {
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  background: #4cd137;
  color: #fff;
  outline: 2px solid #222;
  padding: 0.5em 1em;
  z-index: 10000;
}

/* ===
   FOCUS 
   === */


a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
   outline: 8px solid #4cd137 !important;   /* zielony fokus */
   background-color: #4cd137 !important;    /* delikatne tło, kontrast z tekstem */
   border-radius: 0.5rem !important;
   color: #fff !important;
   border-color: #4cd137 !important;
   animation: pulse-focus 1s infinite;
}

/* ===
   Ukrywanie treści tylko wizualnie (dla czytników ekranu)
   === */
.visually-hidden {
   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;
}

/* Wymuszenie hover na całej stronie */

@keyframes pulse-focus {
   0% {
      box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.9), 0 0 0 12px rgba(46,213,115,0.5);
      border-color: #4cd137;
   }
   50% {
      box-shadow: 0 0 0 12px rgba(46, 213, 115, 0.7), 0 0 0 24px rgba(46,213,115,0.25);
      border-color: #4cd137;
   }
   100% {
      box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.9), 0 0 0 12px rgba(46,213,115,0.5);
      border-color: #4cd137;
   }
}





/* ===
   WERSJA KONTRASTOWA
   === */
body.accessibility-contrast {
   --background-color: #0d0d0f;   /* czarne tło */
   --background-color2: #151517;  /* sekcje / karty */
   --background-color3: #ffa502;
   --background-color5: #ffa502;
   --background-color7: #5352ed; 
   --background-color8: #252627;
   --gradient-color: radial-gradient(circle,rgba(255, 165, 2, 1) 0%, rgba(255, 71, 87, 1) 100%);

   --color-primary: #ffa502;      /* nagłówki */
   --color-link: #0d0d0d;         /* linki */
   --color-secondary: #ffa502;   /* standardowy tekst */
   --color-inne: #FF6348;        /* inne teksty */
   --color-inne2: #ffa502;        /* inne teksty */

   
}

/* ===
   POWIĘKSZENIE CZCIONKI
   === */
body.accessibility-font {
      /* --- Rozmiary tekstu i line-height --- */
   --font-size-small: 1.2rem;     /* drobny tekst, np. przypisy */
   --line-height-small: 1.4rem;

    --font-size-smallx: 1.6rem;     /* drobny tekst, np. przypisy */
   --line-height-smallx: 1.8rem;

   --font-size-base: 1.5rem;      /* tekst standardowy */
   --line-height-base: 1.7rem;

   --font-size-medium: 2.1rem;    /* podtytuły, większe elementy tekstu */
   --line-height-medium: 2.3rem;

   --font-size-large: 2.5rem;     /* nagłówki H3/H4 */
   --line-height-large: 3rem;

   --font-size-xlarge: 3.5rem;    /* nagłówki H2 */
   --line-height-xlarge: 3.8rem;

   --font-size-xxlarge: 4rem;   /* nagłówki H1 */
   --line-height-xxlarge: 4.4rem;

}

/* ===
   FOCUS 
   === */







/* ===
   ZMIENNE CSS DLA SZABLONU
   NORMALNA I KONTRASTOWA
   ZGODNE Z WCAG 2.0
   === */





body{
   margin: 0;
   padding: 0;
   font-family: var(--font-family-text);
   font-size: var(--font-size-base);
   color: var(--color-secondary);
   background-color: var(--background-color);
}



/* ===
   Animacja //Efekt snap scroll, znany też jako scroll hijacking lub scroll snapping, polega na tym, że podczas przewijania strona zatrzymuje się "na sztywno" na kolejnych sekcjach — często pełnoekranowych.
   === */


/* ===
   Animacja //Efekt snap scroll, znany też jako scroll hijacking lub scroll snapping, polega na tym, że podczas przewijania strona zatrzymuje się "na sztywno" na kolejnych sekcjach — często pełnoekranowych.
   === */


/* ===
   SMALL MOBILE (max-width: 1199px)
   === */
@media (max-width: 1199px) {
/* CSS Custom Properties */

/* CSS Custom Properties */




}



/* ===
   SMALL MOBILE (max-width: 767px)
   === */
@media (max-width: 767px) {
/* CSS Custom Properties */
body {
   font-size: var(--font-size-base);
   line-height: var(--line-height-base);
   /* Pozostałe zmienne dostępne przez var() */
}
/* CSS Custom Properties */




}



/* ===
   SMALL MOBILE (max-width: 480px)
   === */
@media (max-width: 480px) {
/* CSS Custom Properties */
   body {
      font-size: var(--font-size-base);
      line-height: var(--line-height-base);
   }
}


/* CSS Custom Properties */