/**
 * Theme Preservation CSS
 * Ensures Bootstrap implementation preserves Bowest Appliances brand identity
 * Addresses Requirements 6.1, 6.2, 6.3, 6.4, 6.5
 */

/* ===== BRAND COLOR PRESERVATION ===== */
/* Ensure primary brand color (#010096) is preserved across Bootstrap components */
:root {
  --bowest-primary: #010096;
  --bowest-secondary: #242424;
  --bowest-gray: #f6f6f6;
  --bowest-text: #555;
  --bowest-heading: #242424;
}

/* Override Bootstrap primary color with brand color */
.btn-primary,
.bg-primary,
.text-primary,
.border-primary {
  --bs-primary: var(--bowest-primary) !important;
}

.btn-primary {
  background-color: var(--bowest-primary) !important;
  border-color: var(--bowest-primary) !important;
  color: #ffffff !important;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
  background-color: #000075 !important;
  border-color: #000075 !important;
  color: #ffffff !important;
}

/* Preserve brand-specific button styles */
.btn-hero {
  background-color: var(--bowest-secondary) !important;
  border-color: var(--bowest-secondary) !important;
  color: #fff !important;
}

.btn-hero:hover,
.btn-hero:focus,
.btn-hero:active {
  background-color: var(--bowest-primary) !important;
  border-color: var(--bowest-primary) !important;
  color: #fff !important;
}

/* Preserve brand-specific background colors */
.common-bg,
.bg-gray {
  background-color: var(--bowest-gray) !important;
}

.bg-gradient {
  background: linear-gradient(135deg, #f6f6f6 0%, #e9e9e9 100%) !important;
}

/* ===== TYPOGRAPHY PRESERVATION ===== */
/* Maintain brand typography hierarchy */
body {
  font-family: "Rubik", sans-serif !important;
  color: var(--bowest-text) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--bowest-heading) !important;
  font-family: "Rubik", sans-serif !important;
}

/* Exception for stock-change-notice section */
.stock-change-notice h5 {
  color: var(--color-text-light, #ffffff) !important;
}

/* Preserve section title styling */
.section-title .title {
  color: var(--bowest-heading) !important;
  font-weight: 400 !important;
}

/* Preserve hero content typography */
.hero-slider-content h1,
.hero-slider-content h2,
.hero-slider-content h4 {
  font-weight: 400 !important;
}

.hero-slider-content h1,
.hero-slider-content h2 {
  color: var(--bowest-heading) !important;
}

.hero-slider-content h4 {
  color: var(--bowest-text) !important;
}

/* ===== LOGO AND BRANDING PRESERVATION ===== */
/* Ensure logo prominence across responsive changes */
.logo img,
.mobile-logo img {
  max-height: 60px !important;
  width: auto !important;
}

/* Maintain logo container alignment */
.logo {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

/* Preserve brand logo grid alignment */
.brand-item {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 80px !important;
}

.brand-logo {
  max-width: 120px !important;
  max-height: 60px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
}

/* ===== VISUAL HIERARCHY PRESERVATION ===== */
/* Maintain emphasis on key elements - specific overrides for blue background sections */

/* Override general heading color for specific sections with blue backgrounds */
.patricia-special .patricia-title {
  color: #ffffff !important; /* White text for blue background contrast */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3) !important;
}

.patricia-special .patricia-subtitle {
  color: #ffeb3b !important; /* Bright yellow for high contrast on blue background */
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

.scratch-dent-section .scratch-dent-quote {
  color: #ffffff !important; /* Ensure white text on dark background */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7) !important;
}

/* Preserve service section emphasis with high contrast */
.services-section .service-title a {
  color: #ffffff !important; /* White text for blue background */
  text-decoration: none !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3) !important;
}

.services-section .service-title a:hover {
  color: #ffeb3b !important; /* Bright yellow on hover */
}

/* Maintain store link styling */
.store-link {
  color: var(--bowest-heading) !important;
  font-weight: 500 !important;
  position: relative !important;
}

.store-link:hover {
  color: var(--bowest-primary) !important;
}

.store-link::after {
  content: "" !important;
  position: absolute !important;
  bottom: -7px !important;
  left: 0 !important;
  width: 100% !important;
  height: 2px !important;
  background-color: var(--bowest-primary) !important;
}

/* ===== NAVIGATION ACCESSIBILITY IMPROVEMENTS ===== */
/* Add proper ARIA attributes and roles */
.desktop-menu,
.mobile-menu {
  role: navigation !important;
}

/* ===== IMAGE OPTIMIZATION ===== */
/* Ensure all images have responsive classes */
img:not(.img-fluid):not(.img-responsive) {
  max-width: 100% !important;
  height: auto !important;
}

/* Add lazy loading support */
img[data-src] {
  opacity: 0 !important;
  transition: opacity 0.3s !important;
}

img[data-src].loaded {
  opacity: 1 !important;
}

/* ===== FORM ACCESSIBILITY ===== */
/* Improve form element accessibility */
input[type="email"]:not([aria-label]):not([id]) {
  aria-label: "Email address" !important;
}

input[type="search"]:not([aria-label]):not([id]) {
  aria-label: "Search" !important;
}

button:not([type]):not([aria-label]) {
  type: "button" !important;
}

/* ===== RESPONSIVE BEHAVIOR PRESERVATION ===== */
/* Maintain brand consistency across breakpoints */
@media (max-width: 991.98px) {
  .logo img,
  .mobile-logo img {
    max-height: 50px !important;
  }
  
  .brand-logo {
    max-width: 100px !important;
    max-height: 50px !important;
  }
}

@media (max-width: 767.98px) {
  .logo img,
  .mobile-logo img {
    max-height: 40px !important;
  }
  
  .brand-logo {
    max-width: 80px !important;
    max-height: 40px !important;
  }
  
  .section-title .title {
    font-size: 1.5rem !important;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
/* Consolidated transitions for better performance */
.btn-hero,
.btn-primary,
.btn-cart2,
.service-policy-item,
.service-box,
.brand-item {
  transition: all 0.3s ease !important;
}

.service-policy-item:hover,
.service-box:hover {
  transform: translateY(-2px) !important;
}

/* ===== THEME CONSISTENCY GUARDS ===== */
/* Prevent Bootstrap from overriding brand-specific styles */
.hero-slider-content:not(.slide-1):not(.slide-2):not(.slide-3) {
  color: var(--bowest-heading) !important;
}

.footer-wrapper {
  background-color: var(--bowest-gray) !important;
}

.footer-widget-title h5 {
  color: var(--bowest-heading) !important;
}

.footer-widget-body a {
  color: var(--bowest-text) !important;
}

.footer-widget-body a:hover {
  color: var(--bowest-primary) !important;
}

/* ===== ACCESSIBILITY ENHANCEMENTS ===== */
/* Ensure sufficient color contrast */
.text-muted {
  color: #666 !important;
}

/* Screen reader improvements */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* ===== BOOTSTRAP INTEGRATION SAFEGUARDS ===== */
/* Prevent Bootstrap utilities from conflicting with brand styles */
.bg-light:not(.footer-wrapper):not(.common-bg) {
  background-color: var(--bowest-gray) !important;
}

.text-primary {
  color: var(--bowest-primary) !important;
}

.border-primary {
  border-color: var(--bowest-primary) !important;
}

/* Maintain consistent spacing rhythm */
.py-4 {
  padding-top: 1.5rem !important;
  padding-bottom: 1.5rem !important;
}

@media (min-width: 768px) {
  .py-md-5 {
    padding-top: 3rem !important;
    padding-bottom: 3rem !important;
  }
}

/* ===== COMPONENT-SPECIFIC PRESERVATION ===== */
/* Header component preservation */
.header-area {
  background-color: #fff !important;
}

.main-header.sticky.is-sticky {
  background-color: #fff !important;
  box-shadow: 0 0 8px 1px rgba(0, 0, 0, 0.2) !important;
}

/* Navigation component preservation */
.main-menu ul li a {
  color: var(--bowest-heading) !important;
}

.main-menu ul li:hover > a,
.main-menu ul li.active > a {
  color: var(--bowest-primary) !important;
}

/* Footer component preservation */
.footer-bottom-area {
  border-top: 1px solid #ebebeb !important;
  padding: 20px 0 !important;
}

.copyright-text {
  text-align: center !important;
  color: var(--bowest-text) !important;
}

.copyright-text a {
  color: var(--bowest-primary) !important;
  text-decoration: none !important;
}

.copyright-text a:hover {
  text-decoration: underline !important;
}

/* ===== CRITICAL CONTRAST FIXES ===== */
/* Maximum specificity overrides for blue background sections */
section.patricia-special h2.patricia-title,
.patricia-special h2.patricia-title {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5) !important;
}

section.patricia-special h5.patricia-subtitle,
.patricia-special h5.patricia-subtitle {
  color: #ffeb3b !important;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7) !important;
}

section.scratch-dent-section h4.scratch-dent-quote,
.scratch-dent-section h4.scratch-dent-quote {
  color: #ffffff !important;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
}

section.services-section h3.service-title a,
.services-section h3.service-title a {
  color: #ffffff !important;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5) !important;
}

section.services-section h3.service-title a:hover,
.services-section h3.service-title a:hover {
  color: #ffeb3b !important;
}
/* ===== FORCE OVERRIDE FOR BLUE SECTIONS ===== */
/* Override any general heading rules for specific blue background sections */
.patricia-special * {
  color: inherit !important;
}

.patricia-special .patricia-title,
.patricia-special h2 {
  color: #ffffff !important;
}

.patricia-special .patricia-subtitle,
.patricia-special h5 {
  color: #ffeb3b !important;
}

.scratch-dent-section * {
  color: inherit !important;
}

.scratch-dent-section .scratch-dent-quote,
.scratch-dent-section h4 {
  color: #ffffff !important;
}

.services-section .service-title,
.services-section .service-title a,
.services-section h3,
.services-section h3 a {
  color: #ffffff !important;
}