/* Wrapper sticks to top */
#chf-header-wrapper {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 9999;
    pointer-events: none;
}

/* Shared styles */
.chf-header {
    width: 100%;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    pointer-events: auto;
    position: absolute;
    top: 0;
    left: 0;
}

/* Default visible transparent header */
.chf-header-transparent {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Scrolled header hidden initially */
.chf-header-scrolled {
    opacity: 0;
    visibility: hidden;
    z-index: 2;
}

/* On scroll: fade in scroll header, fade out transparent */
body.chf-scrolled .chf-header-transparent {
    opacity: 0;
    visibility: hidden;
}

body.chf-scrolled .chf-header-scrolled {
    opacity: 1;
    visibility: visible;
}

/* Body padding to make room for sticky header */
body.chf-has-sticky {
    padding-top: var(--chf-header-height, 100px); /* fallback value */
}

.chf-header-normal {
    position: relative;
    width: 100%;
    pointer-events: auto;
}