/* Hassocks Barbers mobile navigation. The mobile/tablet panel is owned by the child theme so scroll state cannot break the hamburger. */
@media only screen and (max-width:980px){
  .et-l--header .hb-owned-mobile-menu{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:auto!important;
    width:100%!important;
    max-height:0!important;
    overflow:hidden!important;
    -webkit-overflow-scrolling:touch!important;
    z-index:1000004!important;
    opacity:1!important;
    visibility:hidden!important;
    pointer-events:none!important;
    transform:none!important;
    transition:max-height .42s cubic-bezier(.22,.61,.36,1), visibility 0s linear .42s!important;
    will-change:max-height;
  }
  .et-l--header .hb-owned-mobile-menu[hidden]{display:none!important}
  .et-l--header .hb-owned-mobile-menu:not([hidden]){display:block!important}
  .et-l--header .hb-owned-mobile-menu.hb-panel-open{
    max-height:var(--hb-menu-open-height,calc(100dvh - 92px))!important;
    overflow-y:auto!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transition:max-height .42s cubic-bezier(.22,.61,.36,1), visibility 0s!important;
  }

  .et-l--header .hb-owned-mobile-menu ul.sub-menu{
    display:block!important;
    max-height:0;
    overflow:hidden!important;
    opacity:0;
    visibility:hidden;
    transition:max-height .34s cubic-bezier(.22,.61,.36,1), opacity .22s ease, visibility 0s linear .34s!important;
  }
  .et-l--header .hb-owned-mobile-menu li.hb-submenu-open > ul.sub-menu{
    opacity:1;
    visibility:visible;
    transition:max-height .34s cubic-bezier(.22,.61,.36,1), opacity .22s ease, visibility 0s!important;
  }

  /* Services is a 19px top-level item; its submenu is deliberately 4px smaller. */
  .et-l--header .hb-owned-mobile-menu > li.menu-item-has-children{position:relative!important}
  .et-l--header .hb-owned-mobile-menu > li.menu-item-has-children > a{
    position:relative!important;
    padding-right:58px!important;
    font-size:19px!important;
  }
  .et-l--header .hb-owned-mobile-menu > li.menu-item-has-children > a::after{
    display:none!important;
    content:none!important;
  }
  .et-l--header .hb-owned-mobile-menu .hb-owned-chevron{
    display:block!important;
    position:absolute!important;
    right:20px!important;
    top:50%!important;
    width:11px!important;
    height:11px!important;
    border-right:3px solid #c15315!important;
    border-bottom:3px solid #c15315!important;
    background:transparent!important;
    transform:translateY(-65%) rotate(45deg)!important;
    transform-origin:55% 55%!important;
    transition:transform .25s ease!important;
    pointer-events:none!important;
    z-index:5!important;
  }
  .et-l--header .hb-owned-mobile-menu > li.menu-item-has-children.hb-submenu-open > a > .hb-owned-chevron{
    transform:translateY(-35%) rotate(225deg)!important;
  }
  .et-l--header .hb-owned-mobile-menu ul.sub-menu li a{font-size:21px!important;line-height:1.45!important;font-weight:600!important}
  .et-l--header .hb-owned-mobile-menu .hb-mobile-menu-contact{margin-top:22px!important}

  /* Own the hamburger icon as well as the menu state so the X animation stays reliable after scrolling. */
  .et-l--header .et_mobile_nav_menu,
  .et-l--header .mobile_nav,
  .et-l--header .mobile_nav.opened,
  .et-l--header .mobile_nav.closed,
  .et-l--header .et_mobile_nav_menu:focus-within{
    background:transparent!important;
    background-color:transparent!important;
    background-image:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
    -webkit-tap-highlight-color:transparent!important;
  }
  .et-l--header .mobile_menu_bar{
    position:relative!important;
    width:48px!important;
    height:48px!important;
    cursor:pointer!important;
    touch-action:manipulation!important;
    -webkit-appearance:none!important;
    appearance:none!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
    -webkit-tap-highlight-color:transparent!important;
    background:linear-gradient(#C15315,#C15315) center/28px 2px no-repeat!important;
    transition:background-size .24s cubic-bezier(.4,0,.2,1)!important;
  }
  .et-l--header .mobile_menu_bar:focus,
  .et-l--header .mobile_menu_bar:focus-visible,
  .et-l--header .mobile_menu_bar:active{
    background-color:transparent!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
    outline:0!important;
  }
  .et-l--header .mobile_menu_bar:before,
  .et-l--header .mobile_menu_bar:after{
    content:""!important;
    position:absolute!important;
    left:50%!important;
    width:28px!important;
    height:2px!important;
    margin:0!important;
    padding:0!important;
    background:#C15315!important;
    opacity:1!important;
    transform:translateX(-50%) rotate(0deg)!important;
    transform-origin:center!important;
    transition:top .28s cubic-bezier(.4,0,.2,1),transform .32s cubic-bezier(.4,0,.2,1)!important;
  }
  .et-l--header .mobile_menu_bar:before{top:14px!important}
  .et-l--header .mobile_menu_bar:after{top:32px!important}
  .et-l--header .mobile_menu_bar.hb-owned-open{background-size:0 2px!important}
  .et-l--header .mobile_menu_bar.hb-owned-open:before{
    top:23px!important;
    transform:translateX(-50%) rotate(45deg)!important;
  }
  .et-l--header .mobile_menu_bar.hb-owned-open:after{
    top:23px!important;
    transform:translateX(-50%) rotate(-45deg)!important;
  }

  .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover{
    min-height:0!important;
    padding-top:10px!important;
    padding-right:15px!important;
    padding-bottom:10px!important;
    padding-left:15px!important;
    line-height:1.25!important;
  }
}

@media only screen and (max-width:767px){
  .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header,
  .et-l--header .et_pb_button_0_tb_header_wrapper .et_pb_button_0_tb_header:hover{
    min-height:0!important;
    padding-top:5px!important;
    padding-right:25px!important;
    padding-bottom:5px!important;
    padding-left:25px!important;
    line-height:1.25!important;
  }
}

@media (prefers-reduced-motion:reduce){
  .et-l--header .mobile_menu_bar,.et-l--header .mobile_menu_bar:before,.et-l--header .mobile_menu_bar:after{animation:none!important;transition:none!important}
}