/*! nintenduo bundle: nintenduo-critical (bb2a3300416b) */

/* === assets/css/tokens.css === */
/* ==========================================================================
   Variables principales (colores, radios, tamaños de fuente)
   ========================================================================== */
:root {
    --main-red: #FF2222;
    --main-blue: #006ED4;
    --main-orange: #FF7F1F;
    --main-bright-blue: #0082FC;
    --block-radius: 8px;
    --quote-radius: 4px;
    --post-title-size: 44px;
    --h2-size: 24px;
    --h3-size: 22px;
    --caption-size: 14px;
    --nintenduo-caption-muted-color: #757575;
    --nintenduo-gallery-thumb-gradient: linear-gradient(
        135deg,
        var(--main-red) 0%,
        var(--main-orange) 45%,
        var(--main-bright-blue) 100%
    );
}


/* === style.css === */
/**
 * Theme Name:        Nintenduo
 * Description:       WordPress theme for nintenduo.com site
 * Version:           1.0.3
 * Author:            Nintenduo
 * Author URI:        https://nintenduo.com
 * Tested up to:      6.4.3
 * Requires PHP:      8.2.16
 * License:           GNU General Public License v2.0 or later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 */

/* Placeholder height para que el header position:fixed no solape contenido.
   Sólo el header "outer" del template-part — el header visual del bloque
   tiene su propia altura via CSS variables (_tokens.scss del plugin).

   Alturas objetivo, coherentes con _responsive.scss del plugin:
     - Desktop  ≥ 1280  → 72px
     - Tablet   769–1279 → 64px
     - Mobile   ≤ 768   → 48px
*/
header.wp-block-template-part {
    min-height: 72px;
}

@media (min-width: 769px) and (max-width: 1150px) {
    header.wp-block-template-part {
        min-height: 64px;
    }
}

@media (max-width: 768px) {
    header.wp-block-template-part {
        min-height: 48px;
    }
}

body {
    -webkit-font-smoothing: antialiased;
}

:root {
    --space-default: 4px;
    --desktop-content-size: 1128px;
}

::selection {
    color: white !important;
    background: #FF2222 !important;
}

h2 {
    -webkit-font-smoothing: antialiased;
}

/* Manual class for applying gradient to text */
h2.nintenduo-text-gradient {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    display:inline-block;
}

h2.nintenduo-text-gradient:not( .has-background ) {
    background: linear-gradient(270deg, #0082fc 0%, #f22 100%);
}

h2.nintenduo-text-gradient > * {
    color: inherit !important;
}
/* Manual class for applying gradient to text */

/* Set all wp-block-heading text color as gradient */
h2.wp-block-heading {
    background-clip: text !important;
    -webkit-background-clip: text !important;
    color: transparent !important;
    display:inline-block;
}

h2.wp-block-heading:not( .has-background ) {
    background: linear-gradient(270deg, #0082fc 0%, #f22 100%);
}

.home h2.wp-block-heading:not( .has-background ) {
    background: linear-gradient(90deg, #f22 0%, #0082fc 100%);
}

/* Últimas noticias: gradiente invertido (azul izq, rojo der) para
   diferenciarlo visualmente de "Entradas destacadas". Aplica en todos
   los breakpoints. */
.home .nintenduo-home-latest-news h2.wp-block-heading:not( .has-background ) {
    background: linear-gradient(90deg, #0082fc 0%, #f22 100%);
}

h2.wp-block-heading > * {
    color: inherit !important;
}
/* Headers with gradient */

.nintenduo-text-align-center {
    text-align: center;
}

.nintenduo-position-relative {
    position: relative;
}

.nintenduo-search-template-archive-list {
    width: 100%;
}

/* Hover only on desktop */
@media (min-width: 1151px) {
    .nintenduo-border-on-hover > a:hover {
        position: relative;
    }

    .nintenduo-border-on-hover > a:hover::after {
        content: '';
        background-image: linear-gradient(to right, #ff2222, #0082fc);
        inset: 0;
        z-index: -1;
        display: block;
        position: absolute;
        width: calc(100% + 8px);
        height: calc(100% + 8px);
        margin-left: calc(-1 * 4px);
        margin-top: calc(-1 * 4px);
        border-radius: 8px;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1150px) {
    header {
        height: 64px;
    }

    .wp-block-nintenduo-header-block {
        padding-left: 16px;
        padding-right: 16px;
    }

    .nintenduo-header > .nintenduo-header-menu-button {
        display: none;
    }

    .nintenduo-header > .nintenduo-header-horizontal-navigation {
        display: none;
    }

    .nintenduo-header-menu-content > .nintenduo-header-vertical-navigation {
        display: none;
    }
}

/* Mobile */
@media (max-width: 768px) {
    header {
        height: 48px;
    }

    h2.wp-block-heading {
        text-align: center;
    }

    .wp-block-query-title {
        font-size: 24px !important;
    }

    .hide-on-mobile {
        display: none !important;
    }
}


/* === assets/css/base.css === */
/* ==========================================================================
   Base: links y utilidades de visibilidad
   ========================================================================== */

/* Links */
a:where(:not(.wp-element-button)) {
    color: #006ED4;
    text-decoration: none;
}

/* Utilidades responsive de visibilidad */

/* Desktop */
@media (min-width: 1151px) {
    .nintenduo-hide-on-desktop {
        display: none !important;
    }
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1150px) {
    .nintenduo-hide-on-tablet {
        display: none !important;
    }
}

/* Mobile */
@media (max-width: 768px) {
    .nintenduo-hide-on-mobile {
        display: none !important;
    }
}

/* ==========================================================================
   Fichas de juegos: ocultar icono externo y tipografía gradient-text
   ========================================================================== */
.single-juego .external-icon,
.post-type-archive-juego .external-icon,
.tax-plataforma .external-icon {
    display: none !important;
}

.juego-gradient-text p {
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.juego-no-decoration {
    line-height: 1.2;
}

@media (max-width: 768px) {
    .juego-gradient-text p {
        line-height: 1.3;
        letter-spacing: 0.02em;
    }
    .juego-no-decoration {
        line-height: 1.3;
    }
}


/* === assets/css/header.css === */
/*
 * CSS del header del tema (cargado en el bundle nintenduo-critical).
 * El estilo del propio header-block está en su propio CSS (style-index.css del
 * plugin). Aquí dejamos sólo lo que el tema necesita inyectar a nivel global,
 * que ahora mismo es nada — el overlay ya no se inserta vía JS del tema; lo
 * renderiza el render.php del bloque y trae sus estilos en el CSS del bloque.
 *
 * Se conserva el archivo (vacío) para no romper el helper css-bundler.php que
 * lo lista en el bundle critical (ver inc/css-bundler.php y functions.php).
 */


/* === assets/css/footer.css === */
/* Desktop */
footer > div {
    margin-top: 76px;
}

footer .wp-block-nintenduo-clickable-block figure {
    margin-bottom: 0;
}

footer .wp-block-nintenduo-clickable-block figure img {
    width: 60px;
    height: 60px;
}

footer .nintenduo-footer-subfooter {
    width: 100%;
    justify-content: space-between;
    margin-top: 60px;
    padding-right: 156px;
    padding-bottom: 32px;
    padding-left: 156px;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1150px) {
    footer > div {
        margin-top: 56px;
    }

    footer .nintenduo-footer-subfooter {
        flex-direction: column;
        gap: 8px;
        margin-top: 32px;
        padding-right: 0;
        padding-left: 0;
    }
}

/* Mobile */
@media (max-width: 768px) {
    footer > div {
        margin-top: 48px;
    }

    footer .wp-block-nintenduo-clickable-block figure img {
        width: 48px;
        height: 48px;
    }

    footer .is-layout-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    footer .nintenduo-footer-subfooter {
        flex-direction: column;
        gap: 8px;
        margin-top: 38px;
        padding-right: 0;
        padding-left: 0;
    }
}


/* === assets/css/pagination.css === */
.page-numbers {
    margin-right: 8px;
}

.page-numbers:not(.dots) {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: inline-flex; /* or inline-flex */
    align-items: center;
    justify-content: center;
    border: 2px solid #757575;
}

.page-numbers:not(.dots):not(.current):hover {
    border: none;
    width: 48px;
    height: 48px;
    color: white;
    background: linear-gradient(322deg, #0082fc 0%, #ff2222 100%);
}

.page-numbers.current {
    color: white;
    background-color: #757575;
}


/* === assets/css/ads.css === */
/*
Sidebar (Desktop) y Sidebar (Mobile):
- PC, tablet y mobile: 300x600

Despues del primer párrafo, Cada dos párrafos y Antes del último párrafo:
- PC: 186px
- Tablet: 183px
- Mobile: 600px
 */

.ninte-sidebar-desktop:not(:empty) {
    min-height: 600px;
}

.ninte-despues-del-primer-parrafo:not(:empty),
.ninte-cada-dos-parrafos:not(:empty),
.ninte-antes-del-ultimo-parrafo:not(:empty) {
    min-height: 186px;
}

/* Tablet */
@media (min-width: 769px) and (max-width: 1150px) {
    .ninte-despues-del-primer-parrafo:not(:empty),
    .ninte-cada-dos-parrafos:not(:empty),
    .ninte-antes-del-ultimo-parrafo:not(:empty) {
        min-height: 183px;
    }

    /*
     * Slot sidebar (#roba): Google Ad Manager inyecta el iframe dentro
     * de una jerarquía de wrappers (<div id="hash"><div id="google_..._container__"><iframe width="300" height="600">).
     * En tablet el sidebar mide 234px, así que el iframe desborda 66px.
     *
     * Escalamos el PRIMER hijo de #roba (el wrapper de Google) al 78%
     * (ratio 234/300). Eso arrastra todo el árbol (container + iframe)
     * al tamaño correcto. El iframe sigue cargándose a 300×600
     * internamente, así que las impresiones se contabilizan igual.
     *
     * `.size-fixed-roba` con `overflow: hidden` + `max-height: 468px`
     * recorta el layout box sobrante (el DOM sigue ocupando 300×600
     * aunque se vea a 234×468) para que el contenido siguiente no
     * quede despegado.
     *
     * Nota: solo aplica al tablet "original" (769-1150), NO al rango
     * 1151-1279 donde el header usa layout tablet pero el resto del
     * sitio sigue en desktop (sidebar 360px y el iframe 300 cabe).
     */
    #roba {
        /* El `display: flex; justify-content: center` inline del div
           centra el layout box del wrapper de Google (300px) dentro del
           #roba. Junto con `transform-origin: top center` el ad visible
           escalado (234px) queda centrado dentro de la columna sidebar. */
    }

    #roba > div {
        transform: scale(0.78);
        transform-origin: top center;
    }

    .size-fixed-roba {
        overflow: hidden;
        max-height: 468px; /* 600 × 0.78 */
    }
}

/* Mobile */
@media (max-width: 768px) {
    .ninte-despues-del-primer-parrafo:not(:empty),
    .ninte-cada-dos-parrafos:not(:empty),
    .ninte-antes-del-ultimo-parrafo:not(:empty) {
        min-height: 300px;
    }
}