/* ===== ATS Universal Mobile Nav (<=768px) ===== */
@media (max-width: 768px){
  /* Hide ANY existing desktop navs to prevent duplication/overlap */
  header, nav, .site-header, .navbar, #navbar, #mainNav { display: none !important; }

  /* New mobile bar */
  .ats-mobile-nav { display: block; width: 100%; position: relative; z-index: 2000; }
  .ats-mobile-nav .bar {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 14px; background: rgba(0,0,0,0.85); backdrop-filter: blur(4px);
  }
  .ats-mobile-nav .logo img { height: 46px; max-height: 46px; width: auto; object-fit: contain; filter: drop-shadow(0 0 6px rgba(22,163,74,0.55)); }

  .ats-mobile-nav .hamburger {
    width: 42px; height: 42px; padding: 8px; border-radius: 12px;
    background: #1f2937; border: 1px solid rgba(255,255,255,0.12);
  }
  .ats-mobile-nav .hamburger span {
    display: block; height: 2px; width: 22px; margin: 5px auto;
    background: #2ecc71; /* ATS green-ish */
  }

  .ats-mobile-nav .menu {
    display: none;
    background: rgba(0,0,0,0.92);
    padding: 8px 10px 14px 10px;
    border-bottom-left-radius: 14px;
    border-bottom-right-radius: 14px;
  }
  .ats-mobile-nav.open .menu { display: block; }

  .ats-mobile-nav .menu a {
    display: block; padding: 12px 10px; margin: 4px 0;
    color: #f1f5f9; text-decoration: none; font-weight: 600;
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px; background: rgba(255,255,255,0.03);
  }
  .ats-mobile-nav .menu a:active { transform: scale(0.99); }

  /* Make sure first content doesn't hide under bar */
  body > .ats-mobile-nav + * { margin-top: 6px; }
}
/* Desktop keeps original header/nav */
@media (min-width: 769px){
  .ats-mobile-nav { display: none; }
}





@media (max-width: 768px){
  .ats-mobile-nav .logo img {
    height: 72px;
    max-height: 72px;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 10px rgba(22,163,74,0.75));
    margin: 3px 0;
  }
}

/* ===== ATS Mobile Section Breaks & Pop (navbar untouched) ===== */
@media (max-width: 768px){

  /* Give every section breathing room */
  main section, section {
    padding-top: 22px;
    padding-bottom: 22px;
  }

  /* Clear separation between consecutive sections */
  main section + section, section + section {
    border-top: 1px solid rgba(255,255,255,0.10);
    box-shadow: inset 0 8px 18px -12px rgba(0,0,0,0.55);
    margin-top: 8px;
  }

  /* Gentle banding to avoid the "all runs together" look */
  main section:nth-of-type(even), section:nth-of-type(even) {
    background: rgba(255,255,255,0.02);
  }

  /* Stronger, clean section titles with an ATS-green accent line */
  section h2, .section-title, h2.section-title {
    margin-top: 6px;
    margin-bottom: 10px;
    line-height: 1.2;
    letter-spacing: 0.2px;
  }
  section h2::after, .section-title::after, h2.section-title::after {
    content: "";
    display: block;
    margin-top: 8px;
    width: 56%;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, rgba(22,163,74,0.9), rgba(22,163,74,0.15));
  }

  /* Cards/tiles/buttons get subtle depth so content blocks stand apart */
  .card, .tile, .panel, .box, .feature, .callout, .info-tile, .stat, .kpi, .metric, .stats-tile, .tile-kpi {
    border-radius: 16px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.03);
    box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    padding: 14px;
    margin-bottom: 14px;
  }

  /* KPI emphasis (values and labels spaced) */
  .kpi h3, .kpi .value, .kpi .label,
  .metric h3, .metric .value, .metric .label { margin: 4px 0; }

  /* Space above/below CTAs so they don't stick to other content */
  .btn, button, .button, .cta, a.button, .pill { margin: 8px 4px; }

  /* Reduce edge crowding on mobile */
  .container, .wrapper, .content { padding-left: 14px; padding-right: 14px; }

  /* Ensure nothing collides with the fixed mobile nav block we previously added */
  body > .ats-mobile-nav + * { margin-top: 8px; }
}