/*
 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.13
*/
/* Prevent horizontal overflow issues after orientation change on mobile */
html, body {
    overflow-x: hidden;
}
/* ============================================================
   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 (AdSense compliance label)
   Pure CSS ::before — normal flow, no positioning.
   Background restored. Border-radius: two opposite corners
   rounded (top-left + bottom-right), two at 90° (top-right +
   bottom-left) — diagonally alternating.
   Applied to both auto-placed and manual .advertisement units.
   ============================================================ */
.google-auto-placed::before,
.advertisement::before {
    content: "Sponsored links";
    display: block !important;
    text-align: right;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 Helvetica, Arial, sans-serif;
    font-size: 11px;
    font-weight: 400;
    color: #E800E8;
    background-color: #29007a;
    padding: 3px 7px;
    border-radius: 4px 0 4px 0;
    line-height: 1;
    margin: 0 0 3px 0;
    pointer-events: none;
    /* Shrink-wrap to text: inline-block 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 */
    #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 - image centered full width, text below
   ============================================================ */
#mg-category-intro {
    width: 100%;
    max-width: 100%;
    margin-bottom: 1.5em;
    clear: both;
}
#mg-category-intro .mg-cat-image {
    text-align: center;
    width: 100%;
    margin: 0 0 1em 0;
    float: none;
}
#mg-category-intro .mg-cat-image img {
    display: block;
    width: 100%;
    max-width: 800px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
    float: none;
}
#mg-category-intro p {
    margin-bottom: 0.8em;
    clear: both;
}