/* Custom CSS for logo sizing and other custom styles */

:root {
  --logo-icon-size: 12rem;     /* 216px - 你想要的logo图标大小 */
  --logo-name-height: 7rem;      /* 32px - smaller than the previous h-8 */
  --footer-logo-icon-size: 15rem;  /* 3 times larger: 5rem * 3 = 15rem */
  --footer-logo-name-height: 12rem; /* 3 times larger: 4rem * 3 = 12rem */
}

/* Header logo styles */
.logo-icon {
  width: var(--logo-icon-size);
  height: var(--logo-icon-size);
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

.logo-name {
  height: var(--logo-name-height);
  width: auto;
  object-fit: contain;
  max-width: 100%;
}

/* Header logo positioning - move to right side for ALL pages */
#navbar .container {
  flex-direction: row-reverse;
}

#navbar .container > a {
  order: 2;
}

#navbar .container > nav {
  order: 1;
}

/* Footer logo styles */
.footer-logo-icon {
  width: var(--footer-logo-icon-size);
  height: var(--footer-logo-icon-size);
  object-fit: contain;
  max-width: 100%;
  height: auto;
}

.footer-logo-name {
  height: var(--footer-logo-name-height);
  width: auto;
  object-fit: contain;
  max-width: 100%;
}

/* Responsive logo sizing */
@media (max-width: 768px) {
  :root {
    --logo-icon-size: 2rem;      /* 32px on mobile */
    --logo-name-height: 1.5rem;  /* 24px on mobile */
    --footer-logo-icon-size: 12rem;  /* 3 times larger: 4rem * 3 = 12rem */
    --footer-logo-name-height: 10.5rem; /* 3 times larger: 3.5rem * 3 = 10.5rem */
  }
}

@media (max-width: 480px) {
  :root {
    --logo-icon-size: 1.75rem;   /* 28px on small mobile */
    --logo-name-height: 1.25rem; /* 20px on small mobile */
    --footer-logo-icon-size: 5.25rem;  /* 3 times larger: 1.75rem * 3 = 5.25rem */
    --footer-logo-name-height: 3.75rem; /* 3 times larger: 1.25rem * 3 = 3.75rem */
  }
}

/* Auto-adjust images based on container size */
.auto-adjust-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 100%;
}

/* Responsive image sizing for different screen sizes */
@media (max-width: 768px) {
  .banner-image {
    max-height: 300px;
  }
  
  .card-image {
    height: 150px;
  }
  
  .product-image {
    height: 200px;
  }
  
  .news-image {
    height: 140px;
  }
  
  .partner-logo {
    width: 60px;
    height: 60px;
  }
  
  .qualification-image {
    width: 100px;
    height: 70px;
  }
}

@media (max-width: 480px) {
  .banner-image {
    max-height: 250px;
  }
  
  .card-image {
    height: 120px;
  }
  
  .product-image {
    height: 180px;
  }
  
  .news-image {
    height: 120px;
  }
  
  .partner-logo {
    width: 50px;
    height: 50px;
  }
  
  .qualification-image {
    width: 80px;
    height: 60px;
  }
}

/* Banner images */
.banner-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-height: 500px;
}

/* Card images */
.card-image {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

/* Product images */
.product-image {
  width: 100%;
  height: 250px;
  object-fit: cover;
}

/* News images */
.news-image {
  width: 100%;
  height: 180px;
  object-fit: cover;
}

/* Partner logos */
.partner-logo {
  width: 80px;
  height: 80px;
  object-fit: contain;
  max-width: 100%;
}

/* Qualification certificates */
.qualification-image {
  width: 120px;
  height: 80px;
  object-fit: cover;
  margin: 0 10px;
}

/* Additional utility classes for better image handling */
.image-container {
  position: relative;
  overflow: hidden;
}

.image-container img {
  transition: transform 0.3s ease;
}

.image-container:hover img {
  transform: scale(1.05);
}

/* Flexible image sizing */
.flexible-image {
  width: 100%;
  height: auto;
  object-fit: cover;
  max-width: 100%;
}

/* Square aspect ratio images */
.square-image {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

/* Wide aspect ratio images */
.wide-image {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
}

/* Tall aspect ratio images */
.tall-image {
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
}

/* ===== INTERACTIVE HOVER EFFECTS & SMOOTH ANIMATIONS ===== */

/* Smooth transitions for all interactive elements */
* {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override global transitions for hero buttons to prevent blinking */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Section hover effects */
section {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

section:hover {
  transform: translateY(-2px);
}

/* Card hover effects with smooth animations */
.card-hover {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
}

.card-hover:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Navigation hover effects */
nav a {
  transition: all 0.3s ease;
  position: relative;
}

nav a::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: currentColor;
  transition: width 0.3s ease;
}

nav a:hover::after {
  width: 100%;
}

/* Button hover effects */
.btn-hover {
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.btn-hover::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 ease;
}

.btn-hover:hover::before {
  left: 100%;
}

.btn-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

/* Image hover effects */
.hover-lift {
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.hover-lift:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
}

/* Text hover effects */
.text-hover {
  transition: color 0.3s ease, transform 0.3s ease;
}

.text-hover:hover {
  transform: translateX(5px);
}

/* Timeline hover effects */
.timeline-item {
  transition: all 0.4s ease;
}

.timeline-item:hover {
  transform: scale(1.02);
}

.timeline-item:hover .timeline-marker {
  transform: scale(1.2);
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.4);
}

/* Partner logo hover effects */
.partner-item {
  transition: all 0.3s ease;
}

.partner-item:hover {
  transform: scale(1.1) rotate(2deg);
}

/* Qualification certificate hover effects */
.qualification-card {
  transition: all 0.4s ease;
}

.qualification-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
}

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Loading animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Apply animations to sections */
.fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

/* Hover effects for specific elements */
.hover-glow:hover {
  box-shadow: 0 0 20px rgba(46, 125, 50, 0.3);
}

.hover-bounce:hover {
  animation: bounce 0.6s ease;
}

@keyframes bounce {
  0%, 20%, 60%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  80% {
    transform: translateY(-5px);
  }
}

/* Smooth hover transitions for all interactive elements */
a, button, .interactive {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Override global transitions for hero buttons to prevent blinking */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
}

/* Remove any overlays from hero section */
#home::before,
#home::after,
#home > div::before,
#home > div::after,
#home > div > div::before,
#home > div > div::after,
#home > *::before,
#home > *::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Ensure banner image has no overlays */
#home img[src*="main-banner"] {
  position: absolute !important;
  z-index: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

#home img[src*="main-banner"]::before,
#home img[src*="main-banner"]::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Force remove any potential overlays from hero section */
#home {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  background-color: transparent !important;
  --tw-bg-opacity: 0 !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: none !important;
}

/* Override any potential Tailwind overlay classes */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-t,
.from-primary,
.to-dark,
.from-primary\/30,
.to-dark\/20 {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
}

/* Ensure text is clearly visible */
#home h1,
#home p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* Fix hero button blinking by overriding global transitions */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

#home a[href*="about.html"]:hover,
#home a[href*="partners.html"]:hover {
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Remove any conflicting hover effects from global CSS */
#home a[href*="about.html"]::before,
#home a[href*="partners.html"]::before,
#home a[href*="about.html"]::after,
#home a[href*="partners.html"]::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
}

/* Additional override to prevent any remaining conflicts */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  transition-property: background-color, box-shadow !important;
  transition-duration: 0.2s !important;
  transition-timing-function: ease !important;
  transition-delay: 0s !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

/* Remove any overlays from hero section */
#home::before,
#home::after,
#home > div::before,
#home > div::after,
#home > div > div::before,
#home > div > div::after,
#home > *::before,
#home > *::after {
  display: none !important;
  content: none !important;
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Ensure banner image has no overlays */
#home img[src*="main-banner"] {
  position: absolute !important;
  z-index: 1 !important;
  filter: none !important;
  -webkit-filter: none !important;
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  isolation: isolate !important;
}

#home img[src*="main-banner"]::before,
#home img[src*="main-banner"]::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Remove any potential image overlays from parent elements */
#home > div:has(img[src*="main-banner"]) {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
}

/* Force remove any remaining overlays */
#home *:not(.container):not(.absolute.bottom-10) {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  mix-blend-mode: normal !important;
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
  -webkit-box-shadow: none !important;
  text-shadow: none !important;
}

/* Force remove any potential overlays from hero section */
#home {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  background-color: transparent !important;
  --tw-bg-opacity: 0 !important;
  --tw-gradient-from: transparent !important;
  --tw-gradient-to: transparent !important;
  --tw-gradient-stops: none !important;
}

#home > *:not(img[src*="main-banner"]):not(.container):not(.absolute.bottom-10) {
  background: none !important;
  background-image: none !important;
}

/* Remove any Tailwind or browser default overlays */
#home * {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
}

#home img[src*="main-banner"] {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
}

/* Override any potential Tailwind overlay classes */
.bg-gradient-to-r,
.bg-gradient-to-br,
.bg-gradient-to-t,
.from-primary,
.to-dark,
.from-primary\/30,
.to-dark\/20 {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
}

/* Remove any section-level backgrounds */
section#home,
section[id="home"] {
  background: none !important;
  background-image: none !important;
  background-gradient: none !important;
  background-color: transparent !important;
}

/* Ensure text is clearly visible */
#home h1,
#home p {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8) !important;
  position: relative !important;
  z-index: 10 !important;
}

/* 解决英雄区域按钮闪烁问题 */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  transition: none !important;
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
}

#home a[href*="about.html"]:hover,
#home a[href*="partners.html"]:hover {
  transform: none !important;
  animation: none !important;
  will-change: auto !important;
  background-color: inherit !important;
}

/* 特别针对"了解更多"按钮的悬停状态 */
#home a[href*="about.html"]:hover {
  background-color: #f8f9fa !important; /* 比原白色稍暗的灰色 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* 特别针对"加入我们"按钮的悬停状态 */
#home a[href*="partners.html"]:hover {
  background-color: #ffca28 !important; /* 原accent颜色的固定值 */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* 按钮基础样式增强 */
#home a[href*="about.html"],
#home a[href*="partners.html"] {
  border: 2px solid transparent !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
}

/* "了解更多"按钮特殊样式 */
#home a[href*="about.html"] {
  background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%) !important;
  border-color: rgba(46, 125, 50, 0.2) !important;
}

/* "加入我们"按钮特殊样式 */
#home a[href*="partners.html"] {
  background: linear-gradient(135deg, #ffca28 0%, #ffb300 100%) !important;
  border-color: rgba(255, 193, 7, 0.3) !important;
}

/* Enhanced card hover effects */
.enhanced-card {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.enhanced-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(46, 125, 50, 0.1), rgba(27, 94, 32, 0.1));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: inherit;
}

.enhanced-card:hover::before {
  opacity: 1;
}

.enhanced-card:hover {
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Additional responsive design improvements */
@media (max-width: 768px) {
  /* Improve mobile navigation */
  #mobileMenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  }
  
  /* Better mobile spacing */
  .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  /* Mobile-friendly grid layouts */
  .grid {
    gap: 1rem;
  }
  
  /* Mobile image sizing */
  .banner-image {
    max-height: 250px;
  }
  
  .card-image {
    height: 120px;
  }
  
  /* Mobile text sizing */
  h1 {
    font-size: clamp(1.5rem, 4vw, 2.5rem) !important;
  }
  
  h2 {
    font-size: clamp(1.25rem, 3vw, 2rem) !important;
  }
  
  h3 {
    font-size: clamp(1.125rem, 2.5vw, 1.5rem) !important;
  }
  
  /* Mobile button sizing */
  .bg-primary, .bg-accent {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }
}

@media (max-width: 480px) {
  /* Extra small mobile devices */
  .container {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }
  
  /* Smaller mobile images */
  .banner-image {
    max-height: 200px;
  }
  
  .card-image {
    height: 100px;
  }
  
  /* Mobile-friendly spacing */
  .py-20 {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }
  
  .py-12 {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }
  
  /* Mobile grid adjustments */
  .grid {
    gap: 0.75rem;
  }
  
  /* Mobile text adjustments */
  p {
    font-size: 0.875rem;
    line-height: 1.5;
  }
}

/* Prevent image overlapping issues */
img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* Ensure proper image container behavior */
.image-container {
  overflow: hidden;
  position: relative;
}

.image-container img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

/* Fix for mobile navigation z-index issues */
header {
  position: relative;
  z-index: 1000;
}

/* Ensure QR codes don't overlap on mobile */
@media (max-width: 768px) {
  .flex.space-x-4 {
    gap: 0.5rem;
  }
  
  .w-36.h-36 {
    width: 4rem;
    height: 4rem;
  }
}

/* Fix for mobile form elements */
@media (max-width: 768px) {
  input, textarea, select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }
  
  iframe {
    max-width: 100%;
    height: auto;
    min-height: 400px;
  }
}