/* HPA Site Core: site.layout_fixes. Styling only; see src/Site/LayoutFixes.php. */

/* 981-1279 px: two-row header. Row 1 = logo, Schedule a call, search. Row 2 = the menu. */
@media (min-width: 981px) and (max-width: 1279px) {
  #main-header .container.et_menu_container { position: relative; }
  #main-header .logo_container { position: relative !important; display: block !important; float: none !important; width: auto !important; height: 68px !important; }
  #main-header #logo { max-height: 48px !important; }
  #main-header #et-top-navigation { position: static !important; float: none !important; clear: both; margin-top: 0 !important; padding-left: 0 !important; padding-top: 0 !important; text-align: center; }
  #main-header #top-menu-nav,
  #main-header #top-menu { float: none !important; position: static !important; }
  #main-header #top-menu { display: inline-block !important; text-align: center; }
  #main-header #top-menu > li { display: inline-block; padding-right: 16px !important; }
  #main-header #top-menu > li:last-child { padding-right: 0 !important; }
  #main-header #top-menu > li > a { padding-bottom: 16px !important; }
  #main-header #top-menu > li.menu-cta { position: absolute !important; right: 66px; top: 16px; padding: 0 !important; }
  #main-header #top-menu > li.menu-cta > a { padding-bottom: 0 !important; }
  #main-header #et_top_search { position: absolute !important; right: 30px; top: 26px; margin: 0 !important; float: none !important; }
}
@media (min-width: 981px) and (max-width: 1120px) {
  #main-header #top-menu > li { padding-right: 10px !important; }
  #main-header #top-menu > li > a { font-size: 12px !important; letter-spacing: 0 !important; }
}
/* 981-1060 px: tighter still, so the phone number stays on the menu row at 1024 (iPad landscape). Below 1024 it drops to its own centred line. */
@media (min-width: 981px) and (max-width: 1060px) {
  #main-header #top-menu > li { padding-right: 7px !important; }
  #main-header #top-menu > li > a { font-size: 11.5px !important; }
}

/* Phones: hero headlines sized to the screen, so the call button stays on the first screen. */
@media (max-width: 767px) {
  .et_pb_fullwidth_header .header-content h1.et_pb_module_header {
    font-size: clamp(30px, 9vw, 40px) !important;
    line-height: 1.15 !important;
  }
}