/* na samym początku style.css */
@font-face {
  font-family: 'Changa One';
  src: url('fonts/welcome.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* === Style ogólne === */
body {
    margin: 0;
    padding: 0;
    font-family: Arial, sans-serif;
    background-color: #001a00; /* Domyślny kolor tła */
    scrollbar-width: scroll; /* Firefox */
	overflow-y: scroll;
    -ms-overflow-style: scroll; /* Internet Explorer 10+ */
}
body::-webkit-scrollbar {
    display: scroll; /* Chrome, Safari, Opera */
}

/* === Style dla linków === */
a,
a:visited,
a:hover,
a:active,
a:focus {
    color: #ffffff;
    text-decoration: underline; /* opcjonalnie: usuwa podkreślenie */
	font-weight: bold;
}

/* === Nawigacja === */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    background: rgba(0, 50, 0, 0.4);
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    z-index: 1000;
	backdrop-filter: blur(4px);
}
.logo img {
    height: 50px;
}
.menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    padding-right: 40px;
}
.menu li {
    position: relative;
    padding: 10px 20px;
}
.menu a {
    color: white;
    text-decoration: none;
    font-size: 1.2em;
}
.submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: rgba(0, 50, 0, 0.8);
    list-style: none;
    padding: 0;
    min-width: 150px;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}
.submenu li {
    padding: 10px;
}
.submenu a {
    font-size: 1em;
}
.menu li:hover .submenu {
    display: block;
    opacity: 1;
}

/* === Kontener strony (używany na podstronach) === */
.container {
    max-width: 1000px;
    margin: 100px auto 40px;
    padding: 0 20px;
    color: white;
}

/* === Nagłówki (używane na podstronach) === */
h1 {
    font-size: 2.5em;
    margin-bottom: 20px;
    color: #FFFFFF;
}

/* === Blok "O nas" (używany na podstronie "Czym jest Jeleniogród?") === */
.about-box {
    background: rgba(0, 26, 0, 0.4);
    border: 1px solid #004000;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
	backdrop-filter: blur(10px);
}

/* === Sekcja kontaktowa === */
.contact-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.contact-box, .contact-form {
    flex: 1;
    min-width: 300px;
    background: #002a00;
    border: 1px solid #004000;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
}

.contact-box a {
    color: #8fd98f;
    text-decoration: none;
}

.contact-box a:hover {
    text-decoration: underline;
}

.contact-form label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
}

.contact-form input,
.contact-form textarea {
    width: 100%;
    padding: 8px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #000;
    font-family: Arial, sans-serif;
}

.contact-form button {
    margin-top: 15px;
    background-color: #004d00;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 4px;
}

.contact-form button:hover {
    background-color: #006600;
}

/* === Wideo w tle (strona główna) === */
.video-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    overflow: hidden;
    background: black; /* Tło w przypadku braku wideo */
}
.video-background {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    transition: opacity 1s ease-in-out;
    pointer-events: none;
}
.fade-out {
    opacity: 0 !important;
}
.video-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75); /* Przyciemnienie */
    z-index: 1;
    transition: opacity 1s ease-in-out;
}
.hidden {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}
.hidden-completely {
    display: none;
}

/* === Zawartość strony głównej === */
.content {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 0 1rem;
    margin: 80px auto 20px;
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    text-align: center;
    color: white;
    z-index: 1; /* Upewniamy się, że tekst będzie widoczny na wierzchu */
}
.welcome-text {
    text-align: center;
    animation: fadeIn 1s forwards;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.welcome-text img {
    display: inline-block;
    max-width: 80vw;
    height: auto;
	width: auto;
	max-height: 20vh;
    margin-bottom: -20px;
	object-fit: contain;
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}
.button {
    display: inline-block;
    margin-top: 20px;
    padding: 10px 20px;
    background-color: darkgreen;
    color: white;
    text-decoration: none;
    font-size: 1.2em;
    border-radius: 5px;
    transition: background 0.3s;
}
.button:hover {
    background-color: forestgreen;
}

.gallery-wrapper {
	position: relative;
	bottom: 0;
	width: 100%;
	overflow-x: auto;
	overflow-y: visible;
	z-index: 11;
}
/* === Galeria (strona główna) === */
.gallery {
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    overflow-x: auto;
	overscroll-behavior-x: contain;
	-webkit-overflow-scrolling: touch;
    overflow: visible !important;
    justify-content: center;
    gap: 15px;
    background: rgba(0, 0, 0, 0.8);
    padding: 10px 0;
    align-items: center;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    z-index: 2;
}
.gallery::-webkit-scrollbar {
    display: none; /* Chrome/Safari/Edge */
}
.gallery-item {
    min-width: 120px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    cursor: pointer;
    transition: 0.3s;
    filter: brightness(0.6);
    transform: scale(0.9);
    text-align: center;
}
.gallery-item.active {
    filter: brightness(1);
    transform: scale(1);
}
.gallery img {
    width: auto;
    height: 5vh;
    object-fit: cover;
    border-radius: 10px;
    display: inline-block;
}
.gallery-item span {
    display: block;
    color: white;
    margin-bottom: 5px;
    font-weight: bold;
}
.events-chip {        /* przycisk „Wydarzenia” wyglądem zbliżony do kafelka */
  appearance: none; border: 1px solid #0a4; background: #0b5; color: #fff;
  cursor: pointer;
}
.events-chip span { color:#fff; }
.bm-badge {
  display:inline-block; margin-left:.45rem; padding:0 .45rem; min-width:1.2em;
  border-radius:10px; background:#fff; color:#0b5; font-weight:700; font-size:.85em;
}

/* odrobinkę mniejsze na bardzo małych ekranach */
@media (max-width:420px){
  .gallery-item { padding: .45rem .55rem; min-width: 86px; }
  .gallery-item img { width: 32px; height: 32px; }
  .gallery-item span { font-size: 12px; }
}

/* === Arkusz wydarzeń (sheet) === */
.events-sheet[hidden]{ display:none; }
.events-sheet{
  position: fixed; inset: 0; background: rgba(0,0,0,.35);
  z-index: 999; display: grid; place-items: end center;
}
.es-inner{
  width: 100%; max-width: 720px; background: #fff;
  border-top-left-radius: 16px; border-top-right-radius: 16px;
  box-shadow: 0 -10px 30px rgba(0,0,0,.15);
  max-height: 80vh; overflow: auto;
  padding: 1rem 1rem calc(1rem + env(safe-area-inset-bottom));
}
.es-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.5rem; }
.es-close{ appearance:none; border:0; background:#f2f2f2; border-radius:10px; padding:.4rem .6rem; font-size:1rem; cursor:pointer;}
.es-list{ list-style:none; margin:0; padding:0; display:grid; gap:.75rem; }
.es-card{ border:1px solid #eee; border-radius:12px; padding:.75rem .9rem; display:grid; gap:.4rem; }
.es-meta{ font-size:.9rem; color:#666; }
.es-title{ font-weight:700; }
.es-cta{ display:flex; gap:.5rem; margin-top:.25rem; flex-wrap:wrap; }
.es-cta a{ text-decoration:none; padding:.5rem .75rem; border-radius:10px; background:#0b5; color:#fff; }
.es-cta a.secondary{ background:#eee; color:#222; }
.sun-button img {
    width: 40px;
    height: 40px;
    transition: filter 0.3s ease;
}
.sun-button.dark img {
    filter: brightness(0) invert(1);
}

/* === Przycisk "Wróć do góry" (używany na podstronach) === */
#backToTop {
    display: none;
    position: fixed;
    bottom: 40px;
    right: 20px;
    z-index: 999;
    background-color: #004d00;
    color: white;
    border: none;
    padding: 12px 16px;
    border-radius: 50%;
    font-size: 1.5em;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
    transition: opacity 0.3s ease;
}
#backToTop:hover {
    background-color: #006600;
}

/* === Stopka === */
.footer {
    text-align: center;
    padding: 20px;
    font-size: 0.9em;
    color: #aaa;
    margin-top: auto;
}

/* === Responsywność (strona główna) === */
@media (max-width: 768px) {
  /* 1) Spraw, by .content wróciło do normalnego flow i było scrollowalne */

  /* 2) Dodaj padding-bottom odpowiadający wysokości galerii */
  /* gallery height = 5vh (obrazki) + 20px (padding .gallery)  */
  body {
    padding-bottom: calc(5vh + 20px) !important;
  }

  .welcome-text img {
    max-width: 70%;
    height: auto;
    display: block;
    margin: 0 auto;
  }

  .welcome-text h1 {
    font-size: 1.6rem;
    line-height: 1.2;
    margin-top: 1rem;
  }

  #video-subtitle {
    font-size: 1.2rem;
  }

  #video-description {
    font-size: 1rem;
  }

  #video-button {
    font-size: 1rem;
    padding: 0.75rem 1.5rem;
    margin-top: 1rem;
  }
}
.sun-popup {
  position: absolute;
  top: 15%;                /* kilka px poniżej guzika */
  left: -150%;
  transform: translateX(-50%);
  padding: 0.5rem 1rem;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  border-radius: 0.25rem;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  font-size: 0.9rem;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s;
  z-index: 99000;
}

/* klasy aktywujące pokazanie popupa */
.sun-wrapper.active .sun-popup {
  opacity: 1;
  visibility: visible;
}

.sun-wrapper {
  position: absolute;
  /* 5vh = wysokość obrazków + 20px padding galerii + 10px odstępu */
  bottom: calc(8vh + 30px);
  right: 20px;
  z-index: 9999;
  pointer-events: auto;  /* pewność, że złapie klik */
}

.sun-button {
  background: none;
  border: none;
  cursor: pointer;
}

.container img,
.error-box img {
	max-width: 100%;
	height: auto;
	display: block;
	margin: 0 auto;
}