/*
 Theme Name:   Sorbet Splash (Child)
 Theme URI:    https://arnaldolima.com/
 Description:  Child theme do Sorbet com uma capa (splash) em tela cheia: texto "digitado", áudio com play/pause/mute, botões de redes sociais e opções de acessibilidade. Ideal para landing pessoal minimalista.
 Author:       Arnaldo Lima & ChatGPT
 Author URI:   https://arnaldolima.com/
 Template:     sorbet
 Version:      1.5.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  sorbet-splash-child
 Tags:         one-column, custom-colors, custom-background, custom-header, featured-images, accessibility-ready, rtl-language-support, translation-ready
 Requires at least: 5.8
 Tested up to: 6.6
 Requires PHP: 7.4
*/

@import url("../sorbet/style.css");

/* Ocultar header/footer do Sorbet APENAS no template splash */
body.splash-body #masthead,
body.splash-body .site-header,
body.splash-body .site-footer,
body.splash-body .site-branding,
body.splash-body .menu-toggle,
body.splash-body .search-toggle { display:none !important; }
body.splash-body { padding-top:0 !important; margin-top:0 !important; }

/* SPLASH LAYOUT */
:root{
  --splash-overlay: .35;
  --text-color: #dddddd;
  --poem-font-size: 18px;
  --poem-line-height: 27px;
  --poem-letter-spacing: 0px;
  --poem-font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
}
.splash-wrap{position:fixed; inset:0; overflow:hidden; background:#000; z-index:1;}
/* overlay escurecedor */
.splash-wrap:after{content:""; position:absolute; inset:0; background:#000; opacity:var(--splash-overlay); pointer-events:none;}

.splash-text{position:fixed; right:20px; top:84px; width:min(540px,46vw); text-align:right; color:var(--text-color); z-index:2;}
.splash-text p{
  font-family: var(--poem-font-family);
  font-size: var(--poem-font-size);
  line-height: var(--poem-line-height);
  letter-spacing: var(--poem-letter-spacing);
  font-weight:300; margin-bottom:27px;
  text-shadow:0 0 12px rgba(255,255,255,.08)
}
.splash-controls{position:fixed; top:20px; right:20px; display:flex; gap:10px; align-items:center; z-index:110;}
.splash-btn{cursor:pointer; border:1px solid rgba(255,255,255,.25); color:#ddd; background:rgba(0,0,0,.35); padding:8px 12px; border-radius:12px; user-select:none}
.splash-btn:hover{background:rgba(255,255,255,.06)}
.splash-footer{position:fixed; right:20px; bottom:20px; display:flex; gap:8px; z-index:2;}
.splash-icon{display:inline-flex; width:28px; height:28px; align-items:center; justify-content:center; text-decoration:none; color:#fff; border:1px solid rgba(255,255,255,.25); border-radius:10px; background:rgba(0,0,0,.35)}
.splash-icon:hover{background:rgba(255,255,255,.06)}
.splash-type span{opacity:0; display:inline-block; animation:letter-glow .7s ease both}
@keyframes letter-glow{0%{opacity:0;text-shadow:0 0 2px rgba(255,255,255,.15)}66%{opacity:1;text-shadow:0 0 18px rgba(255,255,255,.85)}100%{opacity:.8;text-shadow:0 0 0 rgba(255,255,255,0)}}

/* Tooltip */
.splash-tip{position:fixed; top:58px; right:20px; z-index:120; color:#111; background:#fff; border-radius:10px; padding:8px 10px; font:600 12px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; box-shadow:0 6px 22px rgba(0,0,0,.35); opacity:.95; transform:translateY(-6px);}
.splash-tip:after{content:""; position:absolute; top:100%; right:14px; border:7px solid transparent; border-top-color:#fff;}
@keyframes ping { 0%{transform:translateY(-6px); opacity:.95} 60%{transform:translateY(0); opacity:1} 100%{transform:translateY(-6px); opacity:.95} }
.splash-tip{ animation: ping 2.2s ease-in-out infinite; }
.splash-tip small{ display:block; font-weight:400; color:#444; margin-top:4px; }

/* FULL-BLEED OVERRIDES */
body.splash-body .site-content,
body.splash-body .site-info,
body.splash-body .content-area,
body.splash-body .site-main { max-width:100% !important; margin:0 !important; float:none !important; }

body.splash-body .hentry { background:transparent !important; border:0 !important; padding:0 !important; margin:0 !important; }
body.splash-body .hentry:before, body.splash-body .hentry:after { display:none !important; }

body.splash-body .entry-content, 
body.splash-body .page .entry-content { margin:0 !important; }
body.splash-body .site-content .widget-area { display:none; }

/* Focus visível (acessibilidade) */
.splash-btn:focus-visible, .splash-icon:focus-visible{
  outline: 3px solid currentColor; outline-offset: 3px;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

/* Respeitar prefers-reduced-motion no CSS (fallback) */
@media (prefers-reduced-motion: reduce){
  .splash-type span{ animation: none !important; opacity: 1 !important; }
}

/* Responsive */
@media (max-width:900px){ .splash-text{width:60vw; font-size:.95em} }
@media (max-width:600px){ .splash-text{width:70vw; font-size:.85em} }


/* ===== v1.4.4 — Mobile polish ===== */

/* iOS safe areas (notch) */
.splash-controls{ top: calc(20px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); }
.splash-text{ top: calc(84px + env(safe-area-inset-top)); right: calc(20px + env(safe-area-inset-right)); }
.splash-footer{ right: calc(20px + env(safe-area-inset-right)); bottom: calc(20px + env(safe-area-inset-bottom)); }

/* Fluid type: limita superior pelo valor configurado e adapta em telas pequenas */
.splash-text p{
  font-size: clamp(16px, 4.4vw, var(--poem-font-size));
  line-height: clamp(22px, 6.2vw, var(--poem-line-height));
  letter-spacing: clamp(0px, 0.15vw, var(--poem-letter-spacing));
}

/* Telefones: centraliza o bloco, aumenta contraste e evita conflito com os ícones */
@media (max-width: 768px){
  .splash-text{
    width: min(88vw, 520px);
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
    padding-bottom: 100px; /* espaço para os ícones do rodapé */
  }
  .splash-text p{
    text-shadow: 0 0 10px rgba(0,0,0,.55), 0 1px 0 rgba(0,0,0,.35);
  }
  .splash-wrap:after{
    opacity: calc(var(--splash-overlay) + .15);
  }
}

/* Telas muito pequenas */
@media (max-width: 380px){
  .splash-text{ width: 92vw; }
}


/* ===== v1.5.0 — New features ===== */

/* CSS variables: per-device overlay handled via --splash-ov-d / --splash-ov-m */
:root{ --splash-ov-d: var(--splash-overlay); --splash-ov-m: calc(var(--splash-overlay) + .15); }
.splash-wrap:after{ opacity: var(--splash-ov-d); }
@media (max-width: 768px){ .splash-wrap:after{ opacity: var(--splash-ov-m); } }

/* Mobile alignment toggle via body classes */
@media (max-width: 768px){
  body.splash-mobile-center .splash-text{
    width: min(88vw, 520px);
    right: auto; left: 50%; transform: translateX(-50%);
    text-align: center; padding-bottom: 100px;
  }
  body.splash-mobile-right .splash-text{
    width: 70vw; right: 20px; left: auto; transform: none;
    text-align: right; padding-bottom: 100px;
  }
}

/* stanza gap markers produced by JS */
.stanza-gap{ display:block; height: 12px; }

/* Share group (bottom-left) */
.splash-share{ position:fixed; left: calc(20px + env(safe-area-inset-left)); bottom: calc(20px + env(safe-area-inset-bottom)); display:flex; gap:8px; z-index:2; }
.splash-share .splash-icon{ width:28px; height:28px; }

/* Logo/assinatura (bottom-left, above share) */
.splash-logo{ position:fixed; left: calc(20px + env(safe-area-inset-left)); bottom: calc(64px + env(safe-area-inset-bottom)); z-index:2; max-width:160px; opacity:.85; }
.splash-logo img{ max-width:100%; height:auto; display:block; }