/* ==========================================================================
   Estilos personalizados — albertorejtman.com
   --------------------------------------------------------------------------
   FONTE OFICIAL de todo o CSS próprio do site (desde 26/10/2026).
   Carregado pelo mu-plugin albertorejtman-ajustes.php, depois do CSS do tema
   (master.css). Editar AQUI, na cópia do projeto, e enviar por SFTP para
   wp-content/mu-plugins/albertorejtman/estilos.css.

   O "CSS adicional" do painel (Aparência → Personalizar) fica VAZIO,
   reservado para testes rápidos; ajuste definitivo vem para este arquivo.

   Partes:
     1) Home — bloco "Blog" (seção "Journal") + páginas de categoria/autor/arquivo
     2) Página /blog/ — modelo "Blog" com barra lateral
     3) Resultados de busca
     4) Acessibilidade — títulos dos cards h2 com visual de h3
     5) Fonte de ícones (Font Awesome) com font-display: swap
     6) Acessibilidade — contraste dos subtítulos e links distinguíveis
   ========================================================================== */


/* ==========================================================================
   1) HOME — bloco "Blog" (seção "Journal")
      + PÁGINAS DE CATEGORIA, AUTOR E ARQUIVO (desde 27/10/2026)
   Vale para:
     - o bloco "Blog" da página inicial (sections/section-blog.php),
       classe .blog-information;
     - as páginas de categoria, autor e arquivo mensal com o archive.php
       ORIGINAL do tema, classe .archive-section. Desde 27/10/2026 o
       archive.php personalizado usa as classes da /blog/ (parte 2); estas
       regras ficam como reserva caso o archive.php original volte (ex.:
       reinstalação do tema).
   A página /blog/ (modelo "Blog") e a busca têm regras próprias (partes 2/3).
   O tema posiciona os cards via JavaScript (Isotope, em colunas coladas);
   os !important abaixo anulam esse posicionamento e usam uma grade CSS.
   ========================================================================== */
.blog-information .blog-posts,
.archive-section .blog-posts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 48px 32px;              /* espaço vertical / horizontal entre cards */
	max-width: 1140px;           /* não ocupa mais a tela inteira */
	margin: 0 auto;
	padding: 0 20px;
	height: auto !important;     /* anula a altura calculada pelo Isotope */
}

.blog-information .blog-posts .blog-item,
.archive-section .blog-posts .blog-item {
	position: static !important; /* anula o posicionamento absoluto do Isotope */
	width: auto !important;      /* anula a largura de 33,33% do tema */
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}

/* Todas as imagens na mesma proporção (3:2), recortadas pelo centro */
.blog-information .blog-posts .entry-thumbnail img,
.archive-section .blog-posts .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

.blog-information .blog-posts .entry-information,
.archive-section .blog-posts .entry-information { padding: 24px; }
.blog-information .blog-posts .entry-header h3,
.archive-section .blog-posts .entry-header h3    { margin: 0 0 16px; }
.blog-information .blog-posts .entry-header a,
.archive-section .blog-posts .entry-header a     { font-size: 20px; line-height: 1.35; }
.blog-information .blog-posts .entry-meta,
.archive-section .blog-posts .entry-meta         { margin-bottom: 0; }

/* Tablet: 2 colunas | Celular: 1 coluna */
@media (max-width: 991px) {
	.blog-information .blog-posts,
	.archive-section .blog-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.blog-information .blog-posts,
	.archive-section .blog-posts { grid-template-columns: 1fr; gap: 32px; }
}


/* ==========================================================================
   2) PÁGINA /blog/ — modelo "Blog" com barra lateral
   Depende do template-blog.php PERSONALIZADO (com .blog-page-layout e
   .blog-page-lateral). Todas as regras começam com .blog-page, a classe
   da seção desse modelo; a home não é afetada.
   ========================================================================== */

/* Área útil centralizada; com barra lateral vira 2 colunas (posts | lateral) */
.blog-page .blog-page-layout {
	max-width: 1320px;
	margin: 0 auto;
	padding: 0 20px;
}
.blog-page .blog-page-layout.tem-lateral {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 300px;
	gap: 48px;
	align-items: start;
}

/* Grade de posts (mesma ideia da home: anula o Isotope do tema) */
.blog-page .blog-posts {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 40px 28px;
	height: auto !important;
}
.blog-page .blog-posts .blog-item {
	position: static !important;
	width: auto !important;
	display: flex;
	flex-direction: column;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .08), 0 6px 18px rgba(0, 0, 0, .06);
}
.blog-page .blog-posts .entry-thumbnail img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
}
.blog-page .blog-posts .entry-information { padding: 20px; }
.blog-page .blog-posts .entry-header h3    { margin: 0 0 14px; }
.blog-page .blog-posts .entry-header a     { font-size: 18px; line-height: 1.35; }
.blog-page .blog-posts .entry-meta         { margin-bottom: 0; font-size: 13px; }

/* Barra lateral (blocos do editor da página) */
.blog-page .blog-page-lateral {
	font-size: 15px;
}
.blog-page .blog-page-lateral > * + * {
	margin-top: 40px;                  /* espaço entre um bloco e outro */
}
.blog-page .blog-page-lateral > :first-child,
.blog-page .blog-page-lateral > h2 + *,
.blog-page .blog-page-lateral > h3 + * {
	margin-top: 0;                     /* sem espaço extra logo após um título */
}
.blog-page .blog-page-lateral h2,
.blog-page .blog-page-lateral h3,
.blog-page .blog-page-lateral .wp-block-heading {
	font-size: 20px;
	margin-bottom: 16px;               /* o espaço de cima vem da regra "* + *" */
	padding-bottom: 10px;
	border-bottom: 2px solid #BF9456;  /* dourado do tema */
}
.blog-page .blog-page-lateral ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.blog-page .blog-page-lateral li {
	padding: 8px 0;
	border-bottom: 1px solid #eee;
}
.blog-page .blog-page-lateral a       { color: #212121; }
.blog-page .blog-page-lateral a:hover { color: #BF9456; }

/* Bloco Pesquisar */
.blog-page .blog-page-lateral .wp-block-search__inside-wrapper { display: flex; }
.blog-page .blog-page-lateral .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #ccc;
}
.blog-page .blog-page-lateral .wp-block-search__button {
	margin-left: 0;
	padding: 10px 16px;
	border: 0;
	background: #BF9456;
	color: #fff;
	cursor: pointer;
}

/* Bloco Calendário */
.blog-page .blog-page-lateral .wp-block-calendar table { width: 100%; }
.blog-page .blog-page-lateral .wp-block-calendar caption {
	caption-side: top;                 /* mês/ano em cima, no estilo dos títulos */
	text-align: left;
	font-size: 20px;
	padding-bottom: 10px;
	margin-bottom: 12px;
	border-bottom: 2px solid #BF9456;
	color: #212121;
}
.blog-page .blog-page-lateral .wp-block-calendar th,
.blog-page .blog-page-lateral .wp-block-calendar td {
	padding: 6px 0;
	text-align: center;
}
.blog-page .blog-page-lateral .wp-block-calendar td a {
	font-weight: bold;
	color: #BF9456;                    /* dias com post publicado */
}

/* Bloco Nuvem de tags */
.blog-page .blog-page-lateral .wp-block-tag-cloud a { margin: 0 8px 8px 0; display: inline-block; }

/* Telas médias: 2 colunas de posts | Tablet: lateral desce para baixo dos posts
   | Celular: 1 coluna */
@media (max-width: 1199px) {
	.blog-page .blog-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 991px) {
	.blog-page .blog-page-layout.tem-lateral { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
	.blog-page .blog-posts { grid-template-columns: 1fr; gap: 32px; }
}


/* ==========================================================================
   3) RESULTADOS DE BUSCA — search.php personalizado
   O search.php usa as mesmas classes da /blog/ (.blog-page,
   .blog-page-layout, .blog-page-lateral), então a parte 2 já cuida da
   grade e da lateral. Aqui só o que é exclusivo da busca (.search-section).
   ========================================================================== */

/* "10 postagens encontradas", em linha própria abaixo do título */
.search-section .search-total {
	display: block;
	margin-top: 12px;
	font-size: 15px;
	color: #6b6b6b;
}

/* Sem resultados: mensagem + campo para nova busca, centralizados */
.search-section .busca-vazia {
	max-width: 520px;
	margin: 0 auto;
}
.search-section .busca-vazia .wp-block-search__inside-wrapper { display: flex; }
.search-section .busca-vazia .wp-block-search__input {
	flex: 1;
	min-width: 0;
	padding: 10px 12px;
	border: 1px solid #ccc;
}
.search-section .busca-vazia .wp-block-search__button {
	padding: 10px 16px;
	border: 0;
	background: #BF9456;
	color: #fff;
	cursor: pointer;
}


/* ==========================================================================
   4) ACESSIBILIDADE — títulos dos cards de post: h3 → h2       [26/10/2026]
   O PageSpeed apontou "títulos fora de ordem" (h1 da seção → h3 do card).
   Os templates passaram a usar h2; estas regras mantêm o MESMO visual dos
   antigos h3 (o tema dá 30px ao h2 e 24px ao h3; o texto visível fica no
   <a> interno, mas o tamanho do h2 alteraria o espaçamento das linhas).
   ========================================================================== */
.blog-posts .entry-header h2 {
	font-size: 24px;                   /* igual ao h3 do tema */
	margin: 0 0 20px;                  /* igual ao ".entry-header h3" do tema */
}
.blog-information .blog-posts .entry-header h2 { margin: 0 0 16px; }  /* home  (= parte 1) */
.blog-page .blog-posts .entry-header h2        { margin: 0 0 14px; }  /* /blog/ e busca (= parte 2) */


/* ==========================================================================
   5) FONTE DE ÍCONES (Font Awesome 4.7) — recorte + reserva    [27/10/2026]
   - font-display: swap: os ícones não ficam invisíveis enquanto a fonte baixa
     (PageSpeed: "Exibição de fontes").
   - RECORTE: a fonte completa tem 75 KB e ~700 ícones, mas o site usa ~26.
     O 1º @font-face aponta para fontawesome-recorte.woff2 (~4 KB) só com os
     ícones usados (unicode-range). O 2º é a RESERVA: a fonte completa do tema,
     com o unicode-range de todo o resto — o navegador só a baixa se aparecer
     um ícone fora do recorte (ex.: o Alberto escolher um ícone novo no painel).
   - Para regenerar/acrescentar ícones: ferramentas/fontawesome-recorte/
     gerar_recorte.py (instruções no arquivo).
   - Estas declarações vêm DEPOIS da do font-awesome.min.css do tema, então
     têm prioridade sobre ela.
   ========================================================================== */
@font-face {
	font-family: 'FontAwesome';
	src: url('/wp-content/mu-plugins/albertorejtman/fontawesome-recorte.woff2?v=1') format('woff2');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+0020, U+00A8-00A9, U+00AE, U+00B4, U+00C6, U+00D8, U+2122, U+221E, U+2260, U+F002-F003, U+F00D, U+F015, U+F02D, U+F060-F061, U+F095, U+F099-F09A, U+F0D2, U+F0E1, U+F107, U+F114, U+F133, U+F160, U+F167, U+F16D-F16E, U+F17D, U+F185-F186, U+F194, U+F1A0, U+F1B4, U+F1BD, U+F251;
}
@font-face {
	font-family: 'FontAwesome';
	src: url('/wp-content/themes/novela/assets/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),
	     url('/wp-content/themes/novela/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
	unicode-range: U+F000-F001, U+F004-F00C, U+F00E, U+F010-F014, U+F016-F01E, U+F021-F02C, U+F02E-F03E, U+F040-F04E, U+F050-F05E, U+F062-F06E, U+F070-F07E, U+F080-F08E, U+F090-F094, U+F096-F098, U+F09B-F09E, U+F0A0-F0AE, U+F0B0-F0B2, U+F0C0-F0CE, U+F0D0-F0D1, U+F0D3-F0DE, U+F0E0, U+F0E2-F0EE, U+F0F0-F0FE, U+F100-F106, U+F108-F10E, U+F110-F113, U+F115-F11E, U+F120-F12E, U+F130-F132, U+F134-F13E, U+F140-F14E, U+F150-F15E, U+F161-F166, U+F168-F16C, U+F170-F17C, U+F17E, U+F180-F184, U+F187-F18E, U+F190-F193, U+F195-F19E, U+F1A1-F1AE, U+F1B0-F1B3, U+F1B5-F1BC, U+F1BE, U+F1C0-F1CE, U+F1D0-F1DE, U+F1E0-F1EE, U+F1F0-F1FE, U+F200-F20E, U+F210-F21E, U+F221-F23E, U+F240-F24E, U+F250, U+F252-F25E, U+F260-F26E, U+F270-F27E, U+F280-F28E, U+F290-F29E, U+F2A0-F2AE, U+F2B0-F2BE, U+F2C0-F2CE, U+F2D0-F2DE, U+F2E0-F2EE, U+F500;
}


/* ==========================================================================
   6) ACESSIBILIDADE — contraste e links distinguíveis          [27/10/2026]
   PageSpeed (acessibilidade):
   a) "Cores sem contraste suficiente": os subtítulos (.lead) das seções da
      home — ex.: "Entenda os movimentos que moldaram o mundo." e
      "Escritor por vocação e pesquisador por devoção." — usavam #888 sobre
      branco (3,5:1; o mínimo é 4,5:1). #6b6b6b (o cinza que o tema já usa
      em textos secundários) dá 5,3:1 e mantém o ar de subtítulo.
   b) "Links dependem da cor": nos cards, o link da categoria (#3b3b3b) e a
      data ao lado (#515151) quase não se diferenciam (1,4:1; precisa 3:1
      ou outro sinal). Um sublinhado discreto indica que é clicável.
   ========================================================================== */
.block-section .lead {
	color: #6b6b6b;
}

.blog-posts .entry-meta a {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}