/* Custom styles that complement Tailwind */

/* Smooth focus outlines */
*:focus-visible {
    outline: 2px solid #4db882;
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background-color: #d8f5e4;
    color: #0a1628;
}

/* Subtle scrollbar */
::-webkit-scrollbar {
    width: 6px;
}
::-webkit-scrollbar-track {
    background: #faf8f5;
}
::-webkit-scrollbar-thumb {
    background: #0f1f3d;
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: #162a52;
}

/* Animation keyframes */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Mobile menu transitions */
#mobile-menu {
    transition: opacity 0.3s ease, pointer-events 0.3s ease;
}
#mobile-menu.open {
    opacity: 1;
    pointer-events: all;
}

/* Line animations for mobile menu button */
#menu-btn.active #line1 {
    transform: translateY(4px) rotate(45deg);
}
#menu-btn.active #line2 {
    opacity: 0;
}
#menu-btn.active #line3 {
    transform: translateY(-4px) rotate(-45deg);
}

/* Image loading placeholder */
img {
    background-color: #ebe4d6;
}