/* ============================================================
   BHARAT SHRAM SETU — RESPONSIVE AUDIT FIXES
   Loaded LAST on every page (after base/home/header/footer/page
   CSS) so it can safely close real responsive gaps without
   touching the verified, already-approved visual design of the
   individual stylesheets. Nothing in this file changes colors,
   fonts, spacing rhythm, or layout *pattern* — it only makes the
   existing patterns behave correctly across breakpoints:

     Desktop        1920px+
     Laptop         1366–1919px   (default styles, no query needed)
     Tablet Land.   1024–1365px   -> max-width: 1200px
     Tablet Port.   768–1023px    -> max-width: 992px
     Mobile Large   481–767px     -> max-width: 768px
     Mobile Small   320–480px     -> max-width: 480px

   Sections below are ordered: global safety net -> navigation ->
   typography -> grids/sections -> forms/buttons -> footer.
   ============================================================ */

/* ---------- 1. GLOBAL SAFETY NET (no horizontal scroll, ever) ---------- */
html, body {
  max-width: 100%;
  overflow-x: hidden;
}
*, *::before, *::after { min-width: 0; }
img, svg, video, picture, canvas {
  max-width: 100%;
  height: auto;
}
/* NOTE: intentionally NOT setting .wrap/.hero-container/.nav-row to
   max-width:100% here — those already have correct 1240px/1400px caps
   in base.css/common.css/home.css/header.css. An earlier version of this
   file did add that override as an overflow "safety net", but because it
   has the same selector specificity and this file loads last, it silently
   replaced the intended max-width on every screen size, including
   desktop/laptop — stretching centered content edge-to-edge instead of
   overflow-checking it. Removed; overflow-x:hidden above is the correct,
   non-destructive safety net. */

/* ---------- 2. MOBILE NAVIGATION ---------- */
/* Modern animated hamburger (button content is hidden; three CSS bars
   are drawn instead so it can morph into an "X" when open). */
.mobile-menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  font-size: 0;         /* hide the "☰" text glyph, bars are drawn below */
  line-height: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: none;
  border: 1px solid var(--border, #E7EAF0);
  border-radius: 8px;
  cursor: pointer;
}
@media (max-width: 991px) {
  .mobile-menu-toggle { display: inline-flex; }
}
.mobile-menu-toggle span,
.mobile-menu-toggle span::before,
.mobile-menu-toggle span::after {
  content: '';
  position: absolute;
  width: 20px;
  height: 2px;
  border-radius: 2px;
  background: var(--text, #111827);
  transition: transform .25s ease, opacity .25s ease, top .25s ease;
}
.mobile-menu-toggle span { top: 50%; margin-top: -1px; }
.mobile-menu-toggle span::before { top: -7px; }
.mobile-menu-toggle span::after { top: 7px; }
.mobile-menu-toggle[aria-expanded="true"] span { background: transparent; }
.mobile-menu-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); background: var(--text, #111827); }
.mobile-menu-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); background: var(--text, #111827); }

/* Dark overlay behind the open mobile menu (element is injected by
   assets/js/site.js the first time the menu opens on any page). */
.nav-overlay {
  position: fixed;
  inset: 0;
  z-index: 999; /* one below .site-header's z-index:1000, above page content */
  background: rgba(10, 15, 40, 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s ease, visibility .25s ease;
}
.nav-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
/* Body is locked from scrolling while the mobile menu is open. */
body.nav-open {
  overflow: hidden;
}
@media (max-width: 991px) {
  nav.primary {
    max-height: calc(100vh - var(--header-h, 81px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .nav-row { padding-left: 20px; padding-right: 20px; flex-wrap: nowrap; }
  .nav-item > span { min-height: 44px; }
  .mega li a { min-height: 40px; display: flex; align-items: center; }
}
@media (max-width: 480px) {
  .nav-row { padding-left: 16px; padding-right: 16px; }
  .logo-text { height: 24px !important; }
}

/* ---------- 3. FLUID TYPOGRAPHY ---------- */
/* NOTE: hero h1, .section-head h2, .cta-final h2, and every inner-page
   hero h1 (about/industries/solutions/demo) already use clamp() in their
   own stylesheets — that's correct and untouched. An earlier version of
   this file also added *generic* h1/h2/h3 clamp() overrides here; because
   they're unscoped (apply at every width) and this file loads last, they
   silently replaced those already-correct component values everywhere,
   including desktop, and oversized plain headings that had no font-size
   of their own — pushing text past its card/section background in
   several places. Removed. Only a safe, non-resizing overflow guard and
   mobile-only tweaks remain below. */
p, li, .field input, .field select, .field textarea { word-wrap: break-word; overflow-wrap: break-word; }
@media (max-width: 480px) {
  body { font-size: 15px; }
  .hero-left p, .hero p { font-size: 16px !important; line-height: 1.65 !important; }
}

/* ---------- 4. TOUCH TARGETS (min 44px, per WCAG 2.1 target size) ----------
   Scoped to mobile widths only — on desktop/tablet these buttons/chips
   (mega-menu CTAs, filter chips, tab buttons) are intentionally compact;
   forcing 44px there was the other unintended "stretched" change. */
@media (max-width: 767px) {
  .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-outline-navy,
  button, .tab-btn, .filter-chip, .dash-tabs button, .chat-quick-reply-btn {
    min-height: 44px;
  }
  a.btn, a.btn-primary, a.btn-secondary { min-height: 44px; }
  .faq-q { min-height: 44px; }
}

/* ---------- 5. SECTION / GRID REFINEMENTS PER BREAKPOINT ---------- */

/* Tablet landscape */
@media (max-width: 1200px) {
  .wrap { padding-left: 32px; padding-right: 32px; }
}

/* Tablet portrait */
@media (max-width: 992px) {
  section { padding: 72px 0; }
  .metrics-grid { grid-template-columns: repeat(2, 1fr); }
  .foot-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .tab-panel.active { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Mobile large */
@media (max-width: 768px) {
  .wrap { padding-left: 20px; padding-right: 20px; }
  section { padding: 56px 0; }
  .hero-buttons .btn, .hero-buttons a { width: 100%; text-align: center; justify-content: center; }
  .case-grid, .case-grid-2 { grid-template-columns: 1fr !important; }
  .ind-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .mod-grid, .tab-panel.active { grid-template-columns: 1fr !important; }
  .steps { grid-template-columns: 1fr 1fr !important; }
  .dashboard-view { padding: 12px; }
  .stats-strip { flex-direction: column; }
  .cta-final .btns { flex-direction: column; }
  .cta-final .btns .btn { width: 100%; }
}

/* Mobile small */
@media (max-width: 480px) {
  .wrap { padding-left: 16px; padding-right: 16px; }
  section { padding: 44px 0; }
  .pillars, .problem-grid, .ind-grid, .steps, .metrics-grid,
  .orbit-col, .case-features, .mod-grid { grid-template-columns: 1fr !important; }
  .foot-grid { grid-template-columns: 1fr !important; gap: 28px !important; text-align: left; }
  .foot-bottom { flex-direction: column; align-items: flex-start; text-align: left; }
  .dash-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; }
  .tab-bar { overflow-x: auto; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .form-card { padding: 22px; }
  .floating-card { font-size: 12px !important; padding: 8px 12px !important; white-space: normal; }
}

/* ---------- 6. FORMS ---------- */
@media (max-width: 640px) {
  .form-row-2 { grid-template-columns: 1fr !important; }
}
.field input, .field select, .field textarea { width: 100%; }

/* ---------- 7. FOOTER (self-contained breakpoints so it can never be
   silently overridden by an unconditional rule loaded earlier — see
   AUDIT-REPORT.md, issue #1) ---------- */
@media (max-width: 992px) {
  .foot-grid { grid-template-columns: repeat(2, 1fr); gap: 28px; }
}
@media (max-width: 480px) {
  .foot-grid { grid-template-columns: 1fr; gap: 28px; }
  .foot-companies-logos { gap: 16px; }
}

/* ---------- 8. MISC COMPONENT FIXES FOUND DURING AUDIT ---------- */
@media (max-width: 700px) {
  .metric .v { font-size: clamp(26px, 6vw, 42px); }
}
@media (max-width: 480px) {
  .dash-kpis { grid-template-columns: 1fr 1fr !important; }
  .hero-stats { gap: 20px !important; }
  .about-hero-card { max-width: 100% !important; }
}

/* ---------- 9. CHAT WIDGET small-phone safety ---------- */
@media (max-width: 380px) {
  .chat-panel { width: calc(100vw - 24px) !important; }
  .chat-widget { right: 12px !important; bottom: 12px !important; }
}