/* ==========================================================================
   Main navigation overlay - positioning fix
   Added 2026-08-27.

   PROBLEM
   The overlay menu (Home / Sara Group / Businesses / ...) lives inside
   <header class="wrapper"> but is designed to sit over the banner section
   that follows the header. It was positioned with `bottom: <n>vh` (and a
   JS-set inline `bottom`) resolved against the INITIAL CONTAINING BLOCK,
   i.e. the viewport. Its position on the page therefore tracked the browser
   WINDOW HEIGHT instead of the banner it belongs to, so it landed on top of
   page copy whenever the two disagreed.

   FIX
   The nav is anchored to the header itself (top: 100% = the header's bottom
   edge) and pushed down by --sg-nav-offset, which theme.js sets to
   (bannerHeight - navHeight). Window height is no longer part of the
   equation. If the JS never runs, the offset falls back to 0 and the nav
   sits directly beneath the header bar - a safe position, never on top of
   banner copy.

   Below 992px the menu is an off-canvas drawer (hamburger), so none of this
   applies there.
   ========================================================================== */

@media (min-width: 992px) {

  /* Positioning context = the header, not the viewport. */
  header.wrapper {
    position: relative;
  }

  /* The in-page overlay nav.
     .navbar-clone (the sticky duplicate) is excluded on purpose - it is
     position:fixed and must stay that way. */
  nav.navbar.navbar-expand-lg.extended.main-nav:not(.navbar-clone) {
    position: absolute !important;
    left: 0;
    right: 0;
    /* overrides every `bottom: <n>vh !important` rule in responsive.css
       and the inline `bottom` the old script used to write */
    bottom: auto !important;
    top: calc(100% + var(--sg-nav-offset, 0px)) !important;
  }
}

/* --------------------------------------------------------------------------
   Job posting banner.
   Padding moved out of the template's inline style so the nav band can be
   reserved here. The bottom padding guarantees hero copy and the nav can
   never occupy the same pixels.
   -------------------------------------------------------------------------- */
.job-hero {
  background: linear-gradient(120deg, #0a2a43 0%, #0e4a6e 100%);
  padding-top: 120px;
  padding-bottom: 64px;
}

@media (min-width: 992px) {
  .job-hero {
    padding-top: 140px;
    /* nav band (~75px) + clearance */
    padding-bottom: 150px;
  }
}