/*
Theme Name: Tema CBBI
Template: twentytwentyfive
Version: 1.2.0
Description: Tema oficial do site da CBBI, baseado no Twenty Twenty-Five, com ajustes de leveza, alinhamento, proporção e acessibilidade.
Author: CBBI
*/

/* ============================================================
   0. BASE — utilitários e preferências do usuário
   ============================================================ */

/* Classe padrão do WordPress pra esconder visualmente mas manter
   acessível a leitores de tela (usada no H1 oculto do cabeçalho). */
.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;
  width: 1px;
  word-wrap: normal !important;
}

/* Respeita quem pediu menos animação no sistema operacional:
   desativa transições/animações decorativas em todo o site. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   1. TIPOGRAFIA — hierarquia e leitura mais confortável
   Títulos em Literata (serifada, já vem com o Twenty Twenty-Five —
   é a mesma fonte usada no Google Play Books, boa combinação
   temática pra um site de bibliotecas). Texto corrido continua
   em Manrope (sans-serif, mais confortável em blocos de texto).
   ============================================================ */
body {
  line-height: 1.65;
}

h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.wp-block-post-title {
  font-family: "Literata", Georgia, "Times New Roman", serif;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.wp-block-post-title {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}

/* Cor de texto secundário única, com contraste mínimo AA (4.5:1)
   em fundo branco — usada em datas e legendas no site inteiro. */
:root {
  --cbbi-muted-text: #5f5f5f;
}

.wp-block-post-date {
  font-size: 0.8rem;
  color: var(--cbbi-muted-text);
}

.wp-block-post-excerpt {
  font-size: 0.95rem;
  color: #3f3f3f;
}

/* ============================================================
   2. IMAGENS — proporção consistente em posts e destaques
   ============================================================ */
.wp-block-post-featured-image img,
.wp-block-latest-posts__featured-image img {
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 6px;
  width: 100%;
}

/* ============================================================
   3. LISTA DE POSTS (Query Loop) — cards leves
   ============================================================ */
.wp-block-post {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  padding: 1rem;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* :hover só onde existe mouse de verdade — evita "hover grudado"
   em toque no celular (Safari/Chrome iOS e Android). */
@media (hover: hover) and (pointer: fine) {
  .wp-block-post:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
  }
}

/* ============================================================
   4. GRADE DO INSTAGRAM (plugin Spotlight)
   Ajuste leve pra combinar com o resto do layout, caso o plugin
   não aplique border-radius por padrão.
   ============================================================ */
.cbbi-instagram-grid img {
  border-radius: 6px;
}

/* Espaço reservado da seção do Instagram: mesma proporção 16:9 do
   vídeo do YouTube ao lado, pra manter as duas colunas simétricas
   enquanto o plugin Spotlight não é conectado. Assim que o bloco
   real do Spotlight for inserido no lugar, essa regra deixa de
   fazer efeito (ela só afeta o aviso de placeholder). */
.cbbi-instagram-placeholder {
  aspect-ratio: 16 / 9;
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    45deg,
    #f4f5f7,
    #f4f5f7 10px,
    #eceef1 10px,
    #eceef1 20px
  );
  border: 1px dashed #c7c7c7;
  border-radius: 8px;
  text-align: center;
}

.cbbi-instagram-placeholder p {
  max-width: 320px;
  color: var(--cbbi-muted-text);
  font-size: 0.85rem;
}

/* ============================================================
   5. FOOTER — alinhar e padronizar logo do site + logo de apoio,
   independente do tamanho original de cada arquivo enviado
   ============================================================ */
.cbbi-footer .wp-block-site-logo img,
.cbbi-footer .cbbi-footer-support-logo img {
  max-height: 42px;
  width: auto;
  height: auto;
  object-fit: contain;
}

.cbbi-footer .wp-block-columns {
  align-items: flex-end;
}