/**
 * ECOVENT corporate site — header & logo fixes
 * Logo asset: /images/eco.png (3860×951 wide horizontal mark)
 */

/* Bar: readable on hero, aligned with logo height */
header.fixed.top-0 {
  background: rgba(255, 255, 255, 0.94) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(10, 31, 68, 0.08), 0 4px 20px rgba(10, 31, 68, 0.06);
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

header.fixed.top-0 > .container {
  padding-left: 1rem !important;
  padding-right: 1rem !important;
  min-height: 4rem !important;
  align-items: center !important;
  gap: 0.75rem !important;
}

@media (min-width: 768px) {
  header.fixed.top-0 > .container {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    min-height: 4.5rem !important;
  }
}

/* Logo link — wide aspect ratio, not portrait box */
header.fixed.top-0 a[href="/"] > div.relative {
  width: auto !important;
  height: 2.75rem !important;
  min-width: 9rem !important;
  max-width: 14rem !important;
  overflow: visible !important;
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
  flex-shrink: 0 !important;
}

@media (min-width: 768px) {
  header.fixed.top-0 a[href="/"] > div.relative {
    height: 3.25rem !important;
    min-width: 11rem !important;
    max-width: 16rem !important;
    margin-right: 1rem !important;
  }
}

header.fixed.top-0 img[alt="ECOVENT Logo"] {
  display: block !important;
  width: auto !important;
  height: 100% !important;
  max-width: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Nav pills — cleaner next to wide logo */
header.fixed.top-0 nav.hidden.md\:flex {
  gap: 0.25rem !important;
  flex-wrap: nowrap !important;
}

header.fixed.top-0 nav.hidden.md\:flex a > div {
  padding: 0.4rem 0.65rem !important;
  font-size: 0.72rem !important;
  line-height: 1.2 !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap !important;
  border-radius: 0.375rem !important;
  background: rgba(255, 255, 255, 0.85) !important;
  color: #0a1f44 !important;
  border: 1px solid rgba(10, 31, 68, 0.08) !important;
}

header.fixed.top-0 nav.hidden.md\:flex a > div:hover {
  background: #fff !important;
  border-color: rgba(10, 31, 68, 0.15) !important;
}

/* Mobile menu button */
header.fixed.top-0 > .container > button.md\:hidden {
  color: #0a1f44 !important;
  padding: 0.5rem !important;
}

/* Mobile drawer */
header.fixed.top-0 + div,
header.fixed.top-0 .md\:hidden.bg-background\/95 {
  border-top: 1px solid rgba(10, 31, 68, 0.08);
}

/* Prevent hero content hiding under taller header */
body {
  scroll-padding-top: 5rem;
}