/* ==========================================================================
   文章正文排版修复（2026-09-18，参照模板 https://www.eddhealth.com/blogs/mens-health-foundation）
   背景：主题 webflow.css 的全局规则会漏进正文，导致
     ① h2 = 70px、h3 = 52px（巨幅标题）  ② p { margin-bottom: 0 }（段间无间距）
     ③ 正文内链接继承浅色（白字）+ 无下划线 → 基本看不见
   本文件作用域限定 .rich-text-block（文章正文容器），不影响页面其它区块。
   加载顺序：在 edd-webflow 之后，同优先级下后者生效；必要时加 !important（仅 CTA 覆盖行内样式用）。
   ========================================================================== */

.rich-text-block { font-size: 1rem; line-height: 1.85; color: #334155; }
.rich-text-block > *:first-child { margin-top: 0; }

/* 段落 */
.rich-text-block p { margin: 14px 0; font-size: 1rem; line-height: 1.85; color: #334155; }

/* 标题：文章级尺寸 + 菱形装饰（与参考模板一致） */
.rich-text-block h2 {
  margin: 42px 0 12px; font-size: clamp(1.4rem, 3.4vw, 1.95rem); line-height: 1.3;
  font-weight: 800; color: #09261d; letter-spacing: -.01em;
  display: flex; align-items: center; gap: 12px;
}
.rich-text-block h2::before {
  content: ""; width: 14px; height: 14px; flex: 0 0 auto; border-radius: 3px;
  background: linear-gradient(135deg, #01a19c, #0f6156); transform: rotate(45deg);
}
.rich-text-block h3 { margin: 24px 0 6px; font-size: 1.12rem; line-height: 1.4; font-weight: 700; color: #16203a; }
.rich-text-block h4 { margin: 18px 0 6px; font-size: 1.02rem; font-weight: 700; color: #16203a; }

/* 列表 */
.rich-text-block ul, .rich-text-block ol { margin: 14px 0; padding-left: 22px; }
.rich-text-block li { margin: 8px 0; font-size: 1rem; line-height: 1.8; color: #334155; }
.rich-text-block li::marker { color: #01a19c; }

/* 强调与链接：修复"白字不可见" */
.rich-text-block strong, .rich-text-block b { color: #09261d; font-weight: 700; }
.rich-text-block a { color: #0d8c85; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
.rich-text-block a:hover { color: #09261d; }

/* 图片 / 引用 / 表格 */
.rich-text-block img { max-width: 100%; height: auto; display: block; margin: 22px auto; border-radius: 16px; }
.rich-text-block figure { margin: 22px 0; }
.rich-text-block blockquote {
  margin: 20px 0; padding: 15px 18px; border-left: 4px solid #01a19c;
  background: #eefaf9; border-radius: 0 14px 14px 0; color: #334155;
}
.rich-text-block table { width: 100%; border-collapse: collapse; margin: 18px 0; font-size: .95rem; }
.rich-text-block th, .rich-text-block td { border: 1px solid #e3e9f5; padding: 10px 12px; text-align: left; }
.rich-text-block th { background: #f6f8fc; font-weight: 700; color: #09261d; }

/* 免责声明 */
.rich-text-block .disclaimer {
  margin: 24px 0; padding: 14px 18px; background: #f6f8fc; border: 1px solid #e3e9f5;
  border-radius: 12px; font-size: .85rem; line-height: 1.7; color: #6b7280;
}

/* CTA 区块：统一品牌样式；发文管道会写入行内色值，故用 !important 覆盖 */
.rich-text-block .cta-mid, .rich-text-block .cta-end {
  margin: 30px 0 !important; padding: 26px 24px !important; border: 0 !important;
  border-radius: 20px !important; text-align: center !important;
  background: linear-gradient(135deg, #0b3f38, #01a19c) !important;
}
.rich-text-block .cta-mid p, .rich-text-block .cta-end p {
  margin: 0 0 12px !important; color: #d9f3f1 !important; font-size: 1rem !important; line-height: 1.6 !important;
}
.rich-text-block .cta-mid p:last-child, .rich-text-block .cta-end p:last-child { margin-bottom: 0 !important; }
.rich-text-block .cta-mid strong, .rich-text-block .cta-end strong {
  display: block; color: #fff !important; font-size: 1.15rem !important; font-weight: 800; line-height: 1.4;
}
.rich-text-block .cta-mid a, .rich-text-block .cta-end a {
  display: inline-block !important; padding: 12px 28px !important; border-radius: 999px !important;
  background: #fff !important; color: #0b3f38 !important; font-size: .95rem !important;
  font-weight: 800 !important; text-decoration: none !important;
}
.rich-text-block .cta-mid a:hover, .rich-text-block .cta-end a:hover { background: #eafaf9 !important; color: #09261d !important; }

/* 移动端 */
@media (max-width: 768px) {
  .rich-text-block h2 { margin: 32px 0 10px; }
  .rich-text-block p, .rich-text-block li { line-height: 1.8; }
  .rich-text-block .cta-mid, .rich-text-block .cta-end { padding: 20px 16px !important; border-radius: 16px !important; }
}

/* ==========================================================================
   页面图片防拉伸（2026-09-18 唐总「图片都变形了」）
   根因：WP 输出的 width/height 属性（或主题固定高度）与实际图片文件比例不一致，
   浏览器按属性/固定高度渲染 → 竖向拉伸变形。
   .image-37 = 文章页特色图（实测 830x434 被渲染成 832x536，+19%）
   .image-24 = 首页配图（实测 250x87 被渲染成 260x121，+26%）
   height:auto 让高度跟随图片真实比例（不裁剪、不拉伸）。
   ========================================================================== */
.image-37, .image-24 { height: auto !important; }

/* 商品卡「需經醫生處方」角标：非处方品隐藏（对齐参考站 eddhealth.com/product 的 .text-block-233.isshowneeddoc）*/
.text-block-233.isshowneeddoc { visibility: hidden; }

/* ==========================================================================
   锚点跳转不被粘性导航遮挡（2026-09-19 唐总「h都拦住了」）
   根因：导航 .navbar 是 position:sticky 高 106px，页内锚点（SKU 标签页/FAQ/目錄）跳转后
   目标顶部正好落在 0px → 被导航盖住。用 scroll-padding-top/scroll-margin-top 预留空间。
   ========================================================================== */
html { scroll-padding-top: 130px; }
:target, [id] { scroll-margin-top: 130px; }
h1, h2, h3, h4 { scroll-margin-top: 130px; }

/* ==========================================================================
   页头 logo 不被 flex 横向挤压（2026-09-19 唐总「logo不是高度是宽度」）
   根因：.brand/.image-2 是 flex 子项且默认 flex-shrink:1，窄屏（手机 390px）时被压到
   80×48（比例 1.67）→ 与图片真实比例 2.618 不符 = 横向压缩，"Health" 最后一个 h 看着像被挡。
   修法：禁止收缩 + 宽度按比例自适应（高度仍 48px）。
   ========================================================================== */
.brand, .brand.w-nav-brand, a.brand { flex-shrink: 0 !important; }
.image-2 { flex-shrink: 0 !important; width: auto !important; }

/* ==========================================================================
   页头 logo 在所有断点都保持原始比例（2026-09-19 唐总「logo不是高度是宽度」）
   真凶：Webflow 克隆里的移动端规则
     @media (max-width:479px){ .brand{width:100px} }
     @media (max-width:991px){ .image-2{width:100%;height:auto} }
   → 窄屏时 logo 被压成 80×48（比例 1.67，真实 2.618）＝横向挤压，"Health" 的 h 像被挡。
   修法：固定高 48px + 宽度 auto + 父级不收缩/不限宽（覆盖上面两条 media 规则）。
   ========================================================================== */
.image-2 { height: 48px !important; width: auto !important; max-width: none !important; flex-shrink: 0 !important; }
.brand, a.brand, .brand.w-nav-brand { width: auto !important; max-width: none !important; flex-shrink: 0 !important; }