/**
 * 协会官网 · 移动端专用样式（手机 / 小屏）
 *
 * 【加载方式】functions.php 中通过 wp_enqueue_style 的第 5 个参数
 *   media="(max-width: 768px)" 挂载：宽屏电脑不会应用本文件，
 *   从物理层面保证「零影响电脑版」。因此本文件内规则默认即针对 ≤768px，
 *   无需再包一层 @media（仅需要更窄的 480px 微调时才内嵌 @media）。
 *
 * 【为何满是 !important】主样式表 assoc-main.css 历史遗留大量 !important 覆盖，
 *   本文件在其后加载，需同等 !important + .assoc-c 前缀方能稳定盖过，属无奈之举。
 *
 * 【断点】≤768 手机与小屏；≤480 小屏再微调。
 * @package astra-child
 * @since   2026-07-01
 */

/* ═══ 0. 全局：防横向溢出 + 容器边距 + 通栏元素归位 ═══ */
html, body { overflow-x: hidden !important; max-width: 100% !important; }
.assoc-c, .assoc-c .wrap { min-width: 0 !important; max-width: 100% !important; }
.assoc-c .wrap { padding-left: 15px !important; padding-right: 15px !important; }
.assoc-c img { max-width: 100% !important; height: auto !important; }

/* 通栏满宽元素（100vw + 负 margin）在有滚动条时会横向溢出，窄屏改回普通宽度 */
.assoc-c .assoc-hero-head,
.assoc-c .assoc-nav,
.assoc-c .topic-band {
  left: auto !important; right: auto !important; width: 100% !important;
  margin-left: 0 !important; margin-right: 0 !important;
}
.assoc-c .topic-band-primary,
.assoc-c .topic-band-secondary { margin-left: 0 !important; margin-right: 0 !important; }

/* ═══ 1. 顶栏 + 页头 ═══ */
.assoc-c .assoc-top .wrap { height: auto !important; min-height: 0 !important; padding: 6px 15px !important; }
.assoc-c .assoc-top .wrap > div:first-child { font-size: 11px !important; line-height: 1.5 !important; white-space: normal !important; }
.assoc-c .assoc-top .tools { display: none !important; }   /* 协会简介|联系方式：手机精简隐藏 */

.assoc-c .assoc-hero-head { min-height: 0 !important; }
.assoc-c .assoc-mast .wrap,
.assoc-c .assoc-hero-head .assoc-mast .wrap { min-height: 0 !important; padding-top: 14px !important; padding-bottom: 14px !important; justify-content: flex-start !important; }
.assoc-c .brand { gap: 11px !important; align-items: center !important; }
.assoc-c .brand img { width: 46px !important; height: 46px !important; border-radius: 10px !important; }
.assoc-c .brand-name { font-size: 17px !important; letter-spacing: 0 !important; line-height: 1.3 !important; white-space: normal !important; }
.assoc-c .brand-en { display: none !important; }           /* 英文行手机隐藏，避免拥挤 */
.assoc-c .mast-right { display: none !important; }         /* 口号+搜索：第一版手机隐藏，二期再优化搜索入口 */

/* ═══ 2. 主导航：汉堡菜单（JS 注入 .assoc-nav-toggle 并加 .has-toggle 后启用） ═══ */
/* 汉堡按钮本身：JS 用 inline style 默认设为 none，本表在 ≤768 强制显示 */
.assoc-c .assoc-nav-toggle { display: flex !important; flex-direction: column; justify-content: center; gap: 5px; width: 54px; height: 46px; padding: 0 15px; margin: 0; background: transparent; border: 0; cursor: pointer; }
.assoc-c .assoc-nav-toggle span { display: block; width: 24px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s, opacity .25s; }
.assoc-c .assoc-nav-toggle.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.assoc-c .assoc-nav-toggle.is-open span:nth-child(2) { opacity: 0; }
.assoc-c .assoc-nav-toggle.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 折叠导航（JS 生效时） */
.assoc-c .assoc-nav.has-toggle { padding: 0 !important; }
.assoc-c .assoc-nav.has-toggle > .wrap { display: none !important; flex-direction: column !important; align-items: stretch !important; padding: 0 !important; max-width: 100% !important; margin: 0 !important; }
.assoc-c .assoc-nav.has-toggle.nav-open > .wrap { display: flex !important; }

/* 纵向菜单项 */
.assoc-c .assoc-nav.has-toggle > .wrap > a,
.assoc-c .assoc-nav.has-toggle .nav-group { flex: none !important; width: 100% !important; border-left: 0 !important; border-top: 1px solid rgba(255,255,255,.15) !important; }
.assoc-c .assoc-nav.has-toggle > .wrap > a,
.assoc-c .assoc-nav.has-toggle .nav-group > a { display: block !important; text-align: left !important; padding: 13px 18px !important; font-size: 16px !important; line-height: 1.4 !important; letter-spacing: 0 !important; }

/* 顶级项（有子菜单）右侧 ▼ 指示 */
.assoc-c .assoc-nav.has-toggle .nav-group > a { position: relative !important; }
.assoc-c .assoc-nav.has-toggle .nav-group > a::after { content: ""; position: absolute; right: 20px; top: 50%; width: 8px; height: 8px; border-right: 2px solid rgba(255,255,255,.65); border-bottom: 2px solid rgba(255,255,255,.65); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.assoc-c .assoc-nav.has-toggle .nav-group.sub-open > a::after { transform: translateY(-30%) rotate(-135deg); }

/* 子菜单：手风琴展开 */
.assoc-c .assoc-nav.has-toggle .sub { display: none !important; position: static !important; box-shadow: none !important; border: 0 !important; background: rgba(0,0,0,.16) !important; }
.assoc-c .assoc-nav.has-toggle .nav-group.sub-open .sub { display: block !important; }
.assoc-c .assoc-nav.has-toggle .sub a { display: block !important; text-align: left !important; padding: 11px 18px 11px 32px !important; font-size: 15px !important; color: #eaf3fb !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; border-left: 0 !important; }

/* 降级：万一 JS 未生效（无 .has-toggle），纵向平铺 3 列，仍保证可点可用 */
.assoc-c .assoc-nav:not(.has-toggle) .wrap { flex-wrap: wrap !important; padding: 0 !important; }
.assoc-c .assoc-nav:not(.has-toggle) .wrap > a,
.assoc-c .assoc-nav:not(.has-toggle) .nav-group { flex: 0 0 33.333% !important; }

/* ═══ 3. 首页：信息横条 ═══ */
.assoc-c .intro-strip .wrap { flex-direction: column !important; align-items: flex-start !important; gap: 6px !important; padding-top: 9px !important; padding-bottom: 9px !important; font-size: 12.5px !important; }

/* ═══ 4. 首页主区：轮播 + 通知 + 面板（全部单列） ═══ */
.assoc-c .home-main { padding: 18px 0 !important; }
.assoc-c .first-row, .assoc-c .second-row { display: block !important; }
.assoc-c .first-row > *, .assoc-c .second-row > * { width: 100% !important; }
.assoc-c .first-row > * + *, .assoc-c .second-row > * + * { margin-top: 18px !important; }
.assoc-c .carousel-card { min-height: 340px !important; }
.assoc-c .carousel-card .carousel-slide { padding: 22px 18px !important; }
.assoc-c .carousel-card .carousel-copy h1 { font-size: 21px !important; line-height: 1.4 !important; white-space: normal !important; max-width: 100% !important; margin: 12px 0 10px !important; }
.assoc-c .carousel-card .carousel-copy p { font-size: 14px !important; line-height: 1.7 !important; max-width: 100% !important; }
.assoc-c .carousel-card .carousel-emblem { display: none !important; }
.assoc-c .assoc-carousel-arrow { opacity: 1 !important; }  /* 手机无 hover，箭头常显 */
.assoc-c .visual-points { grid-template-columns: repeat(2, 1fr) !important; }

/* 面板 / 列表 */
.assoc-c .panel { padding: 18px 16px !important; }
.assoc-c .panel-head { flex-wrap: wrap !important; }
.assoc-c .notice-list li { grid-template-columns: 52px minmax(0,1fr) !important; gap: 10px !important; }
.assoc-c .notice-list .date, .assoc-c .article-list .date { display: none !important; }  /* 窄屏隐藏日期，标题优先 */
.assoc-c .notice-list a, .assoc-c .article-list a { white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.assoc-c .filter { flex-wrap: wrap !important; gap: 6px !important; }

/* ═══ 5. 专题条（通栏）单列 ═══ */
.assoc-c .topic-band { min-height: 0 !important; margin: 18px 0 !important; }
.assoc-c .topic-band .wrap { display: block !important; min-height: 0 !important; grid-template-columns: none !important; padding: 20px 15px !important; }
.assoc-c .topic-mark { display: block !important; text-align: left !important; writing-mode: horizontal-tb !important; font-size: 18px !important; padding: 0 !important; border: 0 !important; background: transparent !important; margin: 0 0 8px !important; }
.assoc-c .topic-mark::before, .assoc-c .topic-mark::after { display: none !important; }
.assoc-c .topic-lines { padding: 0 !important; display: block !important; }
.assoc-c .topic-lines a { font-size: 19px !important; line-height: 1.4 !important; white-space: normal !important; overflow-wrap: anywhere !important; letter-spacing: 0 !important; }
.assoc-c .topic-desc { font-size: 13px !important; margin-top: 8px !important; letter-spacing: 0 !important; }
.assoc-c .topic-cta { display: none !important; }          /* 窄屏隐藏「进入专题」按钮，整条标题可点即可 */
.assoc-c .topic-band-national .topic-lines a { justify-content: flex-start !important; align-items: flex-start !important; text-align: left !important; }

/* ═══ 6. 工作索引 / 友情链接 / 页脚 ═══ */
.assoc-c .work-grid { grid-template-columns: 1fr !important; gap: 12px !important; }
.assoc-c .links-band .wrap { display: block !important; }
.assoc-c .links-title { margin-bottom: 8px !important; }
.assoc-c .links { gap: 8px 16px !important; }
.assoc-c .foot-cols { grid-template-columns: 1fr !important; gap: 22px !important; }
.assoc-c .foot-bottom { flex-direction: column !important; gap: 5px !important; text-align: left !important; }

/* ═══ 7. L2 栏目列表页 ═══ */
.assoc-c .assoc-l2 .crumb .wrap { min-height: 0 !important; padding-top: 10px !important; padding-bottom: 10px !important; font-size: 13px !important; flex-wrap: wrap !important; }
.assoc-c .l2-grid { display: block !important; padding: 18px 0 30px !important; }
.assoc-c .l2-main { margin-bottom: 26px !important; }
.assoc-c .l2-head { flex-wrap: wrap !important; gap: 4px 12px !important; }
.assoc-c .l2-head h1 { font-size: 19px !important; }
.assoc-c .news-list li { flex-wrap: wrap !important; gap: 4px 12px !important; min-height: 0 !important; padding: 11px 2px !important; }
.assoc-c .news-list .t { white-space: normal !important; font-size: 15.5px !important; line-height: 1.5 !important; flex: 1 1 100% !important; }
.assoc-c .news-list .d { font-size: 12.5px !important; padding-left: 17px !important; }
.assoc-c .l2-side { display: block !important; grid-template-columns: none !important; }  /* 侧栏移到正文下方，单列 */
.assoc-c .side-box { margin-bottom: 16px !important; }
.assoc-c .pager { justify-content: center !important; }
.assoc-c .pager a, .assoc-c .pager span { min-width: 32px !important; height: 32px !important; font-size: 13px !important; }

/* ═══ 8. 文章详情页 ═══ */
.assoc-c .art-title { font-size: 21px !important; text-align: left !important; line-height: 1.5 !important; }
.assoc-c .page .art-title { font-size: 20px !important; }
.assoc-c .art-meta { justify-content: flex-start !important; gap: 5px 14px !important; font-size: 13px !important; }
.assoc-c .assoc-l2 .entry-content { font-size: 16px !important; line-height: 1.9 !important; }
.assoc-c .assoc-l2 .entry-content h2 { font-size: 18px !important; }
.assoc-c .assoc-l2 .entry-content h3 { font-size: 16px !important; }
/* 关键：宽表格改为可横向滚动，避免撑破页面 */
.assoc-c .assoc-l2 .entry-content table { display: block !important; width: 100% !important; max-width: 100% !important; overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
.assoc-c .art-nav a, .assoc-c .art-nav span { white-space: normal !important; }

/* ═══ 9. ≤480 小屏再微调 ═══ */
@media (max-width: 480px) {
  .assoc-c .brand-name { font-size: 15.5px !important; }
  .assoc-c .carousel-card { min-height: 300px !important; }
  .assoc-c .carousel-card .carousel-copy h1 { font-size: 19px !important; }
  .assoc-c .topic-lines a { font-size: 17px !important; }
}