/* QuickLaunchPages - Custom Styles (supplements Tailwind CDN) */

:root {
  --qlp-primary: #2563EB;
  --qlp-primary-dark: #1D4ED8;
  --qlp-secondary: #4F46E5;
  --qlp-accent: #10B981;
  --qlp-accent-dark: #059669;
  --qlp-dark: #0F172A;
  --qlp-gray-900: #111827;
  --qlp-gray-700: #374151;
  --qlp-gray-500: #6B7280;
  --qlp-gray-300: #D1D5DB;
  --qlp-gray-100: #F3F4F6;
  --qlp-white: #FFFFFF;
}

/* Smooth scroll */
html {
  scroll-behavior: smooth;
}

/* Focus rings for accessibility */
*:focus-visible {
  outline: 2px solid var(--qlp-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Navigation */
.nav-link {
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--qlp-primary);
  transition: width 0.2s ease;
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* Hero gradient overlay */
.hero-gradient {
  background-color: #0F172A;
  background-image: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

.hero-pattern {
  background-image: radial-gradient(circle at 25% 25%, rgba(37, 99, 235, 0.15) 0%, transparent 50%),
                    radial-gradient(circle at 75% 75%, rgba(79, 70, 229, 0.1) 0%, transparent 50%),
                    linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

/* Animated gradient for hero text */
.gradient-text {
  background: linear-gradient(135deg, #60A5FA, #818CF8, #A78BFA);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Card hover effects */
.card-hover {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

/* Pricing card highlight */
.pricing-popular {
  border: 2px solid var(--qlp-primary);
  position: relative;
}

/* FAQ accordion */
.faq-content {
  max-height: 0;
  overflow: hidden;
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.3s ease, padding 0.3s ease;
}
.faq-content.open {
  max-height: 500px;
  padding-bottom: 1.25rem;
}

.faq-chevron {
  transition: transform 0.3s ease;
}
.faq-chevron.open {
  transform: rotate(180deg);
}

/* Pricing toggle */
.pricing-toggle-bg {
  transition: background-color 0.2s ease;
}
.pricing-toggle-knob {
  transition: transform 0.2s ease;
}

/* Preview panel styling */
.preview-panel {
  background: white;
  border-radius: 12px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  overflow: hidden;
}

/* Browser chrome mockup */
.browser-chrome {
  background: #E5E7EB;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.browser-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

/* Smooth section reveal */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Mobile menu */
.mobile-menu {
  transform: translateX(100%);
  transition: transform 0.3s ease;
}
.mobile-menu.open {
  transform: translateX(0);
}

/* Scroll-to-top button */
.scroll-top-btn {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.scroll-top-btn.visible {
  opacity: 1;
  pointer-events: auto;
}

/* Ensure images don't overflow */
img {
  max-width: 100%;
  height: auto;
}

/* Print styles */
@media print {
  nav, .scroll-top-btn, .mobile-menu {
    display: none !important;
  }
}