/* =========================================================
   HARSHAM GROUP — FIXES.CSS
   Load this file AFTER style.css on every page.
   Fixes: (1) mobile nav toggle reliability
          (2) training.html mobile grid misalignment
========================================================= */

/* ---------- 1. HARDENED MOBILE NAVIGATION ---------- */
@media (max-width: 800px) {
  .navbar {
    position: sticky;
    z-index: 50;
  }

  .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;
  }
}

/* ---------- 2. TRAINING PAGE MOBILE ALIGNMENT ---------- */
@media (max-width: 800px) {
  .page-hero.training-hero {
    padding: 90px 6% 60px;
    text-align: left;
  }

  .training-meta {
    gap: 8px;
  }

  .training-meta span {
    font-size: 11px;
    padding: 8px 12px;
  }

  .outcome-grid {
    grid-template-columns: 1fr !important;
    gap: 12px;
  }

  .outcome-grid div {
    font-size: 13px;
    padding: 16px;
  }

  .training-timeline {
    gap: 12px;
  }

  .training-timeline article {
    grid-template-columns: 30px 1fr !important;
    gap: 14px;
    padding: 18px;
  }

  .training-timeline h3 {
    font-size: 17px;
  }

  .training-timeline p {
    font-size: 13px;
  }

  .training-projects {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px;
  }

  .training-projects span {
    font-size: 12px;
    padding: 14px 10px;
    text-align: center;
  }

  .training-cta {
    text-align: left;
    padding: 60px 6%;
  }

  .training-cta .button {
    width: 100%;
    justify-content: center;
  }

  .training-pillars .service-card {
    min-height: auto;
    padding: 22px;
  }
}

@media (max-width: 480px) {
  .training-projects {
    grid-template-columns: 1fr !important;
  }

  .training-meta {
    flex-direction: column;
    align-items: flex-start;
  }

  .training-meta span {
    width: 100%;
  }
}