/* ============================================================================
   Custom CSS - All Expenses Paid! Marketing Site
   ============================================================================ */

/* Alpine.js cloak - hide elements until Alpine initializes */
[x-cloak] {
    display: none !important;
}

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

/* Focus states (accessibility) */
*:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Smooth transitions for interactive elements */
button, a, input, select, textarea {
    transition: all 0.15s ease-in-out;
}

/* Card hover lift */
.card-hover {
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out;
}

.card-hover:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* ============================================================================
   Animations
   ============================================================================ */

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

.fade-in {
    animation: fadeIn 0.5s ease-out;
}

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

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.3s ease-out;
}

/* Scroll-triggered fade in (used with IntersectionObserver) */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.scroll-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children animations */
.stagger-children > * {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
}

.stagger-children.visible > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.1s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.15s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.2s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.25s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.3s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.35s; opacity: 1; transform: translateY(0); }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.4s; opacity: 1; transform: translateY(0); }

/* ============================================================================
   Pricing toggle animation
   ============================================================================ */

.pricing-switch {
    transition: background-color 0.3s ease;
}

.pricing-switch-knob {
    transition: transform 0.3s ease;
}

/* ============================================================================
   Docs sidebar active state
   ============================================================================ */

.docs-sidebar a {
    transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}

.docs-sidebar a.active {
    color: #10b981;
    border-left-color: #10b981;
    background-color: #ecfdf5;
}

/* ============================================================================
   Feature comparison table
   ============================================================================ */

.comparison-table th,
.comparison-table td {
    border-bottom: 1px solid #f1f5f9;
}

.comparison-table tr:last-child th,
.comparison-table tr:last-child td {
    border-bottom: none;
}

/* ============================================================================
   Blog post content typography
   Reinforces @tailwindcss/typography prose styles and provides fallback
   if the compiled Tailwind CSS hasn't loaded yet.
   ============================================================================ */

.prose p {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    line-height: 1.75;
}

.prose h2 {
    margin-top: 2em;
    margin-bottom: 1em;
    font-size: 1.5em;
    font-weight: 700;
    line-height: 1.33;
    color: #334155;
}

.prose h3 {
    margin-top: 1.6em;
    margin-bottom: 0.6em;
    font-size: 1.25em;
    font-weight: 600;
    line-height: 1.6;
    color: #334155;
}

.prose ul {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    list-style-type: disc;
}

.prose ol {
    margin-top: 1.25em;
    margin-bottom: 1.25em;
    padding-left: 1.625em;
    list-style-type: decimal;
}

.prose li {
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

.prose strong {
    font-weight: 600;
    color: #334155;
}

.prose a {
    color: #10b981;
    text-decoration: underline;
}

.prose a:hover {
    color: #059669;
}

.prose blockquote {
    margin-top: 1.6em;
    margin-bottom: 1.6em;
    padding-left: 1em;
    border-left: 0.25rem solid #10b981;
    font-style: italic;
    color: #475569;
}

.prose hr {
    margin-top: 3em;
    margin-bottom: 3em;
    border-color: #e2e8f0;
}

.prose code {
    font-size: 0.875em;
    background-color: #f1f5f9;
    padding: 0.2em 0.4em;
    border-radius: 0.25rem;
}

.prose pre {
    margin-top: 1.75em;
    margin-bottom: 1.75em;
    padding: 1em;
    background-color: #1e293b;
    color: #e2e8f0;
    border-radius: 0.5rem;
    overflow-x: auto;
}

.prose img {
    margin-top: 2em;
    margin-bottom: 2em;
    border-radius: 0.5rem;
}

/* Mobile adjustments for blog prose */
@media (max-width: 639px) {
    .prose p {
        margin-top: 1em;
        margin-bottom: 1em;
    }

    .prose h2 {
        margin-top: 1.5em;
        margin-bottom: 0.75em;
        font-size: 1.25em;
    }

    .prose h3 {
        margin-top: 1.25em;
        margin-bottom: 0.5em;
        font-size: 1.125em;
    }

    .prose ul,
    .prose ol {
        margin-top: 1em;
        margin-bottom: 1em;
        padding-left: 1.25em;
    }
}

/* ============================================================================
   Reduced motion
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .scroll-fade-in {
        opacity: 1;
        transform: none;
    }

    .stagger-children > * {
        opacity: 1;
        transform: none;
    }
}