@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
  --background: hsl(0, 0%, 100%);
  --foreground: hsl(222, 84%, 4.9%);
  --muted: hsl(210, 40%, 98%);
  --muted-foreground: hsl(215, 13.8%, 34.1%);
  --popover: hsl(0, 0%, 100%);
  --popover-foreground: hsl(222, 84%, 4.9%);
  --card: hsl(0, 0%, 100%);
  --card-foreground: hsl(222, 84%, 4.9%);
  --border: hsl(214, 32%, 91%);
  --input: hsl(214, 32%, 91%);
  /* BrandingBeez brand colors extracted from logo */
  --brand-coral: hsl(351, 83%, 61%);
  --brand-coral-dark: hsl(351, 83%, 51%);
  --brand-coral-darker: hsl(351, 83%, 41%); /* For better contrast on light backgrounds */
  --brand-coral-light: hsl(351, 83%, 71%);
  --brand-coral-custom: hsl(351, 83%, 41%); /* Darker coral for better contrast */
  --brand-purple: hsl(259, 60%, 25%);
  --brand-purple-light: hsl(259, 60%, 35%);
  --brand-yellow: hsl(51, 100%, 50%);
  --brand-yellow-dark: hsl(51, 100%, 40%);
  --brand-wings: hsl(340, 50%, 94%);
  
  /* Updated theme colors using BrandingBeez brand */
  --primary: hsl(351, 83%, 61%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(259, 60%, 25%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(51, 100%, 50%);
  --accent-foreground: hsl(259, 60%, 25%);
  --destructive: hsl(0, 84%, 60%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(351, 83%, 61%);
  --radius: 0.5rem;
}

/* Optimized font declaration with fallback to prevent layout shift */
* {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Consistent Button Styles */
.btn-primary {
  @apply bg-gradient-to-r from-brand-coral to-pink-500 text-white font-semibold px-6 py-3 rounded-lg shadow-lg;
}

.btn-secondary {
  @apply bg-white text-brand-coral border-2 border-brand-coral font-semibold px-6 py-3 rounded-lg;
}

.btn-outline {
  @apply border-2 border-brand-coral text-brand-coral px-6 py-3 rounded-lg;
}

/* Consistent Text Styles */
.text-h1 {
  @apply text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 leading-tight;
}

.text-h2 {
  @apply text-3xl md:text-4xl font-bold text-gray-900 leading-tight;
}

.text-h3 {
  @apply text-2xl md:text-3xl font-bold text-gray-900 leading-tight;
}

.text-body {
  @apply text-lg text-gray-700 leading-relaxed;
}

/* Core optimizations */

/* Consistent Card Styles */
.card-default {
  @apply bg-white rounded-xl shadow-lg border border-gray-100;
}

.card-gradient {
  @apply bg-gradient-to-br from-white to-gray-50 rounded-xl shadow-lg border border-gray-100;
}

/* Consistent Stats Styles */
.stats-number {
  @apply text-4xl md:text-5xl font-bold text-brand-coral mb-2;
}

.stats-label {
  @apply text-sm md:text-base text-gray-700 font-medium;
}

.stats-container {
  @apply text-center p-6 bg-white rounded-lg shadow-sm border border-gray-100;
}

/* Consistent Icon Styles */
.icon-container {
  @apply w-12 h-12 rounded-lg flex items-center justify-center mb-4;
  background-color: hsl(var(--brand-coral) / 0.1);
}

.icon-container-large {
  @apply w-16 h-16 rounded-xl flex items-center justify-center mb-6;
  background-color: hsl(var(--brand-coral) / 0.1);
}

/* Image display fixes to prevent disappearing */
img {
  visibility: visible !important;
  opacity: 1 !important;
  display: block !important;
  animation: none !important;
  transform: none !important;
  transition: none !important;
}

/* Ensure partner logo containers maintain their size */
.partner-logo-container {
  min-height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Optimized animations with reduced motion support */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

@keyframes gradient-shift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  animation: shimmer 2s infinite;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 1000px 100%;
}

/* Respect user's reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-shimmer,
  .animate-gradient-shift,
  .animate-marquee {
    animation: none;
  }
  
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Essential performance optimizations - simplified */
*{box-sizing:border-box}

/* Optimized font loading - prevent layout shift */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: fallback;
  src: url('https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2') format('woff2');
  unicode-range: U+0000-00FF;
}

/* Optimize rendering performance */
.performance-layer {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

.animate-gradient {
  animation: gradient-shift 6s ease infinite;
  background-size: 200% 200%;
}

.animate-marquee {
  animation: marquee 20s linear infinite;
}

.card-hover-effect {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-hover-effect:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.dark {
  --background: hsl(222, 84%, 4.9%);
  --foreground: hsl(210, 40%, 98%);
  --muted: hsl(217, 32%, 17%);
  --muted-foreground: hsl(215, 20%, 65%);
  --popover: hsl(222, 84%, 4.9%);
  --popover-foreground: hsl(210, 40%, 98%);
  --card: hsl(222, 84%, 4.9%);
  --card-foreground: hsl(210, 40%, 98%);
  --border: hsl(217, 32%, 17%);
  --input: hsl(217, 32%, 17%);
  --primary: hsl(351, 83%, 61%);
  --primary-foreground: hsl(0, 0%, 100%);
  --secondary: hsl(259, 60%, 25%);
  --secondary-foreground: hsl(0, 0%, 100%);
  --accent: hsl(51, 100%, 50%);
  --accent-foreground: hsl(259, 60%, 25%);
  --destructive: hsl(0, 62%, 30%);
  --destructive-foreground: hsl(210, 40%, 98%);
  --ring: hsl(351, 83%, 61%);
}

@layer base {
  * {
    @apply border-border;
  }

  body {
    @apply font-sans antialiased bg-background text-foreground;
    font-family: 'Inter', system-ui, sans-serif;
  }
  
  html {
    scroll-behavior: smooth;
  }
}

/* Brand color utilities */
.bg-brand-coral { background-color: var(--brand-coral); }
.bg-brand-coral-dark { background-color: var(--brand-coral-dark); }
.bg-brand-coral-darker { background-color: var(--brand-coral-darker); }
.bg-brand-coral-light { background-color: var(--brand-coral-light); }
.bg-brand-coral-custom { background-color: var(--brand-coral-custom); }
.bg-brand-purple { background-color: var(--brand-purple); }
.bg-brand-yellow { background-color: var(--brand-yellow); }
.text-brand-coral { color: var(--brand-coral); }
.text-brand-coral-dark { color: var(--brand-coral-dark); }
.text-brand-coral-darker { color: var(--brand-coral-darker); }
.text-brand-purple { color: var(--brand-purple); }
.text-brand-yellow { color: var(--brand-yellow); }
.border-brand-coral { border-color: var(--brand-coral); }
.hover\:bg-brand-coral-dark:hover { background-color: var(--brand-coral-dark); }
.hover\:text-brand-coral:hover { color: var(--brand-coral); }
.hover\:text-brand-coral-dark:hover { color: var(--brand-coral-dark); }
.hover\:text-brand-coral-darker:hover { color: var(--brand-coral-darker); }

/* Optimized animations for performance */
@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

@keyframes float {
  0%, 100% { transform: translateY(0px) scale(1); }
  50% { transform: translateY(-10px) scale(1.05); }
}

.animate-scroll {
  animation: scroll 20s linear infinite;
  will-change: transform;
}

.animate-scroll:hover {
  animation-play-state: paused;
}

.animate-float {
  animation: float 6s ease-in-out infinite;
  will-change: transform;
}

/* Performance optimizations */
.optimize-animations {
  contain: layout style paint;
  will-change: transform;
}

.reduce-blur {
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* GPU acceleration for better performance */
.gpu-accelerated {
  transform: translateZ(0);
  will-change: transform;
}

/* Focus styles for accessibility */
button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

/* Calendly custom styles */
.calendly-inline-widget {
  min-height: 630px;
  width: 100%;
}

/* Optimized image loading */
img[loading="lazy"] {
  opacity: 0;
  transition: opacity 0.3s ease-in-out;
}

img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
  opacity: 1;
}

/* Image optimization */
picture {
  display: contents;
}

img {
  max-width: 100%;
  height: auto;
  font-style: italic;
  background-repeat: no-repeat;
  background-size: cover;
  shape-margin: 0.75rem;
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-float,
  .animate-pulse,
  .animate-scroll {
    animation: none !important;
  }
  
  * {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Optimize font rendering */
body {
  font-display: swap;
  text-rendering: optimizeSpeed;
}

/* Content visibility for off-screen elements */
.off-screen {
  content-visibility: auto;
  contain-intrinsic-size: 500px;
}

/* Loading skeletons for better perceived performance */
.loading-skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200% 100%;
  animation: loading-shimmer 1.5s infinite;
  border-radius: 0.5rem;
}

@keyframes loading-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.dark .loading-skeleton {
  background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
  background-size: 200% 100%;
}

/* Error suppression for better UX */
.error-suppression {
  display: none !important;
}

/* BrandingBeez Popup - Cross-device styles */
/* Ensure popup appears on top of all content */
.popup-overlay {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
  z-index: 9999 !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  padding-top: 20px !important;
  /* Hardware acceleration */
  transform: translateZ(0);
  backface-visibility: hidden;
  /* Smooth backdrop blur */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.popup-modal {
  position: relative !important;
  z-index: 10000 !important;
  max-height: 90vh !important;
  overflow-y: auto !important;
  /* Smooth scrolling */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Popup animations for all devices */
.popup-enter {
  animation: popupSlideInTop 0.3s ease-out;
}

.popup-exit {
  animation: popupSlideOutTop 0.2s ease-in;
}

@keyframes popupSlideInTop {
  from {
    transform: translateY(-100%) translateX(-50%);
    opacity: 0;
  }
  to {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
}

@keyframes popupSlideOutTop {
  from {
    transform: translateY(0) translateX(-50%);
    opacity: 1;
  }
  to {
    transform: translateY(-100%) translateX(-50%);
    opacity: 0;
  }
}

/* Cross-device responsive design */
@media (max-width: 768px) {
  .popup-overlay {
    padding-top: 10px !important;
  }
  
  .popup-modal {
    width: calc(100% - 2rem) !important;
    max-width: none !important;
  }
}

@media (min-width: 769px) {
  .popup-modal {
    width: 100% !important;
    max-width: 28rem !important;
  }
}

/* Accessibility improvements for all devices */
.popup-modal {
  /* Ensure adequate touch targets */
  button, [role="button"] {
    min-height: 44px;
    min-width: 44px;
  }
  
  /* Better focus visibility */
  button:focus,
  input:focus,
  [role="button"]:focus {
    outline: 2px solid #f97316;
    outline-offset: 2px;
  }
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .popup-enter,
  .popup-exit {
    animation: none;
  }
  
  .popup-overlay,
  .popup-modal {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}

/* Dark mode optimizations */
@media (prefers-color-scheme: dark) {
  .popup-overlay {
    background-color: rgba(0, 0, 0, 0.7) !important;
  }
  
  .popup-modal {
    backdrop-filter: blur(12px);
  }
}

/* ===============================
   MOBILE-FIRST POPUP ENHANCEMENTS
   =============================== */

/* Mobile-specific popup optimizations */
.mobile-popup-overlay {
  /* Enhanced mobile touch optimization */
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  
  /* Safe area handling for modern mobile devices */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

.mobile-popup-modal {
  /* Hardware acceleration for smooth animations */
  transform: translate3d(0, 0, 0);
  will-change: transform, opacity;
  
  /* Touch optimization */
  -webkit-tap-highlight-color: transparent;
  touch-action: pan-y;
}

/* Mobile viewport optimizations */
@media screen and (max-width: 768px) {
  .mobile-popup-overlay {
    /* Better mobile positioning */
    padding: 0.5rem;
  }
  
  .mobile-popup-modal {
    /* Full-width on small screens */
    left: 0.5rem;
    right: 0.5rem;
    top: 0.5rem;
    max-width: none;
    width: auto;
  }
  
  /* Enhanced touch targets for mobile */
  .mobile-popup-modal button {
    min-height: 44px; /* iOS recommended touch target */
    min-width: 44px;
  }
  
  /* Improved input fields for mobile */
  .mobile-popup-modal input[type="email"] {
    font-size: 16px; /* Prevents zoom on iOS */
    line-height: 1.5;
  }
}

/* Small mobile devices */
@media screen and (max-width: 480px) {
  .mobile-popup-modal {
    left: 0.25rem;
    right: 0.25rem;
    top: 0.25rem;
  }
  
  /* Smaller padding on very small screens */
  .mobile-popup-modal .p-4 {
    padding: 0.75rem;
  }
}

/* Landscape mobile orientation */
@media screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-popup-overlay {
    padding-top: 0.25rem;
  }
  
  .mobile-popup-modal {
    top: 0.25rem;
    max-height: calc(100vh - 0.5rem);
  }
}

/* Performance enhancements */
@media (prefers-reduced-motion: no-preference) {
  .mobile-popup-modal {
    /* Smooth entrance animation */
    animation: mobilePopupSlideIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
}

@keyframes mobilePopupSlideIn {
  0% {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Accessibility enhancements */
@media (prefers-contrast: high) {
  .mobile-popup-modal {
    border: 3px solid #000;
  }
  
  .mobile-popup-modal button {
    border: 2px solid;
  }
}

/* Focus management for mobile popup */
.mobile-popup-modal:focus-within {
  outline: none;
}

.mobile-popup-modal [tabindex="0"]:focus,
.mobile-popup-modal button:focus,
.mobile-popup-modal input:focus {
  outline: 3px solid #f97316;
  outline-offset: 2px;
  border-radius: 4px;
}

/* Enhanced progress indicator for mobile */
.mobile-popup-modal .progress-step {
  transition: all 0.3s ease-in-out;
}

.mobile-popup-modal .progress-step.active {
  transform: scale(1.2);
  box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.3);
}