/* Custom styles — extends Tailwind with specific design touches */

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

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #FDF8F6;
}
::-webkit-scrollbar-thumb {
    background: #d4a0aa;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #7B2D3B;
}

/* Selection color */
::selection {
    background: #f9c2ca;
    color: #5c1521;
}

/* Subtle pattern for cream sections */
.bg-cream-50 {
    background-color: #FDF8F6;
    background-image: radial-gradient(ellipse at 20% 50%, rgba(244, 145, 158, 0.05) 0%, transparent 50%),
                      radial-gradient(ellipse at 80% 20%, rgba(253, 229, 233, 0.08) 0%, transparent 50%);
}

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

/* Button ripple-like glow */
a[href="#contact"]:hover {
    box-shadow: 0 0 0 4px rgba(123, 45, 59, 0.1);
}

/* Form focus states */
input:focus, select:focus, textarea:focus {
    outline: none;
}

/* Mobile menu animation */
#mobileMenu {
    animation: slideDown 0.3s ease;
}
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Navbar transition */
#navbar {
    transition: background 0.3s ease, box-shadow 0.3s ease;
}

/* Print styles */
@media print {
    nav, #contactForm, #successMessage { display: none; }
    body { background: white; }
}