/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */


/* Coloque isso no topo da seção da Galeria no seu CSS */
.tree-index summary, 
.tree-index details summary {
    list-style: none !important;
    list-style-type: none !important;
}

/* Força a remoção da seta no Firefox */
.tree-index summary::marker,
.tree-index details summary::marker {
    content: "" !important;
    display: none !important;
}

/*============================================================================================================*/
/*Cria um container que contém o conteúdo dentro de uma determinada caixa*/
.container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px; /* O preenchimento que estava no body vem para cá */
}

/*============================================================================================================*/
/*Configurações de corpo, cor de fundo, cor das letras.*/

body {
  background-color: #070931;
  color: #F4F4F6;
  font-family: 'Verdana', sans-serif;
  margin: 0;   /* Essencial: remove a moldura padrão do navegador */
  padding: 0;  /* MUDANÇA AQUI: O body não pode ter padding */
}

/* Garante que o texto de todas as tags herde a cor do body */
* {
  color: inherit;
}

h1 {
  border-bottom: 2px solid #F4F4F6;
}

a {
  color: #4da6ff;
  text-decoration: none; /* Sugestão: deixa o visual mais limpo */
}

a:hover {
  text-decoration: underline;
}



/*============================================================================================================*/
/*configura o menu de navegação, do contrário seria uma lista feia com bolinhas*/


/* Remove as bolinhas da lista e zera o recuo */
#menu-principal ul {
    list-style-type: none;
    padding: 0;
    display: flex; /* Coloca os itens lado a lado */
    gap: 6px;     /* Cria um espaço uniforme entre eles */
}

/* Estilo para cada item do menu */
#menu-principal a {
    font-weight: bold;
    text-transform: uppercase;
    padding: 5px 10px;
    border: 1px solid transparent; /* Reserva espaço para a borda */
    transition: 0.3s; /* Suaviza a transição de cor */
}


/*============================================================================================================*/
/*estilizando breadcrumbs*/

.breadcrumb-diretorio {
    font-family: 'Courier New', Courier, monospace; /* Fonte de código */
    background-color: rgba(255, 255, 255, 0.05);
    padding: 10px;
    border-radius: 4px;
    font-size: 0.85em;
    color: #4da6ff;
    margin-bottom: 30px;
}

.breadcrumb-diretorio a {
    color: #4da6ff;
    text-decoration: none;
}

.breadcrumb-diretorio a:hover {
    text-decoration: underline;
    background-color: rgba(77, 166, 255, 0.1);
}

/* O separador > entre os caminhos */
.breadcrumb-diretorio span.separador {
    color: #F4F4F6;
    margin: 0 8px;
}


/*============================================================================================================*/
/*Estilizando a árvore de diretórios da galeria*/

.tree-index {
    font-family: 'Courier New', monospace;
    padding: 20px;
}

/* O "Risco" vertical que sai da categoria pai */
.tree-index details {
    border-left: 1px solid rgba(77, 166, 255, 0.4); /* Linha azul clara */
    margin-left: 15px; /* Cria a indentação (espaço à direita) */
    padding-left: 10px; /* Afasta o texto da linha */
}

/* Remove a linha do nível raiz para não ficar sobrando na lateral */
.tree-index > details {
    border-left: none;
    margin-left: 0;
}

summary {
    list-style: none; /* Remove a seta padrão */
    cursor: pointer;
    color: #4da6ff;
    padding: 5px 0;
    font-weight: bold;
}

summary::-webkit-details-marker {
    display: none; /* Reset para browsers Webkit */
}

/* Flecha customizada que gira */
summary::before {
    content: "▶ ";
    display: inline-block;
    transition: transform 0.2s;
    font-size: 0.8em;
}

details[open] > summary::before {
    transform: rotate(90deg);
}

/* Itens finais (Links) */
.tree-index ul {
    list-style: none;
    padding-left: 15px;
}

.tree-index li::before {
    content: "— "; /* Um pequeno traço para os arquivos */
}
    

/*============================================================================================================*/
/*formatar fotos do invertebrados*/
    
    
    /* Grid de exibição das fotos */
.galeria-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 30px;
}

/* Card individual */
.card-entomologia {
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(77, 166, 255, 0.2);
    margin: 0;
    padding: 10px;
    transition: transform 0.2s, border-color 0.2s;
}

.card-entomologia:hover {
    border-color: #4da6ff;
    transform: translateY(-5px); /* Efeito sutil de elevação */
}

.card-entomologia img {
    width: 100%;
    height: 200px;
    object-fit: cover; /* Garante que fotos de tamanhos diferentes se alinhem */
    border-bottom: 1px solid rgba(77, 166, 255, 0.2);
    margin-bottom: 10px;
}

.card-entomologia h3 {
    font-size: 1.1em;
    color: #4da6ff;
    margin: 5px 0;
}

.card-entomologia ul {
    list-style: none !important; /* Remove bolinhas da lista interna [cite: 25] */
    padding: 0 !important;
    font-size: 0.85em;
    font-family: 'Courier New', monospace; /* Estética de relatório [cite: 14] */
}

.card-entomologia li {
    margin-bottom: 4px;
}
    color: rgba(77, 166, 255, 0.4);
}