/* Custom styles for Salon Lia - complementary to Tailwind */

/* Base reset enhancements */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* Selection color */
::selection {
    background: #e55a33;
    color: #faf6f1;
}

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

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

::-webkit-scrollbar-thumb {
    background: #d4c4b8;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #e55a33;
}

/* Image aspect ratios for gallery consistency */
.img-zoom img {
    aspect-ratio: 4 / 5;
}

/* Ensure serif headings have proper line height */
.font-serif h1, .font-serif h2, .font-serif h3 {
    line-height: 1.1;
}

/* Prevent form inputs from having weird browser defaults */
input, textarea, select {
    font-feature-settings: "kern" 1;
}

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

/* Subtle pattern overlay for dark sections */
.footer-dark {
    background-image: radial-gradient(ellipse at 20% 50%, rgba(229, 90, 51, 0.05) 0%, transparent 50%);
}

/* Ensure hero images are responsive */
.hero-img-container img {
    min-height: 500px;
}

@media (max-width: 1023px) {
    .hero-img-container img {
        min-height: 400px;
        max-height: 60vh;
    }
}

/* Print styles */
@media print {
    nav, .mobile-menu, #hamburger {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .hero-grid {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
}