/* -------------------------------------------------------------
   Header Sticky Simplified - Focus on main header only
   -------------------------------------------------------------

   Only the main header (.header-default) will be sticky
   Top bar (.tf-topbar) will remain normal
   -------------------------------------------------------------

:root {
  --header-height: auto;
}

/* Make only the main header sticky */
.header-default {
  position: sticky !important;
  top: 0 !important;
  z-index: 1000;
  background-color: #fff;
  box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* Body padding adjustment to prevent content jump */
body.has-sticky-header {
  padding-top: var(--header-height);
}

/* Mobile adjustments */
@media (max-width: 767.98px) {
  .header-default {
    /* Ensure proper mobile behavior */
    position: sticky !important;
    top: 0 !important;
  }

  body.has-sticky-header {
    padding-top: var(--header-height);
  }
}

/* Hide/show animation */
.header-default.is-hidden {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}

/* Support for browsers with sticky */
@supports (position: sticky) {
  .header-default {
    position: sticky !important;
  }
}

/* Fallback for old browsers */
.no-feature-sticky .header-default {
  position: fixed !important;
  top: 0 !important;
  left: 0;
  right: 0;
}

.no-feature-sticky body.has-sticky-header {
  padding-top: var(--header-height);
}