/* Unified Wexon header on TanStack /services — must load after tanstack-services.css */

.min-h-screen header {
  border-bottom: 1px solid rgba(148, 163, 184, 0.15) !important;
  background: rgba(5, 10, 20, 0.6) !important;
  backdrop-filter: blur(24px) !important;
}

.min-h-screen header > div {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 1rem !important;
  max-width: 80rem !important;
  width: 100% !important;
  height: 5rem !important;
  min-height: 5rem !important;
  margin-inline: auto !important;
  padding-inline: 1.5rem !important;
}

.min-h-screen header .site-brand,
.min-h-screen header a[href="/"],
.min-h-screen header a[href="#top"] {
  display: flex !important;
  align-items: center !important;
  gap: 0.875rem !important;
  flex-shrink: 0 !important;
}

.min-h-screen header .site-brand-logo {
  display: block !important;
  height: 3.5rem !important;
  width: auto !important;
  max-width: 3.75rem !important;
  object-fit: contain !important;
  filter: none !important;
}

@media (min-width: 768px) {
  .min-h-screen header .site-brand-logo {
    height: 3.75rem !important;
    max-width: 4rem !important;
  }
}

/* Hide TanStack default logo wrappers when bootstrap replaces markup */
.min-h-screen header .site-brand-icon,
.min-h-screen header .site-brand-icon-box,
.min-h-screen header .site-brand-icon-glow,
.min-h-screen header a[href="/"] > span:first-child > span.absolute {
  display: none !important;
}

.min-h-screen header .site-brand-wordmark,
.min-h-screen header .font-display {
  font-size: 1.625rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

@media (min-width: 768px) {
  .min-h-screen header .site-brand-wordmark,
  .min-h-screen header .font-display {
    font-size: 2.125rem !important;
  }
}

@media (min-width: 1024px) {
  .min-h-screen header .site-brand-wordmark,
  .min-h-screen header .font-display {
    font-size: 2.375rem !important;
  }
}

.min-h-screen header .site-brand-accent,
.min-h-screen header .font-display .text-primary {
  color: #00d4ff !important;
}

.min-h-screen header .wexon-header-actions {
  display: none;
  align-items: center;
  gap: 2rem;
  margin-left: auto;
}

@media (min-width: 768px) {
  .min-h-screen header .wexon-header-actions {
    display: flex !important;
  }
}

.min-h-screen header nav {
  display: flex !important;
  align-items: center !important;
  gap: 2rem !important;
  font-size: 0.875rem !important;
  color: #94a3b8 !important;
}

.min-h-screen header nav a {
  transition: color 0.2s ease;
}

.min-h-screen header nav a:hover {
  color: #f8fafc !important;
}

.min-h-screen header .wexon-header-cta,
.min-h-screen header a.wexon-header-cta {
  display: none !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.375rem !important;
  background: #00d4ff !important;
  padding: 0.5rem 1rem !important;
  font-size: 0.875rem !important;
  font-weight: 500 !important;
  color: #020617 !important;
  white-space: nowrap !important;
  text-decoration: none !important;
  transition: opacity 0.2s ease !important;
}

@media (min-width: 640px) {
  .min-h-screen header .wexon-header-cta,
  .min-h-screen header a.wexon-header-cta {
    display: inline-flex !important;
  }
}

.min-h-screen header .wexon-header-cta:hover,
.min-h-screen header a.wexon-header-cta:hover {
  opacity: 0.9 !important;
}

/* Hide TanStack CTA when it sits outside our actions wrapper (bootstrap moves it) */
.min-h-screen header > div > a.rounded-md.bg-primary:not(.wexon-header-cta) {
  display: none !important;
}

.min-h-screen header > div > nav.hidden {
  display: none !important;
}

@media (min-width: 768px) {
  .min-h-screen header > div > nav.hidden {
    display: none !important;
  }
}