/* Fabula Core Beta 1.0.6 — ajustes visuais limitados ao tema.
 * Mantem intactas as regras editoriais legadas e os shortcodes dos plugins.
 */

/* Postagem individual: titulo, autor e data na cor do texto principal.
 * Links continuam com o efeito de hover/foco definido pelo tema. */
body.single-post #main .fabula-single > .entry-header > .entry-title,
body.single-post #main .fabula-single > .entry-header .entry-meta-elements .author,
body.single-post #main .fabula-single > .entry-header .entry-meta-elements .posted-on,
body.single-post #main .fabula-single > .entry-header .entry-meta-elements .posted-on time,
body.single-post #main .fabula-single > .entry-header .entry-meta-elements .author a:not(:hover):not(:focus-visible) {
    color: #161b2b;
}

/* WordPress move o formulario para baixo de um comentario ao clicar
 * em "Responder". O link de cancelamento precisa de espaco em ambos
 * os locais; usar margem logica para respeitar a direcao do texto. */
#main .comment-respond .comment-reply-title #cancel-comment-reply-link {
    display: inline-block;
    margin-inline-start: 18px;
    font-size: .68em;
    vertical-align: baseline;
    white-space: nowrap;
}

@media (max-width: 520px) {
    #main .comment-respond .comment-reply-title #cancel-comment-reply-link {
        margin-inline-start: 12px;
    }
}

/* Imagens explicitamente centralizadas nos cabecalhos [panel-header].
 * O CSS legado define display:block nos <img> de paragrafos,
 * o que faz text-align:center do editor deixar de surtir efeito.
 * Regras limitadas aos paineis e a marcacoes de centralizacao. */
#main .entry-content .panel .panel-heading img.aligncenter,
#main .entry-content .panel .panel-heading .aligncenter img:not(.alignleft):not(.alignright),
#main .entry-content .panel .panel-heading :is(p,h2,h3,div)[style*="text-align: center"] img:not(.alignleft):not(.alignright),
#main .entry-content .panel .panel-heading :is(p,h2,h3,div)[style*="text-align:center"] img:not(.alignleft):not(.alignright),
#main .entry-content .panel .panel-heading .has-text-align-center img:not(.alignleft):not(.alignright) {
    display: block;
    float: none;
    margin-inline: auto;
    max-width: 100%;
    height: auto;
}

/* Beta 1.0.13 — compatibilidade com o novo shortcode Colunas Fabula.
 * Atua apenas no layout gerado por [fabula-colunas], dentro da postagem
 * e em telas de celular. Nao modifica [row], galerias ou imagens soltas. */
@media (max-width: 520px) {
  body #page .entry-content .fabula-colunas {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    min-width: 0;
  }
  body #page .entry-content .fabula-colunas > .fabula-coluna {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0;
    flex: 0 1 100% !important;
  }
}


/* Beta 1.0.14 — botoes secundarios do formulario de comentarios.
 * Preserva os links nativos de cancelamento e logout do WordPress;
 * altera apenas a apresentacao, inclusive quando o formulario e movido
 * para responder a um comentario encadeado. */
#main .comment-respond .comment-reply-title #cancel-comment-reply-link {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  vertical-align: middle;
  min-height: 38px;
  padding: 8px 14px;
  margin-inline-start: 18px;
  border: 1px solid var(--fabula-primary, #3275c5);
  border-radius: 4px;
  background: #fff;
  color: var(--fabula-primary, #3275c5);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background-color .2s ease, color .2s ease;
}
#main .comment-respond .comment-reply-title #cancel-comment-reply-link:hover,
#main .comment-respond .comment-reply-title #cancel-comment-reply-link:focus-visible {
  background: var(--fabula-primary, #3275c5);
  color: #fff;
}
#main .comment-respond .fabula-comment-account a.fabula-comment-logout {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 36px;
  padding: 7px 13px;
  border: 1px solid var(--fabula-primary, #3275c5);
  border-radius: 4px;
  background: #fff;
  color: var(--fabula-primary, #3275c5);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none !important;
  transition: background-color .2s ease, color .2s ease;
}
#main .comment-respond .fabula-comment-account a.fabula-comment-logout:hover,
#main .comment-respond .fabula-comment-account a.fabula-comment-logout:focus-visible {
  background: var(--fabula-primary, #3275c5);
  color: #fff;
}
/* Clip na propria imagem garante avatar redondo mesmo que um plugin
 * local de avatares adicione radius=0 ou imagem nao quadrada. */
#main .comment-respond .fabula-comment-account img.fabula-comment-account-avatar,
#main .comment-respond .fabula-comment-account-identity > img,
#main .comment-respond .logged-in-as .fabula-comment-account-avatar {
  width: 34px !important;
  height: 34px !important;
  min-width: 34px;
  object-fit: cover !important;
  border-radius: 50% !important;
  clip-path: circle(50% at center);
  vertical-align: middle;
}

/* Compatibilidade com o antigo Bootstrap [row][column]:
 * - row gera .row com filhos diretos .col-xs-N, .col-md-N etc;
 * - valores legados fora do grid (ex.: xs=23) nao tem largura definida;
 * - no celular empilha APENAS grids presentes no conteudo editorial.
 * O layout desktop e as .row usadas no cabecalho/rodape nao mudam. */
@media (max-width: 640px) {
  body #page .entry-content .row:has(> [class*="col-"]) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
  body #page .entry-content .row:has(> [class*="col-"]) > [class*="col-"] {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
  /* O icone isolado na primeira coluna fica acima do texto, centralizado,
   * sem se sobrepor a linhas justificadas da notificacao. */
  body #page .entry-content .row:has(> [class*="col-"]) > [class*="col-"]:first-child:has(.shp-icon) {
    text-align: center;
  }
  body #page .entry-content .row:has(> [class*="col-"]) > [class*="col-"] .shp-icon {
    max-width: 100%;
  }
  #main .comment-respond .comment-reply-title #cancel-comment-reply-link {
    margin-inline-start: 10px;
    min-height: 34px;
    padding: 7px 10px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  #main .comment-respond .comment-reply-title #cancel-comment-reply-link,
  #main .comment-respond .fabula-comment-account a.fabula-comment-logout {
    transition: none;
  }
}

/* Valores antigos de 13 a 24 colunas tambem sao invalidos no Bootstrap
 * em tablets (641 a 1199 px). Corrigir APENAS as rows afetadas. */
@media (min-width: 641px) and (max-width: 1199px) {
  body #page .entry-content .row:has(> :is(
    [class*="col-xs-13"],
    [class*="col-xs-14"],
    [class*="col-xs-15"],
    [class*="col-xs-16"],
    [class*="col-xs-17"],
    [class*="col-xs-18"],
    [class*="col-xs-19"],
    [class*="col-xs-20"],
    [class*="col-xs-21"],
    [class*="col-xs-22"],
    [class*="col-xs-23"],
    [class*="col-xs-24"],
    [class*="col-sm-13"],
    [class*="col-sm-14"],
    [class*="col-sm-15"],
    [class*="col-sm-16"],
    [class*="col-sm-17"],
    [class*="col-sm-18"],
    [class*="col-sm-19"],
    [class*="col-sm-20"],
    [class*="col-sm-21"],
    [class*="col-sm-22"],
    [class*="col-sm-23"],
    [class*="col-sm-24"],
    [class*="col-md-13"],
    [class*="col-md-14"],
    [class*="col-md-15"],
    [class*="col-md-16"],
    [class*="col-md-17"],
    [class*="col-md-18"],
    [class*="col-md-19"],
    [class*="col-md-20"],
    [class*="col-md-21"],
    [class*="col-md-22"],
    [class*="col-md-23"],
    [class*="col-md-24"]
  )) {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    gap: 8px;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin-inline: 0 !important;
    box-sizing: border-box;
  }
  body #page .entry-content .row:has(> :is(
    [class*="col-xs-13"],
    [class*="col-xs-14"],
    [class*="col-xs-15"],
    [class*="col-xs-16"],
    [class*="col-xs-17"],
    [class*="col-xs-18"],
    [class*="col-xs-19"],
    [class*="col-xs-20"],
    [class*="col-xs-21"],
    [class*="col-xs-22"],
    [class*="col-xs-23"],
    [class*="col-xs-24"],
    [class*="col-sm-13"],
    [class*="col-sm-14"],
    [class*="col-sm-15"],
    [class*="col-sm-16"],
    [class*="col-sm-17"],
    [class*="col-sm-18"],
    [class*="col-sm-19"],
    [class*="col-sm-20"],
    [class*="col-sm-21"],
    [class*="col-sm-22"],
    [class*="col-sm-23"],
    [class*="col-sm-24"],
    [class*="col-md-13"],
    [class*="col-md-14"],
    [class*="col-md-15"],
    [class*="col-md-16"],
    [class*="col-md-17"],
    [class*="col-md-18"],
    [class*="col-md-19"],
    [class*="col-md-20"],
    [class*="col-md-21"],
    [class*="col-md-22"],
    [class*="col-md-23"],
    [class*="col-md-24"]
  )) > [class*="col-"] {
    display: block !important;
    float: none !important;
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-inline: 0 !important;
    box-sizing: border-box;
    overflow-wrap: anywhere;
  }
  body #page .entry-content .row:has(> :is(
    [class*="col-xs-13"],
    [class*="col-xs-14"],
    [class*="col-xs-15"],
    [class*="col-xs-16"],
    [class*="col-xs-17"],
    [class*="col-xs-18"],
    [class*="col-xs-19"],
    [class*="col-xs-20"],
    [class*="col-xs-21"],
    [class*="col-xs-22"],
    [class*="col-xs-23"],
    [class*="col-xs-24"],
    [class*="col-sm-13"],
    [class*="col-sm-14"],
    [class*="col-sm-15"],
    [class*="col-sm-16"],
    [class*="col-sm-17"],
    [class*="col-sm-18"],
    [class*="col-sm-19"],
    [class*="col-sm-20"],
    [class*="col-sm-21"],
    [class*="col-sm-22"],
    [class*="col-sm-23"],
    [class*="col-sm-24"],
    [class*="col-md-13"],
    [class*="col-md-14"],
    [class*="col-md-15"],
    [class*="col-md-16"],
    [class*="col-md-17"],
    [class*="col-md-18"],
    [class*="col-md-19"],
    [class*="col-md-20"],
    [class*="col-md-21"],
    [class*="col-md-22"],
    [class*="col-md-23"],
    [class*="col-md-24"]
  )) > [class*="col-"]:first-child:has(.shp-icon) {
    text-align: center;
  }
}