/*
 * ═══════════════════════════════════════════════════════
 *  The Clinical Atelier / Inflancka 4 Dr Bojko
 *  Global Stylesheet — zgodny z DESIGN.md
 *  Wszystkie klasy pomocnicze używane na stronach projektu
 * ═══════════════════════════════════════════════════════
 */

/* ─────────────────────────────────────
   1. IKONY — ultra-thin stroke (DESIGN.md §6)
   FILL 0 = tylko kontur; FILL 1 = wypełnione (tylko stan aktywny)
───────────────────────────────────── */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' 0, 'opsz' 24;
}
.icon-filled {
  font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

/* ─────────────────────────────────────
   2. NAWIGACJA — Glassmorphism (DESIGN.md §2 Glass & Gradient Rule)
   surface-variant (#d4e2d6) @ 72% opacity + backdrop-blur 18px
───────────────────────────────────── */
.glass-nav {
  background: rgba(251, 249, 248, 0.82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(188, 199, 190, 0.12);
}

/* ─────────────────────────────────────
   3. DROPDOWN NAWIGACYJNY
   padding-top zamiast gap — hover area jest ciągła,
   menu nie znika przy przejściu kursora z przycisku na listę
───────────────────────────────────── */
.nav-dropdown {
  position: relative;
}

.nav-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  min-width: 240px;
  /* Niewidoczny mostek 12px — kursor nie traci hover'a */
  padding-top: 12px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown-inner {
  background: rgba(255, 255, 255, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-radius: 1rem;
  padding: 0.5rem;
  box-shadow: 0 20px 60px -10px rgba(26, 24, 21, 0.12);
  border: 1px solid rgba(188, 199, 190, 0.20);
}

.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.875rem;
  border-radius: 0.625rem;
  font-size: 0.8125rem;
  font-weight: 500;
  color: #3e4b40;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.nav-dropdown-item:hover  { background-color: #f5f3f1; color: #052414; }
.nav-dropdown-item.active { background-color: #edf4ef; color: #052414; font-weight: 700; }

.nav-dropdown-divider {
  height: 1px;
  background: rgba(188, 199, 190, 0.25);
  margin: 0.25rem 0.5rem;
}

/* ─────────────────────────────────────
   4. PRZYCISKI
   Primary: 135° forest gradient (DESIGN.md §2 Signature Gradients)
───────────────────────────────────── */
.btn-forest {
  background: linear-gradient(135deg, #052414 0%, #1c3a28 100%);
}
.btn-forest:hover {
  background: linear-gradient(135deg, #0b3d22 0%, #254d34 100%);
}

/* ─────────────────────────────────────
   5. CIENIE — Ambient Shadow (DESIGN.md §4)
   blur 60px, spread -10px, opacity 7% — miękkie światło otoczenia
   Używać WYŁĄCZNIE dla elementów floating (karty, modale)
───────────────────────────────────── */
.shadow-ambient {
  box-shadow: 0 20px 60px -10px rgba(26, 24, 21, 0.07);
}

/* ─────────────────────────────────────
   6. KARTY — Tonal hover (DESIGN.md §5 Cards)
   Zmiana tła zamiast drop-shadow przy hover
───────────────────────────────────── */
.card-lift {
  transition: background-color 0.35s ease;
}
.card-lift:hover {
  background-color: #e7e5e3; /* surface-container-high */
}

/* ─────────────────────────────────────
   7. GHOST BORDER — fallback dostępnościowy (DESIGN.md §4)
   outline-variant @ 15% — nigdy pełny kolor
───────────────────────────────────── */
.ghost-border {
  border: 1px solid rgba(188, 199, 190, 0.15);
}

/* ─────────────────────────────────────
   8. SCROLL REVEAL
───────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.8s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-d1 { transition-delay: 0.10s; }
.reveal-d2 { transition-delay: 0.20s; }
.reveal-d3 { transition-delay: 0.30s; }

/* ─────────────────────────────────────
   9. ANIMACJE FLOAT — floating cards w hero
───────────────────────────────────── */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-9px); }
}
.anim-float  { animation: float 5s ease-in-out infinite; }
.anim-float2 { animation: float 5s ease-in-out 2s infinite; }

/* ─────────────────────────────────────
   10. TŁO HERO — index.html
───────────────────────────────────── */
.hero-bg {
  background:
    radial-gradient(ellipse at 74% 36%, rgba(174, 214, 184, 0.20) 0%, transparent 58%),
    radial-gradient(ellipse at 14% 82%, rgba(240, 224, 128, 0.09) 0%, transparent 50%);
}

/* ─────────────────────────────────────
   11. FAQ — accordion chevron
───────────────────────────────────── */
details > summary                   { list-style: none; }
details > summary::-webkit-details-marker { display: none; }

.faq-chevron                { transition: transform 0.32s ease; }
details[open] .faq-chevron  { transform: rotate(180deg); }

/* ─────────────────────────────────────
   12. TIMELINE — oneday-concept (mobilna linia pionowa)
───────────────────────────────────── */
.step-line::before {
  content: '';
  position: absolute;
  top: 3.5rem;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 2.5rem);
  background: linear-gradient(to bottom, #052414 0%, rgba(5, 36, 20, 0.08) 100%);
}
@media (min-width: 768px) {
  .step-line::before { display: none; }
}

/* ─────────────────────────────────────
   13. STICKY CTA BAR — oneday-concept
   Pojawia się po 400px scrollu (obsługiwane w JS)
───────────────────────────────────── */
.sticky-bar {
  transform: translateY(100%);
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.sticky-bar.visible {
  transform: translateY(0);
}

/* ─────────────────────────────────────
   14. PARAGRAPH COMPOSITION
   Trzy poziomy hierarchii:
   · .p-lead   — bezpośrednio pod H1/H2: Inter 300 light, duże leading, lekki tracking
   · p (default)— treść body: Inter 400, leading 1.78 (luxurious, nie cramped)
   · .p-small  — drobny support text: Inter 400, leading 1.72, text-sm
   Reguła: im bliżej headline, tym lighter weight i większy font-size.
───────────────────────────────────── */

/* Global: generous leading dla wszystkich paragrafów */
p { line-height: 1.78; }

/* Lead — most typograficzny między Cormorant a body
   DM Sans 300 light + duże leading = "oddech" po ciężkim szeryfie */
.p-lead {
  font-family: "DM Sans", sans-serif;
  font-weight: 300;
  font-optical-sizing: auto;
  font-size: clamp(1.0625rem, 1.35vw, 1.25rem);
  line-height: 1.88;
  letter-spacing: 0.01em;
  color: #1a1815;
}

/* Intro — opisy sekcji pod H2 */
.p-intro {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: clamp(1rem, 1.1vw, 1.125rem);
  line-height: 1.82;
  letter-spacing: 0.005em;
  color: #3e4b40;
}

/* Support — body text w kartach, listach */
.p-support {
  font-family: "DM Sans", sans-serif;
  font-weight: 400;
  font-optical-sizing: auto;
  font-size: 0.9375rem;
  line-height: 1.72;
  letter-spacing: 0.003em;
  color: #3e4b40;
}

/* ─────────────────────────────────────
   15. HAMBURGER MENU — mobile
───────────────────────────────────── */
.hamburger-line {
  transform-origin: center;
  transition: transform 0.3s ease, opacity 0.3s ease;
}
#hamburger[aria-expanded="true"] .hamburger-line:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}
#hamburger[aria-expanded="true"] .hamburger-line:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
#hamburger[aria-expanded="true"] .hamburger-line:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

#mobile-panel {
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
#mobile-backdrop {
  transition: opacity 0.3s ease;
}

/* ─────────────────────────────────────
   16. TYPOGRAFIA — Cormorant elegance
   Cormorant to krój używany przez Hermès, Vogue i premium medical brands.
   Najlepiej wygląda na 500–600 (nie extrabold). Italic jest niezrównany.
   h1 / h2 .font-headline: override Tailwind font-extrabold → semibold
   Specificity 0,1,1 > Tailwind 0,1,0 — wygrywa ten plik (ładowany po CDN)
───────────────────────────────────── */
.font-headline {
  font-optical-sizing: auto;
}
h1.font-headline {
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.06;
}
h2.font-headline {
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
h3.font-headline {
  font-weight: 600;
  letter-spacing: -0.01em;
}
/* Italic akcent (np. "Wzniesiony") — serce Cormorant */
.font-headline em,
.font-headline .italic {
  font-style: italic;
  font-weight: 500;
}