/* 
Theme Name: 3 Hive 2023
Theme URI: https://github.com/elementor/hello-theme-child/
Description: 3 Hive 2023 is a child theme of Hello Elementor, created by Elementor team
Author: Brainstormers
Author URI: https://thinkbrainstormers.co.uk/
Template: hello-elementor
Version: 2.0.0
Text Domain: three-hive-2023
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Shrinking header with sticky menu */

@media screen and (min-width: 1024px) {
    header.sticky-header,
    #nav-menu-container.sticky-menu {
        --header-height: 198px;
        --opacity: 1;
        --shrink-me: 0.60;
        --sticky-background-color: #fff0e6;
        --transition: .3s ease-in-out;              
    }

    header.sticky-header {
        transition: background-color var(--transition),
                    background-image var(--transition),
                    /*opacity var(--transition),*/
                    backdrop-filter var(--transition),
                    padding-bottom var(--transition),
                    height var(--transition),
                    min-height var(--transition);
    }
    
    header.sticky-header.elementor-sticky--effects {
        background-color: var(--sticky-background-color) !important;
        height: calc(var(--header-height) * var(--shrink-me)) !important;
        min-height: calc(var(--header-height) * var(--shrink-me)) !important;
        padding-bottom: 15px;
    }

    #nav-menu-container.sticky-menu {
        transition: margin-top var(--transition),
                    padding-block-start var(--transition),
                    padding-block-end var(--transition);
    }
    
    #nav-menu-container.sticky-menu.elementor-sticky--effects {
        margin-top: -79px !important;
        padding-block-start: 0px;
        padding-block-end: 0px;
    }
    
    header.sticky-header .logo img {
        transition: max-width var(--transition);
    }
    
    header.sticky-header.elementor-sticky--effects .logo img {
        max-width: calc(100% * var(--shrink-me));
    }
}


/* End shrinking header with sticky menu */