/* --- suporte.css --- */
/* Estilos dedicados para a página de suporte PlayTerapia */

/* --- Variáveis de Cor (Importadas do style-dashboard.css para consistência) --- */
:root {
    --cor-primaria: #2A9D8F; /* Verde-água da logo */
    --cor-secundaria: #264653; /* Azul escuro da logo */
    --cor-destaque: #E9C46A; /* Amarelo/Dourado */
    --cor-fundo: #F4F7FC; /* Fundo suave */
    --cor-branco: #FFFFFF;
    --cor-texto-principal: #263238; /* Cinza escuro */
    --cor-texto-secundario: #546E7A; /* Cinza médio */
    --cor-borda: #E0E7EE; /* Borda clara */
    --sombra: 0 4px 15px rgba(0, 0, 0, 0.08);
    --border-radius: 12px;
    --font-principal: 'Poppins', sans-serif; /* Usar a mesma fonte do dashboard */
}

/* --- Reset Básico e Estilo do Body --- */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: var(--font-principal);
    background-color: var(--cor-fundo);
    color: var(--cor-texto-principal);
    line-height: 1.7; /* Ligeiramente mais espaçado para leitura */
    padding: 20px; /* Adiciona um respiro em telas menores */
}

/* --- Container Principal --- */
.support-container {
    background-color: var(--cor-branco);
    max-width: 850px; /* Um pouco mais largo para conteúdo */
    margin: 40px auto; /* Centraliza e adiciona espaço vertical */
    padding: 35px 45px;
    border-radius: var(--border-radius);
    box-shadow: var(--sombra);
    text-align: left;
}

/* --- Link de Voltar --- */
.back-to-home {
    margin-bottom: 30px;
    font-size: 14px;
}

.back-to-home a {
    color: var(--cor-texto-secundario);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.back-to-home a:hover {
    color: var(--cor-primaria);
    text-decoration: underline;
}

/* --- Título Principal --- */
.support-container h1 {
    text-align: center;
    color: var(--cor-secundaria);
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 35px;
    padding-bottom: 15px;
    border-bottom: 2px solid var(--cor-fundo);
}

/* --- Seções de Conteúdo --- */
.support-section {
    margin-bottom: 35px;
    padding-bottom: 25px;
    border-bottom: 1px solid var(--cor-borda);
}

.support-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.support-section h2 {
    font-size: 22px;
    color: var(--cor-primaria); /* Usa a cor primária para subtítulos */
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

/* --- Estilo dos Ícones nos Títulos h2 --- */
.support-section h2 .material-symbols-outlined {
    font-size: 1.3em; /* Ligeiramente maior */
    color: var(--cor-primaria);
}

/* --- Parágrafos e Listas --- */
.support-section p,
.support-section li {
    font-size: 15px;
    color: var(--cor-texto-secundario);
    margin-bottom: 12px;
}

.support-section strong {
    color: var(--cor-texto-principal);
    font-weight: 600;
}

.support-section ul {
    list-style: none; /* Remove marcadores padrão */
    padding-left: 10px; /* Pequeno recuo */
}

.support-section li {
    display: flex;
    align-items: center; /* Alinha ícone com texto */
    gap: 8px; /* Espaço entre ícone e texto */
    margin-bottom: 15px;
}

.support-section li .material-symbols-outlined {
    color: var(--cor-secundaria);
    font-size: 1.2em;
}

/* --- Links --- */
.support-section a {
    color: var(--cor-primaria); /* Cor primária para links */
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.support-section a:hover {
    color: var(--cor-secundaria);
    text-decoration: underline;
}

/* --- Seção FAQ --- */
.faq-item {
    margin-bottom: 25px;
    padding-left: 5px; /* Leve recuo para perguntas */
}

.faq-item h3 {
    font-size: 17px;
    color: var(--cor-texto-principal);
    font-weight: 600;
    margin-bottom: 8px;
}

/* --- Responsividade Básica --- */
@media (max-width: 768px) {
    .support-container {
        margin: 20px auto;
        padding: 25px 20px;
    }

    .support-container h1 {
        font-size: 24px;
        margin-bottom: 25px;
    }

    .support-section h2 {
        font-size: 20px;
    }

    .support-section p,
    .support-section li,
    .faq-item h3 {
        font-size: 14px;
    }

     .faq-item h3 {
        font-size: 16px;
    }
}

@media (max-width: 480px) {
     body {
         padding: 10px;
     }
    .support-container {
        padding: 20px 15px;
    }
    .support-container h1 {
        font-size: 22px;
    }
     .support-section h2 {
        font-size: 18px;
    }
}