/* ==========================================================================
   Theme Color Classes
   ========================================================================== */

/* Background Colors - from ACF options */
.bg-transparent { background-color: transparent; }
.bg-white { background-color: var(--color-white); }
.bg-black { background-color: var(--color-black); }
.bg-red { background-color: var(--color-red); }
.bg-orange { background-color: var(--color-orange); }
.bg-blue { background-color: var(--color-blue); }
.bg-light-gray { background-color: var(--color-light-gray); }
.bg-gradient-blue-orange { background: var(--gradient-blue-orange); }
.bg-gradient-red-orange { background: var(--gradient-red-orange); }

/* Text Colors - from ACF options */
.text-black { color: var(--color-black); }
.text-white { color: var(--color-white); }
.text-red { color: var(--color-red); }
.text-orange { color: var(--color-orange); }
.text-blue { color: var(--color-blue); }

/* Panel with dark background - inherit colors */
.panel.bg-black,
.panel.bg-red,
.panel.bg-orange,
.panel.bg-blue,
.panel.bg-gradient-blue-orange,
.panel.bg-gradient-red-orange {
  color: var(--color-white);
}

.panel.bg-black a,
.panel.bg-red a,
.panel.bg-orange a,
.panel.bg-blue a,
.panel.bg-gradient-blue-orange a,
.panel.bg-gradient-red-orange a {
  color: inherit;
}

/* Panel with light background */
.panel.bg-white,
.panel.bg-light-gray,
.panel.bg-transparent {
  color: var(--color-black);
}

/* Explicit text color overrides (e.g. orange bg with black text) */
.panel.bg-orange.text-black,
.panel.bg-orange.text-black a {
  color: var(--color-black);
}

/* Button color overrides for dark backgrounds */
.panel.text-white .btn-primary {
  background-color: var(--color-white);
  color: var(--color-black);
  border-color: var(--color-white);
}

.panel.text-white .btn-primary:hover {
  background-color: transparent;
  color: var(--color-white);
}

.panel.text-white .btn-secondary,
.panel.text-white .btn-outline {
  background-color: transparent;
  color: var(--color-white);
  border-color: var(--color-white);
}

.panel.text-white .btn-secondary:hover,
.panel.text-white .btn-outline:hover {
  background-color: var(--color-white);
  color: var(--color-black);
}

.panel-hero .panel-content {
  position: relative;
  z-index: 2;
}

/* Background image handling */
.panel-has-bg-image {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Border color for inputs on dark backgrounds */
.panel.text-white input,
.panel.text-white textarea {
  border-color: var(--color-white);
  color: var(--color-white);
}

.panel.text-white input::placeholder,
.panel.text-white textarea::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

/* Blockquote styling */
.panel blockquote {
  font-size: 34px;
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 20px;
  padding: 0;
  border: none;
}

.panel blockquote p {
  font-size: inherit;
  line-height: inherit;
}

/* CTA link with arrow */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--font-size-lg);
  text-decoration: none;
  color: inherit;
  border: 2px solid currentColor;
  padding: 0.75rem 1.5rem;
  transition: var(--transition-base);
}

.cta-link:hover {
  background-color: currentColor;
}

.cta-link:hover .cta-text {
  color: var(--color-black);
}

.panel.text-white .cta-link:hover .cta-text {
  color: var(--color-white);
}

.cta-link .cta-arrow {
  display: inline-block;
  transition: transform var(--transition-fast);
}

.cta-link:hover .cta-arrow {
  transform: translateX(4px);
}