/* Hide mobile-only view category links on desktop */
.mc-mega-mobile-view-cat {
    display: none !important;
}
/* Freeze body scroll when mega menu is open */
body.mc-mega-menu-is-open {
    overflow: hidden !important;
}

/* Dim overlay behind the menu */
.mc-mega-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mc-mega-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   Millican Conservancy - Mega Menu Styles (Definitive Clean Version)
   Brand Color: #62564a (Muted Brown)
   ========================================================================== */

/* --- 1. STRICT DESKTOP FALLBACKS (Hide Mobile UI) --- */
/* Completely disable the theme's native active page underline on main nav items so they never get stuck */
.main-head .lower-nav .navbar-nav > li.current-menu-item > a::after,
.main-head .lower-nav .navbar-nav > li.current-menu-ancestor > a::after,
.main-head .lower-nav .navbar-nav > li.current_page_item > a::after,
.main-head .lower-nav .navbar-nav > li.current-menu-item > a::before,
.main-head .lower-nav .navbar-nav > li.current-menu-ancestor > a::before,
.main-head .lower-nav .navbar-nav > li.current_page_item > a::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

@media (min-width: 992px) {
    .mc-mega-mobile-back,
    .mc-mega-mobile-back-level-2,
    .mc-mega-mobile-view-cat {
        display: none !important;
    }
}

/* --- 2. SEAMLESS HEADER INTEGRATION --- */
body.mc-mega-menu-is-open #header-outer,
body.mc-mega-menu-is-open #header-outer[data-format="default"],
body.mc-mega-menu-is-open #header-outer[data-format="centered-menu"],
body.mc-mega-menu-is-open #header-outer header,
body.mc-mega-menu-is-open .main-head,
body.mc-mega-menu-is-open .main-head .lower-nav {
    background-color: #62564a !important;
    border: none !important;
    border-bottom: none !important;
    box-shadow: none !important;
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}

/* Force ALL top-level underlines to be hidden EXCEPT the one that is currently opened */
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li:not(.is-active-level) > a::after,
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li:not(.is-active-level) > a::before {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li:not(.is-active-level) > a {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* Guarantee white text & active state in header */
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li > a {
    color: rgba(255, 255, 255, 0.8) !important;
}
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li.is-active-level > a {
    color: #ffffff !important;
    opacity: 1 !important;
}
body.mc-mega-menu-is-open .main-head .lower-nav .navbar-nav > li.is-active-level > a::after {
    content: '' !important;
    position: absolute !important;
    bottom: -5px !important;
    left: 0 !important;
    width: 100% !important;
    height: 2px !important;
    background-color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

/* --- 3. GLOBAL DROPDOWN CONTAINER --- */
.mc-mega-dropdown {
    position: absolute;
    top: 100%;
    min-height: 500px !important;
        overflow-x: hidden !important;
    left: 0;
    width: 100%;
    right: 0;
    background-color: #62564a !important;
    color: #fff !important;
    box-shadow: none !important;
    z-index: 95;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    border-top: none !important;
    margin-top: -2px !important; /* Closes 1px sub-pixel gap */
}

.mc-mega-dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.mc-mega-dropdown__inner {
    max-width: none !important; 
    padding: 0 0 clamp(20px, 4vh, 40px) max(40px, calc(46vw - 600px)) !important; /* Left alignment aligned with logo */
    padding-right: 0 !important; 
    margin: 0;
    display: flex;
    gap: clamp(30px, 6vh, 60px);
}

/* Global Close Button */
.mc-mega-dropdown__close { 
    position: absolute !important;
    cursor: pointer !important; 
    background-color: #a03223 !important;
    color: #fff !important; 
    border-radius: 50%; 
    opacity: 1; 
    border: none; 
    width: 40px !important; 
    height: 40px !important; 
    display: flex !important; 
    align-items: center !important; 
    justify-content: center !important; 
    top: 15px !important; 
    right: 30px !important; 
    z-index: 99;
    transition: background-color 0.2s ease;
}
.mc-mega-dropdown__close:hover { 
    background-color: rgba(255,255,255,0.2) !important; 
}
.mc-mega-dropdown__close *, .mc-mega-dropdown__close svg { 
    cursor: pointer !important; 
    pointer-events: none; 
}

/* --- 4. HEADER TITLE (Optional) --- */
.mc-mega-dropdown__header { 
    position: relative !important;
    width: 100%; 
    max-width: none !important;
    box-sizing: border-box;
    border-bottom: none; 

    /* Move up (padding-top: 0) and dynamically calculate right padding so it never overlaps the fluid image */
    padding: 0 calc(100vw - max(40px, calc(46vw - 600px)) - 670px) clamp(10px, 2vh, 20px) max(40px, calc(46vw - 600px)) !important;
}

.mc-mega-dropdown__header-subtitle { 
    color: #fff !important; 
    margin: 0 0 clamp(10px, 2vh, 20px) 0 !important; 
    font-style: normal !important; 
    opacity: 1 !important;
    white-space: normal !important;
    line-height: 1.2 !important;

    /* Garamond styling matching mockup */
    font-family: "adobe_garamond_proregular", "Garamond", serif !important;
    font-size: 32px !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: 0 !important;
}

/* --- 5. DESKTOP 3-COLUMN LAYOUT --- */

/* Col 1: Tabs */
.mc-mega-dropdown__tabs {
    flex: 0 0 300px;
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    padding: 0 20px 0 0 !important; /* Flush top, flush left */
    box-sizing: border-box !important;
}
.mc-mega-dropdown__tab-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: transparent;
    border: none !important;
    padding: 10px 20px 10px 0 !important;
    margin: 0 !important;
    text-align: left;
    font-size: 18px !important;
    line-height: 1.3 !important;
    height: auto;
    color: #fff;
    cursor: pointer;
}
.mc-mega-dropdown__tab-arrow {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.2s ease;
    width: 20px;
    height: 20px;
    color: #fff;
}
.mc-mega-dropdown__tab-btn:hover,
.mc-mega-dropdown__tab-btn.is-active {
    color: #fff !important;
    background-color: transparent !important;
}
.mc-mega-dropdown__tab-btn.is-active { font-weight: bold; }
.mc-mega-dropdown__tab-btn.is-active .mc-mega-dropdown__tab-arrow {
    opacity: 1;
    transform: translateX(0);
}

/* Right Area: Panels */
.mc-mega-dropdown__panels {
    flex: 1;
    position: static !important; /* MUST BE STATIC SO IMAGE CAN TOUCH TOP OF MEGA MENU */
    z-index: 50;
    display: flex;
    flex-direction: column;
}
.mc-mega-dropdown__pane {
    display: none;
    width: 100%;
    gap: 40px;
}
.mc-mega-dropdown__pane.is-active {
    display: flex;
    position: static;
    flex: 1;
}

/* Col 2: Links & Content */
.mc-mega-dropdown__links {
    flex: 0 0 350px !important; /* Fixed width */
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px !important;
    padding: 0 40px clamp(40px, 8vh, 80px) 0 !important; /* Flush top, 80px bottom to prevent text overlapping CTA */
    position: static !important; /* Must be static so CTA positions relative to panels */
    pointer-events: auto;
    min-height: 100%; 
    box-sizing: border-box !important; 
}
.mc-mega-mobile-view-cat {
        font-size: 18px !important;
        font-weight: bold !important;
        display: block !important;
        padding: 15px 0 20px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        margin-bottom: 0 !important;
        color: #a03223 !important;
    }
    .mc-mega-dropdown__desc { 
    font-size: 16px; 
    line-height: 1.6; 
    color: #ffffff !important; 
    margin: 0 0 20px 0;  
    max-width: 90%; 
    padding-right: 30px; 
}
.mc-mega-dropdown__link-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr; /* Default 1 column */
    gap: 10px 20px;
    width: 100%;
}
/* If there are more than 5 items, switch to 2 columns */
.mc-mega-dropdown__link-list:has(> li:nth-child(6)) {
    grid-template-columns: repeat(2, 1fr);
}
.mc-mega-dropdown__link-item { margin: 0; padding: 0; }
.mc-mega-dropdown__link { 
    transition: all 0.2s ease; 
    display: flex;
    align-items: center;
    gap: 5px !important;
    color: #fff !important;
    text-decoration: none !important; 
    border-bottom: none !important;
    font-size: 18px !important;
    font-weight: 500;
    padding: 10px 0 !important; /* REVERTED TO ORIGINAL 10px */
    margin: 0 !important;
    line-height: 1.3 !important;
    cursor: pointer !important;
}
.mc-mega-dropdown__link:hover {
    background-color: transparent !important; 
    color: #fff !important;
    font-weight: bold !important; /* Match active tab effect */
}

/* Consistent CTA Button (Forced to bottom using flex order) */
.mc-mega-dropdown__consistent-cta {
    position: absolute !important; 
    bottom: clamp(15px, 4vh, 40px) !important; 
    left: calc(max(40px, calc(46vw - 600px)) + 360px) !important; /* Math updated for new 600px offset */
    margin: 0 !important; 
    padding: 0 !important;
    width: 350px !important; 

    right: auto !important;
    width: 310px !important; /* Perfectly constrained to the 350px column with a 40px gap */
    display: flex !important;
    justify-content: flex-start !important;
}
.mc-mega-dropdown__consistent-cta .mc-mega-dropdown__promo-btn {
    display: inline-block;
    background-color: #a03223 !important;
    color: #fff !important;
    padding: 12px 24px;
    border-radius: 0;
    font-size: 14px;
    font-weight: bold;
    text-decoration: none !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.2s ease;

    white-space: normal !important;
    text-align: left !important;
    line-height: 1.3 !important;
    height: auto !important;
}
.mc-mega-dropdown__consistent-cta .mc-mega-dropdown__promo-btn:hover { background-color: #80281c !important; }

/* Col 3: Promo Image */
.mc-mega-dropdown__promo,
body .mc-mega-dropdown__promo {
    position: absolute !important;
    top: 0 !important;
    /* Dynamically start exactly after the center column */
    left: calc(max(40px, calc(46vw - 600px)) + 710px) !important;
    right: 0 !important;
    bottom: 0 !important;
    min-height: 100% !important;
    width: auto !important; /* Fill remaining space perfectly without overlapping */
    max-width: none !important; 
    min-width: 0 !important;
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    overflow: hidden !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 10;
}
.mc-mega-dropdown__promo-bg-picture, 
.mc-mega-dropdown__promo-bg-img,
.mc-mega-dropdown__promo picture,
.mc-mega-dropdown__promo img,
body .mc-mega-dropdown__promo img { 
    position: absolute !important; 
    top: -2px !important; /* Cover subpixel gaps but clipped cleanly by parent overflow: hidden */
    left: -2px !important; 
    width: calc(100% + 4px) !important; 
    height: calc(100% + 4px) !important; 
    min-height: 100% !important; 
    max-height: none !important; 
    max-width: none !important; 
    object-fit: cover !important; 
    z-index: 1 !important; 
    display: block !important; 
    border-radius: 0 !important;
    -webkit-border-radius: 0 !important;
    -moz-border-radius: 0 !important;
    box-shadow: none !important;
}


/* Freeze body scroll when mega menu is open */
body.mc-mega-menu-is-open {
    overflow: hidden !important;
}

/* Dim overlay behind the menu */
.mc-mega-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
}
.mc-mega-overlay.is-visible {
    opacity: 1;
    visibility: visible;
}

/* ==========================================================================
   --- 6. MOBILE DRILL-DOWN LAYOUT (Clean White UI) ---
   ========================================================================== */
@media (max-width: 991px) {
    /* Prevent visual glitch on open: disable dimension transitions on mobile so it snaps to full screen and only fades opacity */
    .mc-mega-dropdown {
        transition: opacity 0.15s ease-out, visibility 0.15s ease-out !important;
        transform: none !important;
    }
    /* Hide sibling top-level menu links if another is opened */
    body.mc-mega-menu-is-open .main-nav > ul > li.mc-nav-item:not(.is-active-level) {
        display: none !important;
    }
    
    /* Full screen overlay for the whole dropdown - WHITE THEME */
    .mc-mega-dropdown.is-open {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        background-color: #ffffff !important;
        color: #333333 !important;
        z-index: 999999 !important;
        overflow-x: hidden !important;
        overflow-y: auto !important;
        margin: 0 !important;
        padding: 0 0 50px 0 !important; /* safe area padding */
    }

    /* Remove tap highlight on mobile nav triggers */
    .mc-nav-item > a, .mc-nav-item > a:active, .mc-nav-item > a:focus, .mc-nav-item.is-active-level > a {
        background-color: transparent !important;
        -webkit-tap-highlight-color: rgba(0,0,0,0) !important;
    }

    /* Force text colors to dark on mobile even on hover/active */
    .mc-mega-dropdown__header-title,
    .mc-mega-dropdown__header-subtitle,
    .mc-mega-dropdown__tab-btn,
    .mc-mega-dropdown__tab-btn:hover,
    .mc-mega-dropdown__tab-btn.is-active,
    .mc-mega-dropdown__link,
    .mc-mega-dropdown__link:hover {
        color: #333333 !important;
    }
    
    /* Red Back Buttons (Clean text style, not a thick red stripe) */
    .mc-mega-mobile-back,
    .mc-mega-mobile-back-level-2 {
        background-color: #ffffff !important;
        color: #a03223 !important; /* Red text */
        font-size: 16px !important;
        font-weight: bold !important;
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        padding: 15px 20px !important;
        margin: 0 !important;
        cursor: pointer !important;
        border: none !important;
        border-radius: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #eeeeee !important;
    }
    .mc-mega-mobile-back svg,
    .mc-mega-mobile-back-level-2 svg {
        margin-left: -5px;
    }

    /* Header (EXPLORE / CONNECT) */
    .mc-mega-dropdown__header {
        position: relative !important; /* Stack normally on mobile */
        padding: 20px 20px 0 20px !important;
        box-sizing: border-box !important;
    }
    .mc-mega-dropdown__header-subtitle {
        color: #333333 !important; /* Dark on mobile */
        font-family: "adobe_garamond_proregular", "Garamond", serif !important;
        font-size: 24px !important; /* Proper heading size */
        line-height: 1.3 !important;
        white-space: normal !important;
        margin-bottom: 20px !important;
    }

    /* Level 2 Tabs */
    .mc-mega-dropdown__inner {
        padding: 0 !important;
        gap: 0 !important;
    }
    .mc-mega-dropdown__tabs {
        width: 100% !important; 
        flex: none !important; 
        border-right: none !important; 
        border-bottom: none !important; 
        padding: 0 !important; 
        gap: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important; 
    }
    .mc-mega-dropdown__tab-btn {
        padding: 15px 20px !important;
        border-radius: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        border-bottom: 1px solid #eeeeee !important;
        color: #333333 !important;
    }

    /* Hide the tab arrow completely on mobile so the first item doesn't look 'active' or pre-selected */
    .mc-mega-dropdown__tab-arrow {
        display: none !important;
    }

    /* Hide Desktop Promo Close button on mobile */
    .mc-mega-dropdown__close {
        display: none !important;
    }

    /* Level 3 Panes (The Sub-Sub Menu) */
    .mc-mega-dropdown__panels {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 !important;
        position: relative !important;
    }
    
    .mc-mega-dropdown__pane {
        padding: 0 !important;
        margin: 0 !important;
    }

    /* When Level 3 is open, hide Level 2 (Tabs & Header) */
    .mc-mega-dropdown.is-level-3-open .mc-mega-dropdown__header,
    .mc-mega-dropdown.is-level-3-open .mc-mega-dropdown__tabs,
    .mc-mega-dropdown.is-level-3-open .mc-mega-mobile-back {
        display: none !important;
    }

    /* Make the active pane take over */
    .mc-mega-dropdown__pane.is-active {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    /* Content & Links Layout Overrides */
    .mc-mega-dropdown__links { 
        width: 100% !important; 
        flex: none !important; 
        box-sizing: border-box !important; 
        padding: 0 20px !important; /* Adding side padding so text doesn't touch screen edge */
    }
    .mc-mega-dropdown__link-list {
        display: flex !important;
        flex-direction: column !important;
        gap: 0 !important;
    }
    .mc-mega-dropdown__link {
        padding: 15px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        color: #333333 !important; 
    }
    .mc-mega-mobile-view-cat {
        font-size: 18px !important;
        font-weight: bold !important;
        display: block !important;
        padding: 15px 0 20px 0 !important;
        border-bottom: 1px solid #eeeeee !important;
        margin-bottom: 0 !important;
        color: #a03223 !important;
    }
    .mc-mega-dropdown__desc {
        color: #666666 !important;
    }
    
    .mc-mega-dropdown__consistent-cta {
        position: relative !important; /* Stack normally on mobile */
        bottom: auto !important;
        left: auto !important;
        margin-top: 20px !important;
        width: 100% !important;
    
    right: auto !important;
    width: 310px !important; /* Perfectly constrained to the 350px column with a 40px gap */
    display: flex !important;
    justify-content: flex-start !important;

        right: auto !important;
        width: 100% !important;
}

    /* Make promo image flexible block on mobile */
    .mc-mega-dropdown__promo {
        position: relative !important; /* Stack normally on mobile */
        flex: none !important;
        width: 100% !important;
        height: 250px !important;
        max-width: none !important;
        min-width: 0 !important;
        margin-top: 20px !important;
    }
}