/* Custom styles for Panaderia y Restaurante El Quetzal */

/* Ensure all text has proper contrast */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

/* Hero section gradient animation on load */
@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.hero-gradient {
    background-size: 200% 200%;
    animation: gradientShift 12s ease infinite;
}

/* Focus styles for accessibility */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
    outline: 2px solid #ff6b4a;
    outline-offset: 2px;
}

/* Selection color */
::selection {
    background: #ff8a6e;
    color: #fff;
}

/* Mobile menu overlay */
#menuOverlay {
    backdrop-filter: blur(2px);
}

/* Card image hover zoom */
.card-hover img {
    transition: transform 0.5s ease;
}
.card-hover:hover img {
    transform: scale(1.05);
}

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

/* 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;
    }
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .hero-gradient {
        background: linear-gradient(160deg, #ff6b4a 0%, #ff8a6e 30%, #fce4ec 60%, #ede7f6 100%);
    }
}