/* Extra CSS para ajustar tamanho do logo e outros componentes estéticos importantes da documentação*/

/* Alvo múltiplos seletores para cobrir diferentes versões/layouts do tema Material */
.md-logo img,
.md-header-nav__logo img,
.md-header__logo img,
.md-header .md-logo img,
.md-nav__logo img,
.header-logo img {
  height: 56px !important; /* aumenta um pouco */
  width: auto !important;
}

/* Se o logo estiver dentro de um link no cabeçalho */
.md-header__title img,
.md-header__title .md-logo img {
  height: 56px !important;
  width: auto !important;
}

/* Ajuste para mobile se necessário */
@media (max-width: 640px) {
  .md-logo img,
  .md-nav__logo img {
    height: 44px !important;
  }
}

/* Cor do cabeçalho superior igual ao azul claro do logo (aproximado) */
/* Aplica só ao header/topo; mantém sidebar e conteúdo com texto em preto */
.md-header,
.md-header__inner,
.md-top-nav,
.md-header-nav,
.md-header--primary,
.md-header--primary .md-header__inner {
  background-color: #4DA6FF !important; /* azul claro aproximado */
}

/* Texto / links *apenas* dentro do cabeçalho em branco para contraste */
.md-header a,
.md-header .md-nav__title,
.md-header .md-nav__icon,
.md-header .md-logo,
.md-header__title,
.md-header__title a {
  color: #ffffff !important;
}

/* Hover states apenas no header */
.md-header a:hover {
  opacity: 0.9;
}

/* Manter sidebar e conteúdo com texto em preto (padrão) */
.md-sidebar,
.md-sidebar--primary,
.md-sidebar a,
.md-sidebar .md-nav__title,
.md-main__inner,
.md-content {
  color: #000000 !important;
  background-color: transparent !important;
}


/* Estiliza a linha horizontal (HR) */
hr {
    /* Define a cor de fundo/borda como preto. 
       Use um código hexadecimal para cor específica. */
    background-color: #000000;
    
    /* Remove a borda padrão do navegador (se houver) */
    border: none;
    
    /* Define a altura (espessura) da linha */
    height: 1px; /* Você pode ajustar este valor (ex: 3px, 5px, etc.) */
    
    /* Garante que a linha ocupe toda a largura do conteúdo */
    width: 100%;
    
    /* Adiciona uma margem para separação */
    margin: 30px 0; 
}

/* Oculta a barra lateral direita (Table of Contents) */
.md-sidebar--secondary {
    display: none;
}

/* Expande a área de conteúdo principal para ocupar o espaço liberado */
.md-content {
    /* O valor exato pode variar, mas este geralmente funciona para maximizar a largura */
    padding-right: 0 !important; 
    width: 100%;
    max-width: 100%;
}

@media screen and (min-width: 1220px) {
    /* Esta regra é aplicada SOMENTE quando a tela tem 1220px ou mais (Desktop/PC) */
    
    /* 1. Container Interno (Ajusta a largura máxima e centraliza) */
    .md-content__inner {
        /* Define a largura máxima que você deseja para o conteúdo (ex: 1200px) */
        max-width: 1200px; 
        
        /* Centraliza o container de conteúdo horizontalmente na área disponível */
        margin-left: auto;
        margin-right: auto;
        
        /* Adiciona a margem para afastar o conteúdo da barra lateral esquerda */
        padding-left: 5rem; 
    }

    /* 2. Container Externo (Garante que a centralização funcione) */
    .md-content {
        /* Zera o padding lateral para que o .md-content__inner possa usar 100% da largura */
        padding-left: 0;
        padding-right: 0;
    }
}