/* ============================================================
   Global: prevent any element from forcing horizontal scroll.
   ============================================================ */
html, body { overflow-x: hidden !important; max-width: 100% !important; }

/* ============================================================
   Accessibility: bump native homepage palette colors so axe
   passes WCAG AA contrast. Concrete fixes from a11y rescan:
   - mint green check #2F8048 -> #1F5E2D (4.5:1 on white)
   - low-opacity white-on-navy bumped via JS shim
   - darker gold #B97F2E -> #8a5e1c on light bg
   ============================================================ */
#tms-hp { --mint2: #1F5E2D !important; }
#tms-hp .tms-check { color: #1F5E2D !important; }
#tms-hp .tms-eyebrow { color: #8a5e1c !important; }
/* Service-card "1 SPOC / 20 years / 100+ cities" mono labels */
#tms-hp .tms-mono { color: #8a5e1c !important; }

/* --mu is fine on white/F7F8FB; darken it for AA */
#tms-hp-calc, #tms-estimator { --mu: #44557A !important; }
/* Light-bg eyebrow on light card backgrounds */
.tms-card .tmsc-eyebrow,
.tms-card .tms-eyebrow,
.tms-pad:not([style*="background:var(--ink)"]):not([style*="background:#15446A"]) .tmsc-eyebrow {
  color: #8a5e1c !important;
}
/* Fluent Forms field colors */
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--label label,
.fluentform label { color: #15446A !important; }
/* Calculator result-panel muted text */
#tms-hp-calc #est-body > div:last-child div[style*="color:var(--mu)"],
#tms-hp-calc .tmsc-mono { color: #44557A !important; }
#tms-hp, #tms-hp * { box-sizing: border-box; }
#tms-hp img, #tms-hp svg, #tms-hp video { max-width: 100%; height: auto; }
#tms-hp h1, #tms-hp h2, #tms-hp h3, #tms-hp p {
  overflow-wrap: break-word;
  word-wrap: break-word;
  hyphens: auto;
}

/* ============================================================
   Mobile (<=640px) — collapse all the desktop padding/grids
   that were causing overflow.
   ============================================================ */
@media (max-width: 640px) {

  /* Sections + their inner containers should never exceed viewport */
  #tms-hp .tms-pad {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }
  #tms-hp .tms-inner {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
  }
  #tms-hp .tms-card {
    padding: 20px !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* Any 2-column grid on the homepage collapses to 1 column on mobile */
  #tms-hp [style*="grid-template-columns:1fr 1fr"],
  #tms-hp [style*="grid-template-columns: 1fr 1fr"],
  #tms-hp [style*="grid-template-columns:1fr 1.05fr"],
  #tms-hp [style*="grid-template-columns: 1fr 1.05fr"],
  #tms-hp [style*="grid-template-columns:1.05fr 1fr"],
  #tms-hp [style*="grid-template-columns: 1.05fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* Counter card: stack the 4 stats in one column with comfortable spacing */
  #tms-hp .tms-counter {
    font-size: 38px !important;
  }
  /* Specific counter card layout - 2x2 grid */
  #tms-hp [style*="grid-template-columns:1fr 1fr"]:has(.tms-counter) {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
  }

  /* ===== Cost estimator on the homepage ===== */
  #tms-estimator #est-body {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  #tms-estimator {
    padding: 20px !important;
  }
  /* Slider labels under the range — give them room and shrink type */
  #tms-estimator #est-fee-wrap > div[style*="space-between"],
  #tms-estimator #est-staff-fee-wrap > div[style*="space-between"] {
    font-size: 10px !important;
    gap: 4px;
    flex-wrap: wrap;
  }
  #tms-estimator #est-fee-wrap > div[style*="space-between"] > span,
  #tms-estimator #est-staff-fee-wrap > div[style*="space-between"] > span {
    white-space: nowrap;
  }
  /* Mode toggle buttons — make tappable and readable */
  #tms-estimator > div[style*="grid-template-columns:1fr 1fr"]:first-child {
    grid-template-columns: 1fr 1fr !important;
    max-width: 100% !important;
  }
  /* Result column: give it visible borders and stop overflow */
  #tms-estimator #est-body > div:last-child {
    padding: 20px !important;
  }
  #tms-estimator #est-r-gross,
  #tms-estimator #est-r-foreign {
    font-size: 24px !important;
    word-break: break-word;
  }
  #tms-estimator #est-r-total {
    word-break: break-word;
  }

  /* ===== Headings overflowing ===== */
  #tms-hp h1 { font-size: clamp(28px, 8vw, 40px) !important; }
  #tms-hp h2 { font-size: clamp(24px, 7vw, 32px) !important; }
  #tms-hp h3 { font-size: clamp(18px, 5vw, 22px) !important; }
}

/* ============================================================
   Fluent Forms — tighter vertical sizing for the contact form
   (labels were 22px, inputs 41px tall, textarea 90px, fields
   too far apart). Works on every page that embeds the form.
   ============================================================ */
.fluentform { font-size: 14px !important; line-height: 1.4; }
.fluentform .ff-el-input--label,
.fluentform .ff-el-input--label label,
.fluentform .ff_t_b label,
.fluentform label {
  font-size: 13.5px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
  margin-bottom: 5px !important;
  color: #0F2E4D !important;
  letter-spacing: 0 !important;
}
/* Required-field asterisk a bit bolder/redder for visual weight */
.fluentform .ff-el-is-required label:after,
.fluentform .ff_required { color: #C53030 !important; font-weight: 700 !important; }

/* iOS auto-zoom mitigation: WebKit zooms when an input < 16px gets focus.
   Bump input font-size on iOS only via the WebKit feature-query trick. */
@supports (-webkit-touch-callout: none) {
  .fluentform input[type="text"],
  .fluentform input[type="email"],
  .fluentform input[type="tel"],
  .fluentform input[type="url"],
  .fluentform input[type="number"],
  .fluentform input[type="password"],
  .fluentform input[type="search"],
  .fluentform select,
  .fluentform textarea {
    font-size: 16px !important;
  }
}
.fluentform .ff-el-input--label {
  padding-bottom: 0 !important;
}
.fluentform .ff-el-form-control,
.fluentform input[type="text"],
.fluentform input[type="email"],
.fluentform input[type="tel"],
.fluentform input[type="url"],
.fluentform input[type="number"],
.fluentform input[type="password"],
.fluentform input[type="search"],
.fluentform select,
.fluentform textarea {
  padding: 9px 13px !important;
  font-size: 14px !important;
  line-height: 1.4 !important;
  border-radius: 8px !important;
  min-height: 38px !important;
  height: auto !important;
}
.fluentform textarea {
  min-height: 68px !important;
}
/* Field-group vertical rhythm */
.fluentform .ff-el-group,
.fluentform .ff-t-cell,
.fluentform .ff-el-form-top {
  margin-bottom: 12px !important;
}
.fluentform .ff-el-group:last-of-type,
.fluentform .ff-el-form-top:last-of-type {
  margin-bottom: 6px !important;
}
/* Submit button — keep TMS gold but trim padding */
.fluentform .ff-btn-submit,
.fluentform button[type="submit"],
.fluentform .ff-btn {
  padding: 11px 22px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  border-radius: 100px !important;
  min-height: 42px !important;
}
/* Required-field asterisk */
.fluentform .ff-el-is-required.asterisk-right .ff-el-input--label label:after,
.fluentform .ff_required {
  font-size: 13px !important;
  margin-left: 2px;
}

@media (max-width: 640px) {
  .fluentform .ff-el-form-control,
  .fluentform input[type="text"],
  .fluentform input[type="email"],
  .fluentform input[type="tel"],
  .fluentform input[type="url"],
  .fluentform input[type="number"],
  .fluentform select,
  .fluentform textarea {
    padding: 8px 12px !important;
    font-size: 14px !important;
    min-height: 36px !important;
  }
  .fluentform textarea {
    min-height: 60px !important;
  }
  .fluentform .ff-el-input--label,
  .fluentform .ff-el-input--label label,
  .fluentform label {
    font-size: 12.5px !important;
    margin-bottom: 3px !important;
  }
  .fluentform .ff-el-group,
  .fluentform .ff-el-form-top {
    margin-bottom: 10px !important;
  }
}

/* ============================================================
   TRUSTED BY: client names grid — looks tidy at all widths
   ============================================================ */
#tms-clients-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)) !important;
  gap: 12px 18px !important;
  max-width: 1080px;
  margin: 0 auto !important;
  align-items: center;
  justify-items: center;
  padding: 0 8px;
}
#tms-clients-grid .tms-client {
  font-weight: 600;
  font-size: 15px;
  color: rgba(255,255,255,.78);
  letter-spacing: -0.01em;
  text-align: center;
  line-height: 1.25;
  padding: 4px 0;
}
/* Tablet (641-1024) — 3 columns; auto-fit was producing 946px wide grid on 768 */
@media (min-width: 641px) and (max-width: 1024px) {
  #tms-clients-grid {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 12px 16px !important;
    max-width: 100% !important;
  }
}
@media (max-width: 640px) {
  #tms-clients-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px 14px !important;
    max-width: 100% !important;
  }
  #tms-clients-grid .tms-client {
    font-size: 14px;
  }
}

/* ============================================================
   Blog / post wide tables — shrink on mobile (don't overflow)
   ============================================================ */
@media (max-width: 640px) {
  .entry-content table,
  .post-content table,
  article table,
  .single-post table,
  main table:not(.fluentform table) {
    font-size: 10px !important;
    line-height: 1.3 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
    border-collapse: collapse !important;
  }
  .entry-content table th,
  .entry-content table td,
  .post-content table th,
  .post-content table td,
  article table th,
  article table td,
  main table th,
  main table td {
    padding: 4px 5px !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    hyphens: auto !important;
  }
}

/* ============================================================
   Old /eor-in-india/ (page-id 12) process row
   — 5 steps in display:flex;gap:0 don't wrap on mobile
   ============================================================ */
@media (max-width: 640px) {
  body.elementor-page-12 [style*="display:flex"][style*="gap:0"] {
    flex-direction: column !important;
    gap: 12px !important;
    align-items: stretch !important;
  }
  body.elementor-page-12 [style*="display:flex"][style*="gap:0"] > div {
    border-left: none !important;
    border-top: 1px solid rgba(255,255,255,.15) !important;
    padding: 14px 16px !important;
    flex: 1 1 auto !important;
  }
  body.elementor-page-12 [style*="display:flex"][style*="gap:0"] > div:first-child {
    border-top: none !important;
    padding-top: 0 !important;
  }
}