/* Site logo variants — classic (tall van) vs new (bubble wordmark) */

html:not([data-site-logo]) .site-logo--new,
html[data-site-logo="classic"] .site-logo--new,
html[data-site-logo="new"] .site-logo--classic {
  display: none;
}

.site-logo {
  width: auto;
  display: block;
}

/* New bubble logo — compact, vertically centered in nav */
html[data-site-logo="new"] .nav-logo {
  top: 50%;
  left: 36px;
  transform: translateY(-50%);
}

html[data-site-logo="new"] .nav-logo .site-logo {
  height: 88px;
  mix-blend-mode: normal;
}

/* Classic van logo — tall, top-anchored (default) */
html:not([data-site-logo]) .nav-logo,
html[data-site-logo="classic"] .nav-logo {
  top: 2px;
  left: 26px;
  transform: none;
}

html:not([data-site-logo]) .nav-logo .site-logo,
html[data-site-logo="classic"] .nav-logo .site-logo {
  height: 210px;
  mix-blend-mode: multiply;
}

@media (min-width: 901px) {
  html:not([data-site-logo]) #siteNav,
  html[data-site-logo="classic"] #siteNav {
    height: 214px;
  }
}

/* Dark nav (apply page) — no multiply on cream edges */
#siteNav.site-nav--dark .nav-logo .site-logo {
  mix-blend-mode: normal;
}

@media (max-width: 900px) {
  html:not([data-site-logo]) .nav-logo,
  html[data-site-logo="new"] .nav-logo,
  html[data-site-logo="classic"] .nav-logo {
    top: auto;
    left: auto;
    transform: none;
  }

  /* Mobile: always the van logo (never the bubble wordmark) */
  #siteNav .nav-logo .site-logo--new {
    display: none !important;
  }
  #siteNav .nav-logo .site-logo--classic {
    display: block !important;
    height: 92px;
    mix-blend-mode: multiply;
  }

  #siteNav.site-nav--dark .nav-logo .site-logo {
    mix-blend-mode: normal;
  }
}

/* Footer logo switcher */
.logo-variant-switch {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 10px;
  vertical-align: middle;
}

.logo-variant-switch span {
  opacity: .45;
  font-size: 10px;
  letter-spacing: .4px;
}

.logo-variant-switch button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  font-size: 10px;
  opacity: .45;
  cursor: pointer;
  padding: 0 2px;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.logo-variant-switch button:hover {
  opacity: .75;
}

.logo-variant-switch button.is-active {
  opacity: .85;
  font-weight: 600;
  text-decoration: none;
  cursor: default;
}