/* ==========================================================================
   site-header.css — 全站子站统一顶部导航（v2.46.0）
   --------------------------------------------------------------------------
   单一样式源：6 个子站（民法典学习 / 民法典理解与适用 / 公司法学习 /
   公司法理解与适用 / 法规库 / 案例库）共用，保证品牌区、本站标签栏、
   搜索框、「相关站点」下拉与响应式行为完全一致。

   v2.46.0 修正要点：
     1. .tab 增加 white-space:nowrap —— 原「民法典全文」等标签在窄屏被
        flex 压缩后折成两行、文字错位（截图为证），现一律不折字；
     2. .tabs 允许换行 + 溢出横向滚动，标签不再被挤压变形；
     3. 统一间距/圆角/字号令牌，各站视觉一致；
     4. 跨站入口收进「相关站点」下拉，本站内容与跨站入口分层。

   依赖各子站 :root 已定义的公共令牌：--line --line2 --txt --txt2 --txt3
   --head --card --bg
   ========================================================================== */

:root {
  --hd-pad-x: 16px;        /* 头栏左右内边距 */
  --hd-gap: 16px;          /* 头栏三大区域间距 */
  --hd-ctl-h: 34px;        /* 控件统一高度（搜索框 / 下拉按钮） */
  --hd-radius: 8px;
  --hd-radius-lg: 12px;
}

/* ---------- 头栏容器 ----------
   ★ 选择器限定为 header.hd：本站正文里若出现 div.hd 这类内容条，不会被吸顶样式误命中。
     （start.html 的「场景标题条」曾因类名撞车被粘在顶部、压在导航之上。）
   全站约 50 个子站页面的头部均为 <header class="hd">，限定元素名后视觉零变化。 */
header.hd {
  position: sticky; top: 0; z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--line);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
}
.hd-in {
  max-width: 1560px; margin: 0 auto;
  padding: 8px var(--hd-pad-x);
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--hd-gap);
}

/* ---------- 品牌区（固定，不参与压缩） ---------- */
.brand { display: flex; align-items: center; gap: 9px; color: var(--txt); flex: none; min-width: 0; }
.brand:hover { text-decoration: none; }
.brand .logo { font-size: 22px; line-height: 1; }
.bt { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.bt b { font-size: 14px; font-weight: 700; white-space: nowrap; }
.bt i { font-size: 12px; color: var(--head); font-style: normal; font-weight: 600; white-space: nowrap; }

/* ---------- 本站标签栏（不折字，可换行，可横向滚动） ---------- */
.tabs {
  display: flex; align-items: center; gap: 2px;
  flex: 1 1 auto; min-width: 0; flex-wrap: wrap;
}
.tab {
  display: inline-flex; align-items: center; flex: none;
  border: 0; background: transparent; cursor: pointer;
  padding: 7px 13px; border-radius: 7px;
  font-size: 14px; line-height: 1.5; font-family: inherit;
  color: var(--txt2); white-space: nowrap;   /* ★ 关键：禁止标签内文字换行 */
  text-decoration: none;
}
.tab:hover { background: #f2f4f7; color: var(--txt); text-decoration: none; }
.tab.on { background: #eef3f9; color: var(--head); font-weight: 600; }
.tab:focus-visible { outline: 2px solid var(--head); outline-offset: 1px; }

/* ---------- 右侧操作区 ---------- */
.hd-r {
  display: flex; align-items: center; gap: 10px;
  flex: none; margin-left: auto; min-width: 0;
}
.q {
  width: clamp(150px, 17vw, 260px);
  height: var(--hd-ctl-h); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--hd-radius);
  font-size: 13.5px; font-family: inherit; color: var(--txt);
  background: #fafbfc; outline: none;
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.q:focus { border-color: var(--head); background: #fff; box-shadow: 0 0 0 3px rgba(10, 46, 92, .08); }
.back { font-size: 13px; color: var(--txt2); white-space: nowrap; flex: none; }
.back:hover { color: var(--head); text-decoration: none; }

/* ---------- 「相关站点」下拉（跨站入口，与本站标签分层） ---------- */
.sites-dd { position: relative; flex: none; }
.sites-btn {
  display: inline-flex; align-items: center; gap: 5px;
  height: var(--hd-ctl-h); padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--hd-radius);
  background: #fff; color: var(--txt2);
  font-size: 13.5px; font-family: inherit; line-height: 1;
  white-space: nowrap; cursor: pointer;
  transition: border-color .15s, color .15s, background .15s;
}
.sites-btn:hover { border-color: var(--head); color: var(--head); background: #f7fafc; }
.sites-caret { font-size: 10px; opacity: .7; transition: transform .15s; }
.sites-dd.open .sites-caret { transform: rotate(180deg); }

.sites-menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  min-width: 268px; padding: 6px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--hd-radius-lg);
  box-shadow: 0 10px 30px rgba(15, 23, 42, .14);
  display: none; z-index: 60;
  max-height: min(70vh, 520px); overflow: auto;
}
.sites-dd.open .sites-menu { display: block; }
.sites-menu a {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 10px; border-radius: 9px; color: var(--txt);
}
.sites-menu a:hover { background: #f7f8fa; text-decoration: none; }
.sites-menu .si { font-size: 17px; line-height: 1.3; flex: none; }
.sites-menu .st { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.sites-menu .st b { font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.sites-menu .st small { font-size: 12px; color: var(--txt3); }

/* ---------- 响应式 ---------- */
@media (max-width: 1240px) {
  .q { width: clamp(132px, 15vw, 200px); }
}

/* 中屏：品牌 + 右侧同排；标签栏独占一行并横向滚动，避免折字变形 */
@media (max-width: 980px) {
  .hd-in { gap: 10px; padding: 8px 12px; }
  .brand { order: 1; }
  .hd-r { order: 2; }
  .tabs {
    order: 3; flex: 1 1 100%;
    flex-wrap: nowrap; overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; padding-bottom: 2px;
  }
  .tabs::-webkit-scrollbar { display: none; }
  .sites-menu { min-width: min(88vw, 288px); }
}

/* 小屏：品牌 → 标签栏 → 搜索/相关站点/返回 三行 */
@media (max-width: 620px) {
  .hd-in { gap: 8px; padding: 8px 10px; }
  .bt b { font-size: 13px; }
  .bt i { font-size: 11.5px; }
  .brand { order: 1; flex: 1 1 auto; }
  .tabs { order: 2; flex: 1 1 100%; }
  .hd-r { order: 3; flex: 1 1 100%; width: 100%; margin-left: 0; }
  .q { flex: 1 1 auto; width: auto; min-width: 0; }
  .back { font-size: 12.5px; }
}

/* 尊重系统「减少动效」偏好 */
@media (prefers-reduced-motion: reduce) {
  .q, .sites-btn, .sites-caret { transition: none; }
}

/* ==========================================================================
   v2.54.0 深蓝品牌皮肤（与 nuochi.cn 同色系，并比其更精细）
   --------------------------------------------------------------------------
   子站页头由「白底 + 灰线」改为「深蓝渐变 + 金色细线收口」，与主站页头
   （css/style.css 的 .app-header）形成同一视觉语言；右侧新增常驻的
   金色「全站导航」按钮，把跨站总目录放到用户一抬眼就能看到的位置。
   作用域全部限定在 header.hd 内，不影响子站正文令牌。
   ========================================================================== */
header.hd {
  background: linear-gradient(135deg, #061c37 0%, #0a2e5c 52%, #0d3567 100%);
  border-bottom: 0;
  box-shadow: 0 6px 20px rgba(6, 28, 55, .18);
}
header.hd::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, rgba(201,169,97,0), #c9a961 22%, #e6d5a8 50%, #c9a961 78%, rgba(201,169,97,0));
}
header.hd .brand, header.hd .brand:hover { color: #fff; }
header.hd .brand .logo {
  font-size: 20px; width: 36px; height: 36px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px; background: rgba(255,255,255,.10);
  border: 1px solid rgba(201,169,97,.42);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16);
}
header.hd .bt b { color: #fff; }
header.hd .bt i { color: #e2cd97; }
header.hd .tab { color: rgba(255,255,255,.84); }
header.hd .tab:hover { background: rgba(255,255,255,.11); color: #fff; }
header.hd .tab.on { background: rgba(255,255,255,.15); color: #fff; position: relative; }
header.hd .tab.on::after {
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 2px; height: 2px;
  border-radius: 2px; background: linear-gradient(90deg, #b8953e, #e6d5a8, #b8953e);
}
header.hd .tab:focus-visible { outline-color: #c9a961; }
header.hd .q {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.22); color: #fff;
}
header.hd .q::placeholder { color: rgba(255,255,255,.58); }
header.hd .q:focus {
  background: rgba(255,255,255,.17); border-color: #c9a961;
  box-shadow: 0 0 0 3px rgba(201,169,97,.24);
}
header.hd .back { color: rgba(255,255,255,.78); }
header.hd .back:hover { color: #e2cd97; }
header.hd .sites-btn {
  background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.24); color: #fff;
}
header.hd .sites-btn:hover {
  background: rgba(255,255,255,.17); border-color: #c9a961; color: #e2cd97;
}
/* 下拉面板保持白底（深蓝底上白卡对比最强，最易读） */
header.hd .sites-menu { background: #fff; }

/* ---------- 页眉「全站导航」金色按钮（v2.54.0） ---------- */
.hd-sitemap {
  display: inline-flex; align-items: center; gap: 6px; flex: none;
  height: var(--hd-ctl-h); padding: 0 14px; border-radius: var(--hd-radius);
  text-decoration: none; font-size: 13.5px; font-weight: 700;
  letter-spacing: .3px; white-space: nowrap; color: #2b2109;
  background: linear-gradient(135deg, #e2cd97 0%, #c9a961 48%, #b8953e 100%);
  border: 1px solid rgba(255,255,255,.34);
  box-shadow: 0 4px 14px rgba(184,149,62,.34), inset 0 1px 0 rgba(255,255,255,.5);
  transition: transform .16s, box-shadow .16s, filter .16s;
}
.hd-sitemap:hover {
  transform: translateY(-1px); filter: brightness(1.05);
  box-shadow: 0 7px 20px rgba(184,149,62,.46), inset 0 1px 0 rgba(255,255,255,.55);
  text-decoration: none; color: #2b2109;
}
.hd-sitemap:active { transform: translateY(0); }
.hd-sitemap .hds-ico { font-size: 14px; line-height: 1; }
@media (max-width: 980px) {
  .hd-sitemap .hds-txt { display: none; }
  .hd-sitemap { padding: 0 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .hd-sitemap { transition: none; }
}

/* ==========================================================================
   v4.4.2 全站统一免责声明（无页脚子的子站页专用）
   --------------------------------------------------------------------------
   适用：guide/ cause/ laws/ 下没有 <footer> 的 17 个页面。这些页面各自有不同
   版心宽度，故这里只给「浅底、小字、居中收口」的公共形态，宽度由页面上的
   style="max-width:XXXpx" 覆盖（默认 1180，与 guide 一致）。

   为什么不用品牌红：红色在浅底上做小字既刺眼又不够庄重，免责是法律性文字，
   用 --txt2（#5C636E，白底 6.06:1）做正文、品牌深蓝做电话号码强调即可。
   ========================================================================== */
.site-notice {
  max-width: 1180px;
  margin: 6px auto 28px;
  padding: 12px 18px 0;
  border-top: 1px solid var(--line, #e5e7eb);
  font-size: 12.5px;
  line-height: 1.9;
  color: var(--txt2, #5c636e);
  overflow-wrap: anywhere;
}
.site-notice a {
  color: var(--head, #0a2e5c);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
.site-notice a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .site-notice { padding: 12px 16px 0; margin-bottom: 24px; }
}
@media (max-width: 620px) {
  .site-notice { padding: 10px 12px 0; font-size: 12px; line-height: 1.85; margin-bottom: 20px; }
}