/**
 * 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;
    top: auto;
    bottom: var(--tb-controls-bottom);
    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-controls-bottom);
    left: 0;
    right: 0;
    display: flex;
    justify-content: 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-size);
    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-size);
    height: var(--tb-dot-size);
    border-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;
}