/* =========================================================
   FTY — GLOBAL HEADER V4
   TYPOGRAPHY ALIGNED WITH SITE
   Desktop / Tablet / Mobile
========================================================= */

.fty-header {
    --red:#ed1c24;
    --black:#050505;
    --white:#f5f5f5;
    --muted:#b8b8b8;
    --line:rgba(255,255,255,.11);

    position:fixed;
    top:0;
    left:0;
    z-index:99999;

    width:100%;

    background:rgba(5,5,5,.92);
    border-bottom:1px solid var(--line);

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
}

.fty-header *,
.fty-header *::before,
.fty-header *::after {
    box-sizing:border-box;
}


/* =========================================================
   INNER
========================================================= */

.fty-header-inner {
    width:100%;
    max-width:1440px;
    height:74px;

    margin:0 auto;
    padding:0 30px;

    display:grid;
    grid-template-columns:235px 1fr 235px;

    align-items:center;
}


/* =========================================================
   LOGO
========================================================= */

.fty-header-logo {
    display:flex;
    align-items:center;

    width:100%;
    max-width:205px;

    text-decoration:none;
}

.fty-header-logo img {
    display:block;

    width:100%;
    height:auto;

    object-fit:contain;
    object-position:left center;

    transition:opacity .2s ease;
}

.fty-header-logo:hover img {
    opacity:.8;
}


/* =========================================================
   DESKTOP NAVIGATION
========================================================= */

.fty-header-nav {
    display:flex;
    align-items:center;
    justify-content:center;

    gap:27px;
}

.fty-header-nav a {
    position:relative;

    color:#c9c9c9;

    font-family:"Barlow Condensed", sans-serif;
    font-size:14px;
    font-weight:600;
    font-style:normal;

    line-height:1;
    letter-spacing:.8px;

    text-decoration:none;
    text-transform:uppercase;

    transition:color .2s ease;
}

.fty-header-nav a::after {
    content:"";

    position:absolute;

    left:0;
    bottom:-9px;

    width:0;
    height:2px;

    background:var(--red);

    transition:width .2s ease;
}

.fty-header-nav a:hover {
    color:#fff;
}

.fty-header-nav a:hover::after {
    width:100%;
}


/* MY FTY / LOGIN */
.fty-header-nav a.fty-session-link {
    color:#f5f5f5;
}

.fty-header-nav a.fty-session-link::after {
    width:100%;
    background:var(--red);
    opacity:.55;
}

.fty-header-nav a.fty-session-link:hover::after {
    opacity:1;
}

/* =========================================================
   DESKTOP CTA
========================================================= */

.fty-header-action {
    display:flex;
    align-items:center;
    justify-content:flex-end;
}

.fty-header-cta {
    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-height:42px;

    padding:0 20px;

    background:var(--red);
    color:#fff;

    font-family:"Barlow Condensed", sans-serif;
    font-size:13px;
    font-weight:700;
    font-style:normal;

    line-height:1;
    letter-spacing:.6px;

    text-decoration:none;
    text-transform:uppercase;

    white-space:nowrap;

    transition:
        background .2s ease,
        color .2s ease,
        transform .2s ease;
}

.fty-header-cta:hover {
    background:#fff;
    color:#050505;

    transform:translateY(-1px);
}


/* =========================================================
   MOBILE MENU BUTTON
========================================================= */

.fty-menu-button {
    display:none;

    width:42px;
    height:42px;

    padding:0;

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

    background:transparent;

    border:1px solid rgba(255,255,255,.18);

    cursor:pointer;
}

.fty-menu-icon {
    position:relative;

    width:20px;
    height:14px;
}

.fty-menu-icon span {
    position:absolute;
    left:0;

    width:100%;
    height:2px;

    background:#fff;

    transition:
        transform .25s ease,
        top .25s ease,
        opacity .2s ease;
}

.fty-menu-icon span:nth-child(1) {
    top:0;
}

.fty-menu-icon span:nth-child(2) {
    top:6px;
}

.fty-menu-icon span:nth-child(3) {
    top:12px;
}

.fty-menu-button.is-open .fty-menu-icon span:nth-child(1) {
    top:6px;
    transform:rotate(45deg);
}

.fty-menu-button.is-open .fty-menu-icon span:nth-child(2) {
    opacity:0;
}

.fty-menu-button.is-open .fty-menu-icon span:nth-child(3) {
    top:6px;
    transform:rotate(-45deg);
}


/* =========================================================
   MOBILE MENU PANEL
========================================================= */

.fty-mobile-menu {
    display:none;

    position:absolute;

    top:100%;
    left:0;

    width:100%;

    background:#050505;

    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
}

.fty-mobile-menu.is-open {
    display:block;
}

.fty-mobile-menu-inner {
    padding:26px 24px 30px;
}


/* =========================================================
   MOBILE NAVIGATION
========================================================= */

.fty-mobile-nav {
    display:flex;
    flex-direction:column;

    margin:0 0 30px;
}

.fty-mobile-nav a {
    display:flex;
    align-items:center;

    width:100%;
    min-height:55px;

    padding:0;

    border-bottom:1px solid #242424;

    color:#f5f5f5;

    font-family:"Barlow Condensed", sans-serif;
    font-size:18px;
    font-weight:600;
    font-style:normal;

    line-height:1;
    letter-spacing:.6px;

    text-decoration:none;
    text-transform:uppercase;
}

.fty-mobile-nav a::after {
    content:"→";

    margin-left:auto;

    color:var(--red);

    font-family:Arial,sans-serif;
    font-size:14px;
    font-weight:400;
}


/* =========================================================
   MOBILE CTA
========================================================= */

.fty-mobile-cta {
    display:flex;
    align-items:center;
    justify-content:center;

    width:100%;
    min-height:52px;

    background:var(--red);
    color:#fff;

    font-family:"Barlow Condensed", sans-serif;
    font-size:14px;
    font-weight:700;
    font-style:normal;

    line-height:1;
    letter-spacing:.6px;

    text-decoration:none;
    text-transform:uppercase;
}


/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px) {

    .fty-header-inner {
        height:70px;

        grid-template-columns:185px 1fr 205px;

        padding:0 22px;
    }

    .fty-header-logo {
        max-width:165px;
    }

    .fty-header-nav {
        gap:20px;
    }

    .fty-header-nav a {
        font-size:12px;
    }

    .fty-header-cta {
        min-height:40px;

        padding:0 14px;

        font-size:12px;
    }

}


/* =========================================================
   MOBILE
========================================================= */

@media(max-width:767px) {

    .fty-header-inner {
        height:64px;

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

        padding:0 18px;
    }

    .fty-header-logo {
        max-width:178px;
    }

    .fty-header-nav,
    .fty-header-action {
        display:none;
    }

    .fty-menu-button {
        display:flex;
    }

}


/* =========================================================
   WORDPRESS ADMIN BAR
========================================================= */

body.admin-bar .fty-header {
    top:32px;
}

@media(max-width:782px) {

    body.admin-bar .fty-header {
        top:46px;
    }

}