/* SauceLyfe Ladies Boutique — Custom Styles */

/* Base reset and typography refinements */
html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-weight: 400;
    line-height: 1.6;
}

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

/* Smooth focus outlines */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #0f766e;
    outline-offset: 2px;
    border-radius: 4px;
}

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

/* Custom container padding override */
@media (min-width: 640px) {
    .max-w-7xl {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Navbar transition refinement */
#navbar {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* Hero text shadow for readability on gradient */
#hero h1 {
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.15);
}

#hero p {
    text-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
}

/* Feature card image aspect ratio fix */
.feature-card img {
    object-position: center top;
}

/* Reduce motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .hero-gradient {
        animation: none;
        background: linear-gradient(135deg, #042f2e 0%, #134e4a 50%, #1e293b 100%);
    }
    .reveal.js-reveal {
        opacity: 1;
        transform: none;
    }
    .feature-card {
        transition: none;
    }
    .feature-card:hover {
        transform: none;
    }
    .img-zoom img {
        transition: none;
    }
    .btn-shine::after {
        display: none;
    }
    @keyframes marquee {
        0% { transform: translateX(0); }
        100% { transform: translateX(-50%); }
    }
}

/* Print styles */
@media print {
    nav, .animate-bounce, #experience, footer {
        display: none;
    }
    body {
        color: #000;
        background: #fff;
    }
}