/*! Pool Builder Plugin — WordPress integration & wrapper root
   03-elements.wordpress.css
   Extracted VERBATIM from pb-sections.css, preserving source order — the
   cascade here is order-dependent: after scoping, the bare body/html rules
   become #wppb_wrapper {} and must stay BEFORE the #wppb_wrapper positioning
   block so its `margin: 0 auto 100px auto` wins. Holds the wrapper root
   sizing/positioning, the WordPress admin-bar header-offset logic, and the
   body/html resets. Must load after 00-settings.tokens.css (owns
   --wp-admin-bar-height) and after the legacy main CSS. */

/* WordPress header and footer */
#wppb_wrapper header {
    width: 100%;
    background-color: var(--wppb-white);
    border-bottom: 1px solid #e0e0e0;
}

/* WordPress body and HTML reset. NB: PostCSS rewrites `body` to `#wppb_wrapper`,
   so this rule paints the wrapper itself — keep it transparent. Painting the gray
   --wppb-body-bg here filled the full-height (min-height:100vh) wrapper, so the
   surface bled past shorter step content and below/right of the form (read as a
   stray panel peeking out) and varied by host theme. Panels/cards that need a
   surface paint their own (e.g. the estimate page's white/gray split). */
#wppb_wrapper {
    background-color: transparent;
    margin: 0;
    padding: 0;
}

#wppb_wrapper {
    margin: 0;
    padding: 0;
}

/* Wrapper root: min-height + positioning. Kept AFTER the body/html resets so its
   margin/position win over their margin:0/padding:0 — the `margin: 0 auto 100px`
   gives the fixed bottom bar its clearance. (min-height merged from an earlier
   #wppb_wrapper block; it's a unique property so the move is behavior-neutral.) */
#wppb_wrapper {
    min-height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    margin: 0 auto 100px;
    padding: 0;
    box-sizing: border-box;

    /* Inheritance hardening: scoping and @scope don't stop a host theme's
       body/* typography from cascading INTO the wrapper, so re-assert the
       plugin's own base typography here. Loads after (scoped) Bootstrap, so
       these win for the wrapper and inherit down to its children. */
    font-family: var(--wppb-font-family-base);
    font-size: var(--wppb-font-size-base);
    line-height: var(--wppb-line-height-base);
    color: var(--wppb-color-text);

    /* Ensure wrapper starts below WordPress elements without overlap */
}

/* Full-width breakout — opt-out via the "Full-width breakout" setting (default on;
   the shortcode adds .wppb-breakout unless disabled). Escapes a host theme's
   constrained content column (e.g. a 720px page template) so the builder renders
   at a consistent width on ANY theme. The wrapper goes edge-to-edge — viewport
   minus the scrollbar (--wppb-sbw, the same var the bottom bar uses) — while the
   step containers keep their own max-width (--wppb-max-width) and stay centered,
   so the CONTENT stays bounded; only the transparent wrapper is full-bleed.
   id+class + !important outranks the base #wppb_wrapper width. */
#wppb_wrapper.wppb-breakout {
    width: calc(100vw - var(--wppb-sbw, 0px)) !important;
    max-width: calc(100vw - var(--wppb-sbw, 0px)) !important;
    margin-left: calc(50% - 50vw + var(--wppb-sbw, 0px) / 2) !important;
    margin-right: calc(50% - 50vw + var(--wppb-sbw, 0px) / 2) !important;
}

/* Additional safety for various WordPress configurations */
body.admin-bar #wppb_wrapper,
.wp-admin-bar-active #wppb_wrapper,
.logged-in #wppb_wrapper {
    position: relative;
    z-index: 999; /* Below WordPress admin elements (1000+) but above content */
}

/* Only fix wrapper z-index conflict when modal is open */
.modal-open #wppb_wrapper,
.wppb-modal-open #wppb_wrapper {
    z-index: unset !important;
}

/* Offset the wrapper below the WordPress admin bar when present. */
.admin-bar #wppb_wrapper {
    margin-top: var(--wp-admin-bar-height);
}

/* Mobile responsiveness for fixed layout */
@media (max-width: 768px) {
    /* Mobile: Maintain WordPress header compliance */
    #wppb_wrapper {
        --wp-admin-bar-height: var(--wp-admin-bar-mobile-height); /* Use mobile admin bar height */
    }
    
    .admin-bar #wppb_wrapper {
        margin-top: var(--wp-admin-bar-mobile-height); /* Mobile admin bar is typically taller */
    }

}