/* Custom CSS for visual enhancements beyond Tailwind utilities */

html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 80px; /* Offset for fixed navbar */
}

/* Custom Typography Classes */
.section-title {
    @apply text-3xl md:text-4xl font-black text-gray-900 tracking-tight;
}

.section-subtitle {
    @apply text-base md:text-lg font-en font-light uppercase tracking-[0.2em] text-gray-400 ml-3 inline-block;
}

.nav-link {
    @apply text-gray-600 font-medium hover:text-primary transition-colors py-2 relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 0;
    background-color: theme('colors.primary');
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* Card Hover Effects */
.custom-card {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.custom-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.news-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.news-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px -12px rgb(14 165 233 / 0.15); /* Primary color shadow */
}

/* Link Card Effects */
.link-card {
    transition: all 0.2s ease;
}
.link-card:hover {
    transform: translateX(5px);
    background-color: theme('colors.orange.50');
    border-color: theme('colors.orange.200');
}

/* Image Hover Zoom (Gallery) */
.gallery-img-container {
    overflow: hidden;
}

.gallery-img-container img {
    transition: transform 0.5s ease;
}

.gallery-card:hover .gallery-img-container img {
    transform: scale(1.05); /* Slight zoom on hover */
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 10px;
}

::-webkit-scrollbar-track {
    background: #f1f5f9;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Simple Animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
    opacity: 0;
}