/**
 * Shared Network dark theme + toggle/locale chrome (ported from networkbank.com).
 * Bank-only hero assets (skyrays/coral masks) omitted — solid dark lander instead.
 */

/* —— Early-paint toggle bounds —— */
.theme-toggle {
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  padding: 0;
  margin: 0;
  overflow: hidden;
  flex-shrink: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.theme-toggle__icon {
  box-sizing: border-box;
  display: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  overflow: hidden;
  flex-shrink: 0;
}

.theme-toggle__icon.material-icons {
  align-items: center;
  justify-content: center;
  font-family: Material Icons, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
  white-space: nowrap;
}

/*
 * Google Material Icons CSS sets `.material-icons { display: inline-block }`
 * and often loads after this file — beat it with html + class specificity.
 * Light → moon only (click to go dark). Dark → sun only (click to go light).
 */
html:not([data-theme="dark"]) .theme-toggle__icon--moon.material-icons,
html[data-theme="dark"] .theme-toggle__icon--sun.material-icons {
  display: inline-flex !important;
}

html:not([data-theme="dark"]) .theme-toggle__icon--sun.material-icons,
html[data-theme="dark"] .theme-toggle__icon--moon.material-icons {
  display: none !important;
}

.nav-link-block[data-locale-switch] {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  min-width: 40px;
  min-height: 40px;
  max-width: 40px;
  max-height: 40px;
  padding: 0;
  margin-left: 10px;
  border-radius: 999px;
  overflow: hidden;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.nav-link-block[data-locale-switch]:hover {
  color: inherit;
  background-color: rgba(0, 0, 0, 0.06);
}

.theme-toggle--menu {
  margin-left: 4px;
}

/*
 * Navbar: keep brand + theme toggle on one vertical centerline.
 * Webflow uses float brand + block container + brand margin-top: 5px, which
 * drops the toggle relative to the logo/name (esp. clearing/pay sparse menus).
 */
.navbar .navbar-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.navbar .brand.w-nav-brand,
.navbar .brand {
  float: none;
  margin-top: 0;
  margin-bottom: 0;
}

.navbar .nav-menu {
  display: flex;
  align-items: center;
  margin-left: auto;
}

.navbar .big-screen-menu {
  align-items: center;
}

.navbar .theme-toggle {
  align-self: center;
}

/* Desktop: in big-screen-menu; mobile: next to hamburger.
   Beat `.theme-toggle { display: inline-flex }` (same specificity otherwise). */
.theme-toggle.theme-toggle--mobile {
  display: none !important;
}

@media screen and (max-width: 767px) {
  .theme-toggle.theme-toggle--menu {
    display: none !important;
  }

  .theme-toggle.theme-toggle--mobile {
    display: inline-flex !important;
  }

  .nav-menu {
    align-items: center;
  }
}

.menu-item.material-icons {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  max-width: 20px;
  max-height: 20px;
  overflow: hidden;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: Material Icons, sans-serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: normal;
}

/* —— Dark palette —— */
html[data-theme="dark"] {
  color-scheme: dark;
  --nb-bg: #0b0d14;
  --nb-bg-elevated: #141824;
  --nb-bg-panel: #1a1f2e;
  /* Body/heading text ~25% toned down vs pure near-white */
  --nb-fg: #c2c5ce;
  --nb-fg-muted: #8b929e;
  --nb-border: rgba(255, 255, 255, 0.08);
  --nb-border-strong: rgba(255, 255, 255, 0.14);
  --nb-border-focus: rgba(74, 120, 224, 0.45);
  /* Blue text accent ~25% toned (less luminous than #1d5dff) */
  --nb-accent: #4a78e0;
  /* Iconography: rgb(74, 120, 224) — same as --nb-accent */
  --nb-icon: #4a78e0;
  /* Filled primary blue = #1d5dff @ 30% on black (Prospera dark chrome start) */
  --nb-blue: #091c4d;
  --nb-blue-hover: #0d2a73;
  /* Panel CTAs (forms on elevated cards): mid blue — ~12–15% brighter vs prior for punch on dark */
  --nb-btn: #4f79d2;
  --nb-btn-hover: #5e8ae8;
  /* Recolor black SVG marks → --nb-icon */
  --nb-icon-filter: brightness(0) saturate(100%) invert(31%) sepia(92.1%)
    saturate(490.6%) hue-rotate(183.6deg) brightness(122.5%) contrast(84.9%);
}

html[data-theme="dark"] body {
  background-color: var(--nb-bg);
  color: var(--nb-fg);
}

/* Prospera / subpage scroll chrome: brand blue 30% on black → black */
html[data-theme="dark"].section-animation-active,
html[data-theme="dark"].section-animation-active body {
  /* Fallback before JS paints --section-bg; keep --nb-blue fills unchanged */
  background-color: var(--section-bg, #061337);
}

/* Home: white section underlays → dark */
html[data-theme="dark"] .white-background {
  background-color: var(--nb-bg);
}

html[data-theme="dark"] .currency-in-cluster.model-to-hide {
  background-color: #000;
}

/* Currency chips: 10% shrink on hover (light + dark) */
.currency-in-cluster.model-to-hide {
  transition: transform 0.18s ease;
  transform-origin: center center;
  position: relative;
  z-index: 2;
}

.currency-in-cluster.model-to-hide:hover {
  transform: scale(0.9);
}

.currencies-cluster {
  position: relative;
  z-index: 2;
}

/*
 * Decorative clouds are large square/rect hit-boxes (PNG/AVIF boxes, not silhouettes).
 * Never intercept pointer events so currency hover stays reliable.
 */
.lander-globe-cloud,
.lander-globe-cloud-2,
.bank-routes-cloud,
.clouds.boxes,
.innovation-cloud,
.privacy-cloud,
.coral-reef {
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .currency-in-cluster.model-to-hide {
    transition: none;
  }

  .currency-in-cluster.model-to-hide:hover {
    transform: none;
  }
}

html[data-theme="dark"] .footer-dark-bg.dark-mode.footer-bg,
html[data-theme="dark"] .bank-footer.start-dark {
  background-color: #000;
}

/* Footer copy ~25% softer (match --nb-fg / muted tokens) */
html[data-theme="dark"] .bank-footer .moon-footer-link,
html[data-theme="dark"] .bank-footer .bank-name.footer,
html[data-theme="dark"] .bank-footer .call-to-action-text.no-button.footer-cta {
  color: var(--nb-fg);
}

html[data-theme="dark"] .bank-footer .moon-footer-fineprint,
html[data-theme="dark"] .bank-footer .footer-copyright-2 {
  color: rgba(194, 197, 206, 0.55);
}

html[data-theme="dark"] .bank-footer .footer-mission {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .bank-footer .bolded-text.gray-or-violet {
  color: var(--nb-accent);
}

html[data-theme="dark"] .bank-footer a.footer-title-link:hover,
html[data-theme="dark"] .bank-footer a.footer-title-link:focus-visible {
  color: var(--nb-accent);
}

html[data-theme="dark"] .mid-section-bg-light.light-mode {
  display: none;
}

html[data-theme="dark"] .mid-section-bg-dark.dark-mode {
  display: block;
  opacity: 1;
  /* Flat net blue — drop Webflow black→navy gradient */
  background-color: var(--nb-blue);
  background-image: none;
}

html[data-theme="dark"] .secured-card-content-section.main-content-section-box.gray-bg .mid-section-bg-dark.dark-mode {
  /* --nb-blue (#091c4d) at 50% over page ground */
  background-color: rgba(9, 28, 77, 0.5);
}

/* Home hero: solid dark lander (no bank skyrays). Must clear Webflow cloud JPEG. */
html[data-theme="dark"] .landing-content-section,
html[data-theme="dark"] .top-container {
  background-color: #010106;
  background-image: none;
}

/* Soft shadow under nav type over bright rays — no full-hero content scrim */
html[data-theme="dark"] .navbar .menu-item,
html[data-theme="dark"] .navbar .nav-link-block:not(.action-item-link),
html[data-theme="dark"] .navbar .bank-name,
html[data-theme="dark"] .navbar .theme-toggle {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85), 0 0 14px rgba(0, 0, 0, 0.55);
}

html[data-theme="dark"] .landing-content-section > * {
  position: relative;
  z-index: 1;
}
html[data-theme="dark"] .behind-lander-globe-container {
  z-index: 0;
}

html[data-theme="dark"] .lander-globe-iconography {
  z-index: 2;
}

/* Circle: clip to disc (stays under cash/chart/coral/icon) */

/* Cash / chart / coral / icon: alpha-mask to asset silhouette */

html[data-theme="dark"] .top-lander-card {
  border-bottom-color: rgba(255, 255, 255, 0.25);
}

/* Headings & body copy */
html[data-theme="dark"] .heading-1.landing-section-header,
html[data-theme="dark"] .heading-1.landing-section-header .bold-text-4,
html[data-theme="dark"] .heading-2,
html[data-theme="dark"] .heading-2.center,
html[data-theme="dark"] .bank-name,
html[data-theme="dark"] .overview-paragraph,
html[data-theme="dark"] .ready-to-try-cta,
html[data-theme="dark"] .checkbox-list-item,
html[data-theme="dark"] .in-text-link,
html[data-theme="dark"] .faq-link-text {
  color: var(--nb-fg);
}

html[data-theme="dark"] .tagline-subtitle.gray-or-violet,
html[data-theme="dark"] .section-subtitle.gray-or-violet,
html[data-theme="dark"] .section-subtitle.content-box-subtitle.gray-or-violet {
  color: var(--nb-accent);
}

html[data-theme="dark"] .nav-link-block {
  color: var(--nb-fg);
}

html[data-theme="dark"] .nav-link-block:hover {
  color: var(--nb-accent);
}

html[data-theme="dark"] .navbar .nav-open-close svg rect {
  fill: var(--nb-fg);
}

html[data-theme="dark"] .theme-toggle:hover,
html[data-theme="dark"] .nav-link-block[data-locale-switch]:hover {
  color: var(--nb-fg);
  background-color: rgba(255, 255, 255, 0.08);
}

html[data-theme="dark"] .theme-toggle {
  color: var(--nb-fg);
}

/* Header logo mark (static fallback + balloon canvas) */
html[data-theme="dark"] .navbar .bank-logo[data-balloon-logo="header"] {
  filter: brightness(0) invert(1);
}

/* Cards / panels — no border/outline */
html[data-theme="dark"] .services-box {
  background-color: var(--nb-bg-panel);
  color: var(--nb-fg);
  box-shadow: none;
  border: 0;
}

html[data-theme="dark"] .services-box.phantom {
  background-color: transparent;
  box-shadow: none;
}

html[data-theme="dark"] .main-content-background {
  background-color: var(--nb-bg-elevated);
  color: var(--nb-fg);
  box-shadow: none;
  border: 0;
}

html[data-theme="dark"] .main-content-rich-text,
html[data-theme="dark"] .main-content-rich-text p,
html[data-theme="dark"] .main-content-rich-text li {
  color: var(--nb-fg);
}

/* Quotes keep hardcoded light-theme grays in rich-article.css — override for dark */
html[data-theme="dark"] .main-content-rich-text blockquote,
html[data-theme="dark"] .hero-article.w-richtext blockquote,
html[data-theme="dark"] .w-richtext blockquote {
  border-left-color: var(--nb-accent);
  color: var(--nb-fg);
}

html[data-theme="dark"] .main-content-rich-text blockquote cite,
html[data-theme="dark"] .hero-article.w-richtext blockquote cite,
html[data-theme="dark"] .w-richtext blockquote cite {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .main-content-rich-text:not(.legal-text-sm) h3,
html[data-theme="dark"] .main-content-rich-text:not(.legal-text-sm) h4 {
  color: var(--nb-accent);
}

/* Legal in-box headings stay document-gray → soft body fg (not accent blue) */
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h1,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h2,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h3,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h4,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h5,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm h6,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-part,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-section,
html[data-theme="dark"] .main-content-rich-text.legal-text-sm .legal-heading-sub {
  color: var(--nb-fg);
}

/* Prospera / article media + news */
html[data-theme="dark"] .rich-media-card {
  background: var(--nb-bg-panel);
  border: 0;
  box-shadow: none;
  color: var(--nb-fg);
}

html[data-theme="dark"] .rich-media-card__title {
  color: var(--nb-fg);
}

html[data-theme="dark"] .rich-media-card__byline {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .rich-media-card__eyebrow {
  color: var(--nb-accent);
}

html[data-theme="dark"] .news-section-header,
html[data-theme="dark"] .news-tile__title {
  color: var(--nb-accent);
}

html[data-theme="dark"] .news-tile__body {
  background-color: var(--nb-bg-panel);
  border: 0;
  box-shadow: none;
}

html[data-theme="dark"] .news-tile__excerpt {
  color: var(--nb-fg-muted);
}

/* Checkbox: soft circle ≈ --nb-fg (#c2c5ce); check stays dark */
html[data-theme="dark"] .checkbox-list-item::before {
  filter: invert(0.78);
}

/* Iconography SVGs → --nb-icon (#174acc); skip live balloon canvases */
html[data-theme="dark"] .services-box-iconography.business-iconography,
html[data-theme="dark"] .services-box-iconography.security-iconography,
html[data-theme="dark"] .card-iconography:not(.is-balloon-ready),
html[data-theme="dark"] .prospera-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .pa-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .epspe-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .global-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .feature-iconography.specialty-iconograph:not(.is-balloon-ready),
html[data-theme="dark"] .lander-globe-chart {
  filter: var(--nb-icon-filter);
}

/* Card chip → ~#999 fill, keep dark circuit strokes */
html[data-theme="dark"] .chip-on-card img {
  filter: grayscale(1) brightness(0.79);
}

/* Routes: solid white (child of .lander-globe — must not inherit globe opacity) */
html[data-theme="dark"] .bank-globle-routes {
  position: relative;
  z-index: 1;
  filter: brightness(0) invert(1);
  opacity: 1;
}

html[data-theme="dark"] .main-iconography,
html[data-theme="dark"] .iconography-copilot-image,
html[data-theme="dark"] .iconography-payments-image,
html[data-theme="dark"] .iconography-specialty-image,
html[data-theme="dark"] .iconography-business-image,
html[data-theme="dark"] .iconography-security-image,
html[data-theme="dark"] .services-box-iconography img,
html[data-theme="dark"] .lander-globe-iconography img,
html[data-theme="dark"] [data-balloon-icon]:not(.is-balloon-ready) > img {
  filter: var(--nb-icon-filter);
}

/* Lander globe mark → white at 30% via ::before so routes stay full white */
html[data-theme="dark"] .lander-globe {
  background-image: none;
  filter: none;
  opacity: 1;
}

html[data-theme="dark"] .lander-globe::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/Group-48097715.svg");
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: contain;
  filter: brightness(0) invert(1);
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}
html[data-theme="dark"] .bank-routes-cloud,
html[data-theme="dark"] .clouds.boxes,
html[data-theme="dark"] .innovation-cloud,
html[data-theme="dark"] .privacy-cloud {
  opacity: 0.8;
}

/* Hero: hide cloud overlays; coral reef sits over cash/chart, under iconography */
html[data-theme="dark"] .lander-globe-cloud,
html[data-theme="dark"] .lander-globe-cloud-2 {
  display: none;
}

html[data-theme="dark"] .lander-globe-iconography {
  z-index: 2;
}

/* Ready to join / as-seen-in */
html[data-theme="dark"] .ready-to-join {
  color: var(--nb-fg);
}

html[data-theme="dark"] .ready-to-join .heading-2,
html[data-theme="dark"] .ready-to-join .heading-2 strong {
  color: var(--nb-fg);
}

html[data-theme="dark"] .ready-to-join .light-img {
  display: none !important;
}

html[data-theme="dark"] .ready-to-join .dark-img {
  display: inline-block !important;
}

/* Whisper / inline links on dark panels */
html[data-theme="dark"] .main-content-rich-text a.whisper-link:hover,
html[data-theme="dark"] .main-content-rich-text a.whisper-link:focus-visible {
  color: var(--nb-accent);
  border-bottom-color: rgba(29, 93, 255, 0.45);
}

/* Forms / inputs — softer borders than Webflow #ccc */
html[data-theme="dark"] .w-input,
html[data-theme="dark"] .w-select,
html[data-theme="dark"] .text-field,
html[data-theme="dark"] .footer-form-field,
html[data-theme="dark"] textarea {
  color: var(--nb-fg);
  background-color: rgba(255, 255, 255, 0.03);
  border: 1px solid var(--nb-border);
  box-shadow: none;
}

html[data-theme="dark"] .w-input::placeholder,
html[data-theme="dark"] .text-field::placeholder,
html[data-theme="dark"] .footer-form-field::placeholder,
html[data-theme="dark"] textarea::placeholder {
  color: var(--nb-fg-muted);
}

html[data-theme="dark"] .w-input:hover,
html[data-theme="dark"] .w-select:hover,
html[data-theme="dark"] .text-field:hover,
html[data-theme="dark"] .footer-form-field:hover {
  border-color: var(--nb-border-strong);
  box-shadow: none;
}

html[data-theme="dark"] .w-input:focus,
html[data-theme="dark"] .w-select:focus,
html[data-theme="dark"] .text-field:focus,
html[data-theme="dark"] .footer-form-field:focus,
html[data-theme="dark"] textarea:focus {
  border-color: var(--nb-border-focus);
  box-shadow: 0 0 0 3px rgba(74, 120, 224, 0.18);
  outline: none;
}

/* Form / panel buttons — mid blue reads on elevated cards without neon #007bff */
html[data-theme="dark"] .submit-btn,
html[data-theme="dark"] .main-content-background .w-button:not(.footer-form-submit),
html[data-theme="dark"] .form-block .w-button,
html[data-theme="dark"] .w-form .w-button:not(.footer-form-submit) {
  color: #fff;
  background-color: var(--nb-btn);
  border: 1px solid var(--nb-btn);
}

html[data-theme="dark"] .submit-btn:hover,
html[data-theme="dark"] .main-content-background .w-button:not(.footer-form-submit):hover,
html[data-theme="dark"] .form-block .w-button:hover,
html[data-theme="dark"] .w-form .w-button:not(.footer-form-submit):hover {
  background-color: var(--nb-btn-hover);
  border-color: var(--nb-btn-hover);
}

/* Sign-up CTA stays high-contrast */
html[data-theme="dark"] .nav-link-block.action-item-link.black {
  color: #0c0c0c;
  background-color: #ffffff;
}

html[data-theme="dark"] .nav-link-block.action-item-link.black:hover {
  color: #ffffff;
  background-color: var(--nb-blue-hover);
}

/* Primary filled blues → net blue (Prospera dark chrome) */
html[data-theme="dark"] .behind-lander-globe-container,
html[data-theme="dark"] .behind-lander-globe-container-copy,
html[data-theme="dark"] .behind-lander-globe-container-for-card,
html[data-theme="dark"] .banking-prospera-globe,
html[data-theme="dark"] .banking-pa-globe,
html[data-theme="dark"] .banking-epspe-globe,
html[data-theme="dark"] .banking-globe,
html[data-theme="dark"] .specialty-services-circle,
html[data-theme="dark"] .services-box-in-a-box-container,
html[data-theme="dark"] .services-box-in-a-box-container.right-flex,
html[data-theme="dark"] .services-box-in-a-box-container.flex-right,
html[data-theme="dark"] .services-box-in-a-box-wrap {
  background-color: var(--nb-blue);
}

/* Inner service panels match Prospera .main-content-background */
html[data-theme="dark"] .services-in-a-box-right,
html[data-theme="dark"] .services-box-in-box {
  background-color: var(--nb-bg-elevated);
}

/* Hero / section CTAs — use mid --nb-btn (not deep --nb-blue) so they read on dark heroes */
html[data-theme="dark"] .call-to-action-link-block.call-to-action.dark-gray-or-purple-bg,
html[data-theme="dark"] .call-to-action-link-block.call-to-action.center.dark-gray-or-purple-bg {
  color: #fff;
  background-color: var(--nb-btn);
}

html[data-theme="dark"] .call-to-action-link-block.call-to-action.dark-gray-or-purple-bg:hover,
html[data-theme="dark"] .call-to-action-link-block.call-to-action.center.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-btn-hover);
}

html[data-theme="dark"] .footer-social-link.dark-gray-or-purple-bg {
  background-color: var(--nb-blue);
}

html[data-theme="dark"] .footer-social-link.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-blue-hover);
}

html[data-theme="dark"] .get-extension.dark-gray-or-purple-bg {
  background-color: var(--nb-blue);
}

html[data-theme="dark"] .get-extension.dark-gray-or-purple-bg:hover {
  background-color: var(--nb-blue-hover);
}