/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 20 2025 | 21:51:33 */
<style>
/* ===============================
   GWW: GLOBAL IMAGE + WRAP RULES
   Applies inside post/page main content
   =============================== */

/* Keep images inside text column */
.single-post .wp-block-post-content figure.wp-block-image,
.page        .wp-block-post-content figure.wp-block-image {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

/* Stop "wide" / "full" from breaking out in articles */
.single-post .wp-block-post-content .wp-block-image.alignwide,
.single-post .wp-block-post-content .wp-block-image.alignfull,
.page        .wp-block-post-content .wp-block-image.alignwide,
.page        .wp-block-post-content .wp-block-image.alignfull {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

/* Make the actual <img> scale correctly */
.single-post .wp-block-post-content figure.wp-block-image img,
.page        .wp-block-post-content figure.wp-block-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Text wrap for left/right aligned images */
.single-post .wp-block-post-content figure.wp-block-image.alignleft,
.page        .wp-block-post-content figure.wp-block-image.alignleft {
  float: left;
  max-width: 50%;              /* adjust to taste: 40–60% */
  margin: 0 1.5rem 1rem 0;
}

.single-post .wp-block-post-content figure.wp-block-image.alignright,
.page        .wp-block-post-content figure.wp-block-image.alignright {
  float: right;
  max-width: 50%;
  margin: 0 0 1rem 1.5rem;
}

/* Ensure wrapped images' <img> scales */
.single-post .wp-block-post-content figure.wp-block-image.alignleft img,
.single-post .wp-block-post-content figure.wp-block-image.alignright img,
.page        .wp-block-post-content figure.wp-block-image.alignleft img,
.page        .wp-block-post-content figure.wp-block-image.alignright img {
  width: 100%;
  height: auto;
  display: block;
}

/* Some blocks use flex; switch to block so floats can wrap text */
.single-post .wp-block-post-content .is-layout-flex,
.page        .wp-block-post-content .is-layout-flex {
  display: block;
}

/* Mobile: stack wrapped images for breathing room */
@media (max-width: 768px) {
  .single-post .wp-block-post-content figure.wp-block-image.alignleft,
  .single-post .wp-block-post-content figure.wp-block-image.alignright,
  .page        .wp-block-post-content figure.wp-block-image.alignleft,
  .page        .wp-block-post-content figure.wp-block-image.alignright {
    float: none;
    max-width: 100%;
    margin: 1rem auto;
  }
}

/* --- Tiny visual confirm so you know CSS loaded --- */
.gww-css-test {
  margin-top: 1rem;
  font-size: 0.95rem;
  color: #2f6f2f;
  background: #e8f6e8;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
</style>

<p class="gww-css-test">✅ CSS is active: images should wrap and align with the text column on desktop, and stack on mobile.</p>