/**
 * Theme Name:   Frontline Arrival
 * Description:  Frontline Arrival Theme for SFH
 * Author:       Frontline Creative
 * Author URI:   https://www.frontlinecreativestudio.com/
 * Template:     arrival
 * Version:      0.0.3
 **/


.fla-navbar__wrap {
    --fla-nav-background: black;
    --fla-nav-icon-color: #CF9E66;

    --fla-nav-icon-width: 40px;
    --fla-nav-icon-height: 20px;
    --fla-nav-vertical-padding: 20px;
    --fla-nav-horizontal-padding: 10px;

    --fla-nav-width: calc(var(--fla-nav-icon-width) + calc(var(--fla-nav-horizontal-padding) * 2));

    display: flex;
}

.fla-navbar {

    padding-top: var(--fla-nav-vertical-padding);
    min-width: var(--fla-nav-width);
    background-color: var(--fla-nav-background);
}

.fla-content__wrap {
    max-width: calc(100vw - var(--fla-nav-width));
}

/*
body.admin-bar .fla-navbar {
    margin-top: 35px;
}
    */


.fla-navbar__content {
    position: fixed;
    z-index: 2;
    height: 100%;
    padding-left: var(--fla-nav-horizontal-padding);
}

.fla-toggle__wrap {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: var(--fla-nav-icon-width);
    height: var(--fla-nav-icon-height);

    cursor: pointer;
}



.fla-toggle__icon {

    background-color: var( --fla-nav-icon-color);
    height: 4px;
    transition: .5s transform ease-out;
}

.fla-toggle__icon.open:nth-child(1) {
    --center: calc(-50% + calc(var(--fla-nav-icon-height) / 2));

        transform-origin: center center;

    transform: translate(0%, var(--center) ) rotate(-45deg);
}
.fla-toggle__icon.open:nth-child(2) {
    transform: translate(-200%, 0);
}
.fla-toggle__icon.open:nth-child(3) {
    --center: calc(50% - calc(var(--fla-nav-icon-height) / 2));

    transform-origin: center center;
    transform:  translate(0%, var(--center)) rotate(45deg);
}


.fla-navbar__menu {
    --offset: calc(var(--fla-nav-vertical-padding) + var(--fla-nav-icon-height));
    --offset-neg: calc(var(--offset) * -1);
    transform: translate(-100%, var(--offset-neg));
    transition: .5s transform ease-out;
    background-color: var(--fla-nav-background);
    height: 100%;
    padding-top:  var(--offset);
    padding-right: var(--fla-nav-horizontal-padding);
}

.fla-navbar__menu.open {
    transform: translate(0%,  var(--offset-neg));
}

.fla-navbar .fla-main-navigation {
    margin-top: var(--fla-nav-vertical-padding);
}

.fla-navbar__menu ul {
    list-style: none;
    padding: 0;
}
.fla-navbar__menu .menu-item a{
    color: white;
    text-decoration: none;
}
.fla-navbar__menu .menu-item a:hover{
    color: var( --fla-nav-icon-color);
}


@media screen and (max-width: 768px) {
    .fla-navbar {
        display: none;
    }

    
    .fla-content__wrap {
        max-width: 100%;
    }
}