/* ==========================================================================
   Global Mobile Responsiveness Fix — PairAhhDice Universe
   Fixes horizontal scroll, enforces fluid containers, responsive images,
   proper grid stacking, and consistent mobile spacing sitewide.
   Preserves the cinematic black/gold aesthetic.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. GLOBAL OVERFLOW PREVENTION
   -------------------------------------------------------------------------- */
html,
body {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

/* --------------------------------------------------------------------------
   2. UNIVERSAL CONTAINER FIXES
   All Elementor containers, sections, columns, inner sections
   -------------------------------------------------------------------------- */
.elementor-section,
.elementor-section-wrap,
.elementor-container,
.elementor-column,
.elementor-column-wrap,
.elementor-widget-wrap,
.elementor-inner-section,
.elementor-element,
.e-con,
.e-con-inner,
.e-child {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* --------------------------------------------------------------------------
   3. RESPONSIVE IMAGES — SITEWIDE
   -------------------------------------------------------------------------- */
img,
video,
iframe,
object,
embed,
svg {
    max-width: 100% !important;
    height: auto !important;
}

.elementor-widget-image img,
.elementor-widget-image-box img,
.elementor-widget-theme-post-featured-image img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* --------------------------------------------------------------------------
   4. TABLET BREAKPOINT (max-width: 1024px)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {

    /* Force fluid widths on all containers */
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-inner-section,
    .e-con,
    .e-con-inner,
    .e-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
    }

    /* Fix columns to stack */
    .elementor-row,
    .elementor-container {
        flex-wrap: wrap !important;
    }

    .elementor-column {
        width: 100% !important;
        flex-basis: 100% !important;
    }

    /* Tablet padding normalization */
    .elementor-section > .elementor-container,
    .e-con {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Grid layouts — stack on tablet */
    .elementor-grid,
    .elementor-posts-container,
    .elementor-portfolio {
        grid-template-columns: 1fr 1fr !important;
        gap: 15px !important;
    }
}

/* --------------------------------------------------------------------------
   5. MOBILE BREAKPOINT (max-width: 767px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* ---- Core container resets ---- */
    .elementor-section,
    .elementor-container,
    .elementor-column,
    .elementor-column-wrap,
    .elementor-widget-wrap,
    .elementor-inner-section,
    .e-con,
    .e-con-inner,
    .e-child {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow-x: hidden !important;
        float: none !important;
        position: relative !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---- Mobile padding standardization (10-20px) ---- */
    .elementor-section > .elementor-container,
    .e-con,
    .e-con-inner {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ---- Flexbox column stacking ---- */
    .elementor-row,
    .elementor-container,
    .e-con,
    .e-con-inner {
        flex-direction: column !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: center !important;
    }

    .elementor-column,
    .e-child {
        width: 100% !important;
        flex-basis: 100% !important;
        flex-shrink: 0 !important;
    }

    /* ---- Grid layouts — single column on mobile ---- */
    .elementor-grid,
    .elementor-posts-container,
    .elementor-portfolio,
    .elementor-widget-loop-grid .elementor-loop-container {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
    }

    /* ---- Hero sections ---- */
    .elementor-section[data-settings*="full_width"],
    .elementor-section-full_width,
    .e-con[data-settings*="full_width"] {
        width: 100% !important;
        max-width: 100vw !important;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* ---- Headings — prevent overflow ---- */
    .elementor-heading-title,
    .elementor-widget-heading .elementor-heading-title,
    h1, h2, h3, h4, h5, h6 {
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
        hyphens: auto !important;
        max-width: 100% !important;
    }

    /* ---- Text widgets ---- */
    .elementor-widget-text-editor,
    .elementor-widget-text-editor p {
        max-width: 100% !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* ---- Buttons — full width on mobile ---- */
    .elementor-widget-button .elementor-button {
        max-width: 100% !important;
        white-space: normal !important;
        text-align: center !important;
    }

    /* ---- Card layouts ---- */
    .elementor-widget-image-box,
    .elementor-widget-icon-box,
    .elementor-widget-call-to-action {
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
    }

    .elementor-widget-image-box .elementor-image-box-wrapper,
    .elementor-widget-icon-box .elementor-icon-box-wrapper {
        flex-direction: column !important;
        align-items: center !important;
    }

    /* ---- Accordions & Toggles ---- */
    .elementor-widget-accordion,
    .elementor-widget-toggle {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-accordion .elementor-tab-title,
    .elementor-toggle .elementor-tab-title {
        padding: 12px 15px !important;
        font-size: 14px !important;
    }

    .elementor-accordion .elementor-tab-content,
    .elementor-toggle .elementor-tab-content {
        padding: 10px 15px !important;
    }

    /* ---- Tabs — stack vertically ---- */
    .elementor-widget-tabs .elementor-tabs-wrapper {
        flex-direction: column !important;
    }

    .elementor-widget-tabs .elementor-tab-title {
        width: 100% !important;
    }

    /* ---- Spacing normalization ---- */
    .elementor-section {
        margin-bottom: 20px !important;
    }

    .elementor-widget {
        margin-bottom: 15px !important;
    }

    /* ---- Fix absolute positioned elements ---- */
    .elementor-widget[style*="position: absolute"],
    .elementor-element[style*="position: absolute"] {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    /* ---- Negative margin reset ---- */
    .elementor-element[style*="margin-left: -"],
    .elementor-element[style*="margin-right: -"] {
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* ---- Sliders / Carousels ---- */
    .elementor-widget-image-carousel,
    .elementor-widget-media-carousel,
    .swiper-container,
    .swiper {
        max-width: 100% !important;
        overflow: hidden !important;
    }

    /* ---- Tables ---- */
    table {
        display: block !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    /* ---- iFrames / Embeds ---- */
    .elementor-widget-video iframe,
    .elementor-widget-html iframe {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* ---- Navigation / Menu ---- */
    .elementor-widget-nav-menu .elementor-nav-menu {
        max-width: 100% !important;
    }

    /* ---- Popups ---- */
    .elementor-popup-modal .dialog-widget-content {
        max-width: 95vw !important;
        max-height: 90vh !important;
        overflow-y: auto !important;
    }

    /* ---- Forms ---- */
    .elementor-widget-form .elementor-form,
    .elementor-widget-form .elementor-field-group {
        width: 100% !important;
        max-width: 100% !important;
    }

    .elementor-widget-form input,
    .elementor-widget-form textarea,
    .elementor-widget-form select {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* ---- WooCommerce product grids ---- */
    .woocommerce ul.products {
        grid-template-columns: 1fr !important;
    }

    .woocommerce ul.products li.product {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* --------------------------------------------------------------------------
   6. SMALL MOBILE (max-width: 480px)
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {

    .elementor-section > .elementor-container,
    .e-con,
    .e-con-inner {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    .elementor-heading-title,
    h1 {
        font-size: clamp(1.5rem, 6vw, 2.5rem) !important;
        line-height: 1.2 !important;
    }

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

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

    body,
    p,
    .elementor-widget-text-editor {
        font-size: clamp(0.875rem, 3.5vw, 1rem) !important;
        line-height: 1.6 !important;
    }
}

/* --------------------------------------------------------------------------
   7. PRINT SAFETY
   -------------------------------------------------------------------------- */
@media print {
    * {
        overflow: visible !important;
        max-width: 100% !important;
    }
}