/* ==========================================================================
   SHELTER BLOG — wp.css
   Classes que so existem no WordPress: acessibilidade, alinhamentos de bloco,
   legendas, paginacao, comentarios e tags.
   Carregado depois de style.css e content.css.
   ========================================================================== */

/* ---- Acessibilidade ------------------------------------------------- */
.screen-reader-text {
  border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
  height: 1px; width: 1px; margin: -1px; padding: 0;
  overflow: hidden; position: absolute !important; word-wrap: normal !important;
}
.screen-reader-text:focus {
  background: var(--c-paper); clip: auto; clip-path: none;
  color: var(--c-ink); display: block; font-size: 1rem;
  height: auto; left: 8px; line-height: normal; padding: 12px 16px;
  text-decoration: none; top: 8px; width: auto; z-index: 100000;
}

/* ---- Logo enviado pelo painel --------------------------------------- */
.wordmark--image img { display: block; max-height: 40px; width: auto; }

/* ---- Alinhamentos de bloco ------------------------------------------ */
.entry-content .alignleft  { float: left;  margin: 0 var(--sp-5) var(--sp-4) 0; max-width: 45%; }
.entry-content .alignright { float: right; margin: 0 0 var(--sp-4) var(--sp-5); max-width: 45%; }
.entry-content .aligncenter { margin-inline: auto; }
.entry-content .alignwide {
  width: min(100vw - (var(--gutter) * 2), 1080px);
  margin-inline: auto; max-width: none;
}
.entry-content .alignfull { width: auto; margin-inline: 0; }
.entry-content .wp-block-image img { height: auto; max-width: 100%; }
.entry-content .wp-caption { max-width: 100%; }
.entry-content .wp-caption-text,
.entry-content .wp-element-caption { font-size: var(--fs-caption); color: var(--c-mute); margin-top: var(--sp-2); }

.entry-content .wp-block-embed,
.entry-content .wp-block-video,
.entry-content .wp-block-table { margin-block: var(--sp-6); }
.entry-content .wp-block-table table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); }
.entry-content .wp-block-table td,
.entry-content .wp-block-table th { border: 1px solid var(--c-line); padding: var(--sp-3); text-align: left; }
.entry-content .wp-block-table th { background: var(--c-paper-2); font-weight: var(--fw-bold); }
.entry-content .wp-block-table { overflow-x: auto; }

.entry-content .wp-block-code,
.entry-content pre {
  background: var(--c-paper-2); border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: var(--sp-4); overflow-x: auto; font-size: var(--fs-caption);
}

.entry-content .wp-block-button__link {
  display: inline-block; background: var(--c-ink); color: var(--c-on-dark);
  border-radius: 999px; padding: 14px 24px; text-decoration: none; font-weight: var(--fw-bold);
}
.entry-content .wp-block-button__link:hover { background: var(--cta); color: var(--c-ink); }

/* ---- Tags do post ---------------------------------------------------- */
.entry-tags { margin-top: var(--sp-6); display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.entry-tags a {
  display: inline-block; border: 1px solid var(--c-line); border-radius: 999px;
  padding: 6px 14px; font-size: var(--fs-caption); color: var(--c-mute); text-decoration: none;
}
.entry-tags a:hover { border-color: var(--c-ink); color: var(--c-ink); }

/* ---- Paginacao ------------------------------------------------------- */
.navigation.pagination { margin-top: var(--sp-7); }
.navigation.pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--sp-2); justify-content: center; }
.navigation.pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; height: 44px; padding: 0 14px;
  border: 1px solid var(--c-line); border-radius: 999px;
  color: var(--c-ink); text-decoration: none; font-size: var(--fs-caption);
}
.navigation.pagination .page-numbers:hover { border-color: var(--c-ink); }
.navigation.pagination .page-numbers.current { background: var(--c-ink); color: var(--c-on-dark); border-color: var(--c-ink); }
.navigation.pagination .page-numbers.dots { border-color: transparent; }
.screen-reader-text + .nav-links { margin-top: 0; }

/* ---- Introducao de arquivo ------------------------------------------- */
.archive-intro { max-width: var(--content); color: var(--c-mute); margin-bottom: var(--sp-5); }

/* ---- Comentarios ------------------------------------------------------ */
.comments-area { margin-top: var(--sp-7); max-width: var(--content); margin-inline: auto; }
.comments-area .comment-list { list-style: none; padding: 0; margin: var(--sp-5) 0; }
.comments-area .comment-list li { margin-top: var(--sp-5); }
.comments-area .comment-body { border-top: 1px solid var(--c-line); padding-top: var(--sp-4); }
.comments-area .comment-meta { font-size: var(--fs-caption); color: var(--c-mute); }
.comments-area .comment-author img { border-radius: 50%; margin-right: var(--sp-2); vertical-align: middle; }
.comments-area .comment-form input[type="text"],
.comments-area .comment-form input[type="email"],
.comments-area .comment-form input[type="url"],
.comments-area .comment-form textarea {
  width: 100%; border: 1px solid var(--c-line); border-radius: var(--radius);
  padding: 12px 14px; font: inherit; background: var(--c-paper);
}
.comments-area .comment-form p { margin-top: var(--sp-3); }
.comments-area .form-submit input[type="submit"] {
  background: var(--c-ink); color: var(--c-on-dark); border: 0; border-radius: 999px;
  padding: 14px 28px; font-weight: var(--fw-bold); cursor: pointer;
}
.comments-area .form-submit input[type="submit"]:hover { background: var(--cta); color: var(--c-ink); }

/* ---- Paginacao dentro do post ---------------------------------------- */
.page-links { margin-top: var(--sp-5); display: flex; gap: var(--sp-2); font-size: var(--fs-caption); }

/* ---- Barra do admin ---------------------------------------------------
   Acima de 782px a barra do WordPress fica fixa no topo, entao o cabecalho
   e a coluna do indice precisam descer 32px. Abaixo disso ela rola junto
   com a pagina e nada muda. */
@media screen and (min-width: 783px) {
	.admin-bar .site-header { top: 32px; }
	.admin-bar .article-rail { top: 152px; }
}

/* ---- Aviso da newsletter --------------------------------------------- */
.form-note { color: var(--cta); }
.form-note--err { color: #d64545; }
.band-dark .form-note--err,
.nl-inline .form-note--err { color: #ff8a8a; }
.newsletter .form-microcopy { min-height: 1.2em; }

/* ---- Caixa de autoridade: menos aperto ---------------------------------
   A coluna ficou maior, entao o titulo e o rotulo cabem em menos linhas. */
/* O icone sai da frente do titulo: numa coluna estreita, lado a lado
   sobrava pouca largura e o titulo quebrava em tres linhas. */
.eeat-badge { flex-direction: column; align-items: flex-start; gap: 8px; }
.eeat-badge > div { width: 100%; }
.eeat-badge__k { letter-spacing: .10em; line-height: 1.3; margin-bottom: 3px; }
.eeat-badge b { line-height: 1.25; display: block; }
.eeat-points li { line-height: 1.55; }
.rail-eeat { padding: var(--sp-5); }
.rail-card { padding: var(--sp-4); }
.toc a { line-height: 1.35; }

/* ==========================================================================
   CABECALHO FIXO SEM TREMOR
   O cabecalho encolhe ao rolar. Como sticky, isso tirava ~71px da altura da
   pagina; o navegador corrigia a rolagem e o cabecalho voltava ao normal,
   entrando em laco (a tela tremia). Agora ele e fixed e um espacador de
   altura constante guarda o lugar dele. A altura da pagina nunca muda.
   ========================================================================== */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	max-height: 100vh;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.site-header-spacer { height: 190px; }

@media (max-width: 900px) {
	.site-header-spacer { height: 78px; }
}

/* O navegador nao deve compensar a rolagem quando o cabecalho muda. */
html { overflow-anchor: none; }

/* Links de ancora (indice do artigo) param abaixo do cabecalho. */
html { scroll-padding-top: 140px; }
.admin-bar { scroll-padding-top: 172px; }

/* ==========================================================================
   FOTO DO DESTAQUE DA HOME
   A caixa era fixa em 3:2 (deitada). As fotos do blog sao quadradas ou em pe,
   entao o corte "cover" comia 33% da imagem: a cabeca em cima e o calcado
   embaixo. Agora a caixa copia a proporcao real da foto (--ph-ar, vinda do
   PHP) e a imagem entra inteira. O fundo escuro cobre qualquer sobra.
   ========================================================================== */
.hero__media .ph--hero {
	aspect-ratio: var(--ph-ar, 3 / 2);
	max-height: 660px;
	background: transparent;
}
.hero__media .ph--hero > img {
	object-fit: contain;
	object-position: center;
}

/* Em telas estreitas o destaque vira uma faixa larga: limita a altura
   para a foto nao empurrar o titulo para fora da primeira tela. */
@media (max-width: 900px) {
	.hero__media .ph--hero { max-height: 62vh; }
}