/* ───────────────────────────────────────────────────────────────────
   Temas sazonais — aplicados via body.theme-<slug>
   Padrão (default) não tem overrides; herda do estilo base.
   ─────────────────────────────────────────────────────────────────── */


/* ════════════════════════════════════════════════════════════════════
   TEMA JUNINO 🌽🔥 (São João) — VERSÃO ARRAIÁ COMPLETA
   Paleta: laranja-fogueira, amarelo-milho, vermelho-tijolo, azul-noite
   Decorações: bandeirinhas triangulares em 2 fileiras, estrelas piscando,
               balão subindo, fogueira animada, tipografia rústica
   ═══════════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Caveat+Brush&family=Indie+Flower&display=swap');

body.theme-junino {
  --gs-primary: #ff7a00;
  --gs-primary-2: #d2691e;
  --gs-gradient: linear-gradient(135deg, #d84315 0%, #ff7a00 35%, #ffa726 65%, #ffd54f 100%);
  --gs-secondary: #c62828;
  --live-red: #c62828;
  --gs-bg: #14080a;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(255,143,0,.06), transparent 50%),
    radial-gradient(ellipse at 80% 100%, rgba(214,80,40,.05), transparent 55%),
    #14080a !important;
}

/* ── 1. BANDEIRINHAS TRIANGULAIRES no topo (estilo arraiá real) ───── */
body.theme-junino #gs-app::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 56px;
  pointer-events: none; z-index: 70;
  /* Cordão (linha cinza fina no topo) */
  background-image:
    linear-gradient(180deg, rgba(80,60,40,.7) 0 2px, transparent 2px),
    /* Bandeirinhas triangulares — 6 cores em SVG inline */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 50'><g stroke='%23000' stroke-opacity='.15' stroke-width='1'><polygon points='0,2 18,2 9,40' fill='%23e53935'/><polygon points='20,2 38,2 29,40' fill='%23ffb300'/><polygon points='40,2 58,2 49,40' fill='%23039be5'/><polygon points='60,2 78,2 69,40' fill='%2343a047'/><polygon points='80,2 98,2 89,40' fill='%23ff7a00'/><polygon points='100,2 118,2 109,40' fill='%238e24aa'/><polygon points='120,2 138,2 129,40' fill='%23e53935'/><polygon points='140,2 158,2 149,40' fill='%23ffb300'/><polygon points='160,2 178,2 169,40' fill='%23039be5'/><polygon points='180,2 198,2 189,40' fill='%2343a047'/><polygon points='200,2 218,2 209,40' fill='%23ff7a00'/><polygon points='220,2 238,2 229,40' fill='%238e24aa'/></g></svg>");
  background-size: 100% 100%, 240px 50px;
  background-repeat: no-repeat, repeat-x;
  background-position: 0 0, 0 4px;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
  animation: jn-balanca 4.5s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes jn-balanca {
  0%, 100% { transform: rotate(-.6deg); }
  50% { transform: rotate(.6deg); }
}
body.theme-junino #gs-app { padding-top: 56px; }

/* ── 2. ESTRELAS piscando no fundo (céu de São João) ──────────────── */
body.theme-junino::before {
  content: '';
  position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 28% 42%, #ffd54f 50%, transparent 100%),
    radial-gradient(1px 1px at 47% 12%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 62% 35%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 78% 18%, #ffd54f 50%, transparent 100%),
    radial-gradient(1px 1px at 88% 52%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 16% 65%, #ffd54f 50%, transparent 100%),
    radial-gradient(1px 1px at 36% 78%, #fff 50%, transparent 100%),
    radial-gradient(1px 1px at 55% 88%, #fff 50%, transparent 100%),
    radial-gradient(1.5px 1.5px at 72% 72%, #ffd54f 50%, transparent 100%),
    radial-gradient(1px 1px at 92% 82%, #fff 50%, transparent 100%);
  animation: jn-estrelas 4s ease-in-out infinite;
  opacity: .6;
}
@keyframes jn-estrelas {
  0%, 100% { opacity: .35; }
  50% { opacity: .8; }
}

/* ── 3. BALÃO JUNINO subindo (canto direito, lento) ────────────────── */
body.theme-junino::after {
  content: '';
  position: fixed; right: 4%; bottom: -120px; width: 56px; height: 80px;
  pointer-events: none; z-index: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 56 80'><defs><linearGradient id='g' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23ff7a00'/><stop offset='.5' stop-color='%23ffd54f'/><stop offset='1' stop-color='%23e53935'/></linearGradient></defs><ellipse cx='28' cy='28' rx='20' ry='25' fill='url(%23g)' stroke='%238b3a00' stroke-width='1.2'/><line x1='14' y1='45' x2='28' y2='62' stroke='%238b3a00' stroke-width='.8'/><line x1='42' y1='45' x2='28' y2='62' stroke='%238b3a00' stroke-width='.8'/><rect x='24' y='62' width='8' height='6' fill='%23ff7a00' stroke='%238b3a00'/><circle cx='28' cy='70' r='3' fill='%23ffeb3b' opacity='.9'/></svg>");
  background-repeat: no-repeat;
  background-size: contain;
  filter: drop-shadow(0 0 12px rgba(255,167,38,.4));
  animation: jn-balao 22s linear infinite;
  opacity: .85;
}
@keyframes jn-balao {
  0% { transform: translate(0, 0) rotate(-3deg); }
  25% { transform: translate(-30px, -25vh) rotate(2deg); }
  50% { transform: translate(15px, -55vh) rotate(-2deg); }
  75% { transform: translate(-10px, -85vh) rotate(3deg); }
  100% { transform: translate(0, -120vh) rotate(0); opacity: 0; }
}

/* ── 4. FOGUEIRA animada no canto inferior esquerdo (decorativa) ──── */
body.theme-junino .h-wrap::after {
  content: '🔥';
  position: fixed; left: 12px; bottom: calc(var(--gs-nav-h, 0px) + 12px);
  font-size: 28px; z-index: 1;
  animation: jn-fogueira 1.2s ease-in-out infinite alternate;
  filter: drop-shadow(0 0 8px rgba(255,107,0,.6));
  pointer-events: none;
}
@keyframes jn-fogueira {
  from { transform: scale(1) rotate(-2deg); }
  to { transform: scale(1.15) rotate(2deg); }
}
@media (max-width: 600px) {
  body.theme-junino .h-wrap::after { font-size: 22px; left: 8px; }
}

/* ── 5. HEADER da home com brilho de fogueira ──────────────────────── */
body.theme-junino .h-head {
  background:
    radial-gradient(ellipse at center bottom, rgba(255,107,0,.18), transparent 65%),
    radial-gradient(ellipse at 30% 100%, rgba(255,193,7,.10), transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(214,80,40,.08), transparent 50%);
  border-radius: 22px;
  padding: 28px 24px;
  border: 1px solid rgba(255,167,38,.12);
}

/* Tipografia caipira nos títulos da home */
body.theme-junino .h-head h1,
body.theme-junino .h-section-title,
body.theme-junino h1 {
  font-family: 'Caveat Brush', 'Indie Flower', cursive;
  letter-spacing: .01em;
  text-shadow: 0 2px 0 rgba(0,0,0,.25);
}
body.theme-junino .h-head h1 {
  font-size: clamp(28px, 5.5vw, 44px);
  color: #fff5e1;
}
body.theme-junino .h-head p {
  font-style: italic; color: rgba(255,213,79,.8);
}

/* Saudação ganha emoji caipira no fim */
body.theme-junino .h-head h1::after {
  content: ' 🪕🔥🌽';
  font-size: .65em;
  display: inline-block;
  animation: jn-emoji 3s ease-in-out infinite;
}
@keyframes jn-emoji {
  0%, 100% { transform: rotate(-5deg); }
  50% { transform: rotate(5deg); }
}

/* ── 6. CARDS e seções com bordas estilo arraiá ──────────────────── */
body.theme-junino .h-section-title {
  color: #ffd54f;
}
body.theme-junino .h-cta,
body.theme-junino .ct-pub,
body.theme-junino .h-cta-primary {
  background: linear-gradient(135deg, #d84315, #ff7a00, #ffa726) !important;
  box-shadow: 0 4px 14px rgba(216,67,21,.4);
  border: 2px solid rgba(255,255,255,.15);
}
body.theme-junino .h-cta:hover,
body.theme-junino .ct-pub:hover {
  box-shadow: 0 6px 20px rgba(255,122,0,.55);
}

/* Live card mais quente */
body.theme-junino .h-livecard,
body.theme-junino [data-no-spa][href*="ao-vivo"] {
  box-shadow: 0 0 18px rgba(255,107,0,.4);
}

/* Mood chips em tons quentes */
body.theme-junino .h-mood-chip {
  background: linear-gradient(135deg, rgba(255,122,0,.10), rgba(255,193,7,.06)) !important;
  border-color: rgba(255,167,38,.3) !important;
  color: #ffd54f !important;
}
body.theme-junino .h-mood-chip:hover {
  background: linear-gradient(135deg, rgba(255,122,0,.20), rgba(255,193,7,.12)) !important;
  border-color: rgba(255,167,38,.5) !important;
}

/* Cabeçalho da composer com brilho de fogueira */
body.theme-junino .h-composer,
body.theme-junino .h-section.h-feed .h-composer {
  background: linear-gradient(180deg, rgba(255,122,0,.04), rgba(214,80,40,.02));
  border-color: rgba(255,167,38,.12);
}

/* Sidebar mantém tons + acento laranja */
body.theme-junino .gs-sidebar .sb-item.active,
body.theme-junino .gs-sidebar .sb-item:hover {
  background: rgba(255,122,0,.10) !important;
  color: #ffd54f !important;
}


/* ════════════════════════════════════════════════════════════════════
   TEMA COPA DO MUNDO ⚽🇧🇷
   Paleta: verde-amarelo-azul brasileiro, taça dourada
   Decorações: borda inferior verde-amarelo-azul, bola animada
   ═══════════════════════════════════════════════════════════════════ */
body.theme-copa {
  --gs-primary: #009c3b;
  --gs-primary-2: #ffdf00;
  --gs-gradient: linear-gradient(135deg, #009c3b 0%, #ffdf00 50%, #002776 100%);
  --gs-secondary: #ffdf00;
  --gs-bg: #001a4d;
}

/* Faixa verde-amarelo-azul no topo */
body.theme-copa #gs-app::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 5px;
  pointer-events: none; z-index: 70;
  background: linear-gradient(90deg,
    #009c3b 0%, #009c3b 33%,
    #ffdf00 33%, #ffdf00 66%,
    #002776 66%, #002776 100%);
  box-shadow: 0 2px 12px rgba(0,156,59,.4);
}

/* Header com aura de campo de futebol */
body.theme-copa .h-head {
  background: radial-gradient(ellipse at top, rgba(0,156,59,.1), transparent 70%);
  border-radius: 18px;
}
body.theme-copa .h-head h1::after {
  content: ' ⚽';
  font-size: .9em;
  display: inline-block;
  animation: copa-bola 3s ease-in-out infinite;
}
@keyframes copa-bola {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50% { transform: rotate(180deg) translateY(-4px); }
}

/* Botões CTA ganham brilho dourado */
body.theme-copa .h-cta,
body.theme-copa .ct-pub {
  box-shadow: 0 4px 16px rgba(255,223,0,.35);
}


/* ════════════════════════════════════════════════════════════════════
   TEMA ELEIÇÕES 🗳️
   Paleta: tons cívicos — azul marinho + branco + dourado
   Decorações: badge "VOTE" sutil, tipografia mais formal
   ═══════════════════════════════════════════════════════════════════ */
body.theme-eleicoes {
  --gs-primary: #1976d2;
  --gs-primary-2: #0d47a1;
  --gs-gradient: linear-gradient(135deg, #0d47a1 0%, #1976d2 50%, #d4af37 100%);
  --gs-secondary: #d4af37;
  --gs-bg: #0a1628;
}

body.theme-eleicoes #gs-app::before {
  content: '';
  position: fixed; top: 0; left: 0; right: 0; height: 4px;
  pointer-events: none; z-index: 70;
  background: linear-gradient(90deg, #0d47a1 0%, #1976d2 50%, #d4af37 100%);
  box-shadow: 0 1px 8px rgba(13,71,161,.35);
}

body.theme-eleicoes .h-head {
  background:
    radial-gradient(ellipse at top, rgba(25,118,210,.10), transparent 65%),
    radial-gradient(ellipse at 80% 0%, rgba(212,175,55,.06), transparent 50%);
  border-radius: 18px;
}

body.theme-eleicoes .h-head h1::after {
  content: ' 🗳️';
  font-size: .85em;
  margin-left: 4px;
}

/* Selo discreto "DEMOCRACIA" no canto */
body.theme-eleicoes #gs-app::after {
  content: 'GaleraShow · Democracia & Música';
  position: fixed; bottom: 8px; right: 12px;
  font-size: 9px; font-weight: 700; letter-spacing: .12em;
  color: rgba(212,175,55,.4); text-transform: uppercase;
  pointer-events: none; z-index: 1; opacity: .8;
}
@media (max-width: 991px) {
  body.theme-eleicoes #gs-app::after { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   Selector de tema no SAC (preview cards)
   ═══════════════════════════════════════════════════════════════════ */
.theme-preview {
  position: relative; aspect-ratio: 16/10; border-radius: 14px;
  overflow: hidden; cursor: pointer; border: 2px solid transparent;
  transition: border-color .2s, transform .15s;
}
.theme-preview:hover { transform: translateY(-3px); }
.theme-preview.is-current { border-color: #22c55e; box-shadow: 0 0 0 4px rgba(34,197,94,.15); }
.theme-preview.preview-default { background: linear-gradient(135deg, #1a1a2e, #0d0d1a); }
.theme-preview.preview-default::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 60%;
  background: radial-gradient(ellipse at bottom, rgba(233,30,99,.4), transparent 70%);
}
.theme-preview.preview-junino { background: linear-gradient(180deg, #1a0f0a, #2d1810); }
.theme-preview.preview-junino::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 30%;
  background-image:
    linear-gradient(135deg, transparent 49%, #ff6f00 49% 51%, transparent 51%),
    linear-gradient(135deg, transparent 49%, #ffc107 49% 51%, transparent 51%),
    linear-gradient(135deg, transparent 49%, #4caf50 49% 51%, transparent 51%),
    linear-gradient(135deg, transparent 49%, #03a9f4 49% 51%, transparent 51%);
  background-size: 40px 100%;
  background-position: 0 0, 10px 0, 20px 0, 30px 0;
  background-repeat: repeat-x;
}
.theme-preview.preview-copa { background: linear-gradient(180deg, #001a4d, #003366); }
.theme-preview.preview-copa::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 8px;
  background: linear-gradient(90deg, #009c3b 33%, #ffdf00 33% 66%, #002776 66%);
}
.theme-preview.preview-copa::after {
  content: '⚽'; position: absolute; right: 16px; bottom: 16px; font-size: 28px;
}
.theme-preview.preview-eleicoes { background: linear-gradient(180deg, #0a1628, #0d47a1); }
.theme-preview.preview-eleicoes::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #0d47a1, #1976d2 50%, #d4af37);
}
.theme-preview.preview-eleicoes::after {
  content: '🗳️'; position: absolute; right: 16px; bottom: 16px; font-size: 28px;
}