/*
 Theme Name:    GeneratePress Child
 Theme URI:     https://generatepress.com
 Description:   Child theme for GeneratePress
 Author:        MAGBEI GAMES
 Author URI:    https://magbei.com
 Template:      generatepress
 Version:       1.0.35
*/
/* Prevent horizontal overflow issues after orientation change on mobile.

   v1.0.35 — hidden → clip.
   PERCHE': `overflow-x: hidden` obbliga l'asse Y a diventare `auto`, quindi
   trasforma html/body in CONTENITORI DI SCORRIMENTO. Da quel momento ogni
   `position: sticky` della pagina si ancora a quel contenitore invece che
   alla finestra, e non si aggancia mai: nessun errore, semplicemente non
   funziona. `overflow-x: clip` taglia l'eccedenza orizzontale allo stesso
   modo ma NON crea il contenitore di scorrimento, quindi sticky resta usabile.
   La riga `hidden` resta come fallback per i browser che non conoscono
   `clip` (Chrome <90, Firefox <81, Safari <16): la ignorano e mantengono
   il comportamento precedente, senza alcuna regressione. */
html, body {
    overflow-x: hidden; /* fallback browser datati */
    overflow-x: clip;   /* preserva position:sticky — vedi nota sopra */
}
/* ============================================================
   1. TITLE
   ============================================================ */
/* Hide default GP post title on single posts */
.single .entry-header {
    display: none !important;
}
/* ============================================================
   2. VERTICAL RHYTHM — consistent spacing between all elements
   Standard: 32px between block-level sections, 1.5em between
   paragraphs. This creates a calm, readable vertical flow
   matching current gaming platform UX conventions.
   ============================================================ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4 {
    margin-top: 2em;
    margin-bottom: 0.75em;
    line-height: 1.3;
}
.entry-content p {
    margin-bottom: 1.5em;
    line-height: 1.7;
}
.entry-content ul,
.entry-content ol {
    margin-left: 40px;
    margin-bottom: 1.5em;
}
/* Images */
.wp-block-image {
    margin-top: 1.5em !important;
    margin-bottom: 2em !important;
}
/* Gutenberg blocks — uniform vertical gap between all blocks.
   Excludes .google-auto-placed: ads use padding (section 4)
   to prevent margin stacking with surrounding content. */
.entry-content > *:not(.google-auto-placed) {
    margin-bottom: 2em;
}
/* ============================================================
   3. CONTENT LEFT MARGIN (desktop only — mobile overrides below)
   ============================================================ */
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content p,
.wp-block-image {
    margin-left: 30px;
    max-width: calc(100% - 25px);
}
/* Clearfix for float-based image layouts */
.entry-content img.alignleft + p {
    clear: none;
}
.entry-content::after {
    content: "";
    display: table;
    clear: both;
}
/* ============================================================
   4. ADS — AdSense auto-placed blocks
   padding instead of margin: prevents stacking with the
   margin-bottom of surrounding content blocks.
															 
   Responsive: desktop 32px → tablet 28px → mobile 24px.
   ============================================================ */
.entry-content .google-auto-placed {
    display: block !important;
    clear: both !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 32px !important;
    padding-bottom: 32px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
 
/* Force the <ins> itself to be fully responsive */
.entry-content .google-auto-placed ins.adsbygoogle {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;			 
								
}
/* Footer / post-content ad units */
.post-content-bottom-ad,
.entry-content + .google-auto-placed,
.below-entry-content .google-auto-placed {
    display: block !important;
    clear: both !important;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
}
@media (max-width: 1024px) {
    .entry-content .google-auto-placed {
        padding-top: 28px !important;
        padding-bottom: 28px !important;
    }
}
@media (max-width: 768px) {
    .entry-content .google-auto-placed {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }
}
@media (max-width: 1024px) and (orientation: landscape) {
    .entry-content .google-auto-placed {
        padding-top: 20px !important;
    }
}								
/* ============================================================
   5. SPONSORED LABEL — AUTO-PLACED ADS ONLY (v1.0.23)
   Pure CSS ::before for Google AUTO-PLACED units, which carry
   no markup of their own. Manual ad units use the SINGLE
   .sponsored-label div already present in their block markup
   (section 14): the old `.advertisement::before` duplicate is
   GONE — it was the second "Sponsored links" and, being flush
   with the FULL-WIDTH container, it sat detached at the page
   edge while the ad rendered elsewhere. Style matched 1:1 with
   .sponsored-label (12px / radius 3 / padding 3px 6px).
   ============================================================ */
.google-auto-placed::before {
    content: "Sponsored links";
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 12px;
    font-weight: 400;
    color: #E800E8;
    background-color: #29007a;
    padding: 3px 6px;
    border-radius: 3px;
    line-height: 1;
    margin: 0 0 3px 0;
    pointer-events: none;
    /* Shrink-wrap to text: table box inside a right-aligned block */
    display: table !important;
    margin-left: auto;
    margin-right: 0;
}

/* ============================================================
   6. HIGHLIGHT & MARK
   ============================================================ */
mark {
    background-color: #B700B7;
    color: #ffffff;
}
/* ============================================================
   7. COOKIES TABLE
   ============================================================ */
.cookielawinfo-row-cat-table tbody td {
    color: #ffffff;
}
/* ============================================================
   8. BUTTON
   ============================================================ */
.BUTTON_IIS {
    background: #EE00EE;
    background-image: linear-gradient(to bottom, #EE00EE, #E55FE5);
    border-radius: 20px;
    color: #FFFFFF;
    font-family: Arial, sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 40px;
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    text-align: center;
    margin-left: 20px;
}
.BUTTON_IIS:hover {
    border: solid #B700B7 1px;
    background: #B700B7;
    background-image: linear-gradient(to bottom, #B700B7, #AD3DAD);
    border-radius: 20px;
    text-decoration: none;
}
/* ============================================================
   9. TABLET & MOBILE — full width layout (≤1024px)
   Removes sidebars, kills GP container constraints,
   resets the asymmetric 130px right content padding.
   ============================================================ */
@media (max-width: 1024px) {
    /* Remove boxed container constraint */
    body.wp-theme-generatepress .site {
        max-width: 100% !important;
        width: 100% !important;
    }
    /* Hide sidebars — v1.0.28: BOTH hidden again on mobile/tablet.
       The stacked right sidebar (v1.0.27 test) dragged breadcrumbs and
       every widget below the tags: wrong tool. Mobile inventory now goes
       through MagEmbed Ads 1.7.0 MOBILE SPOTS ([mads_spot key="…"] hooks
       in the game template) — surgical placement, mobile-only. */
    #right-sidebar,
    #left-sidebar {
        display: none !important;
    }
    /* Remove GP container padding and max-width */
    .site-content,
    .content-area,
    .site-main,
    #content,
    .container {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Main content column full width */
    #primary {
        width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    /* Reset GP Customizer asymmetric content padding (was 5/130/40/0).
       15px lateral padding keeps text readable on small screens. */
    .inside-article {
        padding-top: 6px !important;
        padding-right: 15px !important;
        padding-bottom: 30px !important;
        padding-left: 15px !important;
    }
    /* Keep left breathing room for text — same feel as desktop.
       Does NOT affect AdSense auto-placed units which bypass padding. */
    .entry-content h1,
    .entry-content h2,
    .entry-content h3,
    .entry-content p,
    .wp-block-image {
        margin-left: 15px !important;
        max-width: calc(100% - 15px) !important;
    }
}
/* ============================================================
   10. MOBILE ONLY (≤768px)
   ============================================================ */
@media (max-width: 768px) {
    /* Tighter vertical spacing on small screens */
    .entry-content h1,
    .entry-content h2,
    .entry-content h3 {
        margin-top: 1.5em;
        margin-bottom: 0.5em;
    }
    .entry-content p {
        margin-bottom: 1.25em;
    }
}
@media (max-width: 1024px) {
    .elementor-widget-text-editor h1 {
        text-align: center !important;
    }
}
/* ============================================================
   11. GAME PLAYER — centering per device
   Overrides plugin calc(50% - 50vw) formula which breaks when
   .inside-article has asymmetric or non-zero padding.
   margin: auto + explicit width = bulletproof centering on all
   devices without depending on the containing block offset.
   ============================================================ */

/* Desktop — 92% centered */
@media (min-width: 1025px) {
    .magbei-arcade-wrapper {
        width: 92% !important;
        max-width: 92% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Tablet + smartphone landscape — 95% centered */
@media (min-width: 769px) and (max-width: 1024px) {
    .magbei-arcade-wrapper {
        width: 95% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* Smartphone landscape — 95% centered */
@media (max-width: 768px) and (orientation: landscape) {
    .magbei-arcade-wrapper {
        width: 95% !important;
        max-width: 95% !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ============================================================
   12. GAME FEATURED IMAGE — float desktop + reset mobile
   ============================================================ */
.game-featured-float {
    float: left;
    width: 300px;
    height: auto;
    margin-right: 25px;
    margin-bottom: 15px;
}
@media (max-width: 768px) {
    .game-featured-float {
        float: none !important;
        width: 100% !important;
        max-width: 300px !important;
        display: block !important;
        margin: 0 auto 30px auto !important;
    }
}
@media (max-width: 1024px) {
    .entry-content img.alignleft,
    .entry-content img.alignright {
        display: block !important;
        float: none !important;
        margin: 0 auto 30px auto !important;
    }
}

/* ============================================================
   13. Category intro — REMOVED v2.10.12
   Now handled by MagEmbed Grid Engine plugin (Category Hero Layout).
   ============================================================ */

/* ============================================================
   14. Sponsored label + console ads
   Migrated from Customizer "Additional CSS" (v1.0.15) so the
   whole styling lives in the child theme. Only the rules that
   were NOT already covered by this stylesheet are ported:
   - .sponsored-label      (label look — was Customizer-only)
   - .console-ads fixes    (gap between label, ads and socials)
   NOTE: .wp-block-image, the alignleft clearfix and
   .entry-content::after already exist above in NEWER versions
   (2em margin, clear:none by design) and are intentionally
   NOT duplicated here.
   ============================================================ */

/* --- Global sponsored label --- */
.sponsored-label {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    background-color: #29007a;
    color: #E800E8;
    font-weight: 400 !important;
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 3px;
    display: inline-block;
    /* Default anchor: right side. The footer script then measures the
       rendered ad and sets an inline margin-right so the label edge is
       ALWAYS flush with the AD right edge (not the section edge),
       whatever size the ad renders at — it can never overflow it. */
    float: right;
    margin-bottom: 2px !important; /* tight gap above the ad */
    text-transform: none !important;
    line-height: 1;
    position: relative;
    z-index: 6; /* above the pulled-up ad container below */
}

/* --- v1.0.26: JS label engine RETIRED --- the label is now a per-block
   option of MagEmbed Ads (1.5.0+), server-side + CSS :has(). The
   .sponsored-label class below stays: it still styles labels living in
   markup OUTSIDE the plugin (e.g. the beside-game unit in the Elements
   template). Those are always visible — static, no gating. */

/* --- Console ads: close the gap between label and ad --- */
.console-ads .ad-container-inner {
    margin-top: -20px !important; /* pull the ad up towards the label */
    position: relative;
    z-index: 5;
}

/* --- Console ads: keep the social icons bar from pushing content --- */
.console-ads .sfsi_widget {
    margin-bottom: 0 !important;
    height: 40px !important; /* fixed minimum height for the icons row */
    overflow: hidden;
}