/*
 Theme Name:   PHASE Blank Theme
 Theme URI:    https://phase-digital.com
 Description:  Custom Theme by PHASE Digital
 Author:       PHASE Digital
 Author URI:   https://phase-digital.com
 Template:     generatepress
 Version:      1.0
*/
@import url('https://fonts.googleapis.com/css2?family=Baskervville:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pinyon+Script&display=swap');
/* @font-face {
    font-family: 'Baskerville';
    font-style: normal;
    font-weight: 300 700;
    font-stretch: 100%;
    font-display: swap;
    src: url("/wp-content/themes/phase_theme/includes/fonts/Fredoka-VariableFont.woff2") format('woff2-variations');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
} */
a {
    color: var(--BodyFont);
}
body {
    font-family: var(--BodyFont);
    font-weight: 400;
}
p, li, a {
    font-family: var(--BodyFont);
    font-weight: 400;
}
b, strong {
    font-weight: 700;
}
h1, h2, h3, h4, h5, h6 {
    font-family: var(--HeadFont);
    font-optical-sizing: auto;
    font-style: normal;
}
.one-container .site-content {
    padding: 0px;
}
#page {
	margin-top: -240px;
}
/*============================================================================
                    Header Nav
=============================================================================*/
.main-navigation:not(.slideout-navigation) {
	background-color: transparent;
    height: 160px;
    position: relative;
    z-index: 50;

    &.is_stuck {
        background: var(--color-1) !important;

        .inside-navigation {
            flex-wrap: nowrap !important;
            padding-top: 0px !important;

            .logo-right {
                p {
                    color: #000;
                    top: -8px;
                    left: 137px;
                }
            }
            .header-search {
                svg {
                    color: #fff !important;
                }
            }
            .main-nav {
                ul {
                    li {
                        &[class*="current-menu-"] {
                            & > a {
                                background: transparent;
                                color: #fff;
        
                                &:after, &:before {
                                    transform: scaleX(1);
                                }
                                &:hover {
                                    color: var(--HighlightColor);
                                }
                            }
                            ul.sub-menu {
                                li {
                                    a {
                                        color: #fff;
            
                                        &:hover {
                                            color: var(--HighlightColor);
                                        }
                                    }
                                }
                            }
                        }
                        &:not([class*="current-menu-"]):hover, li.sfHover:not([class*="current-menu-"]), li:not([class*="current-menu-"]):focus {
                            & > a {
                                background: transparent;
                                color: #fff;

                                &:hover {
                                    color: var(--HighlightColor);
                                }
                            }
                        }
                        a {
                            color: #fff;

                            &:after, &:before {
                                background: #fff;
                            }
                            ul.sub-menu {
                                li {
                                    a {
                                        color: #fff;
            
                                        &:hover {
                                            color: var(--HighlightColor);
                                        }
                                    }
                                }
                            }
                        }
                    }
                }
            }
            .menu-toggle {
                color: #fff;
                order: 4;
                padding-right: 0px;
            }
        }
    }
    .inside-navigation {
        flex-wrap: nowrap;
        transition: 0.2s;

        .header-right {
            display: flex;
            align-items: center;
            gap: 15px;
            height: 70px;
            margin-left: 35px;
            order: 4;

            & > a {
                background: var(--SecondaryColor);
                color: #fff;
                border-radius: 10px;
                display: flex;
                justify-content: center;
                align-items: center;
                gap: 8px;
                font-size: 16px;
                font-weight: 600;
                letter-spacing: 1px;
                height: 40px;
                padding: 0 20px;
                text-transform: uppercase;
                transition: 0.4s;

                &:first-of-type {
                    background: var(--color-3);

                    &:hover {
                        background: var(--HighlightColor);
                    }
                    svg {
                        border-radius: 50%;
                        border: 1px solid #fff;
                        padding: 3px;
                    }
                }

                &:nth-of-type(2) {
                    background: var(--HighlightColor);

                    &:hover {
                        background: var(--color-3);
                    }
                }
                svg path {
                    transition: 0.4s;
                }
            }
            .header-search {
                cursor: pointer;

                svg {
                    color: #fff;
                    display: block;
                }
            }
        }
        .navigation-branding {
            .site-logo {
                padding-top: 15px;

                img {
                    height: 100px;
                    padding: 0px;
                }
            }
            .sticky-navigation-logo {
                position: relative;
                margin-top: 8px;
                width: 75px;

                img {
                    height: auto;
                    position: absolute;
                    top: 0px;
                    left: 0px;
                    margin: 0px;
                    padding: 0px;
                    width: 100%;
                }
            }
        }
        .main-nav {
            display: flex;
            align-items: center;
            height: 70px;
            margin-left: -20px;
            order: 3;
    
            & > ul {
                gap: 35px;

                & > li {
                    & > a {
                        color: #fff;
                        font-family: var(--BodyFont);
                        font-size: 18px;
                        font-weight: 600;
                        letter-spacing: 1px;
                        line-height: 18px;
                        margin: 0px;
                        padding: 0 10px;
                        text-transform: uppercase;
                        
                        &:after, &:before {
                            content: '';
                            position: absolute;
                            width: 100%;
                            height: 4px;
                            background: #fff;
                            bottom: -5px;
                            left: 0;
                            transform: scaleX(0);
                            transform-origin: right;
                            transition: transform 0.7s ease-out;
                        }
                        &:before {
                            top: -7px;
                            transform-origin: left;
                        }
                        &:hover:after, &:hover:before {
                            transform: scaleX(1);
                        }
                        
                        .dropdown-menu-toggle {
                            padding-right: 0px;
                        }
                    }
                    ul.sub-menu {
                        background: #444;
                        border-bottom: 4px solid var(--color-3);
                        padding: 10px 0 0 0;
                        margin-top: 2px;
    
                        li {
                            background: transparent;

                            a {
                                color: #fff;
                                font-family: var(--BodyFont);
                                font-size: 18px;
                                font-weight: 600;
                                line-height: 1.2em;
                                margin: 5px 0;
    
                                &:hover {
                                    color: var(--HighlightColor);
                                }
                            }
                        }
                    }
                }
                li:not([class*="current-menu-"]):hover, li.sfHover:not([class*="current-menu-"]), li:not([class*="current-menu-"]):focus {
                    & > a {
                        background: transparent;
                        color: #fff;
                    }
                }
                li[class*="current-menu-"] {
                    & > a {
                        background: transparent;
                        color: #fff;

                        &:after, &:before {
                            transform: scaleX(1);
                        }
                    }
                }
            }
        }
        .menu-toggle {
            color: #fff;
            font-size: 30px;
            height: 70px;
            order: 4;
            padding-right: 0px;
            transition: 0.4s;

            &:hover {
                color: var(--SecondaryColor);
            }
            .gp-icon {
                display: block;
            }
        }
    }
}
/*============================================================================
                    Media Queries
=============================================================================*/
@media(min-width: 769px) {
    .inside-header>.site-branding,
    .inside-header>.navigation-branding,
    .inside-header>.site-logo,
    .site-branding-container,
    #site-navigation .navigation-branding .site-logo,
    #sticky-navigation .navigation-branding {
        position: absolute;
        left: 50%;
        top: 0px;
        transform: translateX(-50%);
        z-index: 1000;
    }

    #site-navigation {
        margin-left: unset !important;
        display: flex;
    }

    .site-header .main-navigation:not(#sticky-navigation) .inside-navigation {
        margin: unset;
    }

    #site-navigation,
    #primary-menu,
    .main-navigation .inside-navigation {
        flex: 1;
    }

    /* Change nth-child(#) to first item to right */
    .main-navigation ul li:nth-child(3) {
        margin-left: auto;
    }
}