/* ==========================================================
   digitalSATHI - Language switcher + Light / Dark theme
   Same controls as the Dayal Group, salesSATHI and farmSATHI sites.
   Load this file AFTER the page's own <style> block.
   ========================================================== */

/* ---------- Colours of the language / theme controls ---------- */
html[data-theme="light"] {
  color-scheme: light;
  --dg-accent: #0057ff;
  --tool-bg: #ffffff;
  --tool-ink: #0a0e1a;
  --tool-muted: #8898b0;
  --tool-line: rgba(0, 87, 255, .22);
  --tool-hover: rgba(0, 87, 255, .08);
  --tool-active: rgba(0, 87, 255, .16);
  --panel-bg: #ffffff;
  --panel-shadow: 0 18px 48px rgba(10, 20, 40, .2);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --dg-accent: #00d4aa;
  --tool-bg: #101733;
  --tool-ink: #e9edf7;
  --tool-muted: #93a0c0;
  --tool-line: rgba(0, 212, 170, .3);
  --tool-hover: rgba(0, 212, 170, .14);
  --tool-active: rgba(0, 212, 170, .24);
  --panel-bg: #0d1533;
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, .6);
}

/* ---------- Placement in the Bootstrap navbar ----------
   Up to 1199px: logo | language + theme | menu button, menu opens below.
   From 1200px:  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: 'DM Sans', sans-serif; }
#mainNav .nav-link { white-space: nowrap; }
@media (min-width: 1200px) {
  #mainNav .navbar-collapse { order: 1; }
  #mainNav .nav-tools { margin: 0 0 0 1rem; }
}

/* The panel lines up with the right edge of the whole toolbar (theme button
   included), so it sits flush on the right as on the other sites */
#mainNav .lang-wrap { position: static; }
#mainNav .lang-panel { right: 0; }

/* Indian-script and CJK labels are wider than the English ones, so in those
   languages the links are tightened and, between 1200px and 1399px, the menu
   button is kept instead of squeezing them. */
html[data-script] #mainNav .nav-link {
  padding: 6px 9px !important;
  letter-spacing: normal;
  font-size: .85rem;
}
@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%; }
  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: rgba(10, 14, 26, 0.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 40px rgba(0, 87, 255, 0.15);
    padding: 10px 0;
    border-radius: 12px;
    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; }
}

/* The site's own mobile menu styling now applies until the links appear at 1200px */
@media (max-width: 1199.98px) {
  #mainNav .navbar-collapse {
    background: rgba(10, 14, 26, 0.96);
    backdrop-filter: blur(16px);
    box-shadow: 0 4px 40px rgba(0, 87, 255, 0.15);
    padding: 10px 0;
    border-radius: 12px;
    margin-top: 10px;
  }
}

/* ---------- 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;
}
/* 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-badge, .section-tag, .nav-link, .footer-heading, .hero-pill, .usecase-tag) {
  letter-spacing: normal;
}
html[data-script] .hero-title { line-height: 1.35; font-size: clamp(1.9rem, 6.5vw, 3rem); }

/* Long words (some languages) wrap instead of pushing the page wider than the screen */
:is(.hero-title, .section-title, .hero-sub, .section-sub, .feature-card, .usecase-card, .step-card, .benefit-row, .about-visual, .benefits-visual) {
  overflow-wrap: anywhere;
}

/* ==========================================================
   DARK THEME (the original light design stays the default)
   ========================================================== */
html[data-theme="dark"] {
  --ink: #e9edf7;
  --text-muted: #93a0c0;
  --mist: #101733;
  --white: #0a0e1a;
  --d-card: #101733;
  --d-alt: #0d1533;
}
html[data-theme="dark"] body { background: var(--white); color: var(--ink); }
html[data-theme="dark"] :is(#features, #benefits) { background: var(--white); }
html[data-theme="dark"] :is(#about, #usecases, #testimonials) { background: var(--d-alt); }
html[data-theme="dark"] #hero::before { background: linear-gradient(120deg, rgba(4,6,12,.9), rgba(10,16,38,.85)); }

/* Cards */
html[data-theme="dark"] :is(.feature-card, .usecase-card, .testi-card) {
  background: var(--d-card);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 6px 24px rgba(0, 0, 0, .35);
}
html[data-theme="dark"] .feature-card:hover { box-shadow: 0 24px 60px rgba(0, 212, 170, .12); }
html[data-theme="dark"] :is(.about-icon-item) { background: rgba(255, 255, 255, .05); }

/* Accent text on dark */
html[data-theme="dark"] .section-tag { background: rgba(0, 212, 170, .14); color: var(--accent); }
html[data-theme="dark"] .section-title span.highlight,
html[data-theme="dark"] h2 span { color: var(--accent); }
html[data-theme="dark"] :is(.footer-link:hover, .nav-link:hover) { color: var(--accent); }

/* Light boxes inside #about that used var(--mist) directly */
html[data-theme="dark"] #about [style*="background:var(--mist)"] { background: rgba(255,255,255,0.05) !important; border-color: rgba(255,255,255,0.1) !important; }

/* Loader */
html[data-theme="dark"] #loader { background: var(--white); }

/* 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;
}