/* ==========================================================================
   HEADER.CSS
   Project: Luxury Destination Wedding Videographer
   Author: Cyber Master Studio
   Version: 2.0
   Description: Header component
   ========================================================================== */


/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
    position: fixed;
    inset: 0 0 auto 0;

    z-index: var(--cms-z-header);

    width: 100%;

    transition:
        background-color var(--cms-transition-normal),
        backdrop-filter var(--cms-transition-normal),
        box-shadow var(--cms-transition-normal),
        padding var(--cms-transition-normal);
}


/* ==========================================================================
   Header Scrolled
   ========================================================================== */

.site-header--scrolled {
    background-color: rgba(255, 255, 255, 0.88);

    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);

    box-shadow: var(--cms-shadow-sm);
}

.site-header--scrolled .site-header__wrapper {
    min-height: var(--cms-header-height-scrolled);
}


/* ==========================================================================
   Header Wrapper
   ========================================================================== */

.site-header__wrapper {
    position: relative;

    display: flex;
    align-items: center;
    justify-content: space-between;

    min-height: var(--cms-header-height);
}


/* ==========================================================================
   Brand
   ========================================================================== */

.site-header__brand {
    position: relative;

    display: inline-flex;
    align-items: center;

    flex-shrink: 0;

    z-index: 3;
}


/* ==========================================================================
   Logo
   ========================================================================== */

.site-header__logo {
    display: block;

    width: 180px;
    max-height: auto;
}


/* ==========================================================================
   Header CTA
   ========================================================================== */

.site-header__cta {
    flex-shrink: 0;
	color: #fff;
}

.site-header__cta:hover {
    
	color: #d4d2d2;
}


/* ==========================================================================
   Mobile
   ========================================================================== */

@media (max-width: 900px) {

    .site-header__wrapper {
        min-height: var(--cms-header-height);
    }
	
	.site-header__logo {  
	
	width: 220px;


	}


    /* ----------------------------------------------------------------------
       Desktop CTA
       ---------------------------------------------------------------------- */

    .site-header__cta {
        display: none;
		
    }


    /* ----------------------------------------------------------------------
       Mobile Toggle
       ---------------------------------------------------------------------- */

    .site-header__toggle {
        position: relative;
		

        z-index: 4;
    }

}



/* ==========================================================================
   Page Specific Header Colors
   ========================================================================== */

/* --------------------------------------------------------------------------
   About — Light Header
   -------------------------------------------------------------------------- */

body.page-about .site-header .site-navigation__link {
    color: var(--cms-color-heading);
}

body.page-about .site-header .site-header__cta {
    color: var(--cms-color-heading);
}

body.page-about .site-header .site-header__toggle {
    color: var(--cms-color-heading);
}


/* --------------------------------------------------------------------------
   About — Hover
   -------------------------------------------------------------------------- */

body.page-about .site-header .site-navigation__link:hover {
    color: var(--cms-color-accent);
}

body.page-about .site-header .site-header__cta:hover {
    color: var(--cms-color-accent);
}


/* --------------------------------------------------------------------------
   Home — Transparent Header
   -------------------------------------------------------------------------- */

body.page-home .site-header:not(.site-header--scrolled)
.site-navigation__link {
    color: #ffffff;
}

body.page-home .site-header:not(.site-header--scrolled)
.site-header__cta {
    color: #ffffff;
}

body.page-home .site-header:not(.site-header--scrolled)
.site-header__toggle {
    color: #ffffff;
}

@media (max-width: 600px) {

    
	
	.site-header__logo {  
	
	width: 160px;


	}