@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    h1, h2, h3, h4, h5, h6 {
        @apply font-serif;
    }
}

@layer components {
    .btn {
        @apply inline-block px-8 py-3 rounded-md font-semibold text-lg transition-all duration-300 shadow-md;
    }
    .btn-primary {
        @apply bg-gold text-white hover:bg-yellow-700 hover:shadow-lg transform hover:-translate-y-0.5;
    }
    .btn-secondary {
        @apply bg-cream text-near-black hover:bg-white hover:shadow-lg transform hover:-translate-y-0.5;
    }
    .btn-primary-outline {
        @apply bg-transparent border-2 border-gold text-gold hover:bg-gold hover:text-white;
    }
    .nav-link {
        @apply font-semibold text-near-black/80 hover:text-gold relative after:content-[''] after:absolute after:w-0 after:h-0.5 after:bg-gold after:bottom-0 after:left-1/2 after:-translate-x-1/2 after:transition-all after:duration-300;
    }
    .nav-link:hover::after,
    .nav-link.active::after {
        @apply w-full;
    }
    .nav-link.active {
        @apply text-gold;
    }
    .dropdown-link {
        @apply block px-4 py-2 text-near-black/80 hover:bg-dusty-rose/30 hover:text-gold transition-colors;
    }
    .mobile-nav-link {
        @apply block px-6 py-3 text-lg font-semibold text-near-black/80 hover:bg-dusty-rose/20;
    }
    .mobile-dropdown-link {
        @apply block px-6 py-2 text-base font-medium text-near-black/70 hover:bg-dusty-rose/20;
    }
    .footer-link {
        @apply text-cream/70 hover:text-gold hover:underline;
    }
    .form-input {
        @apply w-full px-4 py-2 mt-1 bg-cream border border-dusty-rose rounded-md focus:ring-gold focus:border-gold transition-all;
    }
}

#header.scrolled {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}