/* Forest Theme - Custom overrides for Tailwind + UIkit */

/* Nav links */
.nav-link { @apply px-4 py-2 text-sm font-medium text-gray-300 hover:text-white rounded-lg hover:bg-white/10 transition-all; }
.nav-cta { @apply bg-forest-500 text-white hover:bg-forest-400 px-5 !important; }
.mobile-link { @apply block px-4 py-3 text-lg text-gray-300 hover:text-white hover:bg-forest-800 rounded-xl transition-all; }

/* Active nav */
.nav-link.active { @apply text-white bg-white/15; }

/* UIkit overrides */
.uk-navbar-container { background: transparent !important; }
.uk-navbar-sticky { background: rgba(5, 46, 22, 0.95) !important; backdrop-filter: blur(12px); }
.uk-offcanvas-bar { background: #052e16 !important; }

/* Post content styling */
.post-content { @apply prose prose-lg max-w-none; }
.post-content h2 { @apply font-heading text-2xl font-bold text-forest-900 mt-10 mb-4; }
.post-content h3 { @apply font-heading text-xl font-bold text-forest-800 mt-8 mb-3; }
.post-content p { @apply text-gray-700 leading-relaxed mb-5; }
.post-content img { @apply rounded-2xl shadow-md my-8; }
.post-content blockquote { @apply border-l-4 border-forest-500 bg-forest-50 py-4 px-6 rounded-r-xl italic text-forest-800 my-8; }
.post-content a { @apply text-forest-600 hover:text-forest-500 underline; }
.post-content ul, .post-content ol { @apply pl-6 mb-5 space-y-2; }
.post-content li { @apply text-gray-700; }

/* Page hero */
.page-hero { @apply relative py-20 lg:py-28 overflow-hidden; }
.page-hero::before { content: ''; @apply absolute inset-0 bg-gradient-to-br from-forest-950 via-forest-900 to-earth-800; }

/* Scroll animations */
[data-uk-scrollspy] { opacity: 0; }
[data-uk-scrollspy].uk-scrollspy-inview { opacity: 1; }

/* Form inputs */
.form-input { @apply w-full px-4 py-3 border-2 border-forest-200 rounded-xl focus:border-forest-500 focus:ring-4 focus:ring-forest-100 outline-none transition-all; }

/* Legacy page template compatibility */
.section { @apply py-16 lg:py-24; }
.container { @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8; }
.content-area { @apply max-w-4xl mx-auto prose prose-lg; }
.content-area h2 { @apply font-heading text-2xl font-bold text-forest-900 mt-10 mb-4; }
.content-area h3 { @apply font-heading text-xl font-bold text-forest-800 mt-8 mb-3; }
.content-area p { @apply text-gray-700 leading-relaxed mb-5; }
.content-area img { @apply rounded-2xl shadow-md my-8; }
.section-title { @apply font-heading text-3xl lg:text-5xl font-bold text-forest-950 text-center mb-12; }
.page-hero { @apply relative py-20 lg:py-28 overflow-hidden text-center; }
.page-hero .container { @apply relative z-10; }
.page-hero h1 { @apply font-heading text-4xl lg:text-6xl font-bold text-white; }
.card-grid { @apply grid gap-8; }
.card-grid.two-col { @apply grid-cols-1 md:grid-cols-2; }
.card-grid.three-col { @apply grid-cols-1 md:grid-cols-3; }
.card { @apply bg-white rounded-2xl p-8 shadow-sm hover:shadow-xl transition-all duration-300 hover:-translate-y-1 border border-gray-100; }
.card h3 { @apply font-heading text-xl font-bold text-forest-900 mb-3; }
.card p { @apply text-gray-600 text-sm; }
.card-link { @apply text-forest-600 font-semibold text-sm hover:text-forest-500 mt-2 inline-block; }
.card-image { @apply h-52 bg-cover bg-center rounded-xl mb-4; }
.card-body { @apply p-0; }
.card-categories { @apply mb-2; }
.category-tag { @apply inline-block bg-forest-100 text-forest-700 px-3 py-1 rounded-full text-xs font-medium mr-1; }
.meta { @apply text-gray-400 text-xs mb-2; }
.featured-image { @apply my-8; }
.featured-image img { @apply rounded-2xl shadow-lg w-full; }
.blog-layout { @apply grid grid-cols-1 lg:grid-cols-[1fr_300px] gap-10; }
.blog-card { @apply p-0 overflow-hidden; }
.blog-card .card-body { @apply p-6; }
.blog-sidebar { @apply sticky top-24 self-start; }
.sidebar-widget { @apply bg-white rounded-2xl p-6 shadow-sm; }
.sidebar-widget h3 { @apply font-heading text-lg font-bold text-forest-800 mb-4; }
.sidebar-widget ul { @apply space-y-2; }
.sidebar-widget li { @apply border-b border-forest-50 pb-2; }
.sidebar-widget li a { @apply text-gray-600 text-sm hover:text-forest-600; }
.contact-grid { @apply grid grid-cols-1 lg:grid-cols-2 gap-12; }
.contact-form { @apply bg-white p-8 rounded-2xl shadow-sm; }
.form-group { @apply mb-5; }
.form-group label { @apply block font-semibold text-forest-800 text-sm mb-1; }
.form-group input, .form-group textarea { @apply w-full px-4 py-3 border-2 border-forest-200 rounded-xl focus:border-forest-500 focus:ring-4 focus:ring-forest-100 outline-none transition-all; }
.team-card { @apply text-center p-8; }
.team-avatar { @apply text-6xl mb-4; }
.error-404 { @apply min-h-[50vh] flex items-center; }
.error-code { @apply text-[8rem] font-bold text-forest-300 font-heading; }
.single-post .post-header { @apply bg-gradient-to-br from-forest-950 via-forest-900 to-earth-800 py-20 text-center; }
.single-post .post-header h1 { @apply font-heading text-3xl lg:text-5xl font-bold text-white mt-4; }
.single-post .post-header .meta { @apply text-forest-200 mt-2; }
.post-featured-image { @apply my-8; }
.post-featured-image img { @apply rounded-2xl w-full shadow-lg; }
.post-content { @apply max-w-4xl mx-auto; }
.post-navigation { @apply flex justify-between items-center mt-12 pt-8 border-t border-forest-100 flex-wrap gap-4; }
.btn { @apply inline-block px-6 py-3 rounded-xl font-semibold text-sm cursor-pointer transition-all border-2 border-transparent; }
.btn-primary { @apply bg-forest-600 text-white border-forest-600 hover:bg-forest-700 hover:border-forest-700 hover:scale-105; }
.btn-outline { @apply bg-transparent text-forest-600 border-forest-600 hover:bg-forest-600 hover:text-white; }

/* === ENHANCEMENTS === */

/* Lazy loading for background images */
.lazy-bg {
    background-image: none !important;
    transition: background-image 0.3s ease-in;
}
.lazy-bg.loaded {
    background-image: var(--bg-url) !important;
}

/* Breadcrumbs */
.breadcrumb-nav {
    @apply bg-forest-50 py-3 border-b border-forest-100;
}
.breadcrumb-list {
    @apply flex items-center space-x-2 text-sm text-gray-600;
}
.breadcrumb-separator {
    @apply mx-2 text-gray-400;
}
.breadcrumb-link {
    @apply hover:text-forest-600 transition;
}
.breadcrumb-current {
    @apply text-forest-600 font-medium;
}

/* Image lazy loading fade-in */
img[loading="lazy"] {
    opacity: 0;
    transition: opacity 0.3s ease-in;
}
img[loading="lazy"].loaded,
img[loading="lazy"]:not([src=""]) {
    opacity: 1;
}

/* Focus styles for accessibility */
*:focus-visible {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

/* Print styles */
@media print {
    .no-print,
    nav,
    footer,
    .uk-offcanvas,
    .fixed {
        display: none !important;
    }
    body {
        background: white !important;
        color: black !important;
    }
}

/* Reduced motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Dark mode support (optional, can be enabled) */
@media (prefers-color-scheme: dark) {
    .dark-mode-enabled {
        @apply bg-gray-900 text-gray-100;
    }
}

/* Loading skeleton */
.skeleton {
    @apply animate-pulse bg-gray-200 rounded;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .page-hero h1 {
        font-size: 2rem !important;
    }
    .error-code {
        font-size: 5rem !important;
    }
}