/* Custom styles for Details Salon For Men */

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

/* Ensure all text meets WCAG AA contrast */
.text-gray-600 { color: #4b5563; }
.text-gray-700 { color: #374151; }
.text-gray-500 { color: #6b7280; }

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

/* Selection color */
::selection {
    background: #059669;
    color: white;
}

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

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

/* Service card icon container */
.service-card .w-14 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

/* Button focus states */
.btn-primary:focus-visible {
    outline-offset: 3px;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1 !important;
        transform: none !important;
    }
    .service-card:hover {
        transform: none;
    }
    .hero-img-wrapper img,
    .gallery img {
        transition: none;
    }
    html {
        scroll-behavior: auto;
    }
}

/* Tablet adjustments */
@media (max-width: 768px) {
    .hero-img-wrapper img {
        height: 400px;
    }
}

/* Large screens */
@media (min-width: 1280px) {
    .hero-img-wrapper img {
        height: 600px;
    }
}