/* ============================================
   Mega Menu Styles - Matching Next.js
   ============================================ */

/* Mega Menu Bridge (invisible hover area) - Always present like in Next.js */
.modeo-mega-menu-bridge {
    visibility: hidden;
    pointer-events: none;
    z-index: 99998 !important;
    /* Just below mega menu to catch hover events */
}

.modeo-mega-menu-bridge[data-mega-menu-open="true"] {
    visibility: visible;
    pointer-events: auto;
}

/* Mega Menu Container - Matching Next.js exactly */
.modeo-mega-menu {
    position: fixed !important;
    top: 64px !important;
    /* Header height = 64px */
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    background-color: #ffffff !important;
    /* bg-white */
    border-top: 1px solid #e5e7eb !important;
    /* border-gray-200 */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important;
    /* shadow-xl */
    z-index: 9999999 !important;
    /* Highest z-index to ensure it's above everything */
    transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
    opacity: 0 !important;
    transform: translateY(0.5rem) !important;
    /* translate-y-2 = 8px = 0.5rem */
    pointer-events: none !important;
    display: none !important;
    visibility: hidden !important;
    /* Ensure menu is always in document flow - NO contain property! */
    /* Ensure content is visible */
    overflow: visible !important;
    min-height: auto !important;
    /* Break out of any parent containers */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Ensure menu is positioned relative to viewport, not parent */
    transform-origin: top center !important;
}

/* Ensure body/html don't clip the menu with overflow */
body:has(.modeo-mega-menu),
html:has(.modeo-mega-menu) {
    overflow-x: visible !important;
}

/* Ensure header doesn't clip the menu */
.modeo-header {
    overflow: visible !important;
}

/* Ensure parent containers don't clip - but only for mega menu parents */
.modeo-nav-item {
    overflow: visible !important;
}

.modeo-header nav {
    overflow: visible !important;
}

.modeo-header .max-w-8xl {
    overflow: visible !important;
}

/* Mega Menu Open State - Maximum specificity to override everything */
body .modeo-mega-menu[data-mega-menu-open="true"],
body .modeo-mega-menu.modeo-mega-menu-open,
.modeo-mega-menu[data-mega-menu-open="true"],
.modeo-mega-menu.modeo-mega-menu-open {
    opacity: 1 !important;
    transform: translateY(0) translateZ(0) !important;
    /* Add translateZ(0) to force GPU acceleration */
    -webkit-transform: translateY(0) translateZ(0) !important;
    pointer-events: auto !important;
    display: block !important;
    visibility: visible !important;
    position: fixed !important;
    top: 64px !important;
    /* Header height = 64px */
    left: 0 !important;
    right: 0 !important;
    width: 100vw !important;
    /* Use viewport width */
    max-width: 100vw !important;
    z-index: 9999999 !important;
    /* Highest z-index to ensure it's above everything */
    background-color: #ffffff !important;
    overflow: visible !important;
    min-height: auto !important;
    height: auto !important;
    /* Force rendering - no contain property */
    contain: none !important;
    will-change: transform, opacity;
    /* Break out of any parent containers */
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    /* Ensure menu is on top layer */
    isolation: isolate !important;
    /* Override any Tailwind hidden class */
    clip: auto !important;
    clip-path: none !important;
}

/* Ensure menu is always visible when open - high specificity for edge cases */
body .modeo-mega-menu[data-mega-menu-open="true"],
body .modeo-mega-menu.modeo-mega-menu-open {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    position: fixed !important;
    z-index: 9999999 !important;
    /* Highest z-index to ensure it's above everything */
}

/* Fix for WP Admin Bar */
body.admin-bar .modeo-mega-menu {
    top: calc(64px + 32px) !important;
}

@media (max-width: 782px) {
    body.admin-bar .modeo-mega-menu {
        top: calc(64px + 46px) !important;
        /* WP Admin bar is taller on mobile */
    }
}

/* Grid Layout */
.modeo-mega-menu .grid {
    display: grid;
    gap: 0.5rem;
    /* gap-2 = 0.5rem */
}

.modeo-mega-menu .grid-cols-1 {
    grid-template-columns: repeat(1, minmax(0, 1fr));
}

@media (min-width: 768px) {
    .modeo-mega-menu .md\:grid-cols-4 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    .modeo-mega-menu .md\:grid-cols-5 {
        grid-template-columns: repeat(5, minmax(0, 1fr));
    }
}

/* Padding - matching Next.js */
.modeo-mega-menu>div {
    width: 100%;
    padding-left: 1rem;
    /* px-4 */
    padding-right: 1rem;
    padding-top: 1.5rem;
    /* py-6 */
    padding-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .modeo-mega-menu>div {
        padding-left: 2rem !important;
        /* md:px-8 */
        padding-right: 2rem !important;
        padding-top: 2rem !important;
        /* md:py-8 */
        padding-bottom: 2rem !important;
        min-height: 300px !important;
        /* Ensure minimum height on desktop */
    }
}

/* Max width container */
.modeo-mega-menu .max-w-screen-2xl {
    max-width: 1536px;
    margin-left: auto;
    margin-right: auto;
}

@media (min-width: 1024px) {
    .modeo-mega-menu .lg\:grid-cols-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Column Styling */
.modeo-mega-menu .space-y-4>*+* {
    margin-top: 1rem;
}

.modeo-mega-menu .space-y-3>*+* {
    margin-top: 0.75rem;
}

.modeo-mega-menu .md\:pr-8 {
    padding-right: 2rem;
}

.modeo-mega-menu .md\:border-r {
    border-right: 1px solid var(--gray-200);
}

.modeo-mega-menu .md\:pl-0 {
    padding-left: 0;
}

.modeo-mega-menu .lg\:pl-8 {
    padding-left: 2rem;
}

.modeo-mega-menu .lg\:border-l {
    border-left: 1px solid var(--gray-200);
}

/* Section Headings */
.modeo-mega-menu h3 {
    font-size: 1.125rem;
    line-height: 1.75rem;
    font-weight: 600;
    color: var(--gray-900);
    margin-bottom: 1rem;
}

/* Mega Menu Links */
.modeo-mega-menu-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 500;
    color: var(--gray-700);
    transition: color 0.15s ease;
    padding: 0.5rem;
    border-radius: 0.5rem;
    text-decoration: none;
}

/* Safari Fix for SVGs */
.modeo-mega-menu-link span svg {
    width: 100%;
    height: 100%;
    display: block;
}

.modeo-mega-menu-link:hover {
    color: var(--primary);
    background-color: var(--gray-50);
}

.modeo-mega-menu-link span:first-child {
    color: var(--primary);
    transition: transform 0.15s ease;
}

.modeo-mega-menu-link:hover span:first-child {
    transform: scale(1.1);
}

.modeo-mega-menu-link .text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

/* CTA Section */
.modeo-mega-menu-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.75rem 1.5rem;
    /* px-6 py-3 */
    font-weight: 500;
    border-radius: 0.5rem;
    /* rounded-lg */
    transition: all 0.15s ease;
    text-decoration: none;
}

.modeo-mega-menu-cta svg {
    margin-left: 0.5rem;
    /* ml-2 */
    width: 1rem;
    /* w-4 */
    height: 1rem;
    /* h-4 */
    transition: transform 0.15s ease;
}

.modeo-mega-menu-cta:hover svg {
    transform: translateX(0.25rem);
    /* translate-x-1 */
}

/* CTA Card - Shop */
.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 {
    background-image: linear-gradient(to bottom right, #eff6ff, #e0e7ff);
    padding: 1.5rem;
    /* p-6 */
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid #bfdbfe;
    /* border-blue-200 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 280px;
}

.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 svg {
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    color: #3b82f6;
    /* text-blue-500 */
    margin: 0 auto 1rem;
    /* mx-auto mb-4 */
}

.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 h3 {
    font-size: 1.25rem;
    /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 p {
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    /* mb-6 */
    max-width: 20rem;
    /* max-w-xs */
}

.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 .modeo-mega-menu-cta {
    background-color: #3b82f6;
    /* bg-blue-500 */
    color: #ffffff;
    /* text-white */
}

.modeo-mega-menu .bg-gradient-to-br.from-blue-50.to-indigo-100 .modeo-mega-menu-cta:hover {
    background-color: #2563eb;
    /* hover:bg-blue-600 */
}

/* CTA Card - Gift */
.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 {
    background-image: linear-gradient(to bottom right, #fef2f2, #fce7f3);
    padding: 1.5rem;
    /* p-6 */
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid #fecaca;
    /* border-red-200 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 280px;
}

.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 svg {
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    color: #ef4444;
    /* text-red-500 */
    margin: 0 auto 1rem;
    /* mx-auto mb-4 */
}

.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 h3 {
    font-size: 1.25rem;
    /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 p {
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    /* mb-6 */
    max-width: 20rem;
    /* max-w-xs */
}

.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 .modeo-mega-menu-cta {
    background-color: #ef4444;
    /* bg-red-500 */
    color: #ffffff;
    /* text-white */
}

.modeo-mega-menu .bg-gradient-to-br.from-red-50.to-pink-100 .modeo-mega-menu-cta:hover {
    background-color: #dc2626;
    /* hover:bg-red-600 */
}

/* Gradient Backgrounds */
.bg-gradient-to-br {
    background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
}

.from-blue-50 {
    --tw-gradient-from: #eff6ff;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(239, 246, 255, 0));
}

.to-indigo-100 {
    --tw-gradient-to: #e0e7ff;
}

.from-red-50 {
    --tw-gradient-from: #fef2f2;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(254, 242, 242, 0));
}

.to-pink-100 {
    --tw-gradient-to: #fce7f3;
}

.from-pink-50 {
    --tw-gradient-from: #fdf2f8;
    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(253, 242, 248, 0));
}

/* CTA Card - Branding/Business (Pink Gradient) */
.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 {
    background-image: linear-gradient(to bottom right, #fdf2f8, #fce7f3);
    padding: 1.5rem;
    /* p-6 */
    border-radius: 1rem;
    /* rounded-2xl */
    border: 1px solid #fbcfe8;
    /* border-pink-200 */
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 280px;
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 svg {
    width: 3rem;
    /* w-12 */
    height: 3rem;
    /* h-12 */
    color: #ec4899;
    /* text-pink-500 */
    margin: 0 auto 1rem;
    /* mx-auto mb-4 */
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 h3 {
    font-size: 1.25rem;
    /* text-xl */
    line-height: 1.75rem;
    font-weight: 700;
    /* font-bold */
    color: #111827;
    /* text-gray-900 */
    margin-bottom: 0.5rem;
    /* mb-2 */
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 p {
    font-size: 0.875rem;
    /* text-sm */
    line-height: 1.25rem;
    color: var(--gray-600);
    margin-bottom: 1.5rem;
    /* mb-6 */
    max-width: 20rem;
    /* max-w-xs */
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 .modeo-mega-menu-cta {
    background-color: #ec4899;
    /* bg-pink-500 */
    color: #ffffff;
    /* text-white */
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 .modeo-mega-menu-cta:hover {
    background-color: #db2777;
    /* hover:bg-pink-600 */
}

/* Business CTA - red button variant */
.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 .modeo-mega-menu-cta.bg-red-600 {
    background-color: #dc2626 !important;
    /* bg-red-600 */
}

.modeo-mega-menu .bg-gradient-to-br.from-pink-50.to-pink-100 .modeo-mega-menu-cta.bg-red-600:hover {
    background-color: #b91c1c !important;
    /* hover:bg-red-700 */
}

/* CTA Card Styling */
.modeo-mega-menu .rounded-2xl {
    border-radius: 1rem;
}

.modeo-mega-menu .min-h-\[280px\] {
    min-height: 280px;
}

.modeo-mega-menu .text-center {
    text-align: center;
}

.modeo-mega-menu .max-w-xs {
    max-width: 20rem;
}

/* Business Services Grid */
.modeo-mega-menu .md\:grid-cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Service Card */
.modeo-mega-menu-service-card {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem;
    border-radius: 0.5rem;
    transition: background-color 0.15s ease;
    text-decoration: none;
}

.modeo-mega-menu-service-card:hover {
    background-color: var(--gray-50);
}

.modeo-mega-menu-service-card .service-icon {
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    background-color: rgba(204, 22, 22, 0.1);
    /* primary/10 */
    border-radius: 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary);
    transition: background-color 0.15s ease;
}

.modeo-mega-menu-service-card:hover .service-icon {
    background-color: rgba(204, 22, 22, 0.2);
    /* primary/20 */
}

.modeo-mega-menu-service-card .service-content h4 {
    font-size: 1rem;
    line-height: 1.5rem;
    font-weight: 600;
    color: var(--gray-900);
    transition: color 0.15s ease;
    margin: 0;
}

.modeo-mega-menu-service-card:hover .service-content h4 {
    color: var(--primary);
}

.modeo-mega-menu-service-card .service-content p {
    font-size: 0.875rem;
    line-height: 1.25rem;
    color: var(--gray-600);
    margin-top: 0.25rem;
    margin-bottom: 0;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .modeo-mega-menu {
        top: 64px !important;
        /* Header height = 64px */
        max-height: calc(100vh - 64px);
        overflow-y: auto;
    }

    .modeo-mega-menu .md\:pr-8,
    .modeo-mega-menu .md\:border-r,
    .modeo-mega-menu .md\:pl-0 {
        padding-right: 0;
        padding-left: 0;
        border-right: none;
        border-left: none;
    }

    /* Stack columns on mobile */
    .modeo-mega-menu .grid {
        grid-template-columns: 1fr !important;
    }

    /* Reduce padding on mobile */
    .modeo-mega-menu .px-4 {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .modeo-mega-menu .py-6 {
        padding-top: 1rem;
        padding-bottom: 1rem;
    }
}

/* ============================================
   Mega Menu Performance
   ============================================ */

/* GPU acceleration */
.modeo-mega-menu {
    transform: translateZ(0);
    will-change: transform, opacity;
    backface-visibility: hidden;
}

.modeo-mega-menu[data-mega-menu-open="false"] {
    will-change: auto;
}

/* Smooth scrolling for mega menu content */
.modeo-mega-menu .overflow-y-auto {
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
}

/* ============================================
   Mega Menu Accessibility
   ============================================ */

/* Focus states for keyboard navigation */
.modeo-mega-menu-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
    border-radius: 0.25rem;
}

.modeo-mega-menu-cta:focus-visible {
    outline: 2px solid var(--background);
    outline-offset: 2px;
    border-radius: 0.5rem;
}

/* ============================================
   Mega Menu Animations
   ============================================ */

@keyframes mega-menu-fade-in {
    from {
        opacity: 0;
        transform: translateY(0.5rem);
        /* translate-y-2 = 8px = 0.5rem */
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.modeo-mega-menu[data-mega-menu-open="true"] {
    animation: mega-menu-fade-in 0.2s ease-out;
}