/***************/
/*Custom Fonts */
/***************/


/*Regular text*/
@font-face {
    font-family: 'Merriweather';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(../fonts/merriweather/Merriweather-Regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/*Titles and heading*/
@font-face {
    font-family: 'BebasNeue';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url(../fonts/bebasneue/BebasNeue-Regular.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}



/*****************************************
01) General Settings   
/*****************************************/


body p{
    font-size: 22px !important;
}

h1, h2, h3, h4, h5, h6{
    font-family: 'BebasNeue', sans-serif !important;
}




/*************
Arregla el max width de newsmattic-container deppendiendo del tipo de pagina
body class es search en buscador, blog para home, single and single-post para entradas, page-template para paginas
******************/
/* ===== Pages only: ajustar ancho del container ===== */

/* Mobile */
body.page-template .newsmatic-container {
  max-width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
}

/* Tablet */
@media (min-width: 768px) {
  body.page-template .newsmatic-container {
    max-width: 90%;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  body.page-template .newsmatic-container {
    max-width: 1200px; /* ajusta a tu diseño */
  }
}

/* Large desktop */
@media (min-width: 1440px) {
  body.page-template .newsmatic-container {
    max-width: 1320px;
  }
}





/*FIX big gap for login form in mobile*/
@media (max-width: 767px) {
  .my-no-wrap-mobile {
    --flex-wrap-mobile: nowrap;
  }
}

/*Background for Preloader*/
body .newsmatic_loading_box {
    background-color: #ededed5f !important;
}


.newsmatic-ticker-box *{
    font-family: 'BebasNeue-Regular', sans-serif !important;
}

#site-navigation ul li a{
    font-family: 'Merriweather-Regular', serif !important;
    font-size: 1.05em;
}



/****************
02) Site Header
****************/


/* ✅ usa el offset dinámico */
/*html {
    scroll-padding-top: var(--header-offset, 0px);
}*/
html {
    scroll-padding-top: var(--header-total-height);
}



/* ===============================
   HEADER BASE
================================ */

header.site-header{
    padding-bottom: 0px !important;
}

.site-header {
    position: sticky;
    top: -2px;
    z-index: 19;
    height: var(--header-total-height);
    /*height: var(--header-total-height); */ /*to fix the CLS*/
    background: inherit;
}


/* top header en top */
.top-header {
    overflow: hidden;
    /*max-height: 200px; */ /*avoid CLS*/
    height: var(--top-header-height);
    opacity: 1;
    transform: translateY(0);
    transition:
        /*max-height 0.3s ease,*/
        opacity 0.25s ease,
        transform 0.3s ease;
    will-change: /*max-height,*/ opacity, transform;
}

/* OCULTO en cualquier scroll */
.site-header .top-header.hide-top-header {
    /*max-height: 0;*/
    height: 0;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

/* ===============================
   MAIN HEADER
================================ */
.main-header {
    position: relative;
    z-index: 2;
    height: var(--main-header-height);
}

/* ===============================
   EXPANSIÓN MANUAL (hamburguesa)
================================ */
/*.site-header.is-expanded .top-header {
    max-height: 60px;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

/* Evita que el scroll cierre el menú expandido */
/*.site-header.is-expanded {
    position: sticky;
}*/


/*Evita que el wpadmin bar se muestre sobre el sticky*/
.newsmatic_main_body #wpadminbar{
    z-index: 18;
}




/* =========================
   Coloreando el SITE HEADER
========================= */

/* --- Fondo header claro por defecto --- */
.site-header .menu-section,  /*contenedor del menu*/
.site-header .site-branding-section,  /* branding, logo, social, news, live now y session buttons*/
.site-header nav.main-navigation ul.menu,  /*UL principal */
.site-header nav.main-navigation ul.menu ul  /*UL submenu */
{
     background-color: rgb(210, 210, 210) !important; /* sustituye por tu color */
}

.site-header .menu_txt{
    color: #525252;
}


/* --- Fondo header claro por defecto --- */
.newsmatic_dark_mode .site-header .menu-section,  /*contenedor del menu*/
.newsmatic_dark_mode .site-header .site-branding-section,  /* branding, logo, social, news, live now y session buttons*/
.newsmatic_dark_mode .site-header nav.main-navigation, 
.newsmatic_dark_mode .site-header nav.main-navigation ul.menu,  /*UL principal */
.newsmatic_dark_mode .site-header nav.main-navigation ul.menu ul  /*UL submenu */
{
     background-color: rgb(39, 48, 58) !important; /* sustituye por tu color */
}


.newsmatic_dark_mode .site-header #newsmatic_menu_burger span{
    background-color: #d6d6d6;
}

.newsmatic_dark_mode .site-header .menu_txt{
    color: #d6d6d6;
}

/*Menu Section fix CLS*/
.site-header .main-header .menu-section{
    height: var(--menu-section-height);
}

@media (min-width: 770px) and (max-width: 890px) {
    .site-header .main-header .menu-section,
    .site-header .main-header .menu-section a {
        font-size: 0.7rem; /* ajusta a gusto */
    }
}



/* --- Fondo header en modo oscuro --- */
.newsmatic_dark_mode  .site-header .main-navigation {
    background-color: #2e2e2e !important; /* sustituye por tu color preferido para dark */
}

/*Hover effect for menu items*/
nav.main-navigation ul.menu li > a:last-child:hover,
nav.main-navigation ul.nav-menu > a:last-child:hover  
{
	background-color:rgba(162, 176, 174, 0.33);
}

/*Hover effect for menu items*/
.newsmatic_dark_mode nav.main-navigation ul.menu li > a:last-child:hover, 
.newsmatic_dark_mode nav.main-navigation ul.nav-menu > a:last-child:hover  
{
	background-color:rgba(133, 218, 246, 0.516) !important;
}



/* =========================
   BRANDING SECTION SPACING
========================= */

.site-header.layout--default .site-branding-section {
    padding: 0 !important;
}

@media (min-width: 740px) {
    .site-header.layout--default .site-branding-section {
        padding: 0 !important;
    }
}

@media (min-width: 1024px) {
    .site-header.layout--default .site-branding-section {
        padding: 0 !important;
    }
}

/* =========================
   BRANDING GRID
========================= */

.header-branding-grid {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    width: 100%;
}

/* Base row */
.header-row {
    display: flex;
    align-items: center;
    width: 100%;
}

/* =========================
   ROW TOP (LOGO + SOCIAL)
========================= */

.header-row--top {
    justify-content: space-between;
    flex-wrap: nowrap;
}

/* =========================
   BRANDING (LOGO + TEXT)
========================= */

.site-branding {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Logo wrapper */
.site-branding .custom-logo-link {
    display: flex;
    align-items: center;
    min-width: 32px;
    flex-shrink: 0;
}

/* Logo image */
.site-branding .custom-logo-link img {
    display: block;
    width: auto;
    height: 100%;
    max-height: 48px;
    min-height: 32px;
    flex-shrink: 0;
}

/* Prevent SVG color inheritance */
.site-branding .custom-logo-link svg,
.site-branding .custom-logo-link img {
    fill: initial !important;
    color: initial !important;
}

/* Branding text */
.branding-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.site-title,
.site-description {
    margin: 0;
}

/* =========================
   BRANDING RESPONSIVE SIZES
========================= */

/* < 350px */
@media (max-width: 349px) {
    .site-branding .custom-logo-link img {
        max-height: 24px;
    }

    .site-branding .branding-text .site-title a {
        font-size: 1.02rem;
    }

    .site-branding .branding-text .site-description {
        font-size: 0.6rem;
    }
}

/* 350ox - 740px */
@media (min-width: 350px) and (max-width: 739px) {
    .site-branding .custom-logo-link img {
        max-height: 32px;
    }

    .site-branding .branding-text .site-title a {
        font-size: 1.25rem;
    }

    .site-branding .branding-text .site-description {
        font-size: 0.7rem;
    }
}

/* 740px – 1023px */
@media (min-width: 740px) and (max-width: 1023px) {
    .site-branding .custom-logo-link img {
        max-height: 40px;
    }

    .site-branding .branding-text .site-title a {
        font-size: 1.45rem;
    }

    .site-branding .branding-text .site-description {
        font-size: 0.75rem;
    }
}

/* ≥ 1024px */
@media (min-width: 1024px) {
    .site-branding .custom-logo-link img {
        max-height: 48px;
    }

    .site-branding .branding-text .site-title a {
        font-size: 1.75rem;
    }

    .site-branding .branding-text .site-description {
        font-size: 0.8rem;
    }
}

/* =========================
   SOCIAL ICONS (RIGHT)
========================= */

.site-header.layout--default .header-row--top .social-icons-wrap {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    margin-left: auto;
    margin-right: 1rem;
    flex: 0 0 auto !important;
    white-space: nowrap;
}


/* Override theme rule */
.site-header.layout--default
.header-branding-grid
.social-icons-wrap
.social-icon {
    font-size: 1.2rem;
    padding: 0 6px;
    font-weight: 600;
    text-decoration: none;
}


/*Hide the social icons at minimized header*/
@media (max-width: 399px) {
    /* Override theme rule */
    .main-header.is-minimized
    .social-icons-wrap{
        display: none;
    }
}

@media (min-width: 400px) and (max-width: 499px) {
    /* Override theme rule */
    .site-header.layout--default
    .header-branding-grid
    .social-icons-wrap
    .social-icon {
        font-size: 1rem;
    }
}

@media (min-width: 400px) {
    .site-header.layout--default
    .header-branding-grid
    .social-icons-wrap
    .social-icon {
        font-size: 1.2rem;
    }
}

/* Hover */
.site-header.layout--default
.header-branding-grid
.social-icons-wrap
.social-icon:hover {
    color: var(--sjs-primary-backcolor);
}


.header-toggle {
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    padding: 10px;
    color: inherit;
}

/* =========================
   ROW BOTTOM
========================= */

.header-row--bottom {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 0.95rem;
    width: 100%;
}

/* =========================
   RANDOM NEWS
========================= */

.random-news-element{
    flex-shrink: 0;
}

.random-news-element a {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

/* =========================
   LIVE BUTTON
========================= */

/*Centra el boton de live*/
.header-row--bottom .header-custom-button-wrap {
    display: flex;
    justify-content: center;
    flex: 1;
}

/* =========================
   LIVE BUTTON BASE
========================= */

.live-button {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.live-svg {
    cursor: pointer;
}

/* Desktop SVG */
.live-svg--desktop {
    width: 140px;
    height: 30px;
}

/* Mobile SVG */
.live-svg--mobile {
    display: none;
    width: 36px;
    height: 36px;
}

/* Fondo */
.live-bg {
    fill: #830119;
    animation: live-bg-pulse 2s infinite;
}

/* Play */
.live-play {
    fill: #ffffff;
}

/* Texto */
.live-text {
    fill: #ffffff;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 1px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

/* Punto */
.live-dot {
    fill: #ff5252;
    animation: live-dot-blink 1.2s infinite;
}

/* Animaciones */
@keyframes live-dot-blink {
    0% { opacity: 1; }
    50% { opacity: 0.2; }
    100% { opacity: 1; }
}

@keyframes live-bg-pulse {
    0% { opacity: 1; }
    50% { opacity: 0.85; }
    100% { opacity: 1; }
}

/* Hover */
.live-button:hover .live-bg {
    fill: #d32f2f;
}

/* =========================
   RESPONSIVE SWITCH
========================= */

@media (max-width: 768px) {
    .live-svg--desktop {
        display: none;
    }

    .live-svg--mobile {
        display: block;
    }
}





/* =========================
   SESSION BUTTONS (RIGHT)
========================= */

.branding-right {
    display: flex;
    align-items: center;
    margin-left: auto;
    margin-right: 1rem;
    flex-shrink: 0;
}

.session-buttons {
    display: flex;
    gap: 8px;
}

.session-buttons a.um-btn {
    margin: 0 !important;
    padding: 0.5rem 0.7rem;
    border: none;
    border-radius: 5px;
    font-size: 1.2rem;
}

/* =========================
   MOBILE / TABLET
========================= */

@media (max-width: 768px) {

    .header-row {
        flex-direction: row;
        justify-content: space-between;
    }

    .header-row--bottom {
        /*flex-direction: column;*/
        gap: 0.6rem;
        text-align: center;
    }

    .branding-right {
        margin-right: 1rem;
    }

    .social-icons-wrap {
        margin-right: 0;
    }

    .session-buttons a.um-btn {
        
        padding: 0.3rem 0.5rem;
        font-size: 0.9rem;
    }


    .site-header.layout--default .main-header .site-branding-section .header-branding-grid .site-branding {
        padding: 0.2rem 0.1rem;
    }

}





/********************
03) Main Menu Style   
/********************/

/*Sidebar menu hide for all screens */
.sidebar-toggle-wrap{
	display:none !important;
}

/*Hide category for any menu item */
.menu-item-description{
	display:none;
}



/*Media Queries*/
/*@media (max-width: 769px) {

	nav.main-navigation ul.menu li a, nav.main-navigation ul.nav-menu {
		/*background-color:rgba(100, 100, 100, 1)
	}
		
}*/


.newsmatic-ticker-box{
    background: #82cfff !important;
    background: linear-gradient(180deg, rgba(130, 207, 255, 0.7) 0%, rgba(179, 237, 255, 0.7) 50%, rgba(130, 207, 255, 0.7) 100%)!important;
    color:#303030 !important;
}

.newsmatic-ticker-box li.ticker-item{
    display: flex !important;
    font-size: 1.08em !important;
    height: 50px !important;
    align-items: center !important;
}


.newsmatic_dark_mode .newsmatic-ticker-box{
    /*background-color: rgba(168, 238, 251, 0.89) !important;*/
    background: #82cfff !important;
    background: linear-gradient(180deg, rgba(130, 207, 255, 0.7) 0%, rgba(179, 237, 255, 0.7) 50%, rgba(130, 207, 255, 0.7) 100%)!important;
    color:#303030 !important; 
}

/*Media Queries*/
@media (min-width: 769px) {

	.newsmatic-ticker-box li.ticker-item{
        font-size: 1.5em !important;
    }
		
}