/* styles.css — motyw: nocne niebo dla "Konstelacja Jamnika" */

/* --- zmienne kolorów --- */
:root{
  --bg-deep: #050417;         /* bardzo ciemne niebo */
  --bg-mid:  #0b1a2b;         /* granatowy */
  --panel:   rgba(255,255,255,0.03); /* półprzezroczyste panele */
  --text:    #e9f2ff;         /* jasny, zimny tekst */
  --muted:   #a7b8cf;         /* tekst pomocniczy */
  --accent:  #ffd166;         /* akcent (gwiazda) */
  --accent-2:#9ad0f5;         /* sekundarny akcent (księżycowy blask) */
  --glass:   rgba(255,255,255,0.04);
  --card-shadow: 0 6px 20px rgba(2,6,23,0.6);
  --radius: 12px;
  --max-width: 1100px;
  --container-padding: 28px;
}

/* --- ogólne --- */
*{box-sizing: border-box}
html,body{
  height:100%;
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background-color: var(--bg-deep);
  color: var(--text);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.5;
}

/* --- Tło z migoczącymi gwiazdami --- */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1; /* zmienione z -2 — gwiazdy nad tłem, ale pod treścią */
  background:
    radial-gradient(4px 4px at 10% 20%, rgba(255,255,255,0.95), rgba(255,255,255,0) 60%),
    radial-gradient(5px 5px at 25% 40%, rgba(255,255,255,0.85), rgba(255,255,255,0) 60%),
    radial-gradient(6px 6px at 70% 15%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    radial-gradient(6px 6px at 85% 60%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(5px 5px at 45% 75%, rgba(255,255,255,0.9), rgba(255,255,255,0) 70%),
    radial-gradient(4px 4px at 15% 85%, rgba(255,255,255,0.8), rgba(255,255,255,0) 70%),
    radial-gradient(5px 5px at 60% 50%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(13,24,40,0.6) 0%, rgba(5,4,23,0.95) 100%);
  background-repeat: repeat;
  opacity: 0.95;
  pointer-events: none;
  animation: starsTwinkle 6s ease-in-out infinite;
}

/* --- Dodatkowa warstwa gwiazd dla głębi --- */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2; /* jedna warstwa niżej, ale nadal nad tłem */
  background:
    radial-gradient(3px 3px at 5% 10%, rgba(255,255,255,0.8), rgba(255,255,255,0) 60%),
    radial-gradient(3px 3px at 40% 30%, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%),
    radial-gradient(2px 2px at 80% 70%, rgba(255,255,255,0.6), rgba(255,255,255,0) 60%),
    radial-gradient(3px 3px at 30% 85%, rgba(255,255,255,0.7), rgba(255,255,255,0) 60%),
    linear-gradient(180deg, rgba(10,15,30,0.8) 0%, rgba(5,4,20,0.95) 100%);
  background-repeat: no-repeat;
  opacity: 0.8;
  pointer-events: none;
  animation: starsTwinkle2 9s ease-in-out infinite;
}

/* --- Animacje migotania --- */
@keyframes starsTwinkle {
  0%   { opacity: 0.6; filter: brightness(0.8); transform: scale(1); }
  25%  { opacity: 0.9; filter: brightness(1.2); transform: scale(1.02); }
  50%  { opacity: 1;   filter: brightness(1.5); transform: scale(1); }
  75%  { opacity: 0.8; filter: brightness(1.1); transform: scale(1.03); }
  100% { opacity: 0.6; filter: brightness(0.9); transform: scale(1); }
}

@keyframes starsTwinkle2 {
  0%   { opacity: 0.5; filter: brightness(0.8); }
  30%  { opacity: 0.8; filter: brightness(1.3); }
  60%  { opacity: 1;   filter: brightness(1.6); }
  100% { opacity: 0.5; filter: brightness(0.8); }
}



/* --- kontener główny --- */
.container{
  max-width: var(--max-width);
  margin: 32px auto;
  padding: var(--container-padding);
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border-radius: calc(var(--radius) + 4px);
  box-shadow: var(--card-shadow);
  border: 1px solid rgba(255,255,255,0.03);
}

/* nagłówek */
header{
  display:flex;
  align-items: baseline;
  gap:18px;
  margin-bottom: 18px;
}
header h1{
  font-size: clamp(1.55rem, 3vw, 2rem);
  margin:0;
  letter-spacing: 0.6px;
}
.tagline{
  margin:0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* sekcje */
section{
  margin: 20px 0;
  padding: 18px;
  background: var(--panel);
  border-radius: var(--radius);
  border: 1px solid rgba(255,255,255,0.02);
}
section h2{
  margin-top:0;
  color: var(--accent-2);
  font-size: 1.15rem;
  letter-spacing: 0.4px;
}
section p, section li{
  color: var(--text);
  font-size: 0.98rem;
}

/* lists */
ul{
  padding-left: 1.15rem;
  margin: 8px 0;
}
ul li{
  margin: 6px 0;
}

/* aside - wyróżnienie */
aside#why-choose{
  margin: 22px 0;
  padding: 16px;
  background: linear-gradient(135deg, rgba(255,209,102,0.03), rgba(154,208,245,0.02));
  border-radius: 12px;
  border: 1px solid rgba(255,209,102,0.06);
}
aside h3{
  margin:0 0 8px 0;
  color: var(--accent);
}
aside ul li { color: var(--text); }

/* tabela szczepień */
.vaccination-table{
  width: 100%;
  border-collapse: collapse;
  margin-top: 8px;
  overflow: auto;
}
.vaccination-table th,
.vaccination-table td{
  text-align: left;
  padding: 12px 14px;
  border-bottom: 1px dashed rgba(255,255,255,0.03);
  vertical-align: top;
  font-size: 0.95rem;
}
.vaccination-table thead th{
  background: rgba(255,255,255,0.02);
  color: var(--accent-2);
  font-weight: 600;
}
.vaccination-table tbody tr:hover{
  background: rgba(154,208,245,0.02);
}

/* kontakt */
address{
  font-style: normal;
  color: var(--muted);
}
a{
  color: var(--accent);
  text-decoration: none;
  border-bottom: 1px dashed rgba(255,209,102,0.12);
}
a:hover, a:focus{
  color: var(--accent-2);
  border-bottom-style: solid;
  outline: none;
}

/* stopka */
footer{
  margin-top: 18px;
  text-align: center;
  color: var(--muted);
  font-size: 0.9rem;
}

/* responsywność */
@media (max-width: 720px){
  .container{ padding: 18px; margin: 18px; }
  header{ flex-direction: column; align-items: flex-start; gap:6px; }
  .vaccination-table th, .vaccination-table td { padding: 10px; font-size: 0.92rem; }
}

/* drobne dekoracje: delikatna poświata tytułów */
section h2::after{
  content: "";
  display: block;
  width: 44px;
  height: 3px;
  margin-top: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(154,208,245,0.22), rgba(255,209,102,0.22));
  filter: blur(0.6px);
}

/* kontrast dostępności (jeśli chcesz mocniejszy kontrast) */
@media (prefers-contrast: more){
  :root{
    --text: #ffffff;
    --muted: #dfe9ff;
  }
  .container{ box-shadow: 0 10px 30px rgba(0,0,0,0.75); }
}

/* opcjonalne: styl dla elementu .tagline by wyglądał jak mały 'komentarz' */
.tagline{
  background: linear-gradient(90deg, rgba(154,208,245,0.02), rgba(255,209,102,0.02));
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 500;
}

.timeline {
  position: relative;
  margin: 40px 0;
  padding-left: 30px;
  border-left: 2px solid rgba(255,255,255,0.3);
}

.timeline-item {
  margin-bottom: 30px;
  position: relative;
}

.timeline-item::before {
  content: "";
  position: absolute;
  left: -8px;
  top: 5px;
  width: 14px;
  height: 14px;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 0 10px rgba(255,255,255,0.5);
}

.timeline-item h3 {
  color: #fff;
  text-shadow: 0 0 6px rgba(255,255,255,0.3);
}

.timeline-item p {
  color: #dcdcdc;
  margin-top: 5px;
}