/* =========================================
   GLOBALNE STYLE
========================================= */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;
    background-color: #f5f5f5;
    color: #333;
}

h1, h2, h3, p {
    margin: 0;
}
.poem{
text-align:center;
font-family: inherit;
white-space: pre-wrap;
line-height:1.0;
margin-bottom:40px;
}
/* =========================================
   HEADER
========================================= */
header {
    background: #2c3e50;
    color: white;
    padding: 1rem 0;
    text-align: left;
}

.header-title {
    font-size: 24px;
    font-weight: bold;
    margin: 0;
    color: #f1c40f;
}
.header {
    position: relative;
}

#datetime {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    color: #fff;
}

/* =========================================
   MENU
========================================= */
.menu {
    display: flex;
    justify-content: center;
    background-color: #2c3e50;
    padding:0px 0;
    gap: 30px;
}

.menu a {
    position: relative;
    color: #ecf0f1;
    text-decoration: none;
    font-weight: bold;
    font-size: 18px;
    padding: 0px 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.menu a::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: #3498db;
    transition: width 0.3s ease;
}

.menu a:hover,
.menu a.active {
    color: #3498db;
}

.menu a:hover::after,
.menu a.active::after {
    width: 100%;
}

.menu a:hover {
    transform: translateY(-3px);
}

@media (max-width: 768px) {
    .menu {
        flex-direction: column;
        gap: 15px;
    }
}
/* =========================================
   O MNIE kim jestem index
========================================= */
.about-section {
    background: #ffffff;
    padding: 50px 40px;
    max-width: 900px;
    margin: 0 auto 50px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    text-align: center;
}

.about-section h2 {
    font-size: px;
    margin-bottom: 5px;
}

.about-section p {
    font-size: 16px;
    line-height: 1.0;
    color: #444;
}
.about-section h2:first-of-type {
    font-size: 25px; /* "Witam na mojej stronie" */
}

.about-section h2:last-of-type {
    font-size: 30px; /* "Kim jestem?" */
}
.about-photo {
    max-width: 150px;   /* zmniejsza zdjęcie – możesz ustawić 150px, 180px itd. */
    width: 150%;
    margin-top: 30px;   /* zwiększa odstęp od tekstu */
    border-radius: 15px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.2);
}


/* =========================================
   KAFELKI galeria najwazniejsze informacje strona głowna 
========================================= */
.home-boxes {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 30px;
    max-width: 1200px;
    margin: 40px auto 60px;
}

.home-box {
    flex: 1 1 30%;
    min-width: 250px;
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    text-align: center;
    box-shadow: 0 6px 25px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    font-size: 16px;
}

.home-box:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.home-box h3 {
    font-size: 20px;
    margin-bottom: 12px;
    color: #333;
}

.home-box p {
    font-size: 15px;
    color: #555;
    margin-bottom: 20px;
}

.box-btn {
    display: inline-block;
    padding: 10px 25px;
    background: #007bff;
    color: #fff;
    border-radius: 10px;
    text-decoration: none;
    transition: 0.3s ease;
}

.box-btn:hover {
    background: #0056cc;
    transform: scale(1.05);
}



/* =========================================
   FORMULARZ KONTAKTOWY
========================================= */
.contact-section {
    max-width: 600px;
    margin: 40px auto;
    background: #ffffff;
    padding: 30px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
}

.contact-section h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 10px;
}

.contact-description {
    text-align: center;
    margin-bottom: 25px;
    font-size: 15px;
    color: #555;
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.input-group {
    display: flex;
    flex-direction: column;
}

.input-group label {
    font-weight: 600;
    margin-bottom: 5px;
}

.input-group input,
.input-group textarea {
    width: 100%;
    padding: 12px;
    font-size: 16px;
    border: 1px solid #cccccc;
    border-radius: 10px;
    box-sizing: border-box;
    transition: 0.3s;
}

.input-group input:focus,
.input-group textarea:focus {
    border-color: #0066ff;
    box-shadow: 0 0 6px rgba(0,102,255,0.4);
    outline: none;
}

.contact-btn {
    width: 100%;
    padding: 15px;
    font-size: 18px;
    background: #0066ff;
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

.contact-btn:hover {
    background: #004fcc;
    transform: scale(1.03);
}

/* =========================================
   GALERIA
========================================= */
.gallery-section {
    max-width: 1000px;
    margin: 40px auto;
    animation: fadeIn 0.7s ease;
}

.gallery-section h2 {
    text-align: center;
    font-size: 16px;
    margin-bottom: 10px;
}

.gallery-description {
    text-align: center;
    color: #555;
    font-size: 15px;
    margin-bottom: 30px;
}

.gallery-album {
    background: #ffffff;
    padding: 25px;
    border-radius: 15px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.12);
    margin-bottom: 40px;
    transition: 0.3s ease;
}

.gallery-album:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 25px rgba(0,0,0,0.18);
}

.gallery-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 15px;
    padding-bottom: 10px;
}

.gallery-grid img {
    flex: 0 0 auto;
    width: 180px;
    height: 140px;
    object-fit: cover;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.3s ease;
}

.gallery-grid img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

.gallery-grid::-webkit-scrollbar {
    height: 8px;
}
.gallery-grid::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
}

/* =========================================
   LIGHTBOX
========================================= */
#lightbox {
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    overflow: hidden;
}

#lightbox img {
    max-width: 90%;
    max-height: 90%;
    border-radius: 10px;
    box-shadow: 0 4px 14px rgba(0,0,0,0.4);
    z-index: 1000;
}

#lightbox .prev,
#lightbox .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    font-size: 60px;
    color: #fff;
    background: rgba(0,0,0,0.6);
    padding: 15px;
    border-radius: 50%;
    cursor: pointer;
    z-index: 2000;
    user-select: none;
    text-shadow: 0 0 5px black;
}

#lightbox .prev { left: 20px; }
#lightbox .next { right: 20px; }

#lightbox .prev:hover,
#lightbox .next:hover {
    background: rgba(0,0,0,0.9);
}

#lightbox .close {
    position: absolute;
    top: 20px;
    right: 30px;
    font-size: 45px;
    background: rgba(0,0,0,0.6);
    color: white;
    border-radius: 50%;
    padding: 5px 10px;
    cursor: pointer;
    z-index: 2000;
}

#download-btn {
    position: absolute;
    bottom: 20px;
    right: 50%;
    transform: translateX(50%);
    font-size: 18px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    text-decoration: none;
    z-index: 2000;
}

#download-btn:hover {
    background: rgba(0,0,0,0.7);
}

#fullscreen-btn {
    position: absolute;
    bottom: 20px;
    right: 80px;
    font-size: 30px;
    background: rgba(0,0,0,0.4);
    border: none;
    border-radius: 8px;
    padding: 8px 12px;
    z-index: 2000;
    color: #fff;
}

#fullscreen-btn:hover {
    background: rgba(0,0,0,0.7);
}



/* =========================================
   ANIMACJE
========================================= */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   FOOTER
========================================= */
footer {
    width: 100%;
    display: block;
    text-align: center !important;
    padding: 20px 0;
    font-size: 16px;
    color: #555;
	border-top: 4px solid #3498db; /* pasek taki jak menu */
}

footer p {
    margin: 0;
    text-align: center !important;
}

/* =========================================
   GALERIA – nazwy albumów
========================================= */
.gallery-album h3 {
    font-size: 20px;
    color: #0078ff;
    font-weight: bold;
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 15px;
    border-radius: 8px;
    padding: 5px 10px;
    background-color: rgba(0, 120, 255, 0.1);
}


}
/* =========================================
   STOPKA - pasek jak menu
========================================= */
footer {
    background-color: #2c3e50;   /* taki sam kolor jak menu */
    color: white;                /* kolor tekstu */
    text-align: center;          /* wyśrodkowanie tekstu */
    padding: 15px 0;             /* wysokość stopki */
    width: 100%;                 /* pełna szerokość strony */
    display: block;
    box-sizing: border-box;      /* żeby padding nie rozszerzał stopki */
    border-top: 3px solid #f1c40f; /* pasek podobny do menu */
}

/* Tekst stopki */
footer p {
    margin: 0;
    color: white;                /* upewniamy się, że tekst jest widoczny */
}
/* Ogólny kontener strony */
body, html {
    height: 100%;      /* potrzebne do ustawienia wysokości całej strony */
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column; /* układ kolumnowy: treść + stopka */
}

/* Główna zawartość strony */
main {
    flex: 1;            /* zajmuje całą pozostałą wysokość, wypychając stopkę na dół */
}

/* Stopka */
footer {
    background-color: #2c3e50;   /* kolor stopki */
    color: white;
    text-align: center;
    padding: 15px 0;
    border-top: 3px solid #f1c40f;
}
.info-section {
    display: flex;
    justify-content: center;  /* wyśrodkowanie kafelka */
    margin: 40px 0;           /* odstęp od innych sekcji */
}

.info-card {
    background-color: #ffffff;            /* kolor tła kafelka */
    padding: 25px 30px;                   /* odstępy wewnętrzne */
    border-radius: 15px;                  /* zaokrąglone rogi */
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* delikatny cień */
    max-width: 900px;                     /* maksymalna szerokość kafelka */
    line-height: 1.6;                     /* odstęp między liniami tekstu */
    color: #333;                          /* kolor tekstu */
    font-size: 16px;                       /* rozmiar tekstu */
}
footer {
    font-style: normal;
}

/* PRZYCISK POLITYKI */
#privacy-btn {
  display: inline-block; /* żeby margin działał poprawnie */
  margin-bottom: -35px;   /* zwiększa odstęp pod przyciskiem */
  padding: 0px 50px;
  background: #2c3e50;
  color: #fff;
  border-radius: 0px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}


#privacy-btn:hover {
  background: #005fcc;
}

/* POPUP */
#privacy-popup {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.6);
  justify-content: center;
  align-items: center;
}

#privacy-content {
  background: #fff;
  width: 90%;
  max-width: 600px;
  margin: auto;
  padding: 25px 30px;
  border-radius: 10px;
  position: relative;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}

#privacy-content h3 {
  margin-top: 0;
  margin-bottom: 15px;
  text-align: center;
}

#privacy-content ol {
  padding-left: 20px;
}

#privacy-content li {
  margin-bottom: 10px;
  line-height: 1.5;
}

/* ZAMKNIĘCIE POPUP */
#privacy-close {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}
#page-arrows {
  position: fixed;
  top: 50%; /* pionowo na środku ekranu */
  right: 20px; /* po prawej stronie */
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 15px;
  z-index: 10000;
}

#page-arrows span {
  font-size: 30px;
  background: rgba(0,0,0,0.5);
  color: white;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: 0.3s ease;
  user-select: none;
}

#page-arrows span:hover {
  background: rgba(0,0,0,0.8);
}
.download-all-btn {
    font-size: 14px;
    margin-left: 15px;
    padding: 4px 8px;
    background-color: #0077cc;
    color: white;
    text-decoration: none;
    border-radius: 5px;
}

.download-all-btn:hover {
    background-color: #005fa3;
}

/* =========================================
   Wspomnienia
========================================= */
.info-section {
    display: flex;
    flex-direction: column;
	align-items: center; /* WYŚRODKOWANIE KART */
    gap: 40px;
}

.info-card {
    display: flex;
    flex-direction: column;
    align-items: center; /* WYŚRODKOWANIE KART */
	gap: 15px;
	width: 100%;
}

.doc-img {
    width: 100%;
    max-width: 600px;
    height: auto;
    margin: 0 auto;
    display: block;
}



/* ============================= */
/* STRONA: INFORMACJE            */
/* ============================= */

.info-section {
    padding: 30px 15px;
    background-color: #f5f5f5;
}

.info-card {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 26px;
    background-color: #ffffff;
    border-radius: 10px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);

    display: flex;
    flex-direction: column;
    gap: 12px; /* kontrola odstępów */
}

/* Nagłówki */
.info-card h1 {
    font-size: 28px;
    margin: 0 0 6px 0;
    text-align: center;
}

.info-card h2 {
    font-size: 20px;
    margin: 0 0 10px 0;
    text-align: center;
    color: #444;
}

/* Tekst */
.info-card p {
    margin: 0;
    font-size: 16px;
    line-height: 1.55;
    color: #333;
    text-align: justify;
}

/* Wyróżnienie wartości */
.info-card strong {
    color: #000;
    font-weight: 600;
}

/* ============================= */
/* RESPONSYWNOŚĆ – TELEFON       */
/* ============================= */
@media (max-width: 768px) {
    .info-section {
        padding: 20px 10px;
    }

    .info-card {
        padding: 18px;
        border-radius: 8px;
    }

    .info-card h1 {
        font-size: 24px;
    }

    .info-card h2 {
        font-size: 18px;
    }

    .info-card p {
        font-size: 15px;
        line-height: 1.5;
    }
}

/* =========================
POPUP
========================= */

.popup-box{
position:absolute;
top:120px;
left:0;
width:100%;

display:flex;
justify-content:center;

background:rgba(0,0,0,0.6);
padding:40px 0;

z-index:9999;
}

/* białe okno popup */

.popup-content{
background:white;
max-width:900px;
width:90%;
padding:30px;
border-radius:10px;
box-shadow:0 10px 40px rgba(0,0,0,0.3);
}

/* tekst popup */

.popup-text{
max-width:700px;
margin:0 auto;
padding:0 20px;
line-height:1.6;
font-size:15px;
white-space:pre-wrap;
text-align:left;
}

/* przycisk zamknięcia */

.popup-close-btn{
display:block;
margin:25px auto 0 auto;
padding:10px 20px;
font-size:14px;
background:#444;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}

.popup-close-btn:hover{
background:#000;
}

/* =========================
MOBILE
========================= */

@media (max-width:768px){

.popup-content{
width:95%;
padding:20px;
}

}