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

:root {
    --black: #000000;
    --gray: #808080;
    --dark-gray: #404040;
    --white: #FFFFFF;
    --dark-orange: #FF4500;
    --dark-orange-hover: #FF6347;
}

@layer base {
    body {
        @apply bg-dark-gray text-white font-sans;
    }
}

@layer components {
    .main-header {
        @apply bg-black py-4 px-6 shadow-lg sticky top-0 z-50;
    }

    .header-container {
        @apply max-w-7xl mx-auto flex items-center justify-between;
    }

    .logo img {
        @apply h-16 object-contain;
    }

    .main-nav {
        @apply flex items-center gap-6;
    }

    .dropdown-toggle {
        @apply flex items-center gap-2 px-4 py-2 rounded-md text-white hover:text-dark-orange font-bold transition-colors;
    }

    .dropdown-menu {
        @apply absolute top-full left-0 bg-black shadow-2xl rounded-lg p-6 w-[600px] grid grid-cols-3 gap-4 z-50;
    }

    .dropdown-menu a {
        @apply px-4 py-2 hover:bg-dark-orange hover:text-white rounded-md transition-colors text-sm;
    }

    .mobile-menu {
        @apply bg-black shadow-lg p-6;
    }

    .mobile-toggle {
        @apply text-white text-2xl focus:outline-none focus:ring-2 focus:ring-dark-orange;
    }

    .hero-section {
        @apply bg-cover bg-center bg-no-repeat text-white py-20 px-6 text-center relative;
    }

    .hero-content h1 {
        @apply text-4xl md:text-5xl font-bold mb-4;
    }

    .hero-content p {
        @apply text-lg md:text-xl mb-8 opacity-90;
    }

    .cta-button {
        @apply bg-dark-orange text-white py-3 px-6 rounded-md font-bold hover:bg-dark-orange-hover transition-colors;
    }

    .site-container {
        @apply max-w-7xl mx-auto py-10 px-6 flex-1;
    }

    .item-values-list h2 {
        @apply text-3xl md:text-4xl font-bold text-center mb-8;
    }

    .category-filter {
        @apply text-center mb-6;
    }

    .category-filter label {
        @apply text-lg mr-4;
    }

    #category-dropdown {
        @apply p-3 rounded-md border border-gray bg-dark-gray text-white cursor-pointer focus:border-dark-orange focus:outline-none;
    }

    .calc-button-container {
        @apply text-center mb-8;
    }

    .calc-button {
        @apply bg-dark-orange text-white py-3 px-6 rounded-md font-bold hover:bg-dark-orange-hover transition-colors;
    }

    .category-sections {
        @apply flex flex-col gap-8;
    }

    .category-header {
        @apply text-2xl font-semibold p-4 bg-gray-700 bg-opacity-20 rounded-lg mb-4;
    }

    .items-list {
        @apply grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4 p-6 bg-gray-700 bg-opacity-20 rounded-lg shadow-lg;
    }

    .item-item {
        @apply flex flex-col items-center p-4 bg-gray-800 bg-opacity-30 rounded-lg hover:shadow-xl transition-shadow;
    }

    .item-header {
        @apply w-full flex justify-start mb-2;
    }

    .item-category {
        @apply bg-dark-orange text-white text-xs font-semibold px-2 py-1 rounded;
    }

    .item-name {
        @apply text-lg font-semibold text-center mb-2 w-full truncate;
    }

    .item-info {
        @apply w-full;
    }

    .item-details {
        @apply flex flex-col gap-1 text-sm;
    }

    .item-value {
        @apply font-bold;
    }

    .main-footer {
        @apply bg-black text-white py-10 mt-auto;
    }

    .footer-container {
        @apply max-w-7xl mx-auto flex flex-wrap justify-between gap-6 px-6;
    }

    .footer-section {
        @apply flex-1 min-w-[200px] text-center;
    }

    .footer-section p {
        @apply text-sm opacity-80;
    }

    .footer-links {
        @apply flex justify-center gap-4 flex-wrap;
    }

    .footer-links a {
        @apply flex items-center gap-2 text-sm opacity-80 hover:text-dark-orange transition-colors px-4 py-2;
    }

    .copyright-grid p {
        @apply text-sm opacity-80;
    }
}

/* Ensure dropdown menu visibility */
@layer utilities {
    .block {
        display: block;
    }
}