/**
 * All Sections Combined Styles
 * Comprehensive CSS for all Homerix theme sections
 * Tailwind-Compatible CSS with CSS Variables Integration
 *
 * @package Homerix_Pro
 * @since 1.0.0
 */

/* =============================================================================
   TABLE OF CONTENTS
   ============================================================================= */
/*
   1. HERO SLIDER SECTION
   2. SERVICES SECTION
   3. WHY US SECTION
   4. TECHNICIANS SECTION
   5. TESTIMONIALS SECTION
   6. CTA SECTION
   7. FOOTER SECTION
   8. SHARED ANIMATIONS
   9. RESPONSIVE DESIGN
   10. ACCESSIBILITY ENHANCEMENTS
   11. PRINT STYLES
*/

/* =============================================================================
   1. HERO SLIDER SECTION
   ============================================================================= */

/* Hero Slider Container */
.hero-slider {
  position: relative;
  overflow: hidden;
}

.homerix-hero-swiper {
  width: 100%;
  height: 92vh;
  min-height: 600px;
}

.homerix-hero-swiper .swiper-slide {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-slide-content {
  width: 100%;
  height: 100%;
  position: relative;
}

/* Background Media Styles */
.hero-slide-content video,
.hero-slide-content .bg-cover {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.hero-slide-content .bg-black {
  z-index: 2;
}

.hero-slide-content .container {
  z-index: 10;
  position: relative;
}

/* Swiper Navigation Buttons */
.homerix-hero-swiper .swiper-button-next,
.homerix-hero-swiper .swiper-button-prev {
  color: var(--homerix-primary-color);
  width: 50px;
  height: 50px;
  border-radius: 50%;
  transition: all 0.3s ease;
}

.homerix-hero-swiper .swiper-button-next:hover,
.homerix-hero-swiper .swiper-button-prev:hover {
  transform: scale(1.1);
}

.homerix-hero-swiper .swiper-button-next::after,
.homerix-hero-swiper .swiper-button-prev::after {
  font-size: 20px;
  font-weight: bold;
}

/* Hero Search Form Styles */
.hero-slide-content .search-input {
  background: var(--homerix-base-color, #ffffff);
  color: var(--homerix-text-color, #000000);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.hero-slide-content .search-input:focus {
  background: var(--homerix-base-color, #ffffff);
  border-color: var(--homerix-primary-color, #2563EB);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.hero-slide-content .search-input::placeholder {
  color: #666;
}

.hero-slide-content .search-submit {
  background: var(--homerix-primary-color, #2563EB);
  color: white;
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 2px solid transparent;
}

.hero-slide-content .search-submit:hover {
  background: var(--homerix-base-color);
  transform: scale(1.05);
  color: var(--homerix-primary-color);
  border: 2px solid var(--homerix-primary-color);
}

.hero-slide-content .search-submit i {
  font-size: 18px;
}

/* Swiper Pagination */
.homerix-hero-swiper .swiper-pagination {
  bottom: 30px;
}

.homerix-hero-swiper .swiper-pagination-bullet {
  width: 12px;
  height: 12px;
  background: var(--homerix-base-color);
  opacity: 1;
  transition: all 0.3s ease;
}

.homerix-hero-swiper .swiper-pagination-bullet-active {
  background: var(--homerix-primary-color);
  transform: scale(1.2);
}

/* Video Background Optimizations */
.hero-slide-content video {
  pointer-events: none;
}

/* Ensure proper stacking */
.hero-slider .swiper-wrapper,
.hero-slider .swiper-slide {
  z-index: 1;
}

.hero-slider .swiper-pagination,
.hero-slider .swiper-button-next,
.hero-slider .swiper-button-prev {
  z-index: 20;
}

/* Loading State */
.homerix-hero-swiper.swiper-loading {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.homerix-hero-swiper.swiper-loaded {
  opacity: 1;
}

/* Pause/Play Button for Videos */
.video-controls {
  position: absolute;
  bottom: 80px;
  right: 30px;
  z-index: 15;
}

.video-pause-btn {
  background: rgba(0, 0, 0, 0.5);
  color: white;
  border: none;
  padding: 10px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease;
}

.video-pause-btn:hover {
  background: rgba(0, 0, 0, 0.7);
  transform: scale(1.1);
}

/* =============================================================================
   2. SERVICES SECTION
   ============================================================================= */

.service-card {
  background: var(--homerix-base-color);
}

.service-card .service-icon-container {
  background: var(--homerix-primary-light);
}

.service-text h3 {
  color: var(--homerix-primary-color);
}

.service-card .service-icon-container .service-icon {
  color: var(--homerix-primary-color, #2563EB);
}

/* Link Styling */
.service-card .link-color {
  color: var(--homerix-link-color, #2563EB);
  transition: color 0.3s ease;
}

.service-card .link-color:hover {
  color: var(--homerix-link-hover-color, #1d4ed8);
}

/* Button Styling */
.service-btn {
  background: var(--homerix-primary-color, #2563EB);
  color: white;
  border: 2px solid var(--homerix-primary-color, #2563EB);
}

.service-btn:hover {
  background: transparent;
  color: var(--homerix-primary-color, #2563EB);
}

/* =============================================================================
   3. WHY US SECTION
   ============================================================================= */

/* Section Title Styling */
.homerix-whyus .whyus-title {
  color: var(--homerix-heading-color, #111827);
}

/* Section Subtitle Styling */
.homerix-whyus .whyus-subtitle {
  color: var(--homerix-text-color, #1f2937);
}

/* Feature Card Styling */
.homerix-whyus .feature-card {
  background: var(--homerix-base-color, #ffffff);
  transition: all 0.3s ease;
}

.homerix-whyus .feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0px 1px 8px 1px var(--homerix-primary-medium);
}

/* Feature Icon Container */
.homerix-whyus .feature-icon-container {
  transition: all 0.3s ease;
}

.homerix-whyus .feature-card:hover .feature-icon-container {
  transform: scale(1.1);
}

/* Feature Title Styling */
.homerix-whyus .feature-title {
  color: var(--homerix-primary-color, #111827);
}

/* Feature Description Styling */
.homerix-whyus .feature-description {
  color: var(--homerix-text-color, #6b7280);
}

/* Ensure consistent card heights in grid layouts */
.homerix-whyus .grid>.feature-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.homerix-whyus .feature-card .feature-description {
  flex-grow: 1;
}

/* =============================================================================
   4. TECHNICIANS SECTION
   ============================================================================= */

/* Ensure consistent card heights in grid layouts */
.homerix-technicians .grid>.technician-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}

.homerix-technicians .technician-card .p-6 {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.homerix-technicians .technician-card .flex.justify-between {
  margin-top: auto;
}

/* Technician Image Styling */
.homerix-technicians .technician-card img {
  transition: transform 0.3s ease;
}

.homerix-technicians .technician-card:hover img {
  transform: scale(1.05);
}

/* Image Placeholder Styling */
.homerix-technicians .technician-image-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

/* Rating Badge Positioning */
.homerix-technicians .rating-badge {
  backdrop-filter: blur(4px);
  background: rgba(251, 191, 36, 0.9);
}

/* View All Button Styling */
.homerix-technicians .view-all-btn {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.homerix-technicians .view-all-btn:before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.homerix-technicians .view-all-btn:hover:before {
  left: 100%;
}

/* =============================================================================
   5. TESTIMONIALS SECTION
   ============================================================================= */

/* Section Title Styling */
.homerix-testimonials .testimonials-title {
  color: var(--homerix-heading-color, #111827);
}

/* Section Subtitle Styling */
.homerix-testimonials .testimonials-subtitle {
  color: var(--homerix-text-color, #6b7280);
}

/* Testimonial Item Styling */
.homerix-testimonials .testimonial-item {
  background: var(--homerix-base-color);
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px var(--homerix-primary-color);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.homerix-testimonials .testimonial-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--homerix-dark-color, #2563eb), var(--homerix-primary-color, #1d4ed8));
}

.homerix-testimonials .testimonial-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px var(--homerix-primary-medium);
}

/* Testimonial Rating Styling */
.homerix-testimonials .testimonial-rating {
  display: flex;
  gap: 0.25rem;
}

.homerix-testimonials .testimonial-rating .fas.fa-star {
  font-size: 1rem;
}

/* Testimonial Text Styling */
.homerix-testimonials .testimonial-text {
  color: var(--homerix-text-color, #4b5563);
  font-style: italic;
  line-height: 1.6;
  position: relative;
}

/* .homerix-testimonials .testimonial-text::before {
  content: '"';
  font-size: 3rem;
  color: var(--homerix-primary-color, #2563eb);
  position: absolute;
  top: -1rem;
  left: -0.5rem;
  opacity: 0.3;
  font-family: serif;
} */

/* Testimonial Author Styling */
.homerix-testimonials .testimonial-author {
  border-top: 1px solid #f3f4f6;
  padding-top: 1rem;
  margin-top: 1rem;
}

.homerix-testimonials .testimonial-avatar {
  flex-shrink: 0;
  border: 2px solid var(--homerix-primary-color, #2563eb);
}

.homerix-testimonials .testimonial-name {
  color: var(--homerix-heading-color, #111827);
  font-weight: 600;
}

.homerix-testimonials .testimonial-location {
  color: var(--homerix-text-color, #6b7280);
  font-size: 0.875rem;
}

/* Dark Mode Support */
.homerix-testimonials.bg-gray-800 .testimonial-item {
  background: #374151;
  color: white;
}

.homerix-testimonials.bg-gray-800 .testimonial-text {
  color: #d1d5db;
}

.homerix-testimonials.bg-gray-800 .testimonial-name {
  color: white;
}

.homerix-testimonials.bg-gray-800 .testimonial-location {
  color: #9ca3af;
}

.homerix-testimonials.bg-gray-800 .testimonial-author {
  border-top-color: #4b5563;
}

.homerix-testimonials.bg-blue-600 .testimonial-item {
  background: rgba(255, 255, 255, 0.95);
}

/* =============================================================================
   6. CTA SECTION
   ============================================================================= */

/* CTA Title Styling */
.homerix-cta .cta-title {
  color: inherit;
  /* Inherits from section color */
}

/* CTA Description Styling */
.homerix-cta .cta-description {
  color: inherit;
  /* Inherits from section color */
  opacity: 0.9;
}

/* CTA Button Styling */
.homerix-cta .cta-button {
  background: rgba(255, 255, 255, 0.95);
  color: var(--homerix-primary-color, #2563eb);
  border: 2px solid transparent;
  transition: all 0.3s ease;
}

.homerix-cta .cta-button:hover {
  background: rgba(255, 255, 255, 1);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.homerix-cta .cta-button:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.3);
}

/* =============================================================================
   7. FOOTER SECTION
   ============================================================================= */

/* Footer Base Styles */
footer {
  position: relative;
  z-index: 10;
}

/* Footer Background Classes */
.homerix-footer {
  background: var(--homerix-dark-color);
  color: #ffffff;
}

/* Dynamic Background Styles */
footer.bg-gray-50 {
  background: #f9fafb;
  color: #1f2937;
}

footer.homerix-bg-primary {
  background: var(--homerix-primary-color);
  color: white;
}

footer.bg-gray-800 {
  background: #1f2937;
  color: white;
}

/* Footer Content Sections */
.footer-company-info,
.footer-quick-links,
.footer-services,
.footer-contact-info {
  transition: opacity 0.3s ease;
}

/* Footer Widget Titles */
.homerix-footer .widget-title,
.homerix-footer h1,
.homerix-footer h2,
.homerix-footer h3,
.homerix-footer h4,
.homerix-footer h5,
.homerix-footer h6 {
  color: #ffffff;
}

/* Footer Widget Text */
.homerix-footer .widget,
.homerix-footer p,
.homerix-footer li {
  color: rgba(255, 255, 255, 0.9);
}

/* Footer Widget Links */
.homerix-footer .widget a:not(.footer-social-link) {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.3s ease;
}

.homerix-footer .widget a:not(.footer-social-link):hover {
  color: var(--homerix-primary-color);
}

/* Social Links Styling */
.footer-social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  transition: all 0.3s ease;
  background: var(--homerix-primary-color);
  color: var(--homerix-base-color, #ffffff);
}

.footer-social-links a:hover {
  background: var(--homerix-base-color);
  color: var(--homerix-primary-color);
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.footer-social-links a i {
  color: inherit;
}

/* Footer Navigation Links */
.footer-quick-links ul,
.footer-services ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-quick-links li,
.footer-services li {
  margin-bottom: 0.5rem;
}

.footer-quick-links a,
.footer-services a {
  display: inline-block;
  padding: 0.25rem 0;
  transition: all 0.3s ease;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  color: rgba(255, 255, 255, 0.8);
}

.footer-quick-links a:hover,
.footer-services a:hover {
  padding-left: 0.5rem;
  color: var(--homerix-primary-color);
}

/* Contact Info Icons */
.footer-contact-info i {
  width: 1.25rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.8);
}

/* Copyright Section */
.copyright-text {
  font-weight: 500;
}

.homerix-footer .footer-copyright,
.homerix-footer .footer-bottom {
  color: rgba(255, 255, 255, 0.8);
}

.homerix-footer .footer-bottom {
  border-color: rgba(255, 255, 255, 0.2);
}

/* Go to Top Button */
#go-to-top {
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: var(--homerix-primary-color);
  color: var(--homerix-base-color);
}

#go-to-top:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2);
  background: var(--homerix-base-color);
  border: 2px solid var(--homerix-primary-color);
  color: var(--homerix-primary-color);
}

/* Dynamic Grid Layout Support */
.footer-grid-1 {
  grid-template-columns: 1fr;
  text-align: center;
}

.footer-grid-2,
.footer-grid-3,
.footer-grid-4 {
  grid-template-columns: 1fr;
}

/* Light Theme Adjustments */
footer.homerix-bg-light {
  color: #1f2937;
}

footer.homerix-bg-light .footer-social-links a {
  background: var(--homerix-primary-color);
  color: var(--homerix-base-color, #ffffff);
}

footer.homerix-bg-light .footer-social-links a:hover {
  background: var(--homerix-dark-color);
  color: var(--homerix-base-color);
}

.footer-social-icons {
  margin-top: 20px;
}

/* =============================================================================
   8. SHARED ANIMATIONS
   ============================================================================= */

/* Fade In Up Animation */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Prevent animations from running before page is fully loaded */
.animate-fade-in {
  opacity: 0;
  transform: translateY(30px);
}

/* Slide Animations for Hero - Only run when page is loaded and slide is active */
body.page-loaded .swiper-slide-active .animate-fade-in {
  animation: fadeInUp 1s ease-out forwards;
}

body.page-loaded .swiper-slide-active .animate-fade-in.delay-100 {
  animation-delay: 0.2s;
}

body.page-loaded .swiper-slide-active .animate-fade-in.delay-200 {
  animation-delay: 0.4s;
}

body.page-loaded .swiper-slide-active .animate-fade-in.delay-300 {
  animation-delay: 0.6s;
}

/* Staggered animations for feature cards */
.homerix-whyus .feature-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.homerix-whyus .feature-card:nth-child(1) {
  animation-delay: 0.1s;
}

.homerix-whyus .feature-card:nth-child(2) {
  animation-delay: 0.2s;
}

.homerix-whyus .feature-card:nth-child(3) {
  animation-delay: 0.3s;
}

.homerix-whyus .feature-card:nth-child(4) {
  animation-delay: 0.4s;
}

.homerix-whyus .feature-card:nth-child(5) {
  animation-delay: 0.5s;
}

.homerix-whyus .feature-card:nth-child(6) {
  animation-delay: 0.6s;
}

/* Staggered animations for technician cards */
.homerix-technicians .technician-card {
  animation: fadeInUp 0.6s ease-out;
  animation-fill-mode: both;
}

.homerix-technicians .technician-card.delay-100 {
  animation-delay: 0.1s;
}

.homerix-technicians .technician-card.delay-200 {
  animation-delay: 0.2s;
}

.homerix-technicians .technician-card.delay-300 {
  animation-delay: 0.3s;
}

.homerix-technicians .technician-card.delay-400 {
  animation-delay: 0.4s;
}

.homerix-technicians .technician-card.delay-500 {
  animation-delay: 0.5s;
}

.homerix-technicians .technician-card.delay-600 {
  animation-delay: 0.6s;
}

/* Footer animations */
.footer-company-info,
.footer-quick-links,
.footer-services,
.footer-contact-info {
  animation: fadeInUp 0.6s ease-out;
}

.footer-quick-links {
  animation-delay: 0.1s;
}

.footer-services {
  animation-delay: 0.2s;
}

.footer-contact-info {
  animation-delay: 0.3s;
}

/* =============================================================================
   9. RESPONSIVE DESIGN
   ============================================================================= */

/* Mobile Optimizations */
@media (max-width: 768px) {

  /* Hero Slider */
  .homerix-hero-swiper {
    height: 80vh;
    min-height: 500px;
  }

  .homerix-hero-swiper .swiper-button-next,
  .homerix-hero-swiper .swiper-button-prev {
    width: 40px;
    height: 40px;
  }

  .homerix-hero-swiper .swiper-button-next::after,
  .homerix-hero-swiper .swiper-button-prev::after {
    font-size: 16px;
  }

  .homerix-hero-swiper .swiper-pagination {
    bottom: 20px;
  }

  .homerix-hero-swiper .swiper-pagination-bullet {
    width: 10px;
    height: 10px;
  }

  .video-controls {
    bottom: 60px;
    right: 20px;
  }

  .video-pause-btn {
    padding: 8px;
  }

  /* Why Us Section */
  .homerix-whyus .feature-card {
    padding: 1.25rem;
  }

  .homerix-whyus .feature-icon-container {
    width: 3.5rem;
    height: 3.5rem;
    margin-bottom: 0.75rem;
  }

  .homerix-whyus .feature-icon-container i {
    font-size: 1.25rem;
  }

  .homerix-whyus .feature-title {
    font-size: 1.125rem;
    margin-bottom: 0.5rem;
  }

  /* Technicians Section */
  .homerix-technicians .technician-card {
    margin-bottom: 1.5rem;
  }

  .homerix-technicians .technician-card .p-6 {
    padding: 1.25rem;
  }

  .homerix-technicians .technician-name {
    font-size: 1.125rem;
  }

  .homerix-technicians .technician-book-btn {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
  }

  /* Testimonials Section */
  .homerix-testimonials .testimonial-item {
    padding: 1.25rem;
  }

  .homerix-testimonials .testimonial-text {
    font-size: 0.95rem;
  }

  .homerix-testimonials .testimonial-avatar {
    width: 2.5rem;
    height: 2.5rem;
  }

  .homerix-testimonials .testimonial-name {
    font-size: 0.95rem;
  }

  .homerix-testimonials .testimonial-location {
    font-size: 0.8rem;
  }

  /* CTA Section */
  .homerix-cta {
    padding: 3rem 0;
  }

  .homerix-cta .cta-title {
    font-size: 1.75rem;
    line-height: 1.2;
  }

  .homerix-cta .cta-description {
    font-size: 1.125rem;
    margin-bottom: 1.5rem;
  }

  .homerix-cta .cta-button {
    padding: 0.875rem 1.5rem;
    font-size: 1rem;
  }

  /* Footer */
  footer .grid {
    gap: 2rem;
  }

  .footer-company-info {
    text-align: center;
  }

  .footer-social-links {
    justify-content: center;
  }

  .footer-grid-1 .footer-company-info,
  .footer-grid-1 .footer-quick-links,
  .footer-grid-1 .footer-services,
  .footer-grid-1 .footer-contact-info {
    text-align: center;
  }
}

/* Small Mobile Optimizations */
@media (max-width: 480px) {
  .homerix-hero-swiper {
    height: 70vh;
    min-height: 400px;
  }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1024px) {

  /* Why Us Section */
  .homerix-whyus .feature-card {
    padding: 1.5rem;
  }

  /* Technicians Section */
  .homerix-technicians .technician-card {
    margin-bottom: 2rem;
  }

  /* Testimonials Section */
  .homerix-testimonials .testimonial-item {
    padding: 1.5rem;
  }

  /* CTA Section */
  .homerix-cta .cta-title {
    font-size: 2.25rem;
  }

  .homerix-cta .cta-description {
    font-size: 1.25rem;
  }
}

/* Desktop Grid Layouts */
@media (min-width: 768px) {
  .footer-grid-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .footer-grid-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .footer-grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Large Desktop - 6-column layout specific adjustments */
@media (min-width: 1024px) {
  .homerix-whyus .lg\\:grid-cols-6 .feature-card {
    padding: 1rem;
  }

  .homerix-whyus .lg\\:grid-cols-6 .feature-icon-container {
    width: 3rem;
    height: 3rem;
    margin-bottom: 0.75rem;
  }

  .homerix-whyus .lg\\:grid-cols-6 .feature-icon-container i {
    font-size: 1.125rem;
  }

  .homerix-whyus .lg\\:grid-cols-6 .feature-title {
    font-size: 1rem;
    margin-bottom: 0.5rem;
  }

  .homerix-whyus .lg\\:grid-cols-6 .feature-description {
    font-size: 0.875rem;
  }
}

/* =============================================================================
   10. ACCESSIBILITY ENHANCEMENTS
   ============================================================================= */

/* Focus States for Accessibility */
.service-card:focus-within,
.homerix-whyus .feature-card:focus-within,
.homerix-technicians .technician-card:focus-within {
  outline: 2px solid var(--homerix-primary-color, #2563EB);
  outline-offset: 2px;
}

.service-card a:focus {
  outline: 2px solid var(--homerix-primary-color, #2563EB);
  outline-offset: 2px;
  border-radius: 4px;
}

.homerix-technicians .technician-book-btn:focus {
  outline: 2px solid var(--homerix-primary-color, #2563EB);
  outline-offset: 2px;
}

footer a:focus {
  outline: 2px solid var(--homerix-primary-color);
  outline-offset: 2px;
  border-radius: 2px;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

  .homerix-whyus .feature-card,
  .homerix-technicians .technician-card {
    border: 2px solid var(--homerix-dark-color, #1f2937);
  }

  .homerix-whyus .feature-icon-container {
    border: 2px solid var(--homerix-primary-color, #2563EB);
  }

  .homerix-technicians .technician-book-btn {
    border: 2px solid var(--homerix-primary-color, #2563EB);
  }

  .homerix-testimonials .testimonial-item {
    border: 2px solid currentColor;
  }

  .homerix-testimonials .testimonial-avatar {
    border-width: 3px;
  }

  .homerix-cta .cta-button {
    border: 2px solid currentColor;
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {

  .homerix-whyus .feature-card,
  .homerix-whyus .feature-icon-container,
  .homerix-technicians .technician-card,
  .homerix-technicians .technician-book-btn,
  .homerix-testimonials .testimonial-item {
    transition: none;
    animation: none;
  }

  .homerix-whyus .feature-card:hover,
  .homerix-whyus .feature-card:hover .feature-icon-container,
  .homerix-technicians .technician-card:hover,
  .homerix-technicians .technician-book-btn:hover,
  .homerix-testimonials .testimonial-item:hover {
    transform: none;
  }

  .homerix-cta .cta-button {
    transition: none;
  }

  .homerix-cta .cta-button:hover {
    transform: none;
  }
}

/* =============================================================================
   11. SEARCH RESULTS PAGE
   ============================================================================= */

.search-results .search-result-item {
  transition: all 0.3s ease;
}

.search-results .search-result-item:hover {
  transform: translateY(-2px);
}

.search-results .entry-title a {
  text-decoration: none;
}

.search-results .entry-summary {
  line-height: 1.6;
}

.no-results .search-input {
  background: white;
  color: #333;
  border: 2px solid #e5e7eb;
}

.no-results .search-input:focus {
  border-color: var(--homerix-primary-color, #2563EB);
}

.no-results .search-submit {
  background: var(--homerix-primary-color, #2563EB);
  color: white;
}

.no-results .search-submit:hover {
  background: var(--homerix-primary-color-hover, #2563eb);
}

/* Pagination Styles - See BLOG PAGINATION section below for full styles */

/* =============================================================================
   12. PRINT STYLES
   ============================================================================= */

@media print {

  /* Hide interactive elements */
  .swiper-button-next,
  .swiper-button-prev,
  .swiper-pagination,
  .video-controls {
    display: none !important;
  }

  /* Services Section */
  .service-card {
    break-inside: avoid;
    box-shadow: none;
    border: 1px solid #e5e7eb;
  }

  .animate-fade-in {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Why Us Section */
  .homerix-whyus {
    background: white !important;
    color: black !important;
  }

  .homerix-whyus .feature-card {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .homerix-whyus .feature-icon-container {
    background: #f5f5f5 !important;
  }

  .homerix-whyus .feature-title,
  .homerix-whyus .feature-description {
    color: black !important;
  }

  /* Technicians Section */
  .homerix-technicians {
    background: white !important;
    color: black !important;
  }

  .homerix-technicians .technician-card {
    background: white !important;
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .homerix-technicians .technician-book-btn {
    background: #f5f5f5 !important;
    color: black !important;
    border: 1px solid #ccc !important;
  }

  .homerix-technicians .technician-name,
  .homerix-technicians .technician-specialty,
  .homerix-technicians .technician-service-area,
  .homerix-technicians .technician-rate {
    color: black !important;
  }

  /* Testimonials Section */
  .homerix-testimonials {
    background: white !important;
    color: black !important;
  }

  .homerix-testimonials .testimonial-item {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
    border: 1px solid #ccc !important;
    break-inside: avoid;
    margin-bottom: 1rem;
  }

  .homerix-testimonials .testimonial-item::before {
    display: none;
  }

  /* CTA Section */
  .homerix-cta {
    background: white !important;
    color: black !important;
    padding: 1rem 0;
  }

  .homerix-cta .cta-button {
    background: white !important;
    color: black !important;
    border: 1px solid black !important;
  }

  /* Footer */
  footer {
    background: white !important;
    color: black !important;
    box-shadow: none !important;
  }

  .footer-social-links,
  #go-to-top {
    display: none !important;
  }
}

/* Pages Related */

.page-about-title {
  color: var(--homerix-base-color);
}

.page-about-subs {
  color: var(--homerix-base-color);
}

.value-card {
  transition: all 0.3s ease;
}

.value-card:hover {
  transform: scale(1.05);
}

.timeline-item {
  position: relative;
  padding-left: 60px;
  margin-bottom: 40px;
}

.timeline-item:before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  height: 100%;
  width: 2px;
  background: var(--homerix-primary-medium);
}

.timeline-icon {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--homerix-primary-medium);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

/* =============================================================================
   12. BLOG PAGINATION
   Matches HTML Design: px-3 py-1 rounded border border-gray-300
   Active: bg-blue-600 text-white
   ============================================================================= */

/* Reset WordPress pagination wrapper */
.navigation.pagination {
  margin: 2rem 0;
  padding: 1rem 0;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

/* Style the list wrapper */
.navigation.pagination .nav-links ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.navigation.pagination .nav-links ul li {
  margin: 0;
  list-style: none;
}

/* Base styles for pagination links/spans */
.navigation.pagination .nav-links a.page-numbers:not(.dots),
.navigation.pagination .nav-links span.page-numbers:not(.dots),
.navigation.pagination .nav-links ul li a:not(.dots),
.navigation.pagination .nav-links ul li span:not(.dots) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 0.875rem;
  border-radius: 0.5rem;
  border: 1px solid #e5e7eb;
  background: var(--homerix-base-color, #ffffff);
  color: var(--homerix-text-color, #4b5563);
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  min-width: 2.5rem;
  height: 2.5rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

/* Hover state for non-active items */
.navigation.pagination .nav-links a.page-numbers:not(.current):not(.dots):hover,
.navigation.pagination .nav-links ul li a:hover {
  background: var(--homerix-light-color, #f3f4f6);
  border-color: var(--homerix-primary-color, #2563eb);
  color: var(--homerix-primary-color, #2563eb);
}

/* Current/Active page */
.navigation.pagination .nav-links span.page-numbers.current,
.navigation.pagination .nav-links ul li span.current {
  background: var(--homerix-primary-color, #2563eb);
  color: var(--homerix-base-color, #ffffff);
  border-color: var(--homerix-primary-color, #2563eb);
  font-weight: 600;
}

/* Prev/Next arrows */
.navigation.pagination .nav-links a.page-numbers.prev,
.navigation.pagination .nav-links a.page-numbers.next,
.navigation.pagination .nav-links ul li a.prev,
.navigation.pagination .nav-links ul li a.next {
  padding: 0.5rem 1rem;
  min-width: auto;
}

/* Ellipsis/dots styling */
.navigation.pagination .nav-links span.page-numbers.dots,
.navigation.pagination .nav-links ul li span.dots {
  padding: 0.25rem 0.5rem;
  color: var(--homerix-text-color, #6b7280);
  border: none;
  background: transparent;
  cursor: default;
  min-width: auto;
}

/* FontAwesome icons sizing */
.navigation.pagination .nav-links .page-numbers i,
.navigation.pagination .nav-links ul li i {
  font-size: 0.75rem;
}

/* Screen reader text */
.navigation.pagination .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Responsive adjustments */
@media (max-width: 640px) {

  .navigation.pagination .nav-links,
  .navigation.pagination .nav-links ul {
    gap: 0.375rem;
  }

  .navigation.pagination .nav-links a.page-numbers:not(.dots),
  .navigation.pagination .nav-links span.page-numbers:not(.dots),
  .navigation.pagination .nav-links ul li a,
  .navigation.pagination .nav-links ul li span:not(.dots) {
    padding: 0.375rem 0.625rem;
    min-width: 2rem;
    height: 2rem;
    font-size: 0.8125rem;
  }
}

/* =============================================================================
   13. CONTACT PAGE STYLES
   ============================================================================= */

/* Contact Hero Section */
.contact-hero {
  position: relative;
  min-height: 400px;
  display: flex;
  align-items: center;
}

.contact-hero h1 {
  color: var(--homerix-base-color, #ffffff);
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.contact-hero p {
  color: rgba(255, 255, 255, 0.95);
}

/* Contact Cards */
.contact-card {
  transition: all 0.3s ease;
  border: 1px solid transparent;
}

.contact-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  border-color: var(--homerix-primary-light, #e0e7ff);
}

.contact-card h3 {
  color: var(--homerix-heading-color, #111827);
}

.contact-card .rounded-full {
  transition: transform 0.3s ease;
}

.contact-card:hover .rounded-full {
  transform: scale(1.1);
}

/* Map Container */
.map-container {
  height: 350px;
  background: #e5e7eb;
}

.map-container iframe {
  width: 100%;
  height: 100%;
}

/* Contact Form Styles */
.contact-form .form-input {
  transition: all 0.3s ease;
  background: #fff;
}

.contact-form .form-input:focus {
  border-color: var(--homerix-primary-color, #2563EB);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.contact-form select.form-input {
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3E%3C/svg%3E");
  background-position: right 0.75rem center;
  background-repeat: no-repeat;
  background-size: 1.5em 1.5em;
  padding-right: 2.5rem;
}

.contact-form textarea.form-input {
  resize: vertical;
  min-height: 120px;
}

.contact-form input[type="checkbox"] {
  width: 1rem;
  height: 1rem;
  accent-color: var(--homerix-primary-color, #2563EB);
  cursor: pointer;
}

/* FAQ Accordion Styles */
.faq-toggle {
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.faq-toggle:hover h3 {
  color: var(--homerix-primary-color, #2563EB);
}

.faq-toggle i {
  transition: transform 0.3s ease;
  flex-shrink: 0;
}

.faq-toggle i.rotate-180 {
  transform: rotate(180deg);
}

.faq-content {
  animation: fadeInDown 0.3s ease;
}

@keyframes fadeInDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Contact Page Responsive */
@media (max-width: 768px) {
  .contact-hero {
    min-height: 300px;
    padding: 3rem 0;
  }

  .contact-hero h1 {
    font-size: 2rem;
  }

  .contact-hero p {
    font-size: 1rem;
  }

  .map-container {
    height: 280px;
  }

  .contact-form .form-input {
    padding: 0.75rem 1rem;
  }
}

/* Contact Page Print Styles */
@media print {
  .contact-hero {
    background: #f5f5f5 !important;
    color: black !important;
    padding: 1rem 0;
  }

  .contact-hero h1,
  .contact-hero p {
    color: black !important;
    text-shadow: none !important;
  }

  .contact-card {
    border: 1px solid #ccc !important;
    box-shadow: none !important;
    break-inside: avoid;
  }

  .map-container {
    display: none;
  }

  .faq-content {
    display: block !important;
  }
}