/* LS Mural — Estilos do Mural de Recados
   =========================================

   FILOSOFIA: zero cores próprias.
   ----------------------------------
   Nenhum valor de cor é fixo aqui. Tudo herda do tema ativo via:
     - currentColor  → cor do texto do tema
     - inherit       → fundo, borda, fonte
     - Variáveis CSS do WordPress (--wp--preset--color--*, --wp--preset--font-*)
       com fallbacks para temas que não as expõem

   Resultado: o plugin se adapta a qualquer tema — claro, escuro,
   colorido — sem nenhuma configuração adicional.
*/

/* Container geral */
.ls-mural {
    font-family: inherit;
    max-width: 700px;
    margin: 0 auto;
    padding: 20px 0;
}

/* Formulário */
.ls-mural-form {
    margin-bottom: 24px;
    padding: 20px;
    border: 1px solid;
    border-color: currentColor;
    opacity: 1;
    border-radius: 8px;
    border-color: rgba(128,128,128,0.3);
}

.lsm-field {
    margin-bottom: 14px;
}

.lsm-field label {
    display: block;
    font-weight: 600;
    margin-bottom: 6px;
    font-family: inherit;
    color: inherit;
}

.lsm-email-note {
    font-weight: 400;
    opacity: 0.7;
    font-size: 0.875em;
}

.lsm-field input,
.lsm-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 10px;
    border: 1px solid rgba(128,128,128,0.4);
    border-radius: 6px;
    font-size: inherit;
    font-family: inherit;
    color: inherit;
    background: transparent;
    transition: border-color 0.2s;
    appearance: none;
    -webkit-appearance: none;
}

.lsm-field input:focus,
.lsm-field textarea:focus {
    outline: 2px solid currentColor;
    outline-offset: 1px;
    border-color: currentColor;
}

.lsm-field textarea {
    min-height: 100px;
    resize: vertical;
}

/* Botão — herda cor do tema, inverte para contraste */
.lsm-submit {
    color: inherit;
    background: transparent;
    border: 2px solid currentColor;
    padding: 10px 20px;
    border-radius: 6px;
    cursor: pointer;
    font-weight: 700;
    font-size: inherit;
    font-family: inherit;
    transition: opacity 0.2s;
}

.lsm-submit:hover:not(:disabled) {
    opacity: 0.7;
}

.lsm-submit:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Contador de recados */
.ls-mural-count {
    margin: 12px 0;
    font-weight: 600;
    font-size: 0.95em;
    opacity: 0.85;
}

/* Item do mural */
.ls-mural-item {
    padding: 16px;
    margin-bottom: 16px;
    border: 1px solid rgba(128,128,128,0.25);
    border-radius: 8px;
}

.lsm-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 10px;
}

.lsm-name {
    font-weight: 700;
    font-size: 1.05em;
    margin: 0;
    color: inherit;
}

.lsm-date {
    font-size: 0.82em;
    opacity: 0.6;
}

.lsm-message {
    line-height: 1.65;
    font-size: 0.97em;
}

.lsm-message p {
    margin: 0 0 0.5em;
}

.lsm-message p:last-child {
    margin-bottom: 0;
}

/* Separador (oculto — usamos caixas separadas) */
.lsm-separator {
    display: none;
}

/* Paginação */
.ls-mural-pagination {
    margin-top: 20px;
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.ls-mural-pagination .lsm-page {
    display: inline-block;
    padding: 8px 16px;
    border: 1px solid rgba(128,128,128,0.4);
    border-radius: 4px;
    color: inherit;
    font-weight: 600;
    font-size: 0.9em;
    text-decoration: none;
    transition: opacity 0.2s;
}

.ls-mural-pagination .lsm-page:hover {
    opacity: 0.7;
    text-decoration: none;
}

/* Contador de caracteres */
.lsm-counter {
    display: block;
    text-align: right;
    opacity: 0.55;
    font-size: 0.8em;
    margin-top: 4px;
}

/* Status do envio */
.lsm-status {
    margin-top: 10px;
    font-size: 0.9em;
    font-weight: 600;
    min-height: 1.4em;
}

/* Foco no status via JS — visível para teclado, discreto para mouse */
.lsm-status:focus {
    outline: 2px solid currentColor;
    outline-offset: 4px;
    border-radius: 2px;
}

/* Mensagem vazia */
.ls-mural-list > p {
    opacity: 0.7;
    font-style: italic;
}

/* Status ok/erro — sem cores fixas, usa opacidade e decoração */
.lsm-status--ok {
    /* Negrito já diferencia do texto normal */
    text-decoration: underline;
    text-underline-offset: 3px;
}

.lsm-status--error {
    font-style: italic;
    text-decoration: underline;
    text-decoration-style: wavy;
    text-underline-offset: 3px;
}

/* Contador no limite */
.lsm-counter--limit {
    font-weight: 700;
    opacity: 1;
}