/*
 * =====================================================
 *  FIZJOTERAPIA NAMYSŁÓW — CUSTOM CSS
 *  Child Theme: fizjoterapia-child | kingsit.eu
 * =====================================================
 *
 *  1. Zmienne CSS projektu (:root)
 *  2. Klasy pomocnicze (utilities)
 *  3. Komponenty
 *  4. Responsywność
 *
 * =====================================================
 */

/* ─────────────────────────────────────────────────────
   1. ZMIENNE CSS PROJEKTU
   Spójne z Elementor Site Settings → Colors & Typography
   ───────────────────────────────────────────────────── */

:root {
  /* Kolory — pokrywają się z Elementor Kit */
  --fizjo-cream: #f9f7f5; /* Primary   — tekst na ciemnym tle        */
  --fizjo-charcoal: #1c1c1e; /* Secondary — nagłówki kart, nav dropdown  */
  --fizjo-dark: #3d3d3d; /* Text      — tło ciemnych sekcji         */
  --fizjo-navy: #113d9f; /* Accent    — CTA, linki, akcenty         */

  /* Kolory dodatkowe (nie w Elementor Kit) */
  --fizjo-green: #61ce70; /* Hover nav                               */
  --fizjo-orange: #ffbc7d; /* Page transition                         */

  /* Typografia */
  --fizjo-font-head: "Marcellus", serif;
  --fizjo-font-body: "Montserrat", sans-serif;
}

/* ─────────────────────────────────────────────────────
   2. KLASY POMOCNICZE
   Użycie: Widget → Advanced → CSS Classes w Elementorze
   ───────────────────────────────────────────────────── */

/* Kolory tekstu */
.text-cream {
  color: var(--fizjo-cream) !important;
}
.text-navy {
  color: var(--fizjo-navy) !important;
}
.text-muted {
  color: #9e9e9e !important;
}

/* Tła */
.bg-dark {
  background-color: var(--fizjo-dark) !important;
}
.bg-navy {
  background-color: var(--fizjo-navy) !important;
}
.bg-cream {
  background-color: var(--fizjo-cream) !important;
}

/* Typografia */
.font-marcellus {
  font-family: var(--fizjo-font-head) !important;
}
.uppercase {
  text-transform: uppercase !important;
}
.letter-wide {
  letter-spacing: 1.8px !important;
}

/* Wyświetlanie */
.hidden-mobile {
}
.hidden-desktop {
}

/* ─────────────────────────────────────────────────────
   3. KOMPONENTY
   ───────────────────────────────────────────────────── */

/* Ozdobna linia (np. pod nagłówkiem sekcji) */
.fizjo-divider {
  width: 60px;
  height: 3px;
  background: var(--fizjo-navy);
  border: none;
  border-radius: 2px;
  margin: 16px 0;
}
.fizjo-divider.centered {
  margin-left: auto;
  margin-right: auto;
}

/* Karta usługi z efektem hover */
.fizjo-card {
  background: #ffffff;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
  transition:
    box-shadow 0.3s ease,
    transform 0.3s ease;
}
.fizjo-card:hover {
  box-shadow: 0 8px 32px rgba(17, 61, 159, 0.14);
  transform: translateY(-4px);
}

/* Przycisk navy (alternatywa dla Elementor Button) */
.fizjo-btn {
  display: inline-block;
  font-family: var(--fizjo-font-head);
  font-size: 15px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fizjo-cream);
  background: var(--fizjo-navy);
  padding: 13px 34px;
  border-radius: 3px;
  text-decoration: none;
  transition: background 0.25s ease;
}
.fizjo-btn:hover {
  background: #0d2f7a;
  color: var(--fizjo-cream);
}

/* Lista z checkmarkami (np. sekcja O nas) */
.fizjo-checklist {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fizjo-checklist li {
  position: relative;
  padding-left: 26px;
  margin-bottom: 10px;
  font-family: var(--fizjo-font-body);
  font-size: 16px;
  color: var(--fizjo-charcoal);
  line-height: 1.65;
}
.fizjo-checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--fizjo-navy);
  font-weight: 700;
}

/* ─────────────────────────────────────────────────────
   4. RESPONSYWNOŚĆ
   ───────────────────────────────────────────────────── */

@media (min-width: 1025px) {
  .hidden-desktop {
    display: none !important;
  }
}

@media (max-width: 767px) {
  .hidden-mobile {
    display: none !important;
  }

  .fizjo-card {
    padding: 24px 18px;
  }
  .fizjo-btn {
    display: block;
    width: 100%;
    text-align: center;
  }
}

footer p {
  margin-block-end: 0.6rem;
}

.elementor a {
  color: var(--fizjo-navy);
}

.sub-menu.elementor-nav-menu--dropdown .menu-item a {
  font-size: 16px;
}

/* ─────────────────────────────────────────────────────
   5. HOVER ANIMACJE
   Dodaj klasę w Elementorze: Advanced → CSS Classes
   ───────────────────────────────────────────────────── */

/* --- A) fizjo-hover-card ---
   Karta usługi z obrazkiem i nagłówkiem (strona główna)
   Użycie: CSS Classes → fizjo-hover-card na kontenerze
   ----------------------------------------------------- */
.fizjo-hover-card {
  border-radius: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
}
.fizjo-hover-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(17, 61, 159, 0.14);
}
.fizjo-hover-card .elementor-widget-image {
  overflow: hidden;
  border-radius: 4px;
}
.fizjo-hover-card .elementor-widget-image img {
  display: block;
  width: 100%;
  transition: transform 0.5s ease;
}
.fizjo-hover-card:hover .elementor-widget-image img {
  transform: scale(1.08);
}
.fizjo-hover-card .elementor-heading-title a {
  transition: color 0.3s ease;
}
.fizjo-hover-card:hover .elementor-heading-title a {
  color: var(--fizjo-navy) !important;
}

/* --- B) fizjo-hover-btn ---
   Przycisk z efektem shimmer i uniesieniem
   Użycie: CSS Classes → fizjo-hover-btn na widgecie Button
   --------------------------------------------------------- */
.fizjo-hover-btn .elementor-button {
  position: relative;
  overflow: hidden;
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease !important;
  will-change: transform;
}
.fizjo-hover-btn .elementor-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-101%);
  transition: transform 0.35s ease;
  pointer-events: none;
}
.fizjo-hover-btn .elementor-button:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 24px rgba(17, 61, 159, 0.28) !important;
}
.fizjo-hover-btn .elementor-button:hover::after {
  transform: translateX(0);
}

/* --- C) fizjo-hover-photo ---
   Kontener z tłem zdjęciowym — subtelny zoom + delikatny overlay
   Użycie: CSS Classes → fizjo-hover-photo na kontenerze ze zdjęciem tła
   ----------------------------------------------------------------------- */
.fizjo-hover-photo {
  position: relative;
  overflow: hidden;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.fizjo-hover-photo:hover {
  transform: scale(1.02);
}
.fizjo-hover-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(17, 61, 159, 0.12);
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.fizjo-hover-photo:hover::after {
  opacity: 1;
}

/* --- D) fizjo-hover-offer ---
   Karta oferty (link z numerem, tytułem i "Zobacz więcej")
   Użycie: CSS Classes → fizjo-hover-offer na kontenerze-linku
   ------------------------------------------------------------ */
.fizjo-hover-offer {
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
  text-decoration: none !important;
}
.fizjo-hover-offer:hover {
  transform: translateY(-5px);
  box-shadow: 0 14px 40px rgba(17, 61, 159, 0.18);
}
.fizjo-hover-offer .fizjo-offer-number {
  transition: color 0.3s ease;
}
.fizjo-hover-offer:hover .fizjo-offer-number {
  color: var(--fizjo-navy) !important;
}
.fizjo-hover-offer .fizjo-offer-link {
  display: inline-block;
  position: relative;
}
.fizjo-hover-offer .fizjo-offer-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.35s ease;
}
.fizjo-hover-offer:hover .fizjo-offer-link::after {
  width: 100%;
}