/* Kivo Marketing Website - Custom Styles */

/* Smooth scrolling for anchor links */
html {
    scroll-behavior: smooth;
}

/* Custom focus styles for accessibility */
*:focus-visible {
    outline: 2px solid #5B63F5;
    outline-offset: 2px;
}

/* Typography improvements */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Prose styles for content pages */
.prose {
    color: #1A1A1A;
}

.prose h2 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.prose h3 {
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
}

.prose p {
    margin-bottom: 1rem;
}

.prose ul,
.prose ol {
    margin-bottom: 1rem;
}

/* Details/Summary (FAQ accordions) */
details summary {
    list-style: none;
    position: relative;
    padding-right: 2rem;
}

details summary::-webkit-details-marker {
    display: none;
}

details summary::after {
    content: '+';
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5rem;
    font-weight: bold;
    color: #5B63F5;
    transition: transform 0.2s ease;
}

details[open] summary::after {
    content: '−';
    transform: translateY(-50%) rotate(0deg);
}

details summary:hover {
    color: #5B63F5;
}

/* Smooth transitions */
details {
    transition: all 0.3s ease;
}

/* Link hover effects */
a {
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

/* Button hover effects */
button,
.button {
    transition: all 0.2s ease;
}

/* Card hover effects */
.hover\:shadow-lg {
    transition: box-shadow 0.3s ease;
}

/* Mobile menu animation */
#mobile-menu {
    transition: all 0.3s ease;
}

/* Loading states */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Print styles */
@media print {
    nav,
    footer,
    button {
        display: none !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
    }

    a {
        text-decoration: underline;
        color: #000;
    }

    .prose {
        max-width: 100%;
    }
}

/* Dark mode support (optional, for future use) */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
}

/* Accessibility: Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}