/* 
   MEGA MENU STYLES - NUCLEAR OPTION
   Targeting the EXACT structure found in Header2.php:
   header.site-header -> .header-middle/* 
   MEGA MENU STYLES - JS DETACHED MODE 
*/

/* Category List Arrow (Right Chevron) */
.cmm-cat-arrow {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-right: 2px solid #ccc;
    border-bottom: 2px solid #ccc;
    transform: rotate(-45deg);
    float: right;
    margin-top: 5px;
    margin-right: 5px;
    transition: all 0.2s;
}

/* Hover state for parent item arrow */
.cmm-item:hover .cmm-cat-arrow {
    border-color: #ff6600;
}

/* Arrow Icon Style */
.cmm-arrow {
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #fff;
    margin-left: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

/* ... Global Header Styles (Keep as fallback) ... */
#masthead,
header.site-header {
    position: relative !important;
    z-index: 999999 !important;
    overflow: visible !important;
}

/* ... Custom Header Menu Styles ... */
.custom-header-menu {
    width: 100%;
    position: relative;
    z-index: 999999;
}

.custom-header-menu ul.menu {
    display: flex;
    flex-wrap: nowrap;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
    position: relative;
}

.custom-header-menu ul.menu>li {
    position: static;
    flex-grow: 1;
    text-align: center;
    border-bottom: 15px solid transparent;
    transition: all 0.3s ease;
}

.custom-header-menu ul.menu>li>a {
    display: block;
    color: #ffffff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 300;
    text-transform: lowercase;
    padding: 15px 10px;
    line-height: 1.2;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Colors */
.custom-header-menu ul.menu>li:nth-child(1) {
    background-color: #f57b0b;
    border-bottom-color: #fbf420;
}

.custom-header-menu ul.menu>li:nth-child(2) {
    background-color: #f57202;
    border-bottom-color: #fae303;
}

.custom-header-menu ul.menu>li:nth-child(3) {
    background-color: #f56601;
    border-bottom-color: #f8cd04;
}

.custom-header-menu ul.menu>li:nth-child(4) {
    background-color: #f55c02;
    border-bottom-color: #f7b803;
}

.custom-header-menu ul.menu>li:nth-child(5) {
    background-color: #f14601;
    border-bottom-color: #f69301;
}

.custom-header-menu ul.menu>li:nth-child(6) {
    background-color: #db4100;
    border-bottom-color: #f68702;
}

.custom-header-menu ul.menu>li:nth-child(7) {
    background-color: #c73600;
    border-bottom-color: #f57301;
}

.custom-header-menu ul.menu>li:nth-child(8) {
    background-color: #a02900;
    border-bottom-color: #f55a03;
}

.custom-header-menu ul.menu>li:nth-child(9) {
    background-color: #850200;
    border-bottom-color: #f40903;
}

.custom-header-menu ul.menu>li:nth-child(10) {
    background-color: #6e0100;
    border-bottom-color: #da0200;
}

.custom-header-menu ul.menu>li:nth-child(1)>a {
    font-size: 0;
}

.custom-header-menu ul.menu>li:nth-child(1)>a:after {
    content: "";
    display: block;
    width: 25px;
    height: 25px;
    background: url(../../img/header/home.png) no-repeat center center;
    background-size: contain;
    margin: 0 auto;
}

.custom-header-menu ul.menu>li:nth-child(1) svg {
    display: none;
}


/* DROPDOWN - DETACHED MODE */
.custom-mega-menu-container {
    display: none;
    /* JS toggles this */
    /* Default fallback styles if JS fails */
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: #fff;
    border-top: 5px solid #ff6600;
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.3);
    z-index: 10000;
}

/* THE IMPORTANT PART: Fixed position when moved to body */
.custom-mega-menu-container.cmm-detached {
    position: fixed !important;
    z-index: 9999999999 !important;
    /* top, left, width set by JS */

    flex-direction: row;
    margin-top: 0;
    text-align: left;
    box-shadow: 0 50px 100px rgba(0, 0, 0, 0.4);
}

/* Internal Layout */
.cmm-sidebar {
    width: 25%;
    background: #f4f4f4;
    border-right: 1px solid #e0e0e0;
}

.cmm-content {
    width: 30%;
    background: #fff;
    border-right: 1px solid #f0f0f0;
}

.cmm-details-panel {
    width: 45%;
    background: #fff;
    padding: 20px;
}

/* RESET INTERNAL OVERFLOWS */
.cmm-sidebar,
.cmm-content,
.cmm-details-panel {
    max-height: none;
    overflow: visible;
}

/* Tabs & Lists */
.cmm-tab {
    display: block;
    padding: 12px 15px;
    color: #333;
    text-decoration: none;
    border-bottom: 1px solid #dedede;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
}

.cmm-tab:hover,
.cmm-tab.active {
    background: #fff;
    color: #ff6600;
    border-left: 44px solid #ff6600;
}

.cmm-tab .arr {
    float: right;
}

.cmm-list,
.cmm-services-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: none;
}

.cmm-list.active,
.cmm-services-list.active {
    display: block;
}

.cmm-list li a {
    display: block;
    padding: 10px 15px;
    color: #555;
    text-decoration: none;
    font-size: 13px;
    border-bottom: 1px solid #f5f5f5;
}

.cmm-list li a:hover {
    background: #fafafa;
    color: #ff6600;
}

/* 3rd Level - Services List Styling */
.cmm-services-list li {
    margin-bottom: 0;
}

.cmm-services-list li a {
    display: block;
    padding: 8px 10px;
    color: #555;
    text-decoration: none;
    font-size: 14px;
    border-bottom: 1px dotted #eee;
    transition: all 0.2s ease-in-out;
    position: relative;
    padding-left: 20px;
    /* Space for icon */
}

/* Add a pseudo-element chevron */
.cmm-services-list li a:before {
    content: "›";
    /* Simple chevron */
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    color: #ff6600;
    font-weight: bold;
    font-size: 18px;
    line-height: 1;
    transition: left 0.2s;
}

/* Hover Effects */
.cmm-services-list li a:hover {
    color: #ff6600;
    background-color: #fdfdfd;
    padding-left: 25px;
    /* Slight movement */
    border-bottom-color: #ffcc99;
}

.cmm-services-list li a:hover:before {
    left: 5px;
    /* Icon moves too */
}