/* AfricOmics Custom Styles */

body {
    font-family: 'Inter', system-ui, sans-serif;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Poppins', system-ui, sans-serif;
}

.gradient-bg {
    background: linear-gradient(135deg, #0B3D2E 0%, #082E22 100%);
}

.gradient-text {
    background: linear-gradient(135deg, #0B3D2E 0%, #C6A962 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* Smooth scroll offset for fixed header */
html {
    scroll-padding-top: 80px;
}

/* Page transitions */
.page-transition {
    animation: fadeIn 0.5s ease-in;
}

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

/* Newsletter form styles */
.newsletter-form input:focus,
.newsletter-form select:focus,
.newsletter-form textarea:focus {
    outline: none;
    border-color: #0B3D2E;
    ring: 2px;
    ring-color: rgba(11, 61, 46, 0.3);
}

/* Success message animation */
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.success-message {
    animation: slideDown 0.5s ease-out;
}

/* Service cards gradient backgrounds */
.service-card-1 {
    background: linear-gradient(135deg, #e0f2fe 0%, #bae6fd 100%);
}

.service-card-2 {
    background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
}

.service-card-3 {
    background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
}

.service-card-4 {
    background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%);
}

/* Timeline styles */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 100%;
    background: #a7c5bc;
}

/* Responsive image optimization */
img {
    max-width: 100%;
    height: auto;
}

/* Print styles */
@media print {
    nav, footer, .no-print {
        display: none;
    }
}

/* ─── Dark Mode ──────────────────────────────────────────────────────────────── */

html.dark body {
    background-color: #111827;
    color: #f9fafb;
}

html.dark #navbar,
html.dark nav {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark #mobile-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark .bg-white {
    background-color: #1f2937 !important;
}

html.dark .bg-gray-50 {
    background-color: #111827 !important;
}

html.dark .bg-gray-100 {
    background-color: #374151 !important;
}

html.dark .bg-gray-200 {
    background-color: #4b5563 !important;
}

html.dark .text-gray-900,
html.dark .text-gray-800 {
    color: #f9fafb !important;
}

html.dark .text-gray-700 {
    color: #e5e7eb !important;
}

html.dark .text-gray-600 {
    color: #d1d5db !important;
}

html.dark .text-gray-500 {
    color: #9ca3af !important;
}

html.dark .border-gray-200 {
    border-color: #374151 !important;
}

html.dark .border-gray-100 {
    border-color: #374151 !important;
}

html.dark .shadow-md,
html.dark .shadow-lg,
html.dark .shadow-xl {
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5) !important;
}

html.dark #lang-menu {
    background-color: #1f2937 !important;
    border-color: #374151 !important;
}

html.dark #lang-menu a {
    color: #e5e7eb !important;
}

html.dark #lang-menu a:hover {
    background-color: #374151 !important;
}

html.dark .dm-toggle {
    color: #d1d5db !important;
}

html.dark .dm-toggle:hover {
    background-color: #374151 !important;
}

html.dark #lang-btn {
    color: #d1d5db !important;
}

/* Card backgrounds in dark mode */
html.dark .service-card-1 {
    background: linear-gradient(135deg, #1a3a3a 0%, #0f2a2a 100%);
}

html.dark .service-card-2 {
    background: linear-gradient(135deg, #3a2e0f 0%, #2a2008 100%);
}

html.dark .service-card-3 {
    background: linear-gradient(135deg, #2d1f3a 0%, #1e1228 100%);
}

html.dark .service-card-4 {
    background: linear-gradient(135deg, #0f2a1e 0%, #081c14 100%);
}

/* Article content in dark mode */
html.dark .article-content {
    color: #e5e7eb !important;
}

html.dark .article-content h2,
html.dark .article-content h3 {
    color: #f9fafb !important;
}