/* responsive.css - 响应式设计 */

/* 添加基础字体设置 */
body {
    font-size: 16px; /* 设置基础字体大小 */
}

@media (max-width: 1200px) {
    .sites-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (max-width: 992px) {
    .container {
        padding: 0 10px;
    }
    
    .search-area {
        flex-direction: column;
        text-align: center;
    }
    
    .search-section {
        padding-left: 0;
        padding-top: 15px;
        width: 100%;
    }
    
    .search-form {
        max-width: 100%;
    }
    
    .sites-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .categories-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .quick-links ul {
        justify-content: center;
        flex-wrap: wrap;
        gap: 15px;
    }
    
    .ad-left,
    .ad-right {
        display: none;
    }
    
    /* 平板字体调整 */
    .site-item a {
        font-size: 14px; /* 从原来的默认调大 */
    }
    
    .category-links a {
        font-size: 14px; /* 从原来的默认调大 */
    }
}

@media (max-width: 768px) {
    .datetime {
        text-align: center;
        font-size: 14px; /* 从12px调大到14px */
    }
    
    .logo-section {
        flex: 0 0 100%;
        margin-bottom: 15px;
    }
    
    .search-tabs {
        justify-content: center;
    }
    
    .search-tabs a {
        padding: 5px 10px; /* 增加内边距 */
        font-size: 14px; /* 从12px调大到14px */
    }
    
    .sites-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .categories-grid {
        grid-template-columns: 1fr;
    }
    
    .quick-links ul {
        flex-direction: column;
        gap: 10px;
    }
    
    .site-footer {
        padding: 15px 0;
    }
    
    .site-footer a {
        display: block;
        margin: 5px 0;
        font-size: 14px; /* 增加底部链接字体 */
    }
    
    /* 添加分类链接字体调整 */
    .category-links a {
        font-size: 14px; /* 增加字体 */
    }
}

@media (max-width: 480px) {
    .sites-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px; /* 增加间距 */
        padding: 12px; /* 增加内边距 */
    }
    
    .search-input-group {
        flex-direction: column;
        border: none;
        position: relative;
    }
    
    #keyword {
        border: 1px solid #cfe1fe;
        margin-bottom: 10px;
        border-radius: 4px;
        padding: 12px 30px 12px 12px; /* 增加内边距 */
        width: 100%;
        font-size: 16px; /* 增加输入框字体 */
    }
    
    .search-btn {
        width: 100%;
        padding: 12px; /* 增加按钮高度 */
        font-size: 16px; /* 增加按钮字体 */
    }
    
    .search-engine-select {
        flex-direction: column;
        gap: 8px;
        align-items: center;
    }
    
    .site-item a {
        font-size: 14px; /* 从12px调大到14px */
        padding: 8px 5px; /* 增加内边距 */
    }
    
    .category-card {
        padding: 12px; /* 增加内边距 */
    }
    
    .category-links {
        gap: 8px; /* 增加间距 */
    }
    
    .category-links a {
        font-size: 14px; /* 从11px调大到14px */
        padding: 5px 10px; /* 增加内边距 */
    }
    
    /* 在小屏幕上调整清除按钮位置 */
    .clear-btn {
        right: 15px !important;
        top: 25% !important;
        transform: translateY(-50%);
        width: 20px; /* 增加清除按钮大小 */
        height: 20px;
        font-size: 14px; /* 增加清除按钮字体 */
    }
    
    /* 添加时间字体调整 */
    .datetime {
        font-size: 13px; /* 增加时间字体 */
    }
}

/* 平板横向的特殊调整 */
@media (min-width: 481px) and (max-width: 768px) {
    .clear-btn {
        right: 70px !important;
    }
}

/* 打印样式 */
@media print {
    .topbar,
    .search-area,
    .ad-left,
    .ad-right,
    .site-footer {
        display: none;
    }
    
    .main-content {
        padding: 0;
    }
    
    .site-item a,
    .category-links a {
        border: none;
        background: none;
        color: #000;
    }
}

/* 超小屏幕特殊处理 */
@media (max-width: 360px) {
    .sites-grid {
        grid-template-columns: 1fr;
    }
    
    .search-tabs a {
        padding: 4px 8px; /* 增加内边距 */
        font-size: 13px; /* 从10px调大到13px */
    }
    
    .category-links a {
        font-size: 13px; /* 从10px调大到13px */
        padding: 4px 8px; /* 增加内边距 */
    }
    
    .site-item a {
        font-size: 14px; /* 保持14px */
        padding: 10px 5px; /* 增加内边距 */
    }
}

/* 添加桌面端字体优化 */
@media (min-width: 993px) {
    .site-item a {
        font-size: 14px; /* 桌面端使用14px */
    }
    
    .category-links a {
        font-size: 14px; /* 桌面端使用14px */
    }
    
    .search-tabs a {
        font-size: 14px; /* 桌面端使用14px */
    }
    
    .datetime {
        font-size: 14px; /* 桌面端使用14px */
    }
}