/* RESET BÁSICO */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Arial, sans-serif;
}

body {
    background-color: #121212; /* fundo escuro */
    color: #ffffff; /* texto claro */
    min-height: 100vh; /* altura total da tela */
    overflow-x: hidden; /* evita scroll lateral em mobile */
    display: flex;
    flex-direction: column; /* Cabeçalho em cima, resto embaixo */
}

/* Tirar sublinhado dos links e cor padrão */
a {
    text-decoration: none;
    color: inherit;
}

/* CABEÇALHO PRINCIPAL */
.main-header {
    background-color: #1f1f1f;
    border-bottom: 1px solid #333;
    padding: 1rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

/* WRAPPER QUE CONTÉM A SIDEBAR E O CONTEÚDO (lado a lado em desktop) */
.wrapper {
    flex: 1;
    display: flex; /* sidebar + conteúdo */
}

/* SIDEBAR */
.sidebar {
    width: 250px;
    background-color: rgba(31, 31, 31, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 1rem;
    display: flex;
    flex-direction: column;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
    transition: width 0.3s, transform 0.3s;
    z-index: 1000;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.2);
}

.sidebar-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.sidebar-main {
    flex: 1;
}

/* Botão de recolher/expandir dentro da sidebar */
.toggle-button {
    position: absolute;
    top: 1rem;
    right: -15px; /* faz o botão "sair" um pouco pra fora da sidebar */
    background-color: #333;
    color: #fff;
    border: none;
    padding: 0.5rem;
    border-radius: 4px;
    cursor: pointer;
    transition: background-color 0.2s;
    z-index: 1000; /* fica acima de tudo */
}

.toggle-button:hover {
    background-color: #444;
}

/* Quando a sidebar estiver "colapsada" (para desktop) */
.sidebar.collapsed {
    width: 60px;
}

/* Esconde textos se colapsada (desktop) */
.sidebar.collapsed .sidebar-top h3,
.sidebar.collapsed .sections h3,
.sidebar.collapsed .sidebar-bottom,
.sidebar.collapsed .menu-item span,
.sidebar.collapsed .section-item,
.sidebar.collapsed .docs-arrow,
.sidebar.collapsed .projects-arrow {
    display: none;
}

/* Conteúdo da sidebar */
.sidebar-top {
    margin-bottom: 2rem;
}

.sidebar-top h3 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
    color: #ccc;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* Menu item com ícones Bootstrap e cores diferentes */
.menu-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 0;
    cursor: pointer;
    transition: all 0.2s;
    border-radius: 6px;
    margin: 2px 0;
    background-color: rgba(44, 44, 44, 0.3);
}

.menu-item:hover {
    background-color: rgba(44, 44, 44, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.menu-item i {
    font-size: 1.2rem;
    margin-right: 0.5rem;
}

.menu-item span {
    font-size: 0.95rem;
}

/* Cores diferenciadas para cada tópico */
.menu-item.docs i {
    color: #00BCD4; /* azul ciano */
}

.menu-item.home i {
    color: #4CAF50; /* verde */
}

.menu-item.sobre i {
    color: #FFA726; /* laranja */
}

.menu-item.servicos i {
    color: #2196F3; /* azul */
}

.menu-item.portfolio i {
    color: #9C27B0; /* roxo */
}

.menu-item.contato i {
    color: #0088cc; /* cor azul do Telegram */
}

.menu-item.github i {
    color: #fff;
}

.sections {
    margin-bottom: 1.5rem;
}

.sections h3 {
    font-size: 1rem;
    font-weight: normal;
    margin-bottom: 0.5rem;
    color: #ccc;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.section-item {
    padding: 0.3rem 0;
    cursor: pointer;
    color: #aaa;
    font-size: 0.9rem;
    transition: color 0.2s;
}

.section-item:hover {
    color: #fff;
}

/* Rodapé da Sidebar */
.sidebar-bottom {
    color: #aaa;
    font-size: 0.8rem;
    border-top: 1px solid #333;
    padding-top: 1rem;
    margin-top: auto;
}

.sidebar-bottom a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s;
}

.sidebar-bottom a:hover {
    color: #fff;
}

/* CONTEÚDO PRINCIPAL */
.main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 1rem;
    margin-left: 250px; /* mesma largura da sidebar */
    transition: margin-left 0.3s;
    position: relative;
    z-index: 2;
}

/* Ajuste para quando a sidebar estiver colapsada */
.main-content.sidebar-collapsed {
    margin-left: 60px;
}

/* Rodapé do conteúdo */
.main-footer {
    border-top: 1px solid #333;
    padding-top: 1rem;
    text-align: center;
    font-size: 0.8rem;
    color: #ccc;
}

.footer-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.visitor-counter {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.9em;
    color: #888;
    cursor: help;
}

.visitor-counter i {
    font-size: 1.1em;
}

#visitor-counter {
    font-weight: bold;
}

/* ========== RESPONSIVO (MOBILE) ========== */
@media (max-width: 768px) {
    .wrapper {
        position: relative;
    }

    /* SIDEBAR passa a ficar "sobreposta" ao conteúdo */
    .sidebar {
        position: fixed;
        top: 0;
        left: 0;
        height: 100%;
        transform: translateX(-100%);
        z-index: 999;
    }

    .sidebar.show {
        transform: translateX(0);
    }

    .sidebar.collapsed {
        transform: translateX(-100%);
    }

    .toggle-button {
        right: -15px;
        top: 1rem;
    }

    .main-content {
        margin-left: 0;
        width: 100%;
    }
}

/* Menu Docs e sua lista */
.menu-item.docs {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

/* Menu Projects e sua lista */
.menu-item.portfolio {
    position: relative;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
}

.docs-arrow, .projects-arrow {
    margin-left: auto;
    transition: transform 0.3s ease;
    font-size: 0.9rem;
    opacity: 0.7;
}

.menu-item.docs.expanded .docs-arrow,
.menu-item.portfolio.expanded .projects-arrow {
    transform: rotate(180deg);
    opacity: 1;
}

.docs-list, .projects-list {
    display: none;
    padding-left: 2.5rem;
    background-color: rgba(44, 44, 44, 0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 0 0 4px 4px;
    margin-top: 2px;
    transition: all 0.3s ease;
    user-select: none;
    -webkit-user-select: none;
}

.docs-list.show, .projects-list.show {
    display: block;
    animation: slideDown 0.3s ease;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.docs-item {
    padding: 0.5rem 0;
    color: #ccc;
    font-size: 0.75rem;
    transition: color 0.2s;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 190px;
    user-select: none;
    -webkit-user-select: none;
}

.docs-item:hover {
    color: #fff;
}

/* Estilo para o item ativo */
.docs-item.active {
    color: #00BCD4; /* Mesma cor do ícone do Docs */
    font-weight: 500;
    background-color: rgba(0, 188, 212, 0.1); /* Fundo sutil com a cor do ícone */
    border-radius: 4px;
    padding: 0.5rem 0.5rem;
    margin: 0 -0.5rem; /* Compensa o padding para alinhar com os outros itens */
}

/* Estilos para o submenu */
.menu-item.submenu {
    padding-left: 1.5rem;
}

.menu-item.submenu i {
    color: #00BCD4;
}

.submenu-arrow {
    margin-left: auto;
    transition: transform 0.3s;
}

.menu-item.submenu.expanded .submenu-arrow {
    transform: rotate(180deg);
}

.submenu-list {
    display: none;
    padding-left: 1rem;
    margin-top: 0.2rem;
}

.submenu-list.show {
    display: block;
    animation: slideDown 0.3s ease-out;
}

.menu-item.submenu span {
    font-size: 0.85rem;
}

/* Animação dos Corvos */
.bird {
    background-image: url('../images/bird-cells-new.svg');
    background-size: auto 100%;
    width: 88px;
    height: 125px;
    will-change: background-position;
    position: fixed;
    z-index: 1;
    pointer-events: none;
}

.bird-one {
    filter: brightness(0) invert(1); /* Branco */
    animation: fly-cycle 1s steps(10) infinite;
    animation-delay: -0.5s;
}

.bird-two {
    filter: brightness(0); /* Preto */
    animation: fly-cycle 0.9s steps(10) infinite;
    animation-delay: -0.75s;
}

.bird-three {
    filter: brightness(0) invert(1); /* Branco */
    animation: fly-cycle 1.25s steps(10) infinite;
    animation-delay: -0.25s;
}

.bird-four {
    filter: brightness(0); /* Preto */
    animation: fly-cycle 1.1s steps(10) infinite;
    animation-delay: -0.5s;
}

.bird-container {
    position: absolute;
    top: 10%;
    left: -3%;
    transform: scale(0) translateX(-10vw);
    will-change: transform;
    animation-name: fly-right-one;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}

.bird-container-one {
    animation-duration: 15s;
    animation-delay: 0;
}

.bird-container-two {
    animation-duration: 16s;
    animation-delay: 1s;
}

.bird-container-three {
    animation-duration: 14.6s;
    animation-delay: 9.5s;
}

.bird-container-four {
    animation-duration: 16s;
    animation-delay: 10.25s;
}

@keyframes fly-cycle {
    100% {
        background-position: -900px 0;
    }
}

@keyframes fly-right-one {
    0% {
        transform: scale(0.3) translateX(-10vw);
    }
    
    10% {
        transform: translateY(2vh) translateX(10vw) scale(0.4);
    }
    
    20% {
        transform: translateY(0vh) translateX(30vw) scale(0.5);
    }
    
    30% {
        transform: translateY(4vh) translateX(50vw) scale(0.6);
    }
    
    40% {
        transform: translateY(2vh) translateX(70vw) scale(0.6);
    }
    
    50% {
        transform: translateY(0vh) translateX(90vw) scale(0.6);
    }
    
    60% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
    
    100% {
        transform: translateY(0vh) translateX(110vw) scale(0.6);
    }
}