/*
 Theme Name:   Mow Child Theme
 Theme URI:    https://themeforest.net/item/mow-blog-magazine-wordpress-theme/
 Description:  Child theme for Mow theme
 Author:       Frenify
 Author URI:   http://themeforest.net/user/frenify
 Template:     mow
 Version:      1.0
 License: 	   Located in 'licensing' folder
 License URI:  license.txt
 Tags:         custom-header, custom-background, threaded-comments, custom-menu, featured-images, full-width-template, theme-options, translation-ready
 Text Domain:  mow-child
*/

/* ============================================================
   FALLBACK FONTS COM MÉTRICAS CASADAS — anti-CLS no font swap
   Métricas computadas dos arquivos reais servidos pelo Google:
   Work Sans v24, Heebo v28, Lora v37 (OS/2 typo + size-adjust).
   A fonte de fallback ocupa exatamente o mesmo espaço da web font,
   então display=swap troca sem causar layout shift.
   ============================================================ */
/* Pesos via descritor font-weight na MESMA família: o browser escolhe a face
   casada conforme o peso do texto (1-500 → regular, 501-1000 → bold).
   O título do post é bold (900) — sem a face bold, o swap reflui. */
@font-face {
    font-family: 'Work Sans Fallback';
    src: local('Arial');
    font-weight: 1 500;
    size-adjust: 127.55%;
    ascent-override: 72.91%;
    descent-override: 19.05%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Work Sans Fallback';
    src: local('Arial Bold'), local('Arial');
    font-weight: 501 1000;
    size-adjust: 132.76%;
    ascent-override: 70.05%;
    descent-override: 18.30%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Heebo Fallback';
    src: local('Arial');
    font-weight: 1 500;
    size-adjust: 117.48%;
    ascent-override: 89.20%;
    descent-override: 35.83%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Heebo Fallback';
    src: local('Arial Bold'), local('Arial');
    font-weight: 501 1000;
    size-adjust: 120.13%;
    ascent-override: 87.22%;
    descent-override: 35.04%;
    line-gap-override: 0%;
}
@font-face {
    font-family: 'Lora Fallback';
    src: local('Times New Roman');
    size-adjust: 133.91%;
    ascent-override: 75.13%;
    descent-override: 20.46%;
    line-gap-override: 0%;
}

/* Insere o fallback casado na stack das variáveis de fonte do tema.
   !important garante prioridade sobre o :root inline do Redux,
   independente da ordem de carregamento das folhas de estilo. */
:root {
    --bff: 'Work Sans', 'Work Sans Fallback', sans-serif !important;
    --hff: 'Heebo', 'Heebo Fallback', sans-serif !important;
    --quote-ff: 'Lora', 'Lora Fallback', serif !important;
}

.fn_cs_ad_in .ad_title,
.ad_title h3 {
    color: #555;
}

.fn__logo img {
    width: 200px;
}

.mow_fn_main_nav > li > a {
    color: #e30413;
}

/* Logo no menu sticky */

.mow_fn_stickynav .sticky_header {
    display: flex !important;
    align-items: center !important;
    position: relative !important;
    background-color: #e30413;
    width: 100% !important;
    gap: 0 !important;
    padding: 0 !important;
}

/* Dimensões explícitas do logo — evita CLS causado por width:auto do tema pai */
.fn__logo img.dark_logo {
    width: 200px;
    height: 51px;
}
.fn__logo img.light_logo {
    width: 300px;
    height: 76px;
}

/* LOGO POSICIONADO SEMPRE (NUNCA SUMIR) */
.mow_fn_stickynav .sticky_logo_holder {
    position: absolute !important;
    top: 50%;
    left: 370px; /* ajuste para o grid perfeito no desktop */
    transform: translateY(-50%);
    z-index: 2;
    margin: 0 !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
}

/* MENU CENTRALIZADO */
.mow_fn_stickynav .sticky_header .mow_fn_nav.sticky_nav {
    flex: 1 1 auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Ajuste de logo */
.mow_fn_stickynav .sticky_logo_holder img.sticky_small_logo {
    height: 40px !important;
    width: 35px !important;
    max-height: 40px !important;
    max-width: 120px !important;
    margin: 0 !important;
    display: block;
    vertical-align: middle;
}

/* Remove width 100% dos filhos do header */
.mow_fn_stickynav .sticky_header > * {
    width: auto !important;
}

@media (max-width: 1520px) {
    .mow_fn_stickynav .sticky_logo_holder {
        left: 150px !important;
    }
}

/* MOBILE/TABLET — logo volta ao fluxo normal */
@media (max-width: 991px) {
    .mow_fn_stickynav .sticky_logo_holder {
        position: static !important;
        left: auto !important;
        top: auto !important;
        transform: none !important;
        margin-right: 16px !important;
        margin-left: 0 !important;
    }
    .mow_fn_stickynav .sticky_header .mow_fn_nav.sticky_nav {
        justify-content: flex-start !important;
    }
}

/* fim do logo no menu sticky */

/* Diminui o tamanho da fonte dos desatques secundários da home */

.fn__widget_posts_epsilon .post_title {
    font-size: 14px;
    line-height: 20px;
}

.fn__widget_posts_alpha .img_holder img {
    width: 150px !important;
    height: auto !important;
}

.elementor-325
    .elementor-element.elementor-element-06e5640
    .fn__widget_posts_fcarousel
    .fn__descr,
.mow_fn_footer_social_list .social_list a,
.mow_fn_footer .copyright,
.footer_w_social_wrapper .textwidget p,
.footer_w_social .mc4wp-form-fields .agree {
    color: #999;
}
.mc4wp-form-fields .agree {
    color: #666;
}

.fn__descr {
    font-size: 18px;
    line-height: 23px;
}

.fn__subtitle {
    font-size: 1.5rem;
    margin-top: 1.3rem;
    font-weight: 500;
}

@media (max-width: 480px) {
    .fn__widget_posts_alpha .title_holder {
        min-height: 50px;
    }
}

.banner-970x250,
.elementor-element.banner-970x250 {
    width: 970px !important;
    max-width: 970px !important;
    min-width: 970px !important;
    margin: 0 auto !important;
    overflow: visible !important;
}

.banner-970x250 .elementor-widget-container,
.banner-970x250 .elementor-widget-wrap {
    width: 970px !important;
    max-width: 970px !important;
    overflow: visible !important;
}

.banner-970x250 img {
    width: 970px !important;
    max-width: 970px !important;
    height: auto !important;
    max-height: none !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Reserva espaço para o banner 970x250 antes do ad carregar (evita CLS) */
.banner-970x250,
.elementor-element.banner-970x250 {
    min-height: 250px !important;
    height: auto !important;
}
.banner-970x250 .elementor-widget-container {
    min-height: 0 !important;
    height: auto !important;
}

/* Banners 300x250 entre parágrafos - SOMENTE ESSES */
.adace-slot-wrapper:not(.banner-970x250) iframe[width="300"],
.adace-slot:not(.banner-970x250) iframe[width="300"] {
    max-width: none !important;
    width: 300px !important;
    height: 250px !important;
}

.adace-slot-wrapper:not(.banner-970x250),
.adace-slot:not(.banner-970x250) {
    max-width: none !important;
}

/* Banners laterais 300x600 AdAce */
.adace-slot-wrapper .adace-slot iframe[width="300"][height="600"],
.adace-slot iframe[width="300"][height="600"] {
    width: 300px !important;
    height: 600px !important;
    max-width: none !important;
    max-height: none !important;
    min-width: 300px !important;
    min-height: 600px !important;
}

.adace-slot-wrapper:has(iframe[height="600"]),
.adace-slot:has(iframe[height="600"]) {
    max-width: none !important;
    width: auto !important;
    overflow: visible !important;
}

/* Container wrapper dos banners laterais */
.adace-slot-wrapper {
    max-width: none !important;
    overflow: visible !important;
}

/* Estado padrão (desktop) */
.banner-970x250 {
    display: block;
}
.banner-top-300 {
    display: none;
}

/* Mobile: troca o banner do topo */
@media (max-width: 767px) {
    .banner-970x250 {
        display: none !important;
    }

    .banner-top-300 {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 auto !important;
        min-height: 250px; /* reserva espaco antes do anuncio carregar - fix CLS */
    }

    .banner-top-300 .adace-slot-wrapper,
    .banner-top-300 .adace-slot {
        width: 100% !important;
        max-width: 100% !important;
    }

    .banner-top-300 iframe,
    .banner-top-300 img {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        margin: 0 auto !important;
    }
}

/* ============================================================
   RESERVA DE ESPAÇO PARA ANÚNCIOS — ANTI-CLS
   Compatível com: Elementor, AdAce
   Versão: 2025-05
   ============================================================ */

/* ----------------------------------------------------------
   1. BASE UNIVERSAL — min-height em todos os wrappers de ad
   Evita colapso do slot antes do anúncio carregar (anti-CLS)
   ---------------------------------------------------------- */
.adace-slot-wrapper,
.adace-slot,
.fn_cs_ad_in {
    min-height: 250px;
    display: block;
    position: relative;
}

/* Half Page 300×600 — sidebar / coluna lateral */
.adace-slot-wrapper:has(iframe[height="600"]),
.adace-slot:has(iframe[height="600"]),
.widget_adace_ads_widget {
    min-height: 600px;
}

/* ----------------------------------------------------------
   3. ELEMENTOR — CLASSES UTILITÁRIAS DE SLOT
   Aplicar no campo "CSS Classes" da seção/coluna no Elementor
   ---------------------------------------------------------- */

/* Leaderboard 728×90 */
.elementor-section.ad-slot-leaderboard,
.e-con.ad-slot-leaderboard {
    min-height: 90px !important;
}

/* Medium Rectangle 300×250 */
.elementor-section.ad-slot-rectangle,
.e-con.ad-slot-rectangle {
    min-height: 250px !important;
}

/* Half Page 300×600 */
.elementor-section.ad-slot-halfpage,
.e-con.ad-slot-halfpage {
    min-height: 600px !important;
}

/* Billboard 970×250 */
.elementor-section.ad-slot-billboard,
.e-con.ad-slot-billboard {
    min-height: 250px !important;
}

/* Widget container interno: centraliza o conteúdo do ad */
.elementor-section.ad-slot-leaderboard .elementor-widget-container,
.elementor-section.ad-slot-rectangle .elementor-widget-container,
.elementor-section.ad-slot-halfpage .elementor-widget-container,
.elementor-section.ad-slot-billboard .elementor-widget-container,
.e-con.ad-slot-leaderboard .elementor-widget-container,
.e-con.ad-slot-rectangle .elementor-widget-container,
.e-con.ad-slot-halfpage .elementor-widget-container,
.e-con.ad-slot-billboard .elementor-widget-container {
    min-height: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ----------------------------------------------------------
   4. MOBILE (≤ 767px) — reserva adaptada
   ---------------------------------------------------------- */
@media (max-width: 767px) {

    /* Banner mobile de topo 300×250 responsivo */
    .banner-top-300,
    .banner-top-300 .adace-slot-wrapper,
    .banner-top-300 .adace-slot {
        min-height: 250px;
    }

    /* Half Page colapsa para Rectangle em mobile */
    .adace-slot-wrapper:has(iframe[height="600"]),
    .adace-slot:has(iframe[height="600"]),
    .widget_adace_ads_widget {
        min-height: 250px;
    }

    /* Todos os slots de conteúdo: mínimo 250px */
    .adace-slot-wrapper,
    .adace-slot,
    .fn_cs_ad_in {
        min-height: 250px;
    }

    /* Classes Elementor utilitárias em mobile */
    .elementor-section.ad-slot-leaderboard,
    .elementor-section.ad-slot-rectangle,
    .elementor-section.ad-slot-billboard,
    .elementor-section.ad-slot-halfpage,
    .e-con.ad-slot-leaderboard,
    .e-con.ad-slot-rectangle,
    .e-con.ad-slot-billboard,
    .e-con.ad-slot-halfpage {
        min-height: 250px !important;
    }
}

/* Mobile pequeno (≤ 480px) — Smart Banner 320×50 */
@media (max-width: 480px) {

    .elementor-section.ad-slot-smartbanner,
    .e-con.ad-slot-smartbanner {
        min-height: 50px !important;
    }

    .elementor-section.ad-slot-smartbanner .elementor-widget-container,
    .e-con.ad-slot-smartbanner .elementor-widget-container {
        min-height: 50px;
    }
}

/* Previne CLS no toggle light/dark: reserva layout box para o texto */
.fn__skin a .text {
    display: inline-block;
}

/* height: auto explícito permite que o browser derive o aspect-ratio dos atributos width/height do HTML
   O tema pai define width:100% sem height:auto, quebrando o cálculo em alguns contextos (CLS) */
.fn__single_image img,
.fn__widget_posts_classic1 .wp-post-image,
.item_img img,
img.wp-post-image {
    height: auto;
}

/* Tamanho explícito para ícones SVG do tema — evita "Unsized image element" (CLS) */
.fn__isvg {
    display: inline-block;
    width: 1em;
    height: 1em;
    vertical-align: middle;
}

/* Imagens sem dimensões no HTML: define aspect-ratio para reservar espaço antes do carregamento */
/* Plugin de reações (512×512 exibidas em 50×50) */
a.mow_fn_reaction_btn img {
    aspect-ratio: 1;
}

/* Botões do plugin de cookies (CookieYes) */
.cky-btn-revisit img,
.cky-consent-bar img {
    width: 20px;
    height: 20px;
    aspect-ratio: 1;
}
/* fim reserva de espaço para anúncios */