/* ===========================
   FEEDBACK 4 IMPROVEMENTS
   Vista Arenal Adventure Park Website
   =========================== */

/* ===========================
   1. HEADER LOGO SIZE IMPROVEMENT
   Issue: Header logo on desktop looks a little small
   Solution: Increase logo size slightly for better visibility
   =========================== */

.nav-brand img {
  /* Increase from 55px to 65px for better desktop visibility */
  height: 65px !important;
  width: auto;
  max-width: 240px;
  
  /* Maintain existing visual enhancements */
  background: transparent !important;
  filter: 
    drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.1))
    contrast(1.1)
    saturate(1.05);
  
  /* Smooth transition for size changes */
  transition: all var(--transition-base);
}

/* Adjust scrolled state proportionally */
.site-header.scrolled .nav-brand img {
  height: 52px !important; /* Increased from 45px to 52px */
  filter: 
    drop-shadow(1px 1px 2px rgba(0, 0, 0, 0.15))
    contrast(1.2)
    saturate(1.05);
}

/* Enhanced hover effect for larger logo */
.nav-brand:hover img {
  transform: scale(1.02);
  filter: 
    drop-shadow(2px 2px 6px rgba(0, 0, 0, 0.15))
    contrast(1.2)
    saturate(1.15)
    brightness(1.05);
}

/* ===========================
   2. TESTIMONIALS TYPOGRAPHY IMPROVEMENT
   Issue: Font used for testimonials is hard to read (italic)
   Solution: Remove italics, use cleaner font for better readability
   =========================== */

.testimonial-text {
  /* Remove italic styling for better readability */
  font-style: normal !important;
  
  /* Use the primary body font (Open Sans) instead of accent font (Caveat) */
  font-family: var(--body-font) !important;
  
  /* Enhance typography for better readability */
  font-size: clamp(1rem, 2.5vw, 1.125rem);
  line-height: 1.8; /* Improved line height for better reading */
  font-weight: 500;
  
  /* Maintain color and spacing */
  color: #1A0F0A !important;
  text-align: center;
  
  /* Keep quote styling but with cleaner font */
  quotes: """ """ "'" "'";
}

/* Ensure quote marks remain styled properly with clean font */
.testimonial-text::before,
.testimonial-text::after {
  font-family: var(--heading-font); /* Use Montserrat for quote marks */
  font-style: normal;
}

.testimonial-text::before {
  content: open-quote;
  font-size: 2em;
  color: var(--primary-green);
  line-height: 0.1;
  margin-right: 0.1em;
  vertical-align: -0.4em;
}

.testimonial-text::after {
  content: close-quote;
  font-size: 2em;
  color: var(--primary-green);
  line-height: 0.1;
  margin-left: 0.1em;
  vertical-align: -0.4em;
}

/* ===========================
   3. FOOTER LOGO REFINEMENTS
   Issue: Extra "Adventure Experience" text and contrast issues
   Solution: Hide unnecessary text, improve logo contrast
   =========================== */

/* Hide the "Adventure Experience" tagline as requested */
.footer-tagline {
  display: none !important;
}

/* Enhance footer logo for better contrast and visibility */
.footer-brand img {
  /* Maintain great size from feedback 3 */
  width: 180px !important;
  height: auto !important;
  max-width: 220px;
  min-width: 160px;
  
  /* Improve contrast for the logo on dark background */
  filter: 
    brightness(0) 
    invert(1) 
    contrast(1.1)
    drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  
  /* Add subtle animation enhancement */
  transition: all var(--transition-base);
}

/* Enhanced hover effect for footer logo */
.footer-brand:hover img {
  filter: 
    brightness(0) 
    invert(1) 
    contrast(1.2)
    drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4))
    scale(1.02);
  
  transform: translateY(-2px);
}

/* Note: The "Adventure Park" text mentioned in feedback appears to be part of the logo image itself.
   If this text needs to be white, it would require editing the logo image file directly.
   The current filter: brightness(0) invert(1) already makes the entire logo white,
   which should address the contrast concern. */

/* ===========================
   4. RESPONSIVE ADJUSTMENTS
   Ensure all improvements work across devices
   =========================== */

@media (max-width: 768px) {
  /* Adjust header logo for mobile */
  .nav-brand img {
    height: 50px !important; /* Slightly larger than before for mobile too */
  }
  
  .site-header.scrolled .nav-brand img {
    height: 42px !important;
  }
  
  /* Ensure footer logo remains properly sized on mobile */
  .footer-brand img {
    width: 150px !important;
    min-width: 120px;
  }
  
  /* Testimonials typography adjustments for mobile */
  .testimonial-text {
    font-size: clamp(0.95rem, 2.2vw, 1rem);
    line-height: 1.7;
  }
}

@media (max-width: 480px) {
  /* Further mobile refinements */
  .nav-brand img {
    height: 45px !important;
  }
  
  .footer-brand img {
    width: 130px !important;
    min-width: 110px;
  }
}

/* ===========================
   5. ACCESSIBILITY IMPROVEMENTS
   Ensure changes maintain accessibility standards
   =========================== */

/* Ensure sufficient contrast for testimonial text */
.testimonial-text {
  /* High contrast ratio for readability */
  color: #1A0F0A !important;
}

/* Ensure focus states remain visible for logo links */
.nav-brand:focus img,
.footer-brand:focus img {
  outline: 2px solid var(--primary-green);
  outline-offset: 3px;
}

/* ===========================
   6. PERFORMANCE OPTIMIZATIONS
   Ensure smooth transitions and animations
   =========================== */

/* Optimize animations with GPU acceleration */
.nav-brand img,
.footer-brand img {
  will-change: transform, filter;
}

.nav-brand:hover img,
.footer-brand:hover img {
  will-change: auto;
}

/* Reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce) {
  .nav-brand img,
  .footer-brand img,
  .testimonial-text {
    transition: none !important;
    animation: none !important;
  }
  
  .nav-brand:hover img,
  .footer-brand:hover img {
    transform: none !important;
  }
}