/*
Theme Name: Mnemozine
Author: Mnemozine
Description: Tema da revista Mnemozine
Version: 1.0
Text Domain: mnemozine
*/

/*============================================================

    MNEMOZINE
    style.css

    Desenvolvido por:
    Caio Augusto

=============================================================*/

@font-face {
    font-family: "Nimbus Sans";
    src: url("../fonts/nimbus-sans-regular.woff2") format("woff2");
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: "Nimbus Sans";
    src: url("../fonts/nimbussant-italic.woff2") format("woff2");
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: "Nimbus Sans";
    src: url("../fonts/nimbus-sans-bold.woff2") format("woff2");
    font-weight: 700;
    font-style: bold;
}

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

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{

    background-color:#fff4cc;

    color:#222;

    font-family: "Nimbus Sans";

    line-height:1.6;

    overflow-x:hidden;

}

img{

    display:block;

    max-width:100%;

}

a{

    color:inherit;
    
    text-decoration:none;

}

button{

    border:none;

    background:none;

    cursor:pointer;

}

ul{

    list-style:none;

}


/*============================================================
    VARIÁVEIS
============================================================*/

:root{

    /* Identidade visual */

    --roxo:#4f2156;

    --roxo-claro:#6E55A3;

    --bege:#fff4cc;

    --bege-claro:#F7F2EC;

    --branco:#FFFFFF;

    --preto:#1F1F1F;

    --cinza:#666666;

    --borda:#D8CDC2;

    /* Espaçamentos */

    --container:1320px;

    --radius:10px;

    --transition:.30s;

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

}


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

.container{

    width:min(92%,1320px);

    margin:auto;

    margin-bottom: 5px;

}


/*============================================================
    TIPOGRAFIA
============================================================*/
h1,
h2,
h3,
h4{

    font-family: "Nimbus Sans";
    font-weight: 700; /* Bold */

}

p{

    font-size:1rem;

    color:#444;

}

.category{

    display:inline-block;

    margin-bottom:10px;

    font-family: "Nimbus Sans";

    font-style:italic;

    color:var(--bege);

    letter-spacing:.05em;

    font-size:.85rem;

}

.section-tag{

    display:inline-block;

    margin-bottom:20px;

    color:var(--roxo);

    font-family:"Nimbus Sans";

    text-transform:uppercase;

    letter-spacing:.08em;

    font-size:.85rem;

}


/*============================================================
    BOTÃO PADRÃO
============================================================*/

.button{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    margin-top:35px;

    padding:16px 34px;

    border-radius:40px;

    background:var(--roxo);

    color:white;

    font-family: "Nimbus Sans";

    transition:var(--transition);

}

.button:hover{

    background:var(--roxo-claro);

    transform:translateY(-3px);

}


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

.header{

    position:fixed;

    top:0;

    left:0;

    width:100%;

    height:95px;

    background:var(--roxo);

    backdrop-filter:blur(12px);

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

    z-index:2500;   /* era 1000 — precisa ser MAIOR que o .overlay (1500) */

}

.header .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

    height:100%;

}


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

.logo img{

    height:55px;

}

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

.header__actions{

    display:flex;

    align-items:center;

    gap:20px;

}

.menu-button{

    font-size:1.8rem;

    transition:.3s;

    color: var(--bege);

}

.menu-button:hover{

    color:var(--cinza);

}
/*============================================================
    MENU LATERAL
============================================================*/

.side__logo{

    display:flex;

    align-items:center;

    justify-content:center;

    gap:15px;

}

.side__logo-img{

    width:100px;
    padding-bottom: 30px;
    height:auto;

}

.side-menu{

    position:fixed;

    top:0;

    right:-420px;

    width:400px;

    height:100vh;

    background: var(--roxo);

    padding:50px;

    border-left:1px solid var(--borda);

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

    transition:.45s ease;

    z-index:2000;

}

.side-menu.active{

    right:0;

}

.side-menu ul{

    list-style:none;

    padding:0;

    margin:0;

}

.side-menu li{

    margin-bottom:20px;

}

.side-menu a{

    font-family:"Nimbus Sans";
    font-style: bold;

    font-size:1.2rem;

    color: var(--bege);

    text-decoration:none;

}

.side-menu a:hover{

    color: var(--bege);

}


/*============================================================
    BOTÃO FECHAR
============================================================*/

.side-menu__close{

    display:flex;

    justify-content:flex-end;

    width:100%;

    margin-bottom:50px;

    font-size:2rem;

    color: var(--bege);

    transition:.3s;

}

.side-menu__close:hover{

    color:var(--preto);

}


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

.side-menu ul{

    display:flex;

    flex-direction:column;

    gap:28px;

}

.side-menu li{

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

    padding-bottom:18px;

}

.side-menu a{

    font-family: "Nimbus Sans", sans-serif;
    font-style: italic;
    font-size:1.15rem;

    transition:.3s;

}

.side-menu a:hover{

    color:var(--bege-claro);

    padding-left:8px;

}


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

.overlay{

    position:fixed;

    inset:0;

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

    opacity:0;

    visibility:hidden;

    transition:.35s;

    z-index:1500;

}

.overlay.active{

    opacity:1;

    visibility:visible;

}


/*============================================================
    MAIN
============================================================*/

.home{

    padding-top:10px;

    background-color: var(--bege-claro);

}


/*============================================================
    GRID EDITORIAL
============================================================*/

.featured{

    display:grid;

    grid-template-columns:2fr 1fr;

    gap:24px;

    width:min(90%,1140px);

    margin:0 auto 10px auto;

}


/*============================================================
    MATÉRIA PRINCIPAL
============================================================*/

.featured__main{

    height:100%;

}

.featured__main figure{

    position:relative;

    height:75%;

    overflow:hidden;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

}

.featured__main figure:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


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

.featured__side{

    display:grid;

    grid-template-rows:repeat(4,1fr);

    gap:20px;

}

.featured__card{

    height:150px;

}


/*============================================================
    CARDS
============================================================*/

.featured__card figure{

    position:relative;

    overflow:hidden;

    height:100%;

    border-radius:10px;

    cursor:pointer;

    transition:.35s;

}

.featured__card figure:hover{

    transform:translateY(-8px);

    box-shadow:var(--shadow);

}


/*============================================================
    IMAGENS
============================================================*/

.featured figure img{

    width:100%;

    height:100%;

    object-fit:cover;

    transition:.5s;

    filter: brightness(70%);

}

.featured figure:hover img{

    transform:scale(1.05);

}


/*============================================================
    LEGENDA SOBRE A IMAGEM
============================================================*/

.featured figcaption{

    position:absolute;

    left:0;

    bottom:0;

    width:100%;

    padding:28px;

    background:linear-gradient(
        transparent,
        rgba(0,0,0,.82)
    );

}

/*============================================================
    CATEGORIA
============================================================*/

.featured .category{

    display:inline-block;

    margin-bottom:12px;

    color:var(--bege);

    font-size:.82rem;

    letter-spacing:.12em;

    text-transform:uppercase;

}


/*============================================================
    TÍTULO PRINCIPAL
============================================================*/

.featured__main h1{

    color:white;

    font-size:2.6rem;

    line-height:1.15;

}


/*============================================================
    TÍTULOS MENORES
============================================================*/

.featured__card h2{

    color:white;

    font-size:1.15rem;

    line-height:1.3;

}


/*============================================================
    LINHA ROXA (EFEITO EDITORIAL)
============================================================*/

.featured .category::after{

    content:"";

    display:block;

    width:45px;

    height:2px;

    margin-top:8px;

    background:var(--roxo-claro);

}


/*============================================================
    ANIMAÇÃO DO TÍTULO
============================================================*/

.featured h1,
.featured h2{

    transition:.3s;

}

.featured figure:hover h1,
.featured figure:hover h2{

    transform:translateY(-4px);

}
/*============================================================
    PRIMEIRA EDIÇÃO
============================================================*/

.edition{

    padding-top: 40px;

    padding-left: 80px;

    padding-bottom: 50px;

    background:var(--bege-claro);

}

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

.edition__container{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:80px;

}

/*============================================================
    IMAGEM
============================================================*/

.edition__image{

    overflow:hidden;
    border-radius:12px;

}

.edition__image img{

    width:70%;

    transition:.45s;

}

.edition__image:hover img{

    transform:scale(1.03);

}

/*============================================================
    TEXTO
============================================================*/

.edition__content h2{

    font-size:2.7rem;

    margin-bottom:30px;

    font-family: "Nimbus Sans", sans-serif;

    font-style: normal;

}

.edition__content p{

    font-size:1.05rem;

    color:#555;

    max-width:520px;

}

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

.footer{

    background: var(--roxo);

    color:white;

    padding-top:90px;

}

/*============================================================
    LINHA SUPERIOR
============================================================*/

.footer:before{

    content:"";

    display:block;

    width:100%;

    height:3px;

    background:var(--roxo-claro);

}

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

.footer > .container{
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    padding-top: 50px;
}

.footer__brand{
    grid-column: 1;
}

.footer__navigation{
    grid-column: 2;
    padding-right: 100px;
    text-align: left;
}

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

.footer__logo img{

    height:70px;

    margin-bottom:30px;

}

.footer__description{

    color:var(--bege);
    font-family: "Nimbus Sans", sans-serif;
    font-style: normal;
    max-width:320px;

}

/*============================================================
    TÍTULOS
============================================================*/

/*-instagram-*/

.footer__instagram{

    display:flex;

    align-items:center;

    gap:12px;

    margin-top:25px;

}

.footer__instagram img{

    width: 20px;

    height: 20px;

}

.footer__instagram a{

    color:var(--bege);

    text-decoration:none;
    font-family: "Nimbus Sans", sans-serif;
    font-style:italic;
    font-size: large;
    transition:.3s;

}

.footer__instagram a:hover{

    color:white;

}

.footer h3{

    color:var(--bege);
    font-family: "Nimbus Sans", sans-serif;
    font-style: normal;
    margin-bottom:25px;

}

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

.footer li{

    margin-bottom:14px;

}

.footer a{

    color:var(--bege);
    font-style: italic;
    transition:.3s;

}

.footer a:hover{

    color:var(--bege);

}

/*============================================================
    BARRA INFERIOR
============================================================*/

.footer__bottom{

    border-top:1px solid var(--roxo-claro);

    padding:28px 0;

}

.footer__bottom .container{

    display:flex;

    justify-content:space-between;

    align-items:center;

}

.footer__bottom nav{

    display:flex;

    gap:30px;

}

/*============================================================
    RESPONSIVO
============================================================*/

@media (max-width: 768px){

    .side-menu{
        width: 100%;
        right: -100%;
        padding: 35px 25px;
        border-left: none;
    }

    .side-menu.active{
        right: 0;
    }

    .side__logo-img{
        width: 80px;
    }

    .side-menu a{
        font-size: 1.05rem;
    }

    .side-menu__close{
        font-size: 1.8rem;
        margin-bottom: 35px;
    }

    .logo img{
        height: 45px;
    }

    .header__actions{
        gap: 15px;
    }

    .menu-button{
        font-size: 1.6rem;
    }

}

/*============================================================
    RESPONSIVO
============================================================*/

/*============================================================
    HOME RESPONSIVA
============================================================*/

@media (max-width: 768px){

    .featured{
        display: flex;
        flex-direction: column;
        gap: 30px;
    }

    .featured__main{
        width: 100%;
    }

    .featured__side{
        display: flex;
        flex-direction: column;
        gap: 25px;
        width: 100%;
    }

    .featured__card{
        width: 100%;
    }

    .featured__main img,
    .featured__card img{
        width: 100%;
        height: auto;
        display: block;
    }

    .featured__main h1{
        font-size: 2rem;
        line-height: 1.2;
    }

    .featured__card h2{
        font-size: 1.3rem;
        line-height: 1.3;
    }

    .featured__main figcaption,
    .featured__card figcaption{
        padding: 20px;
    }

}

@media (max-width: 768px){

    /*==========================
        PRIMEIRA EDIÇÃO
    ==========================*/

    .edition{
        padding: 40px 20px;
    }

    .edition__container{
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
    }

    .edition__image{
        display: flex;
        justify-content: center;
    }

    .edition__image img{
        width: 100%;
        max-width: 350px;
        height: auto;
    }

    .edition__content h2{
        font-size: 2rem;
    }

    .edition__content p{
        max-width: 100%;
        margin: 0 auto;
    }


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

    .footer > .container{
        grid-template-columns: 1fr;
        gap: 50px;
        text-align: center;
    }

    .footer__brand{
        grid-column: auto;
    }

    .footer__navigation{
        grid-column: auto;
        padding-right: 0;
        text-align: center;
    }

    .footer__logo img{
        margin: 0 auto 25px;
    }

    .footer__description{
        max-width: 100%;
        margin: 0 auto;
    }

    .footer__instagram{
        justify-content: center;
        
    }


    .footer__instagram img{

    width: 40px;

    height: 40px;

}

    .footer__bottom .container{
        flex-direction: column;
        gap: 20px;
        text-align: center;
    }

    .footer__bottom nav{
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    

}

/* --- BOTÃO DE TRADUÇÃO (Abaixo da Imagem) --- */
.article__translation {
    margin: 1.5rem 0 2.5rem 0;
    text-align: center;
}

.translation-button {
    display: inline-block;
    padding: 10px 20px;
    background-color: transparent;
    border: 1px solid currentColor;
    color: inherit;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.translation-button:hover {
    opacity: 0.7;
}

/* --- NAVEGAÇÃO ENTRE MATÉRIAS --- */
.article-navigation {
    width: 100%;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.article-navigation__container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    gap: 20px;
}

.article-navigation__slot {
    flex: 1;
    display: flex;
}

.article-navigation__slot--prev {
    justify-content: flex-start;
}

.article-navigation__slot--next {
    justify-content: flex-end;
}

/* Remoção rigorosa de bugs visuais (pontos, caixas e fundos) */
.article-navigation__link {
    display: inline-block !important;
    background: transparent !important;
    border: none !important;
    outline: none !important;
    box-shadow: none !important;
    text-decoration: none !important;
    color: inherit !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: opacity 0.2s ease;
}

.article-navigation__link::before,
.article-navigation__link::after {
    content: none !important;
}

.article-navigation__link:hover {
    opacity: 0.6;
}

/*============================================================
    BOTÃO DE TRADUÇÃO / IDIOMA (CENTRALIZADO E PROPORCIONAL)
============================================================*/

.translation-buttons {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 35px auto;
    padding: 0 15px;
    box-sizing: border-box;
}

.translation-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 24px; /* Tamanho proporcional e refinado */
    background: #f7f2eb;
    color: #222;
    border: 1px solid #d9d2c8;
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
    transition: background 0.3s ease, transform 0.3s ease;
}

.translation-button:hover {
    background: #ede3d6;
    transform: translateY(-2px);
    color: #222;
}


/*============================================================
    NAVEGAÇÃO ENTRE MATÉRIAS (CORREÇÃO DE CSS)
============================================================*/

.article-navigation {
    padding: 80px 0;
    border-top: 1px solid #d9d2c8;
    width: 100%;
    clear: both;
}

.article-navigation .container {
    display: flex;
    justify-content: space-between;
    gap: 40px;
    max-width: 1200px; /* Impede que os botões cole nas bordas da tela */
    margin: 0 auto;    /* Centraliza o bloco de navegação */
    padding: 0 20px;
    box-sizing: border-box;
}

.article-navigation a {
    flex: 1;
    display: block;                 /* Força o link a se comportar como caixa */
    padding: 30px;
    background: #f7f2eb !important; /* Força o fundo bege do botão */
    text-decoration: none;
    color: #222;
    transition: background 0.3s ease, transform 0.3s ease;
    box-sizing: border-box;
}

.article-navigation a:hover {
    background: #ede3d6 !important;
    transform: translateY(-3px);
}

.article-navigation span {
    display: block;
    margin-bottom: 12px;
    color: #7a6d67;
    font-size: .95rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.article-navigation strong {
    display: block;
    font-size: 1.35rem;
    font-weight: 400;
    line-height: 1.4;
}

.article-navigation__next {
    text-align: right;
}