/* =========================================
   Dark mode: follows the visitor's system setting (Settings, Display).
   Loaded after site.css on every page. The light colors in style.css stay as
   they are; everything here applies only when the device is in dark mode.
   Logos switch through <picture> sources in the HTML, so every browser gets them.
   ========================================= */

/* A <picture> around a logo shouldn't change the layout around it, and its <source>
   mustn't take a flex gap. */
.navbar-brand picture, .ns-app-logo picture, .ns-app-heading picture, .ns-app-name-logo picture { display: contents; }
picture > source { display: none; }

@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    --dm-page:    #0b1120;  /* page background */
    --dm-section: #0f172a;  /* hero and gray sections */
    --dm-surface: #131c2e;  /* cards and tiles */
    --dm-border:  #1f2a3d;
    --dm-heading: #f1f5f9;
    --dm-text:    #a3b1c6;
    --dm-muted:   #8a98ad;
    --dm-link:    #6ea2ff;
    --dm-footer:  #060a14;
  }

  body { background: var(--dm-page); color: var(--dm-text); }
  h1, h2, h3, h4, h5, h6 { color: var(--dm-heading); }
  p { color: var(--dm-text); }
  a { color: var(--dm-link); }
  a:hover { color: #93bbff; }

  /* Navigation */
  .main-nav { background: rgba(11,17,32,.92); border-bottom-color: var(--dm-border); }
  .main-nav .navbar-nav .nav-link,
  .navbar-toggler, .navbar-toggler span.ti-menu { color: var(--dm-heading); }
  .main-nav .navbar-nav .nav-link:hover,
  .main-nav .navbar-nav .active > .nav-link { color: var(--dm-link); }
  .main-nav .navbar-collapse { background: var(--dm-page); border-top-color: var(--dm-border); }
  .main-nav .dropdown-menu { background: var(--dm-surface); border-color: var(--dm-border); }
  .main-nav .dropdown-item { color: var(--dm-text); }
  .main-nav .dropdown-item:hover { background: #1a2742; color: var(--dm-heading); }

  /* Sections */
  .ns-hero, .ns-page-head, .ns-section-gray { background: var(--dm-section); border-color: var(--dm-border); }
  .ns-proof { border-bottom-color: var(--dm-border); }
  .ns-proof li { color: var(--dm-text); }
  .ns-proof strong { color: var(--dm-heading); }

  /* Buttons: the dark button turns light */
  .ns-btn { background: var(--dm-heading); border-color: var(--dm-heading); color: var(--dm-page); }
  .ns-btn:hover { background: #ffffff; border-color: #ffffff; color: var(--dm-page); }
  .ns-btn-outline { background: transparent; color: var(--dm-heading); border-color: #3b4a63; }
  .ns-btn-outline:hover { background: var(--dm-surface); color: var(--dm-heading); border-color: var(--dm-heading); }

  /* Cards, tiles and panels */
  .ns-product, .ns-tile, .ns-quote, .ns-card, .ns-video,
  .service-block, .feature-card, .faq .block, .privacy .block, .contact-form .block {
    background: var(--dm-surface); border-color: var(--dm-border);
  }
  .ns-product-shot { background: var(--dm-section); }
  .ns-product-sub, .ns-facts dt, .ns-logos-label, .ns-info h3, .ns-support p { color: var(--dm-muted); }
  .ns-hero-app { color: var(--dm-text); }
  .ns-video { color: var(--dm-heading); }
  .ns-hero-app-name, .ns-quote figcaption, .ns-facts dd, .ns-faq summary, .ns-support h3, .ns-info p { color: var(--dm-heading); }
  .ns-checks li, .ns-quote blockquote, .ns-support-lead { color: var(--dm-text); }
  .ns-checks i { color: #4ade80; }
  .ns-tile i, .ns-info i, .badge-pill, .contact-info-item .icon-wrap { background: #16233d; color: var(--dm-link); }
  .ns-eyebrow { color: var(--dm-link); }
  .ns-facts { background: var(--dm-border); border-color: var(--dm-border); }
  .ns-facts > div { background: var(--dm-surface); }
  .ns-faq details, .ns-support li, .ns-prose section + section { border-color: var(--dm-border); }
  .ns-aside { background: var(--dm-surface); border-color: var(--dm-border); }
  .ns-aside li a { color: var(--dm-text); }
  .ns-feature-img img { border-color: var(--dm-border); }
  .ns-hero-app img, .ns-hero-shot img { filter: drop-shadow(0 24px 40px rgba(0,0,0,.55)); }

  /* Closing call to action and footer sit a step darker than the page */
  .ns-cta { background: var(--dm-surface); border: 1px solid var(--dm-border); }
  .ns-cta p { color: var(--dm-text); }
  footer, footer .footer-main { background: var(--dm-footer); }

  /* App logos switch to their white versions in the HTML; the brand text beside them lightens */
  .ns-app-logo, .ns-app-heading span, .ns-app-name-logo span { color: #9fd47a; }
  .ns-app-name-logo.ivc span { color: #8fb4ff; }

  /* Forms */
  .contact-form .form-control { background: var(--dm-page); border-color: var(--dm-border); color: var(--dm-heading); }
}