:root {
    --primary-color: rgb(248, 164, 7);/* menu top, wiecej */
    --secondary-color: orange;/*  */
    --font-color: orange;/* menu top */
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;  
}

html{
/*   background-image: url('../img/design/bgzs1.png');
  background-attachment: fixed; 
  background-image: url('../img/design/bgzs1.png');
  */
}
/* Ogólne stylowanie strony */
body {
    animation: fadeIn 1s ease-out; /* Animacja fade-in na całym ciele */
    overflow-x: hidden;
    font-family: "Open Sans", sans-serif !important; 
/*     font-family: Roboto, sans-serif !important;*/
    font-size: 20px; /* Domyślny rozmiar czcionki */
    line-height: 1.4;
    transform-origin: top left;
    transform: scale(1); /* Na desktopie rozmiar standardowy */
    color: #464646;
/*     background-image: url('../img/design/imgstart3.jpg'); */
    background-image: url('../img/design/f3.jpg');
/* background-image: url('../img/design/flaga.webp');*/
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: contain 
	
  }
html{
/*	background-image: url('../img/design/flaga.webp');
	position: absolute;
	z-index: 1000000;
	background-size: auto
*/
}
@keyframes fadeIn {
  0% {
      opacity: 0;
      transform: translateY(0px);
  }
  100% {
      opacity: 1;
      transform: translateY(0);
  }
}

h1,h2,h3,h4,h5,h6{
  color: #666;
  font-family: "Open Sans Condensed", sans-serif !important; 
}
header {
/*     background-image: url('../img/design/imgstart3.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 100% 100%; */
    width: 100%;
    padding-top: 39%;
    position: relative;
    text-align: center;
}
/* tarcza */
#tarcza{
  position: absolute;
    top: 62px;
    left: 0;
    padding-top: 10px;
    display: grid;
    width: 80%;
   /*  max-width: 30%; */
    grid-template-columns: 1fr 4fr;
    grid-template-rows: repeat(1,auto);

   /*  gap:10px; */
    z-index: 1001
    
}
#tarcza > div:first-child{
    grid-column: 1;
    grid-row: 1 
}
#tarcza > div:last-child{
      grid-column: 2;
      grid-row: 1;
      text-align: center 
      }
#tarcza > div:last-child span{
  background-color: rgba(0,0,0,0.6);
  display: block;
  width: 220px;
  padding: 5px;
  font-size: 1.2em;
  filter:drop-shadow(3px 3px 3px #ddd) 
}
#tarcza img{
    width: 70%;
    filter:drop-shadow(2px 2px 2px #ddd)
}

/* tarcza end */
/* Kontener napisów na pełną szerokość i wysokość */
#header-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; /* Pokrywa cały header */
    background-color: rgba(0, 0, 0, 0.1);  /* Półprzezroczyste tło */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-optical-sizing: auto;
    text-shadow: 2px 3px 3px #111;
   /*  margin-top: -50px; */
    line-height: 1.1
}
.main-header {
    display: flex;
    /*align-items: center;  Centrowanie pionowe herbu i tekstu */
    justify-content: center; /* Centrowanie całej zawartości na środku strony */
    padding: 10px;
  /*  background-color: rgba(55, 55, 55,0.4);  Przykładowe tło, aby biały tekst był widoczny */
    gap: 20px; /* Nowoczesny odstęp między herbem a tekstem */
}

#herb-pl, #logo-www {
    width: 100px; /* Nieco mniejszy, by nie dominował */
    flex-shrink: 0;
}

#herb-pl img, #logo-www img {
    width: 100%;
    height: auto;
}

#nazwa-szkoly {
    display: flex;
    flex-direction: column;
    align-items: center; /* Centrowanie tekstów pod sobą */
    text-align: center;
    font-size: 20px; /* Tekst płynnie skaluje się do rozmiaru ekranu */
}

#header-title {
    color: #fff;
    /*font-size: clamp(1.5rem, 5vw, 3rem);  Tekst płynnie skaluje się do rozmiaru ekranu */
    margin: 0;
   /*  line-height: 1.1; */
    font-size: 4em;
}

#header-patron {
    color: #fff;
   /*  font-size: clamp(1rem, 3vw, 2rem); */
    /*margin: 5px 0 0 0;  Delikatny odstęp od góry */
    font-size: 2.5em;
}

#header-miasto {
    color: #fff;
   /*  font-size: 1.2rem; 
    margin-top: 5px;*/
    font-size: 1.2em
}

#header-klasy, #header-rok{
    color: #ebe2e2;
    font-size: min(3vw, 18px);
    position: relative; /* Dodaj to */
    z-index: 10;        /* Dodaj to */   
}
#header-rok{
  background-color: brown;
  padding: 10px;
  border-radius: 7px
}

#header-na-skroty{
    position:absolute;
    background-color: var(--primary-color);
    right: 0;
    bottom: 3px;
    height: 70px;
    width: 70px;
    border-radius: 50% 0 0 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2.5em;
    cursor: pointer;
    transition: background-color 0.5s ease-in-out;
}
#header-na-skroty span:hover{
/*     background-color: rgb(239, 189, 95); */
    color: brown;
    filter: drop-shadow(2px 2px 4px brown);
    transform: scale(1.2);
}
#header-pasek, #footer-pasek {
    height: 15px;
    background-color: var(--primary-color);
    position: sticky
}
#footer-pasek #odwiedziny{
    font-size: 0.7em; 
    margin: 0 20px; 
    display: flex; 
    align-items: center;
    justify-content: end
}
#footer-pasek #odwiedziny span{
    font-family: Georgia, 'Times New Roman', Times, serif
}
/* Kontener główny */
main {
/*   max-width: 1240px; */
  background-image: url('../img/design/bgzs1.png');
  display: flex;
  overflow: hidden; /* Ukrywa kolumny poza ekranem */
  width: 133.33%; /* Szerokość kontenera na 400% dla 4 kolumn kolumny określone 2 article.css*/
  transition: transform 0.5s ease-in-out;
}

/* Klasy do przesuwania */
main.show-left {
    transform: translateX(0); /* Widoczna pierwsza, druga i trzecia kolumna */
}

main.show-right {
    transform: translateX(-25%); /* Widoczna druga, trzecia i czwarta kolumna */
}

footer {
  padding: 20px;
  background-color: #333;
  color: rgba(255,255,255,0.6);
  display: grid;
  bottom: 0;  
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto auto;
  grid-template-areas: 
                      "video video video"
                      "d1 d2 d3";

/* 
  position: sticky;
  z-index: -1 
 */   
}
footer > div{
/*   outline: 1px solid red; */
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100%;
    justify-content: flex-start; 
    padding: 20px 0;
}
footer > #video{grid-area: video;}
footer > #d1{grid-area: d1;}
footer > #d2{grid-area: d2;}
footer > #d3{grid-area: d3;}
footer h2{
    font-size: 1.1em;
    font-weight: 700;
    color: #f7f1f1;
    margin-bottom: 10px
}
footer ol, footer ul{
    list-style-type: none;
}

footer a {
    color: rgba(255,255,255,0.6);
    font-weight: normal;
    padding: 0;
    font-size: 1em;
  }

  footer a:hover {
    color: #f7f1f1;
  }

  .contact-info {
    display: flex;
    flex-direction: column;
    gap: 10px; /* Odstęp między elementami */
    align-items: flex-start; /* Wyrównanie elementów do lewej */
    font-family: Arial, sans-serif;
    font-size: 0.9em;
  }

  .info-item {
    display: flex;
    align-items: center; /* Wyśrodkowanie ikon i tekstu w linii */
    justify-content: flex-start; /* Wyrównanie elementów do lewej */
    gap: 8px; /* Odstęp między ikoną a tekstem */
  }

  .info-item i {
    color: rgba(255,255,255,0.6);
    font-size: 1.1em;
  }
  .ikonyzs1{
    background-size: contain; /* Zapewnia, że ikona zachowa proporcje i dopasuje się do rozmiaru elementu */
    background-repeat: no-repeat; /* Zapobiega powtarzaniu obrazu */
    width: 20px; /* Szerokość ikony */
    height: 20px; /* Wysokość ikony */
    display: inline-block; /* Umożliwia traktowanie ikony jak elementu blokowego, ale w linii */
    vertical-align: middle; /* Wyrównuje ikonę do środka w linii */
  }

  .ti {
    background-image: url('../img/logokierunki/logo_inf.png');
  }
  .tl {
    background-image: url('../img/logokierunki/logo_log.png');
  }
  .tra {
    background-image: url('../img/logokierunki/logo_rach.png');
  }
  .tr {
    background-image: url('../img/logokierunki/logo_rek.png'); 
  }

  .ts {
    background-image: url('../img/logokierunki/logo_sped.png'); 
  }

  .te {
    background-image: url('../img/logokierunki/logo_ekon.png'); 
  }
  
  .powiat{
    background-image: url('../img/design/powiatkw1.png'); 
  }
  .miasto{
    background-image: url('../img/design/herbkw1.png'); 
  }
  .biblio{
    background-image: url('../img/design/bibliotekp1.png'); 
  }
  .szkola{
    background-image: url('../img/design/logo_zs1.png'); 
  }

  .bip{
    background-image: url('../img/design/bip-na-www.jpg'); 
  } 
  /* info z poczty */
#info-email{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: Roboto, sans-serif;
  font-size: 0.8em;
  font-weight: normal;
}
#email-ok{
  background-color: rgba(0,255,0,0.5);
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 4px #666;
  text-align: center
}
#email-no{
  background-color: rgba(255,0,0,0.5);
  width: 100%;
  padding: 5px;
  border-radius: 5px;
  box-shadow: 2px 2px 4px #666;
  text-align: center
}

/* dla media */
#media {
  display: none;
}
.fa-heart {
  color: #e00;
  animation: beatGlow 1.2s infinite ease-in-out;
  transform-origin: center;
}

/* główna animacja (puls + glow) */
@keyframes beatGlow {
  0% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
  }

  /* pierwszy mocny skurcz + rozbłysk */
  10% {
    transform: scale(1.25);
    text-shadow:
      0 0 8px rgba(255, 0, 0, 0.8),
      0 0 16px rgba(255, 0, 0, 0.6),
      0 0 24px rgba(255, 0, 0, 0.4);
  }

  20% {
    transform: scale(1);
    text-shadow: 0 0 4px rgba(255, 0, 0, 0.4);
  }

  /* drugi słabszy skurcz */
  30% {
    transform: scale(1.12);
    text-shadow:
      0 0 6px rgba(255, 0, 0, 0.6),
      0 0 12px rgba(255, 0, 0, 0.4);
  }

  40% {
    transform: scale(1);
    text-shadow: 0 0 2px rgba(255, 0, 0, 0.2);
  }

  /* pauza */
  100% {
    transform: scale(1);
    text-shadow: 0 0 0 rgba(255, 0, 0, 0);
  }
}
/* Widoczność tylko na ekranach smartfonów i tabletów ustawionych w pionie */
@media (max-width: 768px) {
  #media {
      display: flex;
      flex-direction: column;
      /* background-color: rgba(0, 0, 0, 0.8); */
      background-color: rgb(98, 133, 155);
      font-family: "Open Sans Condensed", sans-serif
  }
  #media-div1{
    display: flex;
    flex-direction: row;
      justify-content:space-between;
      align-items: center;
      padding: 0;
      margin: 0 auto;
      text-align: center;
      width: 100%;
      /* gap:10px */
  }
  #media-div2{
    height: 5px;
    background-color: var(--primary-color);
  }
  .logo {
      height: 86.5px; /* 61.8% z 140px */
      width: auto;
      padding: 5px;
      background-color: orange;
     /*  margin-bottom: 10px; */
     
  }

  .logo img {
  max-height: 100%; /* Dopasowanie do wysokości kontenera */
  width: auto;
/*     padding: 10px 0 0 10px; */
  filter:drop-shadow(2px 2px 4px #666);
  flex: 1
  }

  .text {
     /*  height: 53.5px; 38.2% z 140px */
      font-size: 0.9rem;
      font-weight: bold;
      padding: 10px;
      text-align: center;
      flex: 2;
      color: #eee
      
  }
}


/* Sekcja dla telefonów - aktywuje się poniżej 768px szerokości */
@media (max-width: 768px) {
    /* 1. Zmniejszamy bazę czcionki dla całego nagłówka */
    #nazwa-szkoly {
        font-size: 14px !important; 
        line-height: 1.0 !important; /* Minimalnie luźniej niż na desktopie dla czytelności */
    }

    /* 2. Proporcjonalne zmniejszenie napisów */
    #header-title {
        font-size: 2.2em !important; /* Zamiast 4em */
    }

    #header-patron {
        font-size: 1.6em !important; /* Zamiast 2.5em */
    }

    #header-miasto {
        font-size: 1em !important;   /* Zamiast 1.2em */
    }

    /* 3. Układanie elementów w pionie, by nie wychodziły poza ekran */
    .main-header {
        flex-direction: column !important;
        gap: 10px !important;
    }

    #herb-pl, #logo-www {
        width: 60px !important; /* Mniejsze logo na telefonie */
    }
}