/*
Theme Name: MCHD
Theme URI: http://mayaramchd.com
Author: Fábio Santiago
Author URI: http://fabiosantiago.dev/
Description: Tema criado para MCHD - Treinamento e Consultoria
Version: 1.0
*/

/* Fonts */
@font-face {
    font-family: 'Hatton';
    src: url('assets/fonts/Hatton-Medium.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Hatton';
    src: url('assets/fonts/Hatton-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Regular.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Medium.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Montserrat';
    src: url('assets/fonts/Montserrat-Bold.ttf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

/* Reset CSS */
body {
    margin: 0;
    padding: 0;
    width: 100%;
    /* height: 100vh;
    /* display: flex; */
    /* justify-content: center;
    align-items: center; */
}


/* Global CSS */
body {
    margin: 0px;
    font-family:'Montserrat';
}

h1, 
ul,
p
{
    margin: 0px;
}

ul {
    padding: 0px;
}

.text-hatton {
    font-family: 'Hatton';
}

button {
    transition: all 0.3s ease;
}

/**
 * Arquivo CSS Consolidado para o Conteúdo de Serviço (.prose)
 * Focado em justificação, espaçamento vertical (margens) e listas.
 */

/* === Configurações de Formatação Geral (Parágrafos e Listas) === */

.prose p, 
.prose ul, 
.prose ol {
    /* Garante a justificação para todos os blocos de texto */
    text-align: justify;
    /* Espaçamento padrão entre parágrafos e listas */
    margin-bottom: 1em; 
}

/* === Configurações de Títulos (H2, H3) === */

.prose h1, 
.prose h2, 
.prose h3 {
    /* Define o espaçamento vertical para separar as seções */
    margin-top: 2em;     /* Espaço maior ANTES do título (separando blocos grandes) */
    margin-bottom: 0.8em; /* Espaço menor DEPOIS do título, antes do primeiro parágrafo */
    line-height: 1.2;    /* Melhora a legibilidade do título */
    text-align: left;    /* Garante que o alinhamento dos títulos seja à esquerda */
}

/* === Configurações de Listas (Ordenadas e Não Ordenadas) === */

/* Formatação da Lista Ordenada (<ol>) */
.prose ol {
    /* Garante que os números apareçam (1, 2, 3...) */
    list-style-type: decimal; 
    /* Recuo essencial para que os números não fiquem escondidos */
    padding-left: 2em;        
    /* Espaçamento extra após a lista */
    margin-bottom: 1.5em;     
    /* Espaçamento para separar a lista do texto/título anterior (ex: "O que é entregue?") */
    margin-top: 0.5em;        
}

/* Formatação da Lista Não Ordenada (<ul> - caso use) */
.prose ul {
    list-style-type: disc; /* Exibe os marcadores de bolinha */
    padding-left: 1.5em;
}

/* Formatação dos Itens da Lista (<li>) */
.prose ol li,
.prose ul li {
    margin-bottom: 0.6em; /* Espaço entre os itens da lista */
    /* Garante que o texto dentro do item continue justificado */
    text-align: justify;  
}

.prose pre {
    /* Remove o estilo padrão de código do navegador */
    background-color: transparent; 
    border: none;
    padding: 0;
    margin: 1.5em 0;
    white-space: pre-wrap; /* Permite que o texto quebre linhas, se necessário */
}

/* Estilo para transformar o bloco <pre> em uma caixa de referência */
.prose .reference-box {
    /* Cores e Fundo */
    background-color: #fdfdfd; /* Fundo muito claro ou branco */
    border: 1px solid #eae1d2; /* Borda suave */
    border-left: 5px solid #840a0a; /* Faixa lateral primária (destaque) */
    color: #121110;
    
    /* Espaçamento e Fonte */
    padding: 1em; 
    margin: 2em 0; /* Espaço maior antes e depois do bloco */
    margin-left: 3em;
    font-size: 1.1em; /* Fonte um pouco maior */
    line-height: 1.6;
}

/* Estilo para as Linhas de Pergunta/Resposta dentro da caixa */
.prose .reference-box p {
    margin-bottom: 0.8em !important; /* Menor espaço entre as perguntas */
    text-align: left; /* Garante que as perguntas não sejam justificadas */
    font-style: italic; /* Opcional: para destacar o formato pergunta/resposta */
}

/* Regras de Layout do Tailwind que você está usando (Manter no HTML) */
.mobile-menu-container { 
    position: absolute; 
    top: 5rem;
    left: 0;
    width: 100%;
    z-index: 40;
}

/* Estilo padrão do menu mobile escondido */
#mobile-menu {
    display: none !important; /* Esconde o menu por padrão */
    position: absolute;
    top: 9rem; /* Alinhado abaixo do botão */
    left: 0;
    width: 100%; /* Ocupa toda a largura */
    background-color: white;
    z-index: 30;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1); /* Adiciona sombra */
    transition: all 0.3s ease-in-out; /* Suaviza a transição */
}

/* Estilo para o menu mobile visível */
#mobile-menu.active {
    display: block !important; /* Força o display: block quando ativo */
}

/* Lista do menu */
#mobile-menu ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

#mobile-menu li a {
    display: block;
    padding: 1rem;
    color: #840a0a;
    font-size: 1.25rem;
    text-decoration: none;
    border-bottom: 1px solid #eae1d2;
}

#mobile-menu li a:hover {
    background-color: #f4f4f4;
}

/* Slide */

.slider {
    margin: 0 auto;
    width: 800px;
    /* height: 600px; */
    overflow: hidden;
}

  /* Permite que slides se ajustem ao conteúdo */
  .slides,
  .slide {
    height: auto;
  }

.slides {
    width: 400%;
    /* height: 400px; */
    display: flex;
}

.slides input{
    display: none;
}

.slide{
    width: 25%;
    position: relative;
    padding-bottom: 2rem;
}


.slide img{
    width: 800px;
}

.manual-navigation{
    position: absolute;
    width: 800px;
    /* margin-top: -40px; */
    margin-top: -312px;
    display: flex;
    justify-content: center;
}

.manual-btn{
    border: 2px solid #eae1d2;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.manual-btn:not(:Last-child){
    margin-right: 40px;
}

.manual-btn:hover{
    background-color: #840a0a;
}

#radio1:checked ~ .first{
    margin-left: 0;
}

#radio2:checked ~ .first{
    margin-left: -25%;
}

#radio3:checked ~ .first{
    margin-left: -50%;
}

#radio4:checked ~ .first{
    margin-left: -75%;
}

.navigation-auto div{
    border: 2px solid #eae1d2;
    padding: 5px;
    border-radius: 10px;
    cursor: pointer;
    transition: 1s;
}

.navigation-auto{
    position: absolute;
    width: 800px;
    /* margin-top: 360px; */
    /* margin-top: 348px; */
    margin-top: 356px;
    display: flex;
    justify-content: center;
}

.navigation-auto div:not(:Last-child){
    margin-right: 40px;
}

#radio1:checked ~ .navigation-auto .auto-btn1{
    background-color: #840a0a;
}

#radio2:checked ~ .navigation-auto .auto-btn2{
    background-color: #840a0a;
}

#radio3:checked ~ .navigation-auto .auto-btn3{
    background-color: #840a0a;
}

#radio4:checked ~ .navigation-auto .auto-btn4{
    background-color: #840a0a;
}