/*
|--------------------------------------------------------------------------
| BASE STYLES & FONT DEFINITIONS
|--------------------------------------------------------------------------
*/
.bg-header {
   background: linear-gradient(to bottom, var(--color-primary), #fff);
}

.floating-animation {
   animation: float 12s ease-in-out infinite;
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-20px);
   }
}

body {
   font-family: 'Inter', sans-serif;
   background-color: #F8F8F8;
   /* Light Grey for main background */
   color: #012c11;
   /* Dark Green/Grey for general text */
}

section {
   min-height: auto;
   /* Allow height to adjust on mobile */
   padding-top: 3rem;
   /* Reduced padding for mobile density */
   padding-bottom: 3rem;
}

img {
   max-width: 100%;
   height: auto;
   display: block;
}

input,
button,
a {
   outline: 0 !important;
}

.z-\[9999\] {
   z-index: 9999;
}

/*
|--------------------------------------------------------------------------
| COLOR PALETTE & UTILITIES
|--------------------------------------------------------------------------
*/

/* Define primary and accent colors for consistency */
:root {
   --color-primary: #008615;
   /* Primary Green */
   --color-accent: #08ba4a;
   /* Lighter Accent Green (used for focus/active state) */
   --color-dark-gray: #012c11;
   --color-medium-gray: #03491d;
   --color-light-gray: #777777;
   --color-light-bg: #f0f4f8;
   /* Light background for component headers */
   --color-accent-light: #e6f7e9;
   /* Very Light Green for card backgrounds, replacing the previous pinkish color */
}

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

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

.text-accent {
   color: var(--color-accent);
}

.text-dark-gray {
   color: var(--color-dark-gray);
}

.text-medium-gray {
   color: var(--color-medium-gray);
}

.text-light-gray {
   color: var(--color-light-gray);
}

.bg-dark-theme {
   background-color: var(--color-dark-gray);
}

.text-dark-theme-text {
   color: #ffffff;
}

.bg-accent-light {
   background-color: var(--color-accent-light);
}

/* Header/Hero Styles */
.bg-header {
   background: linear-gradient(to bottom, var(--color-primary), #fff);
}

.logo-text {
   color: var(--color-dark-gray);
}

.dropdown-lang {
   background: linear-gradient(to bottom, var(--color-primary), #fff);
   font-size: 75%;
}

.emoji-symbol {
   color: var(--color-primary);
   font-size: 1.2rem;
}

/* Section Headings */
.section-title {
   font-size: 2rem;
   /* Reduced size on mobile */
   font-weight: 700;
   color: var(--color-dark-gray);
   margin-bottom: 0.75rem;
   text-align: center;
}

.section-subtitle {
   font-size: 1.1rem;
   /* Reduced size on mobile */
   font-weight: 500;
   color: var(--color-medium-gray);
   text-align: center;
   margin-bottom: 2rem;
   /* Reduced margin */
}

/*
|--------------------------------------------------------------------------
| UTILITY COMPONENTS
|--------------------------------------------------------------------------
*/

/* Card Base */
.card {
   background-color: #ffffff;
   border-radius: 0.75rem;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   padding: 1.2rem;
   /* Slightly reduced padding for mobile */
   transition: transform 0.2s ease-in-out;
}

.card:hover {
   transform: translateY(-5px);
}

/* Specific override for testmonials in evidence section */
.testimonial-card.evidence-section {
   background-color: #ffffff;
   color: var(--color-dark-gray);
   border: 1px solid #E0E6ED;
}

/* Pill Buttons for Filtering */
.pill-button {
   padding: 0.5rem 1rem;
   /* Adjusted padding for better fit on mobile */
   border-radius: 9999px;
   background-color: #E0E6ED;
   color: #2C3E50;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s ease;
   white-space: nowrap;
   font-size: 0.875rem;
   /* Small font size for mobile */
}

.pill-button.active {
   background-color: var(--color-accent);
   color: var(--color-dark-gray);
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.pill-button:hover:not(.active) {
   background-color: #d1d8e0;
}

/* Neumorphic Button (Button2) */
.button2 {
   display: inline-block;
   transition: all 0.2s ease-in;
   position: relative;
   overflow: hidden;
   z-index: 1;
   color: var(--color-dark-gray);
   padding: 0.7em 1.7em;
   cursor: pointer;
   font-size: 16px;
   /* Reduced font size */
   border-radius: 0.5em;
   background: #e8e8e8;
   border: 1px solid #e8e8e8;
   box-shadow: 4px 4px 8px #c5c5c5, -4px -4px 8px #ffffff;
   /* Reduced shadow */
}

.button2:active {
   color: #666;
   box-shadow: inset 4px 4px 12px #c5c5c5, inset -4px -4px 12px #ffffff;
}

.button2:hover {
   color: #ffffff;
   border: 1px solid #ffffff;
}

.button2:before,
.button2:after {
   content: "";
   position: absolute;
   left: 50%;
   transform: translateX(-50%) scaleY(1) scaleX(1.25);
   width: 140%;
   height: 180%;
   border-radius: 50%;
   display: block;
   transition: all 0.5s 0.1s cubic-bezier(0.55, 0, 0.1, 1);
   z-index: -1;
}

.button2:before {
   top: 100%;
   background-color: rgba(0, 0, 0, 0.05);
}

.button2:after {
   left: 55%;
   top: 180%;
   background-color: var(--color-primary);
   transform: translateX(-50%) scaleY(1) scaleX(1.45);
}

.button2:hover:before {
   top: -35%;
   background-color: var(--color-primary);
   transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

.button2:hover:after {
   top: -45%;
   background-color: var(--color-primary);
   transform: translateX(-50%) scaleY(1.3) scaleX(0.8);
}

/* Form and Modal Styling */
.form-input {
   width: 100%;
   padding: 0.75rem;
   border: 1px solid #CBD5E0;
   border-radius: 0.5rem;
   font-size: 1rem;
   color: var(--color-dark-gray);
   background-color: #ffffff;
}

.form-button {
   padding: 0.75rem 1.5rem;
   background-color: var(--color-primary);
   color: white;
   border-radius: 0.5rem;
   font-weight: 600;
   cursor: pointer;
   transition: background-color 0.3s ease;
}

.form-button:hover {
   background-color: var(--color-accent);
   transform: translateY(-3px);
}

/* Disclaimer Box */
.disclaimer-box {
   background-color: #FFF3CD;
   border: 1px solid #FFC107;
   color: #856404;
   padding: 1.5rem;
   border-radius: 0.5rem;
   margin-top: 2rem;
   font-weight: 500;
}

/*
|--------------------------------------------------------------------------
| ADVANCED EFFECTS & ANIMATIONS
|--------------------------------------------------------------------------
*/

/* Hero Animation */
.floating-animation {
   animation: float 12s ease-in-out infinite;
}

.glow-text {
   text-shadow: 0 0 20px rgba(8, 186, 74, 0.5);
}

@keyframes float {

   0%,
   100% {
      transform: translateY(0px);
   }

   50% {
      transform: translateY(-20px);
   }
}

/* SVG Wave Divider Flip */
.rotate-180-text {
   transform: rotate(180deg);
   transform-origin: center;
}

/* Scroll to Top Button */
.scroll-to-top {
   position: fixed;
   bottom: 1.5rem;
   right: 1.5rem;
   background: var(--color-primary);
   color: white;
   border-radius: 50%;
   padding: 0.75rem;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   display: none;
   cursor: pointer;
   z-index: 1000;
   transition: all 0.3s ease;
}

.scroll-to-top:hover {
   background-color: var(--color-accent);
   transform: translateY(-3px);
}

/*
|--------------------------------------------------------------------------
| FLIP CARD (CONDITIONS)
|--------------------------------------------------------------------------
*/

.flip-card {
   background-color: transparent;
   width: 100%;
   height: auto;
   perspective: 1000px;
   cursor: pointer;
   min-height: 400px;
   /* Reduced min-height for mobile */
}

/* Ensure the front face text fits nicely on mobile */
.flip-card-front h3 {
   font-size: 1.15rem;
}

.flip-card-front p {
   font-size: 0.95rem;
}

.flip-card-inner {
   position: relative;
   width: 100%;
   height: 100%;
   text-align: center;
   transition: transform 0.6s;
   transform-style: preserve-3d;
}

.flip-card.flipped .flip-card-inner {
   transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
   position: absolute;
   width: 100%;
   height: 100%;
   backface-visibility: hidden;
   -webkit-backface-visibility: hidden;
   border-radius: 0.75rem;
   box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
   padding: 1.5rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   text-align: center;
}

.flip-card-front {
   background-color: #ffffff;
   color: #333333;
   z-index: 2;
}

.flip-card-back {
   overflow-y: auto;
   padding: 1rem;
   background-color: var(--color-accent-light);
   color: var(--color-dark-gray);
   transform: rotateY(180deg);
}

.flip-card-back p.italic {
   font-size: 1.05rem;
   line-height: 1.4;
   color: var(--color-dark-gray);
}

/*
|--------------------------------------------------------------------------
| ACCORDION (FAQ) & TABLE STYLING
|--------------------------------------------------------------------------
*/

.accordion-item {
   border: 1px solid #E0E6ED;
   border-radius: 0.5rem;
   margin-bottom: 0.75rem;
   overflow: hidden;
}

.accordion-header {
   background-color: var(--color-light-bg);
   padding: 1rem 1.5rem;
   cursor: pointer;
   display: flex;
   justify-content: space-between;
   align-items: center;
   font-weight: 600;
   color: var(--color-dark-gray);
}

.accordion-body {
   padding: 1rem 1.5rem;
   background-color: #ffffff;
   border-top: 1px solid #E0E6ED;
}

.accordion-header[aria-expanded="true"] {
   background-color: var(--color-accent-light);
   /* Highlight open accordion on mobile tap */
}

.accordion-header[aria-expanded="true"] .accordion-toggle-icon {
   transform: rotate(180deg);
}

/* References Table Styling */
#references-scroll-container {
   max-height: 400px;
   overflow-y: auto;
}

#references-table-body td {
   padding: 0.5rem;
   border: 1px solid #E0E6ED;
}

#references-table-body a {
   word-break: break-all;
}

/* Force table headers to not break */
#references-table-body th {
   white-space: nowrap;
}

/*
|--------------------------------------------------------------------------
| MOBILE MENU FIXES
|--------------------------------------------------------------------------
*/

/* Overriding Tailwind fixed class to ensure z-index works on the menu overlay */
#mobile-menu {
   position: fixed;
   max-width: 100vw;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 40;
   overflow-y: auto;
   /* Ensure scrolling if menu content exceeds screen height */
}

/*
|--------------------------------------------------------------------------
| TESTIMONIAL CAROUSEL FIXES
|--------------------------------------------------------------------------
*/

#testimonial-carousel {
   display: grid;
   grid-template-columns: repeat(1, minmax(0, 1fr));
   /* Single column on mobile */
   gap: 1.5rem;
   overflow: hidden;
}

/* Testimonial card spacing fix */
#testimonials-container .testimonial-card {
   margin-bottom: 0;
   /* Tailwind handles the gap, so remove manual margin */
   width: 100%;
   box-sizing: border-box;
}

/* Position navigation buttons correctly relative to the testimonial container */
#testimonials-container {
   position: relative;
   padding: 0 30px;
   /* Add padding so buttons don't overlap cards */
}

#testimonials-container #prev-testimonial,
#testimonials-container #next-testimonial {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   z-index: 10;
}

#testimonials-container #prev-testimonial {
   left: 0;
}

#testimonials-container #next-testimonial {
   right: 0;
}


/*
|--------------------------------------------------------------------------
| SOCIAL MEDIA BUTTONS
|--------------------------------------------------------------------------
*/

.social .card {
   position: relative;
   display: flex;
   align-items: center;
   justify-content: center;
   background: var(--color-primary);
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
   transition: all 0.3s ease;
   overflow: hidden;
   height: 50px;
   width: 200px;
   border-radius: 0.5rem;
}

.social .card:hover {
   box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
   background: var(--color-accent);
}

.social .card span {
   position: absolute;
   color: white;
   font-size: 16px;
   font-weight: 700;
   transition: opacity 0.3s;
   z-index: 2;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   opacity: 1;
}

.social .card:hover span {
   opacity: 0;
}

.social .card .social-link {
   position: relative;
   /* Changed from absolute for better control */
   display: flex;
   align-items: center;
   justify-content: center;
   width: 25%;
   /* Adjust width to fit 4 icons */
   height: 100%;
   color: white;
   text-decoration: none;
   transition: 0.25s;
   opacity: 0;
   /* Positioning links off-screen when not hovered */
   transform: translateX(100%);
}

.social .card:hover .social-link {
   opacity: 1;
   transform: translateX(0);
   /* Distribute the links evenly */
   width: calc(100% / 3);
   /* Adjust this based on number of icons */
}

/* Specific delay for sequential appearance */
.social .card:hover .social-link:nth-child(2) {
   transition-delay: 0.05s;
}

.social .card:hover .social-link:nth-child(3) {
   transition-delay: 0.1s;
}

.social .card:hover .social-link:nth-child(4) {
   transition-delay: 0.15s;
}

.social .card .social-link svg {
   height: 25px;
   fill: white;
   transition: transform 0.2s;
}

.social .card .social-link:hover svg {
   transform: scale(1.1);
}

/* Keyframe to replace original bounce animation */
@keyframes fadeIn {
   from {
      opacity: 0;
   }

   to {
      opacity: 1;
   }
}

.animate-fadeIn {
   animation: fadeIn 1s ease-out;
}

/*
|--------------------------------------------------------------------------
| DESKTOP/TABLET OPTIMIZATION (min-width: 768px)
|--------------------------------------------------------------------------
*/
@media (min-width: 768px) {
   section {
      padding-top: 5rem;
      padding-bottom: 5rem;
   }

   .section-title {
      font-size: 2.5rem;
   }

   .section-subtitle {
      font-size: 1.25rem;
   }

   .flip-card {
      min-height: 450px;
   }

   .button2 {
      box-shadow: 6px 6px 12px #c5c5c5, -6px -6px 12px #ffffff;
   }

   /* Testimonial grid activation */
   #testimonial-carousel {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 1.5rem;
   }

   #testimonials-container {
      padding: 0;
      /* Remove side padding when screen is wide enough */
   }

   /* Adjust button positioning for larger screens when they are not in the grid area */
   #testimonials-container #prev-testimonial,
   #testimonials-container #next-testimonial {
      top: 50%;
      transform: translateY(-50%);
   }

   #testimonials-container #prev-testimonial {
      left: -30px;
   }

   #testimonials-container #next-testimonial {
      right: -30px;
   }

   /* Social media links logic for desktop hover */
   .social .card:hover span {
      opacity: 0;
   }

   .social .card .social-link {
      display: flex;
      opacity: 0;
      width: 0;
      transform: none;
   }

   .social .card:hover .social-link {
      width: calc(100% / 3);
      opacity: 1;
   }

   /* References Table Layout */
   #references-table-body th {
      white-space: normal;
   }

}

@media (min-width: 640px) and (max-width: 1023px) {
   #conditions-grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
   }

   .section-title {
      font-size: 2.25rem;
   }
}