/* Services detail menu widget (.menu-services-detail-container inside .menu_bg):
   contain its floated <li> items so it doesn't collapse and overflow into
   following content, and use a greyscale palette instead of black/orange. */
.menu_bg {
  overflow: hidden;
  background: #4d4d4d;
}

/* On pages where .menu_bg wraps the widget instead of being the grid column
   itself (e.g. what-we-do), make it fill the column's full width. */
.wpb_widgetised_column.menu_bg {
  float: none;
  width: 100%;
}

.menu_bg li {
  background: #333333;
}

.menu_bg li:hover {
  background: #e0e0e0;
}

.menu_bg li:hover a {
  color: #333333 !important;
}

/* Services page: align each service's "Read More" button to the right
   side of its containing column instead of the default left/inline flow. */
.page-services .vc_btn3-container {
  padding-top: 1em;
}

/* Mobile nav: the theme's own .dropOpen:before rule (style.css) references
   content:'\e85e', which decodes to fontello's "clock" glyph (not a chevron)
   and never sets font-family, so it renders blank. Swap the existing,
   correctly-positioned chevron on the link itself (down-open-mini, \e805)
   for up-open-mini (\e806) when the submenu is expanded. */
.responsive_menu .menuTopWrap > ul > li.menu-item-has-children.dropOpen > a:after {
  content: '\e806';
}

/* Homepage: the "View All Services" button (.sc_button) is inline-block
   with no alignment of its own, so it sits at the left edge of its full
   width wrapper by default. Center it. */
.view_btn .wpb_wrapper {
  text-align: center;
}

/* Footer copyright: float:left (style.css) pins it to the left edge of the
   fixed-width .main container. Let it span the full row and center it. */
.copyWrap .copy .copyright {
  float: none;
  text-align: center;
}

/* Header at very small widths: the logo centers itself (responsive.css) and
   the "Menu" label pushes .openResponsiveMenu wide enough that it wraps onto
   its own line beneath the logo. Drop the label and shrink the button down
   to an icon-only hamburger trigger, matching common mobile nav convention. */
@media (max-width: 479px) {
  .openResponsiveMenu .menu-label {
    display: none;
  }
  .openResponsiveMenu {
    width: 45px;
    height: 45px;
    padding: 0;
    margin: 11px 0 22px;
  }
  .openResponsiveMenu:before {
    position: static;
    display: block;
    width: 100%;
    text-align: center;
  }

  /* responsive.css forces the logo full-width/centered (float:none, with
     !important on text-align), which pushes .wrap_menu - and the hamburger
     button inside it - onto its own line below. Keep the logo floated and
     shrink it so it fits on the same row as the icon-only trigger, and
     replace the theme's fixed 280px header column with a fluid one so the
     row actually has room, bottoming out at a 375px floor instead of
     squeezing further (below that width the header simply overflows). */
  .mainmenu_area .main {
    width: 100%;
    min-width: 375px;
    box-sizing: border-box;
    padding: 0 15px;
    overflow: hidden;
  }

  .topWrap .logo {
    float: left !important;
    text-align: left !important;
    width: auto;
    padding: 11px 0;
  }

  .logo img {
    height: 22px;
    margin-top: 0;
  }
}