/* CSS for the Mega Menu - Rose Red Branding & Header-Below Overlay */
:root {
    --mm-bg-color: rgba(255, 255, 255, 0.98);
    /* Slightly more opaque */
    --mm-backdrop: 20px;
    --mm-text-dark: #111111;
    --mm-text-gray: #555555;

    /* Brand Colors */
    --mm-brand-primary: #C02C4A;
    /* Rose Red */
    --mm-brand-dark: #9E1F39;
    /* Darker Rose for hover */
    --mm-border: #EEEEEE;

    --mm-font-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --mm-font-heading: 'Montserrat', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

    /* Fallback if JS doesn't set it immediately */
    --header-height: 100px;
}

/* 
 * MAIN WRAPPER 
 * Positioned BELOW the header so the header stays sharp/untouched.
 * The 'top' is determined dynamically by JS.
 */
#rx-mega-menu {
    position: fixed;
    top: var(--header-height, 100px);
    left: 0;
    width: 100%;
    height: calc(100vh - var(--header-height, 100px));
    /* Fill remaining height */
    z-index: 99990;
    /* High, but typically below header if header is 99999 */
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    /* No padding-top needed now as we moved 'top' down */
}

#rx-mega-menu.active {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

/* Backdrop Overlay - Focuses attention on menu */
.rx-mm-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    /* Slightly darker for better focus */
    backdrop-filter: blur(5px);
    /* Moderate blur for page content */
    -webkit-backdrop-filter: blur(5px);
}

/* Main Container */
.rx-mm-container {
    position: relative;
    max-width: 1140px;
    /* Slightly wider */
    margin: 0 auto;
    background: var(--mm-bg-color);
    /* Keep blur inside the menu for frosted implementation if desired, mostly opaque now */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    display: grid;
    grid-template-columns: 260px 1fr 340px;
    /* Adjusted columns */
    overflow: hidden;
    height: 480px;
    font-family: var(--mm-font-body);
    /* Animations - "Curtain Reveal" & Staggered Content */
    /* Initial State: Hidden */
    opacity: 0;
    transform: translateY(-10px);
    clip-path: inset(0 0 100% 0);

    /* CLOSING TRANSITION: Gentle and slightly slower retreat, no sudden snap */
    transition:
        opacity 0.4s ease-out,
        transform 0.4s ease-out,
        clip-path 0.4s ease-out;
}

#rx-mega-menu.active .rx-mm-container {
    /* Active State: Fully revealed */
    opacity: 1;
    transform: translateY(0);
    clip-path: inset(0 0 0 0);

    /* OPENING TRANSITION: Sophisticated easing for the "Spread" effect */
    transition:
        opacity 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1),
        clip-path 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* 
 * 2. Cascading Content Animation 
 * "Waterfall" effect: Text appears top-to-bottom individually 
 */

/* Reset wrapper animations so we can target children */
.rx-mm-sidebar,
.rx-mm-content,
.rx-mm-visual {
    opacity: 1;
    transform: none;
    transition: none;
}

/* Default State: Hidden & slightly up */
.rx-mm-cat-item,
.rx-mm-panel-title,
.rx-mm-sub-list li,
.rx-mm-view-all,
.rx-mm-visual-item {
    opacity: 0;
    transform: translateY(-12px);
    /* Quick reset when closing */
    transition: opacity 0.2s ease, transform 0.2s ease;
}

/* Active State: Visible & Reset Position */
#rx-mega-menu.active .rx-mm-cat-item,
#rx-mega-menu.active .rx-mm-panel-title,
#rx-mega-menu.active .rx-mm-sub-list li,
#rx-mega-menu.active .rx-mm-view-all,
#rx-mega-menu.active .rx-mm-visual-item {
    opacity: 1;
    transform: translateY(0);
    /* Smooth entry easing - Slower duration for "Relaxed" feel */
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* --- STAGGERED DELAYS (The "Relaxed Waterfall" logic) --- */

/* Left Sidebar Items - Step 0.05s */
#rx-mega-menu.active .rx-mm-cat-item:nth-child(1) {
    transition-delay: 0.15s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(2) {
    transition-delay: 0.20s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(3) {
    transition-delay: 0.25s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(4) {
    transition-delay: 0.30s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(5) {
    transition-delay: 0.35s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(6) {
    transition-delay: 0.40s;
}

#rx-mega-menu.active .rx-mm-cat-item:nth-child(n+7) {
    transition-delay: 0.45s;
}

/* Middle Column Items */
#rx-mega-menu.active .rx-mm-panel-title {
    transition-delay: 0.18s;
}

/* Sublinks grid - Step 0.04s */
#rx-mega-menu.active .rx-mm-sub-list li:nth-child(1) {
    transition-delay: 0.22s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(2) {
    transition-delay: 0.26s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(3) {
    transition-delay: 0.30s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(4) {
    transition-delay: 0.34s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(5) {
    transition-delay: 0.38s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(6) {
    transition-delay: 0.42s;
}

#rx-mega-menu.active .rx-mm-sub-list li:nth-child(n+7) {
    transition-delay: 0.46s;
}

/* View All Link - Conclusion */
#rx-mega-menu.active .rx-mm-view-all {
    transition-delay: 0.50s;
}

/* Right Visual - Appear as a finale after text */
#rx-mega-menu.active .rx-mm-visual-item {
    transition-delay: 0.55s;
}


/* Remove old keyframes if no longer needed, or keep for fallback */
/* LEFT COLUMN: Sidebar */
.rx-mm-sidebar {
    background: #fcfcfc;
    /* Very subtle grey */
    border-right: 1px solid var(--mm-border);
    padding: 25px 0;
    overflow-y: auto;
}

.rx-mm-cat-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.rx-mm-cat-item {
    position: relative;
    /* For pseudo-element positioning */
    padding: 14px 28px;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--mm-text-dark);
    font-size: 16px;
    /* Match menu size approx */
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    line-height: 1.4;
}

/* Hover & Active State - Rose Red */
.rx-mm-cat-item:hover,
.rx-mm-cat-item.active {
    background: #fff;
    /* White background on active looks cleaner */
    color: var(--mm-brand-primary);
    /* Subtle lift */
    font-weight: 600;
}

/* Rose Red Indicator Bar on Active */
.rx-mm-cat-item.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 10px;
    bottom: 10px;
    width: 3px;
    background-color: var(--mm-brand-primary);
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;
}

.rx-mm-arrow {
    font-size: 18px;
    opacity: 0;
    transform: translateX(-5px);
    transition: all 0.2s;
    font-family: sans-serif;
    /* Keep arrow simple */
}

.rx-mm-cat-item.active .rx-mm-arrow {
    opacity: 1;
    transform: translateX(0);
}


/* MIDDLE COLUMN: Sub Links - Underline Effect */
.rx-mm-content {
    padding: 40px 50px;
    overflow-y: auto;
}

.rx-mm-panel {
    display: none;
    animation: fadeIn 0.3s ease;
}

.rx-mm-panel.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(5px);
    }

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

.rx-mm-panel-title {
    font-family: var(--mm-font-heading);
    /* Match Heading Font */
    font-size: 24px;
    font-weight: 700;
    color: var(--mm-text-dark);
    margin-bottom: 25px;
    letter-spacing: -0.5px;
    border-bottom: none;
    /* Removed border for cleaner look */
}

.rx-mm-sub-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Two columns for sub-items if many */
    gap: 12px 30px;
}

.rx-mm-sub-list li a {
    color: var(--mm-text-gray);
    font-size: 15px;
    text-decoration: none;
    display: inline-block;
    /* Required for ::after positioning */
    position: relative;
    /* Context for underline */
    padding: 4px 0;
    transition: color 0.2s;
}

/* Underline Animation */
.rx-mm-sub-list li a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 2px;
    width: 0;
    height: 1px;
    background-color: var(--mm-brand-primary);
    transition: width 0.3s ease;
}

.rx-mm-sub-list li a:hover {
    color: var(--mm-brand-primary);
    /* Optional text color change, user asked mostly related to underline */
}

.rx-mm-sub-list li a:hover::after {
    width: 100%;
}

/* CTA (View All) - Rose Red Default */
.rx-mm-view-all {
    display: inline-flex;
    align-items: center;
    margin-top: 35px;
    color: var(--mm-brand-primary);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.rx-mm-view-all:hover {
    color: var(--mm-brand-dark);
}

.rx-mm-view-all span {
    margin-left: 4px;
    transition: transform 0.2s;
}

.rx-mm-view-all:hover span {
    transform: translateX(4px);
}

/* RIGHT COLUMN: Visuals */
.rx-mm-visual {
    background: #fff;
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    border-left: 1px solid var(--mm-border);
}

.rx-mm-visual-item {
    display: none;
    width: 100%;
    height: 100%;
    /* Fill space */
    flex-direction: column;
}

.rx-mm-visual-item.active {
    display: flex;
    animation: zoomIn 0.4s ease;
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.98);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

.rx-mm-visual-item img {
    width: 100%;
    height: 280px;
    /* Fixed height for consistency */
    object-fit: cover;
    /* Ensure image covers area well */
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
    /* Softer shadow */
}

.rx-mm-visual-caption {
    margin-top: 20px;
    text-align: center;
}

.rx-mm-visual-caption h4 {
    font-family: var(--mm-font-heading);
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 5px 0;
    color: var(--mm-text-dark);
}

.rx-mm-visual-caption p {
    font-size: 14px;
    color: var(--mm-text-gray);
    margin: 0;
    line-height: 1.5;
}

/* Responsive Hide for Mobile */
@media (max-width: 921px) {
    #rx-mega-menu {
        display: none !important;
    }
}