/* ============================================================
   Auto-contrast navigation
   The script only sets   <html data-nav-theme="dark">.
   Everything below is plain CSS, so you can retune colours
   here without touching the JS.
   ============================================================ */

.navbar.w-nav,
.navbar.w-nav .brand-2 svg path,
.navbar.w-nav .nav-link-3,
.navbar.w-nav .toggle-2,
.navbar.w-nav .button-v2,
.navbar.w-nav .language-selector__button,
.navbar.w-nav .language-selector__icon {
  transition: background-color .28s ease, border-color .28s ease,
              color .28s ease, fill .28s ease;
}

/* ---------- dark scene: white logo, white links ---------- */
html[data-nav-theme="dark"] .navbar.w-nav {
  background-color: #101010;
  border-bottom-color: rgba(255, 255, 255, .12);
}
html[data-nav-theme="dark"] .navbar.w-nav .brand-2 svg path {
  fill: #ffffff;
}
html[data-nav-theme="dark"] .navbar.w-nav .nav-link-3,
html[data-nav-theme="dark"] .navbar.w-nav .toggle-2 {
  color: rgba(255, 255, 255, .82);
}
html[data-nav-theme="dark"] .navbar.w-nav .nav-link-3:hover,
html[data-nav-theme="dark"] .navbar.w-nav .toggle-2:hover,
html[data-nav-theme="dark"] .navbar.w-nav .toggle-2.w--open {
  color: #ffffff;
}
/* outline button (Get Demo) */
html[data-nav-theme="dark"] .navbar.w-nav .button-v2 {
  background-color: transparent;
  border-color: rgba(255, 255, 255, .28);
  color: #ffffff;
}
/* ghost button (Login) */
html[data-nav-theme="dark"] .navbar.w-nav .button-v2.noborder {
  background-color: transparent;
  border-color: transparent;
  color: #ffffff;
}
/* solid button (Start for Free) flips the other way */
html[data-nav-theme="dark"] .navbar.w-nav .button-v2.invert {
  background-color: #ffffff;
  border-color: #ffffff;
  color: #101010;
}
/* language switcher */
html[data-nav-theme="dark"] .navbar.w-nav .language-selector__button {
  background-color: rgba(255, 255, 255, .10);
  border-color: rgba(255, 255, 255, .22);
  color: #ffffff;
}
html[data-nav-theme="dark"] .navbar.w-nav .language-selector__icon {
  fill: #ffffff;
}
/* hamburger */
html[data-nav-theme="dark"] .navbar.w-nav .w-nav-button {
  color: #ffffff;
}

/* Dropdown panels and the mobile menu keep their own light skin -
   they are cards on top of the page, not part of the bar. */
html[data-nav-theme="dark"] .navbar.w-nav .w-dropdown-list .nav-link-3,
html[data-nav-theme="dark"] .navbar.w-nav .w-dropdown-list .inner-links,
html[data-nav-theme="dark"] .navbar.w-nav .w-dropdown-list a {
  color: inherit;
}
html[data-nav-theme="dark"] .navbar.w-nav .w-dropdown-list svg path {
  fill: inherit;
}