/*
Theme Name: CloudPro Child
Theme URI: https://www.aliymz.com
Description: CloudPro 子主题，修复 my-account 子页面用户名显示 + UI 样式。
Author: WorkBuddy
Author URI: https://www.aliymz.com
Template: cloudpro
Version: 1.0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: cloudpro-child
*/

/* ===== ymp-ui-fix-20260716 ===== */

/* 0. 全局防御：根元素满铺 + 禁止横向溢出 + 统一盒模型
   —— 防止手机缩放（pinch-zoom）时全宽深色块右侧/底部露出 body 浅色背景 */
html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    box-sizing: border-box !important;
}
*, *::before, *::after {
    box-sizing: border-box !important;
}

/* 1. 面包屑颜色修复 */
.breadcrumb,
.woocommerce-breadcrumb {
    color: #374151 !important;
}
.breadcrumb a,
.woocommerce-breadcrumb a {
    color: #2563eb !important;
}

/* 2. 订单详情页概览框对齐 */
@media (max-width: 768px) {
    .woocommerce-order-overview {
        width: 100% !important;
        box-sizing: border-box !important;
        margin: 0 0 16px !important;
        padding: 16px !important;
        border-radius: 12px !important;
        border: 1px solid #e5e7eb !important;
        background: #fff !important;
    }
    .woocommerce-order-overview li {
        width: 50% !important;
        float: left !important;
        text-align: center !important;
        border-bottom: 1px solid #eee !important;
        padding: 8px 0 !important;
    }
}

/* 3. 手机端恢复简洁头部 */
@media (max-width: 768px) {
    header.site-header a.header-tool {
        display: none !important;
    }
    body.woocommerce-account div.page-head {
        display: none !important;
    }
}

/* 4. 仪表盘页内容区圆角白卡对齐 */
@media (max-width: 768px) {
    body.woocommerce-account.woocommerce-dashboard .woocommerce-MyAccount-content {
        background: #fff !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 16px !important;
        padding: 18px 16px !important;
        margin: 0 0 16px !important;
        box-sizing: border-box !important;
    }
}

/* 5. 隐藏移动端 admin-bar */
@media (max-width: 768px) {
    #wpadminbar {
        display: none !important;
    }
    body {
        margin-top: 0 !important;
    }
}

/* 6. 手机端 footer 2×2 两列网格排版（品牌占满整行，下方 4 个链接列 2×2） */
@media (max-width: 768px) {
    .site-footer {
        padding: 40px 0 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    .site-footer .footer-cols {
        grid-template-columns: 1fr 1fr !important;
        gap: 30px 30px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .site-footer .footer-brand {
        grid-column: 1 / -1 !important;
        margin-bottom: 4px !important;
    }
    .site-footer .footer-brand p {
        max-width: 100% !important;
    }
    .site-footer .footer-bottom {
        margin-top: 28px !important;
        padding: 18px 12px !important;
    }
}

/* 7. 手机端商品页：覆盖父主题 gallery 固定 540px，让图片与标题紧贴 */
@media (max-width: 768px) {
    body.single-product .woocommerce-product-gallery.woocommerce-product-gallery--with-images,
    body.single-product .woocommerce-product-gallery {
        flex: 0 0 auto !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: auto !important;
    }
    body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__wrapper,
    body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image,
    body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image a {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
    }
    body.single-product .woocommerce-product-gallery .woocommerce-product-gallery__image img {
        width: 100% !important;
        height: auto !important;
        display: block !important;
    }
}

/* 8. 手机端隐藏导航注册按钮（顶部蓝色注册按钮 + 菜单底部注册入口，不删HTML只隐藏） */
@media (max-width: 768px) {
    .header-auth .btn.header-register,
    .mobile-tools a[href*="page_id=43"] {
        display: none !important;
    }
}

/* 9. 手机端文章页：修复容器溢出错位 + 隐藏日期/作者（保留分类） */
@media (max-width: 768px) {
    /* grid 容器改为单列自适应，覆盖父主题固定 350px 列宽 */
    .single-post .layout-with-sidebar {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* 文章卡片：手机端满铺，无灰色边距，内容内边距 12px */
    .single-post article.content-card {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
        border-top: 1px solid #e5e7eb !important;
        border-bottom: 1px solid #e5e7eb !important;
    }
    /* 头部/元信息/内容区取消内边距，与标题区内容宽度对齐（vw-40） */
    .single-post .entry-header,
    .single-post .entry-meta,
    .single-post .entry-content {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    /* 段落/列表/标题充满卡片宽度 */
    .single-post .entry-content p,
    .single-post .entry-content li,
    .single-post .entry-content h2,
    .single-post .entry-content h3 {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }
    /* 图片自适应 */
    .entry-content img,
    .entry-content figure,
    .entry-content .wp-block-image {
        max-width: 100% !important;
        height: auto !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
    /* 段落字号行距 */
    .entry-content p {
        font-size: 16px !important;
        line-height: 1.75 !important;
        margin-bottom: 16px !important;
        overflow-wrap: break-word !important;
    }
    .entry-content h2,
    .entry-content h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
    }
    /* 防止表格/代码块溢出 */
    .entry-content table,
    .entry-content pre,
    .entry-content iframe {
        max-width: 100% !important;
        overflow-x: auto !important;
    }
}

/* 10. 手机端标题区：满铺纯深色，breakout 强制跟随视口，避免边缘发白不自适应；文章页标题更紧凑 */
@media (max-width: 768px) {
    .page-head {
        width: 100vw !important;
        max-width: 100vw !important;
        min-width: 100vw !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
        background: #1b2330 !important;
        background-color: #1b2330 !important;
        background-image: none !important;
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;
        background-attachment: scroll !important;
    }
    /* 彻底清除任何伪元素/渐变残留 */
    .page-head::before,
    .page-head::after {
        background: #1b2330 !important;
        background-image: none !important;
    }
    .single-post .page-head {
        padding: 64px 12px 8px 12px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        border-radius: 0 !important;
    }
    .single-post .page-head .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-post .page-head h1 {
        font-size: 28px !important;
        line-height: 1.3 !important;
        color: #fff !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* 11. 手机端文章页容器不再自带内边距，由各卡片自行 margin/padding 统一控制 */
    .single-post .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}

/* 12. 手机端文章页 UI 美化：分类小标签、段落间距、图片圆角 */
@media (max-width: 768px) {
    .single-post .entry-meta {
        margin-bottom: 18px !important;
    }
    .single-post .entry-meta a {
        display: inline-block !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
        background: #eff6ff !important;
        color: #2563eb !important;
        font-size: 13px !important;
        text-decoration: none !important;
    }
    .single-post .entry-content p {
        font-size: 16px !important;
        line-height: 1.75 !important;
        margin-bottom: 16px !important;
        overflow-wrap: break-word !important;
    }
    .single-post .entry-content h2,
    .single-post .entry-content h3 {
        font-size: 18px !important;
        line-height: 1.5 !important;
        margin-top: 24px !important;
        margin-bottom: 12px !important;
    }
    .single-post .entry-content img,
    .single-post .entry-content figure,
    .single-post .entry-content .wp-block-image {
        border-radius: 10px !important;
    }
}

/* 13. 手机端文章页：顶部导航 + 底部 footer + 面包屑，与文章 UI 全部满铺对齐。
   统一外框：x=0，宽 100%；统一内容水平内边距 12px，消除右侧灰色边距。 */
@media (max-width: 768px) {
    .single-post header.site-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        background: #1b2330 !important;
        background-color: #1b2330 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    .single-post header.site-header .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
    .single-post .site-footer {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100vw !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        overflow: hidden !important;
    }
    .single-post .site-footer .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .single-post .breadcrumb {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 12px !important;
    }
}

/* 14. 手机端分类/标签/归档页：同样满铺，消除标题区与内容卡片之间的灰色边距 */
@media (max-width: 768px) {
    .archive header.site-header,
    .category header.site-header,
    .tag header.site-header,
    .tax-cloud_tutorial header.site-header,
    .page header.site-header,
    .blog header.site-header,
    .search header.site-header {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        background: #1b2330 !important;
        background-color: #1b2330 !important;
        background-image: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-bottom: none !important;
        box-shadow: none !important;
    }
    .archive .page-head,
    .category .page-head,
    .tag .page-head,
    .tax-cloud_tutorial .page-head,
    .page .page-head,
    .blog .page-head,
    .search .page-head {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        left: 0 !important;
        right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        background: #1b2330 !important;
        background-color: #1b2330 !important;
        background-image: none !important;
        border-radius: 0 !important;
    }
    .archive .page-head::before,
    .archive .page-head::after,
    .category .page-head::before,
    .category .page-head::after,
    .tag .page-head::before,
    .tag .page-head::after,
    .page .page-head::before,
    .page .page-head::after,
    .blog .page-head::before,
    .blog .page-head::after,
    .search .page-head::before,
    .search .page-head::after {
        background: #1b2330 !important;
        background-image: none !important;
    }
    .archive .container,
    .category .container,
    .tag .container,
    .tax-cloud_tutorial .container,
    .page .container,
    .blog .container,
    .search .container {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .archive .layout-with-sidebar,
    .category .layout-with-sidebar,
    .tag .layout-with-sidebar,
    .tax-cloud_tutorial .layout-with-sidebar,
    .page .layout-with-sidebar,
    .blog .layout-with-sidebar,
    .search .layout-with-sidebar {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .archive .content-card,
    .category .content-card,
    .tag .content-card,
    .tax-cloud_tutorial .content-card,
    .page .content-card,
    .blog .content-card,
    .search .content-card,
    .archive article,
    .category article,
    .tag article,
    .tax-cloud_tutorial article,
    .page article,
    .blog article,
    .search article {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 20px 12px !important;
        box-sizing: border-box !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        border-left: none !important;
        border-right: none !important;
    }
/* 15. 手机端移动导航菜单：子列标题（不可点击）与 子链接（可点击）文字颜色区分 */
@media (max-width: 768px) {
    .mobile-menu .sub .sub-title {
        color: #ffffff !important;
        font-weight: 600 !important;
    }
    .mobile-menu .sub a:not(.sub-title) {
        color: #9aa5ab !important;
    }
    .mobile-menu .sub a:not(.sub-title):hover,
    .mobile-menu .sub a:not(.sub-title):active {
        color: #ff8a2d !important;
    }
}