/* ==========================================================
   HEADER - ALVORADA EDITORA
   Desktop First
   ========================================================== */

:root{

    --header-height:72px;
    --header-height-mobile:64px;

    --header-max-width:1300px;

    --header-bg:rgba(255,255,255,.92);
    --header-border:#ececec;

    --text:#222;
    --text-light:#666;

    --primary:#6f42c1;
    --primary-hover:#5d36a5;

    --badge:#e53935;

    --transition:.28s cubic-bezier(.4,0,.2,1);

}


/* ==========================================================
   RESET LOCAL
   ========================================================== */

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


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

.topbar{

    position:sticky;
    top:0;
    left:0;
    width:100%;

    height:var(--header-height);

    z-index:1200;

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

    background:var(--header-bg);

    border-bottom:1px solid var(--header-border);

    transition:
        background var(--transition),
        box-shadow var(--transition),
        border-color var(--transition);

}

.topbar.scrolled{

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

    box-shadow:
        0 8px 30px rgba(0,0,0,.05);

}


/* ==========================================================
   CONTAINER
   ========================================================== */

.container-topbar{

    max-width:var(--header-max-width);

    margin:auto;

    height:100%;

    padding:0 24px;

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

    gap:30px;

}


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

.logo{

    display:flex;
    align-items:center;

    text-decoration:none;

    flex-shrink:0;

}

.logo-img{

    display:block;

    width:auto;

    height:58px;

    transition:transform .25s ease;

}

.logo:hover .logo-img{

    transform:scale(1.02);

}


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

.nav-links{

    flex:1;

    display:flex;

    justify-content:center;

    align-items:center;

    gap:34px;

}


.nav-menu-items{

    display:flex;

    align-items:center;

    gap:34px;

}


.nav-links a{

    position:relative;

    display:inline-flex;

    align-items:center;

    justify-content:center;

    text-decoration:none;

    color:var(--text);

    font-size:.98rem;

    font-weight:500;

    letter-spacing:.2px;

    padding:8px 0;

    transition:
        color var(--transition);

}


/* ==========================================================
   LINHA ANIMADA
   ========================================================== */

.nav-links a::after{

    content:"";

    position:absolute;

    left:0;
    bottom:-8px;

    width:100%;
    height:2px;

    background:var(--primary);

    transform:scaleX(0);

    transform-origin:center;

    transition:transform .25s ease;

}

.nav-links a:hover{

    color:var(--primary);

}

.nav-links a:hover::after{

    transform:scaleX(1);

}


/* ==========================================================
   LINK ATIVO
   ========================================================== */

.nav-links a.active,
.nav-links a[aria-current="page"]{

    color:var(--primary);

    font-weight:600;

}

.nav-links a.active::after,
.nav-links a[aria-current="page"]::after{

    transform:scaleX(1);

}


/* ==========================================================
   DIREITA
   ========================================================== */

.right-icons{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    gap:10px;

    flex-shrink:0;

}


/* ==========================================================
   BOTÕES
   ========================================================== */

.icon-btn{

    position:relative;

    width:42px;
    height:42px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    text-decoration:none;

    color:var(--text);

    transition:
        background var(--transition),
        color var(--transition),
        transform var(--transition);

}

.icon-btn i{

    font-size:1.12rem;

}

.icon-btn:hover{

    background:#f6f4fb;

    color:var(--primary);

    transform:translateY(-2px);

}


/* ==========================================================
   BADGE
   ========================================================== */

.carrinho-btn{

    position:relative;

}

.carrinho-count{

    position:absolute;

    top:-4px;
    right:-5px;

    min-width:21px;
    height:21px;

    padding:0 6px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:999px;

    background:var(--badge);

    color:#fff;

    font-size:.72rem;

    font-weight:700;

    line-height:1;

    border:2px solid #fff;

    box-shadow:
        0 4px 10px rgba(0,0,0,.18);

    animation:badgePulse 2.8s infinite;

}


/* ==========================================================
   ANIMAÇÃO BADGE
   ========================================================== */

@keyframes badgePulse{

    0%{

        transform:scale(1);

    }

    8%{

        transform:scale(1.15);

    }

    16%{

        transform:scale(1);

    }

    100%{

        transform:scale(1);

    }

}


/* ==========================================================
   HAMBURGUER
   ========================================================== */

.hamburger{

    display:none;

    width:44px;
    height:44px;

    border:none;

    background:transparent;

    cursor:pointer;

    border-radius:10px;

    align-items:center;

    justify-content:center;

    flex-direction:column;

    gap:5px;

    transition:background var(--transition);

}

.hamburger:hover{

    background:#f5f5f5;

}

.hamburger span{

    width:22px;

    height:2px;

    border-radius:20px;

    background:#222;

    transition:all .25s ease;

}


/* ==========================================================
   MOBILE ELEMENTOS (ESCONDIDOS NO DESKTOP)
   ========================================================== */

.mobile-menu-header,
.mobile-social-area,
.overlay,
.close-menu{

    display:none;

}


/* ==========================================================
   FOCUS ACCESSIBILITY
   ========================================================== */

.topbar a:focus-visible,
.topbar button:focus-visible{

    outline:2px solid var(--primary);

    outline-offset:3px;

    border-radius:8px;

}


/* ==========================================================
   PEQUENOS AJUSTES
   ========================================================== */

.account-btn{

    margin-left:2px;

}

.carrinho-btn{

    margin-left:2px;

}

.nav-links a,
.icon-btn,
.hamburger{

    -webkit-tap-highlight-color:transparent;

}

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

@media (max-width: 991px){

    .topbar{
        height:var(--header-height-mobile);
    }

    .container-topbar{

        position:relative;

        padding:0 18px;

        gap:12px;

    }

    /* ---------------------------
       HAMBURGUER
    ---------------------------- */

    .hamburger{
        display:flex;
        z-index:1203;
        flex-shrink:0;
    }

    /* ---------------------------
       LOGO CENTRADO
    ---------------------------- */

    .logo{

        position:absolute;

        left:50%;
        transform:translateX(-50%);

        z-index:1201;

    }

    .logo-img{

        height:46px;

    }

    /* ---------------------------
       ÍCONES DIREITA
    ---------------------------- */

    .right-icons{

        margin-left:auto;

        gap:6px;

        z-index:1202;

    }

    .icon-btn{

        width:40px;
        height:40px;

    }

    /* ---------------------------
       MENU LATERAL
    ---------------------------- */

    .nav-links{

        position:fixed;

        top:0;
        left:0;

        width:320px;
        max-width:88vw;

        height:100vh;

        background:#fff;

        display:flex;
        flex-direction:column;
        justify-content:flex-start;
        align-items:stretch;

        gap:0;

        padding:0;

        overflow-y:auto;

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

        transform:translateX(-105%);

        transition:transform .35s cubic-bezier(.4,0,.2,1);

        z-index:1205;

        flex:none;

    }

    .nav-links.open{

        transform:translateX(0);

    }

    /* ---------------------------
       HEADER MENU
    ---------------------------- */

    .mobile-menu-header{

        display:flex;

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

        min-height:82px;

        padding:0 28px;

        border-bottom:1px solid #efefef;

    }

    .mobile-menu-title{

        font-size:1.2rem;

        font-weight:700;

        color:#222;

    }

    .close-menu{

        display:flex;

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

        width:42px;
        height:42px;

        border:none;

        background:#f6f6f6;

        border-radius:50%;

        cursor:pointer;

        transition:.25s;

    }

    .close-menu:hover{

        background:var(--primary);

        color:#fff;

    }

    .close-menu i{

        font-size:1rem;

    }

    /* ---------------------------
       LINKS
    ---------------------------- */

    .nav-menu-items{

        display:flex;

        flex-direction:column;

        gap:0;

        padding:18px 0;

    }

    .nav-menu-items a{

        width:100%;

        display:flex;

        align-items:center;

        padding:18px 30px;

        font-size:1rem;

        font-weight:500;

        color:#222;

        border-bottom:1px solid #f3f3f3;

    }

    .nav-menu-items a::after{

        display:none;

    }

    .nav-menu-items a:hover{

        background:#f8f6fc;

        color:var(--primary);

    }

    .nav-menu-items a.active{

        background:#f4effd;

        color:var(--primary);

        font-weight:600;

    }

    /* ---------------------------
       REDES SOCIAIS
    ---------------------------- */

    .mobile-social-area{

        display:block;

        margin-top:auto;

        padding:30px;

        border-top:1px solid #efefef;

    }

    .mobile-social-title{

        display:block;

        margin-bottom:18px;

        font-size:.95rem;

        font-weight:700;

        color:#666;

    }

    .mobile-social-links{

        display:flex;

        flex-wrap:wrap;

        gap:12px;

    }

    .mobile-social-icon{

        width:44px;
        height:44px;

        display:flex;

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

        border-radius:50%;

        text-decoration:none;

        color:#555;

        background:#f5f5f5;

        transition:all .25s ease;

    }

    .mobile-social-icon i{

        font-size:1rem;

    }

    .mobile-social-icon:hover{

        background:var(--primary);

        color:#fff;

        transform:translateY(-2px);

    }

    /* ---------------------------
       OVERLAY
    ---------------------------- */

    .overlay{

        position:fixed;

        inset:0;

        display:block;

        opacity:0;

        visibility:hidden;

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

        backdrop-filter:blur(2px);

        -webkit-backdrop-filter:blur(2px);

        transition:
            opacity .30s ease,
            visibility .30s ease;

        z-index:1204;

    }

    .overlay.show{

        opacity:1;

        visibility:visible;

    }

}


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

@media (max-width:768px){

    .logo-img{

        height:42px;

    }

    .container-topbar{

        padding:0 16px;

    }

}


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

@media (max-width:480px){

    .container-topbar{

        padding:0 14px;

    }

    .logo-img{

        height:38px;

    }

    .nav-links{

        width:100%;

        max-width:100%;

    }

    .mobile-menu-header{

        padding:0 22px;

    }

    .nav-menu-items a{

        padding:17px 24px;

        font-size:.96rem;

    }

    .mobile-social-area{

        padding:24px;

    }

}


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

@media (min-width:1400px){

    .container-topbar{

        max-width:1380px;

    }

}


/* ==========================================================
   REDUÇÃO DE MOVIMENTO
   ========================================================== */

@media (prefers-reduced-motion:reduce){

    *,
    *::before,
    *::after{

        animation:none !important;
        transition:none !important;
        scroll-behavior:auto !important;

    }

}


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

.nav-links::-webkit-scrollbar{

    width:6px;

}

.nav-links::-webkit-scrollbar-thumb{

    background:#d5d5d5;

    border-radius:20px;

}

.nav-links::-webkit-scrollbar-track{

    background:transparent;

}


/* ==========================================================
   SEGURANÇA VISUAL
   ========================================================== */

img{

    max-width:100%;

}

.logo-img{

    object-fit:contain;

}

.nav-links,
.right-icons{

    min-width:0;

}

.container-topbar{

    overflow:visible;

}