/* ==========================================================
   WINSTEK 台星科 全站共用設計變數 variables.css
   依 index.html 實際使用色碼 / 字體擷取整理
   之後新頁面請在 <head> 中優先引入這個檔案，
   CSS 一律使用 var(--xxx) 引用，避免寫死色碼。
   ========================================================== */

:root {
  /* ---------- 色彩 Colors ---------- */
  --color-primary: #0B346E;        /* 主色：深藍，Logo/標題/按鈕 */
  --color-accent: #00E5FF;          /* 強調色：亮青，hover/底線/漸層 */
  --color-link-hover: #00838F;      /* 一般連結 hover */

  --color-text: #1E293B;            /* 內文主色 */
  --color-text-secondary: #475569;  /* Nav 選單文字 */
  --color-text-muted: #55606F;      /* 段落說明文字 */
  --color-text-light: #64748B;      /* 語言切換、輔助文字 */
  --color-text-faint: #94A3B8;      /* 圖片佔位、標籤文字 */

  --color-border: #E2E8F0;          /* Header 底部邊框 */
  --color-border-section: #DCE3EC;  /* 區塊上下邊框 */

  --color-bg: #FFFFFF;
  --color-bg-section: #F4F7FB;      /* 淺色區塊背景 */
  --color-card-bg: rgba(11, 52, 110, 0.05);
  --color-card-shadow: rgba(0, 0, 0, 0.1);

  --color-footer-bg: #0B346E;
  --color-footer-text: rgba(255, 255, 255, 0.7);
  --color-footer-text-faint: rgba(255, 255, 255, 0.5);
  --color-footer-border: rgba(255, 255, 255, 0.1);
  --color-footer-border-top: rgba(255, 255, 255, 0.12);

  /* ---------- 字體 Typography ---------- */
  --font-base: 'Noto Sans TC', 'Aptos', -apple-system, BlinkMacSystemFont, 'Microsoft JhengHei', sans-serif;
  --font-mono: 'IBM Plex Mono', monospace; /* 保留給數據/製程參數類內容使用 */

  --font-size-label: 12px;   /* 區塊小標籤，如 SERVICE */
  --font-size-h2: 32px;
  --font-size-h3: 2.2rem;
  --font-size-body: 15px;
  --font-size-nav: 15px;
  --font-size-logo: 20px;
  --font-size-footer-heading: 1.1rem;
  --font-size-footer-copyright: 12px;

  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 700;

  --line-height-heading: 1.3;
  --line-height-body: 1.55;

  /* ---------- 版面 Layout ---------- */
  --container-max-width: 1280px;
  --container-padding-x: 32px;
  --section-padding-y: 40px;
  --section-padding-y-lg: 100px;

  /* ---------- 元件 Component tokens ---------- */
  --navbar-height: 75px;
  --radius-sm: 8px;
  --radius-md: 16px;
  --transition-fast: 0.25s ease-in-out;
  --transition-slow: 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

/* ==========================================================
   共用元件：Nav Bar（比照 index.html .official-header 結構）
   之後新頁面請直接沿用這裡的 class 與 HTML 結構
   ========================================================== */

.official-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--navbar-height);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  z-index: 1000;
}

.header-content {
  width: 100%;
  max-width: var(--container-max-width);
  margin: 0 auto;
  padding: 0 var(--container-padding-x);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 60px;
}

.logo {
  font-size: var(--font-size-logo);
  font-weight: var(--font-weight-bold);
  color: var(--color-primary);
  text-decoration: none;
  white-space: nowrap;
}

.main-nav {
  display: flex;
  gap: 32px;
  align-items: center;
  flex: 1;
}

.main-nav a,
.main-nav .nav-main-link {
  font-size: var(--font-size-nav);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color var(--transition-fast);
  white-space: nowrap;
  cursor: pointer;
  position: relative;
  padding-bottom: 4px;
  display: inline-block;
}

.main-nav a::after,
.main-nav .nav-main-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--color-accent);
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.main-nav a.active,
.main-nav a:hover,
.nav-drop:hover .nav-main-link,
.nav-drop.active .nav-main-link {
  color: var(--color-primary) !important;
  font-weight: var(--font-weight-bold);
}

.main-nav a.active::after,
.main-nav a:hover::after,
.nav-drop:hover .nav-main-link::after,
.nav-drop.active .nav-main-link::after {
  opacity: 1;
}

.right-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  flex-shrink: 0;
}

.lang-switch {
  font-size: 13px;
  color: var(--color-text-light);
  display: flex;
  align-items: center;
  gap: 4px;
}

/* ==========================================================
   共用元件：Footer（比照 index.html 頁尾結構）
   ========================================================== */

.footer {
  background: var(--color-footer-bg);
  color: var(--color-footer-text);
  padding: 64px var(--container-padding-x) 28px;
}

.footer__grid {
  max-width: var(--container-max-width);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--container-padding-x);
  margin-bottom: 40px;
}

.footer__heading {
  font-size: var(--font-size-footer-heading);
  font-weight: var(--font-weight-bold);
  color: #ffffff;
  padding-bottom: 12px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--color-footer-border);
}

.footer__links {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer__links a,
.footer__links span {
  color: var(--color-footer-text);
}

.footer__copyright {
  max-width: var(--container-max-width);
  margin: 0 auto;
  border-top: 1px solid var(--color-footer-border-top);
  padding-top: 20px;
  font-size: var(--font-size-footer-copyright);
  color: var(--color-footer-text-faint);
}

/* ==========================================================
   共用元件：卡片（Service Card / App Card）
   ========================================================== */


/* ==========================================================
   RWD：768px 以下
   ========================================================== */

@media (max-width: 768px) {
  .main-nav {
    display: none; /* 建議改為漢堡選單，另行實作 toggle 邏輯 */
  }
  .footer__grid {
    grid-template-columns: 1fr;
  }
}