/**
 * Sticky Header on Scroll Up
 * RS Melati Custom Header Behavior
 */

.rsmelati-header {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease;
    background: #ffffff;
}

/* When header becomes sticky */
.rsmelati-header.header-sticky {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(0);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide header when scrolling down */
.rsmelati-header.header-hidden {
    transform: translateY(-100%);
}

/* Show header when scrolling up */
.rsmelati-header.header-visible {
    transform: translateY(0);
}

/* Hide top bar when sticky */
.rsmelati-header.header-sticky .header-top {
    display: none;
}

/* Adjust main header padding when sticky */
.rsmelati-header.header-sticky .header-main {
    padding: 12px 0;
    transition: padding 0.3s ease;
}

/* Add smooth transition to header main */
.rsmelati-header .header-main {
    transition: padding 0.3s ease;
}

/* Ensure logo size adjusts smoothly */
.rsmelati-header.header-sticky .header-logo img {
    height: 40px !important;
    transition: height 0.3s ease;
}

/* Body padding to prevent content jump when header becomes fixed */
body.has-sticky-header {
    padding-top: 0;
}

/* Add padding to body when header is sticky to prevent content jump */
body.header-is-sticky {
    padding-top: 80px; /* Adjust based on your header height */
}

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}