/* ─── MCL Services · 美化主題 ─────────────────────────────
   設計：深色玻璃擬態 + 天空藍光暈 + 懸浮上浮
   不依賴特定 Tailwind 類名，升級 Homepage 也不易破版
---------------------------------------------------------------- */

/* 1. 全域：字體更圓潤、背景加暗角讓字更清楚 */
body {
  font-family: "Inter", "Noto Sans TC", "PingFang TC", "Microsoft JhengHei", system-ui, sans-serif;
  text-rendering: optimizeLegibility;
}

/* 背景圖上加一層由上到下的暗色漸層，避免白字看不清 */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(800px 400px at 15% -5%, rgba(56, 189, 248, 0.18), transparent 60%),
    radial-gradient(700px 380px at 90% 10%, rgba(168, 85, 247, 0.14), transparent 60%),
    linear-gradient(to bottom, rgba(2, 6, 23, 0.55), rgba(2, 6, 23, 0.35) 40%, rgba(2, 6, 23, 0.65));
}

/* 2. 服務 / 書籤卡片：統一樣式 ── homepage 的卡片都是 main 裡的 <a> */
main a[href] {
  border-radius: 14px !important;
  border: 1px solid rgba(148, 163, 184, 0.14) !important;
  box-shadow: 0 2px 12px rgba(2, 6, 23, 0.35);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease, background-color 0.22s ease !important;
  animation: mcl-fade-up 0.5s ease both;
}

/* 卡片錯開進場，更有層次（最多取前 24 張） */
main a[href]:nth-child(1) { animation-delay: 0.02s; }
main a[href]:nth-child(2) { animation-delay: 0.04s; }
main a[href]:nth-child(3) { animation-delay: 0.06s; }
main a[href]:nth-child(4) { animation-delay: 0.08s; }
main a[href]:nth-child(5) { animation-delay: 0.1s; }
main a[href]:nth-child(6) { animation-delay: 0.12s; }
main a[href]:nth-child(7) { animation-delay: 0.14s; }
main a[href]:nth-child(8) { animation-delay: 0.16s; }

main a[href]:hover {
  transform: translateY(-3px) scale(1.01);
  border-color: rgba(56, 189, 248, 0.45) !important;
  box-shadow: 0 8px 28px rgba(56, 189, 248, 0.18), 0 2px 12px rgba(2, 6, 23, 0.4);
  background-color: rgba(56, 189, 248, 0.06) !important;
}

main a[href]:active {
  transform: translateY(-1px) scale(1);
}

/* 卡片裡的圖示：hover 放大 + 發光 */
main a[href] img,
main a[href] svg {
  transition: transform 0.22s ease, filter 0.22s ease !important;
}
main a[href]:hover img,
main a[href]:hover svg {
  transform: scale(1.12);
  filter: drop-shadow(0 0 8px rgba(56, 189, 248, 0.5));
}

/* 3. 毛玻璃小工具卡（cardBlur 產生的 backdrop-blur）加細邊框 */
[class*="backdrop-blur"] {
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 4px 20px rgba(2, 6, 23, 0.3);
}

/* 4. 分組標題：天空藍漸層底線 */
main h2 {
  letter-spacing: 0.08em;
  font-weight: 700 !important;
}
main h2::after {
  content: "";
  display: block;
  height: 2px;
  width: 56px;
  margin-top: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, #38bdf8, #818cf8, transparent);
  opacity: 0.9;
}

/* 5. 搜尋框：膠囊 + 聚焦光暈 */
input[type="text"],
input[type="search"],
input:not([type]) {
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  transition: box-shadow 0.2s ease, border-color 0.2s ease !important;
}
input[type="text"]:focus,
input[type="search"]:focus,
input:not([type]):focus {
  outline: none !important;
  border-color: rgba(56, 189, 248, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2), 0 4px 18px rgba(56, 189, 248, 0.15) !important;
}

/* 6. 狀態小圓點：加一點呼吸光暈 */
span[class*="bg-emerald"],
span[class*="bg-green"] {
  box-shadow: 0 0 8px rgba(52, 211, 153, 0.8);
}
span[class*="bg-red"],
span[class*="bg-rose"] {
  box-shadow: 0 0 8px rgba(251, 113, 133, 0.8);
}

/* 7. 捲軸：細 + 圓角 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(100, 116, 139, 0.5);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(56, 189, 248, 0.6);
  background-clip: content-box;
}

/* 8. 頁尾：淡化 */
footer {
  opacity: 0.65;
  font-size: 12px;
}

/* 9. 進場動畫 */
@keyframes mcl-fade-up {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 減少動態偏好：關掉動畫 */
@media (prefers-reduced-motion: reduce) {
  main a[href] {
    animation: none;
    transition: none !important;
  }
}

/* 10. MCL Hub 置頂大卡 — 只針對 hub，不影響其他卡片
   配合 settings.yaml layout columns:1 + services.yaml 獨立分組，
   這裡只做視覺放大：更高、更大圖示、發光邊框、右上徽章 */
main a[href*="hub.mcl.math.ncu.edu.tw"] {
  grid-column: 1 / -1 !important;
  min-height: 110px !important;
  padding: 20px 24px !important;
  align-items: center;
  gap: 16px;
  background:
    linear-gradient(135deg, rgba(56, 189, 248, 0.2), rgba(129, 140, 248, 0.18)),
    rgba(2, 6, 23, 0.5) !important;
  border: 1.5px solid rgba(56, 189, 248, 0.65) !important;
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.15),
    0 8px 32px rgba(56, 189, 248, 0.25),
    0 2px 12px rgba(2, 6, 23, 0.4) !important;
  position: relative;
  overflow: hidden;
}

/* 大圖示 */
main a[href*="hub.mcl.math.ncu.edu.tw"] img,
main a[href*="hub.mcl.math.ncu.edu.tw"] svg {
  width: 56px !important;
  height: 56px !important;
  min-width: 56px;
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.6));
}

/* 標題＋描述放大（只影響 hub 卡內文字） */
main a[href*="hub.mcl.math.ncu.edu.tw"] > div {
  transform: scale(1.12);
  transform-origin: left center;
}

/* 右上角「⭐ 推薦入口」徽章 */
main a[href*="hub.mcl.math.ncu.edu.tw"]::after {
  content: "⭐ 推薦入口";
  position: absolute;
  top: 12px;
  right: 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 10px;
  border-radius: 999px;
  color: #e0f2fe;
  background: linear-gradient(90deg, rgba(56, 189, 248, 0.35), rgba(129, 140, 248, 0.35));
  border: 1px solid rgba(56, 189, 248, 0.5);
  pointer-events: none;
}

/* hover 時再亮一點（只 hub） */
main a[href*="hub.mcl.math.ncu.edu.tw"]:hover {
  box-shadow:
    0 0 0 1px rgba(56, 189, 248, 0.3),
    0 12px 40px rgba(56, 189, 248, 0.35),
    0 2px 12px rgba(2, 6, 23, 0.4) !important;
}