/* Site-wide mobile nav failsafe. Astra normally adds an "ast-header-break-point"
   class via JS at narrow viewports to switch the menu to a full-width stacked
   layout. If that JS class fails to apply for any reason, the menu is left in its
   desktop flex-row layout squeezed into a narrow viewport, causing each word to
   wrap character-by-character in a collapsed column. This pure-CSS media query
   forces the correct mobile layout independently of that JS, as a guaranteed
   fallback regardless of whether the JS class is present. */
@media (max-width: 1024px){
  #masthead .main-header-bar-navigation,
  #masthead .main-navigation,
  #masthead .main-header-menu{
    display:block !important;
    width:100% !important;
    max-width:100% !important;
  }
  #masthead .main-header-menu .menu-item{
    display:block !important;
    width:100% !important;
  }
  #masthead .main-header-menu .menu-link{
    display:block !important;
    width:100% !important;
    white-space:normal !important;
    padding:12px 16px !important;
    box-sizing:border-box !important;
  }
}
/* Desktop failsafe: force correct horizontal flex-row layout above the
   breakpoint too, site-wide, independent of any JS-added class. Covers cases
   where the menu renders narrow/wrapped on a genuinely wide viewport. */
@media (min-width: 1025px){
  #masthead .main-header-bar-navigation,
  #masthead .main-navigation,
  #masthead .main-header-menu{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:wrap !important;
    width:auto !important;
    max-width:none !important;
  }
  #masthead .main-header-menu .menu-item{
    display:list-item !important;
    flex:0 0 auto !important;
    width:auto !important;
    list-style:none !important;
  }
  #masthead .main-header-menu .menu-link{
    white-space:nowrap !important;
    display:inline-block !important;
    width:auto !important;
  }
}