/*
Theme Name: ROG BREEDABLE Theme
Theme URI: https://reinaldomonteiro.com.br/
Description: Tema filho do Hello Elementor para o ecossistema ROG BREEDABLE. Mantém o Hello como base leve e adiciona identidade visual escura/dourada, header transparente fixo e padrões para landing pages, Wiki e painéis administrativos visuais.
Author: Reinaldo Monteiro & ROG BREEDABLE
Author URI: https://reinaldomonteiro.com.br/
Template: hello-elementor
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: rog-breedable-theme
Tags: custom-colors, custom-logo, one-column, flexible-header, elementor, dark, gold
*/

:root {
  --rog-bg: #050A12;
  --rog-bg-soft: #0A0E17;
  --rog-panel: rgba(10, 14, 23, 0.82);
  --rog-panel-strong: rgba(5, 10, 18, 0.94);
  --rog-gold: #D4AF37;
  --rog-gold-soft: #C9A227;
  --rog-gold-light: #F4D77B;
  --rog-blue: #0B6DFF;
  --rog-cyan: #23D3FF;
  --rog-text: #F7F1DF;
  --rog-muted: #B3B3B3;
  --rog-border: rgba(212, 175, 55, 0.42);
  --rog-radius: 18px;
  --rog-shadow: 0 18px 45px rgba(0, 0, 0, 0.42);
}

html { scroll-behavior: smooth; }
body {
  background: var(--rog-bg);
  color: var(--rog-text);
  font-family: Inter, Montserrat, Arial, sans-serif;
}

a { color: var(--rog-gold); }
a:hover { color: var(--rog-gold-light); }

.rog-page-shell {
  background:
    radial-gradient(circle at 20% 10%, rgba(35, 211, 255, 0.12), transparent 32%),
    radial-gradient(circle at 80% 15%, rgba(212, 175, 55, 0.10), transparent 30%),
    linear-gradient(180deg, #07111F 0%, #050A12 100%);
  min-height: 100vh;
}

.rog-gold-frame {
  border: 1px solid var(--rog-border);
  box-shadow: inset 0 0 0 1px rgba(244, 215, 123, 0.08), var(--rog-shadow);
  border-radius: var(--rog-radius);
}

.rog-card {
  background: var(--rog-panel);
  border: 1px solid var(--rog-border);
  border-radius: var(--rog-radius);
  box-shadow: var(--rog-shadow);
  backdrop-filter: blur(10px);
}

.rog-title-gradient {
  background: linear-gradient(180deg, #FFF2B6 0%, #D4AF37 48%, #8A6518 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: 0 8px 32px rgba(212, 175, 55, 0.18);
}

.rog-btn,
.elementor-button.rog-btn {
  background: linear-gradient(180deg, rgba(212,175,55,0.22), rgba(10,14,23,0.85));
  border: 1px solid var(--rog-border);
  color: var(--rog-text);
  border-radius: 999px;
  padding: 12px 22px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.rog-btn:hover,
.elementor-button.rog-btn:hover {
  background: linear-gradient(180deg, rgba(244,215,123,0.28), rgba(10,14,23,0.95));
  color: #fff;
}

/* Header transparente fixo para Elementor Theme Builder
   Aplique a classe CSS: rog-transparent-header no container principal do header. */
.rog-transparent-header,
.elementor-location-header .rog-transparent-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 9999;
  background: rgba(5, 10, 18, 0.04);
  border-bottom: 1px solid rgba(212, 175, 55, 0.12);
  transition: background 220ms ease, border-color 220ms ease, box-shadow 220ms ease, backdrop-filter 220ms ease;
}
body.rog-scrolled .rog-transparent-header,
body.rog-scrolled .elementor-location-header .rog-transparent-header {
  background: rgba(10, 14, 23, 0.92);
  border-bottom-color: rgba(201, 162, 39, 0.68);
  box-shadow: 0 12px 34px rgba(0,0,0,0.34);
  backdrop-filter: blur(12px);
}

.rog-header-logo img,
.rog-brasao img {
  max-height: 72px;
  width: auto;
  filter: drop-shadow(0 10px 22px rgba(0,0,0,0.45));
}

/* Espaço útil para páginas com header fixo */
.rog-has-fixed-header main,
body.rog-has-fixed-header .site-main {
  padding-top: 92px;
}

.rog-grid {
  display: grid;
  gap: 24px;
}
.rog-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.rog-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
  .rog-grid-3, .rog-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .rog-grid-3, .rog-grid-4 { grid-template-columns: 1fr; }
  .rog-transparent-header { position: sticky; }
}