/* ------------------------------------------------ */

/*Parent Container Centering (for Desktop)    */

/* This is the missing piece to center the H1/H2/H3 */

/* ------------------------------------------------ */

.image-heading-icon {
  /* This centers the 'inline-flex' heading element horizontally */
  text-align: center;
}

/* --- ORIGINAL CSS (Modified) --- */

/* Set the pseudo-element image properties */

.image-heading-icon h1::before,
.image-heading-icon h2::before,
.image-heading-icon h3::before {
  content: "";
  /* Changed from block to inline-block for better compatibility with text-align: center; if needed */
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url("https://www.littlehoneywoodburner.nz/wp-content/uploads/2025/10/bee-icon.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Keeping side margin for desktop spacing */
  margin-right: 10px;
  margin-bottom: 10px;
  /* Set to 0 to keep icon/text on one line */
}

/* Make the heading the flex container for desktop (side-by-side) */

.image-heading-icon h1,
.image-heading-icon h2,
.image-heading-icon h3 {
  /* Correct: The 'inline-flex' element is centered by the parent's text-align: center */
  display: inline-flex;
  align-items: center;
  /* Vertically aligns icon and text */
  /* Remove any default margin that might interfere with column centering */
  margin-left: 0;
  margin-right: 0;
}

/* ------------------------------------------------ */

/* NEW CSS (Mobile Stacking Overrides)              */

/* ------------------------------------------------ */

@media only screen and (max-width: 767px) {
  /* 1. Force the heading to take up full width and stack its contents */

  .image-heading-icon h1,
  .image-heading-icon h2,
  .image-heading-icon h3 {
    display: flex;
    /* Stack the icon above the text */
    flex-direction: column;
    /* Center the stacked content within the full-width heading */
    align-items: center;
    /* Ensure text is centered below the icon */
    text-align: center;
    margin-bottom: 20px !important;
  }

  /* 2. Adjust the Icon Pseudo-Element for Mobile Stacking */

  .image-heading-icon h1::before,
  .image-heading-icon h2::before,
  .image-heading-icon h3::before {
    /* This is now a flex item, so we use margin: auto to center it horizontally */
    margin: 0 auto 10px auto !important;
    /* Center icon, add 10px bottom spacing */
    /* display: block is now unnecessary because the parent's flex-direction: column handles the stacking */
  }
}