/* Homepage Specific Styles */

/* Button Styles */
.btn-gold {
  background-color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  color: var(--color-primary-navy);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.btn-gold:hover {
  background-color: var(--color-accent-gold-dark);
  border-color: var(--color-accent-gold-dark);
  color: var(--color-primary-navy);
}

.btn-outline-gold {
  background-color: transparent;
  border: 2px solid var(--color-accent-gold);
  color: var(--color-accent-gold);
  font-weight: var(--font-weight-semibold);
  transition: all 0.3s ease;
}

.btn-outline-gold:hover {
  background-color: var(--color-accent-gold);
  border-color: var(--color-accent-gold);
  color: var(--color-primary-navy);
}

/* Service Cards */
.card {
  border: 1px solid rgba(0, 0, 0, 0.125);
  border-radius: 0.5rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  height: 100%;
}

.card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card .bi {
  color: var(--color-accent-gold);
  font-size: 3rem;
}

.card-title {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  margin-top: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.card-text {
  color: var(--color-neutral-medium-gray);
  line-height: 1.6;
}

/* Pricing Cards */
.border-gold {
  border: 3px solid var(--color-accent-gold) !important;
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.2);
}

/* Why Choose Us Section */
.text-center i.bi {
  display: inline-block;
}

/* How It Works Section */
.how-it-works .rounded-circle {
  font-weight: var(--font-weight-bold);
}

/* FAQ Accordion */
.accordion-button {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary-navy);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.accordion-button:not(.collapsed) {
  background-color: var(--color-neutral-light-gray);
  color: var(--color-primary-navy);
}

.accordion-button:focus {
  border-color: var(--color-accent-gold);
  box-shadow: 0 0 0 0.25rem rgba(212, 175, 55, 0.25);
}

.accordion-button::after {
  transition: transform 0.3s ease;
}

.accordion-collapse {
  transition: height 0.35s ease;
}

.accordion-item {
  border-color: var(--color-neutral-light-gray);
  margin-bottom: 0.5rem;
}

/* CTA Banner */
.bg-navy {
  background-color: var(--color-primary-navy);
}

/* Section Styling */
section {
  padding: var(--spacing-xxxl) 0;
}

section.bg-light {
  background-color: var(--color-neutral-light-gray);
}

section h2 {
  font-weight: var(--font-weight-bold);
  color: var(--color-primary-navy);
  margin-bottom: var(--spacing-xxl);
}

/* Service Overview Section */
.service-overview .card {
  padding: var(--spacing-lg);
}

/* Pricing Section */
.pricing-section .card {
  padding: var(--spacing-xl);
}

.pricing-section .display-4 {
  font-size: 3rem;
  margin: var(--spacing-lg) 0;
}

/* Why Choose Us Section */
.why-choose-us .text-center {
  padding: var(--spacing-md);
}

.why-choose-us i.bi {
  display: inline-block;
  margin-bottom: var(--spacing-md);
}

/* How It Works Section */
.how-it-works .rounded-circle {
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-h4);
}

.how-it-works .text-center {
  padding: var(--spacing-md);
}

/* Responsive Adjustments */
@media (max-width: 768px) {
  .hero-section .lead {
    font-size: 1.1rem;
  }
  
  .display-4 {
    font-size: 2.5rem;
  }
  
  /* Single column layout for mobile */
  .row.g-4 > [class*="col-"] {
    margin-bottom: var(--spacing-lg);
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  /* Two column layout for tablet */
  .col-md-6.col-lg-4 {
    flex: 0 0 50%;
    max-width: 50%;
  }
  
  .col-md-6.col-lg-3 {
    flex: 0 0 50%;
    max-width: 50%;
  }
}

@media (min-width: 992px) {
  /* Multi-column layout for desktop */
  .col-lg-4 {
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
  }
  
  .col-lg-3 {
    flex: 0 0 25%;
    max-width: 25%;
  }
}

/* Mobile Responsiveness for New Features */

/* Testimonials Section - Mobile */
@media (max-width: 768px) {
  /* Testimonial section spacing */
  section.py-5 {
    padding: 3rem 0 !important;
  }
  
  /* Testimonial cards - stack vertically */
  .testimonial-card {
    margin-bottom: 1.5rem;
  }
  
  /* Stat cards on hero - 2 columns on mobile */
  .stat-card {
    font-size: 0.9rem;
  }
  
  /* Image cards - full width on mobile */
  .image-card {
    margin-bottom: 1.5rem;
  }
  
  /* Service section - adjust padding */
  #services .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Pricing preview - stack cards */
  .pricing-section .col-lg-3 {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 576px) {
  /* Extra small screens - optimize spacing */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Buttons - full width on small screens */
  .btn-lg {
    width: 100%;
    margin-bottom: 0.5rem;
  }
  
  .d-flex.gap-3 {
    flex-direction: column;
    gap: 0.5rem !important;
  }
  
  /* Hero stat cards - adjust grid */
  .stat-card .display-4 {
    font-size: 1.5rem;
  }
  
  .stat-card p {
    font-size: 0.75rem;
  }
  
  /* Section headings - smaller */
  section h2.display-5 {
    font-size: 1.75rem;
  }
  
  section .lead {
    font-size: 1rem;
  }
  
  /* Icon sizes - reduce on mobile */
  .bg-gold.rounded-circle {
    padding: 0.75rem !important;
  }
  
  .bg-gold.rounded-circle i {
    font-size: 1.5rem !important;
  }
}

/* Tablet specific adjustments */
@media (min-width: 769px) and (max-width: 991px) {
  /* Testimonials - 2 columns on tablet */
  .testimonial-card {
    min-height: 280px;
  }
  
  /* Image cards - maintain aspect ratio */
  .image-card {
    height: 280px;
  }
  
  /* Stat cards - 2x2 grid */
  .stat-card {
    margin-bottom: 1rem;
  }
}

/* Landscape mobile optimization */
@media (max-width: 768px) and (orientation: landscape) {
  /* Reduce hero height in landscape */
  .hero-section {
    min-height: 60vh;
  }
  
  /* Compact spacing */
  section.py-5 {
    padding: 2rem 0 !important;
  }
  
  /* Smaller stat cards */
  .stat-card {
    padding: 0.75rem !important;
  }
}

/* Touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Remove hover effects on touch devices */
  .hover-lift:hover {
    transform: none;
  }
  
  /* Image card overlays - always visible on touch */
  .image-card-overlay {
    transform: translateY(0);
  }
  
  /* Larger touch targets */
  .btn,
  .nav-item,
  a {
    min-height: 44px;
    min-width: 44px;
  }
}

/* High DPI screens - optimize images */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Images already optimized with Unsplash quality parameter */
  .image-card img,
  .bg-image-section {
    image-rendering: -webkit-optimize-contrast;
  }
}

/* Print styles */
@media print {
  /* Hide navigation and interactive elements */
  .sidebar-nav,
  .btn,
  .image-card-overlay {
    display: none;
  }
  
  /* Remove backgrounds for printing */
  .bg-image-section::before {
    display: none;
  }
  
  /* Ensure text is readable */
  .text-white {
    color: #000 !important;
  }
  
  /* Remove shadows and effects */
  .glass-card,
  .glass-card-dark {
    background: #fff !important;
    box-shadow: none !important;
  }
}