/**
 * EMS Menu Widget - CLEAN CSS STYLESHEET
 * No Elementor inline style conflicts
 * All layout handled via CSS classes and !important flags
 */

/* ============================================
   RESET & BASE STYLES
   ============================================ */

.ems-menu-wrapper {
    display: block;
    width: 100%;
}

/* MAIN CONTAINER - ALWAYS FLEX, ALWAYS HORIZONTAL BY DEFAULT */
.ems-menu-container,
.ems-menu-container-2 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 0 !important;
    flex-wrap: wrap !important;
}

/* ============================================
   HORIZONTAL LAYOUT - DEFAULT
   ============================================ */

.ems-menu-horizontal .ems-menu-container-2 {
    flex-direction: row !important;
    align-items: center !important;
    flex-wrap: wrap !important;
}

/* Horizontal Alignment */
.ems-align-h-flex-start.ems-menu-horizontal .ems-menu-container-2 {
    justify-content: flex-start !important;
}

.ems-align-h-center.ems-menu-horizontal .ems-menu-container-2 {
    justify-content: center !important;
}

.ems-align-h-flex-end.ems-menu-horizontal .ems-menu-container-2 {
    justify-content: flex-end !important;
}

/* Wrap Control for Horizontal */
.ems-wrap-yes.ems-menu-horizontal .ems-menu-container-2 {
    flex-wrap: wrap !important;
}

.ems-wrap-no.ems-menu-horizontal .ems-menu-container-2 {
    flex-wrap: nowrap !important;
}

/* ============================================
   VERTICAL LAYOUT
   ============================================ */

.ems-menu-vertical .ems-menu-container-2 {
    flex-direction: column !important;
    align-items: flex-start !important;
    flex-wrap: nowrap !important;
}

/* Vertical Alignment */
.ems-align-v-flex-start.ems-menu-vertical .ems-menu-container-2 {
    align-items: flex-start !important;
}

.ems-align-v-center.ems-menu-vertical .ems-menu-container-2 {
    align-items: center !important;
}

.ems-align-v-flex-end.ems-menu-vertical .ems-menu-container-2 {
    align-items: flex-end !important;
}

/* ============================================
   Gap/Spacing between Items
   ============================================ */

.ems-menu-item {
    position: relative;
    margin: 0;
    padding: 0;
    list-style: none;
    margin-right: 15px; /* Default gap */
}

.ems-menu-vertical .ems-menu-item {
    margin-right: 0;
    margin-bottom: 15px; /* Default gap for vertical */
}

.ems-menu-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
}

.ems-menu-link:focus {
    outline: 2px solid rgba(0, 115, 170, 0.5);
    outline-offset: 2px;
}

.ems-menu-text {
    display: inline-block;
}

/* ============================================
   Menu Icon Styles
   ============================================ */

.ems-menu-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.ems-menu-icon::before {
    font-family: Arial, sans-serif;
    content: '›';
    font-size: 1.2em;
}

.ems-menu-icon-before::before {
    content: '›';
    margin-right: 4px;
}

.ems-menu-icon-after::before {
    content: '›';
    margin-left: 4px;
}

/* ============================================
   Submenu Indicator
   ============================================ */

.ems-menu-indicator {
    display: none;
    position: relative;
    width: 0;
    height: 0;
    margin-left: auto;
    padding-left: 8px;
}

.ems-menu-item-with-children .ems-menu-indicator {
    display: inline-block;
}

.ems-menu-indicator::after {
    content: '';
    position: absolute;
    width: 4px;
    height: 4px;
    background-color: currentColor;
    border-radius: 50%;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
}

/* ============================================
   Submenu Styles
   ============================================ */

.ems-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background-color: #fff;
    min-width: 180px;
    flex-direction: column;
    gap: 0;
    z-index: 999;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
}

.ems-menu-item-with-children:hover > .ems-submenu {
    display: flex;
}

.ems-menu-item-with-children.ems-submenu-open > .ems-submenu {
    display: flex;
}

.ems-submenu-link {
    width: 100%;
}

/* ============================================
   Submenu Animations
   ============================================ */

/* Fade Animation */
.ems-submenu[data-animation="fade"] {
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.ems-menu-item-with-children:hover > .ems-submenu[data-animation="fade"],
.ems-menu-item-with-children.ems-submenu-open > .ems-submenu[data-animation="fade"] {
    opacity: 1;
    pointer-events: auto;
}

/* Slide Down Animation */
.ems-submenu[data-animation="slide-down"] {
    opacity: 0;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    pointer-events: none;
}

.ems-menu-item-with-children:hover > .ems-submenu[data-animation="slide-down"],
.ems-menu-item-with-children.ems-submenu-open > .ems-submenu[data-animation="slide-down"] {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Zoom In Animation */
.ems-submenu[data-animation="zoom-in"] {
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.3s ease;
    pointer-events: none;
    transform-origin: top left;
}

.ems-menu-item-with-children:hover > .ems-submenu[data-animation="zoom-in"],
.ems-menu-item-with-children.ems-submenu-open > .ems-submenu[data-animation="zoom-in"] {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

/* No Animation */
.ems-submenu[data-animation="none"] {
    display: none;
}

.ems-menu-item-with-children:hover > .ems-submenu[data-animation="none"],
.ems-menu-item-with-children.ems-submenu-open > .ems-submenu[data-animation="none"] {
    display: flex;
}

/* ============================================
   Hover Effects - Underline
   ============================================ */

.ems-menu-underline-yes .ems-menu-link {
    border-bottom: 2px solid transparent;
    padding-bottom: 2px;
}

.ems-menu-underline-yes .ems-menu-item:hover .ems-menu-link {
    border-bottom-color: #0073aa;
}

/* ============================================
   Hover Effects - Scale
   ============================================ */

.ems-menu-scale-scale .ems-menu-link:hover {
    transform: scale(1.05);
}

/* ============================================
   Empty State
   ============================================ */

.ems-menu-empty {
    padding: 20px;
    text-align: center;
    color: #999;
    background-color: #f5f5f5;
    border: 1px dashed #ddd;
    border-radius: 4px;
}

/* ============================================
   Responsive Design
   ============================================ */

/* Tablet */
@media (max-width: 768px) {
    .ems-menu-horizontal .ems-menu-container-2 {
        flex-wrap: wrap;
    }

    .ems-menu-item {
        flex: 0 1 auto;
    }

    /* Submenu positioning for touch devices */
    .ems-submenu {
        position: static;
        display: none;
        padding: 8px 0 8px 20px;
        box-shadow: none;
        background-color: transparent;
        min-width: auto;
    }

    .ems-menu-item-with-children:hover > .ems-submenu {
        display: flex;
    }

    .ems-menu-item-with-children.ems-submenu-open > .ems-submenu {
        display: flex;
    }

    .ems-submenu[data-animation="fade"],
    .ems-submenu[data-animation="slide-down"],
    .ems-submenu[data-animation="zoom-in"] {
        opacity: 0;
        display: none;
    }

    .ems-menu-item-with-children:hover > .ems-submenu,
    .ems-menu-item-with-children.ems-submenu-open > .ems-submenu {
        opacity: 1;
        display: flex;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .ems-menu-container-2 {
        gap: 0;
    }

    .ems-menu-horizontal .ems-menu-container-2 {
        flex-direction: column;
    }

    .ems-menu-link {
        padding: 10px 12px;
    }

    .ems-submenu {
        position: static;
        padding: 8px 0 8px 15px;
        box-shadow: none;
        background-color: transparent;
        min-width: auto;
    }

    .ems-menu-item-with-children.ems-submenu-open > .ems-submenu {
        display: flex;
    }

    .ems-menu-item-with-children:not(.ems-submenu-open) > .ems-submenu {
        display: none;
    }
}

/* ============================================
   Accessibility
   ============================================ */

/* Focus visible for keyboard navigation */
.ems-menu-link:focus-visible {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

/* High contrast mode */
@media (prefers-contrast: more) {
    .ems-menu-link {
        border: 1px solid transparent;
    }

    .ems-menu-item:hover .ems-menu-link {
        border-color: currentColor;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .ems-menu-link,
    .ems-submenu {
        transition: none;
    }

    .ems-submenu[data-animation="slide-down"],
    .ems-submenu[data-animation="zoom-in"] {
        transform: none;
    }
}

/* ============================================
   Utility Classes
   ============================================ */

/* Utility classes for different menu levels and states
   Primary styling is handled through Elementor controls
   These selectors provide hooks for advanced customization */

/* ============================================
   Print Styles
   ============================================ */

@media print {
    .ems-submenu {
        position: static;
        display: block;
        background-color: transparent;
        box-shadow: none;
        border: none;
    }

    .ems-menu-link {
        text-decoration: underline;
    }
}