:root {
    --ifmg-green: #00693e;
    --ifmg-green-light: #00844f;
    --ifmg-green-dark: #004d2c;
    --text-color: #333333;
    --link-color: var(--ifmg-green-dark);
    --link-hover-color: var(--ifmg-green);
    --background-light-gray: #f4f4f4;
    --background-white: #ffffff;
    --border-color: #dddddd;
    --card-shadow: 0 2px 5px rgba(0,0,0,0.1);
    --container-max-width: 1200px;
    --default-padding: 15px;
    --section-title-color: var(--ifmg-green-dark);
}

body {
    font-family: 'Open Sans', sans-serif;
    line-height: 1.7;
    margin: 0;
    color: var(--text-color);
    background-color: var(--background-light-gray);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    font-size: 16px; /* Base font size */
}

.container {
    width: 90%;
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding-left: var(--default-padding);
    padding-right: var(--default-padding);
    box-sizing: border-box;
}
/* Remove padding from direct children of body that use .container to avoid double padding */
body > header > .container,
body > nav > .container,
body > #conteudo-geral.container, /* If #conteudo-geral IS the container */
body > footer > .container {
    padding-left: 0;
    padding-right: 0;
}


/* Cabeçalho */
#cabecalho {
    background-color: var(--ifmg-green);
    color: var(--background-white);
    padding-top: var(--default-padding);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: space-between; /* Changes to space-around or flex-start on smaller screens */
    padding-bottom: var(--default-padding);
    flex-wrap: nowrap; /* Initially no wrap, controlled by media queries */
    gap: 15px; /* Espaço entre logo e identificação */
}

.logo-area {
    flex-shrink: 0; /* Não encolhe o logo */
}
.logo-ifmg {
    height: 65px;
    margin-right: 0; /* Removido, usando gap no container */
    background-color: white;
    padding: 5px;
    border-radius: 3px;
    display: block; /* Para evitar espaço extra abaixo da imagem */
}

.site-identificacao {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start; /* Alinha texto à esquerda */
    flex-grow: 1; /* Permite que o texto ocupe o espaço restante */
    min-width: 0; /* Para permitir que encolha e quebre linha */
}

.site-identificacao h1 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1em, 2.5vw, 1.1em); /* Responsivo */
    margin: 0;
    font-weight: 600;
    color: #f0f0f0;
    line-height: 1.2;
}
.site-identificacao h2 {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.5em, 4vw, 1.9em); /* Responsivo */
    margin: 0;
    font-weight: 700;
    line-height: 1.1;
    color: var(--background-white);
}
.subtitulo-napnee {
    font-size: clamp(0.8em, 2vw, 0.85em); /* Responsivo */
    margin: 5px 0 0 0;
    font-weight: 400;
    color: #dddddd;
    line-height: 1.3;
    /* overflow-wrap: break-word; Evita quebra de palavras muito longas de forma estranha */
}

/* Menu Principal */
#menu-principal {
    background-color: var(--ifmg-green-dark);
}
#menu-principal .container { /* Garante que o container do menu não tenha padding extra */
    padding-left: 0;
    padding-right: 0;
}
#menu-principal ul {
    list-style: none;
    margin: 0 auto; /* Centraliza a lista de menu */
    padding: 0 var(--default-padding); /* Adiciona padding nas laterais da lista */
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    max-width: var(--container-max-width); /* Garante que a lista não ultrapasse o container geral */
    box-sizing: border-box;
}
#menu-principal ul li a {
    display: block;
    padding: 12px 15px; /* Leve ajuste no padding */
    color: var(--background-white);
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9em;
    transition: background-color 0.3s ease;
    white-space: nowrap; /* Evita quebra de linha nos itens do menu */
}
#menu-principal ul li a:hover,
#menu-principal ul li a:focus {
    background-color: var(--ifmg-green);
    outline: none;
}

/* Conteúdo Geral */
#conteudo-geral.container {
    display: flex;
    gap: 25px;
    padding-top: 25px;
    padding-bottom: 25px;
    flex-grow: 1;
    /* padding-left: 0; padding-right: 0; já tratado acima */
}

#coluna-principal {
    flex: 2.5; /* Ajuste na proporção */
    min-width: 0;
}

#barra-lateral {
    flex: 1;
    min-width: 0; /* Importante para o flex encolher */
   /* max-width: 320px; Limite máximo para a barra lateral em telas maiores */
}

.card {
    background-color: var(--background-white);
    padding: var(--default-padding); /* Usando variável */
    margin-bottom: 20px; /* Espaçamento padrão */
    border-radius: 5px;
    box-shadow: var(--card-shadow);
    border: 1px solid var(--border-color);
}

.section-title-main {
    font-family: 'Poppins', sans-serif;
    color: var(--section-title-color);
    font-size: clamp(1.4em, 3vw, 1.7em); /* Responsivo */
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 2px solid var(--ifmg-green-light);
    padding-bottom: 10px;
}

#hero-banner {
    background-color: var(--ifmg-green-light);
    color: var(--background-white);
    text-align: center;
}
#hero-banner h3 {
    color: var(--background-white);
    border-bottom: none;
    font-size: clamp(1.2em, 2.5vw, 1.4em); /* Responsivo */
    font-style: italic;
    padding: 10px;
}

#coluna-principal ul, #coluna-principal ol {
    padding-left: 25px; /* Mais indentação */
    margin-top: 10px;
}
#coluna-principal ul li, #coluna-principal ol li {
    margin-bottom: 8px;
}

/* Barra Lateral Widgets */
.widget-title {
    font-family: 'Poppins', sans-serif;
    font-size: clamp(1.1em, 2.5vw, 1.25em); /* Responsivo */
    color: var(--section-title-color);
    margin-top: 0;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 8px;
    display: flex; /* Para alinhar ícone e título */
    align-items: center;
}

.widget p {
    margin-bottom: 10px;
    font-size: 0.9rem; /* Usando rem para melhor acessibilidade */
    display: flex;
    align-items: flex-start; /* Ícone alinha com o topo da primeira linha de texto */
    line-height: 1.5; /* Melhor espaçamento entre linhas no widget */
}
.widget p span { /* O texto ao lado do ícone */
    flex-grow: 1;
    min-width: 0; /* Permite que o span encolha e quebre linha */
}

.widget strong {
    color: var(--text-color);
    font-weight: 600; /* Um pouco mais de destaque */
}
.widget a {
    color: var(--link-color);
    text-decoration: none;
    word-break: break-all; /* Quebra e-mails/links longos se necessário */
}
.widget a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
}

.quick-nav { list-style: none; padding: 0; }
.quick-nav li a {
    display: block; padding: 8px 0;
    color: var(--link-color); text-decoration: none;
    border-bottom: 1px dashed var(--border-color);
    transition: color 0.2s, padding-left 0.2s;
    font-size: 0.9rem;
}
.quick-nav li:last-child a { border-bottom: none; }
.quick-nav li a:hover { color: var(--ifmg-green); padding-left: 5px; }

.icon-spacing {
    margin-right: 10px; /* Aumenta um pouco o espaço */
    color: var(--ifmg-green);
    width: 20px; /* Largura fixa para consistência */
    text-align: center;
    flex-shrink: 0; /* Não permite que o ícone encolha */
    margin-top: 1px; /* Ajuste fino vertical */
}
.widget-title .icon-spacing { /* Para ícones no título do widget */
    margin-top: 0;
    font-size: 0.9em; /* Ícone um pouco menor no título */
}

/* Rodapé */
#rodape-portal {
    background-color: #333333; color: #cccccc;
    padding: 25px 0; font-size: 0.8rem;
    margin-top: auto;
}
#rodape-portal .container { /* Garante que o container do rodapé não tenha padding extra */
    padding-left: 0;
    padding-right: 0;
}
.footer-container {
    display: flex; justify-content: space-between;
    align-items: flex-start; flex-wrap: wrap; gap: 20px;
    max-width: var(--container-max-width); /* Garante que o conteúdo não ultrapasse o container geral */
    margin: 0 auto; /* Centraliza o conteúdo */
    padding: 0 var(--default-padding); /* Adiciona padding nas laterais do conteúdo */
    box-sizing: border-box;
}
.logo-ifmg-footer {
    height: 45px; opacity: 0.8; background-color: white;
    padding: 3px; border-radius: 3px;
}
.footer-info { flex-basis: 55%; min-width: 280px; } /* Permite quebrar linha melhor */
.footer-info p { margin: 4px 0; }
.footer-copyright {
    width: 100%; text-align: center; margin-top: 15px;
    padding-top: 15px; border-top: 1px solid #555555;
    font-size: 0.85em;
}

/* Acessibilidade - Foco visível */
*:focus { outline: 3px solid var(--ifmg-green-light); outline-offset: 2px; }
#menu-principal ul li a:focus { outline-color: var(--background-white); }

/* --- Media Queries para Responsividade --- */

/* Telas médias (tablets em paisagem, desktops menores) */
@media (max-width: 1024px) {
    .site-identificacao h2 { font-size: clamp(1.4em, 3.5vw, 1.7em); }
    .subtitulo-napnee { font-size: clamp(0.75em, 1.8vw, 0.8em); }
    #coluna-principal { flex: 2; }
}

/* Tablets e telas menores (onde o layout de 2 colunas pode quebrar) */
@media (max-width: 820px) { /* Ponto de quebra para barra lateral abaixo */
    #conteudo-geral.container {
        flex-direction: column;
    }
    #coluna-principal, #barra-lateral {
        flex: none;
        width: 100%;
        max-width: none; /* Remove max-width da sidebar */
    }
    #barra-lateral {
        margin-top: 20px;
    }
    .header-container {
        flex-wrap: wrap; /* Permite quebra de linha no header */
        justify-content: center; /* Centraliza quando quebra */
        text-align: center;
    }
    .logo-area {
        margin-bottom: 10px; /* Espaço se o texto for para baixo */
        width: 100%; /* Ocupa toda a largura para centralizar o logo */
        display: flex;
        justify-content: center;
    }
    .site-identificacao {
        align-items: center; /* Centraliza texto do header */
        text-align: center;
    }
    .logo-ifmg {
        margin-right: 0; /* Sem margem se estiver centralizado */
        height: 60px;
    }
}

/* Celulares */
@media (max-width: 600px) {
    body { font-size: 15px; }
    .container { width: 95%; }

    .logo-ifmg { height: 55px; }
    .site-identificacao h1 { font-size: 0.9em; }
    .site-identificacao h2 { font-size: 1.4em; }
    .subtitulo-napnee { font-size: 0.75em; }

    #menu-principal ul {
        flex-direction: column;
        align-items: stretch; /* Estica os itens do menu */
        padding-left: 0;
        padding-right: 0;
    }
    #menu-principal ul li a {
        text-align: center;
        border-bottom: 1px solid var(--ifmg-green);
        padding: 10px 15px;
        white-space: normal; /* Permite quebra de linha se necessário */
    }
    #menu-principal ul li:last-child a { border-bottom: none; }

    .section-title-main { font-size: 1.3em; }
    #hero-banner h3 { font-size: 1.1em; }
    .widget-title { font-size: 1.1em; }
    .widget p { font-size: 0.85rem; }

    .footer-container { text-align: center; }
    .footer-info { flex-basis: 100%; }
    .logo-ifmg-footer { margin: 0 auto 10px auto; display: block; }
}