/*
 * ==========================================
 * 分类：全局标签云适配 (Global Tag Cloud Block) [纯净解耦版/架构级防御版]
 * 代码类型：CSS
 * ==========================================
 * 1. 业务功能：强制接管短代码输出的 BEM 结构，运用 Flexbox 流式布局。
 * 2. 核心架构：采用 :has() 动态感应机制，物理绞杀外部主题留白，告别脆弱的 Page ID 绑定。
 * 3. 针对页面：全局生效 (任何调用 mx_page_tags 短代码的区域)
 * 4. 性能开销：约 0.1 ms - [纯 CSS 内存渲染，无阻塞]
 * 最后修改：2026-06-27 - 升级为单层绝对控制逻辑
 */

/* =========================================
   🛡️ MX Matrix 终极防御：标签云留白绝对接管
========================================= */

/* 1. 外部绝对清零：只要内部存在标签云模块，直接干掉 WordPress 主题默认的 20px 留白 */
body .inside-article:has(.mx-page-tags-wrapper),
body .entry-content:has(.mx-page-tags-wrapper) {
    padding: 0 !important; 
}

/* 2. 中间层防线：剥夺 mx-container 默认的左右 20px 安全距离，防止边距二次叠加 */
.mx-matrix-wrapper:has(.mx-page-tags-wrapper) .mx-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* 3. 核心独揽大权：标签云容器自身掌管上下左右纯净 30px 的安全距离 */
.mx-matrix-wrapper .mx-page-tags-wrapper {
    padding: 30px; 
    background-color: transparent; 
}

/* ==========================================
 * 第三层防线：内部 BEM 组件渲染逻辑
 * ========================================== */

.mx-matrix-wrapper .mx-tags__list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; 
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 核心交互组件：依托防御盾覆盖默认样式，强制 48px 热区 */
.mx-matrix-wrapper .mx-tags__link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px; /* 强制防误触热区 */
    padding: 0 16px;
    color: var(--mx-text-gray, #555555); 
    background-color: #f5f5f5;
    border: none;
    border-radius: 0; /* 极致大厂工业风直角 */
    text-decoration: none;
    transition: background-color 0.2s ease, color 0.2s ease;
}

/* 悬停状态与 A11y 焦点可见性 */
.mx-matrix-wrapper .mx-tags__link:hover {
    background-color: var(--mx-accent-blue, #0056b3);
    color: var(--mx-bg-white, #ffffff);
}

.mx-matrix-wrapper .mx-tags__link:focus-visible {
    background-color: var(--mx-accent-blue, #0056b3);
    color: var(--mx-bg-white, #ffffff);
    outline: 2px solid var(--mx-text-dark, #222222);
    outline-offset: 2px;
}

/* ==========================================
 * 移动端断点适配 (Mobile Viewport)
 * ========================================== */

@media (max-width: 768px) {
    /* 手机端：上下保持 30px，左右精准收缩至 10px */
    .mx-matrix-wrapper .mx-page-tags-wrapper {
        padding: 30px 10px; 
    }
}
/* ----------逻辑结束---------- */