/* Agenda TocaOnde — o CSS .tta-* tem UM dono: este arquivo. O desenho (design/od) o copia, não o reescreve.
   Só estrutura: cor, fonte e botão vêm do tema do parceiro. As únicas variáveis próprias (--tta-*) são as que a aba
   Estilo do Elementor, o bloco e o shortcode escrevem; sem elas, vale o tema. A cara do botão é do tema
   (.wp-element-button); o plugin só garante o alvo de toque de 44 px, que tema nenhum promete. */
.tta { color: inherit; font: inherit; }
/* o tema estiliza p e h3 do conteúdo (margens de parágrafo); dentro da agenda quem manda é ela */
.tta p, .tta h3 { margin: 0; }
.tta-titulo { margin: 0 0 1.25em; }
.tta-lista { list-style: none; margin: 0; padding: 0; }
/* o miolo que a busca troca: não cria caixa, as margens dos filhos seguem as de antes */
.tta-resultados { display: contents; }
/* o botão fica de fora: a cor dele é a do botão do tema (.wp-element-button), nunca a do texto — medido no site real do
   Rock na Granja em 26/10: herdando, o texto escuro caía sobre o cinza do botão padrão do WordPress e sumia.
   Se o bloco ganhou cor de link (supports.color.link), o WordPress põe a classe wp-elements-N e escreve a cor dele: ali o inherit sai */
.tta:not([class*="wp-elements-"]) a:not(.wp-element-button) { color: inherit; text-decoration: none; }
.tta[class*="wp-elements-"] a:not(.wp-element-button) { text-decoration: none; }
.tta a.wp-element-button { text-decoration: none; }
.tta-nome { margin: 0; font-size: 1.125em; line-height: 1.3; color: var(--tta-nome-cor, inherit); }
.tta-nome a:hover, .tta-nome a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.tta-quando { margin: 0; font-size: .8125em; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  color: var(--tta-data-cor, var(--wp--preset--color--accent, currentColor)); }
.tta-casa { margin: 0; font-size: .9375em; color: color-mix(in srgb, currentColor 72%, transparent); }
.tta-acoes { display: flex; flex-wrap: wrap; gap: .5em; align-items: center; }
.tta .tta-botao { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; box-sizing: border-box; font-size: .875em; }
.tta-ingresso { font-size: .875em; text-decoration: underline !important; text-underline-offset: 3px; }
.tta-flyer { display: block; overflow: hidden; border-radius: var(--tta-raio, 0); background: color-mix(in srgb, currentColor 8%, transparent); }
.tta-flyer img { display: block; width: 100%; height: auto; }
.tta .tta-credito { margin: 1.5em 0 0; font-size: .8125em; color: color-mix(in srgb, currentColor 60%, transparent); }
.tta-credito a { text-decoration: underline !important; text-underline-offset: 2px; }
.tta-vazio { padding: 2em 1.5em; text-align: center; border: 1px dashed color-mix(in srgb, currentColor 25%, transparent); border-radius: var(--tta-raio, 0); }
.tta-vazio p { margin: 0; }
.tta .tta-vazio p + p { margin-top: 1em; }

/* grade: a coluna é a que o bloco pediu (--tta-cols); no celular, uma só */
.tta--grade .tta-lista { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.25em 1.5em; align-items: stretch; }
.tta-show { display: flex; flex-direction: column; gap: .5em; padding: var(--tta-card-pad, 0); background: var(--tta-card-fundo, transparent);
  border: var(--tta-card-borda, 0); border-radius: var(--tta-raio, 0); }
.tta-show .tta-flyer { margin-bottom: .25em; }
/* os botões alinhados: o card estica até a altura da linha e a ação desce para o rodapé (margin-top:auto); o "Ver show" vem
   sempre primeiro e ocupa o espaço que sobra, com o link de ingressos (se houver) ao lado, então ele começa no mesmo ponto em todos */
.tta-show .tta-acoes { margin-top: auto; padding-top: .375em; flex-wrap: nowrap; }
.tta-show .tta-acoes .tta-botao { order: -1; flex: 1 1 auto; }
.tta-show .tta-acoes .tta-ingresso { flex: none; }
@media (min-width: 600px) { .tta--grade .tta-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tta--grade .tta-lista { grid-template-columns: repeat(var(--tta-cols, 3), minmax(0, 1fr)); } }

/* lista: data em bloco, flyer pequeno, texto e a ação à direita (no celular, a ação desce) */
.tta--lista .tta-lista { border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.tta-linha { display: grid; grid-template-columns: 3.25em auto minmax(0, 1fr); gap: .5em 1em; align-items: center; padding: 1em 0;
  border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.tta-linha .tta-flyer { width: 4em; }
.tta-linha:not(:has(.tta-flyer)) { grid-template-columns: 3.25em minmax(0, 1fr); }
.tta-linha .tta-acoes { grid-column: 1 / -1; padding-left: 4.25em; }
.tta-linha:has(.tta-flyer) .tta-acoes { padding-left: 9.25em; }
.tta-data { display: flex; flex-direction: column; align-items: center; line-height: 1.1; text-transform: uppercase; }
.tta-data-sem, .tta-data-mes { font-size: .8125em; font-weight: 600; letter-spacing: .06em; color: color-mix(in srgb, currentColor 72%, transparent); }
.tta-data-dia { font-size: 1.75em; font-weight: 700; color: var(--tta-data-cor, var(--wp--preset--color--accent, currentColor)); }
.tta-texto { display: flex; flex-direction: column; gap: .25em; min-width: 0; }
/* no celular a lista fica com data e texto: o flyer pequeno espremia o nome do show em dez linhas */
@media (max-width: 599px) {
  .tta-linha .tta-flyer { display: none; }
  .tta-linha, .tta-linha:has(.tta-flyer) { grid-template-columns: 3.25em minmax(0, 1fr); }
  .tta-linha:has(.tta-flyer) .tta-acoes { padding-left: 4.25em; }
}
@media (min-width: 782px) {
  .tta-linha { grid-template-columns: 3.25em auto minmax(0, 1fr) auto; }
  .tta-linha:not(:has(.tta-flyer)) { grid-template-columns: 3.25em minmax(0, 1fr) auto; }
  .tta-linha .tta-acoes, .tta-linha:has(.tta-flyer) .tta-acoes { grid-column: auto; padding-left: 0; }
}

/* compacta: a da barra lateral — data, nome e casa; o flyer pequeno só se o widget pedir */
.tta-item { display: grid; grid-template-columns: minmax(0, 1fr); gap: .875em; align-items: start; padding: .875em 0; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
.tta-item:has(.tta-flyer) { grid-template-columns: 3.5em minmax(0, 1fr); }
.tta-item .tta-texto { gap: .2em; }
.tta-item:first-child { padding-top: 0; }
.tta--compacta .tta-nome { font-size: 1em; }
/* na lateral não há botão: o nome é o link, e se mostra como link (sublinhado na cor do texto, como o tema faz) */
.tta--compacta .tta-nome a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.tta a:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.tta--compacta .tta-casa { font-size: .875em; }
.tta--compacta .tta-credito, .tta.tta--compacta .tta-credito { margin-top: 1em; }

/* busca do visitante — o formulário é do TEMA: campo, lista e botão herdam o que o tema já define para
   input/select/.wp-element-button. As regras do plugin ficam em :where() (especificidade zero), então qualquer estilo
   de formulário do tema vence; o plugin só garante o que tema nenhum promete: o alvo de 44 px e o empilhar no celular. */
:where(.tta-busca) { margin: 0 0 1.5em; display: flex; flex-direction: column; gap: 1em; }
:where(.tta-busca input[type="search"], .tta-busca select) { box-sizing: border-box; width: 100%; min-height: 44px; margin: 0;
  font: inherit; color: inherit; background: var(--tta-campo-fundo, transparent); padding: 0 .75em;
  border: var(--tta-campo-borda, 1px solid color-mix(in srgb, currentColor 40%, transparent)); border-radius: var(--tta-campo-raio, 4px); }
:where(.tta-busca select option) { color: #1e1e1e; background: #fff; }
/* celular: o campo e o Buscar na mesma linha, a cidade embaixo; a partir de 600 px, os três numa linha só */
.tta-busca-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "texto botao" "cidade cidade"; gap: .75em; align-items: end; }
.tta-campo--texto { grid-area: texto; }
.tta-campo--cidade { grid-area: cidade; }
.tta-busca-linha > .tta-botao { grid-area: botao; }
.tta-busca-linha:not(:has(.tta-campo--cidade)) { grid-template-areas: "texto botao"; }
.tta-busca-linha:not(:has(.tta-campo--texto)) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "cidade botao"; }
.tta-campo { display: flex; flex-direction: column; gap: .375em; min-width: 0; }
.tta .tta-rotulo { padding: 0; font-size: .875em; font-weight: 600; }
.tta-busca .tta-botao { gap: .5em; }
.tta-busca .tta-botao svg { flex: none; }
/* o Estilo, quando o parceiro o liga, ganha a sua linha */
.tta-busca-extra { display: flex; }
.tta-busca-extra .tta-campo { flex: 1 1 14em; max-width: 24em; }
.tta-filtro-quando { margin: 0; padding: 0; border: 0; min-width: 0; }
.tta-filtro-quando legend { margin-bottom: .375em; }
.tta-chips { position: relative; display: flex; flex-wrap: wrap; gap: .5em; }
/* o "Quando" é um grupo de rádio (o mesmo GET), vestido de chip; o rádio fica para o leitor de tela e o teclado */
.tta-chip { position: relative; display: inline-flex; }
.tta-chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.tta-chip span { display: inline-flex; align-items: center; gap: .375em; min-height: 44px; box-sizing: border-box; padding: 0 1em;
  font-size: .875em; border: 1px solid color-mix(in srgb, currentColor 30%, transparent); border-radius: var(--tta-chip-raio, 999px); }
.tta-chip input:checked + span { font-weight: 600; border-color: var(--tta-chip-ativo-fundo, currentColor);
  background: var(--tta-chip-ativo-fundo, color-mix(in srgb, currentColor 12%, transparent)); color: var(--tta-chip-ativo-texto, inherit); }
.tta-chip input:focus-visible + span, .tta-chip--foco span { outline: 2px solid currentColor; outline-offset: 2px; }
/* o calendário é o nativo do aparelho (o chip "Escolher data" abre o input date); o campo em si não aparece */
.tta-data-campo { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
/* a linha do resultado: o que se achou e, ao lado (ou embaixo, no celular), o Limpar busca — sem separador solto */
.tta .tta-resultado { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1em; margin: -1em 0 .75em; font-size: .9375em; }
/* a paginação é a do WordPress (.navigation.pagination, a de the_posts_pagination): quem a veste é o TEMA. Aqui só o
   arranjo e o alvo de 44 px, sem especificidade (:where), para o CSS do tema sempre vencer. */
/* a paginação em dots, igual à do Programação, Vídeos e Diretórios no desktop: seta-chevron vermelha, dots de 10 px (o da página atual
   cheio, os outros a 20%), tudo centralizado na linha. O número de cada página sai da vista e fica para o leitor de tela ("Página 2").
   Especificidade alta de propósito: o tema veste .page-numbers como número/botão. As setas sempre ocupam seus lugares (na primeira/última
   página ficam apagadas, .disabled), para os dots não saírem do centro. */
.tta .tta-paginacao { display: flex; justify-content: center; width: 100%; margin: var(--tta-pag-gap-d, 14px) auto 0; padding: 0; }
.tta .tta-paginacao .nav-links { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px; width: auto; margin: 0; padding: 0; }
.tta .tta-paginacao .page-numbers { display: block; box-sizing: border-box; position: relative; margin: 0; padding: 0; border: 0; background: transparent; box-shadow: none;
  font-size: 0; line-height: 0; text-decoration: none; text-indent: 0; }
.tta .tta-paginacao .page-numbers:not(.prev):not(.next):not(.dots) { flex: 0 0 10px; width: 10px; min-width: 10px; height: 10px; min-height: 10px; border-radius: 50%;
  background: var(--tta-dot-cor, #b5b5b5); transition: background-color .15s, transform .15s; }
/* a área de toque é maior que o dot (o dot em si segue com 10 px) */
.tta .tta-paginacao .page-numbers:not(.prev):not(.next):not(.dots)::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; }
.tta .tta-paginacao a.page-numbers:not(.prev):not(.next):not(.dots):hover { transform: scale(1.3); }
.tta .tta-paginacao .page-numbers.current:not(.prev):not(.next):not(.dots) { background: var(--tta-dot-ativo, #e53935); }
.tta .tta-paginacao .page-numbers.dots { flex: none; width: auto; height: 10px; padding: 0; font-size: 12px; line-height: 10px; color: var(--tta-dot-ativo, #e53935); opacity: .6; }
/* as setas: o chevron vermelho de 8 px do Diretórios (caixa de 22 px) */
.tta .tta-paginacao .page-numbers.prev, .tta .tta-paginacao .page-numbers.next { flex: 0 0 22px; width: 22px; min-width: 22px; height: 22px; min-height: 22px; }
.tta .tta-paginacao .page-numbers.prev > span[aria-hidden], .tta .tta-paginacao .page-numbers.next > span[aria-hidden] { display: none; }
.tta .tta-paginacao .page-numbers.prev::before, .tta .tta-paginacao .page-numbers.next::before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; box-sizing: border-box;
  border-top: 2px solid var(--tta-dot-ativo, #e53935); border-right: 2px solid var(--tta-dot-ativo, #e53935); }
.tta .tta-paginacao .page-numbers.prev::before { transform: translate(-35%, -50%) rotate(-135deg); }
.tta .tta-paginacao .page-numbers.next::before { transform: translate(-65%, -50%) rotate(45deg); }
.tta .tta-paginacao .page-numbers.disabled { opacity: .3; pointer-events: none; }
:where(.tta-paginacao) .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* buscando pela rota REST: a lista anterior fica, apagada, até a nova chegar (sem salto de layout) */
.tta--carregando .tta-lista { opacity: .45; transition: opacity .15s; }
.tta-limpar, .tta-ver-agenda { display: inline-flex; align-items: center; min-height: 44px; text-decoration: underline !important; text-underline-offset: 3px; }
.tta .tta-vazio-dica { margin-top: .25em; font-size: .9375em; color: color-mix(in srgb, currentColor 72%, transparent); }
/* no celular estreito o botão desce para baixo dos campos: o campo de texto fica com a largura toda */
@media (max-width: 479px) {
  .tta-busca-linha, .tta-busca-linha:not(:has(.tta-campo--cidade)), .tta-busca-linha:not(:has(.tta-campo--texto)) { grid-template-columns: minmax(0, 1fr); grid-template-areas: "texto" "cidade" "botao"; }
  .tta-busca-linha > .tta-botao { width: 100%; justify-content: center; }
}
@media (min-width: 600px) {
  .tta-busca-linha:has(.tta-campo--cidade) { grid-template-columns: minmax(0, 1fr) minmax(10em, 14em) auto; grid-template-areas: "texto cidade botao"; }
  .tta-busca-linha:has(.tta-campo--cidade):not(:has(.tta-campo--texto)) { grid-template-columns: minmax(10em, 14em) auto; grid-template-areas: "cidade botao"; }
}
/* na lateral: um campo e a lupa, lado a lado, sob a lista */
.tta-busca--lateral { margin: 1em 0 0; gap: .5em; }
.tta-busca--lateral .tta-busca-linha { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: none; gap: .5em; }
.tta-busca--lateral .tta-busca-linha > .tta-botao { grid-area: auto; }
.tta-busca--lateral .tta-botao { padding: 0 .875em; min-width: 44px; }
.tta-busca--lateral .tta-ver-agenda { font-size: .875em; }

/* celular: a grade vira um slider horizontal, UM show por vez, com dots. Só entra quando o JavaScript (slider.js) põe a classe
   .tta--slider; sem ele o celular segue com a lista empilhada e a paginação (que também são dots). O gap é o --tta-slide-gap. */
.tta-dots { display: none; }
@media (max-width: 767px) {
  .tta--grade.tta--slider .tta-lista { position: relative; display: flex; flex-flow: row nowrap; align-items: stretch; gap: var(--tta-slide-gap, 14px);
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tta--grade.tta--slider .tta-lista::-webkit-scrollbar { display: none; }
  .tta--grade.tta--slider .tta-lista > .tta-show { box-sizing: border-box; flex: 0 0 100%; width: 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }
  /* no slider os dots do próprio slider fazem o papel da paginação; ela só volta se não deu para trazer as outras páginas */
  .tta--slider .tta-paginacao { display: none; }
  .tta--slider.tta--slider-falhou .tta-paginacao { display: flex; }
  .tta--slider .tta-dots { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center; margin: var(--tta-pag-gap-m, 16px) 0 .25em; }
  .tta--slider.tta--slider-falhou .tta-paginacao { margin-top: var(--tta-pag-gap-m, 16px); }
}
.tta .tta-dots .tta-dot { appearance: none; -webkit-appearance: none; position: relative; box-sizing: border-box; flex: none; width: 24px; min-width: 24px; height: 24px; min-height: 24px;
  margin: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; box-shadow: none; color: inherit; font-size: 0; line-height: 0; cursor: pointer; }
.tta .tta-dots .tta-dot:hover, .tta .tta-dots .tta-dot:focus, .tta .tta-dots .tta-dot:active { background: transparent; box-shadow: none; }
.tta .tta-dots .tta-dot::before { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--tta-dot-cor, rgba(229, 57, 53, .2)); transition: transform .15s, background-color .15s; }
.tta .tta-dots .tta-dot.is-active::before { background: var(--tta-dot-ativo, #e53935); }
/* só 7 dots de cada vez: os das pontas da janela encolhem, dizendo que há mais além */
.tta .tta-dots .tta-dot--pequeno::before { transform: scale(.6); }
.tta .tta-dots .tta-dot[hidden] { display: none; }
.tta .tta-dots .tta-dot:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
@media (prefers-reduced-motion: reduce) { .tta .tta-dots .tta-dot::before, .tta .tta-paginacao .page-numbers::before { transition: none; } }

/* sem rótulos (opção do widget e do shortcode): o texto sai da vista, mas fica para o leitor de tela */
.tta--sem-rotulos .tta-rotulo { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* espaçamento dos filtros (Configurações › Agenda TocaOnde › Espaçamentos), desktop a partir de 768 px e mobile abaixo. Horizontal: entre
   campo de banda, cidade e botão (e entre os chips). Vertical: entre a linha de banda/cidade e a das datas. Só a busca da página: a
   da barra lateral tem o seu. Por último e com especificidade, para ganhar dos gaps de fábrica. */
.tta .tta-busca:not(.tta-busca--lateral) { row-gap: var(--tta-fgap-v-d, 14px); }
.tta .tta-busca:not(.tta-busca--lateral) .tta-busca-linha { column-gap: var(--tta-fgap-h-d, 8px); row-gap: var(--tta-fgap-v-d, 14px); }
.tta .tta-busca:not(.tta-busca--lateral) .tta-chips { column-gap: var(--tta-fgap-h-d, 8px); row-gap: var(--tta-fgap-v-d, 14px); }
@media (max-width: 767px) {
  .tta .tta-busca:not(.tta-busca--lateral) { row-gap: var(--tta-fgap-v-m, 10px); }
  .tta .tta-busca:not(.tta-busca--lateral) .tta-busca-linha { column-gap: var(--tta-fgap-h-m, 5px); row-gap: var(--tta-fgap-v-m, 10px); }
  .tta .tta-busca:not(.tta-busca--lateral) .tta-chips { column-gap: var(--tta-fgap-h-m, 5px); row-gap: var(--tta-fgap-v-m, 10px); }
}
/* o Buscar só existe para quem não tem JavaScript; com ele, a busca é automática e o Enter funciona pelo script */
.tta--js .tta-buscar-sem-js { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }