/* TUMCOS Website - Custom Styles */

/* Custom CSS Variables */
:root {
    --primary-green: #10b981;
    --primary-green-dark: #059669;
    --primary-green-darker: #047857;
    --accent-yellow: #fbbf24;
    --text-dark: #1f2937;
    --text-gray: #6b7280;
    --bg-light: #f9fafb;
}

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

/* Custom gradient text */
.text-gradient {
    background: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Hero gradient background */
.hero-gradient {
    background: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-dark) 50%, var(--primary-green-darker) 100%);
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Button styles */
.btn-primary {
    @apply bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-lg transition-colors;
}

.btn-secondary {
    @apply border-2 border-green-600 hover:bg-green-600 text-green-600 hover:text-white font-bold py-3 px-6 rounded-lg transition-colors;
}

.btn-outline {
    @apply border-2 border-white hover:bg-white hover:text-green-600 text-white font-bold py-3 px-6 rounded-lg transition-colors;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none;
}

.form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-green-500 focus:border-transparent bg-white;
}

/* Navigation styles */
.nav-link {
    @apply text-gray-600 hover:text-green-600 px-3 py-2 rounded-md text-sm font-medium transition-colors;
}

.nav-link.active {
    @apply text-gray-900;
}

/* Section spacing */
.section-padding {
    @apply py-16;
}

.section-padding-sm {
    @apply py-12;
}

.section-padding-lg {
    @apply py-20;
}

/* Container max width */
.container-custom {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

/* Text styles */
.heading-1 {
    @apply text-4xl md:text-6xl font-bold;
}

.heading-2 {
    @apply text-3xl md:text-4xl font-bold;
}

.heading-3 {
    @apply text-2xl md:text-3xl font-bold;
}

.text-large {
    @apply text-xl md:text-2xl;
}

/* Icon styles */
.icon-large {
    @apply text-3xl;
}

.icon-medium {
    @apply text-2xl;
}

.icon-small {
    @apply text-lg;
}

/* Badge styles */
.badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold;
}

.badge-green {
    @apply bg-green-100 text-green-800;
}

.badge-blue {
    @apply bg-blue-100 text-blue-800;
}

.badge-yellow {
    @apply bg-yellow-100 text-yellow-800;
}

.badge-red {
    @apply bg-red-100 text-red-800;
}

/* Alert styles */
.alert {
    @apply p-4 rounded-lg;
}

.alert-success {
    @apply bg-green-100 text-green-800;
}

.alert-error {
    @apply bg-red-100 text-red-800;
}

.alert-warning {
    @apply bg-yellow-100 text-yellow-800;
}

.alert-info {
    @apply bg-blue-100 text-blue-800;
}

/* Loading animation */
.loading {
    @apply animate-pulse;
}

/* Fade in animation */
.fade-in {
    animation: fadeIn 0.5s ease-in;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Slide in animation */
.slide-in-left {
    animation: slideInLeft 0.5s ease-out;
}

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

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

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

/* Mobile menu styles */
.mobile-menu {
    @apply hidden;
}

.mobile-menu.active {
    @apply block;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .mobile-hidden {
        @apply hidden;
    }
    
    .mobile-full {
        @apply w-full;
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
    
    .print-break {
        page-break-before: always;
    }
}

/* Accessibility improvements */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

/* Focus styles for better accessibility */
.focus-visible:focus {
    @apply outline-none ring-2 ring-green-500 ring-offset-2;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .card-hover {
        @apply border-2 border-gray-300;
    }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
    .card-hover {
        transition: none;
    }
    
    .fade-in,
    .slide-in-left,
    .slide-in-right {
        animation: none;
    }
}

/* Dark mode support (if needed in future) */
@media (prefers-color-scheme: dark) {
    /* Dark mode styles can be added here if needed */
}

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

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

::-webkit-scrollbar-thumb {
    background: var(--primary-green);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary-green-dark);
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-green-600 rounded-full animate-spin;
}

/* Tooltip styles */
.tooltip {
    @apply relative inline-block;
}

.tooltip .tooltiptext {
    @apply invisible absolute z-10 bg-gray-900 text-white text-sm rounded-lg py-2 px-3 bottom-full left-1/2 transform -translate-x-1/2 mb-2;
}

.tooltip:hover .tooltiptext {
    @apply visible;
}

/* Custom utilities */
.text-shadow {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.backdrop-blur {
    backdrop-filter: blur(10px);
}

/* Animation delays */
.delay-100 {
    animation-delay: 0.1s;
}

.delay-200 {
    animation-delay: 0.2s;
}

.delay-300 {
    animation-delay: 0.3s;
}

.delay-400 {
    animation-delay: 0.4s;
}

.delay-500 {
    animation-delay: 0.5s;
}