/*
Theme Name:  Loomah Conta
Theme URI:   https://loomah.com.br
Author:      Agência Veronikas
Description: Tema do portal do membro (Loomah Conta). Site fechado: só a área do membro, sem home institucional, sem blog, sem arquivo. Exige o plugin Loomah Conta. Identidade visual configurável em Aparência → Personalizar.
Version:     1.2.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 7.4
License:     GPLv2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: loomah-conta-tema
Tags:        one-column, custom-logo, custom-colors, translation-ready
*/

/**
 * Este arquivo é o cabeçalho do tema E a folha de estilo.
 *
 * O QUE ELE NÃO FAZ: estilizar a área do membro.
 *
 * O CSS do painel, do login, da ficha e de tudo mais vem do PLUGIN. O tema
 * apenas sobrescreve as variáveis --lc-* e cuida do que é dele: header, footer,
 * fundo, tipografia e a leitura de aviso.
 *
 * Isso não é preguiça, é a decisão comercial da Fase 3: se o CSS do painel
 * morasse aqui, o loomah-conta deixaria de funcionar em qualquer outro tema — e
 * um cliente que já tem site pronto e só quer a área do membro ficaria de fora.
 *
 * As variáveis são sobrescritas em functions.php, a partir do Personalizar.
 * Ver loomah-conta/docs/ARQUITETURA.md §13.
 */

/* --------------------------------------------------------------- Poppins
 *
 * AUTO-HOSPEDADA. Não é do Google Fonts.
 *
 * O Design System carrega Poppins de fonts.googleapis.com, e o LM_Design faz o
 * mesmo na secretaria. No admin, tudo bem. Aqui não: este é o site público que
 * vai para milhares de membros, e cada carga de página mandaria o IP de cada um
 * deles para o Google. Num portal cuja razão de existir é proteção de dados, é
 * indefensável — e o mesmo argumento já barrou o CDN do QR na ficha.
 *
 * Poppins é OFL: pode ser redistribuída. Os arquivos em /fonts são subset latino
 * (4 pesos, 48 KB no total, contra ~205 KB da família cheia). O portal é usado
 * muito no 4G.
 *
 * `font-display: swap` — o texto aparece na fonte do sistema e troca quando a
 * Poppins chega. Sem isso, uma rede ruim entrega uma tela em branco.
 */

@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('fonts/poppins-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('fonts/poppins-500.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('fonts/poppins-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Poppins';
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url('fonts/poppins-700.woff2') format('woff2');
}

/* ------------------------------------------------------------------ base */

*,
*::before,
*::after { box-sizing: border-box; }

/*
 * POPPINS EM TUDO. Regra universal, com !important.
 *
 * Não é força bruta gratuita: o painel é desenhado pelo PLUGIN, e o CSS do
 * plugin não conhece este tema. Sem a regra universal, qualquer componente que
 * declare a própria família (input, button, textarea e select NÃO herdam
 * font-family do body — o navegador impõe a fonte do sistema neles) sairia fora
 * da tipografia. É exatamente o que o LM_Design já faz na secretaria, e pelo
 * mesmo motivo.
 *
 * Ícones não são afetados: são SVG inline com fill/stroke em currentColor, e
 * font-family não os alcança.
 */
html,
body,
button,
input,
select,
optgroup,
textarea,
.lc,
.lc * {
    font-family: var(--lct-fonte) !important;
}

body {
    margin: 0;
    background: var(--lct-fundo);
    color: var(--lc-preto);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; }

a { color: var(--lc-marca); }

strong, b { font-weight: 600; }

.lct-pular {
    position: absolute;
    left: -9999px;
}
.lct-pular:focus {
    left: 8px;
    top: 8px;
    z-index: 10;
    padding: 8px 12px;
    background: var(--lc-branco);
    border-radius: var(--lc-raio-sm);
}

/* ---------------------------------------------------------------- moldura */

.lct-corpo {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

.lct-principal {
    flex: 1;
    width: 100%;
    /* Largura definida na SECRETARIA (LM_Design → largura_conteudo), entregue
       pelo /conta/design. Não há controle daqui: uma fonte de verdade. */
    max-width: var(--lc-largura, 820px);
    margin: 0 auto;
    padding: 32px 20px 56px;
}

/*
 * Entrada em tela cheia. Sem header, sem footer institucional: quem chega aqui
 * não está logado, e a única coisa que essa pessoa precisa é do formulário.
 * Qualquer outra coisa na tela é ruído — ou pior, é link que ela vai clicar em
 * vez de entrar.
 */
.lct-corpo--entrada .lct-principal {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 480px;
    padding: 40px 20px;
}

/* ---------------------------------------------------------------- cabeçalho */

.lct-cabecalho {
    border-bottom: 1px solid var(--lc-cinza-100);
    background: var(--lc-branco);
}

.lct-cabecalho__interno {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: var(--lc-largura, 820px);
    margin: 0 auto;
    padding: 14px 20px;
}

.lct-marca {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    color: var(--lc-preto);
    font-weight: 600;
}

.lct-marca img {
    display: block;
    max-height: 40px;
    width: auto;
}

.lct-sair {
    font-size: 14px;
    color: var(--lc-cinza-600);
    text-decoration: none;
}
.lct-sair:hover { color: var(--lc-preto); }

/* ------------------------------------------------------------------ rodapé */

.lct-rodape {
    border-top: 1px solid var(--lc-cinza-100);
    background: var(--lc-branco);
}

.lct-rodape__interno {
    max-width: var(--lc-largura, 820px);
    margin: 0 auto;
    padding: 20px;
    font-size: 13px;
    color: var(--lc-cinza-600);
}

.lct-rodape__links {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    margin-top: 6px;
}

.lct-rodape a { color: var(--lc-cinza-600); }
.lct-rodape a:hover { color: var(--lc-preto); }

/* ------------------------------------------------------------------ aviso */

.lct-aviso {
    background: var(--lc-branco);
    border: 1px solid var(--lc-cinza-100);
    border-radius: var(--lc-raio);
    padding: 28px;
}

.lct-aviso__titulo {
    margin: 0 0 6px;
    font-size: 22px;
    line-height: 1.3;
}

.lct-aviso__data {
    margin: 0 0 20px;
    font-size: 13px;
    color: var(--lc-cinza-600);
}

.lct-aviso__conteudo > *:first-child { margin-top: 0; }
.lct-aviso__conteudo > *:last-child  { margin-bottom: 0; }

.lct-aviso__conteudo img { border-radius: var(--lc-raio-sm); }

.lct-voltar {
    display: inline-block;
    margin-bottom: 16px;
    font-size: 14px;
    color: var(--lc-cinza-600);
    text-decoration: none;
}
.lct-voltar:hover { color: var(--lc-preto); }

/* -------------------------------------------------------------------- 404 */

.lct-404 {
    text-align: center;
    padding: 48px 0;
}

.lct-404 h1 { margin: 0 0 8px; font-size: 24px; }
.lct-404 p  { margin: 0 0 20px; color: var(--lc-cinza-600); }

/* ------------------------------------------------------------------ botão */

/*
 * Preto quente, sempre. O DS é explícito: "Primary de ação é o preto quente.
 * Instituições personalizam as cores Illus, não o P&B."
 *
 * --lc-marca É o preto (o plugin o define como alias de --lc-preto). O token
 * existe para separar AÇÃO de TINTA — que é o que o próprio DS faz com
 * --lm-color-primary e --lm-color-text, ambos = --lm-black. Não é um gancho para
 * o cliente repintar o botão.
 */
.lct-btn {
    display: inline-block;
    padding: 10px 18px;
    border-radius: var(--lc-raio-sm);
    background: var(--lc-marca);
    color: var(--lc-marca-texto);
    text-decoration: none;
    font-weight: 600;
    font-size: 14px;
}
.lct-btn:hover { background: var(--lc-marca-escura); color: var(--lc-marca-texto); }

/* -------------------------------------------------------------- impressão */

/*
 * A impressão da ficha é comandada pelo PLUGIN (body.lc-imprimindo-ficha, que
 * esconde tudo por `visibility`). Aqui só garantimos que header e rodapé do TEMA
 * não voltem à tona por um `display` teimoso.
 */
@media print {
    body.lc-imprimindo-ficha .lct-cabecalho,
    body.lc-imprimindo-ficha .lct-rodape { display: none !important; }
}

@media (max-width: 600px) {
    .lct-principal { padding: 20px 16px 40px; }
    .lct-aviso     { padding: 20px; }
}