/* =========================
   PGTesty – Global Styles
   ========================= */

/* CSS custom properties (łatwa zmiana motywu) */
:root{
  --brand:#007bff;
  --brand-dark:#0056b3;
  --nav-bg:#343a40;
  --nav-link:rgba(255,255,255,.85);
  --nav-link-hover:#fff;
  --text-main:#212529;
  --bg-page:#f8f9fa;
  --shadow-soft:0 2px 5px rgba(0,0,0,.15);
  --shadow-card:0 4px 8px rgba(0,0,0,.1);
  --hero-bg:url("hero.png");

  /* jeśli masz Bootstrap 5.3+, te zmienne dodatkowo „przyciskają” navbar */
  --bs-navbar-padding-y:.15rem;
  --bs-navbar-brand-padding-y:.15rem;
  --bs-navbar-brand-font-size:1rem;
  --bs-nav-link-padding-y:.2rem;
  --bs-nav-link-padding-x:.6rem;
  --bs-nav-link-font-size:.9rem;
}

/* Global */
html{scroll-behavior:smooth}
body{
  background-color:var(--bg-page);
  color:var(--text-main);
  font-family:'Segoe UI',Tahoma,Geneva,Verdana,sans-serif;
  display:flex; flex-direction:column; min-height:100vh;
}
main.container{flex:1}
.container{padding-top:2rem; padding-bottom:2rem}

/* =========================
   NAVBAR – wersja slim
   ========================= */

.navbar.sticky-top{
  background-color:var(--nav-bg) !important;
  box-shadow:var(--shadow-soft);
}

/* brand */
.navbar.navbar-dark .navbar-brand{
  font-weight:500; line-height:1;
  padding-top:.6rem; padding-bottom:.6rem;
}
.navbar.navbar-dark .navbar-brand img{height:22px; width:auto}

/* linki – mobile first (czytelne) */
.navbar.navbar-dark .navbar-nav .nav-link{
  color:var(--nav-link);
  transition:color .2s ease, opacity .2s ease;
  padding:.8rem 1rem;
}
.navbar.navbar-dark .navbar-nav .nav-link:hover,
.navbar.navbar-dark .navbar-nav .nav-link:focus{
  color:var(--nav-link-hover); opacity:.95;
}
.navbar.navbar-dark .navbar-nav .nav-item.active .nav-link{
  color:var(--nav-link-hover); font-weight:500;
}

/* dropdown – ciemny */
.navbar.navbar-dark .dropdown-menu{
  background-color:var(--nav-bg);
  border:none; border-radius:.25rem;
  box-shadow:0 .5rem 1rem rgba(0,0,0,.175);
  padding:.25rem 0;
}
.navbar.navbar-dark .dropdown-item{
  color:var(--nav-link);
  padding:.4rem .9rem;
  transition:background-color .2s,color .2s;
}
.navbar.navbar-dark .dropdown-item:hover,
.navbar.navbar-dark .dropdown-item:focus{
  background-color:var(--brand); color:#fff;
}
.navbar.navbar-dark .dropdown-divider{border-top:1px solid #495057}

/* 🔻 Desktop: realnie chudy pasek (~48–52px) i wyższa specyficzność + !important */
@media (min-width:992px){
  .navbar.navbar-dark{
    --nav-h:48px;
    padding-top:0 !important; padding-bottom:0 !important;
    min-height:var(--nav-h) !important;
  }
  .navbar.navbar-dark .container,
  .navbar.navbar-dark .container-fluid{
    min-height:var(--nav-h) !important;
    display:flex; align-items:center;
  }
  .navbar.navbar-dark .navbar-brand{
    padding-top:.15rem !important; padding-bottom:.15rem !important;
    margin-right:.75rem; font-size:1rem !important;
  }
  .navbar.navbar-dark .navbar-nav .nav-link{
    padding:.2rem .6rem !important;           /* minimalne góra/dół */
    line-height:1.2 !important;
    font-size:.9rem !important;
  }
  .navbar.navbar-dark .navbar-toggler{padding:.15rem .5rem}
}

/* =========================
   HERO
   ========================= */

.hero-section{
  position:relative; color:#fff;
  background:var(--hero-bg) no-repeat center 38%/cover;
  min-height:50vh; padding:64px 0;
  display:flex; align-items:center; text-align:center;
  margin-bottom:50px;
}
.hero-section::before{
  content:""; position:absolute; inset:0;
  
}
.hero-section .container{position:relative; z-index:2}
.hero-section h1,.hero-section p{ text-shadow:0 2px 4px rgba(0,0,0,.6) }
.hero-section h1{ font-size:clamp(2rem,4.2vw,3.5rem); margin-bottom:20px; font-weight:700 }
.hero-section p{ font-size:clamp(1rem,1.4vw,1.2rem); margin-bottom:28px }

@media (max-width:575.98px){
  .hero-section{ min-height:46vh; padding:48px 0; background-position:center 30% }
}

/* Preferencje dostępności */
@media (prefers-reduced-motion:reduce){
  .navbar.navbar-dark .navbar-nav .nav-link{transition:none}
}

/* =========================
   Karty funkcji (opcjonalnie)
   ========================= */
.feature-card{
  background:#fff; border-radius:8px; box-shadow:var(--shadow-card);
  padding:30px; margin-bottom:30px; text-align:center;
}
.feature-card h3{ color:var(--brand); margin-bottom:15px }

/* =========================
   Footer
   ========================= */
.footer{
  background-color:var(--nav-bg); color:#fff; padding:20px 0; font-size:.9rem;
}