/* Custom styles that complement Tailwind */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&family=Roboto:wght@300;400;500;700&display=swap');

:root {
    --font-sans: 'Roboto', sans-serif;
    --font-serif: 'Playfair Display', serif;
    --color-primary: #dc2626;
    --color-primary-dark: #b91c1c;
}

body {
    font-family: var(--font-sans);
    scroll-behavior: smooth;
    margin: 0;
    padding: 0;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    margin: 0;
}

/* Reset shadow DOM styles */
custom-navbar, custom-footer, custom-review-card, custom-menu-card {
    display: block;
}

/* Animation for menu items */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.menu-item-animate {
    animation: fadeInUp 0.5s ease-out forwards;
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--color-primary);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--color-primary-dark);
}

/* Global link styles */
a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-primary);
}

/* Utility classes for spacing */
.section-padding {
    padding: 5rem 1rem;
}

.container-width {
    max-width: 80rem;
    margin-left: auto;
    margin-right: auto;
}