/**
 * Visibility Fixes for Renovation Pages
 * 
 * Ensures all text and buttons are visible in both light and dark modes
 * Fixes white-on-white and dark-on-dark issues
 * 
 * @package TwinsRealEstate
 * @version 2.0.0
 */

/* ==========================================================================
   Global Button Visibility Fixes
   ========================================================================== */

/* Ensure all buttons in renovation pages have proper contrast */
.renovations-page-wrapper .btn,
.renovation-section .btn {
  /* Force proper colors - override any conflicting styles */
  border-width: 2px;
  font-weight: var(--font-weight-semibold, 600);
}

/* Primary buttons - always visible */
.renovations-page-wrapper .btn-primary,
.renovation-section .btn-primary {
  background-color: var(--primary-color, #0c2340) !important;
  color: var(--white-color, #ffffff) !important;
  border-color: var(--primary-color, #0c2340) !important;
}

.renovations-page-wrapper .btn-primary:hover,
.renovation-section .btn-primary:hover {
  background-color: var(--primary-color-dark, #082034) !important;
  color: var(--white-color, #ffffff) !important;
  border-color: var(--primary-color-dark, #082034) !important;
}

/* Outline light buttons - for dark backgrounds */
.renovations-page-wrapper .btn-outline-light,
.renovation-section .btn-outline-light {
  background-color: transparent !important;
  color: var(--white-color, #ffffff) !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.renovations-page-wrapper .btn-outline-light:hover,
.renovation-section .btn-outline-light:hover {
  background-color: var(--white-color, #ffffff) !important;
  color: var(--primary-color, #0c2340) !important;
  border-color: var(--white-color, #ffffff) !important;
}

/* Outline secondary buttons */
.renovations-page-wrapper .btn-outline-secondary,
.renovation-section .btn-outline-secondary {
  background-color: transparent !important;
  color: var(--color-text-primary, #333333) !important;
  border-color: var(--color-border, #dee2e6) !important;
}

.renovations-page-wrapper .btn-outline-secondary:hover,
.renovation-section .btn-outline-secondary:hover {
  background-color: var(--color-background-secondary, #f8f9fa) !important;
  color: var(--color-text-primary, #333333) !important;
  border-color: var(--accent-color, #d4af37) !important;
}

[data-theme="dark"] .renovations-page-wrapper .btn-outline-secondary,
[data-theme="dark"] .renovation-section .btn-outline-secondary {
  color: var(--color-dark-text, #ffffff) !important;
  border-color: var(--color-dark-border, #2a2a2a) !important;
}

[data-theme="dark"] .renovations-page-wrapper .btn-outline-secondary:hover,
[data-theme="dark"] .renovation-section .btn-outline-secondary:hover {
  background-color: var(--color-dark-bg-lightest, #1a1a1a) !important;
  color: var(--color-dark-text, #ffffff) !important;
  border-color: var(--accent-color, #d4af37) !important;
}

/* ==========================================================================
   Text Visibility Fixes
   ========================================================================== */

/* Ensure all headings are visible */
.renovations-page-wrapper h1,
.renovations-page-wrapper h2,
.renovations-page-wrapper h3,
.renovations-page-wrapper h4,
.renovations-page-wrapper h5,
.renovations-page-wrapper h6 {
  color: var(--color-text-primary, #333333) !important;
}

[data-theme="dark"] .renovations-page-wrapper h1,
[data-theme="dark"] .renovations-page-wrapper h2,
[data-theme="dark"] .renovations-page-wrapper h3,
[data-theme="dark"] .renovations-page-wrapper h4,
[data-theme="dark"] .renovations-page-wrapper h5,
[data-theme="dark"] .renovations-page-wrapper h6 {
  color: var(--color-dark-text, #ffffff) !important;
}

/* Ensure all paragraphs and text are visible */
.renovations-page-wrapper p,
.renovations-page-wrapper span,
.renovations-page-wrapper div,
.renovations-page-wrapper li {
  color: var(--color-text-primary, #333333) !important;
}

[data-theme="dark"] .renovations-page-wrapper p,
[data-theme="dark"] .renovations-page-wrapper span,
[data-theme="dark"] .renovations-page-wrapper div,
[data-theme="dark"] .renovations-page-wrapper li {
  color: var(--color-dark-text, #ffffff) !important;
}

/* Muted text */
.renovations-page-wrapper .text-muted,
.renovations-page-wrapper [class*="muted"],
.renovations-page-wrapper small {
  color: var(--color-text-secondary, #666666) !important;
}

[data-theme="dark"] .renovations-page-wrapper .text-muted,
[data-theme="dark"] .renovations-page-wrapper [class*="muted"],
[data-theme="dark"] .renovations-page-wrapper small {
  color: var(--color-dark-text-secondary, #e0e0e0) !important;
}

/* ==========================================================================
   Card and Surface Visibility
   ========================================================================== */

.renovations-page-wrapper [class*="card"],
.renovations-page-wrapper [class*="item"] {
  background: var(--color-background, #ffffff) !important;
  color: var(--color-text-primary, #333333) !important;
  border-color: var(--color-border, #dee2e6) !important;
}

[data-theme="dark"] .renovations-page-wrapper [class*="card"],
[data-theme="dark"] .renovations-page-wrapper [class*="item"] {
  background: var(--color-dark-bg-lightest, #1a1a1a) !important;
  color: var(--color-dark-text, #ffffff) !important;
  border-color: var(--color-dark-border, #2a2a2a) !important;
}

/* ==========================================================================
   Enhanced Shadows for Better Depth
   ========================================================================== */

.renovations-page-wrapper [class*="card"]:hover,
.renovations-page-wrapper [class*="item"]:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.15)) !important;
}

[data-theme="dark"] .renovations-page-wrapper [class*="card"]:hover,
[data-theme="dark"] .renovations-page-wrapper [class*="item"]:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.7)) !important;
}

/* ==========================================================================
   Service Card Specific Fixes
   ========================================================================== */

.service-card,
.service-showcase-card {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.1)) !important;
}

.service-card:hover,
.service-showcase-card:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.15)) !important;
  transform: translateY(-4px);
}

[data-theme="dark"] .service-card,
[data-theme="dark"] .service-showcase-card {
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.4)) !important;
}

[data-theme="dark"] .service-card:hover,
[data-theme="dark"] .service-showcase-card:hover {
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.7)) !important;
}

/* ==========================================================================
   Form Element Visibility
   ========================================================================== */

.renovations-page-wrapper input,
.renovations-page-wrapper select,
.renovations-page-wrapper textarea,
.renovations-page-wrapper .form-control {
  background: var(--color-background, #ffffff) !important;
  color: var(--color-text-primary, #333333) !important;
  border-color: var(--color-border, #dee2e6) !important;
}

[data-theme="dark"] .renovations-page-wrapper input,
[data-theme="dark"] .renovations-page-wrapper select,
[data-theme="dark"] .renovations-page-wrapper textarea,
[data-theme="dark"] .renovations-page-wrapper .form-control {
  background: var(--color-dark-bg-lightest, #1a1a1a) !important;
  color: var(--color-dark-text, #ffffff) !important;
  border-color: var(--color-dark-border, #2a2a2a) !important;
}

.renovations-page-wrapper label {
  color: var(--color-text-primary, #333333) !important;
}

[data-theme="dark"] .renovations-page-wrapper label {
  color: var(--color-dark-text, #ffffff) !important;
}