/*
Theme Name: Ensino Social
Theme URI: https://ensinosocial.com.br
Description: Blog com menu identico ao site principal. CSS/JS do menu sao os MESMOS arquivos de ensinosocial.com.br.
Author: Dagoberto Dias
Version: 2.3.0
License: Proprietary
Text Domain: ensinosocial
*/

/*
 * Este arquivo contem APENAS estilos do blog (posts, cards, single, pagination, comments).
 * Todo o CSS do menu (tokens, admin-menu, mobile-menu) vem direto de ensinosocial.com.br
 * Nao duplicar estilos do menu aqui!
 */

/* Font logo local (evita CORS issue com Cloudflare) */
@font-face {
    font-family: 'Atyp Kido';
    src: url('fonts/atyp-kido-semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

/* Forcando variaveis de menu (tokens.css cross-origin pode perder estas) */
:root {
    --menu-groups-width: 112px;
    --menu-width-expanded: 382px;
    --menu-width-collapsed: 112px;
}

/* Dori menu button - tamanho igual ao site principal (dori-widget.css) */
.dori-menu-btn {
    position: relative;
    width: 56px;
    flex: 0 1 56px;
    min-height: 40px;
    border-radius: var(--radius-lg, 12px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 2px solid transparent;
    cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease;
    color: var(--menu-dark-text, #a1a1aa);
}
.dori-menu-btn svg {
    width: 28px;
    height: 28px;
}
.dori-menu-btn .dori-online-dot {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--success, #22c55e);
    border: 2px solid var(--menu-dark-bg);
    z-index: 2;
}

/* Reset basico (tokens.css nao inclui) */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { font-family: 'Lexend Deca', system-ui, -apple-system, sans-serif; font-size: 1rem; line-height: 1.6; color: var(--text); background-color: var(--bg); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-hover); }
img { max-width: 100%; height: auto; }

/* ==============================
   FIX: body nao deve ser flex
   admin.css aplica display:flex ao .layout-admin, mas body tambem tem essa classe.
   Apenas o div.layout-admin deve ser flex, nao o body.
   ============================== */
body.layout-admin {
    display: block !important;
}

/* ==============================
   BLOG CONTENT STYLES
   ============================== */

/* Page header */
.page-header { margin-bottom: 2rem; }
.page-title { font-size: 1.75rem; font-weight: 700; color: var(--text); margin-bottom: 0.5rem; }
.page-description { color: var(--muted); font-size: 1rem; }

/* Post grid */
.posts-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; }
@media (max-width: 768px) { .posts-list { grid-template-columns: 1fr; } }

/* Post card */
.post-card { background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); transition: transform 0.2s, box-shadow 0.2s; }
.post-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.post-card-image { width: 100%; height: 200px; object-fit: cover; display: block; }
.post-card-body { padding: 1.25rem; }
.post-card-meta { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; font-size: 0.8125rem; }
.post-card-category { background: var(--primary-light); color: var(--primary); padding: 0.125rem 0.625rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 600; }
.post-card-meta time { color: var(--muted); }
.post-card-title { font-size: 1.125rem; font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }
.post-card-title a { color: var(--text); text-decoration: none; }
.post-card-title a:hover { color: var(--primary); }
.post-card-excerpt { font-size: 0.875rem; color: var(--text-2); margin-bottom: 1rem; line-height: 1.6; }
.post-card-footer { display: flex; align-items: center; justify-content: space-between; }
.read-more { display: inline-flex; align-items: center; gap: 0.375rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); text-decoration: none; }
.read-more:hover { color: var(--primary-hover); }
.read-more svg { width: 1rem; height: 1rem; }

/* Single post */
article.single-post { max-width: 800px; margin: 0 auto; }
.single-post-header { margin-bottom: 2rem; }
.single-post-title { font-size: 2rem; font-weight: 700; line-height: 1.3; margin-bottom: 1rem; }
.single-post-meta { display: flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.875rem; }
.single-post-content { font-size: 1.0625rem; line-height: 1.8; color: var(--text-2); }
.single-post-content h2 { font-size: 1.5rem; font-weight: 700; color: var(--text); margin: 2rem 0 1rem; }
.single-post-content h3 { font-size: 1.25rem; font-weight: 700; color: var(--text); margin: 1.5rem 0 0.75rem; }
.single-post-content p { margin-bottom: 1rem; }
.single-post-content img { border-radius: var(--radius-lg); margin: 1rem 0; }
.single-post-content ul, .single-post-content ol { margin-bottom: 1rem; padding-left: 1.5rem; }
.single-post-content li { margin-bottom: 0.25rem; }
.single-post-content blockquote { border-left: 4px solid var(--primary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--surface); border-radius: 0 var(--radius) var(--radius) 0; color: var(--text-2); font-style: italic; }
.single-post-content a { color: var(--primary); text-decoration: underline; }
.single-post-content pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; overflow-x: auto; margin: 1rem 0; font-size: 0.875rem; }
.single-post-content code { background: var(--bg-2); padding: 0.125rem 0.375rem; border-radius: var(--radius-sm); font-size: 0.875em; }
.single-post-content pre code { background: none; padding: 0; }

/* Pagination */
.pagination { margin-top: 3rem; display: flex; justify-content: center; }
.pagination .nav-links { display: flex; gap: 0.5rem; align-items: center; }
.pagination .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 0.75rem; border-radius: var(--radius-sm); font-size: 0.875rem; font-weight: 500; color: var(--text-2); background: var(--surface); border: 1px solid var(--border); text-decoration: none; transition: all var(--transition-fast); }
.pagination .page-numbers:hover { background: var(--bg-2); color: var(--text); }
.pagination .page-numbers.current { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }

/* Footer */
.site-footer { margin-top: 3rem; padding: 2rem 0; border-top: 1px solid var(--border); text-align: center; font-size: 0.875rem; color: var(--muted); }
.site-footer a { color: var(--primary); }

/* WordPress blocks */
.wp-block-image img { border-radius: var(--radius-lg); }
.aligncenter { text-align: center; }
.alignleft { float: left; margin-right: 1rem; margin-bottom: 0.5rem; }
.alignright { float: right; margin-left: 1rem; margin-bottom: 0.5rem; }

/* Comments */
.comments-area { max-width: 800px; margin: 2rem auto 0; }
.comments-title { font-size: 1.25rem; font-weight: 700; margin-bottom: 1.5rem; }
.comment-list { list-style: none; padding: 0; }
.comment-body { padding: 1rem; background: var(--surface); border-radius: var(--radius); border: 1px solid var(--border); margin-bottom: 1rem; }
.comment-author { font-weight: 700; margin-bottom: 0.25rem; }
.comment-content p { margin: 0.5rem 0; font-size: 0.9375rem; }
.comment-respond { margin-top: 2rem; }
.comment-form label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; color: var(--text-2); }
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.625rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    transition: border-color var(--transition-fast);
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus);
}
.comment-form .submit {
    background: var(--primary);
    color: var(--primary-contrast);
    border: none;
    padding: 0.625rem 1.5rem;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    cursor: pointer;
    transition: background var(--transition-fast);
}
.comment-form .submit:hover { background: var(--primary-hover); }

/* ==============================
   FIX DEFINITIVO: Conteudo gerado por IA
   O filtro PHP (ensino_fix_ai_inline_styles) remove cores/backgrounds inline
   e adiciona classes CSS (.ai-box-*) para cada tipo de box.
   Isso funciona com QUALQUER hex que a IA gerar — nao depende de valores exatos.
   ============================== */

/* Base para todas as caixas geradas por IA */
.ai-box-neutral,
.ai-box-blue,
.ai-box-green,
.ai-box-red,
.ai-box-orange {
    border-radius: 0 var(--radius, 8px) var(--radius, 8px) 0;
}
.ai-box-neutral p,
.ai-box-blue p,
.ai-box-green p,
.ai-box-red p,
.ai-box-orange p {
    color: var(--text-2) !important;
    font-size: 0.875rem !important;
}
.ai-box-neutral li,
.ai-box-blue li,
.ai-box-green li,
.ai-box-red li,
.ai-box-orange li,
.ai-box-neutral ul,
.ai-box-blue ul,
.ai-box-green ul,
.ai-box-red ul,
.ai-box-orange ul {
    color: var(--text-2) !important;
}
.ai-box-neutral strong,
.ai-box-blue strong,
.ai-box-green strong,
.ai-box-red strong,
.ai-box-orange strong {
    color: var(--text) !important;
}

/* Neutra (sem border-left reconhecido) */
.ai-box-neutral {
    background: var(--surface) !important;
}

/* Azul — info, nota do autor, dicas */
.ai-box-blue {
    background: var(--surface) !important;
}

/* Verde — vantagens, sucessos */
.ai-box-green {
    background: rgba(76, 175, 80, 0.1) !important;
}
.ai-box-green h3 {
    color: #66bb6a !important;
}

/* Vermelha — desafios, alertas */
.ai-box-red {
    background: rgba(244, 67, 54, 0.1) !important;
}
.ai-box-red h3 {
    color: #ef5350 !important;
}

/* Laranja — avisos */
.ai-box-orange {
    background: rgba(255, 152, 0, 0.1) !important;
}
.ai-box-orange h3 {
    color: #ffa726 !important;
}

/* "Ultima atualizacao" — filtro PHP remove color e border-top inline */
.single-post-content p[style*="font-size: 14px"][style*="margin-top: 40px"] {
    color: var(--muted) !important;
    border-top: 1px solid var(--border) !important;
}

/* Grid container gerado por IA */
.single-post-content div[style*="display: grid"],
.single-post-content div[style*="display:grid"] {
    gap: 20px;
    margin: 20px 0;
}

/* ==============================
   POST NAVIGATION (prev/next)
   ============================== */
.post-navigation {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

/* ==============================
   COMMENTS — estilo melhorado para dark theme
   ============================== */
.comments-area {
    max-width: 800px;
    margin: 2.5rem auto 0;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}
.comments-title,
.comment-reply-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 1.5rem;
}
.comment-reply-title small {
    font-size: 0.8125rem;
    font-weight: 400;
    margin-left: 0.5rem;
}
.comment-reply-title small a {
    color: var(--muted);
}
.comment-list { list-style: none; padding: 0; }
.comment-body {
    padding: 1.25rem;
    background: var(--surface);
    border-radius: var(--radius, 8px);
    border: 1px solid var(--border);
    margin-bottom: 1rem;
}
.comment-author { font-weight: 700; margin-bottom: 0.25rem; color: var(--text); }
.comment-content p { margin: 0.5rem 0; font-size: 0.9375rem; color: var(--text-2); }

/* Comment form container */
.comment-respond {
    margin-top: 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg, 12px);
    padding: 1.5rem 2rem;
}

/* Logged in message */
.comment-notes,
.logged-in-as {
    font-size: 0.875rem;
    color: var(--muted);
    margin-bottom: 1rem;
}
.logged-in-as a {
    color: var(--primary);
    text-decoration: none;
}
.logged-in-as a:hover {
    text-decoration: underline;
}

/* SSO — Avatar + nome DENTRO do textarea (visual unico) */
.ensino-sso-logged-in {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-bottom: none;
    border-radius: var(--radius, 8px) var(--radius, 8px) 0 0;
    margin-bottom: 0;
}
.ensino-sso-comment-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}
.ensino-sso-logged-name {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
}

/* Esconder label "Comentario" quando avatar esta visivel */
.ensino-sso-logged-in + .comment-form-comment label {
    display: none;
}
/* Textarea conecta ao avatar bar: sem borda-top, sem radius-top, menor */
.ensino-sso-logged-in + .comment-form-comment textarea {
    border-top: none;
    border-radius: 0 0 var(--radius, 8px) var(--radius, 8px);
    min-height: 80px;
    transition: min-height 0.3s ease;
}
.ensino-sso-logged-in + .comment-form-comment textarea:focus {
    min-height: 140px;
}
.comment-form textarea::placeholder {
    color: var(--muted);
    opacity: 0.6;
    font-style: italic;
}

/* Required fields note */
.required-field-message,
.comment-notes .required {
    color: var(--muted);
    font-size: 0.8125rem;
}

/* Form labels */
.comment-form label {
    display: block;
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 0.375rem;
    color: var(--text);
}

/* Form inputs */
.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius, 8px);
    background: var(--bg);
    color: var(--text);
    font-family: inherit;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
    resize: vertical;
}
.comment-form textarea {
    min-height: 140px;
}
.comment-form input:focus,
.comment-form textarea:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--focus, rgba(34, 197, 94, 0.15));
}

/* Submit button */
.comment-form .submit,
.comment-form .form-submit input[type="submit"] {
    background: var(--primary);
    color: var(--primary-contrast, #fff);
    border: none;
    padding: 0.75rem 2rem;
    border-radius: var(--radius, 8px);
    font-family: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s, transform 0.1s;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}
.comment-form .submit:hover,
.comment-form .form-submit input[type="submit"]:hover {
    background: var(--primary-hover);
    transform: translateY(-1px);
}
.comment-form .submit:active,
.comment-form .form-submit input[type="submit"]:active {
    transform: translateY(0);
}

/* Accessibility */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}