/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/* Subtle background image with white overlay */
.bg-subtle-image {
  position: relative;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}

.bg-subtle-image::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(199, 217, 202, 0.5);
  pointer-events: none;
  z-index: -1;
}

/* Make backgrounds slightly translucent to show the background */
.bg-subtle-image .bg-white {
  background-color: rgba(255, 255, 255, 0.4) !important;
}

.bg-subtle-image .bg-gray-50 {
  background-color: rgba(249, 250, 251, 0.4) !important;
}

.bg-subtle-image .bg-gray-100 {
  background-color: rgba(243, 244, 246, 0.6) !important;
}

.bg-subtle-image .bg-red-50 {
  background-color: rgba(254, 242, 242, 0.6) !important;
}

.bg-subtle-image .bg-orange-50 {
  background-color: rgba(255, 247, 237, 0.6) !important;
}

.bg-subtle-image .bg-yellow-50 {
  background-color: rgba(254, 252, 232, 0.6) !important;
}

.bg-subtle-image .bg-blue-50 {
  background-color: rgba(239, 246, 255, 0.6) !important;
}

/* Override blue/indigo buttons to match green navigation theme */
.bg-subtle-image .bg-indigo-600 {
  background-color: rgb(22, 101, 52) !important; /* green-800 */
}

.bg-subtle-image .bg-indigo-600:hover,
.bg-subtle-image .hover\:bg-indigo-500:hover {
  background-color: rgb(21, 128, 61) !important; /* green-700 */
}

.bg-subtle-image .bg-blue-600 {
  background-color: rgb(22, 101, 52) !important; /* green-800 */
}

.bg-subtle-image .bg-blue-600:hover,
.bg-subtle-image .hover\:bg-blue-700:hover {
  background-color: rgb(21, 128, 61) !important; /* green-700 */
}