/**
 * MH Sticky Elements Styles
 * 
 * Version: 1.0.0
 */

/* The sticky class - apply this to any block */
.sticky-item {
    position: -webkit-sticky !important;
    /* Safari support */
    position: sticky !important;
    /* !important needed to override themes setting position: relative on .alignfull */
    top: 0;
    z-index: 999;
    /* High Z-Index to stay on top */
    background-color: inherit;
    /* Inherit background to prevent transparency overlap issues, or set specific color */
    align-self: flex-start;
    /* Fix for Flexbox containers (common in WP) where item stretches to parent height */
    width: 100%;
    /* Ensure sticky item takes full width in flex/grid containers */
    flex-wrap: wrap;
    /* Allow items to wrap instead of squeezing */
    transition: top 0.6s ease;
    /* Smooth transition to match theme header animation (0.6s) */
}

/* 
 * Theme Compatibility: "Magnisimo" and others using .has-scrolled-up
 * When the theme header appears (scroll up), push the sticky item down.
 */
.has-scrolled-up .sticky-item {
    top: var(--mh-header-height, 0px);
}

/* Admin Bar Adjustments */
.admin-bar .sticky-item {
    top: 32px;
    /* Standard WP Admin Bar height */
}

@media screen and (max-width: 782px) {
    .admin-bar .sticky-item {
        top: 46px;
        /* Mobile Admin Bar height */
    }
}

/* 
 * Complex Case: Admin Bar + Theme Header visible 
 * If the user is logged in AND scrolling up, we need to account for BOTH.
 */
.admin-bar.has-scrolled-up .sticky-item {
    top: calc(32px + var(--mh-header-height, 0px));
}

@media screen and (max-width: 782px) {
    .admin-bar.has-scrolled-up .sticky-item {
        top: calc(46px + var(--mh-header-height, 0px));
    }
}