/* ======================
   /css/theme.css
   Jasny motyw + akcenty logo
====================== */

:root {
  /* Kolory firmowe */
  --brand-green: #22c55e;
  --brand-orange: #e0ad89;
  --brand-white: #d8d8d8;

  /* Nadpisanie kolorów Bootstrapa */
  --bs-primary: rgb(48, 134, 40);
  --bs-link-color: var(--brand-green);
  --bs-link-hover-color: #16a34a;
}

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.bg-accent {
  background: var(--brand-orange);
}

.navbar-brand span {
  letter-spacing: .2px;
}

.card img {
  object-fit: cover;
  aspect-ratio: 16/10;
}

/* logo w navbarze bez białego tła */
img.transparent {
  background: transparent;
  mix-blend-mode: multiply;
}

/* ======================
   HERO (nagłówek strony)
====================== */

/* Sekcja hero ma tło (twoje zdjęcie magazyn.jpeg z przyciemnieniem),
   odpowiednie odstępy i bezpieczną wysokość na desktopie */
.hero {
  position: relative;
  background: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)),
              url('../assets/magazyn.jpeg') center/cover no-repeat;
  color: #d4d4d4;
  min-height: 60vh;
  padding: 3rem 0;
  overflow: hidden;
}

/* Półprzezroczysta nakładka tła + padding na treść.
   Uwaga: w HTML używamy teraz <div class="hero-overlay">, nie .overlay */
.hero-overlay {
  position: relative;
  background: rgba(0, 0, 0, 0.45);
  width: 100%;
  height: 100%;
  padding: 2rem 0;
}

/* Logo w sekcji hero */
.hero-logo {
  max-width: 260px;
  height: auto;
  position: relative;
  z-index: 1;
}

/* Tekst/CTA w hero ma być nad tłem */
.hero h1,
.hero p,
.hero .btn {
  position: relative;
  z-index: 2;
}

/* ======================
   RESPONSYWNOŚĆ HERO
====================== */
@media (max-width: 768px) {
  .hero {
    min-height: auto;
    padding: 2.5rem 0 2rem;
  }

  .hero-overlay {
    padding: 2rem 0;
  }

  .hero-logo {
    max-width: 140px;   /* <= to rozwiązuje nachodzenie na tekst niżej */
    margin: 1.5rem auto 0;
    display: block;
  }

  .hero .lead {
    margin-bottom: 1.5rem;
  }
}

/* ======================
   Inne elementy na stronie
====================== */

/* Kolor zielony w przyciskach/linkach brandowych */
.text-brand-green {
  color: #16a34a;
}

/* Slider (jeśli używasz karuzeli ze zdjęciami) */
#heroCarousel img {
  max-height: 600px;
  object-fit: cover;
}

/* Przyciemnione podpisy na slajdach */
.carousel-caption {
  background: rgba(0, 0, 0, 0.45);
  padding: 1.5rem;
  border-radius: 0.75rem;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

/* Logotypy partnerów */
.partner-logo {
  height: 55px;
  max-width: 180px;
  object-fit: contain;
  opacity: 0.85;
  filter: grayscale(100%);
  transition: transform .25s ease, opacity .25s ease, filter .25s ease;
}

.partner-logo:hover {
  opacity: 1;
  filter: grayscale(0%);
  transform: scale(1.05);
}