/* ========================================
   FRANKIE FELICIE MINISTRY - DESIGN SYSTEM
   Modern Web Animations & Premium Aesthetics
   ======================================== */

/* === CSS CUSTOM PROPERTIES === */
:root {
  /* Color Palette - Light Mode */
  --color-primary: hsl(220, 70%, 50%);
  --color-primary-light: hsl(220, 70%, 60%);
  --color-primary-dark: hsl(220, 70%, 40%);
  --color-secondary: hsl(260, 60%, 55%);
  --color-secondary-light: hsl(260, 60%, 65%);
  --color-accent: hsl(200, 100%, 45%);
  --color-accent-glow: hsl(200, 100%, 55%);

  /* Backgrounds */
  --bg-primary: hsl(0, 0%, 98%);
  --bg-secondary: hsl(0, 0%, 100%);
  --bg-surface: hsl(0, 0%, 100%);
  --bg-elevated: hsl(0, 0%, 100%);

  /* Text Colors */
  --text-primary: hsl(220, 25%, 20%);
  --text-secondary: hsl(220, 15%, 40%);
  --text-tertiary: hsl(220, 10%, 55%);
  --text-inverse: hsl(0, 0%, 100%);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg,
      hsl(220, 70%, 50%) 0%,
      hsl(260, 60%, 55%) 50%,
      hsl(220, 70%, 45%) 100%);
  --gradient-card: linear-gradient(135deg,
      hsl(220, 70%, 98%) 0%,
      hsl(260, 60%, 98%) 100%);
  --gradient-glow: radial-gradient(circle at center,
      hsla(200, 100%, 55%, 0.3) 0%,
      transparent 70%);

  /* Glassmorphism */
  --glass-bg: hsla(0, 0%, 100%, 0.7);
  --glass-border: hsla(0, 0%, 100%, 0.3);
  --glass-shadow: 0 8px 32px hsla(220, 70%, 50%, 0.1);
  --glass-blur: 12px;

  /* Shadows */
  --shadow-sm: 0 2px 8px hsla(220, 20%, 15%, 0.08);
  --shadow-md: 0 4px 16px hsla(220, 20%, 15%, 0.12);
  --shadow-lg: 0 8px 32px hsla(220, 20%, 15%, 0.16);
  --shadow-xl: 0 16px 48px hsla(220, 20%, 15%, 0.2);
  --shadow-glow: 0 0 24px hsla(200, 100%, 55%, 0.4);

  /* Spacing Scale */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;

  /* Typography Scale */
  --font-serif: 'Crimson Text', serif;
  --font-sans: 'Inter', sans-serif;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 3.75rem;

  /* Border Radius */
  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-bounce: 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Z-Index Scale */
  --z-base: 1;
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal: 40;
  --z-popover: 50;
  --z-tooltip: 60;
}

/* === DARK MODE === */
[data-theme="dark"] {
  /* Color Palette - Dark Mode */
  --color-primary: hsl(220, 80%, 60%);
  --color-primary-light: hsl(220, 80%, 70%);
  --color-primary-dark: hsl(220, 80%, 50%);
  --color-secondary: hsl(260, 70%, 65%);
  --color-secondary-light: hsl(260, 70%, 75%);
  --color-accent: hsl(200, 100%, 55%);
  --color-accent-glow: hsl(200, 100%, 65%);

  /* Backgrounds */
  --bg-primary: hsl(220, 25%, 8%);
  --bg-secondary: hsl(220, 20%, 12%);
  --bg-surface: hsl(220, 20%, 15%);
  --bg-elevated: hsl(220, 20%, 18%);

  /* Text Colors */
  --text-primary: hsl(0, 0%, 95%);
  --text-secondary: hsl(0, 0%, 75%);
  --text-tertiary: hsl(0, 0%, 55%);
  --text-inverse: hsl(220, 20%, 15%);

  /* Gradients */
  --gradient-hero: linear-gradient(135deg,
      hsl(220, 80%, 25%) 0%,
      hsl(260, 70%, 30%) 50%,
      hsl(220, 80%, 20%) 100%);
  --gradient-card: linear-gradient(135deg,
      hsl(220, 25%, 12%) 0%,
      hsl(260, 25%, 15%) 100%);

  /* Glassmorphism */
  --glass-bg: hsla(220, 20%, 15%, 0.7);
  --glass-border: hsla(220, 80%, 60%, 0.2);
  --glass-shadow: 0 8px 32px hsla(0, 0%, 0%, 0.4);

  /* Shadows */
  --shadow-sm: 0 2px 8px hsla(0, 0%, 0%, 0.3);
  --shadow-md: 0 4px 16px hsla(0, 0%, 0%, 0.4);
  --shadow-lg: 0 8px 32px hsla(0, 0%, 0%, 0.5);
  --shadow-xl: 0 16px 48px hsla(0, 0%, 0%, 0.6);
  --shadow-glow: 0 0 32px hsla(200, 100%, 55%, 0.5);
}

/* === BASE STYLES === */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  overflow-x: hidden;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: 1.6;
  color: var(--text-primary);
  background-color: var(--bg-primary);
  transition: background-color var(--transition-slow), color var(--transition-slow);
  overflow-x: hidden;
}

/* === TYPOGRAPHY === */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-serif);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: var(--space-md);
  color: var(--text-primary);
}

h1 {
  font-size: clamp(2.5rem, 5vw, var(--text-6xl));
}

h2 {
  font-size: clamp(2rem, 4vw, var(--text-5xl));
}

h3 {
  font-size: clamp(1.5rem, 3vw, var(--text-4xl));
}

h4 {
  font-size: var(--text-3xl);
}

h5 {
  font-size: var(--text-2xl);
}

h6 {
  font-size: var(--text-xl);
}

p {
  margin-bottom: var(--space-md);
  color: var(--text-secondary);
}

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-base);
}

a:hover {
  color: var(--color-primary-light);
}

/* === GLASSMORPHISM UTILITIES === */
.glass {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  box-shadow: var(--glass-shadow);
}

.glass-card {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-lg);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.glass-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-xl);
}

/* === BUTTON STYLES === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  border: none;
  cursor: pointer;
  transition: all var(--transition-base);
  position: relative;
  overflow: hidden;
}

.btn::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-slow), height var(--transition-slow);
}

.btn:hover::before {
  width: 300px;
  height: 300px;
}

.btn-primary {
  background: var(--color-primary);
  color: var(--text-inverse);
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--color-primary-light);
  box-shadow: var(--shadow-lg);
  transform: translateY(-2px);
}

.btn-secondary {
  background: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: var(--text-inverse);
}

.btn-glow {
  box-shadow: var(--shadow-glow);
  animation: pulse-glow 2s ease-in-out infinite;
}

/* === CARD STYLES === */
.card {
  background: var(--bg-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-lg);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-base);
}

.card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: var(--shadow-xl);
}

.card-3d {
  transform-style: preserve-3d;
  transition: transform var(--transition-slow);
}

.card-3d:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(5deg) translateY(-8px);
}

/* === NAVIGATION STYLES === */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-fixed);
  transition: all var(--transition-base);
}

.navbar-scrolled {
  background: var(--glass-bg);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  box-shadow: var(--shadow-md);
}

/* === HERO SECTION === */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--gradient-hero);
}

.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-glow);
  opacity: 0.5;
  animation: pulse-glow 4s ease-in-out infinite;
}

#particles-js {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  text-align: center;
  color: var(--text-inverse);
}

/* === ANIMATIONS === */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

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

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(50px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes pulse-glow {

  0%,
  100% {
    opacity: 0.5;
    transform: scale(1);
  }

  50% {
    opacity: 0.8;
    transform: scale(1.05);
  }
}

@keyframes float {

  0%,
  100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-20px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* Animation Classes */
.animate-fade-in {
  animation: fadeIn var(--transition-slow) ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp var(--transition-slow) ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft var(--transition-slow) ease-out;
}

.animate-slide-in-right {
  animation: slideInRight var(--transition-slow) ease-out;
}

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

/* === SCROLL ANIMATIONS === */
.reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: all var(--transition-slow);
}

.reveal.active {
  opacity: 1;
  transform: translateY(0);
}

/* === THEME TOGGLE === */
.theme-toggle {
  position: relative;
  width: 60px;
  height: 30px;
  background: var(--bg-surface);
  border-radius: var(--radius-full);
  border: 2px solid var(--color-primary);
  cursor: pointer;
  transition: all var(--transition-base);
}

.theme-toggle::before {
  content: '☀️';
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  background: var(--color-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  transition: all var(--transition-base);
}

[data-theme="dark"] .theme-toggle::before {
  content: '🌙';
  left: calc(100% - 26px);
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
  :root {
    --text-6xl: 2.5rem;
    --text-5xl: 2rem;
    --text-4xl: 1.75rem;
    --space-3xl: 4rem;
    --space-2xl: 3rem;
  }
}

/* === ACCESSIBILITY === */
@media (prefers-reduced-motion: reduce) {

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

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 2px;
}

/* === UTILITY CLASSES === */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.section {
  padding: var(--space-3xl) 0;
}

.text-center {
  text-align: center;
}

.text-gradient {
  background: var(--gradient-hero);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.glow {
  box-shadow: var(--shadow-glow);
}

/* === THEME OVERRIDES FOR TAILWIND CLASSES === */
/* These overrides ensure Tailwind classes respect the theme */

/* Override hardcoded Tailwind text colors */
[data-theme="dark"] .text-gray-800,
[data-theme="dark"] h1:not([class*="text-white"]):not([class*="text-"]),
[data-theme="dark"] h2:not([class*="text-white"]):not([class*="text-"]),
[data-theme="dark"] h3:not([class*="text-white"]):not([class*="text-"]),
[data-theme="dark"] h4:not([class*="text-white"]):not([class*="text-"]),
[data-theme="dark"] h5:not([class*="text-white"]):not([class*="text-"]),
[data-theme="dark"] h6:not([class*="text-white"]):not([class*="text-"]) {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .text-gray-600,
[data-theme="dark"] p:not([class*="text-white"]):not([class*="text-blue"]):not([class*="text-"]) {
  color: var(--text-secondary) !important;
}

[data-theme="dark"] .text-gray-700 {
  color: var(--text-secondary) !important;
}

/* Override hardcoded Tailwind backgrounds */
[data-theme="dark"] .bg-white:not(.hero):not([class*="shadow"]) {
  background-color: var(--bg-surface) !important;
}

[data-theme="dark"] .bg-gray-50 {
  background-color: var(--bg-secondary) !important;
}

[data-theme="dark"] .bg-gray-100 {
  background-color: var(--bg-surface) !important;
}

/* Service cards specific overrides */
[data-theme="dark"] .service-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--glass-border);
}

[data-theme="dark"] .service-card h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .service-card p {
  color: var(--text-secondary) !important;
}

/* Ensure section backgrounds respect theme */
[data-theme="dark"] section:not(#home) {
  background-color: var(--bg-primary) !important;
}

[data-theme="dark"] section#services {
  background-color: var(--bg-primary) !important;
}

/* Navigation overrides */
[data-theme="dark"] nav {
  background-color: var(--bg-surface) !important;
  border-bottom: 1px solid var(--glass-border);
}

[data-theme="dark"] nav a:not(.btn) {
  color: var(--text-primary) !important;
}

[data-theme="dark"] nav a:not(.btn):hover {
  color: var(--color-primary-light) !important;
}

/* === NAVIGATION MENU FIX === */
/* Desktop navigation - visible by default, hidden only on mobile */
.desktop-navigation {
  display: flex;
  align-items: center;
  /* Vertically center all items */
  gap: 1.5rem;
  /* Space between navigation items */
}

.desktop-navigation>* {
  margin: 0;
  /* Reset any default margins */
  display: inline-flex;
  align-items: center;
  /* Ensure all children are vertically centered */
}

/* Ensure proper spacing for links */
.desktop-navigation>a {
  padding: 0.5rem 0;
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  line-height: 1.5;
  /* Better visual alignment */
}

/* Dropdown menu styling */
.desktop-navigation .dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.desktop-navigation .dropdown>button {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 0;
  background: none;
  line-height: 1.5;
  /* Match links */
}

.desktop-navigation .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 0.5rem;
  min-width: 200px;
  background: #ffffff !important;
  /* Force white background */
  border: 1px solid #d1d5db;
  border-radius: 0.5rem;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  z-index: 9999;
  overflow: hidden;
}

.desktop-navigation .dropdown:hover .dropdown-menu {
  display: block;
}

.desktop-navigation .dropdown-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: #1f2937 !important;
  /* Dark gray text - high contrast */
  text-decoration: none;
  transition: background-color 0.2s;
  font-weight: 500;
}

.desktop-navigation .dropdown-menu a:hover {
  background-color: #e5e7eb !important;
  /* Light gray hover */
  color: #1d4ed8 !important;
  /* Blue on hover */
}

/* Theme toggle alignment */
.desktop-navigation .theme-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Language button alignment */
.desktop-navigation #langToggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 0;
  /* Remove extra margin, gap handles spacing */
}

/* Dark mode dropdown - keep high contrast */
[data-theme="dark"] .desktop-navigation .dropdown-menu {
  background: #1f2937 !important;
  /* Dark background */
  border-color: #374151;
}

[data-theme="dark"] .desktop-navigation .dropdown-menu a {
  color: #f9fafb !important;
  /* Light text - high contrast on dark background */
}

[data-theme="dark"] .desktop-navigation .dropdown-menu a:hover {
  background-color: #374151 !important;
  /* Slightly lighter dark gray on hover */
  color: #60a5fa !important;
  /* Light blue on hover */
}

/* Hide desktop nav on mobile screens - using Tailwind's md breakpoint */
@media (max-width: 767px) {
  .desktop-navigation {
    display: none !important;
  }

  /* Ensure mobile menu button is visible */
  #mobile-menu-btn {
    display: block !important;
  }
}

/* Ensure desktop nav is visible on larger screens */
@media (min-width: 768px) {
  .desktop-navigation {
    display: flex !important;
  }

  /* Hide mobile menu button on desktop */
  #mobile-menu-btn {
    display: none !important;
  }
}


/* === SPECIFIC COMPONENT FIXES === */

/* Sermon Cards */
.sermon-card {
  background-color: white;
  transition: all var(--transition-base);
}

[data-theme="dark"] .sermon-card {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--glass-border);
}

[data-theme="dark"] .sermon-card h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .sermon-card p {
  color: var(--text-secondary) !important;
}

/* Ask Section Cards */
.ask-card-left {
  background: linear-gradient(to bottom right, #f9fbff, #f4f7ff);
  border: 1px solid #dbe5ff;
  border-radius: 16px;
  padding: 40px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.08);
  flex: 1 1 600px;
  min-width: 340px;
}

.ask-card-right {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 30px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.05);
  flex: 1 1 340px;
  min-width: 300px;
}

[data-theme="dark"] .ask-card-left {
  background: linear-gradient(to bottom right, var(--bg-secondary), var(--bg-surface)) !important;
  border-color: var(--glass-border) !important;
}

[data-theme="dark"] .ask-card-right {
  background: var(--bg-surface) !important;
  border-color: var(--glass-border) !important;
}

[data-theme="dark"] .ask-card-left h2,
[data-theme="dark"] .ask-card-right h3 {
  color: var(--text-primary) !important;
}

[data-theme="dark"] .ask-card-left p,
[data-theme="dark"] .ask-card-right ul,
[data-theme="dark"] .ask-card-right li,
[data-theme="dark"] .ask-card-right p {
  color: var(--text-secondary) !important;
}

/* Contact Form Wrapper */
.contact-form-wrapper {
  background-color: #ffffff;
  padding: 1.5rem;
  border-radius: 1rem;
  box-shadow: var(--shadow-md);
}

/* In dark mode, we keep the contact form white because the embed might expect light mode.
   Or we can make it dark if we trust the embed handles transparency well.
   Given the issue "cannot read well", keeping it white with black text is safest. */
[data-theme="dark"] .contact-form-wrapper {
  background-color: #ffffff !important;
  color: #1f2937 !important;
}