/* 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, .header-container-right { 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; background-color: var(--white); padding: 0px; }
  .mobile-nav .menu {padding: 0px !important;}
  #menu-mobile .menu-item .menu-link {color: var(--grey) !important;}
  
  #menu-mobile .menu > li > .submenu-toggle { margin-left: auto; margin-right: 0; }
  #menu-mobile .menu > li > .submenu-toggle .dashicons { color: var(--grey);}
}

/* MOBILE MENU STYLES */

#menu-mobile .menu > li > ul.sub-menu li {
    border: none !important;    
    padding-left: 0px;
    margin-top: 10px;
}

#menu-mobile .menu-item.menu-item-has-children {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
}
#menu-mobile .menu-item.menu-item-has-children > .menu-link {
    flex: 0 1 auto !important;
    display: inline-flex !important;
}
#menu-mobile .menu-item.menu-item-has-children > .submenu-toggle {
    flex: 0 0 auto !important;
    margin-left: auto !important;
}
#menu-mobile .menu-item.menu-item-has-children > .sub-menu {
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
}


@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: -30px; min-width: 220px; background: transparent; border: none; display: none; padding: 20px 0px 0px; }
.menu > li.submenu-open > ul.sub-menu { display: block; }
.menu > li > ul.sub-menu li {
    background: var(--white);
}
.menu > li > ul.sub-menu li:first-child {
    border-top:2px solid var(--light-blue);
    padding-top:10px;
}
.header-container-right .menu > li:last-child {
    position: absolute;
    right: 0px;
}

.home .header .header-container-right .menu > li:last-child a {
    padding: 10px 15px;
    color: var(--white);
    background-color: transparent;
    text-align: center;
    display: block;
    min-width:200px;
    border-radius: 5px;
    border: 1px solid var(--white);
}
.home .nav-toggle,
.home .header .submenu-toggle .dashicons {
    color: var(--white);
}
.header.scrolled .nav-toggle,
.header .submenu-toggle .dashicons {
    color: var(--grey);
}
.header .header-container-right .menu > li:last-child a,
.header.scrolled .header-container-right .menu > li:last-child a {
    padding: 10px 15px;
    color: var(--white) !important;
    background-color: var(--blue);
    border: 2px solid var(--blue);
    text-align: center;
    display: block;
    min-width:200px;
    border-radius: 5px;
    
}
.header .header-container-right .menu > li:last-child a:hover,
.header.scrolled .header-container-right .menu > li:last-child a:hover {
    border: 2px solid var(--blue);
    background-color: transparent;
    color: var(--blue) !important;
}
.section-hero::before {
    height: 100vh;
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(4, 25, 78, 0.3); /* 50% black overlay */
    z-index: 1;
}

.section-hero .section-hero-container > * {
    position: relative;
    z-index: 2;
}

/* 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; }
}