/* 
 * Image Vault Membership Site Styles
 * Based on the actual Next.js site HTML structure
 */

/* Color Variables */
:root {
  --primary-color: #9333ea; /* Purple-600 */
  --secondary-color: #4338ca; /* Indigo-700 */
  --purple-100: #e9d5ff;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7e22ce;
  --indigo-100: #e0e7ff;
  --indigo-600: #4f46e5;
  --yellow-100: #fef9c3;
  --yellow-400: #fbbf24;
  --yellow-600: #d97706;
  --yellow-800: #92400e;
  --yellow-900: #78350f;
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-800: #1f2937;
  --gray-900: #111827;
  --pink-100: #fce7f3;
  --pink-600: #db2777;
  --blue-100: #dbeafe;
  --blue-600: #2563eb;
  --green-100: #dcfce7;
  --green-500: #22c55e;
  --green-600: #16a34a;
  --red-500: #ef4444;
  --white: #ffffff;
}

/* Typography */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  color: var(--gray-900);
  line-height: 1.5;
}

/* Hero Section */
.hero-section {
  background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
  color: white;
  padding: 80px 0;
}

/* Transform Effects */
.transform-rotate-3 {
  transform: rotate(3deg);
  z-index: 10;
}

.transform-rotate-12 {
  transform: rotate(12deg);
}

.transform-rotate-neg-3 {
  transform: rotate(-3deg);
}

.transform-scale-105 {
  transform: scale(1.05);
  z-index: 10;
}

.transform-hover {
  transition: all 0.3s ease;
}

.transform-hover:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
}

/* Features Section */
.features-section {
  background-color: var(--gray-50);
  padding: 80px 0;
}

.feature-card .icon {
  width: 32px;
  height: 32px;
}

/* Pricing Section */
.pricing-section {
  background-color: var(--white);
  padding: 80px 0;
}

.pricing-check-icon {
  color: var(--green-500);
}

.pricing-x-icon {
  color: var(--gray-400);
}

.bonus-section {
  position: relative;
  overflow: hidden;
}

/* Testimonials Section */
.testimonials-section {
  background-color: var(--gray-50);
  padding: 80px 0;
}

.testimonial-card-inner {
  position: relative;
}

.testimonial-icon {
  width: 24px;
  height: 24px;
  color: white;
}

.testimonial-stars {
  display: flex;
  margin-bottom: 12px;
}

.star-icon {
  width: 20px;
  height: 20px;
  color: var(--yellow-400);
}

.gallery-preview-box {
  overflow: hidden;
}

/* Button Styles */
.wp-block-button__link {
  transition: all 0.3s ease;
}

.wp-block-button__link:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  transform: translateY(-4px);
}

/* Gradients */
.has-indigo-to-purple-light-gradient-background {
  background: linear-gradient(135deg, var(--indigo-100) 0%, var(--purple-100) 100%);
}

/* Color Classes */
.has-purple-100-color {
  color: var(--purple-100);
}

.has-yellow-600-color {
  color: var(--yellow-600);
}

.has-yellow-800-color {
  color: var(--yellow-800);
}

.has-yellow-900-color {
  color: var(--yellow-900);
}

.has-gray-300-color {
  color: var(--gray-300);
}

.has-gray-400-color {
  color: var(--gray-400);
}

.has-gray-500-color {
  color: var(--gray-500);
}

.has-gray-600-color {
  color: var(--gray-600);
}

.has-gray-800-color {
  color: var(--gray-800);
}

.has-green-600-color {
  color: var(--green-600);
}

.has-custom-purple-color {
  color: var(--primary-color);
}

.has-custom-indigo-color {
  color: var(--indigo-600);
}

.has-custom-purple-background-color {
  background-color: var(--primary-color);
}

.has-custom-indigo-background-color {
  background-color: var(--indigo-600);
}

.has-gray-50-background-color {
  background-color: var(--gray-50);
}

.has-gray-100-background-color {
  background-color: var(--gray-100);
}

.has-white-background-color {
  background-color: var(--white);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-section h1 {
    font-size: 36px;
  }
  
  .hero-section h2 {
    font-size: 18px;
  }
  
  .wp-block-buttons {
    flex-direction: column;
  }
  
  .wp-block-button {
    width: 100%;
  }
  
  .features-section .wp-block-columns,
  .pricing-section .wp-block-columns,
  .testimonials-section .wp-block-columns {
    flex-wrap: wrap;
  }
  
  .features-section .wp-block-column,
  .pricing-section .wp-block-column,
  .testimonials-section .wp-block-column {
    flex-basis: 100% !important;
    margin-bottom: 24px;
  }
  
  .transform-scale-105 {
    transform: scale(1);
  }
}