/**
 * sUx主题响应式CSS
 *
 * 这个文件包含了sUx主题的所有响应式样式，确保网站在不同设备上都能正常显示
 * 包括：桌面、平板、手机等不同尺寸的适配
 *
 * @package sUx
 */

/* ----------------------------------------
   超大屏幕 (1200px 以上)
   ---------------------------------------- */
@media screen and (min-width: 1200px) {
    .site-container {
        max-width: 1400px;
    }

    .hero-title {
        font-size: 56px;
    }

    .section-title {
        font-size: 42px;
    }

    .features-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ----------------------------------------
   大屏幕桌面 (992px - 1199px)
   ---------------------------------------- */
@media screen and (max-width: 1199px) {
    .site-container {
        padding: 0 15px;
    }

    .content-area {
        margin-right: 30px;
    }

    .sidebar {
        width: 280px;
    }

    .hero-title {
        font-size: 48px;
    }

    .features-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 25px;
    }

    .products-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ----------------------------------------
   平板设备 (768px - 991px)
   ---------------------------------------- */
@media screen and (max-width: 991px) {
    /* 导航菜单调整 */
    .menu-toggle {
        display: block;
    }

    .main-navigation {
        position: fixed;
        top: 0;
        right: -100%;
        width: 300px;
        height: 100vh;
        background-color: var(--sux-primary-color, #0066cc);
        z-index: 9999;
        transition: right 0.3s ease;
        overflow-y: auto;
    }

    .main-navigation.active {
        right: 0;
    }

    .main-menu {
        flex-direction: column;
        padding: 20px 0;
    }

    .main-menu li {
        width: 100%;
    }

    .main-menu a {
        padding: 15px 25px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .main-menu ul.sub-menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        background-color: rgba(0, 0, 0, 0.1);
        display: none;
    }

    .main-menu li:hover > ul.sub-menu {
        display: block;
    }

    .main-menu ul.sub-menu a {
        padding-left: 40px;
        color: #ffffff;
        border-bottom-color: rgba(255, 255, 255, 0.1);
    }

    /* 布局调整 */
    .site-main {
        flex-direction: column;
        margin: 30px 0;
    }

    .content-area {
        margin-right: 0;
        margin-bottom: 40px;
    }

    .sidebar {
        width: 100%;
    }

    /* 顶部栏调整 */
    .top-bar-content {
        flex-direction: column;
        gap: 15px;
    }

    .top-bar-left,
    .top-bar-right {
        width: 100%;
        justify-content: center;
    }

    /* 页脚调整 */
    .footer-widgets {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }

    /* 特色区域调整 */
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .products-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .hero-title {
        font-size: 42px;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: center;
        gap: 15px;
    }

    .btn-hero {
        width: 200px;
        text-align: center;
    }
}

/* ----------------------------------------
   小型平板/大屏手机 (576px - 767px)
   ---------------------------------------- */
@media screen and (max-width: 767px) {
    /* 基础调整 */
    body {
        font-size: 15px;
    }

    .site-container {
        padding: 0 12px;
    }

    /* 头部调整 */
    .header-content {
        padding: 15px 0;
    }

    .site-title {
        font-size: 24px;
    }

    .site-description {
        font-size: 13px;
    }

    /* 主要内容区域 */
    .site-main {
        margin: 20px 0;
    }

    /* 文章样式调整 */
    .post {
        margin-bottom: 25px;
    }

    .post-content {
        padding: 20px;
    }

    .entry-title {
        font-size: 20px;
    }

    .post-thumbnail img {
        height: 200px;
    }

    /* 小工具调整 */
    .widget {
        padding: 20px;
        margin-bottom: 20px;
    }

    .widget-title {
        font-size: 16px;
    }

    /* 特色区域调整 */
    .hero-section {
        padding: 60px 0;
    }

    .hero-title {
        font-size: 36px;
        margin-bottom: 15px;
    }

    .hero-subtitle {
        font-size: 18px;
        margin-bottom: 30px;
    }

    .section-title {
        font-size: 32px;
        margin-bottom: 15px;
    }

    .section-subtitle {
        font-size: 16px;
        margin-bottom: 40px;
    }

    .features-section,
    .products-section {
        padding: 60px 0;
    }

    .feature-item {
        padding: 30px 20px;
    }

    .product-content {
        padding: 20px;
    }

    .product-title {
        font-size: 16px;
    }

    /* 页脚调整 */
    .site-footer {
        padding: 40px 0 20px;
    }

    .footer-widgets {
        grid-template-columns: 1fr;
        gap: 30px;
        text-align: center;
    }

    .footer-bottom-content {
        flex-direction: column;
        gap: 15px;
        text-align: center;
    }

    .footer-social-links {
        justify-content: center;
    }

    /* 表单调整 */
    input[type="text"],
    input[type="email"],
    input[type="tel"],
    textarea,
    select {
        font-size: 16px; /* 防止iOS缩放 */
    }

    .search-form {
        flex-direction: column;
    }

    .widget_search .search-field {
        border-radius: 5px;
        margin-bottom: 10px;
    }

    .widget_search .search-submit {
        border-radius: 5px;
    }
}

/* ----------------------------------------
   手机设备 (最大576px)
   ---------------------------------------- */
@media screen and (max-width: 575px) {
    /* 导航菜单调整 */
    .main-navigation {
        width: 280px;
        right: -280px;
    }

    /* 文章列表调整 */
    .post-thumbnail img {
        height: 180px;
    }

    .post-content {
        padding: 15px;
    }

    .entry-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        font-size: 13px;
    }

    .entry-excerpt {
        font-size: 15px;
    }

    /* 分页调整 */
    .pagination {
        gap: 5px;
    }

    .page-numbers {
        min-width: 35px;
        height: 35px;
        font-size: 14px;
    }

    /* 特色区域调整 */
    .hero-section {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 28px;
        line-height: 1.2;
    }

    .hero-subtitle {
        font-size: 16px;
    }

    .btn-hero {
        width: 100%;
        max-width: 250px;
    }

    .section-title {
        font-size: 28px;
    }

    .features-grid,
    .products-grid {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .feature-item,
    .product-item {
        margin-bottom: 0;
    }

    .feature-icon {
        width: 60px;
        height: 60px;
        font-size: 28px;
    }

    .feature-title {
        font-size: 18px;
    }

    .feature-description,
    .product-description {
        font-size: 14px;
    }

    .product-image {
        height: 150px;
    }

    .product-content {
        padding: 15px;
    }

    /* 小工具区域调整 */
    .widget {
        padding: 15px;
    }

    .widget_search .search-submit {
        padding: 12px 15px;
    }

    /* 表单元素调整 */
    .form-row {
        margin-bottom: 15px;
    }

    .wpcf7-submit,
    .submit {
        width: 100%;
        padding: 12px 20px;
    }

    /* 留言区域调整 */
    .comment-list {
        padding-left: 20px;
    }

    .comment-body {
        padding: 15px;
    }

    .comment-author {
        display: block;
        margin-bottom: 10px;
    }

    .comment-metadata {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
    }

    .comment-content {
        font-size: 14px;
    }
}

/* ----------------------------------------
   超小屏幕 (最大400px)
   ---------------------------------------- */
@media screen and (max-width: 400px) {
    .hero-title {
        font-size: 24px;
    }

    .hero-subtitle {
        font-size: 14px;
    }

    .section-title {
        font-size: 24px;
    }

    .site-branding {
        gap: 10px;
    }

    .custom-logo {
        max-width: 150px;
    }

    .top-bar-left,
    .top-bar-right {
        flex-direction: column;
        gap: 8px;
    }

    .top-bar-info {
        font-size: 12px;
    }
}

/* ----------------------------------------
   特殊设备适配
   ---------------------------------------- */

/* iPhone X 系列适配 */
@media screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {
    .site-header {
        padding-top: 44px; /* 为刘海屏留出空间 */
    }
}

/* 横屏适配 */
@media screen and (max-height: 500px) and (orientation: landscape) {
    .hero-section {
        padding: 40px 0;
    }

    .hero-title {
        font-size: 32px;
    }

    .features-section,
    .products-section {
        padding: 40px 0;
    }
}

/* 打印样式 */
@media print {
    /* 隐藏不必要的元素 */
    .menu-toggle,
    .top-bar,
    .sidebar,
    .pagination,
    .comments-area,
    .site-footer,
    .back-to-top {
        display: none !important;
    }

    /* 调整内容区域 */
    .content-area {
        margin: 0;
        max-width: 100%;
    }

    body {
        font-size: 12pt;
        line-height: 1.4;
        color: #000;
        background: #fff;
    }

    .site-header {
        box-shadow: none;
        border-bottom: 1px solid #ccc;
    }

    .entry-title {
        font-size: 18pt;
        color: #000;
    }

    a {
        text-decoration: none;
        color: #000;
    }

    /* 显示链接的URL */
    a[href]:after {
        content: " (" attr(href) ")";
        font-size: 9pt;
    }

    .entry-excerpt:after {
        content: "...";
    }
}

/* ----------------------------------------
   高分辨率屏幕优化 (Retina显示屏)
   ---------------------------------------- */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* 优化高清屏幕下的图片显示 */
    .custom-logo,
    .post-thumbnail img,
    .product-image img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }

    /* 优化字体渲染 */
    body {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-rendering: optimizeLegibility;
    }
}

/* ----------------------------------------
   可访问性优化
   ---------------------------------------- */

/* 减少动画的用户偏好 */
@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;
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    .post,
    .widget,
    .feature-item,
    .product-item {
        border: 2px solid #000;
    }

    .site-header {
        border-bottom: 2px solid #000;
    }

    .read-more,
    .btn-hero,
    .product-link {
        border: 2px solid #000;
    }
}

/* 深色模式支持 */
@media (prefers-color-scheme: dark) {
    /* 可以在这里添加深色模式的样式 */
    /* 注意：这个主题使用浅色设计，可以根据需要添加深色模式支持 */
}