/* ================================================
   EduHealth — responsive-fix.css
   Mobile responsiveness polish & active-nav fixes
   ================================================ */

/* ——— Hide top-bar on mobile ———
   The top-bar sits above the sticky navbar in normal flow.
   Hiding it on mobile ensures the navbar is always flush
   with the viewport top, so the fixed mobile-nav overlay
   (top: var(--nav-h)) aligns correctly without a gap.
   ————————————————————————————— */
@media (max-width: 768px) {
  .top-bar { display: none; }
}

/* ——— Show sub-category mobile accordion buttons ———
   mob-consult and mob-msft are IT-Services sub-sections;
   indent them visually so users understand the hierarchy.
   ————————————————————————————— */
@media (max-width: 768px) {
  .mob-link[data-sub="mob-consult"],
  .mob-link[data-sub="mob-msft"] {
    display: flex;
    font-size: .84rem;
    padding-left: 1.75rem;
    color: var(--c-gray-600);
    border-bottom-color: var(--c-gray-100);
  }
}

/* ——— Mobile active-link indicators ———
   Teal left-border stripe on active mob-sub-link;
   teal background highlight on active mob-link trigger.
   ————————————————————————————— */
.mob-link.active {
  color: var(--c-teal-400);
  background: rgba(0, 212, 184, .07);
  border-radius: var(--radius-sm);
}

.mob-sub-link.active {
  color: var(--c-teal-400);
  font-weight: 600;
  position: relative;
  padding-left: 1.1rem;
}

.mob-sub-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 55%;
  min-height: 16px;
  background: var(--c-teal-400);
  border-radius: 2px;
}

/* ——— Improved touch targets ———
   WCAG 2.5.8 recommends 24×24 px; we go to 44 px for comfort.
   ————————————————————————————— */
.mob-sub-link {
  min-height: 44px;
  display: flex;
  align-items: center;
}

/* ——— Prevent horizontal overflow on very small screens ——— */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}

@media (max-width: 360px) {
  .logo-text { font-size: .80rem; max-width: 128px; }
  .logo-mark { width: 32px; height: 32px; font-size: .78rem; }
  .navbar .inner { gap: .75rem; }
  .container { padding: 0 1rem; }
  .hero h1 { font-size: clamp(1.45rem, 5.5vw, 1.8rem); }
  .hero-badge { font-size: .65rem; padding: .28rem .7rem; }
}

/* ——— Footer wrapping on narrow screens ——— */
@media (max-width: 400px) {
  .footer-bottom { flex-direction: column; align-items: flex-start; gap: .5rem; }
  .footer-legal  { flex-wrap: wrap; gap: .75rem; }
}

/* ——— Stats band: 2-col at 480-768, 1-col below 360 ——— */
@media (max-width: 360px) {
  .stats-band .inner { grid-template-columns: 1fr; }
  .sb-stat .num { font-size: 2rem; }
}

/* ——— Process steps: centre on single-column ——— */
@media (max-width: 480px) {
  .p-step { padding: 0 .5rem; }
  .p-circle { width: 52px; height: 52px; font-size: 1rem; }
}

/* ——— CTA section buttons stack on tiny screens ——— */
@media (max-width: 380px) {
  .cta-actions .btn,
  .hero-actions .btn,
  .page-hero-actions .btn {
    font-size: .88rem;
    padding: .75rem 1.25rem;
  }
}

/* ——— Industry cards: single column below 380px ——— */
@media (max-width: 380px) {
  .industries-grid { grid-template-columns: 1fr; }
}

/* ——— Mobile nav: smooth open/close ——— */
.mobile-nav {
  -webkit-overflow-scrolling: touch;
}

/* ——— Ensure active desktop dot indicator only shows on desktop ——— */
@media (max-width: 768px) {
  .nav-link.active::after { display: none; }
}