/* =========================================================
   HEADER & FOOTER
   SAGA STORIES CUSTOM THEME
   Premium Cinematic Comic Platform
========================================================= */

.site-logo .custom-logo{

    display:block !important;

    width:auto !important;

}


/* =========================================================
   HEADER
========================================================= */

.site-header{

    position:sticky;
    top:0;
    z-index:9999;

    width:100%;

    background:#0b0c11;

    backdrop-filter:blur(18px);

    border-bottom:
        1px solid rgba(255,255,255,.05);

    transition:
        all .35s ease;

}


/* =========================================================
   SHRINK STATE
========================================================= */

.site-header.is-scrolled{

    background:#0b0c11;

    box-shadow:
        0 10px 40px rgba(0,0,0,.35);

}


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

.site-header__inner{

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

    min-height:82px;

    gap:28px;

    transition:
        all .35s ease;

}


/* SHRINK */

.site-header.is-scrolled
.site-header__inner{

    min-height:68px;

}


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

.site-logo{

    display:flex;
    align-items:center;
    gap:14px;

    flex-shrink:0;

    color:#fff;

    transition:
        all .35s ease;

}


/* =========================================================
   CUSTOM LOGO LINK
========================================================= */

.site-logo .custom-logo-link{

    display:flex;
    align-items:center;

    flex-shrink:0;

}


/* =========================================================
   CUSTOM LOGO IMAGE
========================================================= */

.site-logo .custom-logo{

    width:auto;

    max-height:54px;

    height:auto;

    object-fit:contain;

    border-radius:14px;

    transition:
        max-height .35s ease,
        transform .35s ease;

}

/* =========================================================
   BRANDING
========================================================= */

.site-branding{

    display:flex;
    flex-direction:column;

    transition:
        all .35s ease;

}


/* =========================================================
   SITE TITLE
========================================================= */

.site-title{

    color:
        rgba(255,255,255,.96) !important;

    font-size:22px;
    font-weight:700;

    line-height:1;

    letter-spacing:-0.03em;

    text-shadow:
        0 2px 10px rgba(0,0,0,.25);

    transition:
        all .35s ease;

}


/* =========================================================
   SITE TAGLINE
========================================================= */

.site-tagline{

    margin-top:5px;

    color:
        rgba(255,255,255,.45);

    font-size:11px;
    font-weight:600;

    letter-spacing:.08em;

    text-transform:uppercase;

    transition:
        all .35s ease;

}


/* =========================================================
   SHRINK EFFECT
========================================================= */

.site-header.is-scrolled .site-logo{

    gap:12px;

}

.site-header.is-scrolled.site-logo .custom-logo{

    max-height:42px;

}

.site-header.is-scrolled .site-title{

    font-size:18px;

}

.site-header.is-scrolled .site-tagline{

    opacity:.65;

    transform:
        translateY(-1px);

}


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

.site-nav{

    margin-left:auto;
    margin-right:18px;

}

.site-menu{

    display:flex;
    align-items:center;
    gap:10px;

    list-style:none;

    margin:0;
    padding:0;

}

.site-menu li{
    position:relative;
}


/* =========================================================
   MENU LINKS
========================================================= */

.site-menu a{

    position:relative;

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

    min-height:44px;

    padding:0 16px;

    border-radius:14px;

    color:
        rgba(255,255,255,.72) !important;

    font-size:15px;
    font-weight:500;

    letter-spacing:.01em;

    transition:
        all .28s ease;

}


/* HOVER */

.site-menu a:hover{

    color:#fff !important;

    background:
        rgba(255,255,255,.05);

}


/* ACTIVE */

.site-menu .current-menu-item > a,
.site-menu .current_page_item > a{

    color:#fff !important;

    background:
        rgba(255,255,255,.07);

}


/* =========================================================
   SUB MENU
========================================================= */

.site-menu .sub-menu{

    position:absolute;

    top:calc(100% + 14px);
    left:0;

    min-width:220px;

    padding:10px;

    list-style:none;

    background:#11131a;

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

    border-radius:18px;

    opacity:0;
    visibility:hidden;

    transform:
        translateY(10px);

    transition:
        all .28s ease;

    box-shadow:
        0 18px 40px rgba(0,0,0,.35);

}

.site-menu li:hover > .sub-menu{

    opacity:1;
    visibility:visible;

    transform:
        translateY(0);

}

.site-menu .sub-menu a{

    justify-content:flex-start;

    min-height:42px;

    border-radius:12px;

}


/* =========================================================
   HEADER ACTIONS
========================================================= */

.site-header__actions{

    display:flex;
    align-items:center;
    gap:12px;

}

.header-login-btn,
.header-account-btn{

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

    height:52px;

    padding:0 22px;

    border-radius:16px;

    background:
        rgba(255,255,255,.04);

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

    color:#fff;

    font-size:.95rem;
    font-weight:700;

    transition:.25s ease;

    backdrop-filter:blur(12px);

}

.header-login-btn:hover,
.header-account-btn:hover{

    transform:translateY(-2px);

    color: #ffffff;

    background:
        rgba(170,90,255,.18);

    border-color:
        rgba(170,90,255,.35);

    box-shadow:
        0 10px 28px rgba(124,58,237,.22);

}

/* =========================================
   USER DROPDOWN
========================================= */

.header-user-menu{

    position:relative;

}


.header-user-toggle{

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

    height:58px;

    padding:0 24px;

    border:none;

    border-radius:18px;

    background:
        rgba(255,255,255,.04);

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

    color:#fff;

    font-size:.96rem;
    font-weight:700;

    cursor:pointer;

    transition:.25s ease;

    backdrop-filter:blur(12px);

}


.header-user-toggle:hover{

    transform:translateY(-2px);

    background:
        rgba(170,90,255,.16);

    border-color:
        rgba(170,90,255,.28);

    box-shadow:
        0 14px 34px rgba(124,58,237,.20);

}


/* =========================================
   DROPDOWN PANEL
========================================= */

.header-user-dropdown{

    position:absolute;

    top:calc(100% + 14px);

    right:0;

    min-width:220px;

    padding:12px;

    border-radius:22px;

    background:
        rgba(10,10,18,.96);

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

    box-shadow:
        0 24px 60px rgba(0,0,0,.38);

    opacity:0;
    visibility:hidden;

    transform:
        translateY(10px);

    transition:.25s ease;

    z-index:999;

    backdrop-filter:blur(18px);

}


/* SHOW DROPDOWN */

.header-user-menu:hover .header-user-dropdown{

    opacity:1;
    visibility:visible;

    transform:
        translateY(0);

}


/* =========================================
   DROPDOWN LINKS
========================================= */

.header-user-dropdown a{

    display:flex;
    align-items:center;

    min-height:52px;

    padding:0 18px;

    border-radius:14px;

    color:#fff;

    font-size:.95rem;
    font-weight:600;

    transition:.22s ease;

}

.header-user-dropdown a:hover{

    background:
        rgba(170,90,255,.12);

    color:#ffffff;

}


/* =========================================================
   ICON BUTTONS
========================================================= */

.site-icon-btn{

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

    width:46px;
    height:46px;

    border-radius:16px;

    background:
        rgba(255,255,255,.04);

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

    color:#fff;

    transition:
        all .28s ease;

}

.site-icon-btn:hover{

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   ACCOUNT BUTTON
========================================================= */

.site-profile-btn{

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

    min-height:46px;

    padding:0 22px;

    border-radius:999px;

    background:
        rgba(255,255,255,.05);

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

    color:#fff;

    font-size:14px;
    font-weight:600;

    transition:
        all .28s ease;

}

.site-profile-btn:hover{

    transform:
        translateY(-2px);

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   MOBILE MENU TOGGLE
========================================================= */

.site-menu-toggle{

    display:none;

    position:relative;

    width:44px;
    height:44px;

    border:none;
    outline:none;

    background:
        rgba(255,255,255,.04);

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

    border-radius:14px;

    cursor:pointer;

    transition:
        all .25s ease;

}

.site-menu-toggle:hover{

    background:
        rgba(255,255,255,.08);

}


/* =========================================================
   HAMBURGER LINES
========================================================= */

.site-menu-toggle span{

    position:absolute;

    left:11px;

    width:20px;
    height:2px;

    background:#fff;

    border-radius:999px;

    transition:
        all .25s ease;

}

.site-menu-toggle span:nth-child(1){
    top:14px;
}

.site-menu-toggle span:nth-child(2){
    top:20px;
}

.site-menu-toggle span:nth-child(3){
    top:26px;
}


/* =========================================================
   ACTIVE STATE
========================================================= */

.site-menu-toggle.active span:nth-child(1){

    transform:
        rotate(45deg);

    top:20px;

}

.site-menu-toggle.active span:nth-child(2){

    opacity:0;

}

.site-menu-toggle.active span:nth-child(3){

    transform:
        rotate(-45deg);

    top:20px;

}

/* =========================
   HEADER SEARCH
========================= */

.as-header-search {
    position: relative;
    display: flex;
    align-items: center;
}

/* Search Toggle Button */

/* =========================
   SEARCH TOGGLE
========================= */

.as-search-toggle {

    width: 48px;
    height: 48px;

    border-radius: 18px;

    border: 1px solid rgba(168, 85, 247, 0.18);

    background:
        linear-gradient(
            135deg,
            rgba(168, 85, 247, 0.12),
            rgba(255,255,255,0.03)
        );

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

    cursor: pointer;

    transition: all 0.3s ease;

    flex-shrink: 0;
}

/* SVG Icon */

.as-search-toggle svg {

    width: 22px;
    height: 22px;

    color: #ffffff;

    transition: all 0.3s ease;
}

/* Hover */

.as-search-toggle:hover {

    transform: translateY(-2px);

    border-color: rgba(168, 85, 247, 0.45);

    box-shadow:
        0 10px 25px rgba(168, 85, 247, 0.18);
}

.as-search-toggle:hover svg {
    color: #d8b4fe;
}

/* Active */

.as-search-toggle.active {

    background:
        linear-gradient(
            135deg,
            #9333ea,
            #6d28d9
        );
}

/* SVG Search Icon */

.as-search-toggle svg {

    width: 22px;
    height: 22px;

    color: #ffffff;

    flex-shrink: 0;
}

/* Search Form */

.as-search-form {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;

    width: 320px;

    background: #090909;
    border: 1px solid rgba(255,255,255,0.08);

    border-radius: 20px;

    padding: 12px;

    display: flex;
    align-items: center;
    gap: 10px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);

    transition: all 0.3s ease;

    z-index: 999;

    backdrop-filter: blur(18px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.45);
}

/* Active State */

.as-search-form.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Input */

/* Search Input */

.as-search-input {
    flex: 1;

    width: 100%;

    background: rgba(255,255,255,0.04);

    border: 1px solid rgba(255,255,255,0.08);

    height: 52px;

    border-radius: 14px;

    padding: 0 18px;

    color: #ffffff !important;

    font-size: 0.95rem;

    font-family: inherit;

    caret-color: #a855f7;
}

/* Placeholder */

.as-search-input::placeholder {
    color: rgba(255,255,255,0.45);
}

/* Focus */

.as-search-input:focus {
    outline: none;

    background: rgba(255,255,255,0.08);

    border-color: rgba(168, 85, 247, 0.4);

    color: #ffffff !important;
}

/* Chrome Autofill Fix */

.as-search-input:-webkit-autofill,
.as-search-input:-webkit-autofill:hover,
.as-search-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #ffffff !important;

    transition: background-color 9999s ease-in-out 0s;

    box-shadow: 0 0 0px 1000px #1a1a1a inset;
}

.as-search-input:focus {
    outline: none;
    background: rgba(255,255,255,0.07);
}

/* Submit */
.as-search-submit {

    width: 48px;
    height: 48px;

    border: none;

    border-radius: 18px;

    background: linear-gradient(
        135deg,
        #9333ea,
        #6d28d9
    );

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

    padding: 0;

    cursor: pointer;

    transition: all 0.3s ease;

    flex-shrink: 0;
}

.as-search-submit:hover {
    transform: scale(1.05);
}

.as-search-submit svg {

    width: 22px;
    height: 22px;

    color: white;

    position: relative;

    left: 1px; /* optical centering */

    top: 0.5px;

    flex-shrink: 0;
}


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

.mobile-menu{

    position:fixed;

    top:0;
    left:0;

    width:280px;
    height:100vh;

    background:#0b0c11;

    z-index:99999;

    transform:
        translateX(-100%);

    transition:
        transform .35s ease;

    border-right:
        1px solid rgba(255,255,255,.06);

    box-shadow:
        20px 0 60px rgba(0,0,0,.45);

}


/* ACTIVE */

.mobile-menu.active{

    transform:
        translateX(0);

}


/* =========================================================
   MOBILE MENU INNER
========================================================= */

.mobile-menu__inner{

    padding:
        110px 24px 40px;

}


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

.mobile-menu__nav{

    list-style:none;

    margin:0;
    padding:0;

}

.mobile-menu__nav li{

    margin-bottom:10px;

}

.mobile-menu__nav a{

    display:flex;
    align-items:center;

    min-height:52px;

    padding:0 18px;

    border-radius:14px;

    background:
        rgba(255,255,255,.03);

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

    color:
        rgba(255,255,255,.8);

    font-size:15px;
    font-weight:500;

    transition:
        all .25s ease;

}

.mobile-menu__nav a:hover{

    background:
        rgba(255,255,255,.06);

    color:#fff;

}


/* =========================================================
   OVERLAY
========================================================= */

.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:
        rgba(0,0,0,.45);

    backdrop-filter:
        blur(4px);

    opacity:0;
    visibility:hidden;

    z-index:9999;

    transition:
        all .3s ease;

}


/* ACTIVE */

.mobile-menu-overlay.active{

    opacity:1;
    visibility:visible;

}


/* =========================================================
   FOOTER
========================================================= */

.site-footer{

    position:relative;

    background:#0b0c11;

    border-top:
        1px solid rgba(255,255,255,.05);

    padding:
        100px 0 36px;

    overflow:hidden;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.03);

}


/* =========================================================
   FOOTER ATMOSPHERE
========================================================= */

.site-footer::before{

    content:"";

    position:absolute;

    inset:0;

    background:
        radial-gradient(
            circle at top center,
            rgba(123,63,242,.10),
            transparent 60%
        );

    pointer-events:none;

}


/* =========================================================
   FOOTER GRID
========================================================= */

.site-footer__grid{

    position:relative;
    z-index:2;

    display:grid;

    grid-template-columns:
        minmax(320px,1.6fr)
        1fr
        1fr
        1fr;

    gap:48px;

}


/* =========================================================
   FOOTER BRAND
========================================================= */

.site-footer__brand img{

    max-height:52px;

    margin-bottom:20px;

    border-radius:14px;

}

.site-footer__brand p{

    max-width:340px;

    color:
        rgba(255,255,255,.68);

    font-size:17px;

    line-height:1.9;

}


/* =========================================================
   FOOTER TITLES
========================================================= */

.site-footer__title{

    margin-bottom:24px;

    color:#fff;

    font-size:13px;
    font-weight:700;

    letter-spacing:.12em;

    text-transform:uppercase;

    opacity:.85;

}


/* =========================================================
   FOOTER MENU
========================================================= */

.site-footer__menu{

    list-style:none;

    margin:0;
    padding:0;

}

.site-footer__menu li{

    margin-bottom:14px;

}

.site-footer__menu a{

    display:inline-flex;

    color:
        rgba(255,255,255,.68) !important;

    font-size:15px;
    font-weight:500;

    transition:
        all .25s ease;

}

.site-footer__menu a:hover{

    color:#fff;

    transform:
        translateX(4px);

}


/* =========================================================
   SOCIALS
========================================================= */

.site-socials{

    display:flex;
    align-items:center;
    gap:12px;

    margin-top:24px;

}

.site-socials a{

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

    width:42px;
    height:42px;

    border-radius:14px;

    background:
        rgba(255,255,255,.04);

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

    color:#fff !important;

    transition:
        all .25s ease;

}

.site-socials a:hover{

    background:
        rgba(255,255,255,.08);

    transform:
        translateY(-2px);

}


/* =========================================================
   COPYRIGHT
========================================================= */

.site-footer__bottom{

    position:relative;
    z-index:2;

    margin-top:90px;
    padding-top:28px;

    border-top:
        1px solid rgba(255,255,255,.05);

    text-align:center;

    color:
        rgba(255,255,255,.36);

    font-size:14px;


}

/* =========================================================
   FOOTER LOGO SYSTEM
========================================================= */

.site-footer__logo{

    display:flex;
    align-items:center;
    gap:14px;

    margin-bottom:24px;

}

.site-footer__logo .custom-logo{

    max-height:44px;

    width:auto;

}


/* =========================================================
   FOOTER BRAND TITLE
========================================================= */

.site-footer__title-brand{

    color:#fff;

    font-size:26px;
    font-weight:700;

    letter-spacing:-0.03em;

}


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

@media(max-width:992px){

    .site-footer__grid{

        grid-template-columns:
            1fr 1fr;

        gap:40px;

    }

}


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

@media(max-width:768px){

    .site-menu-toggle{

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

        order:2;

        width:46px;
        height:46px;

        border-radius:16px;

        margin-left:4px;

    }

    .header-user-menu{

        order:3;

        justify-self:end;

    }

    .header-user-toggle{

        height:46px;

        padding:0 16px;

        border-radius:16px;

        font-size:.9rem;

        white-space:nowrap;

        max-width:160px;

        overflow:hidden;

        text-overflow:ellipsis;

    }

    .header-login-btn{

        height:46px;

        padding:0 16px;

        border-radius:16px;

        font-size:.9rem;

    }

    .as-header-search{

        order:4;

    }

    .as-search-toggle{

        width:46px;
        height:46px;

        border-radius:16px;

    }

    .as-search-toggle svg{

        width:20px;
        height:20px;

    }

    /* =========================
       SEARCH FORM
    ========================= */

    .as-search-form{

        width:260px;

        right:0;

        top:calc(100% + 12px);

        padding:10px;

        border-radius:18px;

    }

    .as-search-input{

        height:48px;

        font-size:.92rem;

    }

    .as-search-submit{

        width:46px;
        height:46px;

        border-radius:14px;

    }


    /* =========================
       USER DROPDOWN
    ========================= */

    .header-user-dropdown{

        right:-20px;

        min-width:200px;

        border-radius:18px;

        padding:10px;

    }

    .header-user-dropdown a{

        min-height:48px;

        font-size:.92rem;

    }

    .site-nav{
        display:none;
    }

    .site-header__inner{

        min-height:72px;

        display:grid;

        grid-template-columns:auto 1fr auto auto;

        align-items:center;

        gap:12px;

    }

    .site-logo{

        gap:0;

        flex-shrink:0;

    }

    .site-logo img{

        max-height:42px;

        width:auto;
    }

    .site-branding{
        display:none;
    }

    .site-nav{
        display:none;
    }

    .site-header__actions{

        display:contents;

    }

    .site-icon-btn{

        width:42px;
        height:42px;

        border-radius:14px;

    }

    .site-profile-btn{

        display:none;

    }

    .mobile-menu{

        width:86%;

    }

    .site-footer{

        padding:
            70px 0 28px;

    }

    .site-footer__grid{

        grid-template-columns:
            1fr;

        gap:40px;

    }

    .site-footer__bottom{

        margin-top:56px;

    }

}