/*
Theme Name: Hello Elementor Child
Theme URI: https://rhaokar.com.br
Description: Tema Customizado Oficial do Cenário de Campanha Rhaokar (Pathfinder 1e / D&D 3.5)
Author: Paulo / Rhaokar
Author URI: https://rhaokar.com.br
Template: hello-elementor
Version: 1.0.0
Text Domain: hello-elementor-child
*/

/* --- FONTES RPG DO RHAOKAR --- */
@font-face {
	font-family: 'NewRocker';
	src: url('fontes/NewRocker-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Almendra';
	src: url('fontes/Almendra-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'MedievalSharp';
	src: url('fontes/MedievalSharp-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'GrenzeGotisch';
	src: url('fontes/GrenzeGotisch-Regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

/* --- ESTILOS GLOBAIS DE RHAOKAR --- */
html, body {
	background-color: #ACE6FF !important;
	margin: 0;
	padding: 0;
	font-family: 'Almendra', 'Times New Roman', serif;
	min-height: 100vh;
}

/* Titulos e Botões SVG */
.titulo-principal {
	font-family: 'NewRocker', 'Times New Roman', serif !important;
	color: #000 !important;
	text-shadow: 2px 2px 4px rgba(0,0,0,0.15);
}

.botao text {
	font-family: 'NewRocker', 'Times New Roman', serif !important;
	cursor: pointer;
}

.botao:hover polygon {
	fill: #222 !important;
	stroke: #ffd700 !important;
	transition: all 0.2s ease-in-out;
}

/* Cards com Fundo de Papiro e Borda RPG */
.contem-deuses, .contem-racas {
	background: #f9f2e7 !important;
	border: 3px solid #8b5a2b !important;
	border-radius: 8px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.25);
}

/* Animações de Nuvens e Grama */
.contem_nuvem, .rhaokar-nuvem-container {
	display: block;
	width: 100%;
	overflow: hidden;
	height: 185px;
	background-color: #ACE6FF;
	position: relative;
}

.contem_grama, .rhaokar-grama-container {
	display: block;
	width: 100%;
	overflow: hidden;
	height: 185px;
	background-color: transparent;
	position: relative;
}

#clouds, .rhaokar-nuvem-animada {
	background-image: url('img/Sprite-NuvemSite.png');
	background-repeat: repeat-x;
	background-position: 0 bottom;
	background-size: auto 185px;
	height: 185px;
	width: 100%;
	animation: rhaokar-move-clouds 25s linear infinite !important;
}

@keyframes rhaokar-move-clouds {
	0% {
		background-position: 0 bottom;
	}
	100% {
		background-position: 2368px bottom;
	}
}

#grass, .rhaokar-grama-animada {
	background-image: url('img/Sprite-GramaSite.png');
	background-repeat: repeat-x;
	background-position: 0 0;
	height: 190px;
	animation: rhaokar-skew-grass 3s infinite alternate ease-in-out !important;
	width: 120%;
	margin-left: -10%;
	transform-origin: bottom center;
}

@keyframes rhaokar-skew-grass {
	0% {
		transform: skewX(10deg) translate(-5px);
	}
	100% {
		transform: skewX(-10deg) translate(5px);
	}
}

/* --- CABEÇALHO GLOBAL & CORREÇÃO DE LAYOUT ELEMENTOR --- */
header[data-elementor-type="header"],
.elementor-location-header,
.ehf-header,
header.site-header {
	width: 100% !important;
	max-width: 100% !important;
	display: block !important;
	clear: both !important;
	margin: 0 !important;
	padding: 0 !important;
}

/* Força os containers internos do cabeçalho a ficarem em coluna (menu no topo, nuvens embaixo) */
header[data-elementor-type="header"] .e-con,
header[data-elementor-type="header"] .e-flexbox,
.elementor-location-header .e-con,
.elementor-location-header .e-flexbox,
.ehf-header .e-con,
.ehf-header .e-flexbox {
	display: flex !important;
	flex-direction: column !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	max-width: 100% !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* Garante que o widget do Menu Superior ocupe 100% da largura em barra preta horizontal */
header[data-elementor-type="header"] .elementor-widget-nav-menu,
.elementor-location-header .elementor-widget-nav-menu,
.ehf-header .elementor-widget-nav-menu {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	display: block !important;
	background-color: #000000 !important;
	margin: 0 !important;
	padding: 0 !important;
}

header[data-elementor-type="header"] .elementor-nav-menu--main,
.elementor-location-header .elementor-nav-menu--main,
.ehf-header .elementor-nav-menu--main {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
	background-color: #000000 !important;
}

header[data-elementor-type="header"] ul.elementor-nav-menu,
.elementor-location-header ul.elementor-nav-menu,
.ehf-header ul.elementor-nav-menu {
	width: 100% !important;
	display: flex !important;
	flex-wrap: wrap !important;
	justify-content: center !important;
	align-items: center !important;
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background-color: #000000 !important;
}

header[data-elementor-type="header"] ul.elementor-nav-menu > li,
.elementor-location-header ul.elementor-nav-menu > li,
.ehf-header ul.elementor-nav-menu > li {
	display: inline-block !important;
}

/* Área de Nuvens logo abaixo do menu ocupando 100% de largura */
header[data-elementor-type="header"] .contem_nuvem,
header[data-elementor-type="header"] .rhaokar-nuvem-box,
header[data-elementor-type="header"] #clouds,
.elementor-location-header .contem_nuvem,
.elementor-location-header .rhaokar-nuvem-box,
.elementor-location-header #clouds,
.ehf-header .contem_nuvem,
.ehf-header .rhaokar-nuvem-box,
.ehf-header #clouds {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 auto !important;
	display: block !important;
	clear: both !important;
}

/* Esconde navbar e nuvens duplicadas no header.php quando Elementor Header já existe */
header[data-elementor-type="header"] ~ .contem_nuvem,
header[data-elementor-type="header"] ~ nav.navbar,
.elementor-location-header ~ .contem_nuvem,
.elementor-location-header ~ nav.navbar,
.ehf-header ~ .contem_nuvem,
.ehf-header ~ nav.navbar {
	display: none !important;
}