/* ============================================================
   证书查询系统 - 全局自适应 / H5 样式
   配合 Tailwind CDN 使用；本文件承载各页面原先分散的自定义工具类，
   改为纯 CSS 实现，避免重复编译并提升性能。
   ============================================================ */

:root {
    --primary: #0F52BA;
    --ability: #F59E0B;
}

/* ---------- 基础与可访问性 ---------- */
* { -webkit-tap-highlight-color: transparent; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Inter', system-ui, -apple-system, 'Microsoft YaHei', 'PingFang SC', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden; /* 防止移动端横向滚动 */
}

img { max-width: 100%; height: auto; }

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: rgba(15, 82, 186, .3); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: rgba(15, 82, 186, .55); }
::-webkit-scrollbar-track { background: #f1f5f9; }

/* ---------- 移动端导航抽屉 (H5) ---------- */
#mobileMenu {
    transition: transform .3s ease, opacity .3s ease;
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}
#mobileMenu.open { transform: translateX(0); opacity: 1; pointer-events: auto; }
#mobileOverlay { transition: opacity .3s ease; }
#mobileOverlay.is-hidden { opacity: 0; pointer-events: none; }

#menuToggle .bar { transition: transform .3s ease, opacity .3s ease; transform-origin: center; }
#menuToggle.active .bar1 { transform: translateY(7px) rotate(45deg); }
#menuToggle.active .bar2 { opacity: 0; }
#menuToggle.active .bar3 { transform: translateY(-7px) rotate(-45deg); }

body.menu-open { overflow: hidden; }

/* ---------- 进入动画 ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.animate-fade-in,
.fade-in { animation: fadeIn .5s ease-in-out both; }
.animate-slide-up,
.slide-up { animation: slideUp .5s ease-out both; }

/* ---------- 触摸友好：移动端输入字号 >=16px 防止 iOS 缩放 ---------- */
@media (max-width: 767px) {
    a, button, input, textarea, select { touch-action: manipulation; }
    input[type="text"], input[type="email"], input[type="search"], textarea { font-size: 16px; }
}

/* ---------- 悬浮客服安全区适配 (H5 刘海屏/底部指示条) ---------- */
.float-service {
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
    right: calc(1.5rem + env(safe-area-inset-right, 0px));
}

/* ============================================================
   页面自定义工具类（原 <style type="text/tailwindcss">，改为纯 CSS）
   ============================================================ */

.content-auto { content-visibility: auto; }

.text-shadow { text-shadow: 0 2px 4px rgba(0, 0, 0, .1); }

.gradient-overlay {
    background: linear-gradient(135deg, rgba(15, 82, 186, .9), rgba(30, 64, 175, .95));
}

/* 首页：证书类型卡片 */
.type-card {
    border-radius: .75rem;
    border: 2px solid #e5e7eb;
    padding: 1.5rem;
    transition: all .3s;
    cursor: pointer;
}
.type-card:hover { transform: translateY(-.25rem); }
.type-card-active {
    border-color: var(--primary);
    background: rgba(15, 82, 186, .05);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
    transform: scale(1.05);
}

/* 首页：其它项目卡片 */
.project-card {
    background: #fff;
    border-radius: .5rem;
    padding: 1rem;
    border: 1px solid #f3f4f6;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .05);
    transition: all .3s;
    display: flex;
    align-items: center;
    gap: .75rem;
    cursor: pointer;
}
.project-card:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, .07);
    border-color: rgba(15, 82, 186, .3);
}

/* 能力证书：卡片/状态/元信息 */
.cert-card {
    background: #fff;
    border-radius: .75rem;
    box-shadow: 0 4px 20px rgba(0, 0, 0, .08);
    border-top: 4px solid var(--ability);
    overflow: hidden;
    transition: all .3s;
}
.cert-card:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.cert-status {
    padding: .25rem .75rem;
    border-radius: 9999px;
    font-size: .875rem;
    font-weight: 500;
}
.cert-meta { font-size: .875rem; }
@media (min-width: 768px) { .cert-meta { font-size: 1rem; } }
.meta-label { color: #6b7280; display: block; margin-bottom: .25rem; }
.meta-value { font-weight: 500; color: #1f2937; }

/* 通用卡片悬浮 */
.card-hover { transition: all .3s ease; }
.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);
}

/* 按钮（pages.php） */
.btn-primary {
    background: var(--primary);
    color: #fff;
    padding: .75rem 1.5rem;
    border-radius: .5rem;
    font-weight: 500;
    transition: all .3s;
    display: inline-flex;
    align-items: center;
}
.btn-primary:hover { background: rgba(15, 82, 186, .9); box-shadow: 0 4px 6px rgba(0, 0, 0, .1); }

/* 区块标题（pages.php） */
.section-title {
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    font-weight: 700;
    color: #1D2129;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: .5rem;
}
.section-title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 4rem;
    height: .25rem;
    background: var(--primary);
    border-radius: 9999px;
}

/* ---------- 打印样式（证书 / 查询结果） ---------- */
@media print {
    header, footer, .no-print, .float-service, #mobileMenu, #mobileOverlay {
        display: none !important;
    }
    .certificate-print-area {
        box-shadow: none !important;
        border: none !important;
        width: 100% !important;
        margin: 0 !important;
    }
    body { background: #fff !important; padding: 0 !important; }
}

/* ============================================================
   H5 移动优先增强
   ============================================================ */

/* 全局触控目标最小尺寸（iOS HIG 推荐 ≥44px） */
.btn-h5,
a.btn-h5,
button.btn-h5 {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 移动端：表单控件统一 16px 字号，防止 iOS Safari 聚焦时页面缩放 */
@media (max-width: 767px) {
    input, textarea, select, button {
        font-size: 16px !important;
    }
    /* 主按钮在窄屏占满宽度，便于单手操作 */
    .btn-block-mobile {
        width: 100%;
    }
    /* 移动端横向间距收紧 */
    .container { padding-left: 1rem; padding-right: 1rem; }
    /* 隐藏桌面端才需要的辅助元素 */
    .hide-mobile { display: none !important; }
}

/* 长文本/数字在窄屏防溢出断词 */
.break-anywhere { word-break: break-word; overflow-wrap: anywhere; }

/* 富文本（.prose）移动端防溢出：图片/表格/预格式化块横向滚动 */
.prose img { max-width: 100%; height: auto; }
.prose table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.prose pre {
    white-space: pre-wrap;
    word-break: break-word;
}

/* 卡片内长串内容（证书编号等）防溢出 */
.truncate-safe {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* 安全区适配：悬浮层与返回顶部按钮避开 iPhone 底部指示条 */
.safe-bottom {
    bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}
.back-to-top-h5 {
    bottom: calc(5.5rem + env(safe-area-inset-bottom, 0px));
}