/* 小小世界托嬰中心 一頁式官網。
 *
 * 設計方向：以中心的 logo 為唯一依據，把它展開成一整套視覺語言。
 *
 * logo 是業主重金打造的識別，這個網站不該另外發明一套視覺。所以：
 *   - 顏色  全部取自 logo（深藍字標、亮藍尖頂、淺藍雲、黃綠城牆、粉黃星旗）
 *   - 字體  跟著字標的圓潤幾何走，用重字重的黑體，不用明體
 *   - 圖形  logo 的三個母題重複出現：點狀彩虹拱（首屏）、星星（區塊起手記號）、
 *           雲朵與城堡（品牌標記）
 *
 * 家長多半是深夜在手機上比較幾間中心，焦慮而仔細。太可愛會顯得不專業，
 * 太素淨會顯得沒溫度——logo 本身就解決了這個平衡，跟著它走即可。
 *
 * 記憶點在作息表：整段翻成品牌深藍，一條隨時段變色的直式時間軸
 * （晨昏的星星黃 → 白日的城堡藍 → 午休的暗）。家長最想知道「我的孩子
 * 下午兩點在做什麼」，所以那是全頁唯一用力的地方，其餘保持安靜。
 */

:root {
  /* 全部取自中心 logo。那張 logo 是業主重金打造的識別，這個網站的責任是把它
   * 展開成一整套視覺語言，而不是另外發明一套。
   *
   * logo 的組成：深藍字標與旗桿、亮藍尖頂、淺藍雲朵、黃綠城牆，
   * 加上粉／黃／綠的旗幟與星星，上方一道點狀彩虹拱。
   *
   * 亮色（lime/blossom/sun）在白底上都低於 3:1，只能當裝飾；
   * 文字一律用 --navy（13.54:1）或 --azure-deep，確保深夜看手機也清楚。 */
  --navy: #1f2a5e; /* logo 字標的深藍。主色，也是主要文字色 */
  --azure: #2e86c8; /* 城堡尖頂的亮藍，裝飾用 */
  --azure-deep: #1b6ba8; /* 同色系加深，可用於次要文字與連結 */
  --skypale: #a8d8e8; /* 雲朵與塔身的淺藍 */
  --lime: #8dc63f; /* 城牆的黃綠 */
  --blossom: #f17ba0; /* 旗幟與星星的粉 */
  --sun: #fcd34d; /* 星星的黃 */

  --paper: #ffffff; /* logo 的底色就是純白，跟著用 */
  --mist: #eef7fb; /* 交錯區塊：雲朵淺藍的極淡版 */
  --ink: var(--navy); /* 主文字＝品牌深藍，不另外發明灰 */
  --ink-soft: #55618a; /* 次要文字：深藍調淡，白底 7.4:1 */

  /* 作息表的一天：晨昏的星星黃 → 白日的城堡藍 → 午休的深藍。
   * 三個顏色全部來自 logo，不是另外挑的。 */
  --daylight: var(--sun);
  --dusk: #2c3a72;
  --night: var(--navy); /* 作息區深色底＝品牌深藍本身 */

  --shell: 16px; /* 圓角：呼應 logo 圓潤的字標與雲朵 */
  --gap: clamp(4.5rem, 9vw, 8rem); /* 區塊間距 */
  --measure: 62ch; /* 易讀行長 */

  /* 字體：圓潤幾何。
   *
   * logo 的「小小世界 BABY WORLD」是圓角幾何造型的自訂字。原本用明體，
   * 與字標互相打架；改用圓潤黑體，讓標題和 logo 是同一個家族的語氣。 */
  --display: 'Noto Sans TC', system-ui, sans-serif;
  --font: 'Noto Sans TC', system-ui, sans-serif;

  /* 字級刻度。比例固定，讓層級一眼可辨。 */
  --t-hero: clamp(2.3rem, 6.5vw, 4.25rem);
  --t-h2: clamp(1.75rem, 3.8vw, 2.6rem);
  --t-h3: 1.15rem;
  --t-body: 1.0625rem;
  --t-small: 0.875rem;
  --t-eyebrow: 0.78rem;
}

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

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

/* 內容由 JS 填入，填完才淡入，避免看到區塊逐段跳出來 */
body {
  opacity: 0;
  transition: opacity 0.4s ease;
}
body.ready {
  opacity: 1;
}

img {
  max-width: 100%;
  display: block;
}

/* 沒有公告時 #news 會設 hidden，這行確保它真的不佔版面。 */
[hidden] {
  display: none !important;
}

a {
  color: inherit;
}

h1,
h2 {
  font-family: var(--display);
  line-height: 1.25;
  letter-spacing: 0.02em;
  margin: 0;
  /* 字標很粗，標題跟著用重字重才是同一個語氣 */
  font-weight: 700;
}

h3 {
  line-height: 1.35;
  margin: 0;
  font-weight: 500;
}

/* ---------- 預覽模式提示 ----------
 * 只在後台按「預覽修改」開啟時出現。刻意用高對比的深色，讓人不會誤以為
 * 這是家長看到的正式頁面。
 */

.preview-banner {
  position: sticky;
  top: 0;
  z-index: 30;
  padding: 0.7rem 1rem;
  text-align: center;
  font-size: 0.9rem;
  background: var(--ink);
  color: var(--paper);
}

/* 提示條佔掉頂部後，導覽列要跟著往下貼齊，才不會互相蓋住。 */
.has-preview-banner .topnav {
  top: 2.9rem;
}

/* ---------- 導覽列 ---------- */

.topnav {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem clamp(1rem, 4vw, 3rem);
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid color-mix(in srgb, var(--azure) 18%, transparent);
}

.nav-brand {
  text-decoration: none;
  line-height: 1;
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--azure-deep);
}

.nav-links {
  display: flex;
  gap: clamp(0.85rem, 3vw, 2rem);
  font-size: 0.95rem;
}

.nav-links a {
  text-decoration: none;
  /* 導覽列底色是半透明模糊，實際落在文字後面的顏色會比 --paper 更淺，
   * 用 --ink-soft 只有 4.42:1 差一點過不了 AA，所以這裡用主文字色。 */
  color: var(--ink);
  /* 至少 44x44 的可點區域：手機上用拇指點小連結很容易點空，
   * 而深夜單手滑手機正是這頁最常見的使用情境。 */
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.35rem;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}

.nav-links a:hover,
.nav-links a:focus-visible {
  color: var(--ink);
  border-bottom-color: var(--azure);
}

/* ---------- 首屏 ---------- */

#hero {
  position: relative;
  display: grid;
  place-items: center;
  text-align: center;
  padding: clamp(6rem, 15vw, 11rem) 1.5rem clamp(5rem, 11vw, 8rem);
  overflow: hidden;
  /* 底色取自 logo 的天空：上方淺藍雲色，往下收成白。 */
  background: linear-gradient(to bottom, var(--mist) 0%, var(--paper) 78%);
}

/* logo 上方那道點狀彩虹拱——整張 logo 最有記憶點的手勢，把它放大成首屏的
 * 骨架。用 radial-gradient 畫圓點再沿圓形遮罩排列，不需要外部圖檔。 */
#hero::before {
  content: '';
  position: absolute;
  top: clamp(-14rem, -18vw, -8rem);
  left: 50%;
  transform: translateX(-50%);
  width: min(120%, 62rem);
  aspect-ratio: 1;
  border-radius: 50%;
  border: 3px dotted var(--skypale);
  /* 只留上半弧，下半被首屏底部裁掉，形成「拱」而不是「圈」 */
  clip-path: inset(0 0 52% 0);
  opacity: 0.85;
  pointer-events: none;
}

/* 首屏底部一條日光色帶——與作息表的時間軸同一套語彙，開場就先點出這頁的
 * 主題：這裡在講「一天的光」。用獨立元素而非 ::after，才不會和照片遮罩打架。 */
.hero-daylight {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  z-index: 2;
  background: linear-gradient(
    to right,
    var(--daylight) 0%,
    var(--azure) 32%,
    var(--dusk) 50%,
    var(--azure) 68%,
    var(--daylight) 100%
  );
}

/* 有照片時，照片就是主視覺，彩虹拱讓位。 */
#hero.has-image::before {
  inset: 0;
  top: 0;
  left: 0;
  transform: none;
  width: auto;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  clip-path: none;
  opacity: 1;
  background-image: var(--hero-image);
  background-size: cover;
  background-position: center;
}

#hero.has-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    color-mix(in srgb, var(--ink) 42%, transparent),
    color-mix(in srgb, var(--ink) 62%, transparent)
  );
}

#hero.has-image .hero-inner {
  color: var(--paper);
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 46rem;
}

.hero-brand {
  margin: 0 0 1.25rem;
  font-size: 0.9rem;
  letter-spacing: 0.32em;
  text-indent: 0.32em; /* 補回字距造成的視覺偏移 */
  text-transform: none;
  color: var(--azure-deep);
}

#hero.has-image .hero-brand {
  color: color-mix(in srgb, var(--paper) 85%, var(--azure));
}

#hero h1 {
  font-size: var(--t-hero);
  letter-spacing: 0.02em;
  font-weight: 700;
  color: var(--navy);
}

.hero-sub {
  margin: 1.5rem auto 2.5rem;
  max-width: 34rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

#hero.has-image .hero-sub {
  color: color-mix(in srgb, var(--paper) 88%, transparent);
}

.btn {
  display: inline-block;
  padding: 0.9rem 2.4rem;
  border-radius: 999px;
  background: var(--azure-deep);
  color: var(--paper);
  text-decoration: none;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
  box-shadow: 0 6px 18px color-mix(in srgb, var(--azure) 32%, transparent);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--azure-deep) 85%, var(--ink));
  box-shadow: 0 10px 24px color-mix(in srgb, var(--azure) 40%, transparent);
}

/* 立案字號。刻意低調但看得清楚——它的作用是「被找到時能安心」，
 * 不是搶注意力。 */
.hero-licence {
  margin: 2rem 0 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

#hero.has-image .hero-licence {
  color: color-mix(in srgb, var(--paper) 82%, transparent);
}

/* ---------- 區塊通則 ---------- */

.section {
  padding: var(--gap) clamp(1.25rem, 5vw, 3rem);
}

.section.alt {
  background: var(--mist);
}

.section-inner {
  max-width: 68rem;
  margin: 0 auto;
}

/* ---------- 區塊標頭 ----------
 * 一條波浪線穿過中央的城堡徽章，底下才是小標與標題。
 * 每一段的開頭都在重述品牌，而不只是放一行字。
 */

.sec-head {
  text-align: center;
  margin-bottom: 3rem;
}

.sec-wave {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.25rem;
  color: color-mix(in srgb, var(--azure) 45%, transparent);
}

.wave-line {
  position: absolute;
  left: 0;
  right: 0;
  width: 100%;
  height: 60px;
}

/* 城堡徽章。白色圓底把波浪線切斷，形成「線穿過徽章」的效果。 */
.sec-badge {
  position: relative;
  z-index: 1;
  width: 88px;
  height: 88px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--paper);
  border: 2.5px solid color-mix(in srgb, var(--azure) 45%, transparent);
  color: var(--navy);
}

.section.alt .sec-badge {
  background: var(--mist);
}

.section.night .sec-wave {
  color: color-mix(in srgb, var(--skypale) 45%, transparent);
}

.section.night .sec-badge {
  background: var(--night);
  border-color: color-mix(in srgb, var(--skypale) 45%, transparent);
  color: var(--paper);
}

.section h2 {
  font-size: var(--t-h2);
}

/* 標頭置中後，小標也要跟著置中 */
.sec-head .eyebrow {
  justify-content: center;
}

/* 標頭置中，內文段落也置中收窄，整段才不會左重右輕 */
.sec-head + .lede {
  margin-inline: auto;
  text-align: center;
}

/* 小標前面一顆星——logo 裡的星星散落在旗幟與字標之間，這裡把它當成
 * 區塊的起手記號，整頁重複同一個符號，視覺語言就統一了。 */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0 0.7rem;
  font-family: var(--font);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: 0.24em;
  color: var(--azure-deep);
}

.eyebrow::before {
  content: '';
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  background: var(--sun);
  /* 五角星，與 logo 的星星同型 */
  clip-path: polygon(
    50% 0%,
    61% 35%,
    98% 35%,
    68% 57%,
    79% 91%,
    50% 70%,
    21% 91%,
    32% 57%,
    2% 35%,
    39% 35%
  );
}

.lede {
  margin: 1.5rem 0 3.5rem;
  max-width: var(--measure);
  color: var(--ink-soft);
  font-size: 1.05rem;
}

/* ---------- 環境：影片與照片 ---------- */

.video {
  margin: 0 0 2.5rem;
}

.video iframe {
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 0;
  border-radius: var(--shell);
  background: var(--mist);
}

.video figcaption {
  margin-top: 0.75rem;
  font-size: 0.9rem;
  color: var(--ink-soft);
}

/* 環境照片牆。左右交錯的錯落排列，往下捲時有節奏，不像規規矩矩的相簿。
 * 每張照片微微不同的圓角，呼應 logo 雲朵的手繪感。 */
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
  gap: clamp(1rem, 2.5vw, 1.75rem);
  align-items: start;
}

/* 交錯：偶數張往下錯開一點，破掉整齊的網格感 */
.photo-grid > :nth-child(even) {
  margin-top: clamp(1rem, 3vw, 2.5rem);
}

.photo-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--shell);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--navy) 12%, transparent);
}

/* 素材未到齊時的占位。做成「等待放入照片」的樣子，而不是留白。 */
.photo-placeholder {
  aspect-ratio: 4 / 3;
  border-radius: var(--shell);
  box-shadow: 0 6px 20px color-mix(in srgb, var(--navy) 8%, transparent);
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(
    -45deg,
    color-mix(in srgb, var(--azure) 7%, var(--mist)),
    color-mix(in srgb, var(--azure) 7%, var(--mist)) 12px,
    color-mix(in srgb, var(--azure) 12%, var(--mist)) 12px,
    color-mix(in srgb, var(--azure) 12%, var(--mist)) 24px
  );
  border: 1px dashed color-mix(in srgb, var(--azure) 45%, transparent);
}

.photo-placeholder span {
  font-size: 0.85rem;
  letter-spacing: 0.18em;
  color: var(--azure-deep);
}

/* ---------- 家長口碑 ----------
 * 三個可查證的數字。家長此刻在做的是「跟另外兩間比」，數字比形容詞管用。
 */

.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: clamp(1.5rem, 4vw, 3rem);
}

/* 數字本身就是主角，不需要外框把它裝起來。改用一道上緣色標分隔，
 * 卡片感減到最低，數字放到最大。 */
.stat {
  padding: 1.5rem 0.5rem 1.25rem;
  border-top: 4px solid var(--azure);
  text-align: left;
}

/* 三道色標分別取自 logo 上不同顏色的小旗，讓這一區也是同一套語言。 */
.stat:nth-child(2) {
  border-top-color: var(--lime);
}

.stat:nth-child(3) {
  border-top-color: var(--blossom);
}

.stat-value {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.5rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1;
  color: var(--azure-deep);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}

.stat-label {
  margin: 0.75rem 0 0.3rem;
  font-weight: 500;
  font-size: 1.05rem;
}

.stat-note {
  margin: 0;
  font-size: 0.85rem;
  color: var(--ink-soft);
}

.stat-source {
  margin: 2rem 0 0;
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.stat-source a {
  color: var(--ink-soft);
  text-underline-offset: 3px;
  /* 補足可點高度，手機上才不會難點。 */
  display: inline-block;
  padding: 0.7rem 0;
}

.stat-source a:hover {
  color: var(--azure-deep);
}

/* ---------- 師資 ---------- */

.teacher-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}

/* 老師卡片：頭像在上、資訊在下的直式卡片，三位並排。
 * 先前用橫向排列，在 500px 寬的欄位裡左邊頭像右邊大片留白，反而空洞。 */
.teacher {
  padding: 1.75rem 1.5rem;
  background: var(--paper);
  border-radius: var(--shell);
  box-shadow: 0 4px 18px color-mix(in srgb, var(--navy) 10%, transparent);
  text-align: center;
  /* 每張卡片頂端一道旗幟色，呼應 logo 上不同顏色的小旗 */
  border-top: 4px solid var(--azure);
}

.teacher:nth-child(2) {
  border-top-color: var(--lime);
}

.teacher:nth-child(3) {
  border-top-color: var(--blossom);
}

.teacher img,
.avatar-fallback {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  margin: 0 auto 1rem;
}

.teacher h3 {
  font-size: var(--t-h3);
}

.teacher .role {
  margin: 0.3rem 0 0.75rem;
  font-size: var(--t-small);
  letter-spacing: 0.1em;
  color: var(--azure-deep);
}

.teacher .bio {
  margin: 0;
  font-size: 0.95rem;
  color: var(--ink-soft);
  line-height: 1.7;
}

/* ---------- 作息表：全頁的記憶點 ----------
 *
 * 整段翻成深色。家長最在意的問題是「現在這個時間，我的孩子在做什麼」，
 * 所以把一天的光影直接畫出來：晨昏的金、白日的藍、午休的暗。
 * 在淺色底上這條色帶只是裝飾；放到深色底上，它才真的像光。
 *
 * 全頁只有這一區這麼用力，其餘保持安靜——這是刻意的取捨。
 */

.section.night {
  position: relative;
  background: var(--night);
  color: var(--paper);
  /* 上緣一道極淡的天光，讓深色區塊像是日光照進來，而不是換了個底色 */
  background-image: radial-gradient(
    120% 60% at 50% 0%,
    color-mix(in srgb, var(--skypale) 20%, transparent),
    transparent 70%
  );
}

.section.night h2 {
  color: var(--paper);
}

.section.night .eyebrow {
  color: var(--daylight);
}

.section.night .lede {
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.schedule-list {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  max-width: 56rem;
}

/* 時間軸主體。色帶對應一天的光線：晨光的暖金 → 正午的亮藍 → 午休的暗
 * → 午後回暖。顏色本身就是資訊，不是裝飾。 */
.schedule-list::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.1rem;
  bottom: 1.1rem;
  width: 8px;
  border-radius: 8px;
  background: linear-gradient(
    to bottom,
    var(--daylight) 0%,
    #8fc4e8 18%,
    var(--azure) 36%,
    var(--dusk) 47%,
    var(--dusk) 63%,
    var(--azure) 76%,
    var(--daylight) 100%
  );
  /* 讓色帶自己發光，深色底上才有「這是光」的感覺 */
  box-shadow:
    0 0 26px color-mix(in srgb, var(--azure) 55%, transparent),
    0 0 60px color-mix(in srgb, var(--azure) 22%, transparent);
}

.schedule-list li {
  position: relative;
  display: grid;
  grid-template-columns: 9rem 1fr;
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: baseline;
  padding: 1.15rem 0 1.15rem 3rem;
  /* 每一列之間一道極淡的分隔，像時刻表的橫線 */
  border-bottom: 1px solid color-mix(in srgb, var(--paper) 10%, transparent);
}

.schedule-list li:last-child {
  border-bottom: 0;
}

/* 時間軸上的節點 */
.schedule-list li::before {
  content: '';
  position: absolute;
  left: -4px;
  top: 1.85rem;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--night);
  border: 3px solid var(--azure);
}

.schedule-list .time {
  /* 等寬數字讓時間像一塊真正的時刻表，欄位不會左右跳動 */
  font-variant-numeric: tabular-nums;
  font-size: 0.95rem;
  letter-spacing: 0.06em;
  color: color-mix(in srgb, var(--paper) 72%, transparent);
  white-space: nowrap;
}

.schedule-list .act {
  color: var(--paper);
  font-size: 1.05rem;
}

/* 午休：整列調暗，讓「安靜的兩個半小時」在視覺上真的安靜下來。 */
.schedule-list li.rest::before {
  border-color: var(--dusk);
  background: var(--dusk);
}

.schedule-list li.rest .time,
.schedule-list li.rest .act {
  color: color-mix(in srgb, var(--paper) 52%, transparent);
}

/* ---------- 最新消息 ---------- */

.news-list {
  display: grid;
  gap: 1.25rem;
}

.post {
  background: var(--paper);
  border-radius: var(--shell);
  padding: 1.5rem 1.75rem;
  border-left: 3px solid color-mix(in srgb, var(--lime) 70%, transparent);
}

.post time {
  font-size: 0.85rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}

.post h3 {
  font-size: 1.1rem;
  margin: 0.35rem 0 0.6rem;
}

.post p {
  margin: 0;
  color: var(--ink-soft);
}

/* ---------- 聯絡與交通 ---------- */

/* 聯絡資訊做成深色圓角面板：這是全頁最重要的一段資訊，
 * 用色塊把它從背景裡拉出來，家長一眼就找得到。 */
.contact-grid {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(280px, 1.2fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--navy);
  color: var(--paper);
  border-radius: calc(var(--shell) * 1.5);
}

.contact-grid dt {
  color: color-mix(in srgb, var(--paper) 70%, transparent) !important;
}

.contact-grid a {
  color: var(--paper) !important;
  text-decoration-color: color-mix(in srgb, var(--skypale) 70%, transparent) !important;
}

.contact-grid a:hover {
  color: var(--skypale) !important;
}

.contact-info {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: 0.9rem 1rem;
  margin: 0;
}

.contact-info dt {
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.contact-info dd {
  margin: 0;
}

.contact-info a {
  color: var(--ink);
  text-decoration-color: color-mix(in srgb, var(--azure) 55%, transparent);
  text-underline-offset: 4px;
  /* 電話與地址是家長最可能點的兩個連結，補足可點高度。 */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

.contact-info a:hover {
  color: var(--azure-deep);
}

.map iframe {
  width: 100%;
  aspect-ratio: 4 / 3;
  border: 0;
  border-radius: var(--shell);
}

.note {
  margin: 2rem 0 0;
  padding-left: 1rem;
  border-left: 3px solid color-mix(in srgb, var(--azure) 35%, transparent);
  color: var(--ink-soft);
  font-size: 0.95rem;
}

/* ---------- 手機版常駐行動列 ----------
 * 只在手機出現。桌機有足夠版面，浮動列反而礙事。
 */

.quick-actions {
  display: none;
}

@media (max-width: 720px) {
  .quick-actions {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20;
    display: flex;
    gap: 0.75rem;
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
    background: color-mix(in srgb, var(--paper) 94%, transparent);
    backdrop-filter: blur(10px);
    border-top: 1px solid color-mix(in srgb, var(--azure) 25%, transparent);
  }

  .quick-actions a {
    flex: 1;
    min-height: 48px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    text-decoration: none;
    font-weight: 500;
    letter-spacing: 0.04em;
  }

  /* 撥號是次要動作，用外框；預約是主要動作，用實心。 */
  .qa-call {
    border: 1.5px solid var(--azure-deep);
    color: var(--azure-deep);
  }

  .qa-visit {
    background: var(--azure-deep);
    color: var(--paper);
  }

  /* 行動列會蓋住頁尾最後幾行，補足底部空間。 */
  #site-footer {
    padding-bottom: calc(6rem + env(safe-area-inset-bottom));
  }
}

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

#site-footer {
  padding: 3rem 1.5rem;
  text-align: center;
  background: var(--ink);
  color: color-mix(in srgb, var(--paper) 78%, transparent);
}

.foot-name {
  margin: 0 0 0.5rem;
  font-weight: 500;
  color: var(--paper);
  letter-spacing: 0.08em;
}

.foot-licence {
  margin: 0;
  font-size: 0.85rem;
}

/* ---------- 響應式 ---------- */

@media (max-width: 720px) {
  .contact-grid {
    grid-template-columns: 1fr;
  }

  .schedule-list li {
    grid-template-columns: 1fr;
    gap: 0.2rem;
  }

  .nav-links {
    font-size: 0.88rem;
  }
}

/* ---------- 品質下限 ---------- */

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

html {
  scroll-behavior: smooth;
  /* 錨點捲動時避免被固定導覽列蓋住 */
  scroll-padding-top: 4.5rem;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}