/* VRK Igreja Tema · cabeçalho: marca, botão da rádio (VRK Rádio), busca em tela cheia e ajustes do menu.
   Os componentes (.vi-mh, .vi-mn-*, .vi-gaveta) vêm do design system (assets/ds/ds.css); as cores, dos tokens do cliente. */

/* marca: logo da Identidade do site, quando houver */
.vi-mh-marca .vi-mh-logo { display: block; height: 100px; width: auto; max-width: 240px; object-fit: contain; }
@container (max-width: 760px) { .vi-mh-marca .vi-mh-logo { height: 72px; } }

/* rádio no cabeçalho: o VRK Rádio põe os ícones de tocar e pausar; aqui eles seguem o DS */
.vi-mh-radio .vr-play, .vi-mh-radio .vr-pause { width: 12px; height: 12px; flex: none; }
.vi-mh-radio .vr-pause, .vi-mh-radio[data-estado="tocando"] .vr-play, .vi-mh-radio[data-estado="carregando"] .vr-play { display: none; }
.vi-mh-radio[data-estado="tocando"] .vr-pause, .vi-mh-radio[data-estado="carregando"] .vr-pause { display: block; }
.vi-mh-radio[data-estado="tocando"] .vi-vivo, .vi-mh-radio[data-estado="fora"] .vi-vivo { animation: vi-pulse 1.6s ease-out infinite; }
.vi-mh-radio[data-estado="carregando"] .vi-vivo { background: var(--vi-destaque-600); }
.vi-mh-radio[data-estado="erro"] .vi-vivo { background: var(--vi-radio-erro); box-shadow: none; }
.vi-gaveta-radio { margin-top: 18px; width: auto !important; padding: 0 16px !important; font-size: var(--vi-tam-sm) !important; gap: 8px !important; justify-content: flex-start !important; }

/* barra fixa do VRK Rádio: as cores do DS */
.vi-page ~ .vrk-radio-barra, .vrk-radio-barra { --vrkr-fg: var(--vi-titulo); --vrkr-mut: var(--vi-texto-suave); --vrkr-cor: var(--vi-acao-600); font-family: var(--vi-fonte, inherit); }

/* ── busca em tela cheia (protótipo aprovado: painel que desce com o fio dourado, buscas frequentes e recentes,
   grupos por tipo com ícone, termo destacado, "Ver todos os resultados", nada encontrado com saída) ── */
.vi-busca-tela { position: fixed; inset: 0; z-index: 9995; font-family: var(--vi-fonte); }
.vi-busca-tela[hidden], .vi-busca-tela [hidden] { display: none !important; }
/* sem desfoque: o blur da página inteira atrás refazia cada quadro e a busca abria travando */
.sx-scrim { position: absolute; inset: 0; background: rgba(var(--vi-primaria-900-rgb), .72); opacity: 0; transition: opacity .25s ease; }
.vi-busca-tela.on .sx-scrim { opacity: 1; }
.sx-panel { position: relative; background: var(--vi-fundo); border-radius: 0 0 24px 24px; box-shadow: 0 30px 60px -30px rgba(var(--vi-primaria-900-rgb), .6); max-height: 86vh; overflow-y: auto; transform: translateY(-104%); transition: transform .4s cubic-bezier(.2,.7,.2,1); will-change: transform; }
.sx-panel::before { content: ''; position: sticky; top: 0; display: block; height: 4px; background: var(--vi-grad-marca); background-size: 200% 100%; animation: vi-gold-flow 8s linear infinite; z-index: 2; }
.vi-busca-tela.on .sx-panel { transform: none; }
.sx-in { max-width: 1040px; margin-inline: auto; padding: 28px clamp(20px, 5vw, 48px) 36px; }
.sx-field { display: flex; align-items: center; gap: 14px; padding-bottom: 14px; border-bottom: 2px solid var(--vi-primaria-750); position: relative; }
.sx-field::after { content: ''; position: absolute; left: 0; bottom: -2px; height: 2px; width: 0; background: var(--vi-destaque-700); transition: width .35s ease; }
.sx-field:focus-within::after { width: 100%; }
.sx-field .sx-lupa { width: 26px; height: 26px; color: var(--vi-titulo); flex: none; }
.sx-field input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: clamp(1.4rem, 1rem + 1.6vw, 2rem); font-weight: 600; letter-spacing: -.015em; color: var(--vi-titulo); padding: 6px 0; }
.sx-field input::placeholder { color: var(--vi-busca-placeholder); font-weight: 500; }
.sx-field input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; }
.sx-esc { font: 600 .75rem var(--vi-fonte), sans-serif; color: var(--vi-texto-suave); border: 1px solid rgba(var(--vi-sombra-quente-rgb), .18); border-radius: 6px; padding: 3px 7px; }
.sx-x { width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--vi-fundo-controle); color: var(--vi-titulo); display: grid; place-items: center; cursor: pointer; flex: none; }
.sx-x:hover { background: var(--vi-primaria-750); color: #fff; }
.sx-x svg { width: 18px; height: 18px; }
.sx-lb { display: block; width: 100%; font-size: .75rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--vi-rotulo-dourado); margin-bottom: 8px; }
.sx-sug, .sx-rec { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sx-sug button, .sx-rec button { font: inherit; font-size: .875rem; font-weight: 600; color: var(--vi-titulo); background: var(--vi-fundo); border: 1px solid rgba(var(--vi-primaria-750-rgb), .18); border-radius: 999px; padding: 8px 14px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.sx-sug button:hover, .sx-rec button:hover { border-color: var(--vi-primaria-750); }
.sx-rec button svg { width: 14px; height: 14px; color: var(--vi-rotulo-dourado); }
.sx-rec > div { display: flex; flex-wrap: wrap; gap: 8px; }
.sx-res { margin-top: 22px; display: grid; gap: 22px; }
.sx-grp > .sx-lb { margin-bottom: 4px; display: flex; justify-content: space-between; }
.sx-grp > .sx-lb small { font-size: .75rem; letter-spacing: 0; text-transform: none; color: var(--vi-texto-apagado); font-weight: 500; }
.sx-it { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 12px; margin-inline: -12px; border-radius: 14px; color: var(--vi-titulo); text-decoration: none; }
.sx-it .ic { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--vi-fundo-nevoa); color: var(--vi-titulo); }
.sx-it .ic svg { width: 20px; height: 20px; }
.sx-it[data-tipo="paroquia"] .ic, .sx-it[data-tipo="comunidade"] .ic { background: var(--vi-primaria-750); color: var(--vi-destaque-200); }
.sx-it[data-tipo="evento"] .ic, .sx-it[data-tipo="homilia"] .ic, .sx-it[data-tipo="mensagem-do-bispo"] .ic, .sx-it[data-tipo="documento"] .ic { background: var(--vi-busca-icone-quente-fundo); color: var(--vi-destaque-800); }
.sx-it > span:not(.ic):not(.mt) { min-width: 0; }
.sx-it b { display: block; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.sx-it small { display: block; font-size: .8125rem; color: var(--vi-texto-suave); line-height: 1.45; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 62ch; }
.sx-it .mt { font-size: .75rem; color: var(--vi-rotulo-dourado); font-weight: 600; white-space: nowrap; }
.sx-it .go { width: 16px; height: 16px; opacity: 0; transition: opacity .15s, translate .15s; }
.sx-it:hover, .sx-it[aria-selected="true"] { background: var(--vi-fundo-nevoa); }
.sx-it[aria-selected="true"] { box-shadow: inset 3px 0 0 var(--vi-destaque-700); }
.sx-it:hover .go, .sx-it[aria-selected="true"] .go { opacity: 1; translate: 2px 0; }
.sx-it mark { background: linear-gradient(180deg, transparent 55%, rgba(var(--vi-destaque-500-rgb), .6) 55%); color: inherit; padding: 0 1px; }
.sx-fix { margin: 0 0 -6px; font-size: .875rem; color: var(--vi-texto-suave); }
.sx-fix b { color: var(--vi-titulo); }
.sx-more { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 0 0; border-top: 1px solid rgba(var(--vi-sombra-quente-rgb), .12); font-size: .9375rem; font-weight: 600; color: var(--vi-link); text-decoration: none; }
.sx-more svg, .sx-empty .go { width: 16px; height: 16px; flex: none; }
.sx-empty { text-align: center; padding: 36px 0 8px; display: grid; justify-items: center; gap: 8px; color: var(--vi-titulo); }
.sx-empty > svg { width: 40px; height: 40px; color: var(--vi-destaque-600); }
.sx-empty b { font-size: 1.125rem; font-weight: 600; }
.sx-empty p { margin: 0; max-width: 44ch; color: var(--vi-texto-suave); font-size: .9375rem; }
.sx-empty a { display: inline-flex; gap: 8px; align-items: center; margin-top: 6px; font-weight: 600; color: var(--vi-link); text-decoration: none; }
@media (max-width: 640px) {
  .sx-esc { display: none; }
  .sx-it { grid-template-columns: 40px minmax(0, 1fr); }
  .sx-it .mt { grid-column: 2; }
  .sx-it .go { display: none; }
  .sx-it .ic { width: 40px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
  .sx-panel, .sx-scrim { transition: none; }
  .sx-panel::before { animation: none; }
}
body.vi-busca-trava { overflow: hidden; }

/* esqueleto da busca (design system · 16 · Esqueleto) */
.sx-res[aria-busy="true"] { min-height: 160px; }
.sx-grp.vi-sk .sx-skh { width: 120px; height: 10px; margin: 0 0 12px; }
.sx-sk { display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: center; padding: 10px 0; }
.sx-sk .sx-ski { width: 44px; height: 44px; border-radius: 12px; }
.sx-sk .vi-sk-l { margin-top: 8px; width: 46%; max-width: 560px; }
.sx-sk .vi-sk-l--titulo { margin-top: 0; width: 30%; max-width: 360px; height: 14px; }
.sx-sk .vi-sk-l--curta { width: 34%; }

/* Submenu do cabeçalho (01/11): o filete dourado acompanha a curva dos cantos (antes era uma barra reta de 3px que
   passava das pontas arredondadas). */
.vi-mn-sub::before { inset: 0; height: auto; border-radius: inherit; border-top: 3px solid transparent; background-origin: border-box; background-clip: border-box; pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0) border-box; -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0) border-box; }

/* Ícone no submenu (protótipo aprovado em 01/11, variação C): quase apagado, dourado no item com o mouse e na página
   aberta. Coluna de 20 px; título e linha pequena alinhados entre si. Item sem ícone fica como antes. */
.vi-mh-nav .vi-mn-sub a:has(.vi-mn-ic) { grid-template-columns: 20px 1fr; column-gap: 12px; align-items: center; }
.vi-mn-sub a .vi-mn-ic { grid-row: 1; width: 20px; height: 20px; color: var(--vi-primaria-200); transition: color var(--vi-dur-rapida) ease; }
.vi-mn-sub a:has(.vi-mn-ic) b, .vi-mn-sub a:has(.vi-mn-ic) small { grid-column: 2; }
.vi-mn-sub a:hover .vi-mn-ic, .vi-mn-sub a:focus-visible .vi-mn-ic, .vi-mn-sub a[aria-current] .vi-mn-ic { color: var(--vi-destaque-750); }

/* Tablet (761 a 1100 px): o menu do computador cabe numa linha, sem quebrar "A Diocese" e sem a lupa
   por cima do último item. O espaço da lupa fica reservado dos dois lados, para o menu continuar centrado. */
@container (min-width: 761px) and (max-width: 1100px) {
	.vi-mh-nav > .vi-wrap { gap: clamp(14px, 2.4cqi, 30px); padding-inline: calc(var(--vi-margem) + 48px); }
	.vi-mh-nav a, .vi-mh-nav .vi-mn-bt { white-space: nowrap; }
}
@container (min-width: 761px) and (max-width: 940px) {
	.vi-mh-nav a, .vi-mh-nav .vi-mn-bt { font-size: .6875rem; letter-spacing: .05em; gap: 4px; }
	.vi-mh-nav > .vi-wrap { gap: clamp(10px, 1.6cqi, 16px); } /* oito ou nove itens e a lupa sem encostar */
}