/*!
 * 站点通用 UI：弹窗（Modal）+ 轻提示（Toast）+ 接口文档块（api-doc）+ 全站页脚
 *
 * 弹窗本体直接复用 quick-website.css（Bootstrap 4）自带的 .modal / .modal-dialog /
 * .modal-content 体系，这里只补 quick-website 里缺失的几条，不改动框架样式，
 * 因此不需要引入 80KB 的 bootstrap JS。
 *
 * 命名约定见 docs/naming-conventions.md：
 *   site-*     全站公共组件
 *   api-doc-*  接口文档弹窗内部
 *   <页面>-*   页面专有（home / ip / sun / music / qrcode / pyp / idwater / firmware …）
 */

/* ============ 页脚粘性沉底 ============ */

/* body 拉成一个纵向 flex 容器，正文吃掉剩余空间，页脚用 margin-top:auto 顶到底部：
 * 内容不足一屏时页脚贴在视口底部，内容超长时页脚落在正文之后，两种情况都不遮挡内容。
 *
 * 只影响 body 的直接子元素（各页的 section / main / [data-footer]）。
 * 弹窗、遮罩、Toast 都是 position:fixed，不参与流式布局，不受影响。 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* dvh 让 iOS 地址栏收起/展开时不会多出一截空白 */
@supports (min-height: 100dvh) {
  body {
    min-height: 100dvh;
  }
}

/* 页脚可能是 body 的直接子元素（页面没写占位符），
 * 也可能被包在 <div data-footer> 占位符里，两种都顶到底 */
body > [data-footer],
body > .site-footer {
  flex: 0 0 auto;
  margin-top: auto;
}

/* ============ 弹窗 ============ */

/* Bootstrap 的 .modal-open 会锁住页面滚动，quick-website 里只写了 max-height，补全 */
body.site-modal-open {
  overflow: hidden;
}

.site-modal .modal-dialog {
  max-width: 640px;
}

.site-modal .modal-title {
  font-size: 1rem;
  font-weight: 600;
  margin-bottom: 0;
}

/* 弹窗底部按钮统一间距 */
.site-modal .modal-footer > * {
  margin: 0 0 0 .5rem;
}

.site-modal .modal-footer > *:first-child {
  margin-left: 0;
}

/* 弹窗正文较长时内部滚动，整体不出屏 */
.site-modal .modal-body {
  max-height: calc(100vh - 14rem);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============ 接口文档块（供 api-modal.js 使用） ============ */

.api-doc-h {
  display: flex;
  align-items: center;
  margin: 1.25rem 0 .5rem;
  font-size: .8125rem;
  font-weight: 600;
  color: #4a5568;
}

.api-doc-h:first-child {
  margin-top: 0;
}

.api-doc-h .badge {
  margin-left: .5rem;
  font-weight: 600;
}

/* 代码 / URL 展示块 */
.api-doc-code {
  display: block;
  padding: .625rem .75rem;
  margin: 0;
  font-family: SFMono-Regular, Menlo, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .8125rem;
  line-height: 1.65;
  color: #2d3748;
  background-color: #f7fafc;
  border: 1px solid #eff2f7;
  border-radius: .375rem;
  word-break: break-all;
  white-space: pre-wrap;
}

/* 示例行：URL + 操作按钮 */
.api-doc-sample {
  margin-bottom: .625rem;
}

.api-doc-sample-label {
  margin-bottom: .25rem;
  font-size: .75rem;
  color: #718096;
}

.api-doc-sample-row {
  display: flex;
  align-items: stretch;
}

.api-doc-sample-row .api-doc-code {
  flex: 1 1 auto;
  min-width: 0;
}

/* 按钮组：复制 / 打开 用同一容器同一尺寸，保证外观完全一致 */
.api-doc-actions {
  flex: 0 0 auto;
  display: flex;
  align-items: stretch;
  margin-left: .5rem;
}

.api-doc-actions .btn {
  margin-left: .5rem;
  white-space: nowrap;
}

.api-doc-actions .btn:first-child {
  margin-left: 0;
}

/* 参数表：默认 .table 留白太大，这里收紧；说明列允许换行 */
.api-doc-table {
  margin-bottom: 0;
  font-size: .8125rem;
}

.api-doc-table th,
.api-doc-table td {
  padding: .5rem .625rem;
  white-space: nowrap;
}

.api-doc-table td:last-child {
  white-space: normal;
}

.api-doc-table td code {
  padding: .1rem .3rem;
  font-size: .75rem;
  color: #c53030;
  background-color: #fff5f5;
  border-radius: .25rem;
}

@media (max-width: 575.98px) {
  .api-doc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============ 页内提示 Alert ============ */

/* 空插槽不占高度，避免出现一条空白 */
.alert-slot:empty {
  display: none;
}

.site-alert {
  margin-bottom: 0;
  font-size: .875rem;
  line-height: 1.7;
  word-break: break-word;
}

.alert-slot + .card,
.alert-slot + .form-group,
.site-alert + .card {
  margin-top: 1rem;
}

/* 提示里的链接保持和正文同样易读 */
.site-alert .site-alert-body a {
  color: inherit;
  text-decoration: underline;
}

.site-alert .site-alert-body code {
  padding: .1rem .3rem;
  font-size: .8125rem;
  border-radius: .25rem;
  background-color: rgba(0, 0, 0, .06);
}

/* ============ 关闭按钮（×）兜底 ============
 *
 * quick-website.css 用的是 Bootstrap 4 的 .close，而错误页引的 bootstrap.min.css
 * 是 Bootstrap 5（那边只认 .btn-close），两边对不上时 × 会退化成浏览器默认按钮。
 * 这里用 :where() 把权重压到 0，只在页面上不存在任何 .close 规则时才生效，
 * 已经引了 quick-website.css 的页面完全不受影响。
 */

:where(.site-modal, .site-alert) :where(.close) {
  float: right;
  padding: 0;
  margin: 0 0 0 auto;
  font-family: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1;
  color: rgba(31, 45, 61, .5);
  text-shadow: none;
  background-color: transparent;
  border: 0;
  appearance: none;
  opacity: .5;
  cursor: pointer;
}

:where(.site-modal, .site-alert) :where(.close):hover,
:where(.site-modal, .site-alert) :where(.close):focus {
  color: rgba(31, 45, 61, .8);
  opacity: .75;
  text-decoration: none;
  outline: 0;
}

:where(.site-modal) :where(.modal-header) :where(.close) {
  padding: 1.25rem;
  margin: -1rem -1rem -1rem auto;
}

:where(.site-alert) {
  position: relative;
  padding-right: 3rem;
}

:where(.site-alert) :where(.close) {
  position: absolute;
  top: 50%;
  right: .875rem;
  transform: translateY(-50%);
  padding: 0;
  color: inherit;
}

/* ============ 工具页统一版式 ============ */

.page-head {
  margin-bottom: 1.5rem;
  text-align: center;
}

.page-head h1 {
  margin-bottom: .375rem;
  font-size: 1.5rem;
  font-weight: 600;
}

.page-head p {
  margin-bottom: 0;
  font-size: .875rem;
  color: #4a5568;
}

.page-note {
  margin: 1rem 0 0;
  font-size: .8125rem;
  color: #718096;
  text-align: center;
}

.page-actions {
  margin-top: 1rem;
  text-align: center;
}

/* ============ 工具页：结果预览 ============ */

/* 生成类工具（图片转 CSS 等）的预览框：原点 1px，阴影向右下展开 */
.preview-box {
  padding: .75rem;
  overflow: auto;
  background-color: #f7fafc;
  border: 1px solid #eff2f7;
  border-radius: .375rem;
}

.preview-box .preview-dot {
  width: 1px;
  height: 1px;
}

.preview-thumb {
  max-width: 100%;
  margin-bottom: .75rem;
  border-radius: .25rem;
}

/* 结果很长时框内滚动，不要把页面撑得很长 */
.code-scroll {
  max-height: 18rem;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ============ 音乐页（music） ============ */

/* 三个筛选标签：音乐名称 / 音乐 ID / 音乐地址。
 * 与下方搜索条之间留出间距——两者原本贴在一起，视觉上挤成一团。 */
.music-tabs {
  margin-bottom: 1.25rem;
}

.music-tab {
  padding: .625rem;
  cursor: pointer;
}

.music-tab > a {
  display: block;
  color: inherit;
}

/* 搜索结果区（返回继续搜索 + 播放器）与上方搜索表单的间距 */
.music-main {
  margin-top: 1.25rem;
}

/* ============ 全站页脚 ============ */

.site-footer {
  padding: 1.5rem 1rem .75rem;
}

.site-footer .site-footer-inner {
  max-width: 720px;
  margin: 0 auto;
}

.site-footer .copyright {
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.8;
  color: #4a5568;
  text-align: center;
}

.site-footer .copyright a {
  color: inherit;
  text-decoration: none;
}

.site-footer .copyright a:hover {
  text-decoration: underline;
}

.site-footer .copyright .sep {
  display: inline-block;
  margin: 0 .375rem;
  color: #a0aec0;
}

/* ============ 轻提示 Toast ============ */

.toast-stack {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1080;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: max-content;
  max-width: 92vw;
  pointer-events: none;
}

.toast-item {
  max-width: 92vw;
  margin-top: .5rem;
  padding: .625rem 1rem;
  font-size: .875rem;
  line-height: 1.6;
  color: #fff;
  background-color: #1f2d3d;
  border-radius: .375rem;
  box-shadow: 0 .25rem .75rem rgba(31, 45, 61, .25);
  white-space: pre-wrap;
  word-break: break-all;
  opacity: 0;
  transform: translateY(-.5rem);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: auto;
  cursor: pointer;
}

.toast-item:first-child {
  margin-top: 0;
}

.toast-item.show {
  opacity: 1;
  transform: none;
}

.toast-item.toast-success {
  background-color: #2f855a;
}

.toast-item.toast-error {
  background-color: #c53030;
}

.toast-item.toast-info {
  background-color: #008aff;
}
/* ============ 全站导航栏（Bootstrap navbar 风格） ============ */
/* 参照 Bootstrap 5 .navbar-light：
 * - 链接用文字色分级（默认 rgba(0,0,0,.55)，hover 加深，active 主色加粗），不用色块药丸
 * - 折叠按钮是官方 navbar-toggler：透明底 + 边框圆角 + 官方三条杠 SVG
 * - 移动端展开是 .site-nav-open 控制的 max-height 过渡（对应 .navbar-collapse.collapse）
 */

.site-nav {
  background-color: #fff;
  border-bottom: 1px solid #dee2e6;
}

.site-nav-inner {
  max-width: 1140px;
  margin: 0 auto;
  padding: .5rem 1rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

.site-nav-brand {
  font-size: 1.25rem;
  font-weight: 600;
  color: #212529;
  text-decoration: none;
  margin-right: 1rem;
  white-space: nowrap;
  padding: .25rem 0;
}

.site-nav-brand:hover,
.site-nav-brand:focus {
  color: #212529;
  text-decoration: none;
}

/* 桌面端导航项一行排开，紧随品牌之后 */
.site-nav-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  min-width: 0;
}

.site-nav-item {
  display: block;
  color: rgba(0, 0, 0, .55);
  text-decoration: none;
  padding: .5rem .75rem;
  font-size: 1rem;
  white-space: nowrap;
}

.site-nav-item:hover,
.site-nav-item:focus {
  color: rgba(0, 0, 0, .8);
  text-decoration: none;
}

.site-nav-item.active {
  color: #008aff;
  font-weight: 600;
}

/* 折叠按钮：桌面端隐藏（对应 navbar-expand 断点） */
.site-nav-toggle {
  display: none;
  margin-left: auto;
  padding: .25rem .75rem;
  font-size: 1.25rem;
  line-height: 1;
  color: #212529;
  background-color: transparent;
  border: 1px solid rgba(0, 0, 0, .55);
  border-radius: .25rem;
  cursor: pointer;
  transition: box-shadow .15s ease-in-out;
}

.site-nav-toggle:hover {
  background-color: rgba(0, 0, 0, .04);
}

.site-nav-toggle:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 .2rem rgba(0, 138, 255, .25);
}

.site-nav-toggle-icon {
  display: block;
}

/* 移动端（≤768px）：collapse 折叠 + 官方样式展开 */
@media (max-width: 768px) {
  .site-nav-toggle {
    display: block;
  }

  /* 收起：max-height 0 + overflow hidden，展开时过渡到 26rem（足够容纳全部导航项） */
  .site-nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    flex-basis: 100%;
    width: 100%;
    overflow: hidden;
    max-height: 0;
    transition: max-height .35s ease;
  }

  .site-nav.site-nav-open .site-nav-links {
    max-height: 26rem;
    padding-bottom: .5rem;
  }

  .site-nav-item {
    padding: .5rem .75rem;
    font-size: 1rem;
  }

  .site-nav-item.active {
    color: #008aff;
    font-weight: 600;
  }
}