/*
 * Modo TV do webplayer (public/assets/js/tv-mode.js liga a classe "tv-mode" no <html>): letras e alvos maiores, anel de
 * foco bem visível e o que só aparecia com o mouse por cima aparece também com o foco. Sem a classe nada aqui vale.
 */

/* Letras e alvos maiores: quase tudo no webplayer é medido em rem, então basta subir a letra da página.
   Navegador de TV costuma ter 1280 ou 1920 px de largura; o menu do topo tem de caber nos dois. */
html.tv-mode { font-size: 18px; scroll-padding-top: 8rem; scroll-padding-bottom: 2rem; }
@media (min-width: 1500px) { html.tv-mode { font-size: 21px; } }
html.tv-mode, html.tv-mode * { scroll-behavior: auto !important; } /* rolagem suave pesa na TV e atrasa o foco */

/* Menu do topo (components/header.php) numa linha só em TV de 1280 px: menos espaço entre os itens, busca só com a lupa */
html.tv-mode nav a, html.tv-mode nav button { white-space: nowrap; }
@media (max-width: 1499px) {
    html.tv-mode nav .gap-10 { gap: 1.2rem; }
    html.tv-mode nav .gap-8 { gap: 1rem; }
    html.tv-mode nav .lg\:flex.px-6 { padding-left: 1rem; padding-right: 1rem; }
    html.tv-mode nav a[href$="/search"] > span { display: none; }
}

/* Tamanhos em px do Tailwind que não sobem com o rem */
html.tv-mode .text-\[9px\] { font-size: .65rem !important; }
html.tv-mode .text-\[10px\] { font-size: .7rem !important; }
html.tv-mode .text-\[11px\] { font-size: .75rem !important; }

/* Anel de foco: uma caixa só, desenhada por cima de tudo em volta do item focado (tv-mode.js). O contorno do próprio
   item sumia atrás de cartões com camadas (desfoque, imagem) e era cortado pelas fileiras que rolam. */
html.tv-mode :focus { outline: none !important; }
.wp-tv-ring {
    position: fixed; left: 0; top: 0; z-index: 2147483646; display: none; box-sizing: border-box; pointer-events: none;
    border: 4px solid #fff; box-shadow: 0 0 0 3px #DD61AE, 0 0 28px 6px rgba(221, 97, 174, .65);
}

/* Cartões de filme/série/canal (.pc em layout/main.php): o efeito do mouse por cima vale também para o foco */
html.tv-mode .pc:focus { transform: scale(1.06); z-index: 30; }
html.tv-mode .pc:focus .pc-poster { box-shadow: 0 0 0 2px var(--acc), 0 0 0 1px rgba(255, 255, 255, .1) inset; }
html.tv-mode .pc:focus .pc-kind, html.tv-mode .pc:focus .pc-play { opacity: 1; transform: none; }
html.tv-mode .pc:focus .pc-more { max-height: 3rem; opacity: 1; transform: none; }
html.tv-mode .pc:focus .pc-title { -webkit-line-clamp: 3; }
html.tv-mode .pc-title { font-size: .8rem; }
html.tv-mode .pc-rate, html.tv-mode .pc-cta { font-size: .65rem; }
html.tv-mode .pc-meta { font-size: .6rem; }
html.tv-mode .pc-kind, html.tv-mode .pc-live-badge, html.tv-mode .wp-lang { font-size: .55rem; }

/* Ícones e textos que aparecem com o mouse por cima (group-hover) aparecem também com o foco */
html.tv-mode .group:focus .group-hover\:opacity-100,
html.tv-mode .group:focus-within .group-hover\:opacity-100 { opacity: 1; }
html.tv-mode .group:focus .group-hover\:translate-y-0,
html.tv-mode .group:focus-within .group-hover\:translate-y-0 { --tw-translate-y: 0px; }
html.tv-mode .group:focus .group-hover\:translate-x-0,
html.tv-mode .group:focus-within .group-hover\:translate-x-0 { --tw-translate-x: 0px; }

/* Aviso da primeira vez (tv-mode.js) */
.wp-tv-hint {
    position: fixed; left: 50%; bottom: 2rem; z-index: 10000; transform: translateX(-50%);
    max-width: 90vw; max-width: min(90vw, 44rem); padding: .9rem 1.4rem; border-radius: 1rem;
    background: rgba(0, 0, 0, .88); border: 1px solid rgba(255, 255, 255, .18); color: #fff;
    font: 700 .9rem/1.4 Outfit, system-ui, sans-serif; text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .7);
}