/* ============================================================================
   HEADER, NAV & FOOTER CUSTOM STYLES
   - Personalização de cores e layout para header, abas, navegação lateral e rodapé
   - Sem alteração de valores ou comportamentos originais do tema MkDocs Material
============================================================================ */

/* --- 1. HEADER BACKGROUND --- */
/* Define a cor de fundo do cabeçalho */
.md-header {
  background-color: #CEE6F2 !important;
}

/* --- 2. LOGO IMAGE --- */
/* Ajusta cor, altura e margin-bottom do logo */
.md-header__button.md-logo img {
  color: #CEE6F2 !important;
  height: 75px;
  margin-bottom: 0;
}
/* Posiciona o botão de logo à esquerda */
.md-header__button.md-logo {
  margin-right: auto;
}

/* --- 3. HEADER TITLE --- */
/* Oculta o título padrão */
.md-header__title {
  display: none !important;
}
/* Redefine tipografia e cor do título */
.md-header__title {
  font-size: 1.4rem !important;
  color: #241164 !important;
}

/* --- 4. TABS --- */
/* Fundo das abas */
.md-tabs {
  background-color: #CEE6F2 !important;
}
/* Cor dos links das abas */
.md-tabs__link {
  color: #241164 !important;
}
/* Espaçamento e peso da fonte dos itens */
.md-tabs__item {
  padding: 0 20px;
  font-weight: 500;
}
/* Destaque do item ativo */
.md-tabs__item--active {
  border-bottom: 3px solid #9c27b0;
}

/* --- 5. NAV LINKS --- */
/* Define peso de fonte das opções de navegação */
.md-nav__link {
  font-weight: 500;
}

/* --- 6. TRANSITIONS --- */
/* Aplica transições suaves em header, abas e links */
.md-header,
.md-tabs,
.md-nav__link,
.md-tabs__item {
  transition: all 0.3s ease;
}

/* --- 7. HEADER LAYOUT --- */
/* Força layout flex no container interno do header */
.md-header__inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* Grupo de elementos à direita do header */
.header-right-group {
  display: flex;
  align-items:end;
  margin-left: auto;
}

/* --- 8. SEARCH & OPTIONS --- */
/* Remove margens do campo de busca */
.md-search {
  margin: 0;
}
/* Remove margens de opções extras do header */
.md-header__option {
  margin: 0 !important;
}

/* --- 9. FOOTER --- */
/* Define cor de fundo e texto do rodapé */
.md-footer {
  background-color: #CEE6F2 !important;
  color: #241164 !important;
}
/* Ajusta cor dos links do rodapé */
.md-footer a {
  color: #241164 !important;
}
/* Garante contraste em elementos SVG do rodapé (ex: ícones) */
.md-footer svg {
  fill: #241164 !important;
}


/* Botão do menu hambúrguer (controla a cor herdada pelo SVG) */
.md-header__button.md-icon {
  color: #241164 !important;
}

/* Garante que o ícone use a cor acima, mesmo se o tema definir outra */
.md-header__button.md-icon svg {
  fill: currentColor !important;
  stroke: currentColor !important; /* cobre ícones desenhados com stroke */
}

/* Ícone/link de repositório no header */
.md-header__source,
.md-header__source .md-source,
.md-header__source .md-source svg {
  color: #241164 !important;
  fill: #241164 !important;
}

/* ============================================================================
   MOBILE NAV CUSTOMIZATION
   - Personaliza o título do menu mobile e o botão "View source"
   - Aplica fundo #CEE6F2 e texto branco
============================================================================ */

@media screen and (max-width: 76.2344em) {
  /* Título do menu (hambúrguer) */
  .md-nav--primary .md-nav__title[for=__drawer] {
    background-color: #CEE6F2 !important;
    color: #241164 !important;
  }

  /* Botão "View source" no menu mobile */
  .md-nav__source {
    background-color: #CEE6F2 !important;
    color: #241164 !important;
  }

  /* (Opcional) Links ou ícones internos podem precisar de cor branca também */
  .md-nav__source a,
  .md-nav__source svg {
    color: #241164 !important;
    fill: #241164 !important;
  }
  /* Define cor de fundo e texto do título lateral no modo mobile */
  .md-nav__title {
    background-color: #CEE6F2 !important;
    color: #241164 !important;
  }
}

/* ============================================================================
   FONT-FACE & GLOBAL FONT
   - Declara fontes 'Lexend' nos pesos 400 (Regular), 500 (Medium) e 700 (Bold)
   - Usa formato WOFF2 para melhor performance na web
   - Aplica 'Lexend' como fonte padrão global em html e body
============================================================================ */

/* --- 1. @font-face: REGULAR (400) --- */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
}

/* --- 2. @font-face: MEDIUM (500) --- */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
}

/* --- 3. @font-face: BOLD (700) --- */
@font-face {
  font-family: 'Lexend';
  src: url('../fonts/Lexend-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
}

/* --- 4. APLICAÇÃO GLOBAL --- */
/* Define 'Lexend' como fonte padrão para todo o documento */
html,
body {
  font-family: 'Lexend', sans-serif;
}

/* ============================================================================
   MOBILE DRAWER BACKGROUND COLOR
   - Altera apenas a cor de fundo da sidebar (drawer) em dispositivos móveis
   - Breakpoint: telas com largura ≤767px
============================================================================ */

@media screen and (max-width: 767px) {
  .md-sidebar.md-sidebar--primary,
  .md-drawer--primary {
    background-color: #0A5C67 !important;
  }
}

/* ============================================================================
   COMPACT CARD GRID & CARD STYLES
   - Layout responsivo em grid para cards, com espaçamento uniforme.
   - Cards limpos, compactos, com truncamento de descrição em 3 linhas.
   - Fundo, bordas, sombra e transições mantêm um visual leve.
============================================================================ */

/* --- GRID RESPONSIVO DE CARDS --- */
.cards-grid {
  display: grid;
  gap: 1rem;                               /* espaçamento entre cards */
  grid-template-columns: repeat(
    auto-fit,
    minmax(220px, 1fr)                     /* cards adaptáveis, mínimo 220px */
  );
  margin-top: 1.5rem;                      /* espaço acima do grid */
}

/* --- CARD PADRÃO --- */
.card {
  background: #CEE6F2 !important;          /* fundo igual ao navbar */
  color: #241164 !important;               /* texto branco para contraste */
  border-radius: 0.375rem;                 /* cantos levemente arredondados */
  overflow: hidden;                        /* esconde transbordamentos */
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);   /* sombra sutil */
  transition: transform 0.2s ease,
              box-shadow 0.2s ease;         /* animações suaves */
}
.card:hover {
  transform: translateY(-4px);             /* eleva levemente no hover */
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);    /* sombra mais intensa */
}

/* --- IMAGEM DO CARD --- */
.card-image img {
  width: 100%;                             /* ocupa toda a largura do card */
  height: 140px;                           /* altura fixa para uniformidade */
  object-fit: cover;                       /* recorta e cobre a área */
}

/* --- ÍCONE SOBREPOSTO --- */
.card-image-wrapper {
  position: relative;                      /* para posicionar o ícone */
}
.card-icon {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 50%);         /* centraliza e sobrepõe */
  width: 40px;
  height: 40px;
  border-radius: 50%;                      /* círculo */
  background: #241164;                     /* fundo branco para destaque */
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.1);    /* sombra leve */
}
.card-icon img {
  width: 24px;                             /* ícone proporcional */
  height: 24px;
}

/* --- CORPO DO CARD --- */
.card-body {
  flex: 1;                                 /* ocupa o espaço restante */
  display: flex;
  flex-direction: column;
  padding: 0.5rem 0.75rem 0.75rem;         /* padding reduzido */
  text-align: center;                      /* centraliza o texto */
}

/* --- TÍTULO DO CARD --- */
.card-title {
  margin-bottom: 0.5rem;                   /* separação do conteúdo abaixo */
}
.card-title a {
  font-size: 0.9rem;                       /* tamanho de fonte ajustado */
  line-height: 1.2;
  color: #241164 !important;               /* título em branco */
  text-decoration: none;                   /* sem sublinhado padrão */
}
.card-title a:hover {
  text-decoration: underline;              /* sublinhado suave no hover */
  text-decoration-color: rgba(255,255,255,0.7);
}

/* --- DESCRIÇÃO DO CARD --- */
.card-description {
  display: -webkit-box;
  -webkit-line-clamp: 3;                   /* truncamento em até 3 linhas */
  -webkit-box-orient: vertical;
  overflow: hidden;                        /* esconde o texto excedente */
  font-size: 0.8rem;                       /* fonte pequena e legível */
  color: rgba(255,255,255,0.85) !important;/* branco semi-transparente */
  margin: 0 0 0.5rem;
  line-height: 1.4;
  text-align: center;
}

/* --- DATA DO CARD --- */
.card-date {
  margin-top: auto;                        /* empurra para o rodapé */
  font-size: 0.7rem;                       /* fonte bem pequena */
  color: rgba(255,255,255,0.7) !important; /* branco translúcido */
  display: flex;
  align-items: center;
  justify-content: center;                 /* centra horizontalmente */
}