/* ==========================================================
   mSATHI - Language switcher + Light / Dark theme
   Same controls as the other Dayal InfoSystems product sites.
   NOTE: this site's original design is DARK, so dark stays the
   default here and light is the added option.
   Load this file AFTER the page's own <style> block.
   ========================================================== */

/* ---------- Colours of the language / theme controls ---------- */
html[data-theme="dark"] {
  color-scheme: dark;
  --dg-accent: #f59d18;
  --tool-bg: #15171c;
  --tool-ink: #f0f0f0;
  --tool-muted: #9a9a9a;
  --tool-line: rgba(245, 157, 24, .35);
  --tool-hover: rgba(245, 157, 24, .15);
  --tool-active: rgba(245, 157, 24, .26);
  --panel-bg: #111318;
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, .7);
}
html[data-theme="light"] {
  color-scheme: light;
  --dg-accent: #c75a06;
  --tool-bg: #ffffff;
  --tool-ink: #1b1b1b;
  --tool-muted: #6b6b6b;
  --tool-line: rgba(199, 90, 6, .25);
  --tool-hover: rgba(199, 90, 6, .1);
  --tool-active: rgba(199, 90, 6, .18);
  --panel-bg: #ffffff;
  --panel-shadow: 0 18px 48px rgba(40, 20, 0, .2);
}

/* ---------- Placement in the Bootstrap navbar ----------
   Up to 991px: logo | language + theme | menu button, menu opens below.
   From 992px:  logo | menu links | language + theme, all on the right. */
#mainNav .navbar-brand { order: 0; }
#mainNav .nav-tools { order: 2; margin-left: auto; margin-right: .5rem; position: relative; }
#mainNav .navbar-toggler { order: 3; }
#mainNav .navbar-collapse { order: 4; }
#mainNav .tool-btn { font-family: 'Poppins', sans-serif; }
#mainNav .nav-link { white-space: nowrap; }
@media (min-width: 1200px) {
  #mainNav .navbar-collapse { order: 1; flex-grow: 1; }
  #mainNav .nav-tools { margin: 0 0 0 1rem; }
}

/* The panel lines up with the right edge of the whole toolbar */
#mainNav .lang-wrap { position: static; }
#mainNav .lang-panel { right: 0; }

/* Phones and tablets: the menu drops below the bar and the language list
   opens as a full-width panel (the links need 1200px to fit beside them) */
@media (max-width: 1199.98px) {
  #mainNav .navbar-toggler { display: block; }
  #mainNav .navbar-collapse { flex-basis: 100%; }
  #mainNav .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
  #mainNav .navbar-collapse.show,
  #mainNav .navbar-collapse.collapsing {
    display: block !important;
    background: var(--brand-dark);
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
  }
  #mainNav .navbar-nav { align-items: flex-start !important; }
  #mainNav .nav-tools { margin-block: 0; flex-wrap: nowrap; }
  #mainNav .lang-wrap { flex: 0 0 auto; }
  #mainNav .lang-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 70vh;
    margin: 0;
    box-shadow: var(--panel-shadow);
  }
}

/* The English labels are uppercase with wide letter-spacing, so just above the
   breakpoint they are tightened a little to fit beside the new buttons. */
@media (min-width: 1200px) and (max-width: 1365.98px) {
  #mainNav .nav-link { padding: 6px 8px !important; letter-spacing: .03em; font-size: .95rem; }
  #mainNav .nav-tools { margin-left: .5rem; }
  #mainNav .navbar-nav { gap: 0 !important; }
}

/* Indian-script and CJK labels are wider: tighten them, and between 1200px and
   1399px keep the menu button rather than squeezing the links. */
html[data-script] #mainNav .nav-link { padding: 6px 9px !important; letter-spacing: normal; }
@media (min-width: 1200px) and (max-width: 1399.98px) {
  html[data-script] #mainNav .navbar-toggler { display: block; }
  html[data-script] #mainNav .navbar-collapse { order: 4; flex-basis: 100%; flex-grow: 0; }
  html[data-script] #mainNav .navbar-collapse:not(.show):not(.collapsing) { display: none !important; }
  html[data-script] #mainNav .navbar-collapse.show,
  html[data-script] #mainNav .navbar-collapse.collapsing {
    display: block !important;
    background: var(--brand-dark);
    padding: 15px;
    border-radius: 10px;
    margin-top: 10px;
  }
  html[data-script] #mainNav .navbar-nav { align-items: flex-start !important; }
  html[data-script] #mainNav .nav-tools { margin-left: auto; margin-right: .5rem; }
}

@media (max-width: 575.98px) {
  #mainNav .lang-current { display: none; }   /* small phones: icon only */
  #mainNav .nav-tools { gap: .4rem; }
  #mainNav .navbar-brand { flex: 1 1 0; min-width: 0; margin-right: .5rem; }
  #mainNav .navbar-brand img { height: auto; max-height: 48px; max-width: 100%; }
}
@media (max-width: 400px) {
  #mainNav .tool-caret { display: none; }
  #mainNav .lang-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
}

/* ---------- Navbar tools (language + theme) ---------- */
.nav-tools {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-inline: .5rem;
}
.tool-btn {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-height: 40px;
  padding: .3rem .85rem;
  border: 1px solid var(--tool-line);
  border-radius: 999px;
  background: var(--tool-bg);
  color: var(--tool-ink);
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .2s ease, border-color .2s ease;
}
.tool-btn:hover { background: var(--tool-hover); border-color: var(--dg-accent); }
.tool-btn:focus-visible,
.lang-opt:focus-visible,
.lang-search:focus-visible {
  outline: 2px solid var(--dg-accent);
  outline-offset: 2px;
}
.tool-btn.icon-only { width: 40px; height: 40px; padding: 0; justify-content: center; font-size: 1rem; }

/* Perfect centring: Bootstrap Icons pushes every glyph down by .125em,
   so inside these buttons the icons are boxed and reset */
.tool-btn > i {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
}
.tool-btn > i::before { display: block; line-height: 1; vertical-align: 0; }
.tool-btn.icon-only > i { font-size: 1.05rem; }
.tool-caret { font-size: .7rem; transition: transform .2s ease; }
.lang-btn[aria-expanded="true"] .tool-caret { transform: rotate(180deg); }
/* Show the full language name - never truncate it; one tight line box
   so flexbox centres the letters themselves */
.lang-current { display: block; overflow: visible; line-height: 1.2; }
/* Fine-tuning per script: each script's letters sit differently in their line,
   so the label is nudged by a measured amount to look truly centred */
.lang-current { transform: translateY(var(--lang-nudge, 0px)); }
html:is([lang="hi"], [lang="mr"], [lang="ne"], [lang="sa"], [lang="mai"], [lang="doi"], [lang="brx"], [lang="kok"]) { --lang-nudge: 1.5px; }
html:is([lang="bn"], [lang="as"], [lang="mni"]) { --lang-nudge: 1px; }
html[lang="pa"] { --lang-nudge: 2.8px; }
html[lang="gu"] { --lang-nudge: 1.2px; }
html[lang="ta"] { --lang-nudge: .7px; }
html[lang="te"] { --lang-nudge: 2.6px; }
html[lang="kn"] { --lang-nudge: 1.5px; }
html[lang="ks"] { --lang-nudge: 2.4px; }
html[lang="sd"] { --lang-nudge: -1.3px; }
html[lang="ar"] { --lang-nudge: .9px; }
html:is([lang="zh"], [lang="ja"], [lang="ko"]) { --lang-nudge: -1.1px; }
html[lang="ur"] { --lang-nudge: -2px; }
html[lang="ur"] .lang-current { line-height: 1.9; }

.lang-wrap { position: relative; }
.lang-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 1100;
  width: min(480px, 94vw);
  max-height: min(72vh, 520px);
  overflow-y: auto;
  padding: .6rem;
  border: 1px solid var(--tool-line);
  border-radius: 14px;
  background: var(--panel-bg);
  box-shadow: var(--panel-shadow);
}
.lang-panel[hidden] { display: none; }

.lang-search {
  width: 100%;
  height: 40px;
  margin-bottom: .5rem;
  padding: 0 .8rem;
  border: 1px solid var(--tool-line);
  border-radius: 10px;
  background: transparent;
  color: var(--tool-ink);
  font: inherit;
  font-size: .9rem;
}
.lang-search::placeholder { color: var(--tool-muted); }

.lang-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2px;
}
.lang-group {
  grid-column: 1 / -1;
  margin: .6rem .75rem .2rem;
  padding-bottom: .3rem;
  border-bottom: 1px solid var(--tool-line);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tool-muted);
}
.lang-group[hidden] { display: none; }

.lang-opt {
  min-width: 0;
  min-height: 56px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: .5rem .75rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--tool-ink);
  text-align: start;
  cursor: pointer;
}
.lang-opt:hover { background: var(--tool-hover); }
.lang-opt[aria-current="true"] { background: var(--tool-active); }
.lang-opt[aria-current="true"] .native::after { content: "  \2713"; color: var(--dg-accent); }
.lang-opt .native,
.lang-opt .eng {
  display: block;
  max-width: 100%;
  white-space: normal;
  overflow: visible;
  overflow-wrap: anywhere;
  text-align: left;
}
.lang-opt .native { font-size: 1rem; font-weight: 600; line-height: 1.7; }
/* Nastaliq (Urdu) has very tall letters, give it extra room so nothing is clipped */
.lang-opt[data-lang="ur"] .native { line-height: 2.3; }
.lang-opt .eng { font-size: .75rem; color: var(--tool-muted); }
.lang-opt[hidden] { display: none; }
.lang-empty { margin: .5rem .25rem; font-size: .85rem; color: var(--tool-muted); }

/* The language menu keeps a neutral UI font whatever language the page is in;
   only each native name uses its own script font. */
html .lang-panel :is(.lang-search, .eng, .lang-empty),
html .lang-opt:not([data-script-font]) .native,
html .lang-btn .lang-current:lang(en) {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
html[data-script] .lang-panel :is(.lang-search, .eng, .lang-empty),
html[data-script] .lang-opt:not([data-script-font]) .native {
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}
/* Native names always render in their own script font */
.lang-opt[data-script-font] .native { font-family: var(--opt-font), system-ui, sans-serif; }

@media (max-width: 991.98px) {
  .nav-tools { margin: .75rem 0; flex-wrap: wrap; }

  .lang-wrap { flex: 1 1 auto; }
  .lang-panel {
    position: static;
    width: 100%;
    max-height: 55vh;
    margin-top: .5rem;
    box-shadow: none;
  }
}
@media (max-width: 380px) {
  .lang-grid { grid-template-columns: 1fr; }
}


/* Phones and tablets: the language list opens as a full-width panel under the navbar */
@media (max-width: 991.98px) {
  #mainNav .nav-tools { margin-block: 0; flex-wrap: nowrap; }
  #mainNav .lang-wrap { flex: 0 0 auto; }
  #mainNav .lang-panel {
    position: fixed;
    left: 12px;
    right: 12px;
    width: auto;
    max-height: 70vh;
    margin: 0;
    box-shadow: var(--panel-shadow);
  }
}
@media (max-width: 575.98px) {
  #mainNav .lang-current { display: none; }   /* small phones: icon only */
  #mainNav .nav-tools { gap: .4rem; }
  /* the logo may shrink a little so logo, buttons and menu button always fit in one row */
  #mainNav .navbar-brand { flex: 1 1 0; min-width: 0; margin-right: .5rem; }
  #mainNav .navbar-brand img { height: auto; max-height: 52px; max-width: 100%; }
}
@media (max-width: 400px) {
  #mainNav > .container { padding-left: 12px; padding-right: 12px; }
  #mainNav .tool-caret { display: none; }
  #mainNav .lang-btn { width: 40px; height: 40px; padding: 0; justify-content: center; }
  #mainNav .navbar-toggler { padding: .3rem .5rem; }
}

/* Hover keeps the button solid, so its text never disappears over the dark hero.
   The colour is forced because the site's own navbar rules use !important. */
#mainNav .tool-btn {
  background: var(--tool-bg);
  color: var(--tool-ink) !important;
}
#mainNav .tool-btn:hover,
#mainNav .tool-btn:focus,
#mainNav .lang-btn[aria-expanded="true"] {
  background: linear-gradient(var(--tool-hover), var(--tool-hover)), var(--tool-bg);
  color: var(--tool-ink) !important;
  border-color: var(--dg-accent);
}
#mainNav .tool-btn :is(i, span) { color: inherit !important; }

/* ---------- Script fonts for Indian languages ---------- */
html[data-script] body,
html[data-script] :is(h1, h2, h3, h4, h5, h6, p, a, span, li, small, em, button, input, label, .nav-link, .dropdown-item, .btn-dg, .btn-ghost, .stat-label) {
  font-family: var(--script-font), "Segoe UI", system-ui, sans-serif;
  letter-spacing: normal;
  text-transform: none;
}
/* The mSATHI wordmark keeps its own fonts in EVERY language. The rule above
   covers <span>, which is what the wordmark is built from, so it is undone
   here for the hero wordmark and the faded watermark behind the Why section. */
html[data-script] .stemp-text,
html[data-script] .hero-title .stemp-text { font-family: "StempSchBlaIta" !important; }
html[data-script] .babylon-text,
html[data-script] .hero-title .babylon-text { font-family: 'Babylon5', sans-serif !important; }
html[data-script] :is(.hero-title, .why-big-text),
html[data-script] :is(.hero-title, .why-big-text) span {
  font-family: 'Teko', sans-serif;
  letter-spacing: -.01em;
}
html[data-script] .hero-title .stemp-text,
html[data-script] .hero-title .babylon-text { letter-spacing: normal; }
/* Indic scripts need a little more vertical room for matras and conjuncts */
html[data-script] :is(h1, h2, h3) { line-height: 1.4; }
html[data-script] p { line-height: 1.75; }

/* Urdu, Kashmiri, Sindhi: the words read right-to-left (needed for correct
   letter and punctuation order) but every block KEEPS the same alignment as
   the English page. The JS pins each element's original alignment inline. */
html[data-dir="rtl"] :is([data-i18n], [data-i18n-html]) { direction: rtl; unicode-bidi: isolate; }
/* Arabic, Urdu, Kashmiri, Sindhi all follow the same rule above. */
html[lang="ur"] [data-i18n] { line-height: 2.1; }

/* Wide letter-spacing pulls Indian-script letters apart: switch it off in those languages */
html[data-script] :is(.hero-eyebrow, .section-tag, .nav-link, .footer-heading, .hero-stat-lbl, .ticker-item) {
  letter-spacing: normal;
}
/* the hero title is the wordmark itself, so only the other headings are sized */
html[data-script] :is(.section-title, .cta-title) { line-height: 1.4; }

/* Long words (some languages) wrap instead of pushing the page wider than the screen */
:is(.section-title, .cta-title, .hero-desc, .section-sub, .cta-sub, .feat-card, .platform-card, .step-item, .why-chip, .why-highlight, .footer-tagline) {
  overflow-wrap: anywhere;
}

/* ---------- Cards of equal height in every language ----------
   Translated text is usually longer than the English, so these grow to match
   the tallest card in their row. */
.feat-card { min-height: 250px; }
.platform-card { min-height: 280px; }

/* ==========================================================
   LIGHT THEME (the original dark design stays the default)
   ========================================================== */
html[data-theme="light"] {
  --brand-dark: #fbf8f4;
  --brand-card: #ffffff;
  --brand-surface: #f4efe8;
  --brand-border: rgba(199, 90, 6, .18);
  --text-light: #1b1b1b;
  --text-muted: #6b6b6b;
  --brand-gold: #c78a06;
  --glow-orange: 0 10px 30px rgba(232, 101, 10, .18);
  --glow-gold: 0 10px 30px rgba(199, 138, 6, .18);
  --l-ink: #1b1b1b;
  --l-muted: #6b6b6b;
}
html[data-theme="light"] body { background: var(--brand-dark); color: var(--l-ink); }
html[data-theme="light"] body::before { opacity: .15; }   /* the noise layer is lighter */

/* Headings and body text that are hard-coded white or grey */
html[data-theme="light"] :is(.section-title, .feat-title, .platform-name, .step-title, .cta-title, .footer-brand-name) { color: var(--l-ink); }
html[data-theme="light"] :is(.section-sub, .feat-desc, .platform-desc, .step-desc, .cta-sub, .hero-desc, .hero-stat-lbl, .why-highlight p, .footer-tagline) { color: var(--l-muted); }
html[data-theme="light"] .why-chip { color: #333; }
html[data-theme="light"] .footer-link, html[data-theme="light"] .footer-contact-item,
html[data-theme="light"] .footer-contact-item a { color: #5d5d5d; }
html[data-theme="light"] .footer-copy { color: #8a8a8a; }

/* Navbar: it sits over the dark hero photo at the top, so its links stay
   light there and turn dark once the bar gets its own background */
/* At the top the bar is transparent over the dark hero photo, so the links
   stay LIGHT there. They turn dark only once the bar has its white background.
   (.nav-link uses var(--text-light), which is dark in this theme, so both
   states are set explicitly.) */
html[data-theme="light"] #mainNav .nav-link { color: #f2f2f2 !important; }
html[data-theme="light"] #mainNav .nav-link:hover { color: var(--brand-gold) !important; }
html[data-theme="light"] #mainNav .navbar-toggler { border-color: var(--brand-gold); }
html[data-theme="light"] #mainNav .navbar-toggler-icon { filter: invert(1); }

html[data-theme="light"] #mainNav.scrolled { background: rgba(255, 255, 255, .96); box-shadow: 0 2px 24px rgba(0, 0, 0, .12); }
html[data-theme="light"] #mainNav.scrolled .nav-link { color: #1b1b1b !important; }
html[data-theme="light"] #mainNav.scrolled .nav-link:hover { color: var(--brand-orange) !important; }
html[data-theme="light"] #mainNav.scrolled .navbar-toggler { border-color: rgba(0, 0, 0, .3); }
html[data-theme="light"] #mainNav.scrolled .navbar-toggler-icon { filter: none; }
/* The dropdown menu below the bar is white in this theme, so its links are
   dark inside it whether or not the page is scrolled */
@media (max-width: 1199.98px) {
  html[data-theme="light"] #navMenu { background: #ffffff !important; box-shadow: 0 12px 36px rgba(0, 0, 0, .14); }
  html[data-theme="light"] #mainNav #navMenu .nav-link { color: #1b1b1b !important; }
  html[data-theme="light"] #mainNav #navMenu .nav-link:hover { color: var(--brand-orange) !important; }
}

/* Panels and cards keep a visible edge on the light page */
html[data-theme="light"] :is(.feat-card, .platform-card, .why-chip, .how-img-box) {
  box-shadow: 0 6px 20px rgba(40, 20, 0, .07);
}
html[data-theme="light"] .step-item { border-bottom-color: rgba(0, 0, 0, .08); }
html[data-theme="light"] .step-num { color: rgba(199, 138, 6, .3); }
html[data-theme="light"] .why-big-text { color: rgba(0, 0, 0, .035); }

/* The hero, footer and ticker keep their dark look in both themes */
html[data-theme="light"] footer { background: #141414; }
html[data-theme="light"] footer :is(.footer-brand-name) { color: #fff; }
html[data-theme="light"] footer :is(.footer-tagline, .footer-link, .footer-contact-item, .footer-contact-item a) { color: #9a9a9a; }
html[data-theme="light"] footer .footer-copy { color: #6a6a6a; }
html[data-theme="light"] .hero-desc { color: #ccc; }      /* hero sits on the dark photo */

/* Smooth colour change only when the visitor flips the theme (not on page load) */
html.theme-anim,
html.theme-anim *,
html.theme-anim *::before,
html.theme-anim *::after {
  transition: background-color .35s ease, color .35s ease, border-color .35s ease !important;
}
@media (prefers-reduced-motion: reduce) {
  html.theme-anim *, .tool-btn, .tool-caret { transition: none !important; }
}

/* ---------- Automatic translation: hide Google's own toolbar, tooltips and highlights ---------- */
body > .skiptranslate,
iframe.skiptranslate,
.goog-te-banner-frame,
#goog-gt-tt,
.goog-te-balloon-frame,
.goog-tooltip,
#dg-gt { display: none !important; }
/* Google Translate pushes the page down by 40px for its own banner, and it
   REPLACES the <html> class attribute, so a rule relying only on our own
   class stops matching. These cover its classes as well, which is what
   kept a white strip showing above the hero in some languages. */
html.dg-auto body,
html.translated-ltr body,
html.translated-rtl body { top: 0 !important; position: static !important; }
.goog-text-highlight,
html.dg-auto font,
html.translated-ltr font,
html.translated-rtl font { background: none !important; box-shadow: none !important; }
/* Google flips the page right-to-left for Urdu/Arabic/Sindhi; keep the layout as designed */
html.translated-rtl body { direction: ltr; }

/* ---------- No English flash while a language is being applied ---------- */
html.dg-pending body { visibility: hidden; }
/* While the automatic translation fills the page in, the content is made
   invisible with opacity (not visibility), because the translator skips
   elements it considers hidden. */
html.dg-auto-wait body > *:not(#loader) { opacity: 0 !important; transition: none !important; }

/* The hidden block used for that one pass: on screen for the translator,
   invisible to the visitor, and removed as soon as it is done. */
#dg-prime {
  position: fixed;
  inset: 0;
  z-index: -1;            /* sits behind the page, so the visitor never sees it */
  overflow: hidden;
  pointer-events: none;
  font-size: 2px;         /* every line fits on one screen, so none is skipped */
  line-height: 1.05;
}

/* ---------- Menu underline: never a stray dot ----------
   Each menu item has a gold underline drawn with ::after, sized by left/right
   so it is zero-width until hovered. If the browser ever rounds that to a
   sliver, a 2px-tall gold box shows up as a small orange dot. Keeping it
   transparent unless hovered makes that impossible. The geometry is left
   alone, so the hover animation still works exactly as before. */
#mainNav .nav-link::after { background-color: transparent !important; }
#mainNav .nav-link:hover::after,
#mainNav .nav-link:focus-visible::after { background-color: var(--brand-gold) !important; }

/* The tick beside the chosen language is drawn with ::after too. It is given a
   font that definitely has the character, so it can never fall back to a box. */
.lang-opt[aria-current="true"] .native::after {
  font-family: "Segoe UI Symbol", "Noto Sans Symbols 2", "DejaVu Sans", system-ui, sans-serif;
}