/* ==========================================================
   KOKO Enterprise Framework
   Final Premium Header
   Version: 3.0.0
   ========================================================== */

/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/

.site-header{
    position:fixed;
    top:0;
    left:0;

    width:100%;

    z-index:1000;

    background:#ffffff;
    border-bottom:1px solid rgba(17,17,17,.08);

    transition:
        background-color .35s ease,
        border-color .35s ease,
        box-shadow .35s ease,
        backdrop-filter .35s ease;
}

/*--------------------------------------------------------------
# Homepage Top State
--------------------------------------------------------------*/

.home .site-header:not(.is-scrolled){
    background:transparent;
    border-bottom-color:transparent;

    box-shadow:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
}

/*--------------------------------------------------------------
# Scrolled State
--------------------------------------------------------------*/

.site-header.is-scrolled{
    background:rgba(255,255,255,.98);
    border-bottom-color:rgba(17,17,17,.09);

    box-shadow:
        0 10px 32px rgba(17,17,17,.06);

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

/*--------------------------------------------------------------
# Header Container
--------------------------------------------------------------*/

.site-header .container{
    display:flex;
    align-items:center;

    min-height:94px;

    transition:min-height .35s ease;
}

.site-header.is-scrolled .container{
    min-height:76px;
}

/*--------------------------------------------------------------
# Header Layout
--------------------------------------------------------------*/

.header-inner{
    display:flex;
    align-items:center;

    width:100%;

    gap:2rem;
}

/*--------------------------------------------------------------
# Branding
--------------------------------------------------------------*/

.site-branding{
    display:flex;
    align-items:center;

    flex-shrink:0;
}

.custom-logo-link{
    display:flex;
    align-items:center;

    line-height:0;
    text-decoration:none;
}

/*--------------------------------------------------------------
# Custom Logo
--------------------------------------------------------------*/

.site-header .custom-logo{
    display:block;

    width:auto;
    height:auto;

    max-width:170px;
    max-height:58px;

    object-fit:contain;

    background:transparent;

    /*
     * Default state:
     * Preserve the original red transparent PNG.
     */
    filter:none;

    transition:
        max-width .35s ease,
        max-height .35s ease,
        filter .35s ease,
        opacity .35s ease,
        transform .35s ease;
}

/*
 * Homepage top:
 * Convert the original red wordmark to white.
 *
 * Because the PNG background is transparent, only the
 * visible KOKO lettering changes colour.
 */
.home .site-header:not(.is-scrolled) .custom-logo{
    filter:
        brightness(0)
        saturate(100%)
        invert(100%);
}

/*
 * Homepage after scrolling:
 * Restore the original red logo.
 */
.home .site-header.is-scrolled .custom-logo{
    max-width:152px;
    max-height:48px;

    filter:none;
}

/*
 * Internal pages:
 * Always show the original red logo.
 */
body:not(.home) .site-header .custom-logo{
    filter:none;
}

/*--------------------------------------------------------------
# Text Logo Fallback
--------------------------------------------------------------*/

.site-logo{
    display:inline-flex;
    align-items:center;

    color:#d71920;

    text-decoration:none;
}

.site-logo-mark{
    color:#d71920;

    font-family:var(--font-heading);
    font-size:2.2rem;
    font-weight:700;
    line-height:1;
    letter-spacing:-.045em;

    transition:color .35s ease;
}

.home .site-header:not(.is-scrolled) .site-logo-mark{
    color:#ffffff;
}

.home .site-header.is-scrolled .site-logo-mark,
body:not(.home) .site-logo-mark{
    color:#d71920;
}

/*--------------------------------------------------------------
# Main Navigation Placement
--------------------------------------------------------------*/

.main-navigation{
    margin-left:auto;
}

/*--------------------------------------------------------------
# Header Actions
--------------------------------------------------------------*/

.header-actions{
    display:flex;
    align-items:center;

    flex-shrink:0;

    margin-left:2.75rem;
}

/*
 * Contact is intentionally styled as a navigation link,
 * not as a button. Its typography, colour and underline
 * are controlled by navigation.css.
 */
.header-cta{
    position:relative;

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

    min-width:0;
    min-height:42px;

    padding:0;

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;

    text-decoration:none;
}

/*--------------------------------------------------------------
# Navigation Toggle
--------------------------------------------------------------*/

.nav-toggle{
    display:none;

    position:relative;

    width:44px;
    height:44px;

    margin:0;
    padding:0;

    cursor:pointer;

    background:transparent;

    border:0;
    border-radius:0;

    box-shadow:none;
}

.nav-toggle::before,
.nav-toggle::after{
    display:none;

    content:none;
}

.nav-toggle span{
    position:absolute;
    left:50%;

    display:block;

    width:21px;
    height:2px;

    background:#171717;

    transform:translateX(-50%);

    transition:
        top .25s ease,
        opacity .25s ease,
        transform .25s ease,
        background-color .25s ease;
}

.nav-toggle span:nth-child(1){
    top:15px;
}

.nav-toggle span:nth-child(2){
    top:21px;
}

.nav-toggle span:nth-child(3){
    top:27px;
}

/* White hamburger over the dark homepage Hero. */

.home .site-header:not(.is-scrolled) .nav-toggle span{
    background:#ffffff;
}

/* Dark hamburger after scrolling and on internal pages. */

.home .site-header.is-scrolled .nav-toggle span,
body:not(.home) .site-header .nav-toggle span{
    background:#171717;
}

.nav-toggle:hover span{
    background:#d71920;
}

.home .site-header:not(.is-scrolled) .nav-toggle:hover span{
    background:#d71920;
}

/*--------------------------------------------------------------
# Active Navigation Toggle
--------------------------------------------------------------*/

.nav-toggle.is-active span:nth-child(1){
    top:21px;

    transform:
        translateX(-50%)
        rotate(45deg);
}

.nav-toggle.is-active span:nth-child(2){
    opacity:0;
}

.nav-toggle.is-active span:nth-child(3){
    top:21px;

    transform:
        translateX(-50%)
        rotate(-45deg);
}

/*--------------------------------------------------------------
# Skip Link
--------------------------------------------------------------*/

.skip-link{
    position:absolute;
    left:-9999px;

    width:1px;
    height:1px;

    overflow:hidden;
}

.skip-link:focus{
    position:fixed;
    top:18px;
    left:18px;

    width:auto;
    height:auto;

    padding:1rem 1.4rem;

    color:#171717;
    background:#ffffff;

    border:1px solid rgba(17,17,17,.1);
    border-radius:var(--radius-sm);

    box-shadow:
        0 16px 40px rgba(17,17,17,.14);

    z-index:9999;
}

/*--------------------------------------------------------------
# Focus States
--------------------------------------------------------------*/

.site-header a:focus-visible,
.site-header button:focus-visible{
    outline:2px solid #d71920;
    outline-offset:4px;
}

/*--------------------------------------------------------------
# Laptop
--------------------------------------------------------------*/

@media (max-width:1200px){

    .site-header .container{
        min-height:88px;
    }

    .site-header.is-scrolled .container{
        min-height:74px;
    }

    .header-inner{
        gap:1.5rem;
    }

    .site-header .custom-logo{
        max-width:155px;
        max-height:50px;
    }

    .home .site-header.is-scrolled .custom-logo{
        max-width:145px;
        max-height:45px;
    }

    .header-actions{
        margin-left:2rem;
    }

}

/*--------------------------------------------------------------
# Tablet
--------------------------------------------------------------*/

@media (max-width:992px){

    .site-header .container,
    .site-header.is-scrolled .container{
        min-height:76px;
    }

    .main-navigation{
        display:none;
    }

    .header-actions{
        margin-left:auto;
    }

    .header-cta{
        display:none;
    }

    .nav-toggle{
        display:block;
    }

    .site-header .custom-logo,
    .home .site-header.is-scrolled .custom-logo{
        max-width:145px;
        max-height:46px;
    }

}

/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

@media (max-width:576px){

    .site-header .container,
    .site-header.is-scrolled .container{
        min-height:70px;
    }

    .site-header .custom-logo,
    .home .site-header.is-scrolled .custom-logo{
        max-width:130px;
        max-height:42px;
    }

    .site-logo-mark{
        font-size:1.85rem;
    }

}

/*--------------------------------------------------------------
# Very Small Screens
--------------------------------------------------------------*/

@media (max-width:380px){

    .site-header .custom-logo,
    .home .site-header.is-scrolled .custom-logo{
        max-width:116px;
        max-height:38px;
    }

}