/*
Theme Name: Arena Squash (Hero Vídeo) v5
Author: Diogo Mazzoni
Description: Tema one-page responsivo com hero 100vh, overlay header, logos com swap, parallax opcional, GA4 events, Gutenberg "Conteúdo" antes de Professores. Instagram via plugin (shortcode) — não embutido.
Version: 5.0.0
Text Domain: arena-squash
*/

/* Aspect helpers */
.aspect-4-3 { position: relative; width: 100%; padding-top: 75%; }
.aspect-4-3 > img, .aspect-4-3 > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.aspect-16-9 { position: relative; width: 100%; padding-top: 56.25%; }
.aspect-16-9 > img, .aspect-16-9 > iframe { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Header overlay */
header.header-overlay { position: sticky; top: 0; z-index: 40; background: rgba(0,0,0,.0); border-bottom: 1px solid rgba(255,255,255,.0); transition: background .25s ease, border-color .25s ease, backdrop-filter .25s ease; }
header.header-overlay.scrolled { background: rgba(10,10,10,.85); border-bottom-color: rgba(255,255,255,.12); backdrop-filter: blur(6px); }

/* Logo swap */
.header-logo .logo-dark { display: none; }
header.header-overlay.scrolled .logo-dark { display: inline; }
header.header-overlay.scrolled .logo-light { display: none; }

/* Hero */
#hero .hero-inner { min-height: 100vh; } /* full viewport always */
#hero .kb { animation: arenaKB 12s ease-in-out infinite alternate; transform-origin: 50% 50%; will-change: transform; }
@keyframes arenaKB { 0% { transform: scale(1) } 100% { transform: scale(1.08) translate(-2%, -2%) } }
#hero video { object-fit: cover; width: 100%; height: 100%; }
#hero .side-fade { pointer-events:none; position:absolute; inset:0; background: linear-gradient(90deg, rgba(0,0,0,.25), transparent 20%, transparent 80%, rgba(0,0,0,.25)); }

/* Parallax */
.parallax-wrap{position:relative; overflow:hidden;}
.parallax-bg{position:absolute; inset:0; background-size:cover; background-position:center; background-attachment:fixed; transform:translateZ(0);}
.parallax-inner{position:relative; padding:10vh 0;}

/* Floating WhatsApp */
.arena-whatsapp-fab{position:fixed; right:18px; bottom:18px; z-index:60; background:#25D366; color:#0b2816; font-weight:700; border-radius:999px; padding:.75rem 1rem; box-shadow:0 10px 30px rgba(0,0,0,.25);}
.arena-whatsapp-fab:hover{filter:brightness(.95);}

body { scroll-behavior: smooth; }

/* === Fix Hero Mobile (altura total + foco) === */
#hero { min-height: 100svh; } /* Usa viewport dinâmico no mobile (corrige “corte” por causa da barra do navegador) */

@supports (padding: max(0px)) {
  /* margem de segurança para iOS notch e ajustes de respiro */
  #hero .hero-inner {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* Mapeia o foco mobile pelas classes já existentes no <video> (focusm-*) */
video.focusm-top       { object-position: 50% 20%; }
video.focusm-center    { object-position: 50% 50%; }
video.focusm-bottom    { object-position: 50% 80%; }
/* (opcionais)
video.focusm-left      { object-position: 20% 50%; }
video.focusm-right     { object-position: 80% 50%; }
*/