/* style-triads.css - ไฟล์ CSS สำหรับเว็บไซต์หลัก triads.co.th */

body {
    /* EDITED: Added 'Kanit' as the primary font for Thai text */
    font-family: 'Kanit', 'Montserrat', sans-serif;
    background-color: #F9FAFB; /* Light Gray Background */
    color: #1F2937; /* Dark Gray / Near Black */
    line-height: 1.7; /* Increased line height for readability */
}
h1, h2, h3, h4, h5, h6 {
    /* EDITED: Added 'Kanit' as the primary font for Thai text */
    font-family: 'Kanit', 'Montserrat', sans-serif;
    font-weight: 700; /* Bolder headings with Montserrat */
    letter-spacing: -0.02em; /* Tighter letter spacing for headers */
}
h1 {
    line-height: 1.2; /* Tighter line height for main hero heading */
}
.bg-primary { background-color: #FFFFFF; }
.bg-accent { background-color: #F97316; } /* Vibrant Orange */
.text-accent { color: #F97316; }
.border-accent { border-color: #F97316; }
.btn-primary {
    @apply px-6 py-3 font-semibold text-white bg-accent rounded-lg shadow-lg transition-all duration-300 hover:scale-105 hover:shadow-xl;
}
.btn-secondary {
    @apply px-6 py-3 font-semibold text-accent bg-transparent border-2 border-accent rounded-lg shadow-lg transition-all duration-300 hover:bg-accent hover:text-white;
}
.section-title {
    @apply text-3xl md:text-4xl font-bold text-center mb-4 text-gray-900;
}
.section-subtitle {
    @apply text-center text-lg text-gray-600 mb-12 max-w-2xl mx-auto;
}

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

.animate-in {
    opacity: 0; /* Start hidden */
    will-change: transform, opacity;
}

.animate-in.is-visible {
    animation: fadeInUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Infinite Scroll Animation for Logos */
@keyframes infinite-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
.animate-infinite-scroll {
  animation: infinite-scroll 60s linear infinite;
}

.w-9\/10 {
    width: 90%;
    max-width: 1280px;
}
 /* Style for dropdown menu */
#services-dropdown-menu {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Styles from contact-us.html */
.form-input-dark {
    @apply w-full bg-gray-900/50 border-transparent rounded-xl p-4 focus:outline-none focus:ring-2 focus:ring-accent text-white placeholder-gray-400 transition-colors duration-300;
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out, padding 0.5s ease-in-out;
}
.faq-answer.open {
    max-height: 200px; /* Adjust as needed */
    padding-top: 1rem;
}
.faq-arrow.open {
    transform: rotate(180deg);
}

/* Page-specific styles from knowledge-hub.html */
.filter-btn {
    @apply px-6 py-2 text-sm font-medium text-gray-600 bg-white rounded-full border border-gray-300 transition-colors duration-200 hover:border-gray-400 hover:text-gray-800;
}
.filter-btn.active {
    @apply bg-orange-500 text-white border-orange-500;
}

/* Page-specific styles from blog-post.html */
.blog-content h2 {
    @apply text-2xl md:text-3xl font-bold mt-12 mb-4;
}
.blog-content p {
    @apply mb-6 text-gray-700;
    line-height: 1.9;
    letter-spacing: 0.2px;
}
.blog-content ul {
    @apply list-disc list-inside mb-6 pl-4 text-gray-700;
    line-height: 1.9;
    letter-spacing: 0.2px;
}
.blog-content blockquote {
    @apply border-l-4 border-accent pl-6 py-2 my-8 text-lg italic text-gray-700;
}
.article-title {
    letter-spacing: 0.12em;
    line-height: 2.0;
}