/* Importar fonte Roboto do Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');

/* Minimalista com Roboto */
body {
    font-family: 'Roboto', "Helvetica Neue", Helvetica, Arial, sans-serif;
    background-color: #F5F5F5; /* off-white no fundo */
    color: #333; /* texto principal escuro para melhor leitura */
    font-size: 16px;
    line-height: 1.5;
    margin: 0;
    padding: 0;
}

/* 1. REGRAS PARA O TÍTULO (MANTIDAS, MAS COM AJUSTE DE MARGEM) */
h1.pkp_screen_reader {
    /* Mantém as regras de exibição fortes para anular a ocultação */
    display: inline-block !important; 
    visibility: visible !important;
    position: static !important; 
    
    /* Altera a margem para garantir que ele fique ao lado do elemento anterior (o logo) */
    margin: 0 0 0 15px !important; 
    
    /* Outras regras de estilo */
    font-size: 1.2em !important; 
    font-weight: bold !important;
    color: #fff !important; 
    line-height: 1.2;
    padding: 0 !important;
    clip: auto !important; 
    overflow: visible !important; 
    height: auto !important;
    width: auto !important;
}

/* 2. REGRAS PARA O CONTÊINER PAI (Alinhamento Flexbox) */
/* Este é o elemento que contém a logo e o título. */
.pkp_site_name {
    display: flex !important; /* Força o uso do Flexbox para alinhar itens */
    align-items: center !important; /* Centraliza verticalmente (logo e texto na mesma linha) */
    
    /* Garante que o contêiner não esteja forçando quebra de linha */
    flex-wrap: nowrap !important;
    
    /* Zera margens e padding que possam estar separando o contêiner da borda */
    margin: 0 !important;
    padding: 0 !important;
}

/* Títulos com roxo vibrante */
h1, h2, h3, h4, h5, h6 {
    color: #943AFF;
    margin-top: 1.5em;
    margin-bottom: 0.5em;
    font-weight: 700;
}

/* Links com cinza */
a {
    color: #9FA7AC;
    text-decoration: none;
    transition: color 0.3s ease;
}

/* Hover mais claro para links e navegação */
a:hover, a:focus {
    color: #B0B8BD; /* cinza claro no hover */
    text-decoration: underline;
}

/* Cabeçalho e rodapé */
header, footer {
    background-color: #F5F5F5;
    color: #9FA7AC;
    padding: 1em 2em;
    text-align: center;
    font-weight: 600;
    border-top: 1px solid #9FA7AC;
    border-bottom: 1px solid #9FA7AC;
}

/* Navegação */
nav a {
    margin: 0 1em;
    color: #9FA7AC;
    font-weight: 500;
}

nav a:hover {
    color: #B0B8BD; /* cinza claro no hover */
}

/* Botões */
button, input[type="submit"] {
    background-color: #F5F5F5;
    color: #EBEBEB;
    border: none;
    padding: 0.6em 1.2em;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Regra para remover o outline roxo dos botões */
button:focus, button:active, input[type="submit"]:focus, input[type="submit"]:active {
    outline: none;
    box-shadow: none;
}

button:hover, input[type="submit"]:hover {
    background-color: #EBEBEB;
    color: #F5F5F5;
}

/* Container */
.container {
    max-width: 960px;
    margin: 2em auto;
    padding: 0 1em;
}

/* Formulários */
input, select, textarea {
    border: 1px solid #9FA7AC; /* bordas cinza */
    border-radius: 3px;
    padding: 0.5em;
    font-size: 1em;
    color: #333;
    width: 100%;
    box-sizing: border-box;
    outline: none; /* remove o tracejado de foco */
}

input:focus, select:focus, textarea:focus {
    border-color: #943AFF; /* roxo na borda foco */
    box-shadow: 0 0 5px rgba(148, 58, 255, 0.5); /* sombra suave no foco */
}

/* Tabelas */
table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1.5em;
}

th, td {
    border: 1px solid #9FA7AC; /* cinza para bordas da tabela */
    padding: 0.75em 1em;
    text-align: left;
}

th {
    background-color: #943AFF;
    color: #F5F5F5;
}

tr:nth-child(even) {
    background-color: #f0f0f0; /* leve cinza alternado */
}