/*
  Optimized:
  - Defaulted to flex display for modern layout, removed `white-space: nowrap`.
  - Consolidated and simplified scrollbar hiding rules.
  - Removed redundant rules from the media query.
  - Grouped selectors for better readability.
  - Re-instated `!important` for scrollbar properties due to WordPress theme loading order.
*/
.cmm-mobile-nav-bar {
  display: none; /* Hidden by default, shown in media query */
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  background: #c8102e;
  padding: 8px 4px;
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.15);
  margin: 0;
  position: relative; /* Ensure it behaves as a normal block element */

  /* Hide scrollbar but keep functionality */
  scrollbar-width: none !important; /* Firefox */
  -ms-overflow-style: none !important; /* IE 10+ */
  -webkit-overflow-scrolling: touch !important; /* iOS smooth scrolling */
}

/* Unified Webkit scrollbar hiding */
.cmm-mobile-nav-bar::-webkit-scrollbar {
  display: none !important;
}

.cmm-mobile-nav-bar a {
  display: inline-block;
  flex: 0 0 auto; /* Prevent shrinking in flex container */
  color: white;
  font-weight: bold;
  padding: 6px 12px;
  margin: 0 4px;
  border-radius: 20px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.1);
  text-decoration: none;
  transition: background 0.3s ease;
}

.cmm-mobile-nav-bar a:hover,
.cmm-mobile-nav-bar a:focus {
  background: rgba(255, 255, 255, 0.25);
}

/* Only display on mobile devices */
@media (max-width: 767px) {
  .cmm-mobile-nav-bar {
    display: flex !important; /* Use !important to override potential theme conflicts */
    margin-top: 30px !important;
  }
  
  /* Prevent extra space below the header */
  .site-header,
  .main-header,
  header {
    margin-bottom: 0 !important;
  }
}