/* ==========================================================================
   NAVIGATION.CSS
   Project: Luxury Destination Wedding Videographer
   Author: Cyber Master Studio
   Version: 4.0
   Description: Primary desktop and mobile navigation
   ========================================================================== */


/* ==========================================================================
   Desktop Navigation
   ========================================================================== */

.site-navigation {
    margin-inline: auto;
}


/* ==========================================================================
   Navigation List
   ========================================================================== */

.site-navigation__list {
    display: flex;
    align-items: center;
    gap: var(--cms-navigation-gap);

    margin: 0;
    padding: 0;

    list-style: none;
}


/* ==========================================================================
   Navigation Item
   ========================================================================== */

.site-navigation__item {
    display: flex;
}


/* ==========================================================================
   Navigation Link
   ========================================================================== */

.site-navigation__link {
    position: relative;

    display: inline-flex;
    align-items: center;
	font-family: var(--cms-font-serif);

    font-size: var(--cms-text-sm);
    font-weight: var(--cms-font-light);
    line-height: 1;
	color: var(--cms-color-navigation);

    

    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.1em;

    transition:
        color var(--cms-transition-fast);
}


/* ==========================================================================
   Link Hover
   ========================================================================== */

.site-navigation__link:hover {
    color: var(--cms-color-navigation-hover);
	text-decoration: none;
}


/* ==========================================================================
   Link Focus
   ========================================================================== */

.site-navigation__link:focus-visible {
    outline: none;
    outline-offset: 6px;
}


/* ==========================================================================
   Active Link
   ========================================================================== */

.site-navigation__link--active {
    color: var(--cms-color-navigation);
}



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

.site-header--scrolled .site-navigation__link {
    color: var(--cms-color-navigation-scrolled);
}

.site-header--scrolled .site-header__toggle {
    color: var(--cms-color-navigation-scrolled);
}




/* ==========================================================================
   Mobile CTA
   Hidden on Desktop
   ========================================================================== */

.site-navigation a.site-navigation__cta {
    display: none;
}




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

.site-header__toggle {
    display: none;

    align-items: center;
    justify-content: center;

    width: 48px;
    height: 48px;

    padding: 0;

    border: 0;

    color: var(--cms-color-heading);
    background: transparent;

    cursor: pointer;
}


/* ==========================================================================
   Mobile Toggle Lines
   ========================================================================== */

.site-header__toggle-line {
    position: absolute;

    width: 24px;
    height: 1px;

    background-color: currentColor;

    transition:
        transform var(--cms-transition-normal),
        opacity var(--cms-transition-normal);
}

.site-header__toggle-line:first-child {
    transform: translateY(-4px);
}

.site-header__toggle-line:last-child {
    transform: translateY(4px);
}


/* ==========================================================================
   Mobile Menu Open — Toggle Animation
   ========================================================================== */

.site-header--menu-open .site-header__toggle-line:first-child {
    transform: rotate(45deg);
}

.site-header--menu-open .site-header__toggle-line:last-child {
    transform: rotate(-45deg);
}


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

@media (max-width: 900px) {


    /* ----------------------------------------------------------------------
       Navigation Panel
       ---------------------------------------------------------------------- */

    .site-navigation {
        position: fixed;
        inset: 0;

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        width: 100%;
        height: 100svh;

        margin: 0;
        padding: 120px var(--cms-container-padding) 60px;

        background-color: var(--cms-color-background);

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity var(--cms-transition-normal),
            visibility var(--cms-transition-normal);

        z-index: 2;
    }


    /* ----------------------------------------------------------------------
       Open Navigation
       ---------------------------------------------------------------------- */

    .site-header--menu-open .site-navigation {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }


    /* ----------------------------------------------------------------------
       Navigation List
       ---------------------------------------------------------------------- */

    .site-navigation__list {
        display: flex;
        flex-direction: column;
        align-items: center;

        gap: 28px;

        margin: 0;
    }


    /* ----------------------------------------------------------------------
       Navigation Link
       ---------------------------------------------------------------------- */

    .site-navigation__link {
        font-size: clamp(1.5rem, 5vw, 1.5rem);
        letter-spacing: 0.1em;
		color: var(--cms-color-heading);
    }


    /* ----------------------------------------------------------------------
       Active Link
       ---------------------------------------------------------------------- */

    .site-navigation__link--active::after {
        bottom: -10px;
    }


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

    .site-header__toggle {
    position: relative;
    color: #fff;

    display: inline-flex;

    z-index: 4;
}
	
	.site-header--menu-open .site-header__toggle {
    color: var(--cms-color-heading);
}


    /* ----------------------------------------------------------------------
   Mobile CTA
   ---------------------------------------------------------------------- */

.site-navigation a.site-navigation__cta {
    display: none;
	
}

.site-header--menu-open .site-navigation a.site-navigation__cta {
    display: inline-flex;
    margin-top: 136px;
	
}

}


/* ==========================================================================
   Prevent Body Scroll
   ========================================================================== */

body.menu-is-open {
    overflow: hidden;
}



@media (max-width: 600px) {

.site-navigation__link {
        font-size: clamp(1rem, 5vw, 1rem);
        letter-spacing: 0.1em;
		color: var(--cms-color-heading);
    }
	
	
}