/**
 * Milemon Responsive / Mobile Polish Styles
 *
 * @package Milemon
 * @version 0.1.0
 */

/* ============================================
 * BASE RESPONSIVE STYLES - MOBILE FIRST
 * ============================================ */

/* Box sizing reset for responsive */
* {
    box-sizing: border-box;
}

/* Prevent horizontal scroll on all pages */
html,
body {
    overflow-x: hidden;
    max-width: 100vw;
}

body {
    margin: 0;
    padding: 0;
}

/* Container adjustments for mobile */
.container {
    width: 100%;
    max-width: 100%;
    padding: 0 var(--spacing-sm, 0.75rem);
}

/* ============================================
 * TOUCH TARGETS - MINIMUM 44x44px
 * ============================================ */

/* All clickable elements should have min 44px touch target */
a,
button,
input,
select,
textarea,
label,
[role="button"],
.nav-toggle {
    min-height: 44px;
    min-width: 44px;
}

/* Links that are too small */
a {
    padding: var(--spacing-xs, 0.25rem);
    display: inline-block;
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.button,
.btn {
    min-height: 44px;
    min-width: 44px;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
    font-size: var(--font-size-base, 1rem);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Form inputs - touch friendly */
input,
select,
textarea {
    min-height: 44px;
    padding: var(--spacing-sm, 0.5rem);
    font-size: var(--font-size-base, 1rem);
    border-radius: var(--radius-md, 0.375rem);
}

/* Checkbox and radio - ensure they have touch area */
input[type="checkbox"],
input[type="radio"] {
    width: 20px;
    height: 20px;
    min-width: 20px;
    min-height: 20px;
    margin-right: var(--spacing-sm, 0.5rem);
}

/* Labels should be clickable */
label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
}

/* ============================================
 * BREAKPOINTS
 * ============================================ */

/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {
    .container {
        max-width: 540px;
        margin: 0 auto;
        padding: 0 var(--spacing-md, 1rem);
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .container {
        max-width: 720px;
    }
}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
    .container {
        max-width: 960px;
    }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
    .container {
        max-width: var(--container-max-width, 1400px);
    }
}

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

@media (max-width: 991px) {
    /* Header layout */
    .site-header {
        position: sticky;
        top: 0;
        z-index: var(--z-sticky, 200);
    }

    .main-header {
        padding: var(--spacing-sm, 0.5rem) 0;
    }

    .main-header-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--spacing-sm, 0.5rem);
    }

    /* Mobile logo sizing */
    .site-branding img {
        max-height: 40px;
        width: auto;
    }

    .site-branding .site-title {
        font-size: var(--font-size-lg, 1.125rem);
    }

    /* Hide desktop nav on mobile */
    .main-navigation {
        display: none;
    }

    /* Mobile menu toggle - always visible on mobile */
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Header actions - larger touch targets */
    .header-actions {
        display: flex;
        align-items: center;
        gap: var(--spacing-xs, 0.25rem);
    }

    .header-actions a,
    .header-actions button {
        width: 44px;
        height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0;
    }

    /* Top bar hidden on mobile */
    .top-bar {
        display: none;
    }
}

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

@media (max-width: 991px) {
    /* Mobile menu overlay */
    .mobile-menu-open {
        overflow: hidden;
    }

    .mobile-menu-open #page {
        overflow: hidden;
    }

    /* Mobile nav container */
    .mobile-menu-open .main-navigation {
        display: block;
        position: fixed;
        top: var(--header-height-mobile, 60px);
        left: 0;
        right: 0;
        bottom: 0;
        background: var(--color-surface, #ffffff);
        z-index: var(--z-fixed, 300);
        overflow-y: auto;
        padding: 0;
    }

    /* Mobile menu list */
    .mobile-menu-open .primary-menu {
        flex-direction: column;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mobile-menu-open .primary-menu > li {
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        margin: 0;
    }

    .mobile-menu-open .primary-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: var(--spacing-md, 1rem);
        font-size: var(--font-size-base, 1rem);
        font-weight: var(--font-weight-medium, 500);
        min-height: 56px;
        color: var(--color-text-primary, #2d3748);
    }

    /* Mobile submenus */
    .mobile-menu-open .submenu-container {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: var(--color-background, #f7fafc);
        padding: 0;
        margin: 0;
        display: none;
    }

    .mobile-menu-open .submenu-container.active {
        display: block;
    }

    .mobile-menu-open .submenu-container a {
        padding: var(--spacing-md, 1rem) var(--spacing-md, 1rem) var(--spacing-md, 1rem) var(--spacing-xl, 1.5rem);
        font-size: var(--font-size-base, 1rem);
        min-height: 48px;
    }

    /* Mobile submenu toggle button */
    .mobile-menu-open .submenu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        height: 56px;
        background: transparent;
        border: none;
        cursor: pointer;
        font-size: 1.5rem;
        color: var(--color-text-primary, #2d3748);
    }

    /* CTA buttons in mobile menu */
    .mobile-menu-open .menu-item-wholesale a,
    .mobile-menu-open .menu-item-quote a {
        margin: var(--spacing-md, 1rem);
        padding: var(--spacing-md, 1rem);
        text-align: center;
        justify-content: center;
    }
}

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

@media (max-width: 767px) {
    .footer-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-lg, 1.5rem);
    }

    .footer-column {
        padding: var(--spacing-md, 1rem) 0;
        border-bottom: 1px solid var(--color-border, #e2e8f0);
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
        text-align: center;
    }

    .footer-social .social-links {
        justify-content: center;
    }
}

/* ============================================
 * MOBILE PRODUCT LIST
 * ============================================ */

@media (max-width: 767px) {
    /* Product grid - single column on mobile */
    .products,
    .woocommerce ul.products {
        display: grid;
        grid-template-columns: 1fr;
        gap: var(--spacing-md, 1rem);
        margin: 0;
        padding: 0;
    }

    /* Product card */
    .products li.product,
    .woocommerce ul.products li.product {
        width: 100%;
        margin: 0;
    }

    /* Product image */
    .products li.product a img,
    .woocommerce ul.products li.product a img {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: cover;
    }

    /* Product info */
    .products li.product .woocommerce-loop-product__title,
    .woocommerce ul.products li.product .woocommerce-loop-product__title {
        font-size: var(--font-size-base, 1rem);
        padding: var(--spacing-sm, 0.5rem) 0;
    }

    /* Price */
    .products li.product .price,
    .woocommerce ul.products li.product .price {
        font-size: var(--font-size-lg, 1.125rem);
        padding-bottom: var(--spacing-sm, 0.5rem);
    }

    /* Add to cart button - full width on mobile */
    .products li.product .button,
    .woocommerce ul.products li.product .button {
        width: 100%;
        min-height: 44px;
    }
}

/* Tablet products - 2 columns */
@media (min-width: 576px) and (max-width: 991px) {
    .products,
    .woocommerce ul.products {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
 * MOBILE PRODUCT DETAIL
 * ============================================ */

@media (max-width: 767px) {
    /* Single product layout */
    .single-product .product {
        display: flex;
        flex-direction: column;
    }

    /* Product gallery */
    .single-product .woocommerce-product-gallery {
        width: 100%;
        margin-bottom: var(--spacing-lg, 1.5rem);
    }

    /* Product summary */
    .single-product .summary.entry-summary {
        width: 100%;
        padding: 0;
    }

    /* Product title */
    .single-product .product_title {
        font-size: var(--font-size-2xl, 1.5rem);
    }

    /* Price */
    .single-product .price {
        font-size: var(--font-size-xl, 1.25rem);
    }

    /* Add to cart form */
    .single-product .cart {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }

    .single-product .cart .quantity {
        width: 100%;
    }

    .single-product .cart .quantity input {
        width: 100%;
        min-height: 48px;
        font-size: var(--font-size-lg, 1.125rem);
    }

    .single-product .cart .single_add_to_cart_button {
        width: 100%;
        min-height: 56px;
        font-size: var(--font-size-lg, 1.125rem);
    }

    /* Product_meta */
    .single-product .product_meta {
        margin-top: var(--spacing-lg, 1.5rem);
        padding-top: var(--spacing-md, 1rem);
    }
}

/* ============================================
 * MOBILE CART
 * ============================================ */

@media (max-width: 767px) {
    /* Cart table */
    .woocommerce-cart table.cart {
        display: block;
        border: none;
    }

    .woocommerce-cart table.cart thead {
        display: none;
    }

    .woocommerce-cart table.cart tbody,
    .woocommerce-cart table.cart tr,
    .woocommerce-cart table.cart td {
        display: block;
        border: none;
        padding: var(--spacing-sm, 0.5rem);
    }

    .woocommerce-cart table.cart tr {
        border-bottom: 1px solid var(--color-border, #e2e8f0);
        margin-bottom: var(--spacing-md, 1rem);
    }

    .woocommerce-cart table.cart td {
        padding: var(--spacing-sm, 0.5rem);
        text-align: left;
    }

    .woocommerce-cart table.cart td::before {
        content: attr(data-title) ": ";
        font-weight: var(--font-weight-bold, 700);
        display: block;
        margin-bottom: var(--spacing-xs, 0.25rem);
    }

    .woocommerce-cart table.cart td.product-remove {
        text-align: right;
    }

    /* Cart actions */
    .woocommerce-cart .cart-actions {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }

    .woocommerce-cart .cart-actions .button {
        width: 100%;
        min-height: 48px;
    }

    /* Cart totals - full width */
    .woocommerce-cart .cart-collaterals {
        margin-top: var(--spacing-xl, 2rem);
    }

    .woocommerce-cart .cart-collaterals .cart_totals {
        width: 100%;
    }
}

/* ============================================
 * MOBILE CHECKOUT
 * ============================================ */

@media (max-width: 767px) {
    /* Checkout form layout */
    .woocommerce-checkout {
        display: flex;
        flex-direction: column;
    }

    /* Checkout customer details */
    #customer_details {
        width: 100%;
        margin-bottom: var(--spacing-lg, 1.5rem);
    }

    /* Checkout order review */
    #order_review {
        width: 100%;
    }

    /* Form rows */
    .woocommerce-checkout .form-row {
        margin-bottom: var(--spacing-md, 1rem);
    }

    .woocommerce-checkout .form-row-first,
    .woocommerce-checkout .form-row-last {
        width: 100%;
        float: none;
    }

    /* Input fields */
    .woocommerce-checkout input.input-text,
    .woocommerce-checkout textarea,
    .woocommerce-checkout select {
        width: 100%;
        min-height: 48px;
        font-size: var(--font-size-base, 1rem);
    }

    /* Place order button */
    #place_order {
        width: 100%;
        min-height: 56px;
        font-size: var(--font-size-lg, 1.125rem);
    }

    /* Payment methods */
    .woocommerce-checkout .payment_methods {
        padding: 0;
        list-style: none;
    }

    .woocommerce-checkout .payment_methods li {
        margin-bottom: var(--spacing-md, 1rem);
    }

    .woocommerce-checkout .payment_methods label {
        display: flex;
        align-items: flex-start;
        padding: var(--spacing-md, 1rem);
        background: var(--color-background, #f7fafc);
        border-radius: var(--radius-md, 0.375rem);
        cursor: pointer;
        min-height: auto;
    }

    .woocommerce-checkout .payment_methods input[type="radio"] {
        margin-top: var(--spacing-xs, 0.25rem);
    }
}

/* ============================================
 * MOBILE FORMS - TOUCH OPTIMIZED
 * ============================================ */

@media (max-width: 767px) {
    /* Input types optimized for mobile */
    input[type="tel"] {
        font-size: var(--font-size-base, 1rem);
    }

    input[type="email"],
    input[type="url"] {
        font-size: var(--font-size-base, 1rem);
    }

    /* Search form */
    .search-form {
        display: flex;
        width: 100%;
    }

    .search-form .search-field {
        flex: 1;
        min-height: 44px;
    }

    .search-form .search-submit {
        min-width: 44px;
    }

    /* Comment form */
    .comment-form {
        display: flex;
        flex-direction: column;
        gap: var(--spacing-md, 1rem);
    }

    .comment-form .form-submit {
        order: 10;
    }
}

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

@media (max-width: 991px) {
    /* Fixed bottom CTA for mobile - if needed */
    .mobile-cta-bar {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        background: var(--color-surface, #ffffff);
        padding: var(--spacing-sm, 0.5rem);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
        z-index: var(--z-fixed, 300);
    }

    .mobile-cta-bar a {
        flex: 1;
        min-height: 48px;
    }

    /* Add padding to main content when CTA bar is visible */
    body.has-mobile-cta #content {
        padding-bottom: 80px;
    }
}

/* Hide mobile CTA bar by default */
.mobile-cta-bar {
    display: none;
}

/* ============================================
 * ACCESSIBILITY - FOCUS STYLES
 * ============================================ */

@media (max-width: 991px) {
    /* Visible focus states for mobile */
    a:focus,
    button:focus,
    input:focus,
    select:focus,
    textarea:focus {
        outline: 2px solid var(--color-primary, #1a365d);
        outline-offset: 2px;
    }

    /* Remove tap highlight on mobile */
    a,
    button {
        -webkit-tap-highlight-color: transparent;
    }
}

/* ============================================
 * PERFORMANCE OPTIMIZATIONS
 * ============================================ */

/* Reduce motion on mobile if preferred */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ============================================
 * RESPONSIVE UTILITIES
 * ============================================ */

@media (max-width: 767px) {
    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: block !important;
    }

    .show-mobile-flex {
        display: flex !important;
    }

    .text-center-mobile {
        text-align: center;
    }

    .w-100-mobile {
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .hide-desktop {
        display: none !important;
    }

    .show-desktop {
        display: block !important;
    }
}

/* ============================================
 * LANDSCAPE ORIENTATION ADJUSTMENTS
 * ============================================ */

@media (max-height: 500px) and (orientation: landscape) {
    /* Adjust header for landscape mobile */
    .site-header {
        max-height: 60px;
    }

    .mobile-menu-open .main-navigation {
        top: 60px;
    }
}