/* VRK Igreja Tema · Celular: cabeçalho e barra de abas (protótipo "Menu do celular", 01/11/2026).
   Personalizar › Celular. As classes no <body> (vrkt-cel-*) escolhem o modelo. No computador nada muda. */

.vi-mh-acoes { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 4px; }
.vi-wm, .vi-mh-lupa, .vi-mh-marca .vi-mh-brasao { display: none; }
.vi-mh-lupa { place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--vi-titulo); cursor: pointer; }
.vi-mh-lupa svg { width: 22px; height: 22px; }
.vrkt-barra, .vrkt-folha { display: none; }
/* o cabeçalho preso ao rolar precisa que o invólucro dele não o limite */
[data-vrkt-parte="cabecalho"] { display: contents; }

@container (max-width: 760px) {
	/* player da rádio: o ponto e o play com respiro (antes encostavam) */
	.vi-mh-radio { width: auto; min-width: 44px; padding: 0 13px 0 12px; gap: 7px; }

	/* com a orelha, a rádio sai do cabeçalho do celular */
	.vrkt-cel-radio-orelha .vi-mh-radio { display: none; }

	/* com a barra de abas, o menu sai do cabeçalho */
	.vrkt-cel-barra .vi-mh-menu { display: none; }
	.vrkt-cel-barra .vi-mh-nav > .vi-wrap { justify-content: flex-end; }

	/* ── compacto, encolhe e sobre: uma linha, busca no alto, sem a linha do menu ── */
	:is(.vrkt-cel-compacto, .vrkt-cel-encolhe, .vrkt-cel-sobre) .vi-mh-nav { display: none; }
	:is(.vrkt-cel-compacto, .vrkt-cel-encolhe, .vrkt-cel-sobre) .vi-mh-lupa { display: inline-grid; }
	:is(.vrkt-cel-compacto, .vrkt-cel-encolhe) .vi-mh { position: sticky; top: 0; background: rgba(255, 255, 255, .97); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: none; transition: box-shadow .2s; }
	:is(.vrkt-cel-compacto, .vrkt-cel-encolhe) .vi-mh::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--vi-linha); opacity: 0; transition: opacity .2s; }
	html.vrkt-rolou :is(.vrkt-cel-compacto, .vrkt-cel-encolhe) .vi-mh { box-shadow: 0 10px 22px -20px rgba(var(--vi-primaria-900-rgb), .55); }
	html.vrkt-rolou :is(.vrkt-cel-compacto, .vrkt-cel-encolhe) .vi-mh::after { opacity: 1; }

	/* compacto: brasão pequeno + nome escrito */
	.vrkt-cel-compacto .vi-mh-top { display: flex; align-items: center; gap: 10px; padding-block: 10px; }
	.vrkt-cel-compacto .vi-mh-marca { margin-right: auto; align-items: center; gap: 10px; }
	.vrkt-cel-compacto .vi-mh-marca svg { width: 44px !important; height: 42px !important; }
	.vrkt-cel-compacto .vi-mh-marca .vi-mh-logo { height: 42px; width: auto; }
	.vrkt-cel-compacto .vi-wm { display: grid; line-height: 1.05; }
	/* com o nome escrito ao lado, o brasão vai sem o anel com o nome (não repete o nome) */
	.vrkt-cel-compacto .vi-mh-marca .vi-mh-chancela, html.vrkt-rolou .vrkt-cel-sobre .vi-mh-marca .vi-mh-chancela { display: none; }
	.vrkt-cel-compacto .vi-mh-marca .vi-mh-brasao, html.vrkt-rolou .vrkt-cel-sobre .vi-mh-marca .vi-mh-brasao { display: block; }
	.vi-wm small { font-size: .58rem; font-weight: var(--vi-peso-negrito, 700); letter-spacing: .2em; text-transform: uppercase; color: var(--vi-destaque-750); }
	.vi-wm span { font-size: 1.06rem; font-weight: 800; letter-spacing: -.01em; color: var(--vi-titulo); }

	/* encolhe: brasão no centro, menor ao rolar */
	.vrkt-cel-encolhe .vi-mh-top { padding-block: 8px 10px; transition: padding-block .3s var(--vi-curva); }
	.vrkt-cel-encolhe .vi-mh-marca svg, .vrkt-cel-encolhe .vi-mh-marca .vi-mh-logo { width: 84px !important; height: 81px !important; transition: width .3s var(--vi-curva), height .3s var(--vi-curva); }
	.vrkt-cel-encolhe .vi-mh-marca .vi-mh-logo { width: auto; }
	html.vrkt-rolou .vrkt-cel-encolhe .vi-mh-top { padding-block: 4px; }
	html.vrkt-rolou .vrkt-cel-encolhe .vi-mh-marca svg { width: 46px !important; height: 44px !important; }
	html.vrkt-rolou .vrkt-cel-encolhe .vi-mh-marca .vi-mh-logo { height: 44px; }

	/* sobre o banner (só na home com banner): brasão em branco por cima da imagem; ao rolar, a barra compacta */
	.vrkt-cel-sobre .vi-mh { position: fixed; top: 0; left: 0; right: 0; z-index: 60; background: transparent; box-shadow: none; }
	.vrkt-cel-sobre.admin-bar .vi-mh { top: var(--wp-admin--admin-bar--height, 0px); }
	.vrkt-cel-sobre .vi-mh > .vi-faixa-ouro { display: none; }
	.vrkt-cel-sobre .vi-mh-top { padding-block: 14px 0; align-items: start; }
	.vrkt-cel-sobre .vi-mh-marca { color: #fff; filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .35)); }
	.vrkt-cel-sobre .vi-mh-marca svg { width: 80px !important; height: 77px !important; }
	.vrkt-cel-sobre .vi-mh-marca .vi-mh-logo { height: 77px; width: auto; filter: brightness(0) invert(1); }
	.vrkt-cel-sobre .vi-mh-radio, .vrkt-cel-sobre .vi-mh-lupa { background: rgba(var(--vi-banner-controle-fundo-rgb), .38); color: #fff; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
	.vrkt-cel-sobre .bnr::after { content: ''; position: absolute; z-index: 3; inset: 0 0 auto 0; height: 180px; background: linear-gradient(180deg, rgba(var(--vi-cabecalho-sobre-sombra-rgb), .55), rgba(var(--vi-cabecalho-sobre-sombra-rgb), 0)); pointer-events: none; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh { background: rgba(255, 255, 255, .95); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 1px 0 var(--vi-linha), 0 10px 22px -20px rgba(var(--vi-primaria-900-rgb), .55); animation: vrkt-desce .3s var(--vi-curva) both; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-top { display: flex; align-items: center; gap: 10px; padding-block: 8px; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-marca { margin-right: auto; align-items: center; gap: 10px; color: var(--vi-primaria-900); filter: none; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-marca svg { width: 38px !important; height: 37px !important; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-marca .vi-mh-logo { height: 37px; filter: none; }
	html.vrkt-rolou .vrkt-cel-sobre .vi-wm { display: grid; line-height: 1.05; }
	html.vrkt-rolou .vrkt-cel-sobre :is(.vi-mh-radio, .vi-mh-lupa) { -webkit-backdrop-filter: none; backdrop-filter: none; color: var(--vi-titulo); }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-radio { background: var(--vi-fundo-controle); }
	html.vrkt-rolou .vrkt-cel-sobre .vi-mh-lupa { background: none; }
}
@keyframes vrkt-desce { from { translate: 0 -100%; } to { translate: 0 0; } }

/* ── barra de abas ── */
@media (max-width: 760px) {
	/* o espaço da barra fica dentro do rodapé (escuro até o fim); no body, aparecia uma faixa branca abaixo dele (0.2.20) */
	body.vrkt-cel-barra .vi-rf { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
	body.vrkt-cel-barra.vrkt-cel-est-flutuante .vi-rf { padding-bottom: calc(92px + env(safe-area-inset-bottom, 0px)); }
	.vrkt-cel-barra .vrkt-barra { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); position: fixed; z-index: 800; left: 0; right: 0; bottom: 0; padding: 8px 10px max(10px, env(safe-area-inset-bottom, 0px));
		background: rgba(255, 255, 255, .94); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-top: 1px solid var(--vi-linha); transition: translate .3s var(--vi-curva); font-family: inherit; }
	/* o player da rádio (VRK Rádio 1.0.7+) fica logo acima da barra de abas */
	body.vrkt-cel-barra { --vrk-radio-base: calc(61px + max(10px, env(safe-area-inset-bottom, 0px))); }
	body.vrkt-cel-barra.vrkt-cel-est-flutuante { --vrk-radio-base: calc(70px + max(14px, env(safe-area-inset-bottom, 0px))); }
	html.vrkt-desce body.vrkt-cel-barra.vrkt-cel-rolar-some { --vrk-radio-base: env(safe-area-inset-bottom, 0px); }
	html.vrkt-desce .vrkt-cel-rolar-some .vrkt-barra { translate: 0 115%; }
	.vrkt-barra-it { position: relative; display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 52px; padding: 6px 0 4px; border: 0; border-radius: 14px; background: none;
		color: var(--vi-barra-aba-texto); font: inherit; font-size: .68rem; font-weight: 600; text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
	.vrkt-barra-it .vrkt-bi { width: 24px; height: 24px; fill: currentColor; }
	.vrkt-barra-it[aria-current], .vrkt-barra-it[aria-expanded="true"] { color: var(--vi-titulo); font-weight: 800; }
	.vrkt-barra-l { line-height: 1.2; white-space: nowrap; }
	.vrkt-cel-rot-ativo .vrkt-barra-it:not([aria-current]) .vrkt-barra-l { display: none; }
	/* rádio como aba */
	.vrkt-barra-rp { width: 24px; height: 24px; display: grid; place-items: center; }
	.vrkt-barra-radio .vrk-radio-botao__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vi-acao-600); box-shadow: 0 0 0 5px rgba(var(--vi-acao-600-rgb), .15); }
	.vrkt-barra-radio[data-estado="tocando"] .vrk-radio-botao__dot, .vrkt-barra-radio[aria-pressed="true"] .vrk-radio-botao__dot { animation: vi-pulse 1.6s ease-out infinite; }
	.vrkt-barra-radio[data-estado="carregando"] .vrk-radio-botao__dot { background: var(--vi-destaque-600); }
	.vrkt-barra-radio .vr-play, .vrkt-barra-radio .vr-pause { display: none !important; }
	/* aba da página aberta */
	.vrkt-cel-ind-cheio .vrkt-barra-it[aria-current] .vrkt-bi { stroke: currentColor; stroke-width: 9px; stroke-linejoin: round; }
	.vrkt-cel-ind-traco .vrkt-barra-it[aria-current]::before { content: ''; position: absolute; top: -9px; left: 50%; translate: -50% 0; width: 32px; height: 3px; border-radius: 0 0 3px 3px;
		background: var(--vi-grad-marca); background-size: 200% 100%; animation: vi-gold-flow 3s linear infinite, vrkt-traco .45s var(--vi-curva) both; }
	.vrkt-cel-ind-pilula .vrkt-barra-it[aria-current] .vrkt-bi { box-sizing: content-box; padding: 3px 16px; border-radius: 999px; background: var(--vi-primaria-100); }
	/* estilos */
	.vrkt-cel-est-azul .vrkt-barra { background: var(--vi-primaria-800); border-top-color: transparent; }
	.vrkt-cel-est-azul .vrkt-barra-it { color: rgba(255, 255, 255, .62); }
	.vrkt-cel-est-azul .vrkt-barra-it[aria-current], .vrkt-cel-est-azul .vrkt-barra-it[aria-expanded="true"] { color: #fff; }
	.vrkt-cel-est-azul.vrkt-cel-ind-pilula .vrkt-barra-it[aria-current] .vrkt-bi { background: rgba(255, 255, 255, .14); }
	.vrkt-cel-est-flutuante .vrkt-barra { left: 14px; right: 14px; bottom: max(14px, env(safe-area-inset-bottom, 0px)); padding: 8px; border: 0; border-radius: 26px; box-shadow: 0 18px 40px -16px rgba(var(--vi-primaria-900-rgb), .45), 0 0 0 1px rgba(var(--vi-primaria-750-rgb), .06); }
	.vrkt-cel-est-flutuante.vrkt-cel-ind-traco .vrkt-barra-it[aria-current]::before { top: -8px; }

	/* ── folha do Menu ── */
	.vrkt-cel-barra .vrkt-folha { display: block; position: fixed; inset: 0; z-index: 860; }
	.vrkt-cel-barra .vrkt-folha[hidden] { display: none; }
	.vrkt-folha-veu { position: absolute; inset: 0; background: rgba(var(--vi-primaria-900-rgb), .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); opacity: 0; transition: opacity .3s; }
	.vrkt-folha-p { position: absolute; left: 0; right: 0; bottom: 0; max-height: 86vh; max-height: 86dvh; display: flex; flex-direction: column; background: #fff; border-radius: 28px 28px 0 0; translate: 0 105%;
		transition: translate .38s var(--vi-curva); box-shadow: 0 -20px 50px -20px rgba(var(--vi-primaria-900-rgb), .4); }
	.vrkt-folha.on .vrkt-folha-veu { opacity: 1; }
	.vrkt-folha.on .vrkt-folha-p { translate: 0 0; }
	.vrkt-folha-pux { display: grid; place-items: center; padding: 10px 0 4px; cursor: grab; touch-action: none; }
	.vrkt-folha-pux span { width: 42px; height: 5px; border-radius: 9px; background: var(--vi-primaria-200); }
	.vrkt-folha-topo { display: flex; align-items: center; justify-content: space-between; padding: 4px 20px 10px; }
	.vrkt-folha-topo b { font-size: 1.15rem; font-weight: 800; color: var(--vi-titulo); }
	.vrkt-folha-x { display: grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 50%; background: none; color: var(--vi-titulo); cursor: pointer; }
	.vrkt-folha-x svg { width: 22px; height: 22px; }
	.vrkt-folha-corpo { overflow-y: auto; overscroll-behavior: contain; padding: 0 20px calc(28px + env(safe-area-inset-bottom, 0px)); }
	.vrkt-folha-busca { display: flex; align-items: center; gap: 10px; width: 100%; padding: 13px 18px; margin-bottom: 6px; border: 0; border-radius: 999px; background: var(--vi-primaria-50); color: var(--vi-texto-suave); font: inherit; font-size: .95rem; text-align: left; cursor: pointer; }
	.vrkt-folha-busca svg { width: 18px; height: 18px; }
	.vrkt-folha-radio { display: flex; align-items: center; gap: 12px; width: 100%; padding: 13px 16px; margin: 0 0 8px; border: 0; border-radius: 16px; background: var(--vi-primaria-50); color: var(--vi-titulo); font: inherit; font-size: .95rem; font-weight: 700; text-align: left; cursor: pointer; }
	.vrkt-folha-radio .vrk-radio-botao__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--vi-acao-600); flex: none; box-shadow: 0 0 0 4px rgba(var(--vi-acao-600-rgb), .15); }
	.vrkt-folha-radio[data-estado="tocando"] .vrk-radio-botao__dot { animation: vi-pulse 1.6s ease-out infinite; }
	.vrkt-folha-radio svg { display: none; }
	html.vrkt-folha-on .vrk-orelha { visibility: hidden; }
	.vrkt-folha-g { margin: 18px 0 4px; font-size: .66rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--vi-destaque-750); }
	.vrkt-folha-lk { display: grid; grid-template-columns: 22px minmax(0, 1fr); column-gap: 14px; align-items: center; padding: 11px 0; color: var(--vi-titulo); text-decoration: none; }
	.vrkt-folha-lk .vrkt-folha-ic { grid-row: 1 / span 2; width: 21px; height: 21px; color: var(--vi-destaque-600); }
	.vrkt-folha-lk b { font-weight: 700; font-size: 1rem; }
	.vrkt-folha-lk small { font-size: .8rem; color: var(--vi-texto-suave); }
	.vrkt-folha-lk[aria-current] b { color: var(--vi-acao-700); }
	.vrkt-folha.sem-ic .vrkt-folha-lk { grid-template-columns: minmax(0, 1fr); }
	.vrkt-folha.sem-ic .vrkt-folha-ic { display: none; }
	.vrkt-folha.sem-desc .vrkt-folha-lk small { display: none; }
	.vrkt-folha-duas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 22px; }
	.vrkt-folha-duas a { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 13px; border-radius: 16px; background: var(--vi-primaria-50); color: var(--vi-titulo); font-weight: 700; font-size: .9rem; text-decoration: none; }
	.vrkt-folha-duas a svg { width: 18px; height: 18px; }
}
@keyframes vrkt-traco { from { width: 0; opacity: 0; } to { width: 32px; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.vrkt-barra, .vrkt-folha-p, .vrkt-folha-veu { transition: none !important; }
	.vrkt-barra-it::before, .vi-mh { animation: none !important; }
}