/* * Sistema de Design da ONG Conecta - Entrega II e IV
 * Foco: Responsividade, Acessibilidade (Modo Escuro/Contraste) e Identidade Visual.
 *
 * Paleta Primária: Verde Oceano (#1E8449)
 * Paleta Secundária: Verde Vivo (#4CAF50)
 * Paleta Neutra: Fundo Suave (#E8F5E9) e Neutro Escuro (#1f2937)
 * Tipografia: Inter
 */

:root {
    /* Cores Institucionais */
    --color-primary: #1E8449; /* Verde Oceano (Principal) */
    --color-primary-dark: #186F3A; /* Verde Oceano Escuro (Hover) */
    --color-secondary: #4CAF50; /* Verde Vivo */
    --color-white: #ffffff;
    --color-dark: #1f2937;
    
    /* Cores de Ação e Feedback */
    --color-error: #E53E3E; /* Vermelho */
    --color-link: #3b82f6; /* Azul */

    /* Neutros e Fundo */
    --color-bg-light: #E8F5E9; /* Fundo principal suave */
    --color-bg-card: #ffffff;
    --color-text-base: #3C3C3C;
    --color-border-light: #d1d5db;

    /* Tipografia (5 tamanhos) */
    --font-size-xs: 0.75rem; /* 12px */
    --font-size-sm: 0.875rem; /* 14px */
    --font-size-md: 1rem; /* 16px (Base) */
    --font-size-lg: 1.25rem; /* 20px */
    --font-size-xl: 1.5rem; /* 24px */
    --font-size-xxl: 2.25rem; /* 36px (H1) */

    /* Espaçamento Modular (Múltiplos de 8px) */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    --spacing-xxl: 64px;

    /* Transição para Modo Escuro */
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}

/* ========================================================
   MODO ESCURO / ALTO CONTRASTE (WCAG 2.1 AA)
   ======================================================== */
.dark-mode {
    --color-bg-light: #121212; /* Fundo Escuro Profundo */
    --color-bg-card: #1f2937; /* Cartões mais escuros */
    --color-text-base: #f3f4f6; /* Texto muito claro */
    --color-border-light: #4b5563;
    
    /* Cores de Destaque no Modo Escuro */
    --color-primary: #3CB371; /* Verde Suave (Para maior contraste no escuro) */
    --color-primary-dark: #2c9a60;
    --color-link: #60a5fa; /* Azul mais claro para links */
}

/* ========================================================
   REGRAS BASE GLOBAIS
   ======================================================== */

body {
    background-color: var(--color-bg-light);
    color: var(--color-text-base);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

/* Classes institucionais para reuso */
.text-ong-primary { color: var(--color-primary); } 
.bg-ong-primary { background-color: var(--color-primary); }
.bg-ong-primary:hover { background-color: var(--color-primary-dark); } 

/* Reset e Box-sizing */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Estilo para links de botões primários */
.btn-primary {
    background-color: var(--color-primary);
    color: var(--color-white);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--spacing-sm);
    font-weight: 600;
    text-decoration: none;
}
.btn-primary:hover {
    background-color: var(--color-primary-dark);
}

/* Efeito Hover em Cards (Usando a variavel de transicao) */
.card-shadow:hover {
    box-shadow: 0 15px 30px -5px rgba(0, 0, 0, 0.3); 
    transform: translateY(-3px); 
}

/* ========================================================
   TIPOGRAFIA HIERÁRQUICA (Exemplo de uso das variáveis)
   ======================================================== */
h1 { font-size: var(--font-size-xxl); font-weight: 800; }
h2 { font-size: var(--font-size-xl); font-weight: 700; }
h3 { font-size: var(--font-size-lg); font-weight: 600; }

/* ========================================================
   NAVEGAÇÃO AVANÇADA E RESPONSIVA
   ======================================================== */

/* Esconde o menu hambúrguer no desktop */
.hamburger-button {
    display: block; /* Visível no mobile por padrao */
}
@media (min-width: 768px) {
    .hamburger-button {
        display: none; /* Escondido no desktop */
    }
    #main-nav {
        display: flex !important; /* Sempre visível no desktop */
    }
}

/* Estilo para o menu lateral em telas pequenas */
#main-nav {
    position: fixed;
    top: 0;
    right: -100%; /* Inicialmente fora da tela */
    height: 100vh;
    width: 75%;
    max-width: 300px;
    background-color: var(--color-bg-card);
    box-shadow: -4px 0 10px rgba(0, 0, 0, 0.1);
    transition: right 0.3s ease-in-out;
    flex-direction: column;
    padding-top: var(--spacing-xl);
}
#main-nav.menu-open {
    right: 0; /* Move para a tela quando aberto */
}
#main-nav ul {
    flex-direction: column;
    padding: var(--spacing-sm);
    width: 100%;
}
#main-nav ul li {
    width: 100%;
    margin-bottom: var(--spacing-xs);
    text-align: left;
}

/* Estilo do Dropdown (Submenu) */
.dropdown-container {
    position: relative;
}
.dropdown-menu {
    display: none;
    position: absolute;
    min-width: 200px;
    background-color: var(--color-bg-card);
    border: 1px solid var(--color-border-light);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    z-index: 60;
    padding: 0;
    list-style: none;
    margin: 0;
}

/* Dropdown visível em Desktop (Hover) */
.dropdown-container:hover .dropdown-menu {
    display: block;
}

/* Estilo para o link do dropdown */
.dropdown-item {
    display: block;
    padding: 10px 15px;
    text-decoration: none;
    color: var(--color-text-base);
}
.dropdown-item:hover {
    background-color: var(--color-bg-light);
    color: var(--color-primary);
}

/* Regras específicas para Mobile (Menu Vertical) */
@media (max-width: 767px) {
    .dropdown-menu {
        position: static; /* Ocupa o espaco normalmente no fluxo mobile */
        border: none;
        box-shadow: none;
        background-color: transparent;
        margin-left: var(--spacing-sm);
    }
    .dropdown-container.active .dropdown-menu {
        display: block; /* JS controla o active para abrir o submenu */
    }
    .dropdown-container .dropdown-menu .dropdown-item {
        padding: 5px 15px;
        font-size: var(--font-size-sm);
    }
}