/**
 * HiGuppy Responsive Design Overrides
 *
 * Comprehensive responsive rules to prevent horizontal overflow and ensure
 * usability across all viewport widths. Loaded last in the CSS cascade to
 * override XStore parent theme rules that cause layout issues.
 *
 * Breakpoints:
 *   - Mobile:  max-width 375px (small phones)
 *   - Tablet:  max-width 768px (tablets and large phones)
 *   - Desktop: max-width 1440px (standard desktops)
 *
 * Uses design tokens from higuppy-design-tokens.css:
 *   --higuppy-touch-min: 44px
 *   --higuppy-space: 8px
 *
 * @package HiGuppy
 * @since 1.0.0
 * @validates Requirements 16.1, 16.2, 16.3, 16.4, 16.5, 16.6
 */

/* ==========================================================================
   XSTORE HEADER MOBILE FIX
   Logo size only — do NOT touch layout, menu visibility, or nav elements.
   XStore handles its own mobile header switching.
   ========================================================================== */

@media (max-width: 991px) {
    /* Cap logo height only — nothing else */
    .header-logo img,
    .site-logo img,
    .et_b_header-logo img {
        max-height: 40px !important;
        width: auto !important;
    }
}

@media (max-width: 480px) {
    .header-logo img,
    .site-logo img,
    .et_b_header-logo img {
        max-height: 32px !important;
    }
}

/* Extra small (≤480px) — tighter logo */

/* ==========================================================================
   BASE: Global overflow prevention
   ========================================================================== */

html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Prevent XStore parent theme containers from exceeding viewport */
.container,
.container-fluid,
.row,
.page-wrapper,
.content-page,
.site-content,
#content,
.main-content {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* ==========================================================================
   DESKTOP: max-width 1440px
   Ensures content stays within standard desktop viewport.
   @validates Requirement 16.3
   ========================================================================== */

@media (max-width: 1440px) {
    /* Cap wide containers to prevent overflow on standard monitors */
    .container,
    .et_b_header-container,
    .page-heading,
    .footer-top,
    .footer-bottom {
        max-width: 100% !important;
        padding-left: calc(var(--higuppy-space) * 3) !important;
        padding-right: calc(var(--higuppy-space) * 3) !important;
    }

    /* XStore full-width sections */
    .elementor-section.elementor-section-stretched,
    .vc_row[data-vc-stretch-content],
    .vc_row[data-vc-full-width] {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    /* Product grid - prevent items from overflowing */
    .products.row,
    .products-grid,
    ul.products {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   TABLET: max-width 768px
   Touch target enforcement, hamburger menu, tablet layout adjustments.
   @validates Requirements 16.2, 16.4, 16.5
   ========================================================================== */

@media (max-width: 768px) {
    /* ------------------------------------------------------------------
       Touch Target Enforcement (44×44px minimum)
       WCAG 2.5.5 / Apple HIG minimum touch target size
       @validates Requirement 16.4
       ------------------------------------------------------------------ */

    a,
    button,
    [role="button"],
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .button,
    .btn,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce #respond input#submit,
    .menu-item a,
    .nav-link,
    .et_b_header-menu > li > a,
    .widget a,
    .product-content a,
    select {
        min-height: var(--higuppy-touch-min) !important;
        min-width: var(--higuppy-touch-min) !important;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* Preserve block-level layout for full-width buttons */
    .woocommerce .single_add_to_cart_button,
    .woocommerce .checkout-button,
    .woocommerce .wc-proceed-to-checkout a,
    .button.btn-block,
    input[type="submit"] {
        display: flex !important;
        width: 100% !important;
        min-height: var(--higuppy-touch-min) !important;
    }

    /* Form inputs touch targets */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    input[type="tel"],
    input[type="url"],
    input[type="number"],
    textarea,
    select {
        min-height: var(--higuppy-touch-min) !important;
        padding: calc(var(--higuppy-space) * 1.5) !important;
        font-size: 16px !important; /* Prevents iOS zoom on focus */
    }

    /* ------------------------------------------------------------------
       Hamburger Menu Support
       Show mobile menu toggle, hide desktop nav at tablet and below
       @validates Requirement 16.5
       ------------------------------------------------------------------ */

    /* Show hamburger/mobile menu toggle button */
    .et_b_mobile-menu-toggle,
    .mobile-menu-toggle,
    .menu-toggle,
    .hamburger-menu,
    .navbar-toggler,
    [data-toggle="mobile-menu"] {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-height: var(--higuppy-touch-min) !important;
        min-width: var(--higuppy-touch-min) !important;
        cursor: pointer;
    }

    /* Hide desktop navigation menu */
    .et_b_header-menu,
    .main-menu-wrapper,
    .primary-menu,
    .site-header-cart .menu,
    nav.main-navigation > ul.menu {
        display: none !important;
    }

    /* Show mobile menu when active */
    .et_b_header-menu.mobile-active,
    .mobile-menu.active,
    .mobile-menu-wrapper.open,
    .menu-mobile-active {
        display: block !important;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        z-index: 9999;
        overflow-y: auto;
        background: #fff;
        padding: calc(var(--higuppy-space) * 2);
    }

    /* Mobile menu items spacing for touch */
    .mobile-menu li a,
    .et_b_header-menu.mobile-active li a,
    .mobile-menu-wrapper.open li a {
        min-height: var(--higuppy-touch-min) !important;
        padding: calc(var(--higuppy-space) * 1.5) calc(var(--higuppy-space) * 2) !important;
        display: flex !important;
        align-items: center;
        border-bottom: 1px solid var(--higuppy-neutral-100);
    }

    /* ------------------------------------------------------------------
       Tablet Layout Overrides
       Prevent XStore parent from causing overflow
       ------------------------------------------------------------------ */

    /* XStore columns - stack on tablet */
    .col-md-3,
    .col-md-4,
    .col-md-6,
    .col-md-8,
    .col-md-9,
    .col-lg-3,
    .col-lg-4,
    .col-lg-6,
    .col-lg-8,
    .col-lg-9 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: calc(var(--higuppy-space) * 2) !important;
        padding-right: calc(var(--higuppy-space) * 2) !important;
    }

    /* Product grid - 2 columns on tablet */
    ul.products li.product,
    .products .product,
    .product-grid-item {
        flex: 0 0 50% !important;
        max-width: 50% !important;
        width: 50% !important;
    }

    /* Tables - allow horizontal scroll within table wrapper only */
    table {
        display: block;
        width: 100% !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* XStore slider/carousel overflow prevention */
    .et-slider,
    .slick-slider,
    .swiper-container,
    .products-slider {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* Footer - stack columns on tablet */
    .footer-top .row > [class*="col-"],
    .footer-widgets .widget {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        margin-bottom: calc(var(--higuppy-space) * 3);
    }

    /* Sidebar - full width below content on tablet */
    .sidebar,
    .sidebar-container,
    aside.widget-area {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
        padding-left: calc(var(--higuppy-space) * 2) !important;
        padding-right: calc(var(--higuppy-space) * 2) !important;
    }

    /* XStore header - prevent icon bar overflow */
    .header-wrapper,
    .et_b_header-top,
    .et_b_header-main {
        flex-wrap: wrap !important;
        max-width: 100% !important;
    }
}

/* ==========================================================================
   MOBILE: max-width 375px
   Tightest layout rules for small phone screens.
   @validates Requirements 16.1, 16.4, 16.6
   ========================================================================== */

@media (max-width: 375px) {
    /* Reduce container padding for small screens */
    .container,
    .container-fluid,
    .page-wrapper,
    .content-page {
        padding-left: calc(var(--higuppy-space) * 1.5) !important;
        padding-right: calc(var(--higuppy-space) * 1.5) !important;
    }

    /* Product grid - single column on small mobile */
    ul.products li.product,
    .products .product,
    .product-grid-item {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    /* Typography scaling for small screens */
    h1,
    .entry-title,
    .page-title {
        font-size: clamp(1.5rem, 6vw, 2rem) !important;
        line-height: 1.15 !important;
        word-wrap: break-word;
        overflow-wrap: break-word;
    }

    h2 {
        font-size: clamp(1.25rem, 5vw, 1.75rem) !important;
        line-height: 1.2 !important;
    }

    h3 {
        font-size: clamp(1.1rem, 4.5vw, 1.5rem) !important;
        line-height: 1.25 !important;
    }

    /* Long text overflow protection */
    p,
    li,
    td,
    th,
    span,
    .product-title,
    .product_title {
        word-wrap: break-word;
        overflow-wrap: break-word;
        hyphens: auto;
    }

    /* WooCommerce product page - full-width elements */
    .woocommerce div.product div.images,
    .woocommerce div.product div.summary {
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* WooCommerce cart table - responsive */
    .woocommerce-cart-form table.cart td,
    .woocommerce-cart-form table.cart th {
        padding: calc(var(--higuppy-space) * 1) !important;
        font-size: 0.875rem;
    }

    /* Buttons - full width on small screens */
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .button,
    .btn {
        width: 100% !important;
        text-align: center !important;
        padding: calc(var(--higuppy-space) * 1.5) calc(var(--higuppy-space) * 2) !important;
    }

    /* XStore specific - quantity input shrink prevention */
    .quantity input[type="number"] {
        min-width: var(--higuppy-touch-min) !important;
        min-height: var(--higuppy-touch-min) !important;
        text-align: center;
    }

    /* Navigation breadcrumbs - wrap and truncate on small screens */
    .breadcrumbs,
    .woocommerce-breadcrumb,
    nav.woocommerce-breadcrumb {
        font-size: 0.75rem !important;
        white-space: normal !important;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Fixed/sticky elements - full width */
    .sticky-header,
    .fixed-header,
    .et_b_header-sticky {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
    }

    /* Images in content - prevent overflow */
    .entry-content img,
    .page-content img,
    .post-content img,
    figure img {
        max-width: 100% !important;
        height: auto !important;
    }

    /* XStore popup/modal - constrain to viewport */
    .et-popup,
    .et-quick-view-wrapper,
    .mfp-container {
        max-width: 100vw !important;
        padding: calc(var(--higuppy-space) * 1.5) !important;
    }
}

/* ==========================================================================
   OVERFLOW PREVENTION: XStore-specific parent theme overrides
   These rules target known XStore patterns that cause horizontal scrollbars.
   ========================================================================== */

/* XStore negative margin rows - neutralize overflow */
.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

@media (max-width: 768px) {
    .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .row > [class*="col-"] {
        padding-left: calc(var(--higuppy-space) * 2) !important;
        padding-right: calc(var(--higuppy-space) * 2) !important;
    }
}

/* XStore full-width elements that can cause overflow */
.vc_row-full-width,
.elementor-section-stretched,
[data-vc-stretch-content="true"] {
    max-width: 100vw !important;
    width: 100% !important;
    left: 0 !important;
    margin-left: 0 !important;
}

/* XStore banner/slider overflow control */
.et-slider .slide-content,
.banner-content,
.promo-banner {
    max-width: 100% !important;
    overflow: hidden;
}

/* XStore sidebar toggle - ensure visibility on content pages */
@media (max-width: 991px) {
    .sidebar-position-right,
    .sidebar-position-left {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
    }

    .sidebar-position-right > .row,
    .sidebar-position-left > .row {
        display: block !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   ACCESSIBILITY: Focus visibility for keyboard navigation
   ========================================================================== */

@media (max-width: 768px) {
    a:focus-visible,
    button:focus-visible,
    [role="button"]:focus-visible,
    input:focus-visible,
    select:focus-visible,
    textarea:focus-visible {
        outline: 2px solid var(--higuppy-secondary) !important;
        outline-offset: 2px !important;
    }
}

/* ==========================================================================
   PRINT: Remove overflow restrictions for print layout
   ========================================================================== */

@media print {
    html,
    body {
        overflow: visible !important;
        max-width: none !important;
    }
}