/* ==========================================================================
   KALIX - Styl dedykowany i mikro-animacje
   Wywóz gruzu i odpadów Częstochowa
   ========================================================================== */

/* Płynne przewijanie do sekcji kotwic */
html {
  scroll-behavior: smooth;
  scroll-padding-top: 8rem; /* Uwzględnienie wysokości paska nawigacji (h-32) */
}

/* Reset i zachowanie przewijania */
body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Dyskretny pasek przewijania */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #f3f3f4;
}

::-webkit-scrollbar-thumb {
  background: #c8c6c6;
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: #8c716d;
}

/* --------------------------------------------------------------------------
   Animacje pojawiania się sekcji (Fade-In & Slide-Up via Intersection Observer)
   -------------------------------------------------------------------------- */
.fade-in-element {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), 
              transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Opóźnienia dla sekwencyjnego pojawiania się kafelków */
.fade-delay-100 { transition-delay: 100ms; }
.fade-delay-200 { transition-delay: 200ms; }
.fade-delay-300 { transition-delay: 300ms; }
.fade-delay-400 { transition-delay: 400ms; }

/* --------------------------------------------------------------------------
   Nawigacja i Menu Mobilne
   -------------------------------------------------------------------------- */
/* Efekt podświetlenia aktywnego linku w nawigacji */
.nav-link {
  position: relative;
  transition: color 0.2s ease-in-out;
}

.nav-link.active {
  color: #8C1D18 !important;
  font-weight: 700 !important;
  text-decoration: underline !important;
  text-underline-offset: 8px !important;
  text-decoration-thickness: 2px !important;
}

/* Mobilne menu boczne (Drawer) */
#mobile-menu {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), 
              opacity 0.3s ease-in-out;
}

#mobile-menu.menu-closed {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
}

#mobile-menu.menu-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* --------------------------------------------------------------------------
   Komponenty i Efekty Hover
   -------------------------------------------------------------------------- */
/* Delikatne unoszenie kart korzyści i oferty */
.card-hover-lift {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 25px -5px rgba(45, 45, 45, 0.1), 0 8px 10px -6px rgba(45, 45, 45, 0.05);
}

/* Wypełnienie gwiazdek Google (Material Symbols) */
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Dostępność: widoczny obrys przy nawigacji klawiaturą */
a:focus-visible, button:focus-visible {
  outline: 2px solid #8C1D18;
  outline-offset: 3px;
}