/* ============================================================
   IMAGE CONTROLS — EASY EDIT FILE

   Edit this file when an image looks slightly off-center.

   You do NOT need to edit HTML.
   You do NOT need to edit assets/css/styles.css.
   You do NOT need to regenerate images for small nudges.

   HOW TO MOVE AN IMAGE
   ------------------------------------------------------------
   Move right: increase --move-right
   Move left:  increase --move-left
   Move up:    increase --move-up
   Move down:  increase --move-down

   HOW TO RESIZE AN IMAGE
   ------------------------------------------------------------
   --image-size: 1;     normal size
   --image-size: 1.05;  5% bigger
   --image-size: .95;   5% smaller

   HOW TO TILT AN IMAGE
   ------------------------------------------------------------
   --tilt-clockwise: 1deg;
   --tilt-counterclockwise: 1deg;

   Keep tilt small. Usually between 0deg and 2deg.

   EXAMPLES
   ------------------------------------------------------------
   Move Community farther right:
   .mini-pillar.pillar-community img {
     --move-right: 18px;
   }

   Move Service up:
   .mini-pillar.pillar-service img {
     --move-up: 4px;
   }

   Shrink Accountability slightly:
   .mini-pillar.pillar-accountability img {
     --image-size: .96;
   }

   Move Future Shop down:
   .offer-card.offer-shop img {
     --move-down: 6px;
   }
   ============================================================ */


/* ============================================================
   DO NOT EDIT THIS BASE SECTION UNLESS NEEDED
   ============================================================ */

.mini-pillar img,
.offer-card img,
.path-icon-wrap img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;

  transform:
    translateX(calc(var(--move-right) - var(--move-left)))
    translateY(calc(var(--move-down) - var(--move-up)))
    scale(var(--image-size))
    rotate(calc(var(--tilt-clockwise) - var(--tilt-counterclockwise))) !important;
}


/* ============================================================
   SEVEN PILLARS ICONS

   Current note:
   Centered replacement crops are now installed for the Seven Pillars
   and Circle Path icons, so all icon nudges are reset to zero.
   ============================================================ */

/* Seven Pillars: Acceptance */
.mini-pillar.pillar-acceptance img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Growth */
.mini-pillar.pillar-growth img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Honesty */
.mini-pillar.pillar-honesty img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Compassion */
.mini-pillar.pillar-compassion img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Community */
.mini-pillar.pillar-community img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Accountability */
.mini-pillar.pillar-accountability img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Seven Pillars: Service */
.mini-pillar.pillar-service img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}


/* ============================================================
   WHAT WE OFFER ICONS
   ============================================================ */

/* What We Offer: Beliefs */
.offer-card.offer-beliefs img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Practices */
.offer-card.offer-practices img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Circles */
.offer-card.offer-circles img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Living Library */
.offer-card.offer-living-library img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Rites */
.offer-card.offer-rites img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Support */
.offer-card.offer-support img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* What We Offer: Future Shop */
.offer-card.offer-shop img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}


/* ============================================================
   CIRCLE PATH ICONS
   ============================================================ */

/* Circle Path: Private Practice */
.path-icon-wrap.path-private-practice img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Circle Path: Interest Group */
.path-icon-wrap.path-interest-group img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Circle Path: Provisional Circle */
.path-icon-wrap.path-provisional-circle img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}

/* Circle Path: Reviewed Circle */
.path-icon-wrap.path-reviewed-circle img {
  --move-right: 0px;
  --move-left: 0px;
  --move-up: 0px;
  --move-down: 0px;
  --image-size: 1;
  --tilt-clockwise: 0deg;
  --tilt-counterclockwise: 0deg;
}


/* ============================================================
   MOBILE SAFETY

   Most icon nudges can stay on mobile, but if a nudge causes
   crowding on a phone, add that icon here and reset it.
   ============================================================ */

@media (max-width: 560px) {
  /*
  Example reset:
  .mini-pillar.pillar-community img {
    --move-right: 0px;
    --move-left: 0px;
    --move-up: 0px;
    --move-down: 0px;
    --image-size: 1;
  }
  */
}


/* ============================================================
   FEATURE ILLUSTRATIONS

   These are larger rectangular images.
   For these, use:
   --move-picture-right
   --move-picture-left
   --move-picture-up
   --move-picture-down
   --picture-size

   The movement happens inside the image frame.
   ============================================================ */

.feature-illustration img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;

  transform:
    translateX(calc(var(--move-picture-right) - var(--move-picture-left)))
    translateY(calc(var(--move-picture-down) - var(--move-picture-up)))
    scale(var(--picture-size)) !important;
}

/* Feature Illustration: Circles are local hearts */
.feature-illustration.feature-circles-local-hearts img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;
}


/* ============================================================
   SUPPORT + FUTURE SHOP ILLUSTRATIONS

   These use the same simple picture controls:
   --move-picture-right
   --move-picture-left
   --move-picture-up
   --move-picture-down
   --picture-size
   ============================================================ */

.support-shop-art img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;

  transform:
    translateX(calc(var(--move-picture-right) - var(--move-picture-left)))
    translateY(calc(var(--move-picture-down) - var(--move-picture-up)))
    scale(var(--picture-size)) !important;
}

/* Support + Future Shop: Support plant bowl */
.support-shop-art.support-plant-bowl img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;
}

/* Support + Future Shop: Future shop materials */
.support-shop-art.future-shop-materials img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;
}


/* ============================================================
   STAY CONNECTED / FOOTER BOTANICAL IMAGE

   Use:
   --move-picture-right
   --move-picture-left
   --move-picture-up
   --move-picture-down
   --picture-size
   ============================================================ */

.stay-connected-ornament img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;

  transform:
    translateX(calc(var(--move-picture-right) - var(--move-picture-left)))
    translateY(calc(var(--move-picture-down) - var(--move-picture-up)))
    scale(var(--picture-size)) !important;
}

/* Stay Connected: Footer botanical accent */
.stay-connected-ornament img {
  --move-picture-right: 0px;
  --move-picture-left: 0px;
  --move-picture-up: 0px;
  --move-picture-down: 0px;
  --picture-size: 1;
}


/* ============================================================
   STAY CONNECTED BACKGROUND NOTE

   The botanical art in the Stay Connected band is now used as a
   CSS background, not as a separate image box.

   To adjust it, edit this line in assets/css/styles.css:

   .stay-connected-band.stay-connected-background {
     background-position: center, left center, center;
     background-size: cover, min(430px, 46%) auto, cover;
   }

   The second background layer is the botanical image.
   ============================================================ */


/* ============================================================
   v16 STAY CONNECTED BACKGROUND NOTE

   Stay Connected is now full content-width and centered.
   The botanical art is a CSS background behind the full green band.

   To adjust it, edit this section in assets/css/styles.css:

   v16 homepage bottom flow fix

   The second background layer is:
   url("../img/footer-botanical-accent.png")
   ============================================================ */