/* MenuList Frontend - Complete Rewrite */
/* Global WordPress Fonts and Reset */

.menulist-container {
    background: transparent;
    margin: 0;
    padding: 0;
    width: 100%;
    box-sizing: border-box;
}

/* Default fonts for themed containers (not no-style) */
.menulist-container:not(.menulist-theme-no-style):not(.menulist-theme-default) {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
    font-size: 14px;
    line-height: 1.4;
    color: #1d2327;
}

.menulist-container *,
.menulist-container *::before,
.menulist-container *::after {
    box-sizing: border-box;
}

/* Base Menu Structure */
.menulist {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
}

.menulist-item {
    margin: 0;
    padding: 0;
    background: transparent;
    position: relative;
    display: block;
}

/* Menu Links - Base Styling */
.menulist-link {
    display: block;
    text-decoration: none;
    color: inherit;
    padding: 8px 12px;
    margin: 0;
    border: none;
    background: transparent;
    font-size: inherit;
    font-family: inherit;
    line-height: inherit;
    transition: none;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.menulist-link:hover,
.menulist-link:focus {
    text-decoration: none;
    outline: none;
}

/* Parent Items with Children */
.menulist-item.has-children {
    position: relative;
}

.menulist-item.has-children > .menulist-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    width: 100%;
}

.menulist-item.has-children > .menulist-parent .menulist-link {
    flex: 1;
    margin: 0;
    padding: 8px 12px;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Toggle Button - WordPress Style */
.menulist-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    margin: 0 4px 0 8px;
    color: #646970;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    border-radius: 2px;
    transition: none;
}

.menulist-toggle:hover,
.menulist-toggle:focus {
    background: none !important;
    background-color: transparent !important;
    color: inherit !important;
    border-color: inherit !important;
    outline: none !important;
    box-shadow: none !important;
}

/* Custom SVG Arrow Icons */
.menulist-toggle::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xNS43MDcgOC40NzJsLTcuMzU0IDcuMzU0LTAuNzA3LTAuNzA3IDYuMTQ2LTYuMTQ2aC0xMi43OTJ2LTFoMTIuNzkzbC02LjE0Ny02LjE0OCAwLjcwNy0wLjcwNyA3LjM1NCA3LjM1NHoiIGZpbGw9ImN1cnJlbnRDb2xvciIgLz4KPC9zdmc+');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

.menulist-toggle[aria-expanded="true"]::before {
    background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNyIgdmlld0JveD0iMCAwIDE3IDE3Ij4KPGc+CjwvZz4KCTxwYXRoIGQ9Ik0xNS44NTQgOC44NTRsLTcuMzU0IDcuMzUzLTcuMzU0LTcuMzUzIDAuNzA3LTAuNzA3IDYuMTQ3IDYuMTQ2di0xMy4yOTNoMXYxMy4yOTNsNi4xNDYtNi4xNDYgMC43MDggMC43MDd6IiBmaWxsPSJjdXJyZW50Q29sb3IiIC8+Cjwvc3ZnPg==');
}

/* Submenu Structure */
.menulist-submenu {
    list-style: none;
    margin: 0 !important;
    padding: 0;
    background: transparent;
    overflow: hidden;
}

.menulist-submenu .menulist-item {
    margin-left: 20px;
    position: relative;
}

.menulist-submenu .menulist-item::before {
    content: "";
    position: absolute;
    left: -20px;
    top: 0;
    bottom: 0;
    width: 1px;
    background: #ddd;
}

.menulist-submenu .menulist-link {
    padding: 6px 12px;
    font-size: 13px;
    color: #646970;
}

.menulist-submenu .menulist-link:hover,
.menulist-submenu .menulist-link:focus {
    color: #135e96;
}

/* Nested Submenus */
.menulist-submenu .menulist-submenu .menulist-item {
    margin-left: 40px;
}

.menulist-submenu .menulist-submenu .menulist-link {
    padding: 4px 12px;
    font-size: 12px;
}

/* Hidden State */
.menulist-submenu.collapsed {
    display: none;
}

/* Screen Reader Text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal;
}

/* Focus Management */
.menulist-container *:focus {
    outline: 1px solid #135e96;
    outline-offset: 1px;
}

/* ========================================
   THEME 1: NO STYLE (DEFAULT) - WordPress Style
   ======================================== */

.menulist-theme-no-style,
.menulist-theme-default,
.menulist-container:not([class*="menulist-theme-"]) {
    /* Inherit global WordPress theme fonts and styling */
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.menulist-theme-no-style .menulist-link,
.menulist-theme-default .menulist-link,
.menulist-container:not([class*="menulist-theme-"]) .menulist-link {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}

.menulist-theme-no-style .menulist-submenu .menulist-link,
.menulist-theme-default .menulist-submenu .menulist-link,
.menulist-container:not([class*="menulist-theme-"]) .menulist-submenu .menulist-link {
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}









/* ========================================
   THEME: THEMIFY - Calendar Style Design
   ======================================== */

.menulist-theme-themify {
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
}

.menulist-theme-themify .menulist-item {
    border-bottom: 1px solid #f0f0f0;
    position: relative;
}

.menulist-theme-themify .menulist-item:last-child {
    border-bottom: none;
}

.menulist-theme-themify .menulist-link {
    padding: 16px 20px;
    color: #333333;
    font-weight: 500;
    transition: all 0.2s ease;
    display: block;
    text-decoration: none;
}

.menulist-theme-themify .menulist-link:hover,
.menulist-theme-themify .menulist-link:focus {
    background-color: #f8f9fa;
    color: #ff8c00;
    text-decoration: none;
}

/* Parent Items with Children */
.menulist-theme-themify .menulist-item.has-children > .menulist-parent {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    width: 100%;
    padding: 0;
    margin: 0;
    transition: background-color 0.2s ease;
}

/* Parent hover - applies grey background to entire parent area */
.menulist-theme-themify .menulist-item.has-children > .menulist-parent:hover {
    background-color: #f8f9fa;
}

/* Remove individual link hover for parent items since parent handles it */
.menulist-theme-themify .menulist-item.has-children > .menulist-parent .menulist-link {
    flex: 1;
    padding: 16px 20px;
    margin: 0;
    border-radius: 0;
}

.menulist-theme-themify .menulist-item.has-children > .menulist-parent .menulist-link:hover,
.menulist-theme-themify .menulist-item.has-children > .menulist-parent .menulist-link:focus {
    background-color: transparent;
    color: #ff8c00;
}

/* Parent hover - change link color */
.menulist-theme-themify .menulist-item.has-children > .menulist-parent:hover .menulist-link {
    color: #ff8c00;
}

/* Toggle Button - Themify Style */
.menulist-theme-themify .menulist-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    margin: 8px 16px 8px 0;
    color: #666666;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    border-radius: 4px;
    transition: all 0.2s ease;
    position: relative;
}

.menulist-theme-themify .menulist-toggle:hover,
.menulist-theme-themify .menulist-toggle:focus {
    background-color: #f0f0f0;
    color: #ff8c00;
    outline: none;
    transform: scale(1.1);
}

/* Custom SVG Icons for Themify */
.menulist-theme-themify .menulist-toggle::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"><path d="M16.354 5.075l-7.855 7.854-7.853-7.854 0.707-0.707 7.145 7.146 7.148-7.147 0.708 0.708z" fill="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease;
}

.menulist-theme-themify .menulist-toggle[aria-expanded="true"]::before {
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"><path d="M16.354 11.896l-0.707 0.707-7.147-7.146-7.146 7.146-0.707-0.707 7.853-7.853 7.854 7.853z" fill="currentColor"/></svg>');
    transform: rotate(0deg);
}

/* Submenu Structure */
.menulist-theme-themify .menulist-submenu {
    background: #fafbfc;
    border-top: 1px solid #e8eaed;
    margin: 0;
    padding: 0;
    list-style: none;
}

.menulist-theme-themify .menulist-submenu .menulist-item {
    border-bottom: 1px solid #e8eaed;
    margin: 0;
    position: relative;
}

.menulist-theme-themify .menulist-submenu .menulist-item:last-child {
    border-bottom: none;
}

.menulist-theme-themify .menulist-submenu .menulist-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: #ff8c00;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.menulist-theme-themify .menulist-submenu .menulist-item:hover::before {
    opacity: 1;
}

.menulist-theme-themify .menulist-submenu .menulist-link {
    padding: 12px 20px 12px 40px;
    color: #666666;
    font-size: 13px;
    font-weight: 400;
}

.menulist-theme-themify .menulist-submenu .menulist-link:hover,
.menulist-theme-themify .menulist-submenu .menulist-link:focus {
    background-color: #ffffff;
    color: #ff8c00;
    padding-left: 44px;
}

/* Nested Submenus */
.menulist-theme-themify .menulist-submenu .menulist-submenu .menulist-item {
    background: #f5f6f7;
}

.menulist-theme-themify .menulist-submenu .menulist-submenu .menulist-link {
    padding-left: 60px;
    font-size: 12px;
}

.menulist-theme-themify .menulist-submenu .menulist-submenu .menulist-link:hover,
.menulist-theme-themify .menulist-submenu .menulist-submenu .menulist-link:focus {
    padding-left: 64px;
}

/* All menu items have consistent styling - no special first-child treatment */

/* Close Button Style (for modal-like usage) */
.menulist-theme-themify .menulist-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #666666;
    width: 24px;
    height: 24px;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.menulist-theme-themify .menulist-close:hover,
.menulist-theme-themify .menulist-close:focus {
    background-color: #f0f0f0;
    color: #ff8c00;
    transform: scale(1.1);
    outline: none;
}

.menulist-theme-themify .menulist-close::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background-image: url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="17" height="17" viewBox="0 0 17 17"><path d="M9.207 8.5l6.646 6.646-0.707 0.707-6.646-6.646-6.646 6.646-0.707-0.707 6.646-6.646-6.647-6.646 0.707-0.707 6.647 6.646 6.646-6.646 0.707 0.707-6.646 6.646z" fill="currentColor"/></svg>');
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media screen and (max-width: 782px) {
    .menulist-container:not(.menulist-theme-no-style):not(.menulist-theme-default) {
        font-size: 16px;
    }
    
    .menulist-link {
        padding: 12px 16px;
    }
    
    .menulist-item.has-children > .menulist-parent .menulist-link {
        padding: 12px 16px;
    }
    
    .menulist-toggle {
        width: 32px;
        height: 32px;
        margin: 0 8px 0 12px;
    }
    
    .menulist-toggle::before {
        width: 20px;
        height: 20px;
    }
    
    .menulist-submenu .menulist-link {
        padding: 10px 16px 10px 32px;
        font-size: 14px;
    }
    

    
    /* Themify responsive adjustments */
    .menulist-theme-themify .menulist-link {
        padding: 14px 16px;
        font-size: 16px;
    }
    

    
    .menulist-theme-themify .menulist-toggle {
        width: 36px;
        height: 36px;
        margin: 6px 12px 6px 0;
    }
    
    .menulist-theme-themify .menulist-toggle::before {
        width: 18px;
        height: 18px;
    }
    
    .menulist-theme-themify .menulist-submenu .menulist-link {
        padding: 12px 16px 12px 32px;
        font-size: 14px;
    }
    
    .menulist-theme-themify .menulist-submenu .menulist-link:hover,
    .menulist-theme-themify .menulist-submenu .menulist-link:focus {
        padding-left: 36px;
    }
}

@media screen and (max-width: 480px) {
    .menulist-submenu .menulist-item {
        margin-left: 12px;
    }
    
    .menulist-submenu .menulist-submenu .menulist-item {
        margin-left: 24px;
    }
    

    
    /* Themify mobile adjustments */
    .menulist-theme-themify {
        border-radius: 4px;
    }
    
    .menulist-theme-themify .menulist-link {
        padding: 12px 14px;
    }
    
    .menulist-theme-themify .menulist-submenu .menulist-link {
        padding: 10px 14px 10px 28px;
    }
    
    .menulist-theme-themify .menulist-submenu .menulist-submenu .menulist-link {
        padding-left: 42px;
    }
}

/* Error and empty states */
.menulist-error,
.menulist-empty {
    padding: 20px;
    text-align: center;
    color: #666;
    font-style: italic;
}