/**
 * Theme Colors CSS
 * 
 * This file connects Bootstrap background color classes with ACF color variables.
 */

/* Primary background color - personify-purple */
.bg-primary {
  background-color: var(--primary-color, #411a50) !important;
}

/* Secondary background color - personify-orange */
.bg-secondary {
  background-color: var(--secondary-color, #ff7e0b) !important;
}

/* Success background color - green */
.bg-success {
  background-color: var(--cta-color, #8509B9) !important;
}

/* Info background color - blue */
.bg-info {
  background-color: #349eff !important;
}

/* Warning background color - yellow */
.bg-warning {
  background-color: #ffdc61 !important;
}

/* Danger background color - red */
.bg-danger {
  background-color: #ea4a4d !important;
}

/* Light background color - personify-cream */
.bg-light {
  background-color: var(--background-color, #fffcfa) !important;
}

/* Dark background color - personify-purple */
.bg-dark {
  background-color: var(--text-color, #411a50) !important;
}

/* White background color */
.bg-white {
  background-color: #ffffff !important;
}

/* Transparent background */
.bg-transparent {
  background-color: transparent !important;
}

/* Text colors for contrast - Direct children only */
.bg-primary > p,
.bg-primary > h1,
.bg-primary > h2,
.bg-primary > h3,
.bg-primary > h4,
.bg-primary > h5,
.bg-primary > h6,
.bg-primary > li,
.bg-primary > a:not(.btn-cta):not(.btn-trial),
.bg-primary > .section-title,
.bg-primary > .section-subtitle,
.bg-primary > .section-description {
  color: #ffffff;
}

.bg-secondary > p,
.bg-secondary > h1,
.bg-secondary > h2,
.bg-secondary > h3,
.bg-secondary > h4,
.bg-secondary > h5,
.bg-secondary > h6,
.bg-secondary > li,
.bg-secondary > a:not(.btn-cta):not(.btn-trial),
.bg-secondary > .section-title,
.bg-secondary > .section-subtitle,
.bg-secondary > .section-description {
  color: #ffffff;
}

.bg-success > p,
.bg-success > h1,
.bg-success > h2,
.bg-success > h3,
.bg-success > h4,
.bg-success > h5,
.bg-success > h6,
.bg-success > li,
.bg-success > a:not(.btn-cta):not(.btn-trial),
.bg-success > .section-title,
.bg-success > .section-subtitle,
.bg-success > .section-description {
  color: #ffffff;
}

.bg-danger > p,
.bg-danger > h1,
.bg-danger > h2,
.bg-danger > h3,
.bg-danger > h4,
.bg-danger > h5,
.bg-danger > h6,
.bg-danger > li,
.bg-danger > a:not(.btn-cta):not(.btn-trial),
.bg-danger > .section-title,
.bg-danger > .section-subtitle,
.bg-danger > .section-description {
  color: #ffffff;
}

.bg-dark > p,
.bg-dark > h1,
.bg-dark > h2,
.bg-dark > h3,
.bg-dark > h4,
.bg-dark > h5,
.bg-dark > h6,
.bg-dark > li,
.bg-dark > a:not(.btn-cta):not(.btn-trial),
.bg-dark > .section-title,
.bg-dark > .section-subtitle,
.bg-dark > .section-description {
  color: #ffffff;
}

.bg-info > p,
.bg-info > h1,
.bg-info > h2,
.bg-info > h3,
.bg-info > h4,
.bg-info > h5,
.bg-info > h6,
.bg-info > li,
.bg-info > a:not(.btn-cta):not(.btn-trial),
.bg-info > .section-title,
.bg-info > .section-subtitle,
.bg-info > .section-description {
  color: #333333;
}

.bg-warning > p,
.bg-warning > h1,
.bg-warning > h2,
.bg-warning > h3,
.bg-warning > h4,
.bg-warning > h5,
.bg-warning > h6,
.bg-warning > li,
.bg-warning > a:not(.btn-cta):not(.btn-trial),
.bg-warning > .section-title,
.bg-warning > .section-subtitle,
.bg-warning > .section-description {
  color: #333333;
}

.bg-light > p,
.bg-light > h1,
.bg-light > h2,
.bg-light > h3,
.bg-light > h4,
.bg-light > h5,
.bg-light > h6,
.bg-light > li,
.bg-light > a:not(.btn-cta):not(.btn-trial),
.bg-light > .section-title,
.bg-light > .section-subtitle,
.bg-light > .section-description {
  color: #333333;
}

.bg-white > p,
.bg-white > h1,
.bg-white > h2,
.bg-white > h3,
.bg-white > h4,
.bg-white > h5,
.bg-white > h6,
.bg-white > li,
.bg-white > a:not(.btn-cta):not(.btn-trial),
.bg-white > .section-title,
.bg-white > .section-subtitle,
.bg-white > .section-description {
  color: #333333;
}

.bg-transparent > p,
.bg-transparent > h1,
.bg-transparent > h2,
.bg-transparent > h3,
.bg-transparent > h4,
.bg-transparent > h5,
.bg-transparent > h6,
.bg-transparent > li,
.bg-transparent > a:not(.btn-cta):not(.btn-trial),
.bg-transparent > .section-title,
.bg-transparent > .section-subtitle,
.bg-transparent > .section-description {
  color: #333333;
}

/* Card component styles - override parent background text colors */
.card,
.feature-card,
.flexible-card,
.simple-card,
.testimonial-card,
.blog-card,
.icon-list-card,
.bg-white,
.bg-light,
.bg-warmth,
.bg-cream {
  color: var(--text-primary) !important;
}

.card p, .card li, .card a:not(.btn),
.feature-card p, .feature-card li, .feature-card a:not(.btn),
.flexible-card p, .flexible-card li, .flexible-card a:not(.btn),
.simple-card p, .simple-card li, .simple-card a:not(.btn),
.testimonial-card p, .testimonial-card li, .testimonial-card a:not(.btn),
.blog-card p, .blog-card li, .blog-card a:not(.btn),
.icon-list-card p, .icon-list-card li, .icon-list-card a:not(.btn) {
  color: var(--primary-color, #333333) !important;
}

/* Specific component overrides for highlighted text sections */
.highlight-text,
.highlight-section,
.blue-highlight {
  color: #349eff !important;
}

/* Button colors */
.btn-primary {
  background-color: var(--button-color, #411a50) !important;
  border-color: var(--button-color, #411a50) !important;
  color: var(--button-text-color, #ffffff) !important;
}

.btn-primary:hover, .btn-primary:focus {
  background-color: var(--button-hover-color, #341540) !important;
  border-color: var(--button-hover-color, #341540) !important;
  color: var(--button-hover-text-color, #ffffff) !important;
}

/* Secondary button */
.btn-secondary {
  background-color: var(--secondary-color, #ff7e0b) !important;
  border-color: var(--secondary-color, #ff7e0b) !important;
  color: #ffffff !important;
}

.btn-secondary:hover, .btn-secondary:focus {
  background-color: #e06500 !important;
  border-color: #e06500 !important;
  color: #ffffff !important;
}

/* Link colors */
a {
  color: var(--link-color, #411a50);
}

a:hover, a:focus {
  color: var(--link-hover-color, #ff7e0b);
}

/* Additional background colors */
.bg-warmth {
  background-color: #fff0e2 !important;
}

.bg-light-purple {
  background-color: #f6eaf5 !important;
}

.bg-violet {
  background-color: #d5b8e5 !important;
}

.bg-peach {
  background-color: #ffdcbd !important;
}

.bg-magenta {
  background-color: var(--cta-color, #8509B9) !important;
}

/* Orange to purple gradient background */
.orange-purple-gradient {
  background: linear-gradient(to bottom, var(--secondary-color) 0%, var(--secondary-color) 70%, var(--primary-color) 70%, var(--primary-color) 100%) !important;
  position: relative;
}

/* Orange to purple gradient background with full width */
.orange-purple-gradient.full-width-background::before {
  background: linear-gradient(to bottom, var(--secondary-color) 0%, var(--secondary-color) 70%, var(--primary-color) 70%, var(--primary-color) 100%) !important;
}

/* Full width utility classes */
.full-width {
  width: 100vw;
  position: relative;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
}

/* Full width background only - content remains in container */
.full-width-background {
  position: relative;
}

.full-width-background::before {
  content: "";
  position: absolute;
  width: 100vw;
  height: 100%;
  top: 0;
  left: 50%;
  right: 50%;
  margin-left: -50vw;
  margin-right: -50vw;
  z-index: -1;
  background: inherit;
}

/* Text color classes */
.text-purple {
  color: var(--primary-color, #411a50) !important;
}

.text-orange {
  color: var(--secondary-color, #ff7e0b) !important;
}

.text-magenta {
  color: var(--cta-color, #8509B9) !important;
}

/* CTA button */
.btn-cta {
  background-color: var(--cta-color, #8509B9) !important;
  border-color: var(--cta-color, #8509B9) !important;
  color: #ffffff !important;
}

.btn-cta:hover, .btn-cta:focus {
  background-color: #6c079a !important;
  border-color: #6c079a !important;
  color: #ffffff !important;
}