/*
 * Sokidoo Blocksy Mobile Stability
 * Goal: WoodMart-like stable responsive width without disabling user zoom.
 */

html {
    width: 100%;
    max-width: 100%;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: hidden;
    overflow-wrap: break-word;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

@supports (overflow: clip) {
    html,
    body,
    #main-container {
        overflow-x: clip;
    }
}

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

/* The elements that most often create a wider-than-device layout. */
#main-container,
main.site-main,
.site-main,
.content-area,
[class*="ct-container"],
.ct-content,
.ct-content-container,
article,
.entry-content,
.entry-content-wrap,
.wp-site-blocks,
.is-layout-constrained,
.is-layout-flow {
    min-width: 0;
    max-width: 100%;
}

/* Flex/grid children must be allowed to shrink on small screens. */
#main-container > *,
main.site-main > *,
[class*="ct-container"] > *,
.entry-content > *,
.wp-block-columns > *,
.wp-block-group > *,
.e-con > *,
.e-con-inner > * {
    min-width: 0;
    min-inline-size: 0;
}

/* Media cannot widen the document. */
img,
picture,
video,
canvas,
svg,
iframe,
embed,
object {
    max-width: 100%;
}

img,
picture,
video {
    height: auto;
}

/* Long strings/URLs should wrap rather than increase page width. */
p,
li,
a,
span,
strong,
small,
h1,
h2,
h3,
h4,
h5,
h6,
figcaption {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

pre,
code {
    max-width: 100%;
    overflow-x: auto;
}

/* Elementor integration. */
.elementor,
.elementor-section,
.elementor-container,
.elementor-column,
.elementor-widget,
.elementor-widget-wrap,
.elementor-element,
.e-con,
.e-con-inner {
    min-width: 0;
    min-inline-size: 0;
    max-width: 100%;
}

/* WooCommerce layout safety. */
.woocommerce,
.woocommerce-page,
.woocommerce div.product,
.woocommerce-page div.product,
.woocommerce-cart-form,
.woocommerce-checkout,
.woocommerce-MyAccount-content,
.wc-block-cart,
.wc-block-checkout {
    min-width: 0;
    max-width: 100%;
}

/* Avoid iOS form-focus auto enlargement. */
input,
select,
textarea {
    max-width: 100%;
}

@media (max-width: 689.98px) {
    :root {
        /* Stable 15px side gutters, closer to the compact ecommerce feel. */
        --theme-container-edge-spacing: calc(100vw - 30px);
        --theme-container-width-base: calc(100vw - 30px);
    }

    html,
    body,
    #main-container,
    main.site-main {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        margin-left: 0;
        margin-right: 0;
    }

    .ct-container,
    .ct-container-narrow,
    .ct-container-fluid,
    .ct-content,
    .ct-content-container {
        width: min(100%, calc(100vw - 30px));
        max-width: 100%;
        min-width: 0;
        margin-inline: auto;
    }

    /* Keep editor layouts inside the phone viewport. */
    .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    .is-width-constrained,
    .entry-content > :where(:not(.alignfull)) {
        max-width: 100%;
    }

    /* A Blocksy/Starter Site full-width block must not become wider than the device. */
    .entry-content > .alignfull,
    .wp-block-group.alignfull,
    .wp-block-cover.alignfull,
    .wp-block-columns.alignfull,
    .wp-block-media-text.alignfull {
        width: 100%;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }

    .entry-content > .alignwide,
    .wp-block-group.alignwide,
    .wp-block-cover.alignwide,
    .wp-block-columns.alignwide,
    .wp-block-media-text.alignwide {
        width: 100%;
        max-width: 100%;
        margin-inline: auto;
    }

    /* Elementor stretched sections: remove stale desktop calculations on mobile. */
    .ct-elementor-default-template .elementor-top-section:not(.elementor-sticky),
    .elementor-section.elementor-section-boxed > .elementor-container,
    .elementor-section-stretched,
    .e-con,
    .e-con > .e-con-inner {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        left: auto;
        right: auto;
    }

    /* Inline min-width values on layout containers are a common starter-site overflow source. */
    .entry-content > [style*="min-width"],
    .wp-block-group[style*="min-width"],
    .wp-block-columns[style*="min-width"],
    .wp-block-cover[style*="min-width"],
    .elementor-section[style*="min-width"],
    .e-con[style*="min-width"] {
        min-width: 0 !important;
        max-width: 100% !important;
    }

    /* Normalize Blocksy's large fluid presets on phones.
       This is the main visual difference that can make starter content look "zoomed". */
    .has-xx-large-font-size {
        font-size: clamp(36px, 9vw, 48px) !important;
        line-height: 1.08 !important;
    }

    .has-x-large-font-size {
        font-size: clamp(30px, 8vw, 38px) !important;
        line-height: 1.12 !important;
    }

    .has-large-font-size {
        font-size: clamp(24px, 6.8vw, 30px) !important;
        line-height: 1.2 !important;
    }

    /* Sensible mobile heading ceilings without flattening intentionally smaller custom sizes. */
    h1:not(.has-custom-font-size) {
        font-size: min(var(--theme-font-size, 40px), 42px);
    }

    h2:not(.has-custom-font-size) {
        font-size: min(var(--theme-font-size, 35px), 36px);
    }

    h3:not(.has-custom-font-size) {
        font-size: min(var(--theme-font-size, 30px), 30px);
    }

    /* 16px prevents form-focus zoom on iOS. */
    input,
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }

    /* Tables stay usable without widening the whole page. */
    .wp-block-table,
    .woocommerce table.shop_table,
    table {
        max-width: 100%;
    }

    .wp-block-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

@media (min-width: 690px) and (max-width: 999.98px) {
    html,
    body,
    #main-container,
    main.site-main,
    [class*="ct-container"],
    .entry-content,
    .elementor,
    .e-con {
        min-width: 0;
        max-width: 100%;
    }
}