/* Definicje zmiennych kolorów, parametrów układu oraz typografii */
:root {
  /* KOLORY I UKŁAD */
  --BgColor: #404853;                
  --PrimaryFontColor: #c5c6ca;        
  --HoverFontColor: #d1d2d3;          
  --PrimaryAccentColor: #c5c6ca;      
  --LineColor: #97999e;               
  --SliderMaxWidth: 300px;     

  /* CIENIE POD TEKSTEM */
  --TextShadowNormal: 0 0 3px rgba(0, 0, 0, 0.3);
  --TextShadowHover: 0 0 3px rgba(0, 0, 0, 0.6);

  /* CIENIE POD ZDJĘCIEM (Parametry skopiowane z cienia pod tekstem) */
  --ImageShadowNormal: 0 0 3px rgba(0, 0, 0, 0.3);
  --ImageShadowHover: 0 0 3px rgba(0, 0, 0, 0.6);

  /* CZCIONKA */
  --FontFamily: 'Outfit', Arial, sans-serif;
  --FontWeightLight: 300;    

  /* WIELKOŚCI CZCIONEK DLA PROGÓW RESPONSYWNYCH */
  --FontSizeMobile: 12px;      
  --FontSizeMedium: 12px;      
  --FontSizeDesktop: 12px;      

  /* ODSTĘPY MIĘDZY LITERAMI DLA PROGÓW RESPONSYWNYCH */
  --LetterSpacingMobile: 2px;
  --LetterSpacingMedium: 2px;
  --LetterSpacingDesktop: 3px;    

  /* AKTUALNY PRÓG (Domyślnie wersja mobilna) */
  --CurrentLetterSpacing: var(--LetterSpacingMobile);    

  /* KONFIGURACJA SLAJDERA (Zarządzaj czasem w tym miejscu) */
  --SlideDuration: 4000ms;  /* Czas wyświetlania jednego zdjęcia (w milisekundach, np. 4000ms = 4s) */
  --FadeDuration: 2000ms;   /* Czas trwania efektu przenikania (np. 1000ms = 1s) */
}

/* Reset i podstawowy styl strony */
body {
  font-family: var(--FontFamily);    
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;    
  margin: 0;
  background-color: var(--BgColor);
  padding: 40px 0;    
  box-sizing: border-box;
}

/* GŁÓWNY KONTENER PIONOWY */
.header-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 600px;    
  padding: 0 20px;
  box-sizing: border-box;
}

/* ZAAWANSOWANY MODUŁ POKAZU SLAJDÓW */
.image-wrapper {
  position: relative;
  width: 100%;
  max-width: var(--SliderMaxWidth);    
  aspect-ratio: 3 / 2;    
  margin-bottom: 30px;  
}

.header-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;      
  
  /* Brak zaokrąglenia */
  border-radius: 0px;    
  
  /* Zmienna cienia dla zdjęcia */
  box-shadow: var(--ImageShadowNormal);       

  /* Zmiana kursora na rączkę po najechaniu na zdjęcie */
  cursor: pointer;

  /* PRZYWRÓCONO: Ukrycie slajdów na potrzeby skryptu */
  opacity: 0;
  visibility: hidden;
  
  /* Płynne przejście dla efektu box-shadow (.3s) */
  transition: opacity var(--FadeDuration) ease-in-out, visibility var(--FadeDuration) ease-in-out, box-shadow .3s ease-in-out;  
}

/* PRZYWRÓCONO: Klasa aktywna dla mechanizmu pokazu slajdów */
.header-image.active {
  opacity: 1;
  visibility: visible;
}

/* Efekt hover dla zdjęcia */
.header-image:hover {
  /* Zastosowanie dedykowanej zmiennej cienia hover dla zdjęcia */
  box-shadow: var(--ImageShadowHover);
}

/* RESPONSYWNE LOGO */
.logo-link {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-bottom: 10px;  
}

.site-logo {
  width: 100%;
  max-width: 100%;     
  height: auto;        
  display: block;
  filter: drop-shadow(0px 0px 4px rgba(0, 0, 0, 0.4));    
  transition: filter .3s ease-in-out;  
}

.logo-link:hover .site-logo {
  filter: drop-shadow(0px 0px 6px rgba(0, 0, 0, 0.6));
}

/* PRZEŁĄCZNIK JĘZYKÓW */
.language-switcher {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
}

.language-switcher a {
  font-family: var(--FontFamily);
  color: var(--PrimaryFontColor);
  position: relative;
  text-decoration: none;
  text-justify: inter-word;
  font-size: var(--FontSizeMobile);    
  line-height: 150%;
  font-weight: var(--FontWeightLight);    
  letter-spacing: var(--CurrentLetterSpacing);    
  
  /* Zastosowanie dedykowanej zmiennej cienia dla tekstu */
  text-shadow: var(--TextShadowNormal);
  transition: color .3s ease-in-out, text-shadow .3s ease-in-out;
}

.language-switcher a:hover {
  color: var(--HoverFontColor);
  /* Zastosowanie dedykowanej zmiennej cienia hover dla tekstu */
  text-shadow: var(--TextShadowHover);
}

.language-switcher a::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 1px;
  background-color: var(--PrimaryAccentColor);
  bottom: -2px;    
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform .3s ease-in-out;
}

.language-switcher a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}

.language-switcher::after {
  content: "";
  display: block;
  width: 30px;    
  height: 1px;                       
  background-color: var(--LineColor);    
  order: 1;    
  box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
}

.language-switcher a:last-child {
  order: 2;
}

@media (min-width: 480px) {
  :root {
    --CurrentLetterSpacing: var(--LetterSpacingMedium);
  }

  .logo-link {
    margin-bottom: 20px;
  }

  .language-switcher {
    flex-direction: row;
    align-items: center;    
    gap: 0;  
  }

  .language-switcher a {
    font-size: var(--FontSizeMedium);    
  }

  .language-switcher a:last-child {
    order: unset;
  }

  .language-switcher::after {
    order: 1;      
    width: 1px;                        
    height: 16px;      
    margin: 0 15px;      
    position: static;
    transform: none;
    background-color: var(--LineColor);      
    box-shadow: 0 0 3px rgba(0, 0, 0, 0.5);
  }

  .language-switcher a:last-child {
    order: 2;
  }
}

@media (min-width: 600px) {
  :root {
    --CurrentLetterSpacing: var(--LetterSpacingDesktop);
  }

  .logo-link {
    margin-bottom: 0px;
  }

  .language-switcher a {
    font-size: var(--FontSizeDesktop);    
  }
}