/**
 * Background Accents CSS
 * 
 * This file contains styles for the decorative background accent swirls
 * that can be applied to various sections of the site.
 */

/* Base class for all accent backgrounds */
.accent-background {
  position: relative;
  overflow: hidden;
}

/* Purple swirl accent - good for dark backgrounds */
.accent-background.purple-swirl::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: url('/wp-content/themes/wildapricot/assets/images/backgrounds/Swirl - Purple.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  z-index: 1;
  pointer-events: none; /* Makes it non-interactive */
}

/* Orange swirl accent - good for light backgrounds */
.accent-background.orange-swirl::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: url('/wp-content/themes/wildapricot/assets/images/backgrounds/Swirl - Orange.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

/* Cream swirl accent - good for dark backgrounds */
.accent-background.cream-swirl::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 40%;
  height: 100%;
  background-image: url('/wp-content/themes/wildapricot/assets/images/backgrounds/Swirl - Cream.svg');
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  z-index: 1;
  pointer-events: none;
}

/* Left-aligned variants */
.accent-background.purple-swirl.left::after,
.accent-background.orange-swirl.left::after,
.accent-background.cream-swirl.left::after {
  right: auto;
  left: 0;
  background-position: left center;
  transform: scaleX(-1); /* Flip horizontally */
}

/* Ensure content is above the background */
.accent-background > * {
  position: relative;
  z-index: 2;
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .accent-background.purple-swirl::after,
  .accent-background.orange-swirl::after,
  .accent-background.cream-swirl::after {
    width: 60%; /* Larger on smaller screens */
    opacity: 0.7; /* Slightly more transparent on mobile */
  }
}

@media (max-width: 576px) {
  .accent-background.purple-swirl::after,
  .accent-background.orange-swirl::after,
  .accent-background.cream-swirl::after {
    width: 80%; /* Even larger on very small screens */
    opacity: 0.5; /* More transparent on very small screens */
  }
}