/*
Theme Name: Casa Capixaba
Theme URI: https://casacapixaba.com.br
Template: blocksy
Author: J1 Studio
Author URI: https://j1studio.com.br
Description: Blocksy is a fast, modern WordPress theme with advanced WooCommerce support and full compatibility with the block editor.
Tags: accessibility-ready,blog,block-patterns,e-commerce,wide-blocks,block-styles,grid-layout,one-column,two-columns,three-columns,four-columns,right-sidebar,left-sidebar,translation-ready,custom-colors,custom-logo,custom-menu,featured-images,footer-widgets,full-width-template,theme-options,threaded-comments
Version: 1.0.0

*/

/* =============================================================================
   Casa Capixaba - bloco de avaliação
   Plugin: kk Star Ratings 5.4.10 | Tema: Blocksy (tema filho "Casa Capixaba")

   Onde colar: Aparência > Editor de temas > tema filho > style.css.
   Alternativa: Personalizar > CSS adicional.

   O CSS do plugin carrega antes do tema filho, então basta empatar a
   especificidade para vencer no cascade. O único !important necessário é no
   tamanho da legenda, que o plugin escreve como style inline no elemento.

   Nada aqui mexe em .kksr-stars-active, cuja largura inline é a nota exibida.
   ============================================================================= */

.kk-star-ratings {
  /* Paleta. Segue as variáveis do Blocksy e cai no fallback se elas sumirem.
     Trocar a cor da estrela é trocar estas duas linhas. */
  --kk-estrela-cheia:  #e8a33d;
  --kk-estrela-vazia:  var(--theme-palette-color-5, #e1e8ed);
  --kk-estrela-hover:  #d98218;

  --kk-titulo: var(--theme-palette-color-4, #192a3d);
  --kk-texto:  var(--theme-palette-color-3, #3a4f66);
  --kk-linha:  var(--theme-palette-color-5, #e1e8ed);
  --kk-fundo:  var(--theme-palette-color-7, #fafbfc);

  /* Mesma geometria de estrela do plugin, para o traçado não mudar. */
  --kk-forma: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 .587l3.668 7.568L24 9.306l-6.064 5.828 1.48 8.279L12 19.446l-7.417 3.967 1.481-8.279L0 9.306l8.332-1.151z'/%3E%3C/svg%3E");

  /* O plugin já entrega display:flex e align-items:center.
     Aqui só viramos o eixo para empilhar convite, estrelas e nota. */
  flex-direction: column;
  gap: .65rem;
  padding: 1.35rem 1.5rem 1.45rem;
  background: var(--theme-palette-color-7);
  border: 1px solid var(--kk-linha);
  border-radius: 8px;
}

/* O plugin define margin-top/bottom por classe de alinhamento vertical.
   Estas duas linhas empatam a especificidade e centralizam o bloco. */
.kk-star-ratings.kksr-valign-bottom,
.kk-star-ratings.kksr-valign-top {
  margin: 3rem auto;
}

/* ---- Convite e nota ------------------------------------------------------ */

/* order:-1 sobe o texto para cima das estrelas. O mesmo elemento exibe o
   convite quando não há voto e a nota depois que alguém vota. */
.kk-star-ratings .kksr-legend {
  order: -1;
  margin: 0;
  font-size: .95rem !important;   /* o plugin escreve font-size inline */
  line-height: 1.45;
  font-weight: 600;
  color: var(--kk-titulo);
}

/* O plugin deixa o convite em opacity .5, que some no fundo claro. */
.kk-star-ratings .kksr-muted {
  opacity: 1;
  color: var(--kk-titulo);
  font-weight: 600;
}

/* ---- Estrelas ------------------------------------------------------------ */

/* Recolore o SVG por máscara, o que faz a estrela seguir a paleta em vez de
   depender dos arquivos do plugin. Fora do @supports, a arte padrão continua. */
@supports (mask-image: none) or (-webkit-mask-image: none) {

  /* estrela vazia */
  .kk-star-ratings .kksr-stars .kksr-star .kksr-icon {
    background-image: none;
    background-color: var(--kk-estrela-vazia);
    -webkit-mask: var(--kk-forma) center / contain no-repeat;
            mask: var(--kk-forma) center / contain no-repeat;
  }

  /* estrela cheia: camada que a largura inline recorta conforme a nota */
  .kk-star-ratings .kksr-stars .kksr-stars-active .kksr-star .kksr-icon {
    background-image: none;
    background-color: var(--kk-estrela-cheia);
  }

  /* durante o hover, todas as estrelas até o cursor acendem */
  .kk-star-ratings:not(.kksr-disabled) .kksr-stars:hover .kksr-star .kksr-icon {
    background-image: none;
    background-color: var(--kk-estrela-hover);
  }

  /* e as posteriores ao cursor voltam a vazia */
  .kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star:hover ~ .kksr-star .kksr-icon {
    background-image: none;
    background-color: var(--kk-estrela-vazia);
  }
}

/* Retorno tátil no clique. O plugin já aplica transition .3s no ícone. */
.kk-star-ratings:not(.kksr-disabled) .kksr-stars .kksr-star:hover .kksr-icon {
  transform: scale(1.14);
}

/* ---- Depois do voto ------------------------------------------------------ */

/* Com .kksr-disabled o bloco vira leitura, então o cursor e o realce saem. */
.kk-star-ratings.kksr-disabled .kksr-stars .kksr-star .kksr-icon {
  transform: none;
}

.kk-star-ratings.kksr-disabled .kksr-legend {
  font-weight: 500;
  color: var(--kk-texto);
}

/* ---- Acessibilidade e telas pequenas ------------------------------------- */

.kk-star-ratings .kksr-stars:focus-visible {
  outline: 2px solid var(--kk-estrela-hover);
  outline-offset: 6px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .kk-star-ratings .kksr-stars .kksr-star .kksr-icon {
    transition: none;
    transform: none;
  }
}

@media (max-width: 480px) {
  .kk-star-ratings.kksr-valign-bottom,
  .kk-star-ratings.kksr-valign-top {
    margin: 2.25rem auto;
  }

  .kk-star-ratings {
    padding: 1.15rem 1rem 1.25rem;
  }

  .kk-star-ratings .kksr-legend {
    font-size: .9rem !important;
  }
}