/*
 * 正文排版（前台 + 后台编辑区共用）。
 *
 * 后台 RichEditor 存的正文是 HTML，排版只能按容器接管。原先这两套样式分别写在
 * product.blade.php 与 partials/legal/legal-page.blade.php 的 @push('head') 里，
 * 后台编辑区够不着（面板拿不到前台视图的 @push），于是「编辑时看到的样子」和前台对不上。
 * 现在收进这份文件，前台由 site/partials/head.blade.php 引，后台由 AdminPanelProvider
 * 的 STYLES_AFTER 钩子引（必须排在 Filament 主题之后，否则压不过 .fi-prose）。
 *
 * 这里是**普通 CSS 文件**：不经 Tailwind 编译，所以用不了 @apply/工具类，取值一律用
 * 站点编译产物里的设计令牌（--color-* / --font-* / --spacing）。顺带解掉了原来的一个坑——
 * 写在 Blade 的 <style> 里不能出现 @（会被 Blade 当指令编译），所以那段样式一直没法用 @media；
 * 独立文件里没有这个限制。
 *
 * 谁在哪儿用哪一套，见 app/Support/ArticleBodyStyle.php（后台按分类选同一套）。
 */

/* 服务详情页（/services/...，模板里 class="product-body"） */
.product-body {
    font-family: var(--font-body);
    color: var(--color-gray-700);
}

.product-body > :first-child {
    margin-top: 0;
}

.product-body h2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 4);
}

.product-body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-base);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: 0 0 var(--spacing);
}

.product-body p {
    margin: 0 0 calc(var(--spacing) * 4);
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

/* 正文列表项自带「• 」（内容同事照前台结果录的），所以要去掉浏览器默认圆点，否则是「• • x」 */
.product-body ul {
    margin: 0 0 calc(var(--spacing) * 4);
    padding-left: 0;
    list-style: none;
}

.product-body li {
    font-size: var(--text-sm);
    line-height: var(--leading-relaxed);
}

.product-body li + li {
    margin-top: calc(var(--spacing) * 2);
}

.product-body li p {
    margin: 0;
}

/* 有的正文把段标题整段包在 <strong> 里（如中文的 <h2><strong>产品概述</strong></h2>）：
   不压掉的话标题会比同级的其它标题粗一档 */
.product-body h2 strong,
.product-body h3 strong {
    font-weight: inherit;
}

/* 法律页（privacy-policy / terms-of-business，模板里 class="legal-body"） */
.legal-body {
    font-family: var(--font-body);
    color: var(--color-gray-700);
}

.legal-body > :first-child {
    margin-top: 0;
}

.legal-body h2 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-2xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-gray-900);
    margin: calc(var(--spacing) * 10) 0 calc(var(--spacing) * 4);
}

.legal-body h3 {
    font-family: 'Outfit', sans-serif;
    font-size: var(--text-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-gray-900);
    margin: calc(var(--spacing) * 6) 0 calc(var(--spacing) * 3);
}

.legal-body p {
    margin: 0 0 calc(var(--spacing) * 4);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* 条款标题普遍整段包在 strong 里（如 1. Introduction），不压掉就会比同级标题粗一档 */
.legal-body h2 strong,
.legal-body h3 strong {
    font-weight: inherit;
}

.legal-body a {
    color: var(--color-primary);
    text-decoration: underline;
}

.legal-body ul,
.legal-body ol {
    margin: 0 0 calc(var(--spacing) * 4);
    padding-left: calc(var(--spacing) * 6);
}

.legal-body ul {
    list-style: disc;
}

.legal-body ol {
    list-style: decimal;
}

.legal-body li {
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
}

/* 联系方式、监管信息这类高亮段落在后台存成 blockquote */
.legal-body blockquote {
    margin: 0 0 calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
    background: var(--color-gray-50);
    border-left: 3px solid var(--color-primary);
    border-radius: var(--radius-lg);
}

.legal-body blockquote > :last-child {
    margin-bottom: 0;
}

/* 代理商名录是后台表格控件存的，单元格里带 p，所以要去掉 p 的下边距 */
.legal-body table {
    width: 100%;
    margin: 0 0 calc(var(--spacing) * 6);
    border-collapse: collapse;
}

.legal-body td,
.legal-body th {
    border: 1px solid var(--color-gray-200);
    padding: calc(var(--spacing) * 2) calc(var(--spacing) * 3);
    text-align: left;
    vertical-align: top;
}

.legal-body td p,
.legal-body th p {
    margin: 0;
    font-size: var(--text-sm);
}

/* 单独成段的联系邮箱在后台被存成 pre/code，别让它按等宽字体原样铺开 */
.legal-body pre {
    margin: 0 0 calc(var(--spacing) * 6);
    padding: calc(var(--spacing) * 4) calc(var(--spacing) * 5);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    overflow-x: auto;
}

.legal-body pre code {
    font-family: var(--font-body);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    white-space: pre-wrap;
}

/*
 * 药丸式单选（label 包一颗 sr-only 的 input；当前用在门户的家庭成员性别字段）。
 *
 * 真正的 input 是视觉隐藏的，点 label 就能选中（浏览器原生行为），所以「哪一颗被选中」
 * 只能靠 label 的类串表达。导出里那是 Alpine 的 :class 绑定——选中 border-teal bg-teal/5
 * text-teal、未选中 border-ink-border text-ink-body hover:border-teal——而 :class 是**随点击
 * 变化**的活状态，只把首屏那一支服务端渲染出来是不够的：点另一颗时 radio 真的选中了，
 * 屏幕却纹丝不动，用起来就是「选不了」。
 *
 * 所以这里让样式直接跟着 DOM 的 checked 走：不需要 JS，不可能与提交值不同步，浏览器恢复
 * 表单状态（前进/后退、刷新）时也对。取值照导出那三个工具类解析出来的值。
 * :has() 认不出的旧浏览器会整条丢弃，退化成「看不出哪颗被选中」，不会出错。
 */
.form-choice:has(input:checked) {
    border-color: var(--color-teal);
    background-color: color-mix(in oklab, var(--color-teal) 5%, transparent);
    color: var(--color-teal);
}

/* 同一个 input 是视觉隐藏的，键盘走到它时得给个可见指示（导出里没有这一条） */
.form-choice:has(input:focus-visible) {
    outline: 2px solid var(--color-teal);
    outline-offset: 2px;
}