/**
 * 自定义样式 - 响应式优化
 * 补充 Tailwind CSS 的样式
 */

/* 全局响应式字体大小 */
html {
    font-size: 16px;
}

@media (max-width: 640px) {
    html {
        font-size: 14px;
    }
}

@media (min-width: 1024px) {
    html {
        font-size: 18px;
    }
}

/* 移动端优化：增大触摸目标 */
@media (max-width: 640px) {
    button, a, input, textarea, select {
        min-height: 44px; /* iOS 推荐的最小触摸目标 */
    }
    
    .option-button {
        min-height: 56px;
    }
}

/* 深色模式支持（可选） */
@media (prefers-color-scheme: dark) {
    /* 暂时不实现深色模式，保持浅色主题 */
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

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

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* 打印样式 */
@media print {
    nav, .language-toggle, button:not(.no-print) {
        display: none;
    }
}

/* 辅助功能：focus 样式 */
button:focus-visible, 
a:focus-visible,
input:focus-visible,
textarea:focus-visible {
    outline: 2px solid #3B82F6;
    outline-offset: 2px;
}

/* 加载动画优化 */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* 移动端：隐藏横向滚动 */
body {
    overflow-x: hidden;
}

/* 响应式容器最大宽度 */
.container {
    max-width: 100%;
}

@media (min-width: 640px) {
    .container {
        max-width: 640px;
    }
}

@media (min-width: 768px) {
    .container {
        max-width: 768px;
    }
}

@media (min-width: 1024px) {
    .container {
        max-width: 1024px;
    }
}

@media (min-width: 1280px) {
    .container {
        max-width: 1280px;
    }
}

/* 移动端：优化表单输入 */
@media (max-width: 640px) {
    input[type="text"],
    input[type="search"],
    textarea {
        font-size: 16px; /* 防止 iOS 自动缩放 */
    }
}

/* 卡片悬停效果在触摸设备上禁用 */
@media (hover: none) {
    .card-hover:hover {
        transform: none;
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

/* 文字选择样式 */
::selection {
    background-color: #3B82F6;
    color: white;
}

/* 图片响应式 */
img {
    max-width: 100%;
    height: auto;
}

/* 移动端：优化间距 */
@media (max-width: 640px) {
    .container {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 移动端：Stack 布局优化 */
@media (max-width: 640px) {
    .md\:flex-row {
        flex-direction: column;
    }
    
    .md\:space-x-3 > * + * {
        margin-left: 0;
        margin-top: 0.75rem;
    }
}