/**
 * Button Component Styles
 * 
 * Theme-aware button styles for renovation pages
 * Ensures proper contrast in both light and dark modes
 * 
 * @package TwinsRealEstate
 * @version 2.0.0
 */

/* ==========================================================================
   Base Button Styles
   ========================================================================== */

.renovations-page-wrapper .btn,
.renovation-section .btn {
  padding: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
  border-radius: var(--radius-md, 0.5rem);
  font-weight: var(--font-weight-semibold, 600);
  font-size: var(--font-size-md, 1rem);
  transition: all var(--transition, 0.3s ease);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm, 0.5rem);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
  line-height: 1.5;
}

.renovations-page-wrapper .btn:focus,
.renovation-section .btn:focus {
  outline: 2px solid var(--accent-color, #d4af37);
  outline-offset: 2px;
}

/* ==========================================================================
   Primary Button
   ========================================================================== */

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

.renovations-page-wrapper .btn-primary:hover,
.renovation-section .btn-primary:hover {
  background: var(--primary-color-dark, #082034);
  border-color: var(--primary-color-dark, #082034);
  color: var(--white-color, #ffffff);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.15));
}

.renovations-page-wrapper .btn-primary:active,
.renovation-section .btn-primary:active {
  transform: translateY(0);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

[data-theme="dark"] .renovations-page-wrapper .btn-primary,
[data-theme="dark"] .renovation-section .btn-primary {
  background: var(--primary-color, #0c2340);
  color: var(--white-color, #ffffff);
  border-color: var(--primary-color, #0c2340);
}

[data-theme="dark"] .renovations-page-wrapper .btn-primary:hover,
[data-theme="dark"] .renovation-section .btn-primary:hover {
  background: var(--primary-color-light, #1c3a5f);
  border-color: var(--primary-color-light, #1c3a5f);
  color: var(--white-color, #ffffff);
}

/* ==========================================================================
   Outline Buttons
   ========================================================================== */

.renovations-page-wrapper .btn-outline-light,
.renovation-section .btn-outline-light {
  background: transparent;
  color: var(--white-color, #ffffff);
  border-color: var(--white-color, #ffffff);
}

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

[data-theme="dark"] .renovations-page-wrapper .btn-outline-light,
[data-theme="dark"] .renovation-section .btn-outline-light {
  background: transparent;
  color: var(--white-color, #ffffff);
  border-color: var(--white-color, #ffffff);
}

[data-theme="dark"] .renovations-page-wrapper .btn-outline-light:hover,
[data-theme="dark"] .renovation-section .btn-outline-light:hover {
  background: var(--white-color, #ffffff);
  color: var(--primary-color, #0c2340);
}

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

.renovations-page-wrapper .btn-outline-secondary:hover,
.renovation-section .btn-outline-secondary:hover {
  background: var(--color-background-secondary, #f8f9fa);
  border-color: var(--accent-color, #d4af37);
  color: var(--color-text-primary, #333333);
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.1));
}

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

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

/* ==========================================================================
   Button Sizes
   ========================================================================== */

.renovations-page-wrapper .btn-sm,
.renovation-section .btn-sm {
  padding: var(--spacing-sm, 0.5rem) var(--spacing-md, 1rem);
  font-size: var(--font-size-sm, 0.875rem);
}

.renovations-page-wrapper .btn-lg,
.renovation-section .btn-lg {
  padding: var(--spacing-lg, 1.5rem) var(--spacing-2xl, 2.5rem);
  font-size: var(--font-size-lg, 1.125rem);
}

/* ==========================================================================
   Button Block (Full Width)
   ========================================================================== */

.renovations-page-wrapper .btn-block,
.renovation-section .btn-block {
  width: 100%;
  display: flex;
}

/* ==========================================================================
   Button Icons
   ========================================================================== */

.renovations-page-wrapper .btn i,
.renovation-section .btn i {
  font-size: 1em;
  line-height: 1;
}

/* ==========================================================================
   Hero CTA Buttons
   ========================================================================== */

.hero-cta .btn {
  min-width: 180px;
  padding: var(--spacing-md, 1rem) var(--spacing-xl, 2rem);
  font-size: var(--font-size-md, 1rem);
  box-shadow: var(--shadow-md, 0 4px 6px rgba(0, 0, 0, 0.2));
}

.hero-cta .btn-primary {
  background: var(--primary-color, #0c2340);
  color: var(--white-color, #ffffff);
  border-color: var(--primary-color, #0c2340);
}

.hero-cta .btn-primary:hover {
  background: var(--primary-color-dark, #082034);
  border-color: var(--primary-color-dark, #082034);
  box-shadow: var(--shadow-lg, 0 10px 15px rgba(0, 0, 0, 0.3));
}

.hero-cta .btn-outline-light {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--white-color, #ffffff);
  border-color: rgba(255, 255, 255, 0.3);
}

.hero-cta .btn-outline-light:hover {
  background: var(--white-color, #ffffff);
  color: var(--primary-color, #0c2340);
  border-color: var(--white-color, #ffffff);
}

/* ==========================================================================
   Responsive Design
   ========================================================================== */

@media (max-width: 768px) {
  .renovations-page-wrapper .btn,
  .renovation-section .btn {
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
    font-size: var(--font-size-sm, 0.875rem);
  }
  
  .hero-cta .btn {
    min-width: 150px;
    padding: var(--spacing-sm, 0.5rem) var(--spacing-lg, 1.5rem);
  }
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .renovations-page-wrapper .btn,
  .renovation-section .btn {
    transition: none;
  }
  
  .renovations-page-wrapper .btn:hover,
  .renovation-section .btn:hover {
    transform: none;
  }
}