/**
 * Responsive Mega Menu Columns & Navigation Styles
 * Fixes multi-column menu layouts on mobile devices
 * Includes all departments menu and navigation styling
 */

/* ==========================================================================
   DEPARTMENTS MENU & NAVIGATION
   ========================================================================== */

/* Menu dropdown behavior */
.departments-menu > .dropdown-menu::before,
.departments-menu > .dropdown-menu::after,
.handheld-navigation ul li > ul::after,
.handheld-navigation ul li > ul::before {
    pointer-events: all;
}

/* Dropdown toggle icon */
.dropdown-toggle:after {
    float: right;
    border: none;
    width: auto;
    height: auto;
    margin-left: .6em;
    content: '\f107';
    font-family: FontAwesome;
}

/* Navigation list reset */
ul.nav {
    margin-left: 0;
}

/* Submenu behavior */
.departments-menu .menu-item-has-children > .dropdown-menu {
    opacity: 0;
    visibility: hidden;
    left: 99%;
    border-top-width: 2px;
    border-top-style: solid;
    width: 0;
    min-width: 0;
}

/* Menu item links */
.departments-menu > .dropdown-menu > li > a,
.departments-menu > .dropdown-menu > li:first-child > a {
    padding: 7px 0.357px 2px;
    color: black;
    font-size: 12px;
}

.departments-menu > .dropdown-menu .menu-item-has-children > .dropdown-menu li > a {
    font-size: 0.833em;
    display: block;
}

.departments-menu .dropdown-menu .yamm-content ul {
    padding-left: 10px;
}

/* YAMM content styling */
.yamm-content h4,
.yamm-content strong {
    color: black;
}

.yamm-content strong:hover,
.yamm-content h4:hover,
.yamm-content > a:hover {
    color: black;
    text-decoration: underline;
}

.yamm-content ul li:hover,
.yamm-content ul li a:hover {
    color: black;
}

/* ==========================================================================
   RESPONSIVE MEGA MENU COLUMNS
   ========================================================================== */

/* Desktop: Apply column layouts */
@media only screen and (min-width: 769px) {
    .two-col-menu > .yamm-content {
        column-count: 2;
    }
    
    .three-col-menu > .yamm-content {
        column-count: 3;
    }
    
    .four-col-menu > .yamm-content {
        column-count: 4;
    }
}

/* Tablet & Mobile: Force single column */
@media only screen and (max-width: 768px) {
    .two-col-menu > .yamm-content,
    .three-col-menu > .yamm-content,
    .four-col-menu > .yamm-content {
        column-count: 1 !important;
        columns: 1 !important;
    }
    
    /* Ensure Elementor content stacks properly */
    .two-col-menu .yamm-content h4,
    .three-col-menu .yamm-content h4,
    .four-col-menu .yamm-content h4 {
        break-inside: avoid;
        page-break-inside: avoid;
    }
    
    /* Reset any Elementor column widths */
    .two-col-menu .yamm-content .elementor-column,
    .three-col-menu .yamm-content .elementor-column,
    .four-col-menu .yamm-content .elementor-column {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }
    
    /* Stack nested lists properly */
    .two-col-menu .yamm-content ul,
    .three-col-menu .yamm-content ul,
    .four-col-menu .yamm-content ul {
        display: block !important;
        width: 100% !important;
        break-inside: avoid;
        page-break-inside: avoid;
    }
}