/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Citação, Quote, Citacao */
.wp-block-quote {
	margin: 10px 0;
	padding: 5px 20px;
	border-left: solid #1B637B 5px;
	color: #0a3949;
	font-style: italic;
}
.wp-block-quote p {
	display: inline;
}
.wp-block-quote::before {
	content: "";
	background-image: url(/wp-content/themes/hello-elementor-child/assets/icons/quotes.svg);
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	rotate: 180deg;
}
.wp-block-quote::after {
	content: "";
	display: inline-block;
	background-image: url(/wp-content/themes/hello-elementor-child/assets/icons/quotes.svg);
	width: 20px;
	background-repeat: no-repeat;
	background-size: contain;
	height: 20px;
}



/* 1. Definição das variáveis de cor */
:root {
  /* Cores do Tema Claro (Padrão) */
  --cor-fundo-principal: #ffffff;
  --cor-fundo-bloco: #f5f5f5;
  --cor-texto-principal: #333333;
  --cor-titulo: #1a1a1a;
  --cor-link: #c42222;
  --cor-borda: #e0e0e0;
}

[data-theme="dark"] {
  /* Cores do Tema Escuro (Quando ativado) */
  --cor-fundo-principal: #121212;
  --cor-fundo-bloco: #1e1e1e;
  --cor-texto-principal: #e0e0e0;
  --cor-titulo: #ffffff;
  --cor-link: #ff5555; /* Um vermelho mais vibrante para fundos escuros */
  --cor-borda: #444444;
}

/* 2. Aplicação das variáveis no seu design */
body {
  background-color: var(--cor-fundo-principal);
  color: var(--cor-texto-principal);
  transition: background-color 0.3s, color 0.3s; /* Transição suave */
}

h1, h2, h3 {
  color: var(--cor-titulo);
}

a {
  color: var(--cor-link);
}

.meu-card, .post-destacado-agendado-tema {
  background-color: var(--cor-fundo-bloco);
  border: 1px solid var(--cor-borda);
}

/* Seu cronômetro também pode usar as variáveis */
.cronometro-container-generico {
    background-color: var(--cor-link);
    color: var(--cor-fundo-principal); /* Exemplo: texto branco */
}

.ue-grid-item {
    aspect-ratio: 4 / 3;
    height: auto !important;
    width: auto !important;
}

.wp-caption {
    aspect-ratio: 16 / 9 !important;
	height: auto !important;
}

.ue-grid-item-title {
    width: 100%;
    color white;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ue_p_title {
    width: 100%;
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.elementor-widget-ucaddon_post_magazine_grid {
	width: 100%
}


@media only screen and (max-width: 768px) {
    /* 1. Força o Grid a ter apenas 1 coluna no celular */
    .uc_post_grid_style_one_wrap {
        grid-template-columns: 1fr !important;
        display: grid !important;
    }
    .wp-caption {
		display: block; /* Faz a imagem ocupar sua própria linha */
		width: 100%; /* A imagem ocupa a largura toda */
   		height: auto; /* Mantém a proporção */
    	margin-bottom: 20px; /* Dá um espaço entre a imagem e o texto */
    }

    /* 2. Força o Card a empilhar (Imagem em cima, Texto embaixo) */
    .uc_post_grid_style_one_item {
        display: flex !important;
        flex-direction: column !important; /* Isso resolve a sobreposição lateral */
        height: auto !important;
        min-width: 0 !important; /* O 'Hack' do Safari */
        margin-bottom: 20px !important;
    }

    /* 3. Reseta a largura da imagem e do conteúdo para 100% */
    .uc_post_grid_style_one_image, 
    .uc_content {
        width: 100% !important;
        flex-basis: auto !important;
        flex-grow: 0 !important;
        flex-shrink: 0 !important;
        min-width: 0 !important; /* Garante que o texto não 'estoure' a largura */
    }

    /* 4. Garante que a imagem não suma ou fique gigante */
    .uc_post_image img {
        width: 100% !important;
        height: auto !important;
        object-fit: cover;
    }
    .elementor-widget-image {
        flex-direction: column; /* Força um item a ficar embaixo do outro */
        height: auto; /* Garante que o container cresça para caber tudo */
    }
    
    /* 5. Ajuste fino de espaçamento no texto */
    .uc_content_inner {
        padding: 15px 0 !important;
    }
}

.elementor-widget-theme-post-content {
	display: block !important;
    position: relative;
    overflow: hidden; /* Ou visibible, dependendo do efeito desejado */
    width: 100%;
}

.elementor-widget-image:not(.elementor-widget-theme-site-logo) .elementor-widget-container .wp-caption {
    display: table !important; 
    height: auto !important; 
    position: relative;
    table-layout: fixed; /* Garante estabilidade na largura */
}

.elementor-widget-image:not(.elementor-widget-theme-site-logo) img {
    height: auto !important; /* Mantém a proporção correta */
    display: block !important;
	position: relative;
    max-width: 100%;
}


figure.wp-caption.alignright {
    display: table !important;      /* O truque para o Safari respeitar a altura */
    float: right !important;        /* Garante que vá para a direita */
    height: auto !important;        /* Altura automática correta */
    margin: 5px 0 20px 20px !important; /* Margem esquerda para o texto não colar */
    max-width: 50%;                 /* Impede que ocupe mais da metade da tela no Desktop */
    clear: none !important;         /* Permite que o texto fique ao lado */
}

/* 2. Ajusta a imagem dentro dessa figura */
figure.wp-caption.alignright img {
    display: block !important;
    width: 100% !important;         /* Preenche a "tabela" */
    height: auto !important;        /* Proporção correta */
    max-width: 100% !important;
}

/* 3. Garante que a legenda fique bonitinha embaixo */
figure.wp-caption.alignright figcaption {
    display: table-caption !important;
    caption-side: bottom !important;
    text-align: center;
    font-size: 12px;
    padding-top: 5px;
}

@media (max-width: 767px) {
    figure.wp-caption.alignright {
        float: none !important;     /* Remove flutuação */
        margin: 0 auto 20px auto !important; /* Centraliza */
        max-width: 100% !important; /* Ocupa a tela toda */
        display: table !important;
        width: 100% !important;
    }
}


.elementor-widget-theme-post-content blockquote {
    margin: 5px !important;
    padding-left: 10px;
	border-left: 3px solid #c42222;
    font-style: italic;
    color: var(--e-global-color-text);
}