@charset "utf-8";
/* Resetowanie domyślnych stylów */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
/* ================= Sticky Header (Top + Nav) ================= */
body {
    font-family: Arial, sans-serif;
 
    margin: 0;
    padding: 0;
}

	body {
    font-size: 18px;  /* Ustawienie domyślnego rozmiaru czcionki */
}

h1, h2, h3, h4, h5, h6 {
    font-size: inherit;  /* Nagłówki dziedziczą rozmiar czcionki z body */
}
/* ================= Sticky Wrapper ================= */
.sticky-wrapper {
    position: sticky;
    top: 0;
    z-index: 1100;
 
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* ================= Top Header ================= */
.top-header {
    /* ⛔️ Usunięte: position: sticky; top: 0; */
 
    padding: 3px 3px;
    border-bottom: 1px solid #ccc;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    box-sizing: border-box;
}

.top-header-container {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    box-sizing: border-box;
}

.top-banner,
.top-banner-heading,
.accessibility-tools {
    min-width: 0;
    box-sizing: border-box;
    flex-shrink: 1;
}

.top-banner {
    width: 40%;
}

.top-banner-heading {
    width: 40%;
    text-align: center;
}

.top-banner-heading h4 {
    font-size: 15px;
    font-weight: bold;
    margin: 0;
    color: #333;
}

.accessibility-tools {
    width: 20%;
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 6px;
}

.accessibility-tools button {
    padding: 5px 10px;
    font-size: 14px;
    border: none;
    border-radius: 4px;
    background-color: #333;
    color: #fff;
    cursor: pointer;
}

.accessibility-tools button:hover {
    background-color: #000;
}

/* ================= Sticky Header (nawigacja) ================= */
header.sticky-header {
    /* ⛔️ Usunięte: position: sticky; top: 0; */
    background-color: #1d3557;
    padding: 15px 0;
    color: white;
}

.top-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 10px;
    width: 100%;
}

.top-nav .logo img {
    max-width: 120px;
    height: auto;
}

nav ul {
    list-style: none;
    display: flex;
    gap: 8px;
    padding: 0;
    margin: 0;
    align-items: center;
}

nav ul li {
    margin: 0;
    position: relative;
}

nav ul li a {
    text-decoration: none;
    color: black;
    font-size: 18px;
    padding: 10px 16px;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    background-color: #f72750;
    border-radius: 5px;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

nav ul li a:hover {
    background-color: #0056b3;
    transform: translateY(-3px);
}

nav ul li.dropdown:hover .dropdown-content {
    display: block;
}

nav ul li.dropdown:hover > a {
    background-color: #0056b3;
    transform: translateY(-3px);
}

.dropdown-content {
    display: none;
    position: absolute;
 
    min-width: 160px;
    z-index: 1;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.dropdown-content a {
    color: black;
    padding: 6px 10px;
    text-decoration: none;
    display: block;
  
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.dropdown-content a:hover {
    background-color: #ddd;
}
body footer p {
    color: #FFFFFF;
}
.module-content .module-description p {
    font-size: 16px;
}




/* ================= Custom Buttons ================= */
.control-btn,
.control-btn1,
.control-btn2,
.control-btn3 {
    color: white;
    border: none;
    padding: 10px 20px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    font-size: 18px;
    transition: background-color 0.3s;
}

.control-btn { background-color: #4CAF50; }
.control-btn1 { background-color: #F80000; }
.control-btn2 { background-color: #191919; }
.control-btn3 { background-color: #FFAE00; }

.control-btn:hover,
.control-btn1:hover,
.control-btn2:hover,
.control-btn3:hover {
    background-color: #45a049;
}


.slider {
    position: relative;
    width: 100%;
    height: 400px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    overflow: hidden;
    transition: background-image 1s ease-in-out;
}

/* Overlay */
.slider::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

/* Treść slidera */
.slider-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    color: white;
    background: rgba(0, 0, 0, 0.5);
    padding: 20px;
    border-radius: 8px;
    z-index: 2;
    animation: fadeInUp 1.5s ease-out;
}

.slider-content h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    animation: fadeInText 1.5s ease-in-out forwards;
	  color: white;
}

.slider-content p {
    font-size: 1.3em;
    animation: fadeInText 2s ease-in-out forwards;
	  color: white;
}

/* Animacje */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(60%); }
    to { opacity: 1; transform: translateY(-50%); }
}

@keyframes fadeInText {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

/* Responsywność */
@media (max-width: 768px) {
    .slider { height: 300px; background-attachment: scroll; }
    .slider-content h1 { font-size: 2em; }
    .slider-content p { font-size: 1em; }
}


/* Main Content */
main {
    max-width: 1400px;  /* Maksymalna szerokość kontenera */
    width: 100%;        /* Pełna szerokość w przypadku mniejszych ekranów */
    margin: 0 auto;     /* Wyśrodkowanie na stronie */
    padding: 0 15px;
    box-sizing: border-box;
}

/* Nagłówki */
main h2 {
    color: #000000;        /* Ciemny kolor tekstu dla lepszego kontrastu */
    font-size: 2em;     /* Większy rozmiar czcionki dla nagłówka */
    margin-bottom: 15px;
}

/* Paragrafy */
main p {
    font-size: 18px;   /* Zwiększenie rozmiaru czcionki dla lepszej czytelności */
    line-height: 1.8;   /* Większa przestrzeń między wierszami */
    margin-bottom: 20px;
    color: #000000;        /* Drobna zmiana koloru tekstu */
}

/* Responsywność */
@media (max-width: 768px) {
    main {
        padding: 0 10px;  /* Mniejsze paddingi na mniejszych ekranach */
    }

    main h2 {
        font-size: 1.8em; /* Mniejszy rozmiar czcionki nagłówka na mniejszych ekranach */
    }

    main p {
        font-size: 1.1em; /* Mniejszy rozmiar czcionki paragrafów na mniejszych ekranach */
    }
}


/* Footer */
footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 20px 0;
}

/* Stylowanie przycisków logowania i wylogowania */
.btn-red,
.logout-btn,
.start-btn{
    color: white;
    background-color: red;
    padding: 10px 20px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: bold;
    transition: background-color 0.3s ease;
    display: inline-block;
    margin-top: 10px;
}

.btn-red:hover,
.logout-btn:hover {
    background-color: #FF8F02;
    text-decoration: none;
}

/* Informacje o użytkowniku */
.user-info {
 
    padding: 20px;
    border-left: 4px solid #f72750;
    border-radius: 6px;
    margin-bottom: 20px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    text-align: center;
}

.user-header {
    display: flex;
    gap: 30px;
    flex-wrap: wrap;
    justify-content: center;
    font-weight: bold;
    color: #000000; /* bardzo ciemny szary - lepszy kontrast niż czarny */
}

.user-footer {
    text-align: center;
   
}

.about-course {
    color: #000000; /* Przyjaźniejszy dla oczu, kontrast 15.3:1 na białym */
    padding: 60px 20px;
    display: flex; /* Flexbox, aby kolumny były obok siebie */
    justify-content: center;
  
    gap: 30px; /* Odstęp między kolumnami */
}

.about-wrapper {
    display: flex; /* Kolumny obok siebie */
    gap: 30px; /* Odstęp między obrazem a tekstem */
    align-items: center; /* Wyrównanie do środka w pionie */
    width: 100%;
}

.about-image {
    flex: 1; /* Kolumna 1 zajmuje równe miejsce */
}

.about-image img {
    width: 100%; /* Obrazek zajmuje całą szerokość kontenera */
    height: auto; /* Zachowanie proporcji */
    border-radius: 10px; /* Zaokrąglenie krawędzi obrazka */
}

.about-text {
    flex: 1; /* Kolumna 2 zajmuje równe miejsce */
    color: #333;
}

.about-text h2 {
    font-size: 2em;
    margin-bottom: 20px;
    color: #000000; /* Nagłówki ciemniejsze dla mocniejszego kontrastu */
}

.about-text p {
    font-size: 14px;
    line-height: 1.6;
    color: #000000; /* Ciemniejszy odcień szarości dla lepszej czytelności */
    text-align: left; /* Wyrównanie tekstu */
}

.start-training {
    margin-top: 20px;
}

.start-btn {
    display: inline-block;
    padding: 14px 28px;
    background-color: #f72750; /* Róż: kontrast 6.7:1 na białym tekście */
    color: #ffffff;
    text-decoration: none;
    font-weight: 600;
    border-radius: 10px;
    transition: background-color 0.3s ease;
    margin-top: 20px;
}

.start-btn:hover {
    background-color: #FF8F02; /* Niebieski - kontrast 12.6:1 z białym tekstem */
}


/* Animacje */
@keyframes slideInLeft {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideInRight {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Responsywność */
@media (max-width: 768px) {
    .about-wrapper {
        flex-direction: column;
        text-align: center;
    }

    .about-image,
    .about-text {
        animation: none;
        opacity: 1;
        transform: none;
    }

  

    .slider h1 {
        font-size: 2em;
    }

    .slider p {
        font-size: 18px;
		color: white;
    }

    .user-header {
        flex-direction: column;
        gap: 10px;
    }

    .module-container {
        grid-template-columns: repeat(2, 1fr); /* 2 kolumny na ekranach o szerokości max 768px */
    }
}

/* Responsywność: zmiana układu przy mniejszych szerokościach */
@media (max-width: 480px) {
    .module-container {
        grid-template-columns: 1fr; /* 1 kolumna na ekranach o szerokości max 480px */
    }
}

.module-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 kolumny */
    grid-gap: 20px;
    margin-top: 30px;
}

/* Stylowanie sekcji z tekstem */
.other-info {

    color: #000000; /* Ciemny tekst, kontrastujący z jasnym tłem */
    padding: 40px 20px; /* Dodatkowa przestrzeń wewnątrz sekcji */
}

h2 {
    font-size: 1.75em; /* Czcionka większa niż 16px, zgodna z WCAG */
    font-weight: bold;
    color: #111; /* Jeszcze ciemniejszy nagłówek */
    margin-bottom: 20px; /* Przerwa poniżej nagłówka */
}

p {
    font-size: 16px; /* Czcionka większa niż 16px, dla lepszej czytelności */
    line-height: 1.6; /* Zwiększenie interlinii dla lepszej czytelności */
    color: #444; /* Ciemniejszy tekst dla lepszego kontrastu */
    margin-bottom: 15px; /* Przerwa poniżej każdego paragrafu */
}

@media (max-width: 768px) {
    .other-info {
        padding: 30px 15px; /* Zmniejszenie paddingu na mniejszych ekranach */
    }

    h2 {
        font-size: 1.5em; /* Zmniejszenie nagłówka na małych ekranach */
    }

    p {
        font-size: 1.05em; /* Dostosowanie rozmiaru czcionki na małych ekranach */
    }
}

/* Styl modułu */
.module {
  
    padding: 20px;
    border-radius: 8px;
    text-align: center;
}

/* Nagłówki w module */
.module h3 {
    font-size: 1.125em; /* Większa czcionka dla lepszej czytelności */
    margin-bottom: 10px;
    color: #ffffff; /* Ciemny kolor nagłówków */
}

/* Styl obrazu w module */
.module-image {
    width: 100%;
    height: auto;
    margin-bottom: 15px;
    border-radius: 5px;
}

/* Styl przycisku "start" */
.start-module {
    display: inline-block;
    padding: 10px 20px;
    background-color: #555; /* Ciemniejszy przycisk dla lepszego kontrastu */
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    font-size: 17px; /* Odpowiedni rozmiar czcionki */
    transition: background-color 0.3s ease, transform 0.3s ease;
}

.start-module:hover {
    background-color: #333; /* Lepszy kontrast na hover */
    transform: scale(1.05); /* Łagodny efekt powiększenia */
}

/* Styl sekcji kursu */
.course-module-1 {

    padding-top: 5px;
    padding-right: 5px;
    padding-left: 5px;
    padding-bottom: 5px;
}

/* Kontener dla zawartości kursu */
.course-wrapper {
    display: flex;
    max-width: 1400px;
    margin: 0 auto;
    gap: 40px;
}

/* Styl dla obrazu kursu */
.course-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    max-width: 500px;
}

/* Styl tekstu kursu */
.course-description {
    flex: 1;
}

/* Nagłówek główny sekcji */
.course-description h2 {
    font-size: 18px; /* Większy nagłówek */
    font-weight: bold;
    color: #f72750;
    margin-bottom: 30px;
    text-align: center;
    font-family: 'Roboto', sans-serif;
}

/* Styl dla tytułów lekcji */
.lesson-1 h4, .lesson-2 h4, .lesson-3 h4 {
    font-size: 18px; /* Większe czcionki dla nagłówków lekcji */
    color: #f72750;
    font-weight: 600;
    margin-bottom: 15px;
}

/* Styl dla tekstu lekcji */
.lesson-1 p, .lesson-2 p, .lesson-3 p {
    font-size: 16px; /* Minimalny rozmiar czcionki 16px */
    line-height: 1.6; /* Zwiększona interlinia dla lepszej czytelności */
    color: #333;
    margin-bottom: 15px;
	text-align: left;
}

/* Lista punktów w lekcji */
.lesson-1 ul, .lesson-2 ul, .lesson-3 ul {
    lisst-style-type: disc;
    padding-left: 20px;
    margin-bottom: 20px;
}

.lesson-1 ul li, .lesson-2 ul li, .lesson-3 ul li {
    font-size: 16px; /* Odpowiedni rozmiar czcionki */
    color: #000000; /* Delikatnie ciemniejszy tekst dla większej czytelności */
    margin-bottom: 8px;
}

/* Styl dla przycisku "Zobacz Szczegóły Naszego Kursu" */
.course-btn-wrapper {
    margin-top: 30px;
}

.course-btn {
    background-color: #f72750;
    color: black;
	font-weight: bold;
    padding: 15px 30px;
    border-radius: 30px;
    font-size: 14px; /* Większa czcionka */
    text-decoration: none;
    text-align: center;
    display: inline-block;
    transition: background-color 0.3s, transform 0.3s;
    margin-top: 30px;
}

.course-btn:hover {
    background-color: #FF8F02;
	 color: black;
	font-weight: bold;
    transform: translateY(-3px);
}

.course-btn:active {
    transform: translateY(1px);
}
.read-aloud-btn {
     align-self: flex-start;
    width: 100%;
    margin-top: 10px;
    padding: 12px 20px;
    background-color: #FF8F02;
    color: #000;
    font-weight: bold;
    border-radius: 6px;
    text-decoration: none;
    text-align: center;
    transition: background-color 0.3s ease;
    font-size: 14px; /* Zwiększony rozmiar czcionki */
}

.read-aloud-btn:hover {
    background-color: #f72750;
}
/* Styl dla urządzeń mobilnych */
@media screen and (max-width: 768px) {
  .lesson-1, .lesson-2 {
    flex-direction: column; /* Kolumny jedna pod drugą */
  }

  .text-column,
  .video-column {
    flex: none;
    width: 100%; /* Kolumny na pełną szerokość */
  }

  .video-container {
    margin-bottom: 20px; /* Dodatkowa przestrzeń między video a innymi elementami */
  }
}
header.sticky-header {
    background-color: #1d3557 !important;
}
.dropdown-content {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #1d3557;
  z-index: 1000;
  min-width: 200px;
}

.dropdown:hover .dropdown-content {
  display: block;
}

.submenu {
  position: relative;
}

.submenu a {
  white-space: nowrap;
}

.submenu-content {
  display: none;
  position: absolute;
  top: 0;
  left: 100%;
  background-color: #1d3557;
  z-index: 1001;
  min-width: 180px;
}

.submenu:hover .submenu-content {
  display: block;
}
@media (max-width: 768px) {
  .sticky-wrapper {
    display: none !important;
  }
}	


/* WYJŚCIOWO: Desktop pokazany, mobile ukryty */
.desktop-header {
  display: block;
}
.mobile-header {
  display: none;
}