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

/* 1) Use the same cutoff (975px) the rest of the theme uses */
@media (max-width: 975px) {
  .nav-toggle { display: inline-flex; align-items: center; gap: .25rem; }
  .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; }
}

/* 2) Desktop: always hide mobile container */
@media (min-width: 976px) {
  .header .header-mobile { display: none !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; }
}