/* ============================================
   CSS CUSTOMIZADO - INSTITUTO IGARAPÉ
   Baseado no Manual de Marca 2020
   ============================================ */

/* Light mode - Cores principais do Instituto Igarapé */
[data-md-color-scheme=default] {
    /* Cores primárias baseadas no manual de marca */
    --md-accent-fg-color:           #6C150E; /* Cor bordô do manual */
    --md-default-bg-color:          #ffffff; /* Fundo branco limpo */
    --md-default-fg-color:          #111111; /* Preto 93% do manual */
    --md-default-fg-color--light:   #2a2a2a; /* Tom mais suave para H1 */
    --md-default-fg-color--lighter: #555555; /* Ícones da página */
    --md-default-fg-color--lightest:#888888; /* Ícones mais suaves */
    
    /* Header e navegação com identidade Igarapé */
    --md-primary-fg-color:          #6C150E; /* Cor bordô para header */
    --md-primary-fg-color--dark:    #5a1109; /* Tom mais escuro para mobile */
    --md-primary-bg-color:          #ffffff; /* Texto do header em branco */
    
    /* Área de código com estilo técnico clean */
    --md-code-bg-color:             #f8f8f8; /* Fundo de código mais clean */
    --md-code-fg-color:             #111111; /* Texto de código em preto */
    --md-code-hl-color:             #fff3cd; /* Destaque suave */
    --md-code-hl-number-color:      #6C150E; /* Números em bordô */
    --md-code-hl-special-color:     #8b1e3f; /* Especiais em tom derivado */
    --md-code-hl-function-color:    #5a4fcf; /* Funções em azul técnico */
    --md-code-hl-constant-color:    #6366f1; /* Constantes em índigo */
    --md-code-hl-keyword-color:     #2563eb; /* Palavras-chave em azul */
    --md-code-hl-string-color:      #16a34a; /* Strings em verde */
    --md-code-hl-name-color:        #6C150E; /* Nomes em bordô */
    --md-code-hl-operator-color:    #6b7280; /* Operadores neutros */
    --md-code-hl-punctuation-color: #6b7280; /* Pontuação neutra */
    --md-code-hl-comment-color:     #9ca3af; /* Comentários suaves */
    --md-code-hl-generic-color:     #6b7280; /* Genéricos neutros */
    --md-code-hl-variable-color:    #111111; /* Variáveis em preto */
    
    /* Links e footer com identidade Igarapé */
    --md-typeset-a-color:           #6C150E; /* Links em bordô */
    --md-typeset-a-font-weight: bold;
    --md-footer-bg-color:           #6C150E; /* Footer em bordô */
    --md-footer-fg-color:           #ffffff; /* Texto do footer em branco */
    --md-footer-fg-color--light:    #e5e7eb; /* Texto e ícones do footer */
    --md-footer-fg-color--lighter:  #9ca3af; /* Texto secundário do footer */
}

/* Dark mode - Adaptação elegante das cores Igarapé */
[data-md-color-scheme=slate] {
    /* Fundo escuro com acento bordô */
    --md-accent-fg-color:           #e11d48; /* Bordô mais vibrante para contraste */
    --md-default-bg-color:          #0f172a; /* Fundo escuro profundo */
    --md-default-fg-color:          #f8fafc; /* Texto claro */
    --md-default-fg-color--light:   #f1f5f9; /* H1 em branco suave */
    --md-default-fg-color--lighter: #cbd5e1; /* Ícones claros */
    --md-default-fg-color--lightest:#94a3b8; /* Ícones secundários */
    
    /* Header escuro com acento bordô */
    --md-primary-fg-color:          #e11d48; /* Bordô vibrante para header */
    --md-primary-fg-color--dark:    #be185d; /* Tom mais intenso */
    --md-primary-bg-color:          #f8fafc; /* Texto do header */
    
    /* Código com fundo escuro técnico */
    --md-code-bg-color:             #1e293b; /* Fundo de código escuro */
    --md-code-fg-color:             #e2e8f0; /* Texto de código claro */
    --md-code-hl-color:             #fbbf24; /* Destaque amarelo */
    --md-code-hl-number-color:      #f87171; /* Números em vermelho suave */
    --md-code-hl-special-color:     #ec4899; /* Especiais em rosa */
    --md-code-hl-function-color:    #a78bfa; /* Funções em roxo */
    --md-code-hl-constant-color:    #818cf8; /* Constantes em índigo */
    --md-code-hl-keyword-color:     #60a5fa; /* Palavras-chave em azul */
    --md-code-hl-string-color:      #34d399; /* Strings em verde */
    --md-code-hl-name-color:        #f472b6; /* Nomes em rosa */
    --md-code-hl-operator-color:    #9ca3af; /* Operadores neutros */
    --md-code-hl-punctuation-color: #9ca3af; /* Pontuação neutra */
    --md-code-hl-comment-color:     #6b7280; /* Comentários discretos */
    --md-code-hl-generic-color:     #9ca3af; /* Genéricos neutros */
    --md-code-hl-variable-color:    #e2e8f0; /* Variáveis claras */
    
    /* Links e footer escuros */
    --md-typeset-a-color:           #f472b6; /* Links em rosa vibrante */
    --md-footer-bg-color:           #1e293b; /* Footer escuro */
    --md-footer-fg-color:           #f8fafc; /* Texto do footer */
    --md-footer-fg-color--light:    #cbd5e1; /* Texto secundário */
    --md-footer-fg-color--lighter:  #94a3b8; /* Texto terciário */
}

/* ============================================
   CUSTOMIZAÇÕES ESPECÍFICAS INSTITUTO IGARAPÉ
   ============================================ */

/* Tipografia baseada no manual (Helvetica Neue, Arial, Roboto) */
:root {
    --md-text-font: "Roboto", "Helvetica Neue", "Arial", sans-serif;
    --md-code-font: "Roboto Mono", "SFMono-Regular", "Consolas", "Liberation Mono", monospace;
}

/* ============================================
   CUSTOMIZAÇÃO DO LOGO - TAMANHO AUMENTADO
   ============================================ */

/* Logo no header - tamanho aumentado */
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
    width: 230px !important;  /* Tamanho padrão é ~24px */
    height: 80px !important;
    max-width: none !important;
    max-height: none !important;
}

/* Container do logo com mais espaço */
.md-header__button.md-logo {
    margin: 0.2rem 0.4rem !important;
    padding: 0.2rem !important;
}


/* Ajustar altura do header para acomodar logo maior */
.md-header {
    min-height: 3.2rem !important;
}

/* Garantir que o logo não seja cortado em telas menores */
@media screen and (max-width: 76.1875em) {
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        width: 40px !important;
        height: 40px !important;
    }
}

/* Para telas muito pequenas (mobile) */
@media screen and (max-width: 44.9375em) {
    .md-header__button.md-logo img,
    .md-header__button.md-logo svg {
        width: 36px !important;
        height: 36px !important;
    }
    
    .md-header {
        min-height: 2.8rem !important;
    }
}


/* Estilo para destacar seções importantes */
.md-typeset .admonition.tip {
    border-color: #6C150E;
}

.md-typeset .admonition.tip > .admonition-title {
    background-color: rgba(108, 21, 14, 0.1);
    border-color: #6C150E;
}

/* Customização para tabelas com identidade Igarapé */
.md-typeset table:not([class]) {
    border: 1px solid #e5e7eb;
}

.md-typeset table:not([class]) th {
    background-color: rgba(108, 21, 14, 0.05);
    border-bottom: 2px solid #6C150E;
    color: #111111;
    font-weight: 600;
}

/* Estilo para código inline */
.md-typeset code {
    background-color: rgba(108, 21, 14, 0.05);
    color: #6C150E;
    border: 1px solid rgba(108, 21, 14, 0.15);
}

/* Botões e elementos interativos */
.md-typeset .md-button {
    border: 1px solid #6C150E;
    color: #6C150E;
}

.md-typeset .md-button:hover {
    background-color: #6C150E;
    color: #ffffff;
}

.md-typeset .md-button--primary {
    background-color: #6C150E;
    border-color: #6C150E;
    color: #ffffff;
}

/* Headers com estilo Igarapé */
.md-typeset h1 {
    color: #111111;
    border-bottom: 3px solid #6C150E;
    padding-bottom: 0.5rem;
}

.md-typeset h2 {
    color: #111111;
    border-bottom: 1px solid rgba(108, 21, 14, 0.3);
    padding-bottom: 0.3rem;
}

/* Navegação lateral */
.md-nav__title {
    color: #8d1b13;
    font-weight: 600;
}

.md-nav__link--active {
    color: #d6190c;
    font-weight: 600;
}

/* Destaque para elementos importantes */
.md-typeset mark {
    background-color: rgba(108, 21, 14, 0.15);
    color: #111111;
}

/* Customização para modo escuro */
[data-md-color-scheme="slate"] .md-typeset h1,
[data-md-color-scheme="slate"] .md-typeset h2 {
    color: #f8fafc;
}

[data-md-color-scheme="slate"] .md-typeset code {
    background-color: rgba(241, 245, 249, 0.1);
    color: #f472b6;
    border-color: rgba(244, 114, 182, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset table:not([class]) th {
    background-color: rgba(244, 114, 182, 0.1);
    border-bottom-color: #f472b6;
    color: #f8fafc;
}

/* ============================================
   RESPONSIVIDADE E ACESSIBILIDADE
   ============================================ */

/* Garantir contraste adequado */
@media (prefers-contrast: high) {
    :root {
        --md-default-fg-color: #000000;
        --md-accent-fg-color: #6C150E;
    }
}

/* Redução de movimento para acessibilidade */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Print styles mantendo identidade */
@media print {
    .md-typeset {
        color: #000000;
    }
    
    .md-typeset h1,
    .md-typeset h2,
    .md-typeset h3 {
        color: #000000;
        border-color: #6C150E;
    }
    
    .md-typeset code {
        background-color: #f5f5f5;
        color: #000000;
        border: 1px solid #cccccc;
    }
}

/* ============================================
   CSS TAMANHO PADRÃO PARA IMAGENS
   Instituto Igarapé - Documentação
   ============================================ */

/* ============================================
   IMAGENS - TAMANHO PADRÃO E RESPONSIVO
   ============================================ */

/* Tamanho padrão para todas as imagens no conteúdo */
.md-typeset img {
    max-width: 80%; /* Ocupa 80% da largura disponível */
    height: auto; /* Mantém proporção */
    margin: 1rem auto; /* Centraliza com margem vertical */
    display: block; /* Força quebra de linha */
    border-radius: 8px; /* Bordas arredondadas */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* Sombra sutil */
    border: 1px solid rgba(108, 21, 14, 0.1); /* Borda sutil na cor institucional */
}

/* ============================================
   CLASSES ESPECÍFICAS PARA DIFERENTES TAMANHOS
   ============================================ */

/* Imagem pequena - 40% da tela */
.md-typeset img.small,
.md-typeset .img-small img {
    max-width: 40%;
}

/* Imagem média - 60% da tela (entre padrão e pequena) */
.md-typeset img.medium,
.md-typeset .img-medium img {
    max-width: 60%;
}

/* Imagem grande - 100% da tela */
.md-typeset img.large,
.md-typeset .img-large img {
    max-width: 100%;
}

/* Imagem extra grande - pode exceder container em telas grandes */
.md-typeset img.xlarge,
.md-typeset .img-xlarge img {
    max-width: 120%;
    margin-left: -10%; /* Compensa o excesso */
}

/* Imagem inline - fica na linha do texto */
.md-typeset img.inline,
.md-typeset .img-inline img {
    display: inline-block;
    margin: 0 0.5rem;
    max-width: 200px;
    vertical-align: middle;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
}

/* ============================================
   IMAGENS COM LEGENDAS
   ============================================ */

/* Container para imagem com legenda */
.md-typeset figure {
    margin: 1.5rem auto;
    text-align: center;
}

.md-typeset figure img {
    margin-bottom: 0.5rem;
}

.md-typeset figcaption {
    font-size: 0.9rem;
    color: #6b7280;
    font-style: italic;
    margin-top: 0.5rem;
    padding: 0 1rem;
}

/* ============================================
   GALERIAS E MÚLTIPLAS IMAGENS
   ============================================ */

/* Container para galeria de imagens */
.md-typeset .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1rem;
    margin: 1.5rem 0;
}

.md-typeset .gallery img {
    max-width: 100%;
    margin: 0;
}

/* Galeria de 2 colunas */
.md-typeset .gallery-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.md-typeset .gallery-2 img {
    max-width: 100%;
    margin: 0;
}

/* Galeria de 3 colunas */
.md-typeset .gallery-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
    margin: 1.5rem 0;
}

.md-typeset .gallery-3 img {
    max-width: 100%;
    margin: 0;
}

/* ============================================
   IMAGENS ESPECIAIS
   ============================================ */

/* Imagens de logos ou ícones */
.md-typeset img.logo,
.md-typeset .img-logo img {
    max-width: 200px;
    background-color: transparent;
    border: none;
    box-shadow: none;
    border-radius: 0;
}

/* Imagens de diagrama ou fluxograma */
.md-typeset img.diagram,
.md-typeset .img-diagram img {
    max-width: 100%;
    background-color: #ffffff;
    border: 2px solid rgba(108, 21, 14, 0.2);
    padding: 1rem;
}

/* Screenshots */
.md-typeset img.screenshot,
.md-typeset .img-screenshot img {
    max-width: 90%;
    border: 2px solid #e5e7eb;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* ============================================
   RESPONSIVIDADE
   ============================================ */

/* Tablets */
@media screen and (max-width: 76.1875em) {
    .md-typeset img {
        max-width: 90%; /* Aumenta um pouco em tablets */
    }
    
    .md-typeset img.xlarge,
    .md-typeset .img-xlarge img {
        max-width: 100%;
        margin-left: 0;
    }
    
    .md-typeset .gallery-3 {
        grid-template-columns: 1fr 1fr; /* 3 colunas vira 2 */
    }
}

/* Mobile */
@media screen and (max-width: 44.9375em) {
    .md-typeset img {
        max-width: 100%; /* Ocupa toda largura no mobile */
        margin: 0.5rem auto;
    }
    
    .md-typeset img.small,
    .md-typeset .img-small img {
        max-width: 70%; /* Aumenta imagens pequenas no mobile */
    }
    
    .md-typeset img.inline,
    .md-typeset .img-inline img {
        display: block; /* Força quebra de linha no mobile */
        margin: 0.5rem auto;
        max-width: 200px;
    }
    
    .md-typeset .gallery,
    .md-typeset .gallery-2,
    .md-typeset .gallery-3 {
        grid-template-columns: 1fr; /* Todas as galerias viram 1 coluna */
    }
    
    .md-typeset img.logo,
    .md-typeset .img-logo img {
        max-width: 150px; /* Logos menores no mobile */
    }
}

/* ============================================
   MODO ESCURO
   ============================================ */

[data-md-color-scheme="slate"] .md-typeset img {
    border-color: rgba(244, 114, 182, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset img.diagram,
[data-md-color-scheme="slate"] .md-typeset .img-diagram img {
    background-color: #1e293b;
    border-color: rgba(244, 114, 182, 0.3);
}

[data-md-color-scheme="slate"] .md-typeset img.screenshot,
[data-md-color-scheme="slate"] .md-typeset .img-screenshot img {
    border-color: #374151;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

[data-md-color-scheme="slate"] .md-typeset figcaption {
    color: #94a3b8;
}

/* ============================================
   IMAGENS CLICÁVEIS (ZOOM)
   ============================================ */

/* Efeito hover para imagens clicáveis */
.md-typeset img.clickable,
.md-typeset .img-clickable img {
    cursor: pointer;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.md-typeset img.clickable:hover,
.md-typeset .img-clickable img:hover {
    transform: scale(1.02);
    box-shadow: 0 4px 16px rgba(108, 21, 14, 0.2);
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .md-typeset img {
        max-width: 100%;
        margin: 0.5rem auto;
        box-shadow: none;
        border: 1px solid #000000;
    }
    
    .md-typeset .gallery,
    .md-typeset .gallery-2,
    .md-typeset .gallery-3 {
        display: block;
    }
    
    .md-typeset .gallery img,
    .md-typeset .gallery-2 img,
    .md-typeset .gallery-3 img {
        margin: 0.5rem auto;
        display: block;
    }
}