/* El Artesano Bakery — Custom Styles */

/* Base resets */
* { margin: 0; padding: 0; box-sizing: border-box; }

/* Smooth scroll for anchor links */
html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Selection color */
::selection {
    background: #A7F3D0;
    color: #064E3B;
}

/* Body background gradient for subtle warmth */
body {
    background: linear-gradient(180deg, #FFFBF5 0%, #FFF8EE 100%);
}

/* Custom focus styles for accessibility */
a:focus-visible, button:focus-visible {
    outline: 3px solid #A7F3D0;
    outline-offset: 2px;
    border-radius: 8px;
}

/* Hero section text shadow for readability on images */
.hero-text-shadow {
    text-shadow: 0 2px 20px rgba(0,0,0,0.3);
}

/* Subtle pattern overlay for sections */
.section-pattern {
    background-image: radial-gradient(circle at 1px 1px, rgba(5,150,105,0.05) 1px, transparent 0);
    background-size: 24px 24px;
}

/* Product card image overlay on hover */
.product-card:hover .product-img-overlay {
    opacity: 1;
}

.product-img-overlay {
    opacity: 0;
    transition: opacity 0.3s ease;
    background: linear-gradient(to top, rgba(6,78,59,0.4), transparent);
}

/* Button ripple effect */
.cta-btn {
    position: relative;
    overflow: hidden;
}

.cta-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.cta-btn:active::before {
    width: 300px;
    height: 300px;
}

/* Decorative wave divider */
.wave-divider {
    position: relative;
}

.wave-divider::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 60px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 1440 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,30 C360,60 720,0 1080,30 C1260,45 1380,30 1440,30 L1440,60 L0,60 Z' fill='%23FFFBF5'/%3E%3C/svg%3E") no-repeat center bottom;
    background-size: cover;
}

/* Testimonial card */
.testimonial-card {
    background: linear-gradient(135deg, #FFFBF5 0%, #FFF8EE 100%);
    border: 1px solid rgba(167,243,208,0.3);
}

/* Step connector line */
.step-connector {
    position: relative;
}

.step-connector::after {
    content: '';
    position: absolute;
    top: 50%;
    right: -50%;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #A7F3D0, transparent);
    z-index: 0;
}

/* Navbar blur backdrop */
.nav-blur {
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Floating animation variants */
@keyframes floatSlow {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-15px) rotate(2deg); }
}

@keyframes floatMedium {
    0%, 100% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-10px) rotate(-1deg); }
}

@keyframes floatFast {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-8px); }
}

.float-slow { animation: floatSlow 7s ease-in-out infinite; }
.float-medium { animation: floatMedium 5s ease-in-out infinite; }
.float-fast { animation: floatFast 4s ease-in-out infinite; }

/* Grain texture overlay */
.grain-overlay {
    position: relative;
}

.grain-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.03'/%3E%3C/svg%3E");
    pointer-events: none;
    z-index: 1;
}

/* Custom scrollbar for webkit */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #FFFBF5;
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #A7F3D0, #059669);
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #059669, #064E3B);
}

/* Print styles */
@media print {
    nav, .cta-btn, button { display: none; }
    body { background: white; }
    section { page-break-inside: avoid; }
}