/* ==========================================================================
   23-4.cn  品牌样式表  ·  brand.css
   --------------------------------------------------------------------------
   把 Joe 主题的配色统一到站点主色系：
       深蓝 #1d4ed8  ·  蓝 #2f6bff  ·  青 #06b6d4  ·  绿 #10b981
   本文件在所有主题 CSS 之后加载，因此同名选择器可直接覆盖（无需 !important）。
   主题原本的强调色是紫色 #a86af9（亮色）/ #1d953f（暗色），与站点视觉体系不符。
   ========================================================================== */

/* ---------- 1. 品牌令牌 + 亮色模式调色板 ---------- */
html {
  --brand-deep: #1d4ed8;
  --brand-blue: #2f6bff;
  --brand-cyan: #06b6d4;
  --brand-green: #10b981;
  --brand-grad: linear-gradient(100deg, #1d4ed8 0%, #2f6bff 40%, #06b6d4 72%, #10b981 100%);

  --theme: #2f6bff;

  --background: #ffffff;
  --main: #0f172a;
  --routine: #475569;
  --minor: #64748b;
  --seat: #cbd5e1;
  --classA: #e2e8f0;
  --classB: #0f172a;
  --classC: #eef2f7;
  --classD: #f7fafc;

  --radius-wrap: 12px;
  --radius-inner: 8px;
  --text-shadow: 0 1px 2px rgba(15, 23, 42, .18);
  --box-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 10px 28px -16px rgba(15, 23, 42, .22);
}

/* ---------- 2. 暗色模式调色板 ---------- */
html[data-night='night'] body {
  --theme: #38bdf8;
  --background: #0f1a2e;
  --main: #e2e8f0;
  --routine: #a8b8cc;
  --minor: #8296ad;
  --seat: #3b4d66;
  --classA: #22304a;
  --classB: #334155;
  --classC: #1a2740;
  --classD: #141f36;
  --text-shadow: none;
  --box-shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 12px 30px -18px rgba(0, 0, 0, .7);
}

/* 暗色模式下的页面底色（主题默认 #121212 偏中性灰，改成品牌深蓝） */
html[data-night='night'] body::before {
  background: radial-gradient(1200px 600px at 18% -10%, #16294a 0%, #0b1424 55%, #080f1c 100%);
}

/* ---------- 3. 亮色模式页面底色：极淡的品牌渐变 ---------- */
body::before {
  background:
    radial-gradient(900px 420px at 12% -8%, rgba(47, 107, 255, .10) 0%, rgba(47, 107, 255, 0) 62%),
    radial-gradient(760px 380px at 92% 4%, rgba(16, 185, 129, .09) 0%, rgba(16, 185, 129, 0) 60%),
    linear-gradient(180deg, #f4f8ff 0%, #f8fbff 46%, #f4fbf8 100%);
}

/* ---------- 4. 顶部导航 ---------- */
.joe_header {
  border-bottom: 1px solid var(--classC);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  backdrop-filter: saturate(180%) blur(12px);
}

.joe_header__above-nav .item::after {
  background: var(--brand-grad);
  height: 3px;
  border-radius: 6px 6px 0 0;
}

.joe_header__above-nav .item.active {
  color: var(--theme);
}

.joe_header__above-nav .item:hover {
  color: var(--theme);
}

/* 站标：3:1 横版 logo。
   主题原逻辑是「亮色显示 logo 图 / 暗色隐藏图片改显示一段装饰 SVG」，
   且原图 max-width:150px + object-fit:cover 会把方形图裁坏。
   这里改为统一用 ::before 伪元素渲染，亮/暗两套 logo 在所有浏览器都能正确切换
   （不依赖 img 的 content:url()，Firefox 对该写法支持不稳定）。 */
.joe_header__above-logo {
  min-width: 183px;            /* 168px 站标 + 15px padding-right，防止暗色下布局塌陷 */
}

.joe_header__above-logo img {
  visibility: hidden;          /* 保留占位与 alt 文本，真正的站标由 ::before 绘制 */
  width: 168px;
  height: 56px;
  max-width: 168px;
  max-height: 56px;
  object-fit: contain;
}

/* 主题在暗色模式给 logo img 加了 display:none，会把导航挤塌，这里强制保留占位 */
html[data-night='night'] .joe_header__above-logo img {
  display: block;
  visibility: hidden;
}

.joe_header__above-logo::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 168px;
  height: 56px;
  background: url('https://www.23-4.cn/logo-light.png') no-repeat left center;
  background-size: contain;
  pointer-events: none;
}

html[data-night='night'] .joe_header__above-logo::before {
  background-image: url('https://www.23-4.cn/logo-dark.png');
}

/* 暗色模式隐藏主题自带的装饰 SVG，避免与站标重叠 */
html[data-night='night'] .joe_header__above-logo svg {
  display: none;
}

/* ---------- 5. 搜索框 ---------- */
.joe_header__above-search .input {
  border-radius: var(--radius-inner);
  transition: box-shadow .25s, border-color .25s;
}

.joe_header__above-search .input:focus {
  border-color: var(--brand-blue);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, .16);
}

.joe_header__above-search .submit {
  background: var(--brand-grad);
  border-radius: var(--radius-inner);
  color: #fff;
  transition: filter .25s, transform .25s;
}

.joe_header__above-search .submit:hover {
  filter: brightness(1.08);
}

/* ---------- 6. 卡片 / 列表 ---------- */
.joe_list__item {
  transition: transform .28s ease, box-shadow .28s ease;
  border: 1px solid var(--classC);
}

.joe_list__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, .06), 0 18px 38px -20px rgba(29, 78, 216, .45);
}

html[data-night='night'] .joe_list__item:hover {
  box-shadow: 0 2px 4px rgba(0, 0, 0, .35), 0 18px 38px -20px rgba(56, 189, 248, .38);
}

.joe_list__item .information .title:hover {
  color: var(--theme);
}

.joe_aside__item {
  border: 1px solid var(--classC);
}

.joe_aside__item-title {
  background: linear-gradient(180deg, rgba(47, 107, 255, .05), rgba(47, 107, 255, 0));
}

/* ---------- 7. 文章正文 ---------- */
.joe_detail__article a {
  color: var(--brand-deep);
  text-decoration: underline;
  text-decoration-color: rgba(47, 107, 255, .35);
  text-underline-offset: 3px;
  transition: color .2s, text-decoration-color .2s;
}

.joe_detail__article a:hover {
  color: var(--brand-cyan);
  text-decoration-color: currentColor;
}

html[data-night='night'] .joe_detail__article a {
  color: #7dd3fc;
}

html[data-night='night'] .joe_detail__article a:hover {
  color: #5eead4;
}

/* 行内代码：改成品牌蓝底 */
.joe_detail__article code:not([class]) {
  background: rgba(47, 107, 255, .09);
  color: var(--brand-deep);
  border: 1px solid rgba(47, 107, 255, .16);
  border-radius: var(--radius-inner);
}

html[data-night='night'] .joe_detail__article code:not([class]) {
  background: rgba(56, 189, 248, .13);
  color: #7dd3fc;
  border-color: rgba(56, 189, 248, .22);
}

/* 代码块 */
.joe_detail__article pre[class*='language-'] {
  border-radius: var(--radius-wrap);
  border: 1px solid var(--classC);
  box-shadow: var(--box-shadow);
}

/* 引用块：左侧品牌渐变条 */
.joe_detail__article blockquote {
  border-left: 4px solid transparent;
  border-image: var(--brand-grad) 1;
  border-radius: 0 var(--radius-inner) var(--radius-inner) 0;
}

/* 表格 */
.joe_detail__article table {
  border-radius: var(--radius-inner);
  overflow: hidden;
}

.joe_detail__article table th {
  background: rgba(47, 107, 255, .07);
  color: var(--main);
}

/* 标题锚点/分隔线 */
.joe_detail__article h2,
.joe_detail__article h3 {
  position: relative;
  padding-left: 12px;
}

.joe_detail__article h2::before,
.joe_detail__article h3::before {
  content: '';
  position: absolute;
  left: 0;
  top: .18em;
  bottom: .18em;
  width: 4px;
  border-radius: 3px;
  background: var(--brand-grad);
}

/* ---------- 8. 按钮 ---------- */
.joe_load,
.joe_detail__article-abtn,
.joe_detail__article-anote {
  border-radius: var(--radius-inner);
}

.joe_load {
  background: var(--brand-grad);
  color: #fff;
  transition: filter .25s, transform .25s;
}

.joe_load:hover {
  filter: brightness(1.08);
  transform: translateY(-1px);
}

/* ---------- 9. 页脚 ---------- */
.joe_footer {
  border-top: 1px solid var(--classC);
  background: linear-gradient(180deg, rgba(47, 107, 255, .04), rgba(16, 185, 129, .04));
}

.joe_footer .joe_container a {
  color: var(--theme);
}

.joe_footer .joe_container a:hover {
  color: var(--brand-cyan);
}

/* ---------- 10. 滚动条 / 选中态 ---------- */
::-webkit-scrollbar-thumb {
  border-radius: 6px;
  background: linear-gradient(180deg, var(--brand-blue), var(--brand-cyan));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, var(--brand-deep), var(--brand-green));
}

::selection {
  background: rgba(47, 107, 255, .85);
  color: #fff;
}

/* ---------- 11. 移动端断点微调 ---------- */
@media (max-width: 768px) {
  html {
    --radius-wrap: 10px;
  }

  .joe_list__item {
    padding: 12px;
  }

  .joe_list__item .information .title {
    font-size: 17px;
    line-height: 23px;
    max-height: 46px;
  }

  .joe_header__above-logo {
    min-width: 147px;          /* 132px 站标 + 15px padding-right */
  }

  .joe_header__above-logo img {
    width: 132px;
    height: 44px;
    max-width: 132px;
    max-height: 44px;
  }

  .joe_header__above-logo::before {
    width: 132px;
    height: 44px;
  }

  /* 触屏不保留 hover 位移，避免点击后卡片跳动 */
  .joe_list__item:hover {
    transform: none;
  }

  .joe_detail__article {
    font-size: 16px;
    line-height: 1.75;
  }
}

/* ---------- 12. 无障碍：尊重减弱动效偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  .joe_list__item,
  .joe_list__item:hover,
  .joe_load,
  .joe_load:hover {
    transition: none;
    transform: none;
  }
}