/**
 * PhysioFIT Modern Professional - Design System
 * ==============================================
 * Component styles that extend theme.json capabilities
 */

/* ==========================================================================
   CSS Custom Properties (fallbacks for non-theme.json contexts)
   ========================================================================== */

:root {
  /* Colors */
  --pf-coral: #f29d7e;
  --pf-coral-dark: #e8735a;
  --pf-navy: #1a1a2e;
  --pf-slate: #16213e;
  --pf-cream: #faf9f7;
  --pf-charcoal: #2d2d2d;
  --pf-gray-600: #666666;
  --pf-white: #ffffff;

  /* Typography */
  --pf-font-display: 'Outfit', sans-serif;
  --pf-font-body: 'Plus Jakarta Sans', sans-serif;

  /* Spacing */
  --pf-space-xs: 8px;
  --pf-space-sm: 16px;
  --pf-space-md: 24px;
  --pf-space-lg: 32px;
  --pf-space-xl: 48px;
  --pf-space-2xl: 64px;
  --pf-space-3xl: 80px;

  /* Border Radius */
  --pf-radius-sm: 8px;
  --pf-radius-md: 12px;
  --pf-radius-lg: 16px;
  --pf-radius-xl: 24px;

  /* Shadows */
  --pf-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
  --pf-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.06);
  --pf-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.08);
  --pf-shadow-coral: 0 4px 24px rgba(242, 157, 126, 0.35);

  /* Transitions */
  --pf-transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  --pf-transition-fast: all 0.15s ease;
}

/* ==========================================================================
   Header Enhancements
   ========================================================================== */

.pf-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
  transition: var(--pf-transition);
}

.pf-header.scrolled {
  box-shadow: var(--pf-shadow-md);
}

/* ==========================================================================
   Footer Enhancements
   ========================================================================== */

.pf-footer {
  position: relative;
}

.pf-footer::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pf-coral), var(--pf-coral-dark), var(--pf-coral));
}

/* ==========================================================================
   Card Component Styles
   ========================================================================== */

.pf-card {
  transition: var(--pf-transition);
}

.pf-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--pf-shadow-lg);
}

/* Service card variant */
.pf-service-card {
  position: relative;
  overflow: hidden;
}

.pf-service-card::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--pf-coral), var(--pf-coral-dark));
  transition: width 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.pf-service-card:hover::after {
  width: 100%;
}

/* Team card variant */
.pf-team-card {
  text-align: center;
}

.pf-team-card img {
  border-radius: var(--pf-radius-xl);
  transition: var(--pf-transition);
}

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

/* ==========================================================================
   Button Enhancements
   ========================================================================== */

/* Animated arrow on buttons */
.pf-btn-arrow::after {
  content: '→';
  margin-left: 8px;
  transition: transform 0.3s ease;
}

.pf-btn-arrow:hover::after {
  transform: translateX(4px);
}

/* Coral glow effect */
.pf-btn-glow {
  position: relative;
}

.pf-btn-glow::before {
  content: '';
  position: absolute;
  inset: -2px;
  background: linear-gradient(135deg, var(--pf-coral), var(--pf-coral-dark));
  border-radius: inherit;
  opacity: 0;
  filter: blur(12px);
  transition: opacity 0.3s ease;
  z-index: -1;
}

.pf-btn-glow:hover::before {
  opacity: 0.5;
}

/* ==========================================================================
   Section Styles
   ========================================================================== */

/* Dark section with gradient */
.pf-section-dark {
  background: linear-gradient(180deg, var(--pf-navy) 0%, var(--pf-slate) 100%);
  color: var(--pf-white);
}

/* Light section */
.pf-section-light {
  background: var(--pf-cream);
}

/* Section with subtle pattern */
.pf-section-pattern {
  position: relative;
}

.pf-section-pattern::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}

/* ==========================================================================
   Label/Badge Styles
   ========================================================================== */

.pf-label {
  display: inline-block;
  font-family: var(--pf-font-body);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--pf-coral);
}

.pf-label-dark {
  color: var(--pf-coral);
  background: rgba(242, 157, 126, 0.1);
  padding: 6px 12px;
  border-radius: 4px;
}

/* ==========================================================================
   Stats/Numbers Display
   ========================================================================== */

.pf-stat {
  font-family: var(--pf-font-display);
  font-weight: 800;
  line-height: 1;
  color: var(--pf-coral);
}

.pf-stat-large {
  font-size: clamp(3rem, 8vw, 5rem);
}

/* ==========================================================================
   Testimonial Styles
   ========================================================================== */

.pf-testimonial {
  position: relative;
  padding: var(--pf-space-lg);
  background: var(--pf-white);
  border-radius: var(--pf-radius-xl);
  box-shadow: var(--pf-shadow-md);
}

.pf-testimonial::before {
  content: '"';
  position: absolute;
  top: var(--pf-space-md);
  left: var(--pf-space-md);
  font-family: var(--pf-font-display);
  font-size: 4rem;
  line-height: 1;
  color: var(--pf-coral);
  opacity: 0.2;
}

/* ==========================================================================
   Form Styles
   ========================================================================== */

.pf-input {
  width: 100%;
  padding: 14px 18px;
  font-family: var(--pf-font-body);
  font-size: 1rem;
  color: var(--pf-charcoal);
  background: var(--pf-white);
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: var(--pf-radius-md);
  transition: var(--pf-transition-fast);
}

.pf-input:focus {
  outline: none;
  border-color: var(--pf-coral);
  box-shadow: 0 0 0 3px rgba(242, 157, 126, 0.15);
}

.pf-input::placeholder {
  color: var(--pf-gray-600);
}

/* ==========================================================================
   Image Styles
   ========================================================================== */

.pf-img-rounded {
  border-radius: var(--pf-radius-xl);
}

.pf-img-hover-zoom {
  overflow: hidden;
  border-radius: var(--pf-radius-xl);
}

.pf-img-hover-zoom img {
  transition: transform 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.pf-img-hover-zoom:hover img {
  transform: scale(1.08);
}

/* ==========================================================================
   Animation Classes
   ========================================================================== */

/* Fade in up */
.pf-animate-fade-up {
  opacity: 0;
  transform: translateY(20px);
  animation: pfFadeUp 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

@keyframes pfFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Stagger children */
.pf-stagger > *:nth-child(1) { animation-delay: 0s; }
.pf-stagger > *:nth-child(2) { animation-delay: 0.1s; }
.pf-stagger > *:nth-child(3) { animation-delay: 0.2s; }
.pf-stagger > *:nth-child(4) { animation-delay: 0.3s; }
.pf-stagger > *:nth-child(5) { animation-delay: 0.4s; }
.pf-stagger > *:nth-child(6) { animation-delay: 0.5s; }

/* Shimmer effect for text */
.pf-shimmer {
  background: linear-gradient(
    90deg,
    var(--pf-coral) 0%,
    var(--pf-coral-dark) 50%,
    var(--pf-coral) 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: pfShimmer 3s linear infinite;
}

@keyframes pfShimmer {
  to {
    background-position: 200% center;
  }
}

/* ==========================================================================
   Utility Classes
   ========================================================================== */

/* Text colors */
.pf-text-coral { color: var(--pf-coral); }
.pf-text-navy { color: var(--pf-navy); }
.pf-text-charcoal { color: var(--pf-charcoal); }
.pf-text-gray { color: var(--pf-gray-600); }
.pf-text-white { color: var(--pf-white); }

/* Background colors */
.pf-bg-coral { background-color: var(--pf-coral); }
.pf-bg-navy { background-color: var(--pf-navy); }
.pf-bg-cream { background-color: var(--pf-cream); }
.pf-bg-white { background-color: var(--pf-white); }

/* Gradients */
.pf-gradient-coral {
  background: linear-gradient(135deg, var(--pf-coral), var(--pf-coral-dark));
}

.pf-gradient-navy {
  background: linear-gradient(180deg, var(--pf-navy), var(--pf-slate));
}

/* Spacing */
.pf-mt-section { margin-top: var(--pf-space-3xl); }
.pf-mb-section { margin-bottom: var(--pf-space-3xl); }
.pf-py-section { padding-top: var(--pf-space-3xl); padding-bottom: var(--pf-space-3xl); }

/* ==========================================================================
   Decorative Elements
   ========================================================================== */

/* Large decorative quote for testimonial sections */
.has-cream-background-color.alignfull::before {
  content: '"';
  position: absolute;
  top: 40px;
  left: 5%;
  font-family: Georgia, serif;
  font-size: clamp(200px, 25vw, 400px);
  line-height: 1;
  color: rgba(242, 157, 126, 0.06);
  pointer-events: none;
  z-index: 0;
}

/* Gradient line accent for section headers */
.wp-block-heading + .wp-block-separator {
  width: 80px !important;
  height: 4px !important;
  background: linear-gradient(90deg, var(--pf-coral), var(--pf-coral-dark)) !important;
  border: none !important;
  border-radius: 2px;
  margin-top: var(--pf-space-sm) !important;
}

/* ==========================================================================
   Enhanced Link Styles
   ========================================================================== */

/* Arrow links */
.wp-block-group a[href*="→"],
a[href]:has(+ span:contains("→")) {
  display: inline-flex;
  align-items: center;
}

/* Links get underline animation */
.wp-block-group p a:not(.wp-block-button__link) {
  text-decoration: none;
  background-image: linear-gradient(var(--pf-coral), var(--pf-coral));
  background-size: 0% 2px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size 0.3s ease, color 0.3s ease;
}

.wp-block-group p a:not(.wp-block-button__link):hover {
  background-size: 100% 2px;
}

/* ==========================================================================
   Star Rating Styles
   ========================================================================== */

/* Yellow stars for ratings */
.has-coral-color.has-text-color[style*="letter-spacing: 0.1em"] {
  color: #facc15 !important;
  text-shadow: 0 2px 8px rgba(250, 204, 21, 0.3);
}

/* ==========================================================================
   Dark Section Enhancements
   ========================================================================== */

/* Navy gradient sections get subtle grid pattern */
.has-navy-gradient-gradient-background::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 80%, rgba(242, 157, 126, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(242, 157, 126, 0.02) 0%, transparent 40%);
  pointer-events: none;
  z-index: 0;
}

.has-navy-gradient-gradient-background > * {
  position: relative;
  z-index: 1;
}

/* ==========================================================================
   Quote and Testimonial Enhancements
   ========================================================================== */

/* Quote blocks get enhanced styling */
.wp-block-quote {
  position: relative;
}

.wp-block-quote::before {
  content: '"';
  position: absolute;
  top: -20px;
  left: -10px;
  font-family: Georgia, serif;
  font-size: 5rem;
  line-height: 1;
  color: var(--pf-coral);
  opacity: 0.15;
}

/* Testimonial cards - the white cards in testimonial sections */
.has-cream-background-color .has-white-background-color.wp-block-group {
  border-left: 4px solid transparent;
  transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.has-cream-background-color .has-white-background-color.wp-block-group:hover {
  border-left-color: var(--pf-coral);
}

/* ==========================================================================
   Gallery Enhancements
   ========================================================================== */

/* Gallery images get grayscale to color effect */
.wp-block-gallery.alignfull img {
  filter: grayscale(30%);
  transition: filter 0.5s ease, transform 0.5s ease;
}

.wp-block-gallery.alignfull figure:hover img {
  filter: grayscale(0%);
  transform: scale(1.05);
}

/* ==========================================================================
   Cover Block Enhancements
   ========================================================================== */

/* Cover blocks get enhanced overlay transitions */
.wp-block-cover .wp-block-cover__background {
  transition: opacity 0.4s ease;
}

.wp-block-cover:hover .wp-block-cover__background {
  opacity: 0.7 !important;
}

/* Cover block content gets subtle lift on hover */
.wp-block-cover__inner-container {
  transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

.wp-block-cover:hover .wp-block-cover__inner-container {
  transform: translateY(-4px);
}

/* ==========================================================================
   Emoji Icons Enhancement
   ========================================================================== */

/* Emoji-as-icons get subtle animation */
p[style*="font-size: 2.5rem"],
p[style*="font-size:2.5rem"],
p[style*="font-size: 3rem"],
p[style*="font-size:3rem"] {
  display: inline-block;
  transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

.wp-block-group:hover p[style*="font-size: 2.5rem"],
.wp-block-group:hover p[style*="font-size:2.5rem"],
.wp-block-group:hover p[style*="font-size: 3rem"],
.wp-block-group:hover p[style*="font-size:3rem"] {
  transform: scale(1.15) rotate(-5deg);
}

/* ==========================================================================
   Scroll-Triggered Animations (via Intersection Observer in JS)
   ========================================================================== */

/* Elements animate in when visible */
.wp-block-column {
  opacity: 0;
  transform: translateY(30px);
  animation: pfSlideIn 0.6s cubic-bezier(0.23, 1, 0.32, 1) forwards;
}

.wp-block-column:nth-child(1) { animation-delay: 0s; }
.wp-block-column:nth-child(2) { animation-delay: 0.1s; }
.wp-block-column:nth-child(3) { animation-delay: 0.2s; }
.wp-block-column:nth-child(4) { animation-delay: 0.3s; }

@keyframes pfSlideIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   Responsive Adjustments
   ========================================================================== */

@media (max-width: 782px) {
  :root {
    --pf-space-3xl: 60px;
  }

  .pf-card:hover {
    transform: translateY(-4px);
  }

  /* Reduce animation intensity on mobile */
  .wp-block-group[style*="border-radius"]:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 600px) {
  :root {
    --pf-space-3xl: 48px;
  }

  /* Disable hover transforms on touch devices */
  @media (hover: none) {
    .wp-block-group[style*="border-radius"]:hover,
    .wp-block-cover:hover {
      transform: none;
    }
  }
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
  .pf-header,
  .pf-footer,
  .wp-block-button {
    display: none;
  }

  .wp-block-cover {
    background: none !important;
    color: #000 !important;
  }
}