/* ===
   font Google and all fonts
   ===*/
/* "Open Sans", sans-serif;  */
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&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: #fff;   /* białe tło */
    --background-color2: #fff;  /* np. sekcje / karty */
    --background-color3: #8495a7;
      --background-color4: #212e3e;
      --background-color5: #fff;
    --background-color7: #8495a7; 

    --background-color8: rgba(214, 216, 220, .7);
    --background-color9:  #586575;
     --background-color10:  #212e3e;
  

   --gradient-color: radial-gradient(circle,rgba(132, 149, 167, 0.77) 0%, rgba(88, 101, 117, 0.52) 100%);

    /* --- Kolory tekstu --- */
    --color-primary: #212e3e;      /* główny tekst, nagłówki, linki */
    --color-link: #fff;         /* tekst linków + inne teksty */
    --color-secondary: #212e3e;   /* standardowy tekst */
    --color-inne: #fff;        /* inne teksty */
     --color-inne2: #fff;        /* inne teksty */
     

    /* --- Czcionki --- */
    --font-family-text: "Roboto", sans-serif;;
    --font-family-heading: "Open Sans", 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: 0px;
}
.padding-all{
   margin: 2rem;
}



/* 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 #212e3e;
  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;   
   background-color: #4cd137 !important;  
   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: #212e3e;   /* czarne tło */
   --background-color2: #212e3e;  /* sekcje / karty */
   --background-color3: #ffa502;
   --background-color5: #ffa502;
   --background-color7: #5352ed; 
   --background-color8: #212e3e;
   --gradient-color: radial-gradient(circle,rgba(255, 165, 2, 1) 0%, rgba(255, 71, 87, 1) 100%);

   --color-primary: #ffa502;      /* nagłówki */
   --color-link: #212e3e;         /* 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() */
}
	
	.padding-all {
    margin: 0rem;
}
/* CSS Custom Properties */



}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    margin: 5px 5px 0 0;
    transform: translateY(5px);
    padding: 0;
    line-height: 0px;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
}