/*
 * patch_hero.css — Hero + Navbar 視覺精緻化補丁
 * 基於 Linear 設計系統的間距、Typography 與互動細節
 * 只寫 overrides，不重複 base styles
 */

/* ── NAVBAR：連結字距 & hover 過渡加速 ── */
.nav-links a {
  /* Linear 風格導覽連結：加寬字距，提升精緻感 */
  letter-spacing: 0.06em;
  /* hover 顏色切換加快到 0.15s，更靈敏 */
  transition: color 0.15s;
}

/* ── NAVBAR CTA 按鈕：加邊框 + hover 微光 ── */
.nav-links .nav-cta {
  /* 加入琥珀深色邊框，讓按鈕更有層次感 */
  border: 1px solid var(--amber-d);
  transition: background 0.15s, box-shadow 0.15s !important;
}
.nav-links .nav-cta:hover {
  /* hover 時加入琥珀光暈，呼應品牌色 */
  box-shadow: 0 0 12px rgba(212, 168, 67, 0.25) !important;
}

/* ── NAVBAR Login：hover 邊框改為 var(--line-2) 的更細版本 ── */
.nav-links .nav-login {
  transition: border-color 0.15s, color 0.15s;
}
.nav-links .nav-login:hover {
  /* hover 邊框切換為較細的 line-2，保持深色主題協調 */
  border-color: var(--line-2);
}

/* ── HERO H1：Linear 風格緊縮標題 ── */
.hero-h1 {
  /* 更強的負字距，製造 Linear 招牌的「精工壓縮感」 */
  letter-spacing: -0.04em;
  /* 更緊的行高，讓大標題更具衝擊力 */
  line-height: 1.05;
  /* 琥珀色微光 text-shadow，增加暖色光感層次 */
  text-shadow: 0 2px 40px rgba(212, 168, 67, 0.12);
}

/* ── HERO EYEBROW：加強全大寫間距感 ── */
.hero-eyebrow {
  /* 更明顯的字距，強化全大寫標籤的視覺節奏 */
  letter-spacing: 0.12em;
  /* 微調字型大小，讓 eyebrow 相對 h1 比例更精準 */
  font-size: 0.68rem;
}

/* ── HERO DESC：提升閱讀舒適度 ── */
.hero-desc {
  /* 更寬鬆的行高，長段文字閱讀舒適度提升 */
  line-height: 1.75;
  /* 接近 white-3 加透明度，比純 white-3 更柔和 */
  color: rgba(138, 133, 124, 0.9);
}

/* ── HERO TAGS：加邊框與背景，呼應 Linear Pill Badge 設計 ── */
.hero-tags {
  /* 讓 tags 容器有些微間距調整 */
  gap: 10px;
}

.hero-tag {
  /* Linear 風格 pill：半透明琥珀邊框 */
  border: 1px solid rgba(212, 168, 67, 0.2);
  /* 極淡琥珀背景，讓 tag 有卡片感 */
  background: rgba(212, 168, 67, 0.05);
  /* 加內距讓 tag 不緊縮 */
  padding: 4px 10px;
  border-radius: 9999px;
  /* 加入過渡動畫 */
  transition: all 0.2s;
}

.hero-tag:hover {
  /* hover 時加強背景與邊框，製造互動感 */
  background: rgba(212, 168, 67, 0.1);
  border-color: rgba(212, 168, 67, 0.4);
}

/* ── CONTRAST STRIP：左右欄加強邊框定義 ── */
.contrast-bad {
  /* bad 欄：覆蓋右側邊框為紅色調，強化「危險」語意 */
  border-right-color: rgba(192, 57, 43, 0.3);
  /* 底部與左側加入薄紅色邊框，讓整欄有色彩識別 */
  border-bottom: 1px solid rgba(192, 57, 43, 0.2);
  border-left: 1px solid rgba(192, 57, 43, 0.2);
  border-top: 1px solid rgba(192, 57, 43, 0.2);
}

.contrast-good {
  /* good 欄：加入青綠色邊框，強化「安全/正確」語意 */
  border: 1px solid rgba(30, 122, 106, 0.2);
}