/**
 * Tempero Banners — Camada de estilo do slider
 * ---------------------------------------------------------------------------
 * Este arquivo NÃO faz parte do Slick Slider (slick.css / slick.min.js) — ele
 * só estiliza por cima, usando os próprios seletores que o Slick já gera
 * (.slick-prev, .slick-next, .slick-dots...), escopados dentro de
 * .tempero-banner-wrapper para não vazar para outros sliders da página.
 *
 * Para ajustar a aparência (setas, bullets, posicionamento), troque os
 * valores das variáveis (custom properties) na seção "1. VARIÁVEIS" abaixo.
 * Não é necessário mexer nas regras mais abaixo a não ser que precise de
 * algo fora do que as variáveis cobrem.
 *
 * Carregado sempre por tempero_banners_assets() em tempero_banners.php,
 * independente de o core do Slick vir do tema ou do próprio plugin.
 * ---------------------------------------------------------------------------
 */

.tempero-banner-wrapper {
    position: relative;

    /* =========================================================================
       1. VARIÁVEIS — ajuste aqui para mudar o visual do slider
       ========================================================================= */

    /* --- Setas (prev/next) --- */
    --tb-arrow-size: 44px;              /* largura/altura do botão da seta */
    --tb-arrow-icon-size: 18px;         /* tamanho do ícone dentro do botão */
    --tb-arrow-color: #ffffff;          /* cor do ícone */
    --tb-arrow-bg: rgba(0, 0, 0, 0.15); /* fundo do botão — transparente */
    --tb-arrow-bg-hover: rgba(0, 0, 0, 0.3);
    --tb-arrow-offset: 20px;            /* distância da seta até a borda lateral do slider */
    --tb-arrow-radius: 0;               /* sem arredondamento */

    /* --- Setas e bullets: alinhamento na base --- */
    --tb-controls-bottom: 16px;         /* distância das setas E dos bullets até o rodapé do slide */

    /* --- Bullets / dots --- */
    --tb-dot-size: 16px;                /* diâmetro de cada dot */
    --tb-dot-gap: 10px;                 /* espaço entre os dots */
    --tb-dot-color: rgba(255, 255, 255, 0.5);   /* dot inativo */
    --tb-dot-color-active: #ffffff;             /* dot ativo */
    --tb-dot-border: none;              /* borda opcional dos dots, ex: 1px solid #fff */

    /* --- Slide --- */
    --tb-slide-radius: 0px;             /* arredondamento das bordas do slide/imagem */
}

/* =============================================================================
   2. SETAS (prev/next)
   ============================================================================= */

.tempero-banner-wrapper .slick-prev,
.tempero-banner-wrapper .slick-next {
    position: absolute;
    /* Posição vertical por variáveis: os temas põem as setas na base (padrão)
       ou no meio das laterais (--tb-arrow-top: 50% + --tb-arrow-shift: -50%). */
    top: var(--tb-arrow-top, auto);
    bottom: var(--tb-arrow-bottom, var(--tb-controls-bottom));
    translate: 0 var(--tb-arrow-shift, 0);
    width: var(--tb-arrow-size);
    height: var(--tb-arrow-size);
    background: var(--tb-arrow-bg);
    border-radius: var(--tb-arrow-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 11;
    transition: background-color 0.2s ease;
}

.tempero-banner-wrapper .slick-prev:hover,
.tempero-banner-wrapper .slick-next:hover {
    background: var(--tb-arrow-bg-hover);
}

.tempero-banner-wrapper .slick-prev {
    left: var(--tb-arrow-offset);
}

.tempero-banner-wrapper .slick-next {
    right: var(--tb-arrow-offset);
}

.tempero-banner-wrapper .slick-prev i,
.tempero-banner-wrapper .slick-next i {
    color: var(--tb-arrow-color);
    font-size: var(--tb-arrow-icon-size);
    line-height: 1;
}

/* =============================================================================
   3. BULLETS / DOTS
   ============================================================================= */

.tempero-banner-wrapper .slick-dots {
    position: absolute;
    bottom: var(--tb-dots-bottom, var(--tb-controls-bottom));
    left: 0;
    right: 0;
    display: flex;
    justify-content: var(--tb-dots-justify, center);
    gap: var(--tb-dot-gap);
    z-index: 10;
}

.tempero-banner-wrapper .slick-dots li {
    position: relative;
    width: auto;
    height: auto;
    margin: 0;
}

.tempero-banner-wrapper .slick-dots li button {
    position: relative;
    width: var(--tb-dot-width, var(--tb-dot-size));
    height: var(--tb-dot-height, var(--tb-dot-size));
    padding: 0;
    /* O Slick coloca o número do slide como texto dentro do botão (ex: "1", "2").
       Escondemos esse texto — só o :before (o círculo do dot) deve aparecer. */
    font-size: 0;
    line-height: 0;
    color: transparent;
	background-color: #ffffff66;
}

.tempero-banner-wrapper	::marker {
		display: none;
		content: '';
}


.tempero-banner-wrapper .slick-dots li button:before {
    content: '';
    width: var(--tb-dot-width, var(--tb-dot-size));
    height: var(--tb-dot-height, var(--tb-dot-size));
    border-radius: var(--tb-dot-radius, 50%);
    background: var(--tb-dot-color);
    border: var(--tb-dot-border);
    opacity: 1;
    top: 0;
    left: 0;
}

.tempero-banner-wrapper .slick-dots li.slick-active button:before {
    background: var(--tb-dot-color-active);
}

/* =============================================================================
   4. SLIDE / IMAGEM
   ============================================================================= */

.tempero-banner-wrapper .slide-item,
.tempero-banner-wrapper .slide-item picture,
.tempero-banner-wrapper .slide-item img {
    border-radius: var(--tb-slide-radius);
    overflow: hidden;
}

/* O WordPress injeta um "max-width" inline na <img> baseado na resolução nativa
   do arquivo (ex: max-width:1905px) — é um recurso do core para evitar upscale
   em telas comuns, mas trava o banner bem antes de telas maiores que Full HD
   (2K, 4K, ultrawide), deixando espaço em branco na lateral. Como este banner é
   full-bleed (deve sempre preencher a tela), sobrescrevemos esse limite aqui.
   !important é necessário porque o estilo do WordPress é inline (maior
   especificidade que uma regra normal de stylesheet). */
.tempero-banner-wrapper .slide-item picture,
.tempero-banner-wrapper .slide-item img {
    max-width: none !important;
    width: 100% !important;
    height: auto !important;
}

/* =============================================================================
   5. TEXTO ACESSÍVEL (SOMENTE LEITOR DE TELA)
   ============================================================================= */

/* Descrição do que está escrito na imagem do banner (preenchida no editor de
   conteúdo do banner, no admin). Fica presente no DOM e é lida por leitores de
   tela, mas nunca aparece visualmente — por isso usa "clip", não display:none
   (que também esconderia de tecnologia assistiva). Ver tempero_slider_shortcode(). */
.tb-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* =============================================================================
   6. MOTOR EM JAVASCRIPT PRÓPRIO (sem jQuery, sem Slick)
   -----------------------------------------------------------------------------
   Marcação gerada por tempero_slider_shortcode() quando o motor é "vanilla":

     .tempero-banner-wrapper.tb-tema-X.tb-motor-vanilla
       .tb-slider[data-transicao=fade|slide]
         .tb-track > .slide-item(.is-active)
         button.tb-arrow.tb-prev / .tb-next
         .tb-dots > button.tb-dot(.is-active)
         .tb-contador

   O script (assets/js/tempero-banner.js) só troca classes; fade, slide e os
   temas são desenhados aqui. As mesmas variáveis --tb-* da seção 1 valem para
   os dois motores.
   ============================================================================= */

.tb-slider {
    position: relative;
    /* Arrastar para o lado troca o banner; a rolagem vertical continua do navegador. */
    touch-action: pan-y;
}

/* --- Fade: todos os banners na mesma célula; só o ativo fica visível. A célula
   tem a altura do banner mais alto, então nada pula quando eles se alternam. --- */
.tb-slider[data-transicao="fade"] .tb-track {
    display: grid;
}

.tb-slider[data-transicao="fade"] .slide-item {
    grid-area: 1 / 1;
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--tb-velocidade, 800ms) linear, visibility 0s linear var(--tb-velocidade, 800ms);
}

.tb-slider[data-transicao="fade"] .slide-item.is-active {
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

/* --- Slide: os banners lado a lado; o trilho anda um banner por vez
   (--tb-i = índice do banner visível, posto pelo script). --- */
.tb-slider[data-transicao="slide"] {
    overflow: hidden;
}

.tb-slider[data-transicao="slide"] .tb-track {
    display: flex;
    translate: calc(var(--tb-i, 0) * -100%) 0;
    transition: translate var(--tb-velocidade, 800ms) ease;
}

.tb-slider[data-transicao="slide"] .slide-item {
    flex: 0 0 100%;
    min-width: 0;
}

@media (prefers-reduced-motion: reduce) {
    .tb-slider .slide-item,
    .tb-slider .tb-track {
        transition-duration: 0.01ms !important;
    }
}

/* Os controles são <button>: zera o que o tema do site costuma dar a botões
   (aparência nativa, tamanho mínimo, sombra, tipografia) para o desenho ser
   só o das variáveis --tb-*. */
.tempero-banner-wrapper :is(.tb-arrow, .tb-dot) {
    box-sizing: border-box;
    min-width: 0;
    min-height: 0;
    margin: 0;
    font: inherit;
    font-size: 0;
    line-height: 0;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
}

/* --- Setas --- */
.tempero-banner-wrapper .tb-arrow {
    position: absolute;
    top: var(--tb-arrow-top, auto);
    bottom: var(--tb-arrow-bottom, var(--tb-controls-bottom));
    translate: 0 var(--tb-arrow-shift, 0);
    z-index: 11;
    display: grid;
    place-items: center;
    width: var(--tb-arrow-size);
    height: var(--tb-arrow-size);
    padding: 0;
    border: var(--tb-arrow-border, 0);
    border-radius: var(--tb-arrow-radius);
    background: var(--tb-arrow-bg);
    box-shadow: var(--tb-arrow-shadow, none);
    color: var(--tb-arrow-color);
    cursor: pointer;
    transition: background-color 0.2s ease, opacity 0.2s ease;
}

.tempero-banner-wrapper .tb-arrow:hover {
    background: var(--tb-arrow-bg-hover);
}

.tempero-banner-wrapper .tb-arrow svg {
    width: var(--tb-arrow-icon-size);
    height: var(--tb-arrow-icon-size);
}

.tempero-banner-wrapper .tb-prev { left: var(--tb-arrow-offset); }
.tempero-banner-wrapper .tb-next { right: var(--tb-arrow-offset); }

/* --- Bullets --- */
.tempero-banner-wrapper .tb-dots {
    position: absolute;
    right: 0;
    bottom: var(--tb-dots-bottom, var(--tb-controls-bottom));
    left: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: var(--tb-dots-justify, center);
    gap: var(--tb-dot-gap);
    padding-inline: var(--tb-dots-padding, 0);
    /* A faixa não bloqueia o clique no banner; só os bullets recebem. */
    pointer-events: none;
}

.tempero-banner-wrapper .tb-dot {
    position: relative;
    flex: none;
    width: var(--tb-dot-width, var(--tb-dot-size));
    height: var(--tb-dot-height, var(--tb-dot-size));
    padding: 0;
    overflow: hidden;
    border: var(--tb-dot-border);
    border-radius: var(--tb-dot-radius, 50%);
    background: var(--tb-dot-color);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color 0.2s ease, width 0.2s ease;
}

.tempero-banner-wrapper .tb-dot.is-active {
    width: var(--tb-dot-width-active, var(--tb-dot-width, var(--tb-dot-size)));
    background: var(--tb-dot-color-active);
    outline: var(--tb-dot-ring, none);
    outline-offset: 3px;
}

/* Foco de teclado visível em qualquer tema. */
.tempero-banner-wrapper .tb-arrow:focus-visible,
.tempero-banner-wrapper .tb-dot:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* --- Contador (só o tema "numerado" mostra) --- */
.tempero-banner-wrapper .tb-contador {
    display: none;
}

/* =============================================================================
   7. TEMAS
   -----------------------------------------------------------------------------
   Um tema é um conjunto de valores das variáveis --tb-* mais, quando preciso,
   uma ou outra regra de posição. Escolha em Banners > Configurações ou no
   shortcode (tema="circulos"). O tema do site pode sobrescrever qualquer
   variável em .tempero-banner-wrapper.

   classico   = os valores da seção 1 (visual original do plugin)
   ============================================================================= */

/* --- minimal: bolinhas pequenas; setas finas, sem fundo, no meio das laterais,
   visíveis só com o mouse em cima (em telas de toque ficam sempre visíveis). --- */
.tb-tema-minimal {
    --tb-arrow-size: 48px;
    --tb-arrow-icon-size: 30px;
    --tb-arrow-bg: transparent;
    --tb-arrow-bg-hover: rgba(0, 0, 0, 0.18);
    --tb-arrow-radius: 50%;
    --tb-arrow-offset: 12px;
    --tb-arrow-top: 50%;
    --tb-arrow-bottom: auto;
    --tb-arrow-shift: -50%;
    --tb-dot-size: 8px;
    --tb-dot-gap: 8px;
    --tb-dot-color: rgba(255, 255, 255, 0.55);
}

@media (hover: hover) {
    .tb-tema-minimal :is(.tb-arrow, .slick-prev, .slick-next) {
        opacity: 0;
    }

    .tb-tema-minimal:is(:hover, :focus-within) :is(.tb-arrow, .slick-prev, .slick-next) {
        opacity: 1;
    }
}

/* --- barras: indicadores em traços; o do banner atual se enche durante o
   intervalo da passagem automática (só no motor próprio). --- */
.tb-tema-barras {
    --tb-dot-width: 36px;
    --tb-dot-height: 4px;
    --tb-dot-radius: 2px;
    --tb-dot-gap: 6px;
    --tb-dot-color: rgba(255, 255, 255, 0.4);
    --tb-dot-color-active: rgba(255, 255, 255, 0.4);
    --tb-controls-bottom: 20px;
    --tb-arrow-size: 44px;
    --tb-arrow-icon-size: 22px;
    --tb-arrow-bg: rgba(0, 0, 0, 0.25);
    --tb-arrow-bg-hover: rgba(0, 0, 0, 0.45);
    --tb-arrow-radius: 50%;
    --tb-arrow-top: 50%;
    --tb-arrow-bottom: auto;
    --tb-arrow-shift: -50%;
}

.tb-tema-barras .tb-dot.is-active::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    transform-origin: left;
}

/* Parado (mouse em cima, um banner só tocando sem autoplay): traço cheio. */
.tb-tema-barras .tb-slider.is-tocando .tb-dot.is-active::after {
    animation: tb-enche var(--tb-intervalo, 5000ms) linear both;
}

@keyframes tb-enche {
    from { scale: 0 1; }
}

/* No Slick não há enchimento: o traço ativo fica só branco cheio. */
.tb-tema-barras.tb-motor-slick {
    --tb-dot-color-active: #fff;
}

/* --- circulos: setas em círculos brancos com sombra, no meio das laterais;
   bolinha ativa com anel (padrão de vitrine de loja). --- */
.tb-tema-circulos {
    --tb-arrow-size: 48px;
    --tb-arrow-icon-size: 22px;
    --tb-arrow-color: #222;
    --tb-arrow-bg: #fff;
    --tb-arrow-bg-hover: #f1f1f1;
    --tb-arrow-radius: 50%;
    --tb-arrow-shadow: 0 2px 10px rgba(0, 0, 0, 0.22);
    --tb-arrow-offset: 16px;
    --tb-arrow-top: 50%;
    --tb-arrow-bottom: auto;
    --tb-arrow-shift: -50%;
    --tb-dot-size: 10px;
    --tb-dot-gap: 12px;
    --tb-dot-color: rgba(255, 255, 255, 0.6);
    --tb-dot-ring: 2px solid #fff;
}

.tb-tema-circulos :is(.slick-prev, .slick-next) {
    box-shadow: var(--tb-arrow-shadow);
}

.tb-tema-circulos :is(.slick-prev, .slick-next) i {
    color: var(--tb-arrow-color);
}

/* --- numerado: contador à esquerda e as duas setas juntas à direita, na base;
   sem bolinhas (estilo editorial). Só no motor próprio; no Slick cai no
   visual das setas agrupadas, com as bolinhas do clássico. --- */
.tb-tema-numerado {
    --tb-arrow-size: 44px;
    --tb-arrow-icon-size: 20px;
    --tb-arrow-bg: rgba(0, 0, 0, 0.45);
    --tb-arrow-bg-hover: rgba(0, 0, 0, 0.7);
    --tb-arrow-radius: 0;
    --tb-controls-bottom: 20px;
}

.tb-tema-numerado :is(.tb-prev, .slick-prev) {
    right: calc(var(--tb-arrow-offset) + var(--tb-arrow-size) + 2px);
    left: auto;
}

.tb-tema-numerado.tb-motor-vanilla .tb-dots {
    display: none;
}

.tb-tema-numerado .tb-contador {
    position: absolute;
    bottom: var(--tb-controls-bottom);
    left: var(--tb-arrow-offset);
    z-index: 10;
    display: flex;
    align-items: baseline;
    height: var(--tb-arrow-size);
    padding-inline: 14px;
    background: var(--tb-arrow-bg);
    color: #fff;
    font-size: 15px;
    font-variant-numeric: tabular-nums;
    line-height: var(--tb-arrow-size);
    letter-spacing: 0.04em;
}

.tb-tema-numerado .tb-contador__atual {
    font-size: 20px;
    font-weight: 700;
}

.tb-tema-numerado .tb-contador__total {
    opacity: 0.75;
}

/* --- fora: setas e bolinhas ABAIXO da imagem, na cor do texto do site; a arte
   fica totalmente livre. O slider ganha uma faixa de 56 px embaixo. --- */
.tb-tema-fora {
    --tb-fora-faixa: 56px;
    --tb-controls-bottom: 10px;
    --tb-arrow-size: 36px;
    --tb-arrow-icon-size: 20px;
    --tb-arrow-color: currentColor;
    --tb-arrow-bg: transparent;
    --tb-arrow-bg-hover: color-mix(in srgb, currentColor 12%, transparent);
    --tb-arrow-radius: 50%;
    --tb-dot-size: 10px;
    --tb-dot-gap: 10px;
    --tb-dot-color: color-mix(in srgb, currentColor 28%, transparent);
    --tb-dot-color-active: currentColor;
    --tb-dots-bottom: calc(var(--tb-controls-bottom) + (var(--tb-arrow-size) - var(--tb-dot-size)) / 2);
}

.tb-tema-fora :is(.tb-slider, .tempero-slick-slider) {
    padding-bottom: var(--tb-fora-faixa);
}

/* Setas dos dois lados das bolinhas, perto do centro. */
.tb-tema-fora :is(.tb-prev, .slick-prev) {
    left: calc(50% - 7.5rem);
}

.tb-tema-fora :is(.tb-next, .slick-next) {
    right: calc(50% - 7.5rem);
}

.tb-tema-fora :is(.slick-prev, .slick-next) i {
    color: currentColor;
}

/* =============================================================================
   7b. ENTRADA SUAVE (motor próprio)
   -----------------------------------------------------------------------------
   Banners > Configurações > Entrada, ou entrada="suave" no shortcode. Pensada
   para o banner que é a capa do site: em vez de a imagem "estalar" na tela
   quando o download termina, ela surge aos poucos e recua de leve.

   O shortcode põe .tb-aguardando enquanto a imagem do primeiro banner carrega
   e troca por .tb-entrou quando ela chega. Ajustes:
     --tb-entrada-duracao   tempo do surgimento
     --tb-entrada-zoom      de quanto a imagem recua (1 = não recua)
     --tb-entrada-fundo     cor atrás da imagem enquanto ela não chega
   ============================================================================= */

.tb-entrada-suave .tb-slider {
    /* O recuo começa com a imagem um pouco maior: não pode vazar. */
    overflow: hidden;
    background: var(--tb-entrada-fundo, transparent);
}

.tb-entrada-suave.tb-aguardando .slide-item:first-child img {
    opacity: 0;
}

.tb-entrada-suave.tb-entrou .slide-item:first-child img {
    animation:
        tb-entrada-surge var(--tb-entrada-duracao, 1100ms) cubic-bezier(0.33, 0, 0.2, 1) both,
        tb-entrada-recua calc(var(--tb-entrada-duracao, 1100ms) * 2) cubic-bezier(0.16, 0.7, 0.3, 1) both;
}

@keyframes tb-entrada-surge {
    from { opacity: 0; }
}

@keyframes tb-entrada-recua {
    from { scale: var(--tb-entrada-zoom, 1.045); }
}

@media (prefers-reduced-motion: reduce) {
    .tb-entrada-suave.tb-entrou .slide-item:first-child img {
        animation: none;
    }
}

/* =============================================================================
   8. VIDEPLAST (tema Impreza): banner de capa abaixo do cabeçalho fixo
   -----------------------------------------------------------------------------
   Só existe no branch videplast-master.

   O cabeçalho do site é fixo e fica por cima do início da página. O tema
   compensa isso empurrando a primeira seção para baixo, mas a regra dele
   (.l-main > .l-section:first-of-type) não alcança mais a seção: o WPBakery
   atual põe um .wpb-content-wrapper no meio. Sem a compensação, o topo da arte
   do banner fica escondido atrás do cabeçalho.

   Aqui o banner da primeira seção desce a altura do cabeçalho. Essa altura
   muda com a largura da tela e com o idioma (cada idioma tem o seu cabeçalho),
   então quem informa o valor é o shortcode, que mede o cabeçalho e grava
   --tb-cabecalho no invólucro (ver tempero_slider_shortcode()). Os 110px são
   só a reserva para quem navega sem JavaScript.
   ============================================================================= */

.l-header.pos_fixed ~ .l-main .l-section:first-child .tempero-banner-wrapper {
    margin-top: var(--tb-cabecalho, 110px);
}

/* Tom claro da própria arte atrás da imagem enquanto ela carrega: a entrada
   suave parte dele, e não do branco da página. */
.tempero-banner-wrapper {
    --tb-entrada-fundo: #f5efef;
}