/* =========================================================
   HARSHAM GROUP — NAVBAR-FIX.CSS
   Load this file AFTER style.css on EVERY page of the site
   (index.html, solutions.html, projects.html, company.html,
   career.html, consulting.html, training.html, contact.html,
   terms.html, privacy.html).

   Fixes the mobile navbar menu across the whole site:
     1. Header/nav stacking context bug (menu rendering
        behind page content even though JS toggles correctly)
     2. Hardened mobile dropdown visibility and layout
========================================================= */

/* ---------- 1. CRITICAL: HEADER STACKING CONTEXT ----------
   Base style.css has:
     .site-header, main, .footer { position:relative; z-index:1; }
   Because .site-header and <main> tie on z-index, and <main>
   comes LATER in the DOM, <main> paints ON TOP of the header —
   including the mobile nav dropdown nested inside it. This is
   why the menu's class/state can toggle correctly in JS but
   never actually becomes visible on screen. Force the header
   to sit strictly above <main> and <footer> in paint order. */
.site-header {
  position: relative;
  z-index: 100 !important;
}

main {
  position: relative;
  z-index: 1;
}

.footer {
  position: relative;
  z-index: 1;
}

/* ---------- 2. HARDENED MOBILE NAVIGATION ---------- */
.navbar {
  position: sticky;
  z-index: 50;
}

@media (max-width: 800px) {
  .burger {
    display: block !important;
    z-index: 60;
    position: relative;
  }

  .nav-links {
    display: none;
    flex-direction: column !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100%;
    background: var(--main) !important;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: 20px 6% 28px !important;
    gap: 14px !important;
    z-index: 55;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease;
  }

  .nav-links.open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
  }

  .nav-links li {
    width: 100%;
  }

  .nav-links a {
    display: block;
    width: 100%;
    padding: 10px 0;
    font-size: 15px;
  }

  .nav-links a.nav-cta {
    display: inline-block;
    width: auto;
    margin-top: 6px;
    text-align: center;
  }
}