/**
 * Mobile Responsive Styles
 * Mobile-first responsive design
 *
 * @package Moes_Pizza
 * @since 1.0.0
 */

/* ============================================
   MOBILE HEADER FIXES
   ============================================ */

/* Mobile: Stack header elements */
@media (max-width: 782px) {
    /* Header container - allow wrapping */
    .wp-block-group.alignwide {
        flex-wrap: wrap !important;
        gap: 1rem !important;
    }

    /* Logo and site title */
    .wp-site-logo {
        width: 40px !important;
    }

    .wp-block-site-title {
        font-size: 1.25rem !important;
    }

    /* Hide phone number on mobile */
    .wp-block-group .wp-block-group p a[href^="tel"] {
        display: none !important;
    }

    /* Order Now button - make it smaller */
    .wp-block-group .wp-block-button {
        font-size: 0.875rem !important;
    }

    .wp-block-group .wp-block-button__link {
        padding: 0.75rem 1.25rem !important;
    }

    /* Navigation - use hamburger menu */
    .wp-block-navigation {
        width: 100% !important;
        order: 10 !important;
    }

    /* Make navigation full width on mobile when opened */
    .wp-block-navigation__responsive-container.is-menu-open {
        padding: 1rem !important;
    }
}

/* ============================================
   MOBILE FOOTER FIXES
   ============================================ */

/* Mobile: Stack footer columns */
@media (max-width: 782px) {
    /* Footer columns */
    .wp-block-columns {
        flex-direction: column !important;
    }

    .wp-block-column {
        margin-bottom: 2rem !important;
        flex-basis: 100% !important;
    }

    /* Footer bottom - stack on mobile */
    .wp-block-group.alignwide .wp-block-group {
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        gap: 0.5rem !important;
    }

    /* Copyright text */
    .wp-block-group.alignwide .wp-block-group p {
        text-align: center !important;
    }
}

/* ============================================
   MOBILE MENU TABS FIXES
   ============================================ */

/* Menu tabs - horizontal scroll on mobile */
@media (max-width: 782px) {
    .menu-category-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin !important;
        padding-bottom: 0.5rem !important;
    }

    .category-tab {
        flex-shrink: 0 !important;
        padding: 0.75rem 1rem !important;
        font-size: 0.875rem !important;
    }

    /* Custom scrollbar for menu tabs */
    .menu-category-tabs::-webkit-scrollbar {
        height: 4px;
    }

    .menu-category-tabs::-webkit-scrollbar-track {
        background: #1a1a1a;
    }

    .menu-category-tabs::-webkit-scrollbar-thumb {
        background: #F4A460;
        border-radius: 2px;
    }
}

/* ============================================
   MOBILE MENU GRID
   ============================================ */

/* Menu items - single column on mobile */
@media (max-width: 640px) {
    .menu-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }

    .menu-item-card {
        max-width: 100%;
    }
}

/* ============================================
   MOBILE HERO SECTION
   ============================================ */

@media (max-width: 782px) {
    /* Hero heading */
    .wp-block-cover h1 {
        font-size: 2rem !important;
        padding: 0 1rem;
    }

    /* Hero paragraph */
    .wp-block-cover p {
        font-size: 1rem !important;
        padding: 0 1rem;
    }

    /* Hero buttons */
    .wp-block-cover .wp-block-buttons {
        flex-direction: column !important;
        width: 100% !important;
        padding: 0 1rem;
    }

    .wp-block-cover .wp-block-button {
        width: 100% !important;
    }

    .wp-block-cover .wp-block-button__link {
        width: 100% !important;
        display: block !important;
    }
}

/* ============================================
   MOBILE TESTIMONIALS
   ============================================ */

@media (max-width: 782px) {
    /* Testimonial columns - stack on mobile */
    .wp-block-columns.alignwide {
        flex-direction: column !important;
    }

    .wp-block-column {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* ============================================
   MOBILE TYPOGRAPHY
   ============================================ */

@media (max-width: 640px) {
    /* Spacing - reduce padding on mobile */
    .wp-block-group {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================
   MOBILE NAVIGATION
   ============================================ */

/* Ensure mobile menu is accessible */
@media (max-width: 782px) {
    /* Navigation toggle button */
    .wp-block-navigation__responsive-container-open {
        color: var(--wp--preset--color--off-white) !important;
    }

    /* Mobile menu overlay */
    .wp-block-navigation__responsive-container {
        background-color: var(--wp--preset--color--deep-black) !important;
    }

    /* Mobile menu items */
    .wp-block-navigation__responsive-container .wp-block-navigation__container {
        gap: 1rem !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item {
        width: 100% !important;
    }

    .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
        padding: 1rem !important;
        font-size: 1.125rem !important;
    }
}

/* ============================================
   MOBILE TESTIMONIALS SLIDER
   ============================================ */

@media (max-width: 782px) {
    .testimonials-slider {
        padding: 2rem 1rem !important;
    }
}

/* ============================================
   MOBILE UTILITIES
   ============================================ */

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

/* Show only on mobile */
.show-mobile {
    display: none !important;
}

@media (max-width: 640px) {
    .show-mobile {
        display: block !important;
    }
}

/* Touch targets - ensure minimum 44px for mobile */
@media (max-width: 782px) {
    button,
    .wp-block-button__link,
    a.wp-block-button__link,
    .category-tab {
        min-height: 44px !important;
        min-width: 44px !important;
    }
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden !important;
}

.wp-site-blocks {
    overflow-x: hidden !important;
}