/*
 * Global styles for the Pracownia Mocnych Stron site — Minimalist 2025/2026
 * Clean, professional design with thin lines, no shading, warm colors
 */

/* ========================================
   Color Variables — Calm, Professional Therapy Palette 2025
   Updated: Warm colors - warm yellow accents with warm navy text
   ======================================== */
:root {
  /* ===== PRIMARY BACKGROUNDS ===== */
  /* Calm, milky cream - main background */
  --bg: #fbf7f0; /* Milky cream - very soft and calming */
  --bg-alt: #f5efe6; /* Slightly darker cream for contrast */

  /* ===== TEXT COLORS ===== */
  /* Warm navy blue instead of black - professional yet gentle */
  --fg: #2c4a5e; /* Warm navy - primary text (WCAG AA compliant) */
  --fg-secondary: #5d6b7a; /* Medium warm navy-gray - secondary text */
  --fg-muted: #7b8590; /* Muted warm blue-gray */

  /* ===== CARD HIGHLIGHTS - Warm Honey Tones ===== */
  --card-highlight: #fffbf0; /* Ultra soft honey cream - light base */
  --card-highlight-hover: #fff8e3; /* Warm honey cream on hover */

  /* ===== ACCENT COLORS - WARM HONEY PRIMARY ===== */
  /* Warm honey yellow - main accent for highlights, CTAs, and important elements */
  --accent: #f5b841; /* Rich warm honey - vibrant and inviting (WOW factor) */
  --accent-hover: #e6a532; /* Deep golden honey for hover states */
  --accent-light: #f8c866; /* Light golden honey yellow */

  /* Gradient accent colors for modern WOW effect */
  --accent-gradient-start: #f9c74f; /* Warm golden start */
  --accent-gradient-end: #f4a261; /* Warm amber end */

  /* Secondary warm accent - Warm amber for variety */
  --accent-sage: #d4a574;
  --accent-sage-hover: #c29563;

  /* Tertiary - Soft warm beige for balance */
  --accent-soft: #e8d5c4;

  /* ===== BORDERS ===== */
  --border: #e8e0d5; /* Soft warm border */
  --border-light: #f0ebe0; /* Very light warm border */

  /* ===== SURFACES ===== */
  --surface: #fffdfb; /* Off-white surface - slightly warm */

  /* ===== MOTION & TRANSITIONS ===== */
  /* Smooth, natural easing — no bounce, no shake */
  --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-gentle: cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-fast: 200ms;
  --transition-base: 350ms;
  --transition-slow: 500ms;
}

/* ========================================
   Reset & Base
   ======================================== */
html {
  scroll-behavior: auto; /* Lenis handles smooth scroll */
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Modern font stack — Josefin Sans for titles, Montserrat & Quicksand for content */
body,
button,
input,
textarea,
select {
  font-family:
    'Montserrat',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Main title uses Josefin Sans */
h1 {
  font-family:
    'Josefin Sans',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Other headings use Quicksand */
h2,
h3,
h4,
h5,
h6 {
  font-family:
    'Quicksand',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Paragraphs alternate: default is Montserrat (body), but some sections can use Quicksand */
p {
  font-family:
    'Montserrat',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* Use Quicksand for specific content areas */
.quicksand-text {
  font-family:
    'Quicksand',
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    Roboto,
    'Helvetica Neue',
    Arial,
    sans-serif;
}

/* ========================================
   Global Text Wrapping & Hyphenation Control (2025)
   Enhanced for Polish typography - no orphaned words
   ======================================== */

/* Modern text wrapping for better typography */
html {
  text-wrap: pretty;
}

/* Headings use balanced text wrapping for better visual appearance */
h1,
h2,
h3 {
  text-wrap: balance;
  line-height: 1.2;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 10 4 4; /* Only hyphenate long words */
}

h4,
h5,
h6 {
  text-wrap: balance;
  word-break: keep-all;
  overflow-wrap: normal;
  hyphens: none;
  -webkit-hyphens: none;
  -ms-hyphens: none;
}

/* Spans in headings should stay together - prevent orphaned letters */
h1 span,
h2 span,
h3 span {
  display: inline-block;
}

/* Default: no word breaks in the middle of words */
:where(p, li, h1, h2, h3, h4, h5, h6) {
  overflow-wrap: normal;
  word-break: normal;
}

/* Body text - controlled wrapping with auto hyphenation for very long words */
p,
li {
  text-wrap: pretty;
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  -ms-hyphens: auto;
  hyphenate-limit-chars: 10 4 4; /* Only hyphenate words longer than 10 chars */
}

/* ========================================
   Navigation — Professional glassmorphism with creative enhancements
   ======================================== */

/* Navigation header container */
.nav-header {
  transition: all var(--transition-base) var(--ease-smooth);
}

/* Main navigation container with enhanced glassmorphism */
.glass {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid rgba(232, 223, 212, 0.4);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.04),
    0 2px 8px rgba(0, 0, 0, 0.02);
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
  overflow: hidden;
}

/* Subtle gradient overlay on hover */
.glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(232, 168, 124, 0.03) 0%, rgba(168, 181, 160, 0.03) 100%);
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-smooth);
  pointer-events: none;
  z-index: -1;
}

.glass:hover::before {
  opacity: 1;
}

.glass:hover {
  background: rgba(255, 255, 255, 0.85);
  box-shadow:
    0 12px 48px rgba(0, 0, 0, 0.06),
    0 4px 16px rgba(0, 0, 0, 0.03);
  border-color: rgba(232, 168, 124, 0.3);
}

/* Logo container - ensure proper stacking */
.nav-logo {
  position: relative;
  z-index: 2;
  transition: transform var(--transition-base) var(--ease-smooth);
}

.nav-logo:hover {
  transform: translateY(-1px);
}

/* Logo icon with gradient and shadow */
.logo-icon {
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  box-shadow: 0 4px 12px rgba(245, 184, 65, 0.3);
  transition: all var(--transition-base) var(--ease-smooth);
  position: relative;
}

.logo-icon::after {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.3) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transition: opacity var(--transition-base) var(--ease-smooth);
  pointer-events: none;
}

.nav-logo:hover .logo-icon {
  box-shadow: 0 6px 16px rgba(245, 184, 65, 0.45);
  transform: rotate(5deg) scale(1.05);
}

.nav-logo:hover .logo-icon::after {
  opacity: 1;
}

/* Brand text styling */
.brand-text {
  font-family: 'Quicksand', sans-serif;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--accent);
  transition: color var(--transition-base) var(--ease-smooth);
}

.nav-logo:hover .brand-text {
  color: var(--accent-hover);
}

/* Navigation links container */
.nav-links {
  position: relative;
  z-index: 2;
}

/* Individual navigation links without underline effect */
.nav-link {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 0.5rem 0.25rem;
  color: var(--fg-secondary, #6b6b6b);
}

.nav-link:hover {
  color: var(--accent) !important;
}

/* CTA button in navigation */
.nav-cta {
  position: relative;
  z-index: 2;
  background: linear-gradient(135deg, var(--accent) 0%, var(--accent-hover) 100%) !important;
  box-shadow: 0 4px 16px rgba(245, 184, 65, 0.25);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  letter-spacing: 0.01em;
  overflow: hidden;
}

.nav-cta::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  transform: translate(-50%, -50%);
  transition:
    width var(--transition-base) var(--ease-smooth),
    height var(--transition-base) var(--ease-smooth);
}

.nav-cta:hover::before {
  width: 300px;
  height: 300px;
}

.nav-cta:hover {
  box-shadow: 0 6px 24px rgba(245, 184, 65, 0.35);
  transform: translateY(-2px);
}

/* Scrolled state - make navigation more compact and prominent */
.nav-header.scrolled .glass {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(20px) saturate(200%);
  -webkit-backdrop-filter: blur(20px) saturate(200%);
  box-shadow:
    0 4px 24px rgba(0, 0, 0, 0.08),
    0 2px 8px rgba(0, 0, 0, 0.04);
}

/* Mobile menu button */
#navBtn {
  font-family: 'Montserrat', sans-serif;
  transition: all var(--transition-base) var(--ease-smooth);
}

#navBtn:hover {
  background-color: var(--bg);
  border-color: var(--accent);
  color: var(--accent);
}

/* ========================================
   Buttons — Smooth, gentle hover
   ======================================== */
.shine {
  position: relative;
  transition: all var(--transition-base) var(--ease-smooth);
}

.shine:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(245, 184, 65, 0.22);
}

/* ========================================
   Progress Navigation — Smooth, subtle dots
   ======================================== */
#progressNav button {
  position: relative;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
  border: 2px solid var(--accent);
  background: transparent;
  cursor: pointer;
  transition: all var(--transition-base) var(--ease-smooth);
}

#progressNav button.active {
  background: var(--accent);
  transform: scale(1.3);
  border-width: 2px;
}

#progressNav button:hover {
  background: var(--accent-light);
  transform: scale(1.15);
  border-color: var(--accent-hover);
}

/* ========================================
   Utility: Hide scrollbars
   ======================================== */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* ========================================
   Utility: Scroll snap
   ======================================== */
.scroll-snap-x {
  scroll-snap-type: x mandatory;
}

.snap-center {
  scroll-snap-align: center;
}

/* ========================================
   Accessibility: Focus & Selection (Enhanced 2025)
   ======================================== */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 0.375rem;
  transition: outline-offset var(--transition-fast) var(--ease-smooth);
}

:focus-visible:hover {
  outline-offset: 4px;
}

::selection {
  background: var(--accent-light);
  color: var(--fg);
}

/* Icons - no pointer events */
.icon[aria-hidden='true'] {
  pointer-events: none;
}

/* ========================================
   Hero Image - Always Visible
   ======================================== */
#home img[src*='hero'] {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
  position: relative;
}

#home [data-aos] {
  opacity: 1;
}

#home [data-aos].aos-animate {
  opacity: 1;
}

/* ========================================
   Splide Carousel — Ensure Visibility
   ======================================== */
#services-carousel {
  opacity: 1 !important;
  visibility: visible !important;
}

#services-carousel .splide__track {
  overflow: visible;
}

#services-carousel .splide__list {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  justify-content: center;
  align-items: stretch;
}

#services-carousel .splide__slide {
  display: block;
  opacity: 1 !important;
  visibility: visible !important;
}

/* Splide Arrows — Clean circles */
.splide__arrow {
  background: var(--surface) !important;
  color: var(--accent) !important;
  border: 1px solid var(--border) !important;
  border-radius: 50% !important;
  width: 2.5rem !important;
  height: 2.5rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: border-color var(--transition-base) var(--ease-out) !important;
}

.splide__arrow:hover {
  border-color: var(--accent) !important;
  background: var(--surface) !important;
}

.splide__arrow svg {
  width: 1rem !important;
  height: 1rem !important;
}

.splide__arrow--prev {
  left: -2.5rem !important;
}

.splide__arrow--next {
  right: -2.5rem !important;
}

/* ========================================
   Fallback Mode — No JS
   ======================================== */
body[data-fallback='1'] .service-card-modern {
  opacity: 1 !important;
  transform: none !important;
}

body[data-fallback='1'] .service-card-modern .center-text-slide {
  opacity: 1 !important;
  transform: none !important;
  filter: none !important;
}

/* ========================================
   Section Animations
   ======================================== */
#services[data-animate] {
  opacity: 1;
}

/* ========================================
   Responsive Typography
   ======================================== */
@media (max-width: 768px) {
  html {
    font-size: 14px;
  }
}

/* ========================================
   About Section - Modern 2025 Enhancements with WOW Factor
   ======================================== */
.about-card-enhanced {
  transition: transform var(--transition-base) var(--ease-smooth);
  position: relative;
}

/* Subtle lift on hover for engagement */
.about-card-enhanced:hover {
  transform: translateY(-4px);
}

/* Smooth photo container interaction with scale */
.about-card-enhanced img {
  transition: transform var(--transition-slow) var(--ease-gentle);
}

.about-card-enhanced:hover img {
  transform: scale(1.05);
}

/* Enhanced name - no animation, just clean typography */
.about-card-enhanced .about-name {
  /* No gradient or animation - just solid color */
}

/* Smooth reveal animation for about section content */
.about-card-enhanced p {
  opacity: 0;
  animation: fadeInUp 0.8s ease-out forwards;
}

.about-card-enhanced p:nth-of-type(1) {
  animation-delay: 0.2s;
}

.about-card-enhanced p:nth-of-type(2) {
  animation-delay: 0.3s;
}

.about-card-enhanced p:nth-of-type(3) {
  animation-delay: 0.4s;
}

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Enhanced CTA button with pulse effect */
.about-card-enhanced a[href*='umow'] {
  position: relative;
  overflow: hidden;
}

.about-card-enhanced a[href*='umow']::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: translate(-50%, -50%);
  transition:
    width var(--transition-slow) var(--ease-gentle),
    height var(--transition-slow) var(--ease-gentle);
}

.about-card-enhanced a[href*='umow']:hover::before {
  width: 300px;
  height: 300px;
}

/* Photo glow effect enhancement */
.about-card-enhanced .relative > div:first-child {
  animation: gentleGlow 4s ease-in-out infinite;
}

@keyframes gentleGlow {
  0%,
  100% {
    opacity: 0.15;
    filter: blur(20px);
  }
  50% {
    opacity: 0.25;
    filter: blur(25px);
  }
}

/* Legacy about-card support (backward compatibility) */
.about-card {
  transition: transform var(--transition-base) var(--ease-smooth);
}

.about-card:hover {
  transform: translateY(-2px);
}

.about-card img {
  transition: transform var(--transition-slow) var(--ease-gentle);
}

.about-card:hover img {
  transform: scale(1.03);
}

/* ========================================
   Modern Button Micro-interactions (2025)
   ======================================== */
a[href='#contact'].inline-flex,
button.rounded-full {
  transition: all var(--transition-base) var(--ease-smooth);
}

a[href='#contact'].inline-flex:active {
  transform: translateY(1px) scale(0.98);
}

/* ========================================
   Smooth Scroll Behavior (Respecting Preferences)
   ======================================== */
html {
  scroll-padding-top: 100px; /* Account for fixed header */
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ========================================
   Enhanced Card Depth (Subtle Layering)
   ======================================== */
.glass,
.about-card,
[class*='card'] {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

/* ========================================
   Utility Classes for Special Cases
   ======================================== */

/* Class for long tokens (URLs, hashes) that need controlled breaking */
.break-long {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: none;
}

/* Prevent any breaking for specific elements */
.no-break {
  white-space: nowrap;
}

/* ========================================
   Fallback Support
   ======================================== */

/* Fallback for browsers without text-wrap support */
@supports not (text-wrap: pretty) {
  html {
    text-wrap: auto;
  }

  p {
    overflow-wrap: break-word;
    word-wrap: break-word;
  }

  /* Ensure headings maintain safe word-break even in fallback */
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    word-break: keep-all;
    overflow-wrap: normal;
  }
}

/* ========================================
   Hero Tagline - Enhanced Typography
   ======================================== */
.hero-tagline {
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.6;
}