/* ==========================================================
   Dayal Group - Language switcher + Light / Dark theme
   Load this file AFTER dayal-modern.css and font.css
   ========================================================== */

:root {
  --dg-brand: #16250a;
  --dg-accent: #4f8a23;
  --tool-bg: #ffffff;
  --tool-ink: #1c2a12;
  --tool-muted: #5d6a52;
  --tool-line: rgba(22, 37, 10, .16);
  --tool-hover: rgba(79, 138, 35, .10);
  --tool-active: rgba(79, 138, 35, .16);
  --panel-bg: #ffffff;
  --panel-shadow: 0 18px 48px rgba(10, 20, 5, .18);
}

html[data-theme="dark"] {
  color-scheme: dark;
  --d-bg: #0e150b;
  --d-bg-alt: #131c0f;
  --d-card: #1a2515;
  --d-text: #e4ecdb;
  --d-muted: #a8b59b;
  --d-line: rgba(228, 236, 219, .12);
  --d-hover: rgba(140, 196, 92, .12);
  --d-accent: #9ccc6b;

  --tool-bg: #1a2515;
  --tool-ink: #e4ecdb;
  --tool-muted: #a8b59b;
  --tool-line: rgba(228, 236, 219, .16);
  --tool-hover: rgba(140, 196, 92, .12);
  --tool-active: rgba(140, 196, 92, .2);
  --dg-accent: #9ccc6b;
  --panel-bg: #172113;
  --panel-shadow: 0 18px 48px rgba(0, 0, 0, .55);
}

/* ---------- 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; }
  /* Theme button sits right next to the language button (not at the far edge,
     where the side social bar could cover it on tablets) */
  .nav-tools .theme-btn { order: -1; }
  .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; }
}

/* ---------- Footer legal links (Privacy Policy + Terms & Conditions) ---------- */
/* column-gap = space between the two links; increase/decrease 2.75rem to taste */
.footer-bottom .footer-legal { display: flex; flex-wrap: wrap; align-items: center; column-gap: 2.75rem; row-gap: .5rem; }
.footer-bottom .footer-legal a { display: inline-flex; align-items: center; gap: .45rem; margin: 0; }

/* ---------- Filled Instagram + WhatsApp icons ----------
   Bootstrap Icons only has outline versions of these two, so these filled
   glyphs match the solid Facebook / YouTube / LinkedIn icons. They take the
   text colour of their button, like any icon. */
.dg-icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  flex: 0 0 auto;
  background-color: currentColor;
  -webkit-mask: var(--dg-icon) center / contain no-repeat;
          mask: var(--dg-icon) center / contain no-repeat;
}
.dg-icon-ig { --dg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.6.5h6.8a4.1 4.1 0 0 1 4.1 4.1v6.8a4.1 4.1 0 0 1-4.1 4.1H4.6a4.1 4.1 0 0 1-4.1-4.1V4.6A4.1 4.1 0 0 1 4.6.5zM8 4.3a3.7 3.7 0 1 0 0 7.4a3.7 3.7 0 1 0 0-7.4zM8 5.75a2.25 2.25 0 1 0 0 4.5a2.25 2.25 0 1 0 0-4.5zM12.1 2.95a.95.95 0 1 0 0 1.9a.95.95 0 1 0 0-1.9z'/%3E%3C/svg%3E"); }
.dg-icon-wa { --dg-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cdefs%3E%3Cmask id='m'%3E%3Crect width='16' height='16' fill='white'/%3E%3Cpath fill='black' transform='translate(4.75 4.35) scale(0.43)' d='M1.885.511a1.745 1.745 0 0 1 2.61.163L6.29 2.98c.329.423.445.974.315 1.494l-.547 2.19a.68.68 0 0 0 .178.643l2.457 2.457a.68.68 0 0 0 .644.178l2.189-.547a1.75 1.75 0 0 1 1.494.315l2.306 1.794c.829.645.905 1.87.163 2.611l-1.034 1.034c-.74.74-1.846 1.065-2.877.702a18.6 18.6 0 0 1-7.01-4.42 18.6 18.6 0 0 1-4.42-7.009c-.362-1.03-.037-2.137.703-2.877z'/%3E%3C/mask%3E%3C/defs%3E%3Cpath mask='url(%23m)' d='M1.965 11.4A7.2 7.2 0 1 1 4.6 14.04L.6 15.4z'/%3E%3C/svg%3E"); }

/* Side-bar colours for the two new buttons, in the same pastel style as the others */
.side-social .sb-ig { --c1: #f6c3da; --c2: #fbe1ed; --fg: #b8226a; }
.side-social .sb-wa { --c1: #b9ebc9; --c2: #dcf5e4; --fg: #0f7a40; }

/* ---------- Mobile navbar: keep the same width and logo position ----------
   On phones and tablets the bar no longer shrinks into a floating pill
   (when scrolling or when the menu opens), so the logo never jumps. */
@media (max-width: 991.98px) {
  .navbar,
  .navbar.scrolled {
    width: 100%;
    transform: none;
    border-radius: 0;
    border-width: 0 0 1px;
  }
  .navbar > .container-fluid,
  .navbar.scrolled > .container-fluid {
    padding: 0 var(--gut);
    transition: none;
    align-content: flex-start;
  }
  /* The top row (logo + menu button) keeps the full bar height when the menu
     opens, so the logo stays exactly where it was */
  .navbar-brand {
    display: flex;
    align-items: center;
    min-height: calc(var(--nav-h) - 2px);
  }
}

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

/* ==========================================================
   DARK THEME
   ========================================================== */
html[data-theme="dark"] {
  --text: #d4dfc8;
  --muted: #a9b79c;
  --paper: #131c0f;
  --line: rgba(220, 236, 223, .1);
  --shadow: 0 18px 44px rgba(0, 0, 0, .5);
  --shadow-s: 0 4px 16px rgba(0, 0, 0, .35);
  --d-bg: #0c1209;
  --d-card: #192414;
  --d-head: #f0f6e8;
}
html[data-theme="dark"] body { background-color: var(--d-bg); color: var(--text); }
html[data-theme="dark"] :is(h1, h2, h3, h4, h5) { color: var(--d-head); }
html[data-theme="dark"] .text-dark { color: var(--d-head) !important; }
html[data-theme="dark"] ::selection { background: var(--lime); color: var(--ink); }

/* Navbar (also fixes the white border while scrolling) */
html[data-theme="dark"] .navbar {
  background: rgba(12, 18, 9, .9);
  border-color: transparent;
  border-bottom-color: var(--line);
}
html[data-theme="dark"] .navbar.scrolled {
  background: rgba(16, 24, 12, .9);
  border-color: rgba(220, 236, 223, .08);
  box-shadow: 0 12px 40px rgba(0, 0, 0, .55);
}
html[data-theme="dark"] .navbar-nav .nav-link { color: rgba(228, 236, 219, .78); }
html[data-theme="dark"] .navbar-nav .nav-link:hover,
html[data-theme="dark"] .navbar-nav .nav-item.show > .nav-link { color: #fff; background: rgba(255, 255, 255, .06); }
html[data-theme="dark"] .navbar-nav .nav-link.active { color: #fff; }
html[data-theme="dark"] .navbar-toggler { background: rgba(255, 255, 255, .08); }
html[data-theme="dark"] .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(1.8); }
html[data-theme="dark"] .nav-cta { background: var(--lime); color: var(--ink); }
html[data-theme="dark"] .nav-cta:hover,
html[data-theme="dark"] .nav-cta.active { background: var(--lime-2); color: var(--ink); }
html[data-theme="dark"] .navbar .dropdown-menu { background: var(--d-card); border-color: var(--line); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
html[data-theme="dark"] .dropdown-item { color: var(--text); }
html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus { background: rgba(149, 219, 35, .18); color: #fff; }
@media (max-width: 991.98px) {
  html[data-theme="dark"] .navbar .dropdown-menu { background: rgba(149, 219, 35, .07); box-shadow: none; }
}

/* Cards and panels that are white in the light theme */
html[data-theme="dark"] :is(.card-soft, .info-card, .mv-vision, .milestone-card, .value-img, .team-card, .prod-card,
  .rd-tile, .t-card, .form-card, .office-card, .pillar-link, .bod-card, .filter-btn) {
  background: var(--d-card);
  border-color: var(--line);
}
/* Dark panels: a hairline so they stand out from the dark page */
html[data-theme="dark"] :is(.callout, .mv-mission, .stat-panel, .values-intro, .contact-panel, .stats-card) {
  box-shadow: 0 0 0 1px rgba(220, 236, 223, .08), var(--shadow);
}

/* Text that uses the dark "ink" colour in the light theme */
html[data-theme="dark"] :is(.fact, .group-list li, .chip, .pillar-link, .sarv-tagline, .filter-btn, .office-list a,
  .prod-card li, .toc a:hover) { color: var(--d-head); }
html[data-theme="dark"] .policy-contact { color: var(--d-head) !important; }
html[data-theme="dark"] .pillar-link:hover { color: var(--d-head); }

/* Green accents: brighter so they read on dark backgrounds */
html[data-theme="dark"] :is(.icon-chip, .group-list i, .chip i, .office-list i, .text-link, .policy a, .bio-toggle,
  .prod-card h3 a:hover, .value-icon) { color: var(--lime); }
html[data-theme="dark"] .toc a::before { color: var(--lime); }
html[data-theme="dark"] :is(.prod-tag, .bod-role) { color: var(--lime-2); background: rgba(149, 219, 35, .14); }
html[data-theme="dark"] .fact .icon-chip { background: rgba(149, 219, 35, .14); }
html[data-theme="dark"] .value-icon { background: var(--d-card); box-shadow: none; }
html[data-theme="dark"] .text-link:hover,
html[data-theme="dark"] .bio-toggle:hover { color: #fff; }

/* Elements that sit on lime keep dark text */
html[data-theme="dark"] .filter-btn.active { background: var(--lime); color: var(--ink); border-color: var(--lime); }
html[data-theme="dark"] :is(.pillar-link:hover .icon-chip, .pillar-head .icon-chip, .callout .icon-chip) { color: var(--ink); }
html[data-theme="dark"] .value-card:hover :is(h3, p) { color: var(--ink); }
html[data-theme="dark"] .value-card:hover .value-icon { background: var(--ink); color: var(--lime); }
html[data-theme="dark"] .toc a.active { color: var(--ink); }

/* Contact form */
html[data-theme="dark"] .form-lock-overlay { background: rgba(12, 18, 9, .94); }
html[data-theme="dark"] .form-frame-wrap,
html[data-theme="dark"] .map-embed { border-color: var(--line); }

/* Carousels, back-to-top, misc */
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot span { background: rgba(255, 255, 255, .2); }
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot.active span,
html[data-theme="dark"] .owl-theme .owl-dots .owl-dot:hover span { background: var(--lime); }
html[data-theme="dark"] .to-top { color: var(--d-head); background: conic-gradient(var(--lime) calc(var(--p) * 1%), rgba(255, 255, 255, .15) 0); }
html[data-theme="dark"] .to-top::before { background: var(--d-card); }
html[data-theme="dark"] .to-top:hover { color: var(--ink); }
html[data-theme="dark"] .to-top:hover::before { background: var(--lime); }
html[data-theme="dark"] .feature-media img,
html[data-theme="dark"] .gallery .g img { filter: brightness(.94); }

/* 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; }
html.dg-auto body { top: 0 !important; position: static !important; }
.goog-text-highlight,
html.dg-auto 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; }
html.dg-auto-wait main { visibility: hidden; }