/* ==========================================================
   mirror.css — 复刻 tuna/mirror-web 的 global.scss + main-page.scss
   结构与变量取值均对照原仓库：
     _src/styles/global.scss
     _src/styles/main-page.scss
     _src/styles/_common-defs.scss
     _src/styles/badge-new.scss
     _src/styles/badge-status.scss
     _src/styles/sync-status.scss
   ========================================================== */

/* --- _common-defs.scss --- */
:root {
  --fa-icon-width: 1em;
  --fa-icon-height: 1.42857143em;
}

/* --- 原站 $color_thu_purple，此处改为站点主色 --- */
:root {
  --brand-purple: #82318e;
  --brand-purple-dark: #c353d3;
  --footer-color: #384452;
}

/* --- global.scss: utils.dark mixin --- */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light dark;
  }
}

/* --- 字体：global.scss 里的 @include Lato.lato-include-font --- */
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lato-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Lato-Italic.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Lato-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Lato';
  font-style: normal;
  font-weight: 900;
  font-display: swap;
  src: url('../fonts/Lato-900.woff2') format('woff2');
}
@font-face {
  font-family: 'Source Code Pro';
  font-weight: 400;
  font-style: normal;
  font-stretch: normal;
  font-display: swap;
  src: url('../fonts/SourceCodePro-Regular.woff2') format('woff2');
}

/* global.scss: :root.wf-active —— 原站靠 webfontloader 加载完成后加这个 class。
   静态站没有 webfontloader，直接在 :root 上生效即可，字体观感一致。

   中文回退说明：Lato 只含拉丁/希腊/西里尔字形，不含中文。
   中文字符会按顺序回退到后面的系统字体（微软雅黑 / 苹方 / 思源黑体等），
   这是正常且必要的行为 —— 站点名称以中文为主，必须保证中文能正常显示且不被裁切。 */
:root {
  --bs-font-sans-serif: Lato, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
  --bs-font-monospace: 'Source Code Pro', SFMono-Regular, Menlo, Monaco, Consolas,
    'Liberation Mono', 'Courier New', monospace;
}

/* --- 中文字体回退：显式列出常见中文字体，避免落到难看的默认字体 --- */
body,
.navbar-brand,
h1, h2, h3, h4, h5, h6,
th, td, .form-control, .btn {
  font-family: Lato, system-ui, -apple-system, 'Segoe UI', Roboto,
    'Helvetica Neue', Arial, 'PingFang SC', 'Hiragino Sans GB',
    'Microsoft YaHei', '微软雅黑', 'Source Han Sans SC', 'Noto Sans CJK SC',
    'WenQuanYi Micro Hei', 'Noto Sans', sans-serif;
}

/* 中文字形盒比拉丁字母高，行高需要略微放宽才不会被裁切 */
body {
  line-height: 1.6;
}

/* --- global.scss: body --- */
body {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

/* --- global.scss: pre / code --- */
pre {
  padding: var(--bs-spacer * 0.5);
  border: var(--bs-border-width) solid var(--bs-border-color);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-secondary-bg-subtle);
}
pre code {
  padding: 0;
}
code {
  padding: var(--bs-spacer * 0.25);
  border-radius: var(--bs-border-radius);
  background-color: var(--bs-secondary-bg-subtle);
}

/* --- global.scss: 标题 margin --- */
h1, h2, h3, .h1, .h2, .h3 {
  margin-top: 2rem;
}
h4, h5, h6, .h4, .h5, .h6 {
  margin-top: 1rem;
}

/* --- global.scss: #footerwrap --- */
#footerwrap {
  color: var(--bs-body-color-dark);
  margin-top: 100px;
  padding-top: 60px;
  padding-bottom: 60px;
  background: var(--footer-color);
}
#footerwrap a {
  color: var(--bs-link-color-dark);
}
#footerwrap a:hover {
  color: var(--bs-link-color-hover-dark);
}

/* --- global.scss: .spacing --- */
.spacing {
  margin-top: 40px;
  margin-bottom: 40px;
}

.clickable {
  cursor: pointer;
}

.vbottom {
  display: inline-block;
  vertical-align: bottom;
  float: none;
}

/* --- global.scss: svg.icon --- */
svg.icon {
  display: inline-block;
  width: var(--fa-icon-width);
  height: var(--fa-icon-height);
  fill: currentColor;
  vertical-align: bottom;
}
.h1, .h2, .h3, .h4, .h5, .h6,
h1, h2, h3, h4, h5, h6 {
  svg.icon {
    height: 1.1em;
  }
}

/* --- global.scss: .content-select --- */
.content-select {
  color: inherit;
  background-color: transparent;
}

/* --- global.scss: a 过渡 --- */
a {
  -webkit-transition: background-color 0.4s linear, color 0.4s linear,
    border-color 0.4s linear;
  -moz-transition: background-color 0.4s linear, color 0.4s linear,
    border-color 0.4s linear;
  -o-transition: background-color 0.4s linear, color 0.4s linear,
    border-color 0.4s linear;
  -ms-transition: background-color 0.4s linear, color 0.4s linear,
    border-color 0.4s linear;
  transition: background-color 0.4s linear, color 0.4s linear,
    border-color 0.4s linear;
}

/* --- global.scss: .navbar-default --- */
.navbar-default {
  --bs-navbar-active-color: var(--brand-purple);
  --bs-navbar-hover-color: var(--brand-purple);
}
@media (prefers-color-scheme: dark) {
  .navbar-default {
    --bs-navbar-active-color: var(--brand-purple-dark);
    --bs-navbar-hover-color: var(--brand-purple-dark);
  }
}
.navbar-default .navbar-nav > li > a.active {
  border-bottom: 2px solid var(--brand-purple);
}
@media (prefers-color-scheme: dark) {
  .navbar-default .navbar-nav > li > a.active {
    border-bottom-color: var(--brand-purple-dark);
  }
}
.navbar-default .navbar-nav > li > a {
  font-weight: 700;
  font-size: 12px;
}
.navbar-default .nav-link {
  transition-duration: 0.4s;
}

/* ==========================================================
   字体修正（重要）
   ==========================================================
   原站 global.scss 的 .navbar-brand 写死了 height: 50px + line-height: 50px。
   那是给「品牌名 + 开源软件镜像站」这种以拉丁字母为主的短标题设计的。

   本站站名是「雾岛开源软件镜像站」，中文为主。Lato 不含中文字形，
   中文会 fallback 到系统字体，其字形盒比 Lato 高，
   在写死的 50px 行高里会被上下裁掉（表现为「字体卡在里面」）。

   解决办法：不再写死高度，改为 min-height + 正常的行高和内边距。
   这样中文、英文混排都不会被裁，垂直居中也保持不变。 */

/* --- global.scss: .navbar-brand --- */
.navbar-brand {
  font-weight: 900;
  /* 原来: padding: 0px; line-height: 50px; height: 50px; */
  padding: 6px 0;
  min-height: 50px;
  display: flex;
  align-items: center;
  line-height: 1.4;
  /* 防止长站名在窄屏撑破布局 */
  word-break: keep-all;
}
.navbar-brand img {
  margin-right: 5px;
}

/* --- 3-wave.scss: 搜索无结果时的骨架提示 --- */
.sk-wave {
  padding: 4px 0;
}
.sk-rect {
  height: 22px;
  margin: 6px 0;
  border-radius: 3px;
  background: linear-gradient(90deg, #eee 25%, #f5f5f5 37%, #eee 63%);
  background-size: 400% 100%;
  animation: sk-wave 1.4s ease infinite;
}
.sk-rect1 { width: 62%; }
.sk-rect2 { width: 78%; }
.sk-rect3 { width: 55%; }
.sk-rect4 { width: 71%; }
.sk-rect5 { width: 48%; }
@keyframes sk-wave {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

/* --- badge-new.scss --- */
.badge.badge-new {
  padding: 0.1em 0.2em;
  vertical-align: 40%;
  text-shadow: 1px 1px #888;
  margin-right: 4px;
  background-color: #3aa0e6;
}

/* --- badge-status / sync-status 已移除 ---
   原站用 status-* 决定整行底色、并显示「同步中 / 同步失败 / 已暂停」标签。
   本站已按需求去掉这套同步状态机制，这里一并删除对应样式。 */

/* ==========================================================================
   两种条目类型的视觉区分
   --------------------------------------------------------------------------
   目录型（不写 isFile）：普通链接
   下载型（isFile: true）：加虚线下划线，提示「点了直接下载，不打开页面」
   ========================================================================== */
.mirror-item-label.is-file {
  text-decoration: underline;
  text-decoration-style: dashed;
  text-underline-offset: 3px;
}
.mirror-item-label.is-file:hover {
  text-decoration-style: solid;
}

/* ==========================================================================
   子页面（detail.html）专用样式
   ========================================================================== */
.detail-page h2 svg.icon {
  height: 1em;
  width: 1em;
  margin-right: 0.35em;
}
.detail-page .breadcrumb {
  font-size: 0.95rem;
}
/* 文件名（不可点的纯文字） */
.mirror-item-label-plain {
  word-break: break-all;
}
/* 文件后面的备注小字 */
.file-note {
  display: inline-block;
  margin-left: 0.4em;
  padding: 0.05em 0.45em;
  border: 1px solid var(--bs-border-color);
  border-radius: 0.25em;
  font-size: 0.75em;
  line-height: 1.5;
  color: var(--bs-secondary-color);
  white-space: nowrap;
  vertical-align: middle;
}

/* 子页面表格：文件名列允许长路径换行 */
#detail-table td:first-child {
  word-break: break-all;
}

/* --- MainMirrorList.vue <style lang="scss" scoped> --- */
a.mirror-item-label::after {
  content: ' ';
}

/* 表格单元格：原站这里写 padding: 4px 8px，但原站还给 <table>/<tr> 加了
   Bootstrap 的 .row 类。.row 自带 margin-left: -0.75rem（负边距），
   两者叠加会让整行左移出容器，导致每个条目首字母被裁掉（如 ubuntu 显示成 buntu）。
   本项目已移除表格上的 .row 类，这里恢复正常内边距即可。 */
#mirror-list table {
  --bs-table-bg: transparent;
  margin-bottom: 0;
}
#mirror-list thead th {
  padding: 4px 8px;
  border-bottom: 1px solid var(--bs-border-color);
  font-size: 12pt;
}
#mirror-list tbody td {
  padding: 4px 8px;
  border-style: none;
  font-size: 12pt;
}
#mirror-title {
  margin-top: 10px;
  margin-bottom: 10px;
}

/* --- SearchBox.vue <style scoped> --- */
input[type='search'].mirror-search {
  line-height: 18px;
  padding: 8px;
  border: 1px solid #e3e3e3;
  max-width: 240px;
  height: 30px;
  font-size: 16px;
  background: transparent;
}

/* --- notfound.scss: .not-found（404 页） --- */
.not-found {
  height: 600px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
}
.not-found-code {
  font-size: 3rem;
  font-weight: 900;
  opacity: 0.85;
}
.not-found-hint {
  margin: 0.5rem 0 1.5rem;
  font-size: 1.25rem;
}
.not-found-text {
  max-width: 42rem;
  text-align: center;
  line-height: 1.8;
}
.not-found-links {
  margin-top: 2.5rem;
  display: flex;
  gap: 2rem;
}
.not-found-link {
  text-decoration: none;
  font-weight: 700;
}
.not-found-link:hover {
  text-decoration: underline;
}

/* --- 非清华域名时隐藏 .thuhidden（对应 default.ts 里的 body.nonthu） --- */
body.nonthu .thuhidden {
  display: none;
}