/* SkyTutor50 — 全站統一 CSS（微調 token；唔改功能） */
html { scroll-behavior: smooth; }

/* ── Design tokens（4/8px 刻度） ── */
:root {
  --st-radius-sm: 0.5rem;   /* 8px  ~ rounded-lg */
  --st-radius-md: 0.75rem;  /* 12px ~ rounded-xl */
  --st-radius-lg: 1rem;     /* 16px ~ rounded-2xl */
  --st-shadow-card: 0 1px 3px 0 rgb(0 0 0 / 0.06), 0 1px 2px -1px rgb(0 0 0 / 0.06);
  --st-shadow-elevated: 0 4px 12px 0 rgb(0 0 0 / 0.08);
  --st-duration: 0.2s;
  --st-ease: ease;
}

/* ── 全站柔順過渡 ── */
a, button, input, select, textarea,
.st-btn, .st-btn-brand, .st-btn-dark, .st-btn-ghost, .st-card {
  transition:
    color var(--st-duration) var(--st-ease),
    background-color var(--st-duration) var(--st-ease),
    border-color var(--st-duration) var(--st-ease),
    box-shadow var(--st-duration) var(--st-ease),
    opacity var(--st-duration) var(--st-ease),
    transform var(--st-duration) var(--st-ease);
}

/* Card hover */
.shadow-card:hover,
.st-card:hover {
  box-shadow: var(--st-shadow-elevated);
}

/* 表單 */
input, select, textarea {
  transition: all var(--st-duration) var(--st-ease);
}

/* Button 點擊 */
button:active,
.st-btn:active,
.st-btn-brand:active,
.st-btn-dark:active {
  transform: scale(0.98);
}

/* 漸層（保留原 brand） */
.bg-gradient-brand {
  background: linear-gradient(135deg, #FBBF24 0%, #F59E0B 100%);
}

/* ── 文字階層（沿用 Noto Sans TC；只統一字級／字重） ── */
.st-h1 {
  font-size: 2.25rem; /* 36px ≈ text-4xl */
  line-height: 1.15;
  font-weight: 900;
  color: #1C1917;
}
@media (min-width: 768px) {
  .st-h1 { font-size: 3rem; } /* 48px ≈ text-5xl */
}
.st-h2 {
  font-size: 1.5rem; /* 24px ≈ text-2xl */
  line-height: 1.3;
  font-weight: 900;
  color: #1C1917;
}
.st-h3 {
  font-size: 1.125rem; /* 18px ≈ text-lg */
  line-height: 1.4;
  font-weight: 700;
  color: #1C1917;
}
.st-body {
  font-size: 0.875rem; /* 14px */
  line-height: 1.6;
  font-weight: 400;
  color: #78716C;
}
.st-caption {
  font-size: 0.75rem; /* 12px */
  line-height: 1.5;
  font-weight: 400;
  color: #78716C;
}

/* ── Hero 區塊內距統一 ── */
.st-hero-inner {
  max-width: 72rem; /* max-w-6xl */
  margin-left: auto;
  margin-right: auto;
  padding: 4rem 1rem; /* py-16 px-4 */
}
@media (min-width: 768px) {
  .st-hero-inner { padding-top: 6rem; padding-bottom: 6rem; } /* md:py-24 */
}

/* ── 內容卡疊上 hero（全站一致：上緣壓住黃色 banner） ── */
.st-hero-overlap {
  position: relative;
  z-index: 10;
  margin-top: -3.5rem; /* 更明顯上疊 */
  padding-bottom: 4rem;
}
@media (min-width: 768px) {
  .st-hero-overlap { margin-top: -4.5rem; padding-bottom: 5rem; }
}
/* 疊上 hero 的主白卡（圓角必須明顯，先見到壓住黃色） */
.st-hero-panel {
  background: #fff;
  border-radius: 1.25rem; /* ~20px，同 parent 登記卡 */
  box-shadow:
    0 8px 24px rgb(0 0 0 / 0.08),
    0 2px 6px rgb(0 0 0 / 0.04);
  border: 1px solid #F5F5F4;
  padding: 1.25rem;
}
@media (min-width: 768px) {
  .st-hero-panel { padding: 1.75rem 2rem; }
}

/* ── 按鈕（只統一尺寸／圓角／間距，色沿用 brand／ink） ── */
.st-btn-brand {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem; /* py-3 px-6 */
  border-radius: var(--st-radius-md);
  background-color: #FBBF24; /* brand-400 */
  color: #1C1917;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.st-btn-brand:hover { background-color: #F59E0B; } /* brand-500 */

.st-btn-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.5rem;
  border-radius: var(--st-radius-md);
  background-color: #1C1917;
  color: #fff;
  font-size: 0.875rem;
  font-weight: 700;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  border: none;
  cursor: pointer;
  text-decoration: none;
}
.st-btn-dark:hover { background-color: #44403C; }

.st-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.625rem 1.25rem; /* py-2.5 px-5 */
  border-radius: var(--st-radius-md);
  background-color: #fff;
  color: #44403C;
  font-size: 0.875rem;
  font-weight: 700;
  border: 1px solid #E7E5E4;
  cursor: pointer;
  text-decoration: none;
}
.st-btn-ghost:hover {
  border-color: #FBBF24;
  background-color: #FFFBEB;
}

.st-btn-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem; /* py-2 px-4 */
  border-radius: var(--st-radius-md);
  font-size: 0.875rem;
  font-weight: 700;
  cursor: pointer;
  text-decoration: none;
}

/* 與 brand/dark/ghost 並用時覆蓋尺寸 */
.st-btn-brand.st-btn-sm,
.st-btn-dark.st-btn-sm,
.st-btn-ghost.st-btn-sm {
  padding: 0.5rem 1rem;
  font-size: 0.875rem;
}

.st-btn-full { width: 100%; }

/* ── 卡片 ── */
.st-card {
  background: #fff;
  border-radius: var(--st-radius-lg);
  box-shadow: var(--st-shadow-card);
  padding: 1.25rem; /* p-5 */
  border: 1px solid #F5F5F4;
}
@media (min-width: 768px) {
  .st-card { padding: 1.5rem; } /* md:p-6 */
}

/* ── 表單控件統一 ── */
.st-input,
input.st-input,
select.st-input,
textarea.st-input {
  width: 100%;
  padding: 0.625rem 1rem; /* py-2.5 px-4 */
  border: 1px solid #D6D3D1;
  border-radius: var(--st-radius-md);
  font-size: 0.875rem;
  background: #fff;
  outline: none;
}
.st-input:focus {
  border-color: #FBBF24;
  box-shadow: 0 0 0 2px rgb(251 191 36 / 0.35);
}

/* ── 連結 hover 一致 ── */
main a:not([class*="btn"]):not(.st-btn-brand):not(.st-btn-dark):not(.st-btn-ghost):not(.st-btn-sm) {
  transition: color var(--st-duration) var(--st-ease);
}

/* ── 圖片不變形 ── */
img {
  max-width: 100%;
  height: auto;
}
img.object-cover { object-fit: cover; }

/* ── 窄屏防爆：長字可斷 ── */
.st-break {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* Footer 熱門補習連結（避免瀏覽器預設藍／紫 visited） */
.footer-hot-link {
  color: #D6D3D1; /* ink-300 */
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  line-height: 1.45;
}
.footer-hot-link:hover,
.footer-hot-link:focus {
  color: #FBBF24; /* brand-400 */
}
.footer-hot-link:visited {
  color: #D6D3D1;
}
.footer-hot-link:visited:hover {
  color: #FBBF24;
}

/* ── 個案卡地區色左邊框（唔依賴 Tailwind border-area-*，避免被 .st-card / border-ink 覆蓋） ── */
.st-case-card {
  display: block;
  background: #fff;
  border-radius: 1rem;
  padding: 1.25rem;
  box-shadow: var(--st-shadow-card);
  border: 1px solid #F5F5F4;
  border-left: 5px solid #A8A29E; /* default / other */
  transition: box-shadow var(--st-duration) var(--st-ease), transform var(--st-duration) var(--st-ease);
}
.st-case-card:hover {
  box-shadow: var(--st-shadow-elevated);
}
.st-case-card--hk   { border-left-color: #F97316; } /* 香港 橙 */
.st-case-card--kln  { border-left-color: #22C55E; } /* 九龍 綠 */
.st-case-card--nt   { border-left-color: #14B8A6; } /* 新界 青 */
.st-case-card--music { border-left-color: #EC4899; } /* 音樂 粉紅 */
.st-case-card--other { border-left-color: #A855F7; } /* 其他興趣 紫 */

/* 地區小標籤（可選顯示） */
.st-area-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 0.15rem 0.45rem;
  border-radius: 9999px;
  line-height: 1.2;
}
.st-area-chip--hk   { background: #FFF7ED; color: #C2410C; }
.st-area-chip--kln  { background: #F0FDF4; color: #15803D; }
.st-area-chip--nt   { background: #F0FDFA; color: #0F766E; }
.st-area-chip--music { background: #FDF2F8; color: #BE185D; }
.st-area-chip--other { background: #FAF5FF; color: #7E22CE; }

/* 科目標題微色（配合地區） */
.st-case-card--hk .st-case-subject   { color: #EA580C; }
.st-case-card--kln .st-case-subject  { color: #16A34A; }
.st-case-card--nt .st-case-subject   { color: #0D9488; }
.st-case-card--music .st-case-subject { color: #DB2777; }
.st-case-card--other .st-case-subject { color: #9333EA; }