@charset "utf-8";
/* ============================================================================
   a4.css —— 只属于 a4 这套前台的差异样式

   用途：a4 跟原来的 Cms.Front 要有肉眼可见的区别，但**不改公共样式**
   （app.css 是 web/front 用 tailwind 构建的，改了会连带影响原前台）。

   目前动两处：
     · 页头导航：桌面 / 平板更「松」（间距大）+ 更「大」（字号、内边距）；
       手机收小一点，一行能多放几个，不挤成两行
     · 全站背景图（site_settings.background_image）：原图原样显示，不再压淡

   加载位置：_Head.cshtml 末尾（在 app.css 和皮肤 css 之后），
   所以这里靠同名选择器就能覆盖 .ui-pill 的默认值，不需要 !important。
   ============================================================================ */

/* ---- 手机（< 640px）：菜单收小、间距紧凑 ---- */
.site-header nav {
  gap: 0.25rem;               /* 默认是 tailwind 的 gap-1(4px)，这里保持一致地紧凑 */
}

.site-header nav .ui-pill {
  padding: 0.3rem 0.55rem;
  font-size: 0.75rem;         /* 12px：比默认 13px 再小一号 */
  line-height: 1.4;
}

/* ---- 平板（≥ 640px）：回到正常大小，间距拉开 ---- */
@media (min-width: 640px) {
  .site-header nav {
    gap: 0.5rem;
  }

  .site-header nav .ui-pill {
    padding: 0.45rem 1rem;
    font-size: 0.9375rem;     /* 15px（默认 14px） */
  }
}

/* ============================================================================
   全站背景图：原图原样显示

   app.css 里 body::before 把这层压到 opacity: .16（公共样式，两个前台共用），
   视觉上几乎看不见。a4 这边要求「后台设了什么就显示什么」，所以这里覆盖回 1。

   只改透明度，其余保持公共样式的行为：fixed 铺满、cover 居中裁切、z-index:-1
   垫在内容下面。内容卡片本身是实色（.ui-card 的白底），所以不影响正文可读性。
   ============================================================================ */
body::before {
  opacity: 1;
}

/* ---- 桌面（≥ 1024px）：再大一点、再松一点 ---- */
@media (min-width: 1024px) {
  .site-header nav {
    gap: 0.75rem;               /* 默认 gap-1 是 4px，这里 12px */
  }

  .site-header nav .ui-pill {
    padding: 0.5rem 1.25rem;
    font-size: 1rem;            /* 16px */
  }
}