/* Base drawer structure */
.nav-drawer {
    position: fixed;
    top: 0;
    left: calc(-1 * var(--drawer-width, 300px));
    width: var(--drawer-width, 300px);
    height: 100vh;
    background: #fff;
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
    z-index: 99999;
    overflow: hidden;
}
.nav-drawer.nav-drawer--expanded {
    width: calc(var(--drawer-width, 300px) * 2);
}

.nav-drawer.active {
    left: 0;
}

.nav-drawer--expanded {
    width: 600px;
}

.nav-drawer__inner {
    display: flex;
    height: 100%;
    transition: all 0.3s ease;
}

/* Overlay styles */
.nav-drawer-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease;
    z-index: 99998;
}

.nav-drawer-overlay.active {
    opacity: 1;
    visibility: visible;
}

/* Header styles */
.nav-drawer__header {
    padding: 20px;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-drawer__header h3 { 
    font-size: 22px; 
}

.nav-drawer__header h3 a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s ease;
}

.nav-drawer__header h3 a:hover {
    color: var(--h3_typography-color);
}

.view-all {
    color: #2c4551;
    text-transform: uppercase;
    font-size: 14px;
    margin-left: 7px;
    cursor: pointer;
    transition: all ease 0.35s;
}

.view-all::after {
    content: '\f0a9';
    margin-left: 7px;
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transition: all ease 0.35s;
}

.view-all:hover {
    color: #00a8e3;
}

.nav-drawer__close {
    cursor: pointer;
    font-size: 24px;
}

/* Content and menu styles */
.nav-drawer__content {
    padding: 20px;
}

.nav-drawer__menu {
    list-style: none;
    margin: 0;
    padding: 0;
    height: 100%;
}

.nav-drawer__inner .nav-drawer__menu-item {
    margin: 0;
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

/* Menu link styling */
.nav-drawer__content  .nav-drawer__menu-link {
    display: flex;
    align-items: center;
    color: inherit;
    text-decoration: none;
    gap: 10px;
    transition: background-color 0.2s ease;
}

/* Thumbnail styling */
.nav-drawer__thumbnail {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
    object-fit: cover;
    border-radius: 50%;
}

/* Menu text styling - ensures proper alignment with thumbnail */
.nav-drawer__text {
    flex: 1;
    line-height: 1.4;
    font-size: var(--nav_dropdown_font_size);
}

/* Widget area styling for custom content */
.nav-drawer__widget-area {
    padding: 45px 0 15px 0; 
    position: relative;
}

.nav-drawer__widget-area img {
    border-radius: 6px;
    width: 100%;
}

/* Widget wrapper for proper initialization */
.nav-drawer-widget-wrapper {
    width: 100%;
}

/* Ensure widget content is visible */
.nav-drawer__widget-area .widget {
    margin-bottom: 20px;
}

.nav-drawer__widget-area .widget-title {
    font-size: 18px;
    margin-bottom: 10px;
    font-weight: 600;
}

/* Section styles */
.nav-drawer__section {
    min-width: var(--drawer-width, 300px);
    height: 100%;
    border-right: 1px solid #eee;
    background: #fff;
    overflow-y: auto;
}

.nav-drawer__arrow {
    flex-shrink: 0;
    margin-left: 9px;
}

.nav-drawer__menu-item.nav-drawer__menu-item--has-children.active a { font-weight: 700; }
.nav-drawer__menu-item.nav-drawer__menu-item--has-children.active a::after { color: var(--h3_typography-color); content: '\f0a9'; }

/* Add pseudo-element styles for parent items */
@media (min-width: 951px) {
    .menu-item-has-children > a::after {
        font-family: "Font Awesome 5 Free";
        font-weight: 900;
        content: "\f107"; /* chevron-down */
    }
}

/* Style arrows in the drawer differently */
.nav-drawer__menu-item--has-children > a::after {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f054"; /* chevron-right */
    margin-left: auto;
    padding-left: 10px;
}

.nav-drawer__menu-item--has-children.active > .nav-drawer__menu-link .nav-drawer__arrow {
    transform: translateY(-50%) rotate(-135deg);
}

/* Submenu styles */
.nav-drawer__submenu {
    margin-left: 20px;
    border-left: 1px solid #eee;
    visibility: visible;
    opacity: 1;
    transition: all 0.3s ease;
}

.nav-drawer__submenu:not(.active) {
    display: none;
}

.nav-drawer__menu-item--has-children.active > .nav-drawer__submenu {
    display: block;
}

/* Mobile styles */
@media (max-width: 768px) {
    .nav-drawer {
        width: 100%;
        max-width: 300px;
    }
}

/* Animated Grandchildren */ 
@keyframes cascadeDown {
    0% {
        opacity: 0;
        transform: translateY(-20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.nav-drawer__menu-item {
    animation: cascadeDown 0.5s ease-out;
    animation-fill-mode: both;
}

/* Search Overaly Fix */ 
.fusion-main-menu.search-open ~ .nav-drawer,
.fusion-main-menu.search-open ~ .nav-drawer-overlay {
    display: none;
}

.fusion-main-menu-search-overlay .fusion-main-menu > .fusion-overlay-transition, 
.fusion-main-menu-search-overlay .fusion-main-menu > .fusion-overlay-search { z-index: 2; }

.fusion-main-menu.search-open { background: #fff; }

/* Search overlay styling */
.fusion-main-menu.search-transition .fusion-overlay-search, .fusion-main-menu.search-open .fusion-overlay-search {
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    max-width: none !important; /* Override Avada's calculated width */
    padding: 5px;
    margin: 0;
    border: 0; background-color: #ffffff;
}

.fusion-main-menu.search-open .fusion-search-form-content {
    position: relative;
    width: 100%;
    max-width: 1200px; /* Match Avada's container width */
    margin: 0 auto;
}

/* Mobile Menu Fixes */
.fusion-mobile-menu-design-modern .fusion-mobile-menu-text-align-left .fusion-mobile-nav-item a {
  padding-left: 24px!important;
}
.sub-menu li a, .sub-menu ul li a { padding-left: 24px!important; }
.sub-menu ul li a span { font-size: 15px; font-weight: 700; color: #000; }

.fusion-mobile-menu-text-align-left li.fusion-mobile-nav-item li a::before { display:none!important; }
.fusion-mobile-menu-text-align-left li.fusion-mobile-nav-item li li a::before {
  content: '\f0a9'!important; display:block!important; margin-right: 7px!important; font-size: 13px!important; color: #00a8e3!important; font-family: "Font Awesome 5 Free"!important; font-weight: 900!important;
}