/* =========================================================
   NJS BLOGGER SIDEBAR
   ========================================================= */

.njs-blogger-sidebar{
    position:fixed;
    top:0;
    left:0;
    right:auto;
    width:var(--njs-sidebar-width,280px);
    height:100vh;
    background:#ffffff;
    border-right:1px solid #3a3834;
    z-index:999999;
    overflow-y:auto;
    box-sizing:border-box;
    font-family:Arial,Helvetica,sans-serif;
    color:#000000;
}

.njs-blogger-inner{
    padding:24px 20px 20px;
    box-sizing:border-box;
    min-height:100%;
}


/* =========================================================
   DESKTOP SIDEBAR LOGO
   ========================================================= */

.njs-sidebar-logo{
    margin:0 0 18px;
    text-align:center;
}

.njs-sidebar-logo img{
    max-width:100%;
    max-height:70px;
    width:auto;
    height:auto;
}


/* =========================================================
   SIDEBAR SECTIONS
   ========================================================= */

.njs-sidebar-section{
    padding:40px 0;
    border-bottom:1px solid #44413b;
}

.njs-sidebar-section:first-of-type{
    padding-top:0;
}

.njs-sidebar-heading{
    font-size:16px;
    line-height:1.4;
    font-weight:500;
    color:#000000;
    margin:0 0 8px;
    text-transform:uppercase;
    letter-spacing:.04em;
}

.njs-sidebar-section ul{
    list-style:none;
    margin:0;
    padding:0;
}

.njs-sidebar-section li{
    margin:.5em 14px 0 0;
    padding:0;
}

.njs-sidebar-section a{
    display:block;
    color:#000000;
    text-decoration:none;
    font-size:14px;
    line-height:1.35;
    padding:3px 0;
    transition:color .15s ease;
}

.njs-sidebar-section a:hover{
    color:#c9a45c;
}

.njs-main-menu a:first-child{
    font-weight:500;
}


/* =========================================================
   ADVICE TOGGLE
   ========================================================= */

.njs-advice-toggle{
    width:100%;
    padding:5px 0;
    border:0;
    background:transparent;
    text-align:left;
    font:inherit;
    font-size:14px;
    color:#000000;
    cursor:pointer;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.njs-advice-toggle:hover{
    color:#c9a45c;
}

.njs-advice-toggle span{
    font-size:13px;
    color:#c9a45c;
    transition:transform .2s;
}

.njs-advice-toggle[aria-expanded="true"] span{
    transform:rotate(180deg);
}

.njs-advice-panel{
    display:none;
    padding-top:5px;
}

.njs-advice-panel.is-open{
    display:block;
}

.njs-advice-panel a{
    font-size:14px;
    padding:3px 0;
}

button.njs-advice-toggle,
.njs-sidebar-section a{
    font-size:14px;
    font-weight:400;
}


/* =========================================================
   CONTACT CARD
   ========================================================= */

.njs-contact-card_sidebar{
    margin-top:25px;
    padding:14px 12px;
    border:1px solid #4b4842;
    border-radius:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.25);
    text-align:center;
    font-size:15px;
    line-height:1.55;
    color:#000000;
}

.njs-contact-title{
    font-size:13px;
    font-weight:700;
    margin-bottom:10px;
    color:#000000;
}

.njs-contact-card_sidebar strong{
    font-weight:700;
    font-size:15px;
    line-height:1.8;
    color:#000000;
}

.njs-contact-email{
    margin-top:8px;
    font-size:14px;
    font-weight:bold;
    word-break:break-word;
    color:#000000;
}

.njs-contact-card_sidebar hr{
    border:0;
    border-top:1px solid #4b4842;
    margin:10px 0;
}


/* =========================================================
   MOBILE HEADER
   Hidden everywhere by default
   ========================================================= */

.njs-mobile-header{
    display:none;
}

.njs-mobile-logo{
    display:none;
}


/* =========================================================
   SIDEBAR CONTROLS
   Hidden on desktop
   ========================================================= */

.njs-sidebar-close,
.njs-sidebar-toggle,
.njs-sidebar-backdrop{
    display:none;
}


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

@media (min-width:782px){

    body.njs-blogger-sidebar-active{
        padding-left:0!important;
        padding-right:0!important;
        overflow-x:hidden;
    }

    body.njs-blogger-sidebar-active #page,
    body.njs-blogger-sidebar-active .site,
    body.njs-blogger-sidebar-active .site-container,
    body.njs-blogger-sidebar-active .site-wrapper,
    body.njs-blogger-sidebar-active .wp-site-blocks{
        margin-left:var(--njs-sidebar-width,280px)!important;
        width:calc(100% - var(--njs-sidebar-width,280px))!important;
        max-width:none!important;
        box-sizing:border-box;
    }

    body.njs-blogger-sidebar-active .alignfull{
        max-width:100%;
    }

}


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

@media (max-width:781px){

    /* -----------------------------------------
       Page
       ----------------------------------------- */

    body,
    body.njs-blogger-sidebar-active{
        padding-left:0!important;
        padding-right:0!important;
        padding-top:70px!important;
    }

    body.njs-sidebar-open{
        overflow:hidden;
    }


    /* -----------------------------------------
       Mobile Header
       Logo LEFT / Menu RIGHT
       ----------------------------------------- */

    .njs-mobile-header{
        display:flex;
        position:fixed;
        top:0;
        left:0;
        right:0;
        width:100%;
        height:70px;
        padding:10px 14px;
        box-sizing:border-box;
        background:#ffffff;
        align-items:center;
        justify-content:space-between;
        z-index:999996;
    }


    /* -----------------------------------------
       Mobile Logo
       ----------------------------------------- */

    .njs-mobile-logo{
        display:flex;
        align-items:center;
        max-width:65%;
        margin:0;
        padding:0;
    }

    .njs-mobile-logo img{
        display:block;
        width:auto;
        height:auto;
        max-width:180px;
        max-height:50px;
    }


    /* -----------------------------------------
       Mobile Menu Button
       ----------------------------------------- */

    .njs-sidebar-toggle{
        display:block;
        position:static;
        flex-shrink:0;
        width:auto;
        border:1px solid #c9a45c;
        background:#242321;
        color:#ffffff;
        padding:8px 12px;
        border-radius:4px;
        cursor:pointer;
        font-size:12px;
        line-height:1.2;
        z-index:999998;
    }


    /* -----------------------------------------
       Mobile Sidebar
       ----------------------------------------- */

    .njs-blogger-sidebar{
        display:none;
        position:fixed;
        top:0;
        left:0;
        right:auto;
        width:min(82vw,320px);
        height:100vh;
        background:#ffffff;
        border-right:1px solid #3a3834;
        box-shadow:8px 0 24px rgba(0,0,0,.35);
        z-index:999999;
        overflow-y:auto;
    }

    body.njs-sidebar-open .njs-blogger-sidebar{
        display:block;
    }


    /* -----------------------------------------
       Sidebar Inner
       Leave room at top for close button
       ----------------------------------------- */

    .njs-blogger-inner{
        padding:60px 20px 20px;
        box-sizing:border-box;
    }


    /* -----------------------------------------
       Close Button
       ----------------------------------------- */

    .njs-sidebar-close{
        display:block!important;
        position:absolute;
        top:12px;
        right:12px;
        width:32px;
        height:32px;
        margin:0;
        padding:0;
        border:0;
        background:transparent;
        color:#000000;
        font-size:28px;
        line-height:32px;
        text-align:center;
        cursor:pointer;
        z-index:1000001;
    }

    .njs-sidebar-close:hover{
        color:#c9a45c;
    }


    /* -----------------------------------------
       Hide Menu Button when sidebar is open
       ----------------------------------------- */

    body.njs-sidebar-open .njs-sidebar-toggle{
        display:none;
    }


    /* -----------------------------------------
       Backdrop
       ----------------------------------------- */

    .njs-sidebar-backdrop{
        display:none;
        position:fixed;
        top:0;
        left:0;
        right:0;
        bottom:0;
        width:100%;
        height:100%;
        background:rgba(0,0,0,.55);
        z-index:999997;
    }

    body.njs-sidebar-open .njs-sidebar-backdrop{
        display:block;
    }


    /* -----------------------------------------
       Don't shift page for desktop sidebar
       ----------------------------------------- */

    body.njs-blogger-sidebar-active #page,
    body.njs-blogger-sidebar-active .site,
    body.njs-blogger-sidebar-active .site-container,
    body.njs-blogger-sidebar-active .site-wrapper,
    body.njs-blogger-sidebar-active .wp-site-blocks{
        margin-left:0!important;
        width:100%!important;
        max-width:none!important;
    }

}


/* =========================================================
   COLLAPSIBLE ARCHIVE
   ========================================================= */

.njs-archive-toggle{
    width:100%;
    padding:0;
    margin:0;
    border:0;
    background:transparent;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    text-align:left;
    color:#000000;
}

.njs-archive-toggle .njs-sidebar-heading{
    margin:0;
}

.njs-archive-arrow{
    color:#c9a45c;
    font-size:15px;
    line-height:1;
    transition:transform .2s ease;
}

.njs-archive-toggle[aria-expanded="true"] .njs-archive-arrow{
    transform:rotate(180deg);
}

.njs-archive-panel{
    padding-top:10px;
}

.njs-archive-panel[hidden]{
    display:none;
}


/* =========================================================
   ARCHIVE YEARS
   ========================================================= */

.njs-archive-year{
    margin:0 0 8px;
}

.njs-archive-year-link,
.njs-archive-month-link{
    display:block;
    text-decoration:none;
}

.njs-archive-year-link{
    color:#000000;
}

.njs-archive-year-link:hover,
.njs-archive-month-link:hover{
    color:#c9a45c;
}

.njs-archive-months{
    margin-left:18px;
}

.njs-archive-month-link{
    margin:0 0 8px;
    color:#000000;
}

.njs-archive-count{
    white-space:nowrap;
}


/* =========================================================
   OLDER YEARS
   ========================================================= */

.njs-archive-year.njs-older-year{
    display:none;
}


/* =========================================================
   SHOW MORE / SHOW LESS
   ========================================================= */

.njs-archive-more{
    display:block;
    width:100%;
    margin:10px 0 0;
    padding:8px 0 2px;
    border:0;
    border-top:1px solid #44413b;
    background:transparent;
    color:#c9a45c;
    text-align:left;
    font-family:inherit;
    font-size:11px;
    font-weight:600;
    letter-spacing:.04em;
    cursor:pointer;
}

.njs-archive-more:hover{
    color:#000000;
}

.njs-archive-more span{
    float:right;
    font-size:14px;
}


/* =========================================================
   ARCHIVE EXPANDED
   ========================================================= */

.njs-archive-panel.is-expanded
.njs-archive-year.njs-older-year{
    display:block;
}