/* ================================================================
   Full-Width Page Layout Fix
   Removes Twenty Twenty-Five theme padding/margin/width constraints
   so the page and all Custom HTML blocks fill the complete screen width.
   Covers: frontend, preview URLs, and any imported HTML block content.
   Source: Snip #16
   ================================================================ */

/* ---- STEP 1: Override the global content-size CSS variable ---- */
:root,
html,
body,
.wp-site-blocks,
.entry-content,
.wp-block-post-content,
.is-layout-constrained {
  --wp--style--global--content-size: 100vw !important;
  --wp--style--global--wide-size: 100vw !important;
}

/* ---- STEP 2: Remove all padding on the post-content wrapper ---- */
.entry-content.has-global-padding,
.wp-block-post-content.has-global-padding,
.has-global-padding {
  padding-left: 0 !important;
  padding-right: 0 !important;
  --wp--style--root--padding-left: 0px !important;
  --wp--style--root--padding-right: 0px !important;
}

/* ---- STEP 3: Remove constrained-layout max-width on ALL direct children ---- */
.is-layout-constrained > *,
.is-layout-constrained > :where(*),
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)),
.entry-content.is-layout-constrained > *,
.wp-block-post-content.is-layout-constrained > * {
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- STEP 4: Custom HTML block — truly full-width ---- */
.wp-block-html,
.wp-block-html > * {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}

/* ---- STEP 5: alignfull negative-margin compensator reset ---- */
.has-global-padding > .alignfull {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* ---- STEP 6: Imported HTML block content ---- */
.wp-block-html [style*="max-width"],
.wp-block-html [style*="margin: 0 auto"],
.wp-block-html [style*="margin:0 auto"] {
  max-width: 100% !important;
}

/* ---- STEP 7: Also fix the site-blocks wrapper and main ---- */
.wp-site-blocks,
.wp-site-blocks > *,
main.wp-block-group,
.wp-block-group.has-global-padding {
  max-width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* ================================================================
   MOBILE — prevent horizontal scroll when width is set to 100vw
   ================================================================ */
@media (max-width: 768px) {
  html,
  body {
    overflow-x: hidden !important;
    width: 100% !important;
  }

  .wp-block-html,
  .wp-block-html > * {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
  }

  .entry-content.has-global-padding,
  .wp-block-post-content.has-global-padding {
    padding-left: 0 !important;
    padding-right: 0 !important;
    overflow-x: hidden !important;
  }

  /* Any fixed widths inside imported HTML blocks become fluid on mobile */
  .wp-block-html * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

@media (max-width: 480px) {
  .wp-block-html,
  .wp-block-html > * {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* Ensure imported HTML sections never overflow on small screens */
  .wp-block-html [style*="width"] {
    width: 100% !important;
  }
}

/* ================================================================
   Login Button — guests only, injected before WC account icon
   ================================================================ */
.wcfm-glue-login-btn {
  display: inline-flex;
  align-items: center;
  padding: 0.35em 0.85em;
  border: 1px solid currentColor;
  border-radius: 3px;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  color: inherit;
  line-height: 1;
  white-space: nowrap;
  vertical-align: middle;
}

.wcfm-glue-login-btn:hover,
.wcfm-glue-login-btn:focus {
  opacity: 0.8;
  text-decoration: none;
}