/* Unify breakpoints & fix conflicting rules
   -------------------------------------------------- */

/* 1) Use the same cutoff (975px) the rest of the theme uses */

.nav-toggle { 
    display: inline-flex; 
    align-items: center; 
    gap: .25rem;
}
.nav-toggle {
    background-color: var(--blue);
    color: var(--white);
    border-radius: 50px;
    border-shadow: none;
    border: none;
    padding: 10px;
    cursor: pointer;
}
.primary-nav { display: none !important; }
.header .header-mobile { display: block !important; width: 100%; }
.mobile-nav { display: block !important; }
.mobile-nav[data-open="false"] { display: none !important; }
.mobile-nav[data-open="true"]  { display: block !important; }

/* 3) Kill the always-on global hide from general.css */
.header .header-mobile { display: block; }  /* this is overridden by the desktop media rule */

/* 4) Basic submenu behavior so it’s not crushed
   (your walker adds .has-children and .submenu-toggle) */
.menu > li { position: relative; }
.menu > li > ul.sub-menu { position: absolute; top: 100%; left: 0; min-width: 220px; background: #fff; border: 1px solid #eee; display: none; }
.menu > li.submenu-open > ul.sub-menu { display: block; }

/* Mobile submenus: stack */
@media (max-width: 975px) {
  .mobile-nav .menu { display: block; }
  .mobile-nav .menu > li { border-top: 1px solid #eee; }
  .mobile-nav .menu > li > ul.sub-menu { position: static; border: 0; display: none; }
  .mobile-nav .menu > li.submenu-open > ul.sub-menu { display: block; }
}

/* Header Menu fixes*/
.header .header-mobile {
    padding-left: calc((100% - var(--widthdesktop)) / 2);
    padding-right: calc((100% - var(--widthdesktop)) / 2);
}
.header .header-simple .header-container-right {
    display: none !important;
}
.header .header-mobile {
    background-color: var(--blue);
}
.header .header-mobile .menu {
    display: block !important;
    padding: 20px 0px;
}
.header .header-mobile .menu .menu-item a {
    color: var(--white);
}
.header .header-mobile .menu .menu-item:last-child {
    margin-bottom: 0px !important;
}

/*Toggle Buttons*/ 
.toogle-buttons {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.toogle-buttons .dashicons {
    font-size: 35px;
    width: 35px;
    height: 35px;
}
.toogle-buttons .search-toggle {
    background-color: var(--dark-grey);
    border-radius: 50px;
    padding: 10px;
    color: var(--white);
    border: none;
    cursor: pointer;
}