/**
 * Mobile Base - Shared responsive styles for all pages
 * Loaded globally via wp_enqueue_style with media="(max-width: 768px)"
 *
 * Standard breakpoints:
 *   768px - Primary mobile (tablet/phone)
 *   480px - Small phone (375px devices)
 *
 * @package WakasmTheme
 * @since 2.2
 */

/* ==========================================================================
   768px — PRIMARY MOBILE
   ========================================================================== */
@media (max-width: 768px) {

    /* --- PREVENT HORIZONTAL SCROLL ---
       Content elements (carousels, mosaics, etc.) can overflow the viewport.
       This is the standard mobile pattern to prevent horizontal scrolling. */
    html, body {
        overflow-x: hidden !important;
    }

    /* --- HEADER: Compact mobile header ---
       Hide text title/description (redundant with logo), eliminate
       inline-level spacing in the logo link, and tighten padding. */
    .wp-custom-logo .site-title,
    .wp-custom-logo .site-description {
        display: none !important;
        height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .wp-custom-logo .custom-logo-link {
        line-height: 0 !important;
        display: block !important;
        width: fit-content !important;
    }

    .title-area {
        padding: 0 !important;
    }

    .wp-custom-logo .title-area img {
        max-height: 40px;
        width: auto;
        display: block;
    }

    .site-header {
        padding: 5px 15px !important;
    }

    /* --- HAMBURGER BUTTON: Smaller on mobile --- */
    .wakasm-menu-toggle {
        padding: 8px 10px !important;
        font-size: 16px !important;
    }

    .wakasm-menu-toggle .dashicons {
        width: 20px !important;
        height: 20px !important;
        font-size: 20px !important;
    }

    /* --- MOBILE MENU TEXT: Tighter and smaller --- */
    .nav-primary.wakasm-menu-open .menu-item a {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    .nav-primary.wakasm-menu-open .genesis-nav-menu .sub-menu a {
        padding-left: 30px !important;
        font-size: 13px !important;
    }

    /* Ensure body content clears the fixed header (sticky on desktop, fixed on mobile).
       Using padding-top prevents margin collapsing with child negative margins (e.g. homepage hero).
       Also reduce side padding from desktop's 30px — too much on a 375px screen. */
    .site-inner {
        margin-top: 0 !important;
        padding-top: 55px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    /* Reset desktop content positioning — .site-inner padding-top already
       clears the mobile header, so the 80px top margin is redundant.
       The 3px right margin wastes width on small screens.
       Desktop uses `top: -120px` to pull content behind the sticky header;
       on mobile the header is position:fixed, so this must be reset. */
    .content {
        margin: 0 !important;
        top: 0 !important;
    }

    /* --- COMMON CONTAINERS: Reduce padding, disable wavy clip-path ---
       Wavy side borders eat ~22px per side on a 375px screen.
       Keep green torn-edge pseudo-elements (smaller). */
    .game-single,
    .video-games-master-list,
    .board-games-master-list,
    .reviews-listing-page,
    .video-games-playthroughs-page,
    .board-games-playthroughs-page {
        padding: 30px 15px !important;
        clip-path: none !important;
    }

    .game-single::before,
    .video-games-master-list::before,
    .board-games-master-list::before,
    .reviews-listing-page.reviews-listing-az-section::before,
    .video-games-playthroughs-page::before,
    .board-games-playthroughs-page::before {
        height: 12px !important;
    }

    .game-single::after,
    .video-games-master-list::after,
    .board-games-master-list::after,
    .reviews-listing-page.reviews-listing-az-section::after,
    .video-games-playthroughs-page::after,
    .board-games-playthroughs-page::after {
        height: 12px !important;
    }

    /* --- POOTER BADGE SCALING ---
       Override CSS custom properties to shrink badges on mobile */
    :root {
        --badge-small-image: 30px;
        --badge-small-font: 11px;
        --badge-small-height: 24px;
        --badge-small-margin: 16px;
        --badge-small-image-left: -15px;

        --badge-medium-image: 40px;
        --badge-medium-font: 16px;
        --badge-medium-height: 32px;
        --badge-medium-margin: 22px;
        --badge-medium-image-left: -20px;

        --badge-large-image: 50px;
        --badge-large-font: 20px;
        --badge-large-height: 40px;
        --badge-large-margin: 30px;
        --badge-large-image-left: -25px;
    }

    .pooter-badges-group,
    .tier-score-badges {
        gap: 3px;
    }

    /* --- TOC OVERLAY FIX ---
       The sidebar-toc.js moves the TOC to document.body with position:fixed
       even on mobile where the left sidebar is display:none. Hide it. */
    .sidebar-toc-wrapper {
        display: none !important;
    }

    .game-left-sidebar {
        display: none !important;
    }

    /* --- FOOTER: Tighter spacing --- */
    .site-footer {
        padding: 20px 15px;
    }

    .footer-widgets .wrap {
        padding: 0 15px;
    }

    /* --- UTILITY CLASSES --- */
    .hide-on-mobile {
        display: none !important;
    }

    .stack-on-mobile {
        flex-direction: column !important;
    }

    .full-width-on-mobile {
        width: 100% !important;
        max-width: 100% !important;
    }

}

/* ==========================================================================
   480px — SMALL PHONE
   ========================================================================== */
@media (max-width: 480px) {

    .wp-custom-logo .title-area img {
        max-height: 32px;
    }

    .site-header {
        padding: 4px 8px !important;
    }

    .wakasm-menu-toggle {
        padding: 6px 8px !important;
        font-size: 14px !important;
    }

    .wakasm-menu-toggle .dashicons {
        width: 18px !important;
        height: 18px !important;
        font-size: 18px !important;
    }

    .game-single,
    .video-games-master-list,
    .board-games-master-list,
    .reviews-listing-page,
    .video-games-playthroughs-page,
    .board-games-playthroughs-page {
        padding: 20px 10px !important;
    }

    :root {
        --badge-small-image: 26px;
        --badge-small-font: 10px;
        --badge-small-height: 20px;
        --badge-small-margin: 14px;
        --badge-small-image-left: -13px;
    }

}