/* Text shadows for text-over-image elements
   Rule requested:
   - white text -> black shadow
   - black or blue text -> white shadow
   Notes:
   - site "blue" is .clr_gold / .clr_dark_gold (#0E4B6C)
   - scope only to overlays (hero + home banners) to avoid affecting normal text
*/

/* White text on images: add dark shadow */
.page_hero .container .clr_white,
.page_hero .container .clr_white a,
.acf_banner .banner > div .clr_white,
.acf_banner .banner > div .clr_white a {
  text-shadow:
    0 2px 10px rgba(0, 0, 0, 0.75),
    0 1px 2px rgba(0, 0, 0, 0.90);
}

/* Black/dark text and site-blue text on images: add light shadow */
.page_hero .container .clr_dark,
.page_hero .container .clr_dark a,
.page_hero .container .clr_black,
.page_hero .container .clr_black a,
.page_hero .container .clr_gold,
.page_hero .container .clr_gold a,
.page_hero .container .clr_dark_gold,
.page_hero .container .clr_dark_gold a,
.acf_banner .banner > div .clr_dark,
.acf_banner .banner > div .clr_dark a,
.acf_banner .banner > div .clr_black,
.acf_banner .banner > div .clr_black a,
.acf_banner .banner > div .clr_gold,
.acf_banner .banner > div .clr_gold a,
.acf_banner .banner > div .clr_dark_gold,
.acf_banner .banner > div .clr_dark_gold a {
  text-shadow:
    0 1px 1px rgba(221, 221, 221, 0.9);
}

/* Slightly stronger shadows on small screens (images are busier + text smaller) */
@media (max-width: 480px) {
  .page_hero .container .clr_white,
  .page_hero .container .clr_white a,
  .acf_banner .banner > div .clr_white,
  .acf_banner .banner > div .clr_white a {
    text-shadow:
      0 2px 12px rgba(0, 0, 0, 0.80),
      0 1px 2px rgba(0, 0, 0, 0.95);
  }

  .page_hero .container .clr_dark,
  .page_hero .container .clr_dark a,
  .page_hero .container .clr_black,
  .page_hero .container .clr_black a,
  .page_hero .container .clr_gold,
  .page_hero .container .clr_gold a,
  .page_hero .container .clr_dark_gold,
  .page_hero .container .clr_dark_gold a,
  .acf_banner .banner > div .clr_dark,
  .acf_banner .banner > div .clr_dark a,
  .acf_banner .banner > div .clr_black,
  .acf_banner .banner > div .clr_black a,
  .acf_banner .banner > div .clr_gold,
  .acf_banner .banner > div .clr_gold a,
  .acf_banner .banner > div .clr_dark_gold,
  .acf_banner .banner > div .clr_dark_gold a {
    text-shadow:
    0 1px 1px rgba(221, 221, 221, 0.9);
  }
}