/* ============================================
   BEGOLD JOURNAL — correções de layout
   ============================================ */

/* ---------- 1. PADRONIZA O CORTE DAS IMAGENS DOS CARDS ----------
   Força todas as thumbnails de post a terem a mesma proporção
   e a preencher o espaço sem distorcer (corte centralizado).      */

.post-thumbnail img,
.entry-thumbnail img,
article .wp-post-image,
.posts-grid img,
.card img,
.post-card img,
.grid-item img,
figure.post-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;   /* corta sem esticar */
    object-position: center center !important;
    display: block;
}

/* Define a "moldura" com proporção fixa (3:4 retrato, padrão de revista).
   Troque 3 / 4 por 1 / 1 (quadrado) ou 4 / 3 (paisagem) se preferir. */
.post-thumbnail,
.entry-thumbnail,
.posts-grid figure,
.card figure,
.post-card figure,
.grid-item figure {
    aspect-ratio: 3 / 4 !important;
    overflow: hidden !important;
    position: relative;
}

/* ---------- 2. ESCONDE O BLOCO "RELACIONADAS" (cards do tema) ----------
   Mantém apenas o "Relacionado" nativo do Jetpack (links de texto).      */

/* Bloco de relacionados próprio do tema (cards grandes) */
.related-posts:not(.jp-relatedposts),
.related-articles,
.post-related,
.single-related,
.related-cards,
section.relacionadas,
.relacionadas {
    display: none !important;
}

/* Garante que o relacionado do Jetpack (o que você quer manter) apareça */
#jp-relatedposts,
.jp-relatedposts {
    display: block !important;
}

/* ---------- 3. MENU MOBILE: subitens maiores e com área de toque adequada ---------- */
@media (max-width: 920px) {
    .sub-menu a,
    .sub-menu .menu-item a {
        font-size: 1.05rem !important;       /* ~14px, antes estava miúdo */
        padding: 14px 8px !important;        /* área de toque ≥ 44px (padrão de acessibilidade) */
        line-height: 1.4 !important;
        display: block !important;
        min-height: 44px;
        box-sizing: border-box;
    }
    .sub-menu li + li {
        margin-top: 2px;                     /* respiro entre um subitem e outro */
    }
}

/* ---------- 4. SUBSTITUI OS LOGOS PELA VERSÃO DOURADO ESCURO (via CSS) ---------- */

/* Logo do topo (cabeçalho) */
header img,
.site-header img,
#header img,
nav .logo img,
.custom-logo,
.site-logo img,
.navbar-brand img {
    content: url("https://begoldjournal.com.br/wp-content/uploads/2026/06/BEGOLD_dourado-classico.png") !important;
}

/* Bezinho da newsletter (pega pelo nome do arquivo, antigo ou novo) */
img[src*="BEZINHO" i],
img[src*="bezinho" i] {
    content: url("https://begoldjournal.com.br/wp-content/uploads/2026/06/BEZINHO_dourado-classico-1.png") !important;
}

/* Logo do rodapé */
footer img,
.site-footer img,
#footer img,
.footer-logo img {
    content: url("https://begoldjournal.com.br/wp-content/uploads/2026/06/BEGOLD_dourado-classico.png") !important;
}
/* Bezinho da newsletter (arquivo antigo do tema -> versão nova) */
img[src*="begold-b.png"] {
    content: url("https://begoldjournal.com.br/wp-content/uploads/2026/06/BEZINHO_dourado-classico-1.png") !important;
}

/* ---------- 5. AVATAR DE AUTOR: troca pelo bezinho ---------- */
img.avatar,
img[src*="gravatar.com"] {
    content: url("https://begoldjournal.com.br/wp-content/uploads/2023/09/bezinho.png") !important;
}

/* ---------- 6. PLAYER DE ÁUDIO: linha do tempo ---------- */
.audio-player { flex-wrap: wrap; }

.audio-timeline {
    flex-basis: 100%;
    grid-column: 1 / -1;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
}
.audio-time {
    font-size: 12px;
    color: var(--muted, #6E665C);
    font-variant-numeric: tabular-nums;
    min-width: 40px;
}
.audio-time-left { text-align: right; }

.audio-track {
    position: relative;
    flex: 1;
    height: 4px;
    background: var(--line, rgba(28,27,26,.12));
    border-radius: 999px;
    cursor: pointer;
    touch-action: none;
}
.audio-track::before { content: ""; position: absolute; inset: -12px 0; } /* área de toque maior no celular */
.audio-track-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    width: 0%;
    background: var(--gold, #C2A76F);
    border-radius: 999px;
}
.audio-track-thumb {
    position: absolute; top: 50%; left: 0%;
    width: 14px; height: 14px;
    background: var(--gold, #C2A76F);
    border: 2px solid var(--paper, #FFFDF8);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 1px 3px rgba(0,0,0,.18);
}
.audio-track:focus-visible { outline: 2px solid var(--gold, #C2A76F); outline-offset: 6px; }

.entry-subtitle {   /* troque pelo seletor real da linha fina */
  -webkit-line-clamp: unset;
  max-height: none;
  overflow: visible;
  display: block;
}