/* --- Definicje zmiennych CSS z opisami po polsku --- */
:root {
  /* Kolor tła całej strony */
  --color-background: #f8f9fa;

  /* Kolor tekstu na stronie */
  --color-text: #212529;

  /* Kolor tła nagłówka i stopki */
  --color-header-footer-bg: #003366;

  /* Kolor tła paska menu (navbar) */
  --color-navbar-bg: #023366;

  /* Kolor tekstu w nagłówku, stopce i navbarze */
  --color-primary-text: white;

  /* Kolor hover w menu */
  --color-nav-hover: #808080;

  /* Podstawowa rodzina czcionek */
  --font-family-base: 'Roboto', sans-serif;

  /* Podstawowe odstępy */
  --spacing-base: 1rem;
  --spacing-small: 0.5rem;
}

/* Nagłówek z logo wypełniający całą szerokość strony */
.header-image {
  width: 100%;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

/* Obrazek w nagłówku – responsywny i skalowalny */
.header-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* --- Styl podstawowy strony --- */
body {
  font-family: var(--font-family-base);
  background-color: var(--color-background);
  color: var(--color-text);
  margin: 0;
  padding: 0;
}

/* --- Nagłówek --- */
header {
  background-color: var(--color-header-footer-bg);
  color: var(--color-primary-text);
  padding: var(--spacing-base) 0;
  text-align: center;
}

/* --- Stopka --- */
footer {
  background-color: var(--color-header-footer-bg);
  color: var(--color-primary-text);
  padding: var(--spacing-base);
  text-align: center;
}

/* --- Pasek menu (navbar) z własnym tłem --- */
.custom-bg-navbar {
  background-color: var(--color-navbar-bg) !important;
  min-height: 50px; /* Minimalna wysokość paska menu */
}

/* --- Menu nawigacyjne - nowe style --- */
.navbar-nav {
  margin: 0 auto;
  gap: 2rem; /* Zwiększony odstęp między pozycjami menu */
}

.navbar-dark .navbar-nav .nav-link {
  color: var(--color-primary-text);
  font-size: 1.1rem; /* Większa czcionka */
  padding: 0.8rem 1rem; /* Większe wypełnienie */
  height: 90%; /* Wysokość 90% paska menu */
  display: flex;
  align-items: center; /* Wyśrodkowanie tekstu w pionie */
  letter-spacing: 0.5px; /* Lekko zwiększony odstęp między literami */
  transition: color 0.3s ease; /* Płynna zmiana koloru */
}

.navbar-dark .navbar-nav .nav-link:hover {
  color: var(--color-nav-hover) !important;
}

/* --- Lista produktów --- */
.product-list li {
  margin-bottom: var(--spacing-small);
}

/* --- Obrazy responsywne --- */
.responsive-img,
.img-fluid {
  max-width: 100%;
  height: auto;
}

/* --- Responsywność - mniejsze odstępy na mobile --- */
@media (max-width: 992px) {
  .navbar-nav {
    gap: 1rem;
  }
  .navbar-dark .navbar-nav .nav-link {
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
  }
  
  /* Stylowanie kart realizacji */
.card {
  transition: transform 0.3s;
  border: 1px solid #ddd;
}
.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
.card-img-top {
  height: 200px;
  object-fit: cover;
}
}