/* ------------------------- Valquíria leão @2025 ---------------- Arte3d --- */
/*                * *  >  necessita style-geral.css  <  * *                   */

.menu-toggle {                  /* Oculta o checkbox */
    display: none;
}
.menu-linha{                    /* Oculta para monitores grandes */
    display: none;
}
.menu-icon {                    /* define o "hamburger" */
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    position: absolute;         /* absolute ou, fixed para sempre visível */
    z-index: 110;               /* Garante que fique por cima do menu */
    top: 1rem;
    left: 2rem;

    width: 2.5rem;
    height: 2.5rem;
    background-color: transparent;  /* fundo do icone */

    cursor: pointer;
    padding: 0.5rem;
    border-radius: 0;           /* <- para "limpar" o label genérico */
    filter: none;               /* <- para não estragar o hamburger */
    /* transition: transform 0.3s ease-in-out; */
}
.menu-icon span {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--corCZ100);
    transition: all 0.5s ease;  /* transição do hamburger */
}
.main-menu {                    /* Estilo do menu principal */
    position: fixed;            /* fixed garante o menu sempre acima */
    z-index: 100;
    top: 0;
    left: -250px;               /* Inicia escondido */
    width:13rem;
    height: 100%;

    color: var(--corCZ100);
    background-color: hsla(0, 0%, 10%, 0.9);
    transition: left 0.6s ease;
    padding-top: 4rem;          /* Para os itens não cobrirem o ícone */
}
.main-menu ul {
    list-style: none;           /* remove marcadores laterais */
    padding: 0;
    margin: 0;
}
.main-menu ul li a {            /* itens do menu (texto) */
    display: block;
    font-size: 1.5rem;
    color: var(--corCZ90);
    text-decoration: none;
    padding: 1rem 2rem;         /* espaça itens do menu flutuante */
}
.main-menu ul li a:hover {
    color: hsl(0, 80%, 70%);
}

/* Quando o checkbox é marcado, exibe o menu */
.menu-toggle:checked ~ .main-menu {
    left: 0;                    /* Exibe o menu */
}

/* Efeito no ícone quando o menu está aberto */
.menu-toggle:checked ~ .menu-icon span:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
    background-color: var(--corCZ90);     /* cor icone quando aberto */
}
.menu-toggle:checked ~ .menu-icon span:nth-child(2) {
    opacity: 0;
}
.menu-toggle:checked ~ .menu-icon span:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
    background-color: var(--corCZ90);     /* cor icone quando aberto */
}


@media only screen and (min-width:810px) { /* tablet e desktop */

            /* Menu hamburger vira menu de linha: min. 810px  */

.menu-icon, .menu-toggle {      /* Esconde o hamburger e o checkbox */
    display: none;
}

            /* Transforma .main-menu em menu de linha sobre a .nav-barra */
.main-menu {
    display: flex;                  /* menu vira container flex */
    justify-content: flex-end;      /* Alinha os links à direita */
    align-items: flex-end;          /* joga itens para parte de baixo */
    position:relative;              /* Em relação ao header  ?? */

    background-color: transparent;  /* Remove o fundo escuro do mobile */

    width: 100%;                    /* Ocupa 100% da largura do header */
    left: 0;                        /* IMPORTANTE: limpa menu escondido */
    padding-right: 1.25rem;         /* afasta texto da borda direita */
    padding-top: 0;                 /* IMP: Não há mais ícone para cobrir */
    
    filter: none;
    transition: none;               /* Remove a transição de slide */
}
.main-menu ul {
    display: flex;              /* Faz a lista ser flexível */
}
.main-menu ul li {
    margin-right: 1rem;         /* espaçamento entre os itens */
    margin-left: 0;             /* Zera qualquer margin-left anterior */
}
.main-menu ul li:last-child {
    margin-right: 0;            /* Remove a margem extra do último item */
}
.main-menu ul li a {
    display: block;             /* garante o padding clicável */
    font-size: 1.2rem;          /* tamanho da FONTE para caber na barra */
    color: var(--corCZ90);      /* A mesma cor do nav a:link padrão */
    white-space: nowrap;        /* impede que os links quebrem linha */
    padding-inline: 0.5rem;     /* espaça itens do menu lateralmente */
    padding-bottom: 0.5rem;     /* sobe o texto pra fora do fundo */
}
.main-menu ul li a:hover {
    font-weight: bold;
}
}                               /* FIM de laptops e desktop */