/* Additional custom styles */

/* Smooth scroll offset for fixed nav */
section[id] {
    scroll-margin-top: 80px;
}

/* Ensure all interactive elements are accessible */
a:focus, button:focus {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Custom selection color */
::selection {
    background-color: #059669;
    color: #fefce8;
}

/* Prevent layout shift for images */
img {
    max-width: 100%;
    height: auto;
}

/* Ensure text contrast meets WCAG AA */
.text-cream-100\/70 {
    color: rgba(254, 252, 232, 0.7);
}

.text-cream-100\/60 {
    color: rgba(254, 252, 232, 0.6);
}

/* Mobile menu overlay */
.mobile-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 40;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-menu-overlay.active {
    opacity: 1;
    pointer-events: all;
}

/* Loading state for buttons */
button:disabled,
input:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Focus visible for keyboard navigation */
:focus-visible {
    outline: 2px solid #10b981;
    outline-offset: 2px;
}

/* Animation for page load */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Apply fade-in to hero content (above fold - always visible) */
#hero > div {
    animation: fadeInUp 0.8s ease-out;
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    html {
        scroll-behavior: auto;
    }
    
    .animate-bounce {
        animation: none;
    }
}