@charset "utf-8";
/* Estilos gerais */


.custom-navbar {
    background-color: #eed34e; /* Cor de fundo da navbar, ocupando toda a largura */
    padding: 0; /* Remove o padding da navbar para que a div interna controle isso */
}

/* Nova classe para controlar a largura máxima do conteúdo da navbar */
.navbar-content-wrapper {
    max-width: 1200px; /* Largura máxima desejada para o conteúdo */
    margin: 0 auto; /* Centraliza o conteúdo horizontalmente */
    width: 100%; /* Garante que o wrapper ocupe 100% da largura disponível até max-width */
    padding: 0.0rem 1rem !important; /* Padding interno para o conteúdo */
}

.logo-area {
    /*background-color: #00ff00; /* verde logo (para debug) */
    padding: 0.0rem;
    display: flex;
    align-items: center;
}

.toy-logo-area {
    /*background-color: #00ffe5; /* verde água logo toy (para debug) */
    padding: 0.0rem;
    display: flex;
    align-items: center;
}

.title-area {
    /*background-color: #ff4dcc; /* rosa título (para debug) */
	
    padding: 0.2rem;
}

.title-text {
	font-family: 'Skrapbook', sans-serif;
    font-size: 1.5rem;
    font-weight: bold;
    color: black;
    white-space: nowrap;
	margin-bottom: 0.3rem;
	padding-top: 0.0rem;
}

.links-text {
    /*background-color: #2c4db7; /* azul links (para debug) */
    width: 100%;
    text-align: center;
    gap: 0.6rem; /* Espaço entre os links, funciona com d-flex */
}

/* Estilo para os links da navegação horizontal (dentro do .links-text), do Offcanvas e dos itens de dropdown */
.links-text .nav-link,
.offcanvas-body .nav-link,
.dropdown-item { /* Adicionado .dropdown-item aqui */
	font-size: 0.85rem;
    color: #444;
    font-weight: bolder;
    text-decoration: none;
    white-space: nowrap;

    /* Estilo da "salsicha" */
    background-color: transparent; /* Fundo transparente no normal */
    border-radius: 50px; /* Borda bem arredondada para forma de salsicha */
    padding: 0.4rem 0.8rem; /* Padding para dar espaço ao redor do texto */
    display: inline-block; /* Para que padding e border-radius funcionem bem */
    transition: background-color 0.1s ease; /* Transição suave na mudança de cor */
}


/* Efeito de hover */
.links-text .nav-link:hover,
.offcanvas-body .nav-link:hover,
.dropdown-item:hover { /* Adicionado .dropdown-item:hover aqui */
    background-color: rgba(205, 205, 205, 0.7); /* Branco semi-transparente no hover */
    color: black; /* Garante que a cor do texto continue preta no hover */
}
.links-text .nav-link:hover { /* Adicionado .dropdown-item:hover aqui */
    background-color: rgba(255, 255, 255, 0.7); /* Branco semi-transparente no hover */
    color: black; /* Garante que a cor do texto continue preta no hover */
}

/* Ajustes específicos para o dropdown-menu para não herdar os paddings e bordas extras do .nav-link */
.dropdown-menu {
    border-radius: 0rem; /* Padrão do Bootstrap, ajuste se quiser mais arredondado */
    padding: .5rem 1rem; /* Padding padrão do Bootstrap para dropdowns */
    border: 1px solid rgba(0, 0, 0, .15); /* Borda padrão */
    /*box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175); /* Sombra padrão */
}

/* Remove o padding extra dos li nos dropdown-menu para os itens ficarem mais justos */
.dropdown-menu li {
    padding: 0; /* Remove qualquer padding padrão de li */
}


.logo-img {
    max-height: 60px;
    height: auto;
    width: auto;
}

/* Responsividade - Ajustes */
@media (max-width: 991.98px) {
    .navbar-content-wrapper {
        padding: 0.5rem 1rem;
    }

    .navbar-content-wrapper {
        /* Em telas menores, o d-flex justify-content-between do wrapper já alinha as logos nas pontas */
        /* Então, não precisamos de mais ajustes aqui, a não ser que queira mudar o padding */
    }

    .logo-area, .toy-logo-area {
        /* Ajuste o tamanho das logos para telas menores se for muito grande */
        /* max-height: 40px; */ /* Exemplo */
    }

    .navbar-brand {
        margin: 0; /* Remover margens automáticas para evitar conflito com space-between */
    }
}

/* Estilo para marcar o item de menu atual (ativo) */
.links-text .nav-link.active{
    background-color: rgba(255, 255, 255, 1); /* Branco semi-transparente no hover */
    color: black; /* Garante que a cor do texto continue preta no hover */
}

.offcanvas-body .nav-link.active,
.dropdown-item.active {
    background-color: rgba(205, 205, 205, 1); /* Branco semi-transparente no hover */
    color: black; /* Garante que a cor do texto continue preta no hover */
}

.navbar-toggler-icon {
	background-color: transparent ;
	border: none;
    display: inline-block;
    width: 1.8em; /* Ajuste o tamanho conforme necessário (ex: 30px / tamanho da fonte base) */
    height: 2.0em; /* Ajuste o tamanho conforme necessário */
    vertical-align: middle;
    content: "";
    background: no-repeat center center;
    background-size: contain; /* Garante que o SVG caiba dentro do tamanho definido */
    /* Remove a imagem de fundo SVG padrão (se houver) */
    background-image: none !important;
    /* Adiciona sua imagem SVG personalizada */
    background-image: url('../img/hamburger-menu-reto.svg') !important;
}
.navbar-toggler, .navbar-toggler:focus, .navbar-toggler:active, .navbar-toggler-iconr:focus {
    outline: none !important;
    box-shadow: none;
    border: 0;
}
/* Estilos para divisórias dentro do corpo principal do Offcanvas */
.offcanvas-body .navbar-nav hr.dropdown-divider {
    height: 1px; /* Garante que a linha tenha uma altura visível */
    border: none; /* Remove qualquer borda padrão do HR */
    background-color: rgba(0, 0, 0, 0.15); /* Cor da linha (um cinza sutil) */
    margin: 0.5rem 0; /* Adiciona espaçamento acima e abaixo da linha */
    padding: 0; /* Garante que não haja padding que a "esconda" */
    width: 100%; /* Garante que a linha ocupe toda a largura disponível */
    /* Se a linha estiver muito para a esquerda ou direita, pode ser necessário ajustar as margens */
    margin-left: 0;
    margin-right: 0;
}

/* Opcional: Para divisórias entre grupos muito distintos, pode-se aumentar a margem */
/* .offcanvas-body .navbar-nav .nav-item:nth-child(algum-numero) + li > hr.dropdown-divider {
    margin-top: 1rem;
    margin-bottom: 1rem;
} */