/* SecurityTalent 1.9.49 — stable desktop, tablet and mobile header controls. */

/* Replace Helix's space-between gaps with one intentional flexible menu gap. */
@media (min-width: 992px) {
  #sp-header #sp-menu > .sp-column {
    justify-content: flex-start !important;
    gap: .45rem !important;
  }

  #sp-header #sp-menu > .sp-column > .sp-megamenu-wrapper {
    margin-inline-end: auto !important;
  }

  #sp-header .st-header-language,
  #sp-header .st-header-auth {
    margin: 0 !important;
  }
}

@media (max-width: 991.98px) {
  /* Keep the selector and menu trigger together instead of allowing the
     framework's large automatic toggler margin to split them apart. */
  #sp-header #sp-menu > .sp-column {
    direction: ltr !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: .5rem !important;
  }

  #sp-header #sp-menu > .sp-column > .sp-megamenu-wrapper {
    flex: 0 0 0 !important;
    width: 0 !important;
    margin: 0 !important;
  }

  #sp-header .st-header-language {
    direction: ltr !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    order: 1 !important;
  }

  html[dir="rtl"] #sp-header .st-header-language {
    direction: rtl !important;
  }

  #sp-header #offcanvas-toggler {
    flex: 0 0 48px !important;
    width: 48px !important;
    height: 48px !important;
    margin: 0 !important;
    order: 3 !important;
  }

  /* A closed drawer must remain completely outside the viewport. */
  body:not(.offcanvas-active) .offcanvas-menu {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  body.offcanvas-active .offcanvas-menu {
    visibility: visible !important;
    pointer-events: auto !important;
  }
}

/* Tablets have enough room for the same four compact authentication choices
   as desktop. Keep mobile uncluttered by leaving those controls in its drawer. */
@media (min-width: 768px) and (max-width: 991.98px) {
  #sp-header,
  #sp-header #sp-menu > .sp-column {
    min-height: 88px !important;
    height: 88px !important;
  }

  #sp-header .st-header-auth.d-none.d-lg-flex {
    display: grid !important;
    direction: ltr !important;
    grid-template-columns: repeat(2, 128px) !important;
    grid-template-rows: repeat(2, 34px) !important;
    gap: 5px 7px !important;
    flex: 0 0 263px !important;
    width: 263px !important;
    min-width: 263px !important;
    min-height: 73px !important;
    margin: 0 !important;
    order: 2 !important;
  }

  #sp-header .st-header-auth > .sourcecoast,
  #sp-header .st-header-auth > .sourcecoast > .d-flex,
  #sp-header .st-header-auth > .mod-es,
  #sp-header .st-header-auth > .sourcecoast .social-login > a,
  #sp-header .st-header-auth > .mod-es > a {
    width: 128px !important;
    min-width: 128px !important;
    max-width: 128px !important;
    height: 34px !important;
    min-height: 34px !important;
    max-height: 34px !important;
    font-size: .72rem !important;
  }

  #sp-header .st-header-auth > .mod-es {
    display: grid !important;
    grid-template-rows: repeat(2, 34px) !important;
    gap: 5px !important;
    height: 73px !important;
    min-height: 73px !important;
    max-height: 73px !important;
  }

  #sp-header .st-header-auth .sourcecoast .social-login > a::before {
    flex-basis: 22px !important;
    width: 22px !important;
    height: 22px !important;
    font-size: 14px !important;
  }

  #sp-header .st-language-menu > summary {
    min-width: 6.5rem !important;
    max-width: 7rem !important;
  }
}

@media (max-width: 767.98px) {
  #sp-header .st-header-auth {
    display: none !important;
  }

  #sp-header #sp-menu > .sp-column {
    min-height: 58px !important;
  }
}