/**
 * UX/UI Improvements for BeSustainable.io
 * Date: December 24, 2025 - FIXED VERSION
 * 
 * CRITICAL: This version fixes the contrast/visibility issues
 * from the previous version.
 * 
 * To ROLLBACK: Simply remove the link to this file from HTML pages.
 */

/* ============================================
   HIDE: Contact Info Modal
   Not appropriate for consulting firm
   ============================================ */

#container-widget-1590498240637 {
  display: none !important;
}

/* ============================================
   PRIORITY 1: Unified Brand Color System
   Replace orange with modern green - BUTTONS ONLY
   ============================================ */

/* Override any orange color definitions */
:root {
  --color-primary: rgb(16, 185, 129) !important;
}

/* Only change the PRIMARY COLOR on specific elements */
/* DO NOT use :root override as it breaks other things */

/* Navigation hover states - green instead of orange */
#header-widget-1531565329804 nav > ul > li:hover a.website-nav-link,
#header-widget-1531565329804 nav > ul > li.active a.website-nav-link {
  color: rgb(16, 185, 129) !important;
}

#header-widget-1531565329804 .with-border li:hover:before,
#header-widget-1531565329804 .with-border li.active:before,
#header-widget-1531565329804 .border-below li:hover a.website-nav-link:after, 
#header-widget-1531565329804 .border-below li.active a.website-nav-link:after {
  background: rgb(16, 185, 129) !important;
}

/* Override ALL orange primary colors */
.color-primary,
span.color-primary,
.text-widget-content .color-primary {
  color: rgb(16, 185, 129) !important;
}

.bg-color-primary {
  background-color: rgb(16, 185, 129) !important;
}

.border-color-primary {
  border-color: rgb(16, 185, 129) !important;
}

/* ============================================
   PRIORITY 2: Credibility/Trust Section
   ============================================ */

.trust-bar {
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  border-top: 2px solid #10b981;
  border-bottom: 2px solid #10b981;
  padding: 50px 20px;
  margin: 0;
}

.trust-bar .container {
  max-width: 1200px;
  margin: 0 auto;
}

.trust-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 40px;
  margin-bottom: 25px;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 32px;
  font-weight: 700;
  color: #059669;
  margin-bottom: 8px;
  font-family: 'Lato', sans-serif;
  line-height: 1.2;
}

.stat-label {
  font-size: 13px;
  color: #374151;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.trust-subtitle {
  text-align: center;
  font-size: 15px;
  color: #1f2937;
  font-weight: 600;
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid rgba(16, 185, 129, 0.3);
}

@media (max-width: 768px) {
  .trust-bar {
    padding: 35px 15px;
  }
  
  .trust-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 25px;
  }
  
  .stat-number {
    font-size: 24px;
  }
  
  .stat-label {
    font-size: 11px;
  }
  
  .trust-subtitle {
    font-size: 13px;
  }
}

/* ============================================
   PRIORITY 3: Button Improvements
   Make buttons green instead of orange
   ============================================ */

/* Primary CTA Buttons - Change orange to green */
.theme-button.bg-color-primary,
a.theme-button.bg-color-primary {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  transition: all 0.3s ease;
}

.theme-button.bg-color-primary:hover,
a.theme-button.bg-color-primary:hover {
  background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(16, 185, 129, 0.4);
}

/* Override inline button hover effects with green */
.hvr-sweep-to-right:before {
  background: #10b981 !important;
}

.hvr-sweep-to-right:hover,
.hvr-sweep-to-right:focus,
.hvr-sweep-to-right:active {
  color: #ffffff !important;
}

/* Specific widget overrides for orange buttons */
#header-widget-1533304111444 .hvr-sweep-to-right:before,
#button-widget-1590498226206 .hvr-sweep-to-right:before {
  background: #10b981 !important;
  border-color: #10b981 !important;
}

/* Icon color changes - orange to green */
.icon-section-icon.color-primary,
i.color-primary {
  color: #10b981 !important;
}

.icon.border-color-primary {
  border-color: #10b981 !important;
}

/* Section headings that use primary color */
span.color-primary,
.text-widget-content .color-primary {
  color: #10b981 !important;
}

/* ============================================
   PRIORITY 4: Form Styling Improvements
   ============================================ */

/* Form inputs - subtle improvements */
[data-role="form"] input[type="text"],
[data-role="form"] input[type="email"],
[data-role="form"] input[type="tel"],
[data-role="form"] textarea {
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

[data-role="form"] input[type="text"]:focus,
[data-role="form"] input[type="email"]:focus,
[data-role="form"] input[type="tel"]:focus,
[data-role="form"] textarea:focus {
  border-color: #10b981 !important;
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Submit button in forms */
[data-role="form"] [data-role="submit"],
[data-role="form"] .theme-button {
  background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
  border-color: #10b981 !important;
}

/* ============================================
   PRIORITY 5: Footer Link Colors
   Make footer links use green for hover
   ============================================ */

/* Footer section - only affect link hover colors */
#container-widget-1593894869633 a:hover,
.grid-row:last-of-type a:hover {
  color: #10b981 !important;
}

/* ============================================
   ADDITIONAL POLISH - SAFE CHANGES ONLY
   ============================================ */

/* Smooth scrolling */
html {
  scroll-behavior: smooth;
}

/* Better focus indicators */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible {
  outline: 2px solid #10b981;
  outline-offset: 2px;
}

/* Selection color */
::selection {
  background-color: rgba(16, 185, 129, 0.2);
  color: inherit;
}

::-moz-selection {
  background-color: rgba(16, 185, 129, 0.2);
  color: inherit;
}

/* ============================================
   END OF UX IMPROVEMENTS
   
   REMOVED FROM PREVIOUS VERSION:
   - Typography scale changes (broke existing layouts)
   - Section separator backgrounds (caused contrast issues)
   - Hero overlay changes (made text invisible)
   - Body text color changes (washed out text)
   - Footer background changes (unnecessary)
   ============================================ */