/**
 * BXConnect Elementor Templates Styles
 * Based on the design system from index_2.html
 */

html {
  scroll-behavior: smooth;
}

.fade-in {
  animation: fadeIn 0.8s ease-out forwards;
  opacity: 0;
}

.fade-in-delay-1 {
  animation-delay: 0.1s;
}

.fade-in-delay-2 {
  animation-delay: 0.2s;
}

.fade-in-delay-3 {
  animation-delay: 0.3s;
}

.fade-in-delay-4 {
  animation-delay: 0.4s;
}

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

.stat-number {
  background: linear-gradient(135deg, #ffcd00 0%, #ffa300 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.hero-gradient {
  background: radial-gradient(
      ellipse 80% 50% at 50% -20%,
      rgba(214, 0, 28, 0.15) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #0c0c14 0%, #141420 100%);
}

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

.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.3);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 1px;
  background: #ffcd00;
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.breath {
  animation: breath 4s ease-in-out infinite;
}

@keyframes breath {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.5;
  }
  50% {
    transform: scale(1.05);
    opacity: 0.7;
  }
}

.section-gradient {
  background: linear-gradient(180deg, #141420 0%, #0c0c14 100%);
}

/* Elementor Editor Compatibility */
.elementor-editor-active .fade-in {
  opacity: 1;
  animation: none;
}

.elementor-editor-active .fade-in-delay-1,
.elementor-editor-active .fade-in-delay-2,
.elementor-editor-active .fade-in-delay-3,
.elementor-editor-active .fade-in-delay-4 {
  animation-delay: 0s;
}

/* Font Family Overrides - High Priority to Override Tailwind Defaults */
/* Override Tailwind's default .font-sans to use Lato */
.font-sans,
.elementor-widget-container .font-sans,
.elementor-widget .font-sans,
.elementor-element .font-sans,
.bx-card .font-sans,
.bx-card.research-card .font-sans,
.research-card.bx-card .font-sans,
.research-section .font-sans,
h1.font-sans,
h2.font-sans,
h3.font-sans,
h4.font-sans,
h5.font-sans,
h6.font-sans,
p.font-sans,
span.font-sans,
div.font-sans,
a.font-sans {
  font-family: "Lato", system-ui, sans-serif !important;
}

/* Override Tailwind's default .font-serif to use Playfair Display */
/* Using high specificity to override Tailwind's default ui-serif stack */
.font-serif,
.elementor-widget-container .font-serif,
.elementor-widget .font-serif,
.elementor-element .font-serif,
.bx-card .font-serif,
.bx-card.research-card .font-serif,
.research-card.bx-card .font-serif,
.research-section .font-serif,
.bx-card h3.font-serif,
.bx-card.research-card h3.font-serif,
.research-card.bx-card h3.font-serif,
.research-section h3.font-serif,
.elementor-widget-container .bx-card h3.font-serif,
.elementor-widget-container .research-card h3.font-serif,
.elementor-widget-container .research-section h3.font-serif,
h1.font-serif,
h2.font-serif,
h3.font-serif,
h4.font-serif,
h5.font-serif,
h6.font-serif {
  font-family: "Playfair Display", Georgia, serif !important;
}

/* Ensure all paragraph text uses Lato (override Tailwind defaults) */
.bx-card p,
.bx-card.research-card p,
.research-card.bx-card p,
.research-section p,
.elementor-widget-container .bx-card p,
.elementor-widget-container .research-card p,
.elementor-widget-container .research-section p,
.elementor-widget-container p:not(.font-serif) {
  font-family: "Lato", system-ui, sans-serif !important;
}

/* Body text fallback - ensure Lato is used when no font class is specified */
body,
.elementor-widget-container,
.elementor-widget,
.elementor-element {
  font-family: "Lato", system-ui, sans-serif !important;
}

/* BXConnect Component Styles - High Priority to Override Elementor Site Kit */
/* Research Card h3 - text-lg - Ensure Playfair Display is used */
.bx-card.research-card h3.text-lg,
.research-card.bx-card h3.text-lg,
.bx-card h3.text-lg,
.bx-card.research-card h3.font-serif,
.research-card.bx-card h3.font-serif,
.bx-card h3.font-serif {
  font-size: 1.125rem !important; /* 18px - text-lg */
  line-height: 1.75rem !important;
  font-family: "Playfair Display", Georgia, serif !important;
}

/* Research Section h3 - text-lg - Ensure Playfair Display is used */
.bx-card h3.text-lg,
.elementor-widget-container .bx-card h3.text-lg,
.research-section .bx-card h3.text-lg,
.research-section .bx-card h3.font-serif {
  font-size: 1.125rem !important; /* 18px - text-lg */
  line-height: 1.75rem !important;
  font-family: "Playfair Display", Georgia, serif !important;
}

/* Resources Section h3 - text-lg */
.resources-section .bx-card h3.text-lg,
.elementor-widget-container .resources-section h3.text-lg {
  font-size: 1.125rem !important; /* 18px - text-lg */
  line-height: 1.75rem !important;
}

/* Participate Section h3 - text-2xl */
.participate-section h3.text-2xl,
.elementor-widget-container .participate-section h3.text-2xl {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
}

/* Research Section h3 - text-2xl - Ensure Playfair Display is used */
.research-section h3.text-2xl,
.elementor-widget-container .research-section h3.text-2xl,
.research-section h3.font-serif {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
  font-family: "Playfair Display", Georgia, serif !important;
}

/* About Section h3 - text-2xl */
.about-section h3.text-2xl,
.elementor-widget-container .about-section h3.text-2xl {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
}

/* Contact Section h3 - text-2xl */
.contact-section h3.text-2xl,
.elementor-widget-container .contact-section h3.text-2xl {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
}

/* Milestone Banner h3 - text-2xl */
.milestone-banner h3.text-2xl,
.elementor-widget-container .milestone-banner h3.text-2xl {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
}

/* Enrollment Steps h3 - text-2xl */
.enrollment-steps h3.text-2xl,
.elementor-widget-container .enrollment-steps h3.text-2xl {
  font-size: 1.5rem !important; /* 24px - text-2xl */
  line-height: 2rem !important;
}

/* General fallback for all bx-card h3 elements with Tailwind text size classes */
.bx-card h3[class*="text-lg"],
.elementor-widget-container .bx-card h3[class*="text-lg"],
.bx-card h3[class*="text-lg"].font-serif,
.elementor-widget-container .bx-card h3[class*="text-lg"].font-serif {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-family: "Playfair Display", Georgia, serif !important;
}

.bx-card h3[class*="text-2xl"],
.elementor-widget-container .bx-card h3[class*="text-2xl"],
.elementor-widget-container h3[class*="text-2xl"],
.bx-card h3[class*="text-2xl"].font-serif,
.elementor-widget-container .bx-card h3[class*="text-2xl"].font-serif,
.elementor-widget-container h3[class*="text-2xl"].font-serif {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
  font-family: "Playfair Display", Georgia, serif !important;
}

/* Ensure font-weight and color are preserved */
.bx-card h3,
.elementor-widget-container .bx-card h3 {
  font-weight: 400 !important;
  color: #faf8f5 !important;
}

/* Universal override for any h3 with Tailwind text size classes in Elementor widgets */
/* This ensures Tailwind classes take precedence over Elementor Site Kit */
.elementor-widget-container h3.text-lg,
.elementor-widget h3.text-lg,
.elementor-element h3.text-lg {
  font-size: 1.125rem !important; /* 18px */
  line-height: 1.75rem !important;
}

.elementor-widget-container h3.text-2xl,
.elementor-widget h3.text-2xl,
.elementor-element h3.text-2xl {
  font-size: 1.5rem !important; /* 24px */
  line-height: 2rem !important;
}

/* Attribute selector fallback for maximum coverage */
.elementor-widget-container h3[class*="text-lg"],
.elementor-widget h3[class*="text-lg"],
.elementor-element h3[class*="text-lg"] {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
}

.elementor-widget-container h3[class*="text-2xl"],
.elementor-widget h3[class*="text-2xl"],
.elementor-element h3[class*="text-2xl"] {
  font-size: 1.5rem !important;
  line-height: 2rem !important;
}