/*
Theme Name: 搜狗SEO-手机版 (精修版)
*/

/* ==========================================
   1. 移动端全局基础重置 (让页面更干净)
   ========================================== */
* {
    box-sizing: border-box;
}

body, html {
    margin: 0;
    padding: 0;
    /* 采用苹果系统默认的无衬线字体，最耐看 */
    font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", sans-serif;
    background-color: #f5f6f7; /* 极其浅的灰底色，为了衬托后面的纯白内容块 */
    -webkit-tap-highlight-color: transparent; 
}

/* ==========================================
   2. 顶部淡绿色导航栏 (天极网风格重塑)
   ========================================== */
.m-header {
    position: sticky; /* 吸顶功能 */
    top: 0;
    z-index: 999;
    height: 50px; /* 标准移动端触控高度 */
    background-color: #f0fbf0; /* 极其清新高级的淡绿色 */
    display: flex;
    justify-content: space-between; /* 左右元素靠边，中间元素居中 */
    align-items: center;
    padding: 0 15px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); /* 几乎察觉不到的轻微阴影，增加立体感 */
}

/* 左侧和右侧的图标按钮 */
.m-header-side {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #2e7d32; /* 图标颜色用深一点的绿色，呼应淡绿背景 */
}

.m-header-side svg {
    width: 22px;
    height: 22px;
}

/* 中间的 Logo 容器 */
.m-header-center {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 如果你用图片 Logo，这是图片的样式 */
.m-header-logo {
    /* 建议高度设为 26px 到 30px 之间，这样看起来最精致 */
    height: 28px; 
    width: auto;
    display: block;
    /* 消除图片下方的微小间隙 */
    vertical-align: middle; 
}



/* ==========================================
   3. 移动端搜索框 (默认隐藏，点击展开)
   ========================================== */
.m-search-box {
    display: none; /* 默认隐藏 */
    padding: 10px 15px;
    background-color: #fff;
    box-shadow: 0 4px 6px rgba(0,0,0,0.04);
    position: absolute; /* 悬浮在内容上方 */
    width: 100%;
    z-index: 998;
}

/* 当 JS 给它加上 active 类名时显示 */
.m-search-box.active {
    display: block;
    animation: slideDown 0.2s ease-out; /* 顺滑的展开动画 */
}

@keyframes slideDown {
    from { transform: translateY(-10px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.m-search-box form {
    display: flex;
    gap: 10px;
}

.m-search-box input {
    flex: 1;
    padding: 8px 15px;
    border: 1px solid #e0e0e0;
    border-radius: 20px; /* 圆角搜索框 */
    font-size: 14px;
    outline: none;
    -webkit-appearance: none; /* 消除苹果默认样式 */
}

.m-search-box input:focus {
    border-color: #2e7d32; /* 聚焦时变成主题绿 */
}

.m-search-box button {
    background: #2e7d32;
    color: #fff;
    border: none;
    padding: 0 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
}

/* ==========================================
   3. 核心视觉区：95% 宽度硬朗直角卡片
   ========================================== */
/* ==========================================
   3. 核心视觉区：修复居中 + 圆角悬浮卡片 (Complete Fix)
   ========================================== */
   
/* 3.1 大卡片容器 (95% 宽度, 圆角, 悬浮) */
.m-hero-section {
    position: relative;
    margin: 15px auto; /* 上下留空，自动左右居中 */
    width: 95%; /* 占屏幕 95% */
    padding: 25px 15px 20px; /* 增加一点上下内边距 */
    background-color: #fff;
    overflow: hidden; /* 极其重要：裁切掉模糊背景的溢出边缘 */
    
    /* 1. 圆角效果 */
    border-radius: 20px; 
    
    /* 2. 增强悬浮感：柔和的深投影 */
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    
    z-index: 1; /* 确保低于 header 的 999 */
    box-sizing: border-box; /* 确保 padding 不撑大 95% 的宽度 */
}

/* 3.2 虚影背景层 (ACF app_image) */
.m-hero-bg-blur {
    position: absolute;
    /* 略微收缩边缘，防止模糊边缘模糊到卡片外面去 */
    top: -10%; left: -10%; right: -10%; bottom: -10%;
    background-size: cover;
    background-position: center;
    filter: blur(25px); /* 保持清透的模糊度 */
    opacity: 0.18; /* 保持淡雅 */
    z-index: 0;
}

/* 3.3 内容容器：**核心修复居中** */
.m-hero-content {
    position: relative;
    z-index: 1; /* 在模糊背景之上 */
    
    /* 彻底修复居中的 Flexbox 逻辑 */
    display: flex;
    flex-direction: column; /* 子元素垂直堆叠 */
    align-items: center;    /* **水平方向绝对居中** */
    justify-content: center; /* 垂直方向居中 */
    text-align: center;     /* 兜底文字居中 */
}

/* 3.4 图标容器：固定大小，让 Flexbox 居中它 */
.m-icon-wrapper {
    position: relative;
    width: 85px; /* 大小微调 */
    height: 85px;
    margin-bottom: 12px;
    display: block; /* 确保它是块级元素，受 Flexbox 控制 */
}

/* 3.5 应用图标：增加质感的边框与圆角 */
.m-app-icon {
    width: 100%;
    height: 100%;
    
    /* 1. 圆角 */
    border-radius: 20px; /* 配合大外框，圆角略小一点 */
    
    /* 2. 简约好看的玻璃质感边框 */
    border: 2px solid rgba(255, 255, 255, 0.8);
    
    /* 3. 增强立体感的复合阴影 */
    box-shadow: 
        0 8px 15px rgba(0, 0, 0, 0.1), /* 立体投影 */
        0 0 0 1px rgba(0, 0, 0, 0.03); /* 锐化轮廓 */
        
    background-color: #fff;
    object-fit: cover;
    box-sizing: border-box; /* 确保边框不撑大图标 */
}

/* 3.6 皇冠样式微调 */
.m-crown-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    width: 26px;
    height: 26px;
    background: linear-gradient(135deg, #ffd700, #ffaa00);
    border-radius: 50%;
    border: 2px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(15deg);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.m-crown-badge svg {
    width: 14px; 
    height: 14px; 
    fill: #fff;
}

/* 3.7 标题和信息：保持干净 */
.m-app-title {
    font-size: 19px;
    font-weight: 800; /* 加粗 */
    color: #1a1a1a;
    margin: 5px 0 8px;
    line-height: 1.2;
}

.m-app-meta {
    display: flex; 
    gap: 10px;
    font-size: 12px; 
    color: #777; 
    background: rgba(255,255,255,0.7); /* 半透明白色标签 */
    padding: 3px 12px; 
    border-radius: 12px;
    backdrop-filter: blur(5px);
}

.m-app-meta span i {
    color: #ccc;
    margin: 0 3px;
    font-style: normal;
}

/* ==========================================
   4. 智能胶囊按钮：极简高光版
   ========================================== */
.m-download-wrap {
    width: 95%;
    margin: 15px auto 25px; /* 间距微调 */
}

.m-btn-pill {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 52px; /* 稍微减薄，更显精致 */
    border-radius: 50px;
    font-size: 17px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.2s ease;
    box-sizing: border-box;
}

/* 激活状态：生机绿 + 顶部细边高光 */
.m-btn-pill.active {
    background: linear-gradient(180deg, #00e676 0%, #00c853 100%);
    color: #fff;
    border: 1px solid #00b04a; /* 深色边框线 */
    /* 核心高光：顶部一道 0.5 透明度的细线 */
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.4), 
        0 4px 12px rgba(0, 200, 83, 0.2); 
}

/* 禁用状态：纯净灰 */
.m-btn-pill.disabled {
    background: #f5f5f5;
    color: #aaa;
    border: 1px solid #eee;
    pointer-events: none; /* 禁止点击 */
}

/* 点击反馈 */
.m-btn-pill.active:active {
    transform: scale(0.98); /* 极轻微缩放，手感更好 */
    opacity: 0.95;
}


/* ==========================================
   5. 简约面包屑导航 (Breadcrumbs)
   ========================================== */
.m-breadcrumb {
    width: 95%;
    margin: 12px auto 0; /* 距离顶部导航栏 12px，左右自动居中 */
    font-size: 12px; /* 字体要小，显精致 */
    color: #999;
    display: flex;
    align-items: center;
    white-space: nowrap; /* 强制不换行 */
    overflow: hidden; /* 超出部分隐藏 */
    text-overflow: ellipsis; /* 显示省略号 */
}

.m-breadcrumb a {
    color: #666; /* 链接颜色稍深 */
    text-decoration: none;
}

/* 分隔符样式 */
.m-breadcrumb .sep {
    margin: 0 6px;
    color: #ccc;
    font-family: simsun; /* 使用宋体让 ">" 看起来更正 */
}

/* 当前页面标题：颜色最淡，表示不可点 */
.m-breadcrumb .current {
    color: #bbb;
    flex: 1; /* 占据剩余空间 */
    overflow: hidden;
    text-overflow: ellipsis;
}