/* Stili di base del tuo header */
.ast-main-header-wrap {
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

/* Nasconde gli header superiore e inferiore quando la pagina scorre */
body.is-scrolled .ast-above-header-wrap,
body.is-scrolled .ast-below-header-wrap {
    display: none !important;
}

/* Rende l'header principale sticky e visibile solo quando la pagina scorre */
body.is-scrolled .ast-main-header-wrap {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1) !important;
    background-color: #fff !important; /* Colore di sfondo */
}

/* Sposta il contenuto della pagina per evitare salti */
body.is-scrolled .site-content {
    margin-top: 100px !important; /* Usa l'altezza del tuo header principale (100px) */
}

/* 1. Makes the mobile header fixed (base) */
body.is-scrolled #ast-mobile-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    background-color: #fff !important;
    z-index: 999;
}

/* 2. Fix to position the mobile menu CONTENT below the header */
/* We only use the generic container that appears when the menu opens. */
body.is-scrolled .ast-mobile-header-content {
    /* We keep the 'fixed' and 'bottom: 0' properties for scrolling */
    position: fixed !important;
    width: 100% !important;
    bottom: 0 !important;
    overflow-y: auto !important; /* Important for menu scrolling */
    background-color: #fff !important; 
    z-index: 998;
}

/* 3. Definition of TOP height to anchor it BELOW the header */
/* Use the total height of the fixed header, including the above-header (if visible) */
body.is-scrolled .ast-mobile-header-content {
    top: 80px !important; /* Try 100px as a starting point. */
}



/* Basic styles for the main header */
.ast-main-header-wrap {
    z-index: 999;
    transition: all 0.3s ease-in-out;
}

/* Hide the above header and below header when the page is scrolled */
body.is-scrolled .ast-above-header-wrap,
body.is-scrolled .ast-below-header-wrap {
    display: none !important;
}

/* Make the main header sticky and visible only when scrolling */
body.is-scrolled .ast-main-header-wrap {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    background-color: #fff !important; /* Background color of the sticky header */
}

/* ADJUST FOR ADMIN BAR WHEN VISIBLE */
.admin-bar.is-scrolled .ast-main-header-wrap {
    top: 32px !important; /* Default admin bar height */
}

@media screen and (max-width: 782px) {
    .admin-bar.is-scrolled .ast-main-header-wrap {
        top: 46px !important; /* Mobile admin bar height */
    }
}

/* Push the page content down to prevent layout shift when header becomes fixed */
body.is-scrolled .site-content {
    margin-top: 100px !important; /* Set this to the height of your main header (e.g. 100px) */
}

/* Adjust content margin when admin bar is visible */
.admin-bar.is-scrolled .site-content {
    margin-top: 132px !important; /* 100px + 32px admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar.is-scrolled .site-content {
        margin-top: 146px !important; /* 100px + 46px mobile admin bar */
    }
}

/* 1. Makes the mobile header fixed (base) */
body.is-scrolled #ast-mobile-header {
    position: fixed !important;
    top: 0 !important;
    width: 100% !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1) !important;
    background-color: #fff !important;
    z-index: 999;
}

/* Adjust mobile header for admin bar */
.admin-bar.is-scrolled #ast-mobile-header {
    top: 32px !important;
}

@media screen and (max-width: 782px) {
    .admin-bar.is-scrolled #ast-mobile-header {
        top: 46px !important;
    }
}

/* 2. Fix to position the mobile menu CONTENT below the header */
/* We only use the generic container that appears when the menu opens. */
body.is-scrolled .ast-mobile-header-content {
    position: fixed !important;
    width: 100% !important;
    bottom: 0 !important;
    overflow-y: auto !important; /* Important for menu scrolling */
    background-color: #fff !important; 
    z-index: 998;
}

/* 3. Definition of TOP height to anchor it BELOW the header */
/* Use the total height of the fixed header, including the above-header (if visible) */
body.is-scrolled .ast-mobile-header-content {
    top: 100px !important; /* Try 100px as a starting point. */
}

/* Adjust mobile menu content for admin bar */
.admin-bar.is-scrolled .ast-mobile-header-content {
    top: 132px !important; /* 100px + 32px admin bar */
}

@media screen and (max-width: 782px) {
    .admin-bar.is-scrolled .ast-mobile-header-content {
        top: 146px !important; /* 100px + 46px mobile admin bar */
    }
}