@layer components {

    /* Base utilities from original pure CSS styles */
    .hero-gradient {
        background: radial-gradient(circle at 50% 30%, rgba(212, 175, 55, 0.08) 0%, rgba(5, 7, 10, 1) 70%);
    }

    .glass-header {
        background: rgba(5, 7, 10, 0.85);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border-bottom: 1px solid rgba(212, 175, 55, 0.15);
    }

    .gold-gradient-text {
        background: linear-gradient(90deg, #f3d48d 0%, #d4af37 50%, #b8860b 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
    }

    /* Accordion Custom Logic */
    .accordion-content {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.3s ease-out, padding 0.3s ease, background-color 0.3s ease;
    }

    .accordion-item.active .accordion-content {
        max-height: 800px;
        @apply pb-6 px-6 bg-warm-earth/10;
    }

    .accordion-item.active .accordion-trigger {
        @apply px-6 bg-warm-earth/10;
    }

    .accordion-item.active .toggle-icon {
        transform: rotate(45deg);
    }

    /* Mobile Menu Custom Logic */
    #mobile-menu {
        transition: transform 0.3s ease-in-out;
        transform: translateY(-100%);
    }

    #mobile-menu.active {
        transform: translateY(0);
    }

    /* Decorative Patterns */
    .abstract-pattern {
        background-image: radial-gradient(circle at 2px 2px, rgba(212, 175, 55, 0.05) 1px, transparent 0);
        background-size: 24px 24px;
    }

    .gold-pattern {
        background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4af37' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    }

    .glow-card {
        box-shadow: 0 0 50px -10px rgba(212, 175, 55, 0.25);
    }

    /* WordPress WP Nav Menu Styling */
    .wp-nav-menu>.menu-item {
        @apply relative py-6;
        /* Padded vertically to create a stable hover bridge */
    }

    .wp-nav-menu>.menu-item>a {
        @apply flex items-center gap-1;
    }

    .wp-nav-menu .sub-menu {
        @apply absolute top-[100%] left-0 min-w-[220px] bg-[#05070a]/95 backdrop-blur-xl border border-white/10 rounded-sm opacity-0 invisible translate-y-2 transition-all duration-300 z-50 flex flex-col p-4 shadow-2xl;
    }

    .wp-nav-menu .menu-item:hover>.sub-menu {
        @apply opacity-100 visible translate-y-0;
    }

    .wp-nav-menu .sub-menu .menu-item {
        @apply relative block w-full;
    }

    .wp-nav-menu .sub-menu .menu-item a {
        @apply block py-3 border-b border-white/5 w-full;
    }

    .wp-nav-menu .sub-menu .menu-item:last-child a {
        @apply border-b-0;
    }
}