/* ==========================================================================
   denischencj.github.io — 共用樣式
   所有頁面（根目錄 index、各 App 子頁）皆引用此檔
   子目錄頁面請用 ../assets/style.css 引用
   ========================================================================== */

/* 首頁固定黑底，不隨系統切換（極光需要黑色才看得出層次）。
   各 App 子頁是自己的內嵌樣式、固定淺底，不引用本檔。 */
:root {
  color-scheme: dark;

  --paper:   #000000;
  --ink:     #ECECEC;
  --muted:   #9C9CA1;
  --rule:    #26262A;
  --accent:  #9FBE73;
  --link:    #63AEE4;
  --link-hover: #8AC4F0;

  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue",
               "PingFang TC", "Noto Sans TC", "Microsoft JhengHei", sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
                "Songti TC", "Times New Roman", serif;

  --measure: 36rem;

  /* 七色光譜：兩個 App 的自訂顏色，依色相排成彩虹（首尾相接、循環流動）
     來源：P01 AppAssets.swift、P03 ImageAssets.swift
     極光（aurora.js）也讀這七個值，改這裡兩邊一起變 */
  --spec-1: #E7393C;   /* FloraNote 紅   redButtonColor */
  --spec-2: #FF6D38;   /* memoland  橘   appAccent */
  --spec-3: #F1C40F;   /* FloraNote 黃   yellowButtonColor */
  --spec-4: #3D9A3D;   /* FloraNote 綠   plantRecordCountColor */
  --spec-5: #ACD1E6;   /* memoland  淡藍 appMutedBlue */
  --spec-6: #184E95;   /* memoland  藍   appSlate */
  --spec-7: #A56B28;   /* FloraNote 咖啡 coffeeBackgroundColor */

  --spectrum-h: 5px;        /* 光譜條高度 */
  --spectrum-speed: 14s;    /* 流動一圈的時間（極光跟著同一個時鐘） */

  /* 各 App 專屬強調色（條目裡的引文邊線用） */
  --floranote: #3D9A3D;
  --memoland:  #FF6D38;
}

/* Slogan 用的書寫體。字型檔放在站台內，不外連 Google，授權見 assets/fonts/Parisienne-OFL.txt */
@font-face {
  font-family: "Parisienne";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/parisienne-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
                 U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}

*, *::before, *::after { box-sizing: border-box; }

/* 有 hidden 屬性就一定隱藏，不被 .coords 之類的 display 設定蓋掉 */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

/* --- 七色光譜條 -------------------------------------------------------- */
/* 放在 body 第一個子元素，貼齊視窗最頂端、捲動時固定。
   漸層以 --spec-1 開頭也以 --spec-1 結尾；偽元素寬度兩倍、背景平鋪兩份，
   再用 transform 位移自身一半，所以循環的接縫看不出來。 */

.spectrum {
  position: sticky;
  top: 0;
  z-index: 10;
  height: var(--spectrum-h);
  overflow: hidden;
  pointer-events: none;
}

/* 有極光時：頁面頂端先隱藏（極光就是它），aurora.js 依捲動距離把 --bar-o 從 0 拉到 1。
   沒有 JS 或畫不出極光時沒有 aurora-on，光譜條照常顯示。 */
.aurora-on .spectrum { opacity: var(--bar-o, 0); }

.spectrum::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background-image: linear-gradient(90deg,
    var(--spec-1), var(--spec-2), var(--spec-3), var(--spec-4),
    var(--spec-5), var(--spec-6), var(--spec-7), var(--spec-1));
  background-size: 50% 100%;
  background-repeat: repeat-x;
  animation: spectrum-flow var(--spectrum-speed) linear infinite;
  will-change: transform;
}

@keyframes spectrum-flow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* --- 極光 -------------------------------------------------------------- */
/* 光譜條往下暈開的光幕，由 assets/aurora.js 逐格繪製。
   貼在頁面頂端、隨頁面捲走（不固定在視窗上，往下讀內文時不干擾）。
   畫布解析度刻意很低，交給瀏覽器放大，放大本身就是柔化。 */

.aurora {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: 100%;
  /* 大部分垂幕約畫面高度的 1/8，少數長舌可伸到約 1/3（長短在 aurora.js 的 colLen） */
  height: clamp(300px, 48vh, 540px);
  height: clamp(300px, 48svh, 540px);   /* iOS 工具列伸縮時高度不跳動 */
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .spectrum::before { animation: none; }
}

/* --- 版面容器 ---------------------------------------------------------- */

.sheet {
  position: relative;
  z-index: 1;
  max-width: var(--measure);
  margin: 0 auto;
  padding: 5rem 1.5rem 4rem;
}

/* --- 頁首 -------------------------------------------------------------- */

.masthead {
  padding-bottom: 2.5rem;
  border-bottom: 1px solid var(--rule);
}

.slogan {
  margin: 0 0 1.5rem;
  font-family: "Parisienne", "Snell Roundhand", "Apple Chancery", cursive;
  /* 手機上隨寬度縮小，讓整句維持一行；真的要換行時，balance 會平均斷在逗號後 */
  font-size: clamp(1.375rem, 6.8vw, 2.375rem);
  line-height: 1.25;
  text-wrap: balance;
  color: var(--ink);
  /* 疊在極光上時，用一圈很淡的黑暈把字托出來 */
  text-shadow: 0 0 18px rgba(0, 0, 0, 0.55), 0 0 2px rgba(0, 0, 0, 0.4);
}

.masthead h1 {
  margin: 0 0 0.75rem;
  font-size: 1.75rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.tagline {
  margin: 0;
  font-size: 1rem;
  color: var(--ink);
}

.tagline-en {
  margin: 0.2rem 0 0;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 0.9375rem;
  color: var(--muted);
}

/* --- 區段標題 ---------------------------------------------------------- */

h2 {
  margin: 3.5rem 0 1.75rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}

h2 .gloss {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  margin-left: 0.35rem;
}

/* --- 應用程式條目 ------------------------------------------------------ */

.entry {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  padding-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule);
}

.entry + .entry { padding-top: 2.25rem; }

/* 每個 App 用自己的強調色；沒標 data-app 的條目退回站台的 --accent */
.entry[data-app="floranote"] { --entry-accent: var(--floranote); }
.entry[data-app="memoland"]  { --entry-accent: var(--memoland); }

.entry-icon {
  flex: 0 0 auto;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  /* App 圖示為去背 PNG，補白底填滿圓角方框，維持 App Store 的圖示視覺。
     此處刻意不隨主題切換：圖示畫布本身就是白的，深色模式下亦然。 */
  background-color: #FFFFFF;
}

.entry-body { min-width: 0; }

.entry-body h3 {
  margin: 0 0 0.6rem;
  font-size: 1.1875rem;
  font-weight: 600;
}

.entry-desc {
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
}

.entry-desc-en {
  margin: 0;
  font-family: var(--font-serif);
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
}

/* 標本鑑定標籤：學名排版示例（屬名種小名斜體、命名者正體） */
.specimen {
  margin: 1.25rem 0 0;
  padding-left: 0.9rem;
  border-left: 2px solid var(--entry-accent, var(--accent));
  font-family: var(--font-serif);
  font-size: 0.875rem;
  line-height: 1.6;
  color: var(--muted);
}

.specimen i { font-style: italic; }

/* 座標示例：同一個點的三種寫法，窄螢幕時整組換行、不在數字中間斷開 */
.coords {
  display: flex;
  flex-wrap: wrap;
  gap: 0.1em 1.1em;
  font-variant-numeric: tabular-nums;
}

.coords span { white-space: nowrap; }

/* --- 條目連結 ---------------------------------------------------------- */

.entry-links {
  margin: 1.25rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  font-size: 0.9375rem;
}

/* 商店徽章：獨立一行，App Store 排第一（Apple 規定），之後的 Google Play 接在後面。
   官方圖檔不可改色、不可變形、不可做成灰色停用狀態；
   螢幕上最小高度 40px，周圍留白至少為高度的 1/4 = 10px（Apple 行銷指南） */
.store-badges {
  margin: 1.75rem 0 0;   /* 與上方三個文字連結拉開距離 */
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
}

.store-badges a {
  display: inline-block;
  line-height: 0;
  border-bottom: 0;
  border-radius: 7px;
  transition: opacity 0.15s;
}

.store-badges a:hover { opacity: 0.8; }

.store-badges img {
  display: block;
  width: auto;
  height: 40px;
}

/* --- 聯絡 -------------------------------------------------------------- */

.contact p { margin: 0; font-size: 0.9375rem; }

.contact-note {
  margin-top: 0.5rem !important;
  color: var(--muted);
  font-size: 0.875rem !important;
}

/* --- 連結 -------------------------------------------------------------- */

a {
  color: var(--link);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover { border-bottom-color: var(--link); }

a:focus-visible {
  outline: 2px solid var(--link);
  outline-offset: 3px;
  border-radius: 2px;
}

/* --- 頁尾 -------------------------------------------------------------- */

footer {
  margin-top: 4rem;
  text-align: center;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: 0.8125rem;
  color: var(--muted);
}

footer p { margin: 0; }

/* Apple 商標聲明（使用 App Store 徽章的授權條件） */
footer .legal {
  margin-top: 0.5rem;
  font-size: 0.75rem;
  opacity: 0.75;
}

/* 一句一行；窄螢幕上單句放不下時，balance 讓斷開的兩段長度平均 */
footer .legal span {
  display: block;
  text-wrap: balance;
}

/* --- 內文頁（隱私權、支援）共用 ---------------------------------------- */

.doc h1 {
  margin: 0 0 0.5rem;
  font-size: 1.625rem;
  font-weight: 600;
}

.doc .updated {
  margin: 0 0 2.5rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--rule);
  font-size: 0.875rem;
  color: var(--muted);
}

.doc h2 {
  margin: 2.75rem 0 0.75rem;
  font-size: 1.0625rem;
  color: var(--ink);
}

.doc p, .doc li { font-size: 0.9375rem; }

.doc ul { padding-left: 1.25rem; }

.doc li { margin-bottom: 0.4rem; }

.backlink {
  display: inline-block;
  margin-bottom: 2.5rem;
  font-size: 0.875rem;
}

/* --- 窄螢幕 ------------------------------------------------------------ */

@media (max-width: 480px) {
  :root { --spectrum-h: 4px; }

  .sheet { padding-top: 3rem; }

  .slogan { margin-bottom: 1.25rem; }

  .entry {
    flex-direction: column;
    gap: 1rem;
  }

  .entry-icon { width: 60px; height: 60px; border-radius: 13px; }
}