/* DaoFocus.com - Custom Styles */
/* Tailwind CSS is loaded via CDN, this file adds custom enhancements */

/* Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 
                 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    line-height: 1.7;
    overflow-x: hidden;
}

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

/* Navigation Styles */
.nav-link {
    @apply text-white px-4 py-2 rounded-lg font-medium transition-all duration-300;
    @apply hover:bg-white/10 hover:text-amber-100;
}

.nav-link.active {
    @apply bg-white/20 text-amber-50 font-bold;
}

.mobile-nav-link {
    @apply block px-4 py-3 text-white bg-white/5 rounded-lg;
    @apply hover:bg-white/15 transition-all duration-200;
}

/* Article Cards */
.article-card {
    @apply block bg-white dark:bg-slate-800 rounded-2xl p-8 shadow-lg;
    @apply transition-all duration-300 transform;
    @apply hover:shadow-2xl hover:-translate-y-2 hover:scale-105;
}

.article-icon {
    @apply text-6xl text-center mb-6;
}

.article-title {
    @apply text-2xl font-bold text-slate-800 dark:text-amber-100 mb-2;
}

.article-subtitle {
    @apply text-amber-600 dark:text-amber-400 font-semibold mb-4;
}

.article-description {
    @apply text-slate-700 dark:text-slate-300 mb-3 leading-relaxed;
}

.article-description-en {
    @apply text-sm text-slate-600 dark:text-slate-400 italic leading-relaxed mb-4;
}

.article-cta {
    @apply inline-block text-amber-600 dark:text-amber-400 font-semibold;
    @apply group-hover:translate-x-2 transition-transform duration-300;
}

/* Button Styles */
.btn-primary {
    @apply inline-block px-8 py-3 bg-white text-amber-700 rounded-full font-semibold;
    @apply shadow-lg hover:shadow-xl transform hover:scale-105 transition-all duration-300;
}

.btn-secondary {
    @apply inline-block px-8 py-3 bg-amber-700 text-white rounded-full font-semibold border-2 border-white;
    @apply hover:bg-white hover:text-amber-700 transform hover:scale-105 transition-all duration-300;
}

/* Content Section Styles */
.content-section {
    @apply mb-16 rounded-2xl shadow-xl p-8 md:p-12;
    @apply transform transition-all duration-500 hover:shadow-2xl;
}

.section-header {
    @apply mb-8 text-center;
}

.section-icon {
    @apply text-7xl mb-4;
}

.section-title {
    @apply text-3xl md:text-4xl font-bold text-slate-800 dark:text-amber-100 mb-2;
}

.section-subtitle {
    @apply text-lg text-slate-600 dark:text-slate-400 font-medium italic;
}

.section-content {
    @apply space-y-6;
}

.chinese-text {
    @apply text-lg text-slate-800 dark:text-slate-200 leading-relaxed;
    @apply bg-gradient-to-r from-slate-50 to-amber-50 dark:from-slate-700 dark:to-slate-600;
    @apply p-6 rounded-xl border-l-4 border-amber-500;
}

.english-text {
    @apply text-base text-slate-700 dark:text-slate-300 leading-relaxed italic;
    @apply bg-white dark:bg-slate-800 p-6 rounded-xl border-l-4 border-blue-500;
}

/* Footer Styles */
.footer-link {
    @apply text-slate-400 hover:text-amber-400 transition-colors duration-200;
}

/* Animations */
@keyframes fade-in {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in {
    animation: fade-in 1s ease-out;
}

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

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

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

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

::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #f59e0b, #ea580c);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(to bottom, #ea580c, #dc2626);
}

/* Dark Mode Scrollbar */
.dark ::-webkit-scrollbar-track {
    background: #1e293b;
}

.dark ::-webkit-scrollbar-thumb {
    background: linear-gradient(to bottom, #92400e, #78350f);
}

/* Responsive Typography */
@media (max-width: 768px) {
    .chinese-text {
        @apply text-base;
    }
    
    .english-text {
        @apply text-sm;
    }
    
    .section-icon {
        @apply text-5xl;
    }
}

/* Focus Styles for Accessibility */
a:focus,
button:focus {
    @apply outline-none ring-4 ring-amber-400 ring-opacity-50 rounded-lg;
}

/* Print Styles */
@media print {
    nav,
    footer,
    button {
        display: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
    
    .content-section {
        @apply shadow-none border border-slate-300;
        page-break-inside: avoid;
    }
}

/* Loading State */
.loading {
    @apply opacity-50 pointer-events-none;
}

/* Selection Color */
::selection {
    background-color: #fbbf24;
    color: #1e293b;
}

.dark ::selection {
    background-color: #78350f;
    color: #fef3c7;
}

/* Gradient Text */
.gradient-text {
    @apply bg-clip-text text-transparent;
    background-image: linear-gradient(to right, #f59e0b, #ea580c);
}

/* Card Hover Effects */
.hover-lift {
    @apply transition-transform duration-300;
}

.hover-lift:hover {
    @apply -translate-y-2;
}

/* Badge Styles */
.badge {
    @apply inline-block px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
    @apply bg-amber-100 text-amber-800 dark:bg-amber-900 dark:text-amber-200;
}

/* Divider */
.divider {
    @apply border-t-2 border-slate-200 dark:border-slate-700 my-8;
}

/* Tooltip - for future enhancement */
.tooltip {
    @apply invisible absolute bg-slate-900 text-white text-sm px-3 py-2 rounded-lg;
    @apply opacity-0 transition-opacity duration-300;
}

.tooltip-trigger:hover .tooltip {
    @apply visible opacity-100;
}