/*
Theme Name:     Foxiz child
Template:      	foxiz
Theme URI:      https://foxiz.themeruby.com
Author:         Theme-Ruby
Author URI:     https://themeforest.net/user/theme-ruby/portfolio/
Description:    Make your modifications to Foxiz in this child theme.
Version:        1.0
Tags:           custom-background, custom-menu, featured-images, theme-options, custom-colors, translation-ready, threaded-comments, translation-ready
License:        Themeforest Licence
License URI:    https://themeforest.net/licenses/standard
*/

/* Your CSS code goes here
-------------------------------------- */
/* CSS para ocultar visualmente o título quando a classe cf-hide-title estiver no body */
.cf-hide-title .single-post-title,
.cf-hide-title .page-header-title {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    margin: 0;
    padding: 0;
}

/* Ocultar o título principal do post/página no Foxiz */
.cf-hide-title .entry-header .entry-title {
    display: none;
}

/* Tentativa de cobrir outros possíveis seletores de título no Foxiz */
.cf-hide-title h1.page-title,
.cf-hide-title h1.entry-title {
    display: none;
}

/* 
 * Alterações solicitadas pelo usuário:
 * 1. Converter unidades 'rem' para 'px' (assumindo 1rem = 16px para o corpo do texto)
 * 2. Definir o tamanho da fonte dos títulos para 21px
 */

/* 1. Tentativa de anular o uso de 'rem' para fontes, definindo um tamanho de fonte base em 'px' */
html {
    font-size: 16px;
}

body {
    font-size: 16px;
}

/* 2. Definir o tamanho da fonte dos títulos para 21px */
h1, h2, h3, h4, h5, h6,
.entry-title,
.post-title,
.page-title,
.widget-title,
.section-title {
    font-size: 21px;
    line-height: 1.4;
}

/* Títulos específicos do Foxiz (baseado em análise de temas Foxiz) */
.p-title,
.single-post-title,
.page-header-title {
    font-size: 21px;
}

/* Ajuste para elementos de texto comuns que podem usar rem no tema pai */
p, li, a, span, div {
    font-size: 16px;
}

/* Estilos para a nova seção de 8 posts recentes */
.foxiz-child-recent-posts-section {
    margin-top: 40px;
    margin-bottom: 40px;
}

.foxiz-child-recent-posts-section .section-title {
    text-align: center;
    margin-bottom: 20px;
    font-size: 21px;
}

.foxiz-child-recent-posts-section .grid-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}

.foxiz-child-recent-posts-section .post-card {
    display: flex;
    flex-direction: column;
}

.foxiz-child-recent-posts-section .post-wrap {
    display: block;
    text-decoration: none;
    color: inherit;
}

.foxiz-child-recent-posts-section .post-thumb {
    margin-bottom: 10px;
    overflow: hidden;
    border-radius: 4px;
}

.foxiz-child-recent-posts-section .post-thumb img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.foxiz-child-recent-posts-section .post-card:hover .post-thumb img {
    transform: scale(1.05);
}

.foxiz-child-recent-posts-section .post-body {
    padding: 0;
}

.foxiz-child-recent-posts-section .post-title {
    margin-top: 0;
    margin-bottom: 5px;
    line-height: 1.3;
    font-size: 16px;
}

.foxiz-child-recent-posts-section .post-title a {
    color: inherit;
    text-decoration: none;
}

.foxiz-child-recent-posts-section .post-meta {
    font-size: 12px;
    color: #999;
}

/* Responsividade */
@media (max-width: 1024px) {
    .foxiz-child-recent-posts-section .grid-container {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 768px) {
    .foxiz-child-recent-posts-section .grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .foxiz-child-recent-posts-section .grid-container {
        grid-template-columns: 1fr;
    }
}