/* 全站共用的頂列與頁尾（docs/design/website.md「頂列與頁尾」）：首頁、關於、支援、隱私、條款十頁同一份。
   元件樣式在 sigil.css；這裡只管版面。url() 相對於本檔（assets/css/）。 */

section {
  scroll-margin-top: var(--ss-space-7);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---- 頂列：左邊標誌回首頁，右邊關於與另一個語言 ---- */
.site-top__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ss-space-4);
  padding-block: var(--ss-space-5);
}

.site-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--ss-space-3);
  color: var(--ss-text-primary);
  font-family: var(--ss-font-display);
  font-weight: var(--ss-type-display-md-weight);
  font-size: var(--ss-type-title-md-size);
  line-height: var(--ss-type-title-md-line);
  text-decoration: none;
  white-space: nowrap;
}

.site-brand img {
  width: 28px;
  height: 28px;
}

/* 深底用金色的 mark、淺底用墨色的（brand/logo/build_logo.py 的兩個版本）。 */
.site-brand .is-light,
[data-theme="light"] .site-brand .is-dark {
  display: none;
}

[data-theme="light"] .site-brand .is-light {
  display: block;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: var(--ss-space-2);
}

/* 「怎麼運作」只在寬螢幕出現；窄螢幕頂列只放關於與語言，才不會擠。 */
.site-nav__wide {
  display: none;
}

@media (min-width: 720px) {
  .site-nav {
    gap: var(--ss-space-3);
  }

  .site-nav__wide {
    display: inline-flex;
  }
}

.site-nav [aria-current="page"] {
  background: var(--ss-accent-soft);
}

/* ---- 頁尾 ---- */
.footer {
  padding: var(--ss-space-8) 0 var(--ss-space-10);
  color: var(--ss-text-tertiary);
  font-size: var(--ss-type-body-sm-size);
  line-height: var(--ss-type-body-sm-line);
}

.footer__inner {
  display: grid;
  justify-items: center;
  gap: var(--ss-space-4);
  text-align: center;
}

.footer .ss-spell-line {
  width: 100%;
  margin: 0 0 var(--ss-space-4);
}

/* 單色 mark 用 mask 上色，才能跟著 color 走（<img> 吃不到 currentColor）。 */
.footer__mark {
  display: block;
  width: 28px;
  height: 28px;
  color: var(--ss-text-tertiary);
  background: currentColor;
  -webkit-mask: url(../brand/mark-mono.svg) center / contain no-repeat;
  mask: url(../brand/mark-mono.svg) center / contain no-repeat;
}

.footer p {
  margin: 0;
}

.footer__name {
  color: var(--ss-text-secondary);
  font-family: var(--ss-font-display);
  font-size: var(--ss-type-title-sm-size);
}

.footer__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--ss-space-3) var(--ss-space-6);
}

.footer a {
  color: var(--ss-text-secondary);
  text-decoration: none;
}

.footer a:hover,
.footer a[aria-current="page"] {
  color: var(--ss-text-primary);
}

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

/* ---- 窄螢幕（瀏覽器面板、小手機，2026-10-26）：標誌永遠不縮；連結字小一點、語言鈕改短標籤（中文／EN） ---- */
.site-brand {
  flex: none;
}

.site-nav {
  min-width: 0;
}

.site-nav__short {
  display: none;
}

@media (max-width: 419px) {
  .site-top__inner {
    gap: var(--ss-space-3);
  }

  .site-nav {
    gap: 0;
  }

  .site-nav .ss-btn--sm {
    --btn-px: var(--ss-space-3);
    gap: var(--ss-space-2);
    font-size: var(--ss-type-label-sm-size);
  }

  .site-nav__long {
    display: none;
  }

  .site-nav__short {
    display: inline;
  }
}

@media (max-width: 319px) {
  .site-nav__lang svg {
    display: none;
  }
}