/* =========================================
   WEST SLOPE CUSTOM MENU - VERSION 7.0 (Final Alignments)
   ========================================= */

:root {
    /* Header Vars */
    --wsde-text-color: #ffffff;
    --wsde-hover-color: #ffffff;
    --wsde-active-color: #ffffff;
    --wsde-hamburger-color: #ffffff;
    --wsde-mobile-bg: #ffffff;
    --wsde-mobile-text: #2c3e50;
    
    /* Footer Vars */
    --wsde-footer-text: #ffffff;
    --wsde-footer-hover: #ffffff;
    --wsde-footer-active: #ffffff;
    --wsde-footer-bg: #ffffff;
    --wsde-footer-mobile-text: #2c3e50;

    /* Type & Layout */
    --wsde-desktop-font-size: 15px;
    --wsde-desktop-gap: 35px;
    --wsde-dropdown-width: 240px;
    --wsde-dropdown-offset: 15px;
    --wsde-mobile-font-size: 16px;
    
    --wsde-font: 'Montserrat', sans-serif;
}

.wsde-header-wrapper {
    width: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-end; 
}

/* =========================================
   DESKTOP STYLES
   ========================================= */
.wsde-desktop-nav { display: block; }

.wsde-desktop-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; align-items: center; 
    gap: var(--wsde-desktop-gap);
}

.wsde-desktop-list > li { position: relative; }
.wsde-desktop-list > li > a {
    text-decoration: none; font-family: var(--wsde-font);
    font-weight: 600; 
    font-size: var(--wsde-desktop-font-size);
    letter-spacing: 0.5px;
    color: var(--wsde-text-color); 
    padding: 20px 0; display: block; position: relative; transition: color 0.3s ease;
}

/* FOOTER OVERRIDE */
.wsde-is-footer .wsde-desktop-list > li > a { color: var(--wsde-footer-text); }

/* Hover Underline */
.wsde-desktop-list > li > a::after {
    content: ''; position: absolute; width: 0; height: 2px;
    bottom: 5px; left: 0; 
    background-color: var(--wsde-hover-color); 
    transition: width 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.wsde-desktop-list > li:hover > a { color: var(--wsde-hover-color); }
.wsde-desktop-list > li:hover > a::after { width: 100%; }

/* FOOTER HOVER */
.wsde-is-footer .wsde-desktop-list > li > a::after { background-color: var(--wsde-footer-hover); }
.wsde-is-footer .wsde-desktop-list > li:hover > a { color: var(--wsde-footer-hover); }

/* Active State */
.wsde-desktop-list > li.current-menu-item > a { color: var(--wsde-active-color) !important; }
.wsde-desktop-list > li.current-menu-item > a::after { width: 100%; background-color: var(--wsde-active-color); }

/* FOOTER ACTIVE */
.wsde-is-footer .wsde-desktop-list > li.current-menu-item > a { color: var(--wsde-footer-active) !important; }
.wsde-is-footer .wsde-desktop-list > li.current-menu-item > a::after { background-color: var(--wsde-footer-active); }

/* --- DROPDOWNS (Level 1) --- */
.wsde-desktop-list ul.sub-menu {
    position: absolute; top: 100%; 
    right: 0; left: auto;
    
    width: var(--wsde-dropdown-width);
    background: white; box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    border-radius: 4px;
    
    opacity: 0; visibility: hidden; 
    transform: translateY(var(--wsde-dropdown-offset));
    transition: all 0.3s ease; z-index: 1000; padding: 0; list-style: none;
    text-align: left;
}
.wsde-desktop-list li:hover > ul.sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }

/* Dropdown Links */
.wsde-desktop-list ul.sub-menu a {
    display: block; padding: 12px 20px; text-decoration: none;
    color: #2c3e50;
    font-family: var(--wsde-font); font-size: 14px; font-weight: 500;
    transition: all 0.2s;
    display: flex; justify-content: space-between;
}
.wsde-desktop-list ul.sub-menu a:hover {
    background-color: #f9f9f9; color: #862835; padding-left: 28px;
}

/* --- LEVEL 2+ (Grandchildren) --- */
.wsde-desktop-list ul.sub-menu ul.sub-menu {
    top: 0 !important; /* FORCE ALIGNMENT TO TOP */
    right: 100%; 
    left: auto;
    margin-right: 2px;
    transform: translateX(10px);
    max-height: 400px;
    overflow-y: auto;
}
.wsde-desktop-list ul.sub-menu li:hover > ul.sub-menu { transform: translateX(0); }

.wsde-desktop-list ul.sub-menu li.menu-item-has-children > a::after {
    content: '‹'; font-size: 18px; line-height: 1;
}

/* SMART POSITIONING CLASSES */
.wsde-desktop-list ul.sub-menu ul.sub-menu.open-right {
    right: auto; left: 100%; margin-left: 2px; margin-right: 0;
}
.wsde-desktop-list ul.sub-menu li.menu-item-has-children > ul.open-right ~ a::after { content: '›'; }

.wsde-desktop-list ul.sub-menu.open-up {
    top: auto; bottom: 100%; margin-bottom: 2px; transform: translateY(-10px);
}
.wsde-desktop-list li:hover > ul.sub-menu.open-up { transform: translateY(0); }

/* FIX: Ensure Grandchildren align STRAIGHT ACROSS in Footer Dropups */
.wsde-desktop-list ul.sub-menu ul.sub-menu.open-up {
    bottom: auto; top: 0 !important; transform: translateX(10px);
}
.wsde-desktop-list ul.sub-menu li:hover > ul.sub-menu.open-up { transform: translateX(0); }


/* =========================================
   MOBILE MENU (HAMBURGER)
   ========================================= */
.wsde-mobile-wrapper { display: none; }

@media (max-width: 1024px) {
    .wsde-desktop-nav { display: none !important; }
    .wsde-mobile-wrapper { display: flex !important; flex-direction: column; align-items: flex-end; }
}

.wsde-menu-toggle {
    background: transparent; border: none; cursor: pointer; padding: 10px; 
    z-index: 999999;
}
.wsde-hamburger-box { width: 32px; height: 24px; position: relative; }
.wsde-bar-top, .wsde-bar-mid, .wsde-bar-bot {
    position: absolute; left: 0; width: 100%; height: 3px;
    background-color: var(--wsde-hamburger-color); 
    border-radius: 4px; transition: 0.3s;
}

/* FOOTER OVERRIDE */
.wsde-is-footer .wsde-bar-top, 
.wsde-is-footer .wsde-bar-mid, 
.wsde-is-footer .wsde-bar-bot { 
    background-color: var(--wsde-footer-text); 
}

.wsde-bar-top { top: 0; }
.wsde-bar-mid { top: 10px; opacity: 1; }
.wsde-bar-bot { top: 20px; }

/* Open State */
.wsde-mobile-wrapper.open .wsde-bar-top { transform: rotate(45deg); top: 10px; }
.wsde-mobile-wrapper.open .wsde-bar-mid { opacity: 0; transform: translateX(-10px); }
.wsde-mobile-wrapper.open .wsde-bar-bot { transform: rotate(-45deg); top: 10px; }

/* --- DROPDOWN CONTAINER --- */
.wsde-menu-container {
    position: absolute; 
    right: 0; 
    width: 280px; 
    background-color: var(--wsde-mobile-bg);
    border-radius: 8px; box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    opacity: 0; visibility: hidden; 
    transition: 0.3s ease; z-index: 999998;
    max-height: 70vh; overflow-y: auto;
}

/* HEADER: DROP DOWN */
.wsde-header-wrapper:not(.wsde-is-footer) .wsde-menu-container {
    top: 60px; 
    transform: translateY(-10px);
}
.wsde-header-wrapper:not(.wsde-is-footer) .wsde-mobile-wrapper.open .wsde-menu-container {
    opacity: 1; visibility: visible; transform: translateY(0);
}

/* FOOTER: DROP UP (ANCHORED & CENTERED BY JS) */
.wsde-is-footer .wsde-menu-container {
    position: absolute !important; /* ANCHORED to page, allows scrolling */
    bottom: 100% !important; /* Above button */
    top: auto !important;
    
    /* We use JS to set the Left position for centering, 
       but set default here just in case */
    right: 0; 
    
    margin-bottom: 20px; /* Space above X */
    transform: translateY(10px);
    width: 300px; /* Fixed width for calculation */
    max-width: 90vw; /* Don't overflow screen */
    
    background-color: var(--wsde-footer-bg);
    border-bottom: 3px solid var(--wsde-footer-text);
}

.wsde-is-footer .wsde-mobile-wrapper.open .wsde-menu-container {
    opacity: 1; visibility: visible; 
    transform: translateY(0);
}

/* Links */
.wsde-mobile-list { list-style: none; padding: 0; margin: 0; }
.wsde-mobile-list li { border-bottom: 1px solid rgba(0,0,0,0.05); }
.wsde-mobile-list li a {
    display: block; padding: 16px 24px; text-decoration: none;
    color: var(--wsde-mobile-text);
    font-family: var(--wsde-font); font-weight: 600; 
    font-size: var(--wsde-mobile-font-size);
    transition: 0.2s;
}
.wsde-is-footer .wsde-mobile-list li a { color: var(--wsde-footer-mobile-text); }
.wsde-mobile-list li a:hover { background: rgba(0,0,0,0.03); padding-left: 28px; }

/* Submenu */
.wsde-mobile-list ul.sub-menu { display: none; background-color: rgba(0,0,0,0.03); }
.wsde-mobile-list li.open-sub > ul.sub-menu { display: block; }
.wsde-mobile-list ul.sub-menu a { padding-left: 40px; font-size: 15px; font-weight: 500; }

.mobile-arrow {
    float: right; width: 30px; height: 30px; text-align: center; font-weight: bold; cursor: pointer; transition: transform 0.3s;
    color: var(--wsde-mobile-text);
}
.wsde-is-footer .mobile-arrow { color: var(--wsde-footer-mobile-text); }
.wsde-mobile-list li.open-sub > a .mobile-arrow { transform: rotate(180deg); }