/*
 * Breaks a wholesale-owned route out of the active theme's boxed content
 * column (sidebar, max-width wrapper, whatever it is) so it spans the full
 * viewport width regardless of theme. Shared by every wholesale-owned
 * route: the Wholesale Shop shortcode/Full Page renderer, and Checkout/Cart
 * (there this class is applied to WooCommerce's own checkout/cart
 * container by an inline script instead, since this plugin doesn't own
 * that markup — see render_checkout_fullbleed_script() and
 * render_cart_fullbleed_script() in class-vitewholesale.php).
 *
 * margin-left/margin-right are set inline, per-element, by
 * apbd-fullbleed.js's alignAll() — NOT by a CSS calc(50% - 50vw) formula
 * (an earlier version of this rule used exactly that, and it shipped
 * broken: that formula only produces a flush-edge result when the
 * element's ancestor column is horizontally CENTERED in the viewport.
 * Confirmed live on WordPress's own Twenty Twenty-Five theme — any page
 * with an active sidebar template (Checkout, the Wholesale Shop page, and
 * more) lays its .entry-content column out flush-LEFT instead, next to
 * the sidebar, not centered. calc(50% - 50vw) has no way to detect that
 * asymmetry: it dragged every fullbleed element ~139px past the true
 * left edge of the viewport, clipping the first several characters of
 * every line of text off-screen. Measuring each element's actual
 * rendered position with getBoundingClientRect() and closing exactly
 * that gap is correct regardless of how (or whether) the theme centers
 * its content column.
 */
.apbd-fullbleed {
    max-width: none !important;
    padding: 1.5rem clamp(1rem, 4vw, 3rem);
    box-sizing: border-box;
}

@media (max-width: 480px) {
    .apbd-fullbleed {
        padding: 1rem 0.75rem;
    }
}

/*
 * Backstop against page-level horizontal scroll: apbd-fullbleed.js's
 * alignAll() runs on DOMContentLoaded/resize/mutation, but there's an
 * unavoidable gap between an element gaining the .apbd-fullbleed class
 * (e.g. Checkout/Cart's own tagging scripts, or right after this
 * stylesheet's max-width:none takes effect) and that JS actually measuring
 * and closing it — or permanently, if the JS is blocked/delayed/errors.
 * This rule used to live in the Wholesale Shop SPA's own stylesheet, but
 * Cart and a non-qualifying/anonymous Checkout visitor get tagged with
 * .apbd-fullbleed by this file (and apbd-fullbleed.js) WITHOUT ever
 * loading the SPA bundle, so a backstop scoped to the SPA's own CSS never
 * shipped on those two routes. Living here instead covers every fullbleed
 * route the same way the rest of this file does.
 *
 * `html` is included alongside `body`, not just `body` alone: WooCommerce
 * Blocks' Mini Cart drawer (wc-block-mini-cart__drawer) is `position:
 * fixed`, positioned off-canvas to the right until opened. A fixed-position
 * element is positioned against the viewport/initial containing block, not
 * against `body` — so `body`'s own overflow-x never clips it, and on
 * narrow viewports its off-canvas position (several hundred px past the
 * right edge) was enough to make the whole page horizontally scrollable,
 * even though nothing in the page's own layout was actually overflowing.
 * Setting overflow-x: hidden on `html` clips at the true viewport/root
 * level, which does constrain fixed-position descendants.
 *
 * A descendant's own `overflow-x: auto` (e.g. .table-responsive) is
 * unaffected — this only stops the outer page itself from scrolling
 * sideways, not any element's own internal horizontal scroll.
 */
html,
body {
    overflow-x: hidden;
}

/*
 * Trims the large top/bottom padding AND top margin a block/FSE theme's
 * template often puts on the title+content wrapper (a "wp-block-group"
 * with inline padding-top/padding-bottom/margin-top, all set to the same
 * generic preset spacing value sized for ordinary long-form content, not a
 * dense app UI like this one). Scoped via :has() to only the wrapper that
 * actually contains a fullbleed element, so no other page's spacing is
 * touched.
 */
.wp-block-group:has(> .entry-content .apbd-fullbleed) {
    margin-top: 0 !important;
    padding-top: 1rem !important;
    padding-bottom: 0.5rem !important;
}

/*
 * Same preset-spacing margin-top, one level further out — the theme's
 * <main id="wp--skip-link--target"> wrapper itself. Targeted directly by
 * its id (stable, unique per page) rather than :has(), since this
 * stylesheet only ever loads on a page where something of this plugin's
 * actually renders full-width (see is_wholesale_fullbleed_context() in
 * class-vitewholesale.php).
 */
#wp--skip-link--target {
    margin-top: 0 !important;
}