/* ═══════════════════════════════════════════════════════════════
   SAFARI COMPATIBILITY FIXES
   Paste this at the VERY BOTTOM of style.css
   ═══════════════════════════════════════════════════════════════ */

/* ── FIX 1: Safari 100vh bug (address bar eats space) ── */
/* Hero section */
.hero {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh; /* modern Safari 15.4+ */
}

/* Contact section */
.ctsec {
  min-height: 100vh;
  min-height: -webkit-fill-available;
  min-height: 100svh;
}

/* ── FIX 2: Safari fixed positioning bug on mobile ── */
/* Mobile overlay nav — Safari ke liye inset shorthand nahi chalta purane versions mein */
.mnav {
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  /* Safari scroll fix */
  -webkit-overflow-scrolling: touch;
  overflow-y: auto;
  overflow-x: hidden;
}

/* ── FIX 3: Safari backdrop-filter flicker fix ── */
.hdr {
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* ── FIX 4: aspect-ratio fallback for Safari < 15 ── */
/* Team cards */
.timg {
  width: 100%;
  /* Fallback using padding-top trick */
  height: auto;
}

/* tcard inner wrap already has overflow hidden, this ensures square */
@supports not (aspect-ratio: 1) {
  .tcard-img-wrap {
    position: relative;
    padding-top: 100%;
  }
  .tcard-img-wrap .timg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .bcard-img {
    height: 220px;
  }
  .s2-img {
    height: 340px;
  }
}

/* ── FIX 5: Safari flexbox gap fix ── */
/* Older Safari did not support gap in flex — use margin fallback */
@supports not (gap: 1px) {
  .hdr-nav a + a { margin-left: 40px; }
  .hero-stats .hero-stat + .hero-stat { margin-left: 48px; }
  .fsoc a + a { margin-left: 12px; }
  .crow > * + * { margin-left: 18px; }
  .bnr-ct > * + * { margin-top: 40px; }
  .dmeta .dmeta-i + .dmeta-i { margin-left: 48px; }
}

/* ── FIX 6: Safari animation bug on mobile nav ── */
/* Remove animation that can cause Safari flicker */
@media (max-width: 960px) {
  .mnav {
    animation: none !important;
    /* use opacity transition instead */
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  .mnav.op {
    opacity: 1;
    pointer-events: auto;
  }
}

/* ── FIX 7: Safari body scroll lock fix ── */
/* When nav is open, body must not scroll — extra insurance */
body.nav-open {
  position: fixed;
  width: 100%;
  overflow: hidden;
  -webkit-overflow-scrolling: none;
}

/* ── FIX 8: Safari button rendering ── */
.ham,
.mnav-close,
.team-bio-btn,
.bio-close {
  -webkit-appearance: none;
  appearance: none;
}

/* ── FIX 9: Safari sticky header on iOS (scroll bounce area) ── */
.hdr {
  position: -webkit-sticky;  /* old Safari */
  position: fixed;
}

/* ── FIX 10: CSS Grid gap fix for Safari < 12 ── */
@supports not (grid-template-columns: 1fr) {
  .pgrid, .bgrid, .tgrid, .fgrid, .vals, .kpi-strip,
  .thesis-cards, .s5-grid, .glossary-grid, .team-grid {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap;
  }
}

/* ── FIX 11: clamp() fallback for very old Safari ── */
@supports not (font-size: clamp(1px, 1vw, 2px)) {
  .hero h1 { font-size: 52px; }
  .stit     { font-size: 40px; }
  .phero h1 { font-size: 52px; }
  .dhero h1 { font-size: 60px; }
}

/* ── FIX 12: Safari transform on hover cards ── */
.bcard:hover {
  -webkit-transform: translateY(-4px);
  transform: translateY(-4px);
}
.cat-item:hover {
  -webkit-transform: translateX(4px);
  transform: translateX(4px);
}