/* Shared premium UI utilities layered on top of Tailwind */
.btn-primary{ @apply bg-primary text-white rounded-md px-5 py-2.5 hover:bg-primary/90 transition-all shadow-sm hover:shadow-md; }
.btn-outline{ @apply border border-primary text-primary rounded-md px-5 py-2.5 hover:bg-primary/5 transition-colors; }
.btn-ghost{ @apply text-primary hover:text-primary/80 px-3 py-2; }
.btn-pill{ @apply inline-flex items-center justify-center rounded-full px-5 py-2 bg-white text-gray-700 border border-gray-200 hover:border-primary hover:text-primary transition-all shadow-sm; }
.badge-soft{ @apply inline-block px-2.5 py-1 rounded-full text-xs bg-primary/10 text-primary; }
.badge-accent{ @apply inline-block px-2.5 py-1 rounded-full text-xs bg-accent/10 text-accent; }
.card{ @apply bg-white rounded-xl shadow-sm hover:shadow-md transition-shadow; }
.section-title{ @apply text-[clamp(1.6rem,4vw,2.3rem)] font-bold; }
.subtle{ @apply text-gray-600; }
.container-narrow{ @apply max-w-5xl mx-auto; }
.divider{ @apply h-px w-full bg-gray-100; }
.nav-active{ @apply text-primary font-medium; }
.footer-title{ @apply text-white text-lg font-semibold mb-4; }
.newsletter-input{ @apply w-full px-4 py-2 rounded-md bg-white/10 text-gray-100 placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-primary/50; }
.newsletter-btn{ @apply bg-primary text-white px-4 py-2 rounded-md hover:bg-primary/90 transition-colors; }

/* Navigation enhancements */
.nav-link {
    @apply relative;
}
.nav-link::after {
    content: '';
    @apply absolute bottom-0 left-0 h-0.5 w-0 bg-primary transition-all duration-300;
}
.nav-link:hover::after,
.nav-link.text-primary::after {
    @apply w-full;
}

/* Mobile touch improvements */
.touch-manipulation {
    touch-action: manipulation;
}

/* Accessibility improvements */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Focus styles for keyboard navigation */
.keyboard-navigation *:focus {
    outline: 2px solid #1a936f !important;
    outline-offset: 2px !important;
}

/* Skip to content link */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #1a936f;
    color: white;
    padding: 8px;
    text-decoration: none;
    z-index: 1000;
    border-radius: 4px;
}

.skip-link:focus {
    top: 6px;
}

/* Mobile menu improvements */
@media (max-width: 1023px) {
    .mobile-menu-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
    
    .mobile-menu-item:active {
        background-color: rgba(59, 130, 246, 0.1);
    }
    
    /* 移动端菜单按钮优化 */
    #menuBtn {
        min-width: 44px;
        min-height: 44px;
        display: flex !important;
        align-items: center;
        justify-content: center;
        z-index: 1000;
        position: relative;
    }
    
    #menuBtn:active {
        background-color: rgba(59, 130, 246, 0.1);
        transform: scale(0.95);
    }
    
    /* 确保移动端菜单可见 */
    #mobileMenu {
        z-index: 999;
        position: relative;
    }
}

/* page layout helpers */
.section-intro{ @apply text-center mb-10; }
.grid-3{ @apply grid grid-cols-1 md:grid-cols-3 gap-6; }
.grid-2{ @apply grid grid-cols-1 md:grid-cols-2 gap-6; }