/* ════════════════════════════════════════════════════════
   協同造船廠網站 — 自訂樣式（原為 index.html 行內 <style>，
   為配合嚴格 CSP（script/style-src 'self'）改為外部檔案）
   最後更新：2026-07-19
   ════════════════════════════════════════════════════════ */

html { scroll-behavior: smooth; }

/* ── Hero background ── */
#hero {
  background-image:
    linear-gradient(to bottom, rgba(8,15,32,0.72) 0%, rgba(13,31,64,0.60) 60%, rgba(8,15,32,0.85) 100%),
    url('../images/hero-bg.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Fallback gradient when image missing */
#hero.no-img {
  background-image:
    linear-gradient(135deg, #0d1f40 0%, #152f60 40%, #1e4080 70%, #0d1f40 100%);
}

/* Equipment section background */
#equipment {
  background-image:
    linear-gradient(to right, rgba(8,15,32,0.92) 0%, rgba(13,31,64,0.80) 100%),
    url('../images/slipway-bg.jpg');
  background-size: cover;
  background-position: center;
}
#equipment.no-img {
  background: linear-gradient(135deg, #080f20 0%, #0d1f40 50%, #152f60 100%);
}

/* Nav scroll effect */
#navbar.scrolled { background: rgba(8,15,32,0.97); box-shadow: 0 2px 20px rgba(0,0,0,0.5); }

/* Service card hover */
.service-card { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.service-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,0.25); }

/* Orange accent line */
.accent-line::before {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: #FF6B00;
  margin-bottom: 1rem;
  border-radius: 2px;
}
.accent-line-center::before {
  content: '';
  display: block;
  width: 50px;
  height: 4px;
  background: #FF6B00;
  margin: 0 auto 1rem;
  border-radius: 2px;
}

/* Slipway counter animation */
.counter-num { font-variant-numeric: tabular-nums; }

/* Form focus ring */
.form-input:focus { outline: none; border-color: #FF6B00; box-shadow: 0 0 0 3px rgba(255,107,0,0.2); }

/* Mobile menu */
#mobile-menu { transition: max-height 0.3s ease, opacity 0.3s ease; }
#mobile-menu.hidden { max-height: 0; opacity: 0; overflow: hidden; }
#mobile-menu.open { max-height: 400px; opacity: 1; }

/* Scroll-reveal base */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* reveal 進場延遲：原本寫在 index.html 的 style="transition-delay:…"，
   但嚴格 CSP（style-src 'self'）會擋掉行內 style，線上等於沒有錯開效果
   → 改成 class（2026-08-11）。數字＝百分之一秒，d15 = 0.15s。 */
.reveal.d05 { transition-delay: 0.05s; }
.reveal.d10 { transition-delay: 0.10s; }
.reveal.d15 { transition-delay: 0.15s; }
.reveal.d20 { transition-delay: 0.20s; }
.reveal.d25 { transition-delay: 0.25s; }
.reveal.d30 { transition-delay: 0.30s; }
.reveal.d40 { transition-delay: 0.40s; }

/* hero 裝飾格線（原為行內 background-image，同樣被 CSP 擋掉） */
.hero-grid {
  background-image:
    repeating-linear-gradient(0deg,  transparent, transparent 79px, rgba(255,255,255,0.5) 80px),
    repeating-linear-gradient(90deg, transparent, transparent 79px, rgba(255,255,255,0.5) 80px);
}

/* ════════════════════════════════════════════════════════
   語言切換器（六語下拉，DOM 由 js/lang.js 生成）
   刻意手寫 CSS 而不用 Tailwind class：改這裡不必重編 tailwind.css
   ════════════════════════════════════════════════════════ */
#lang-switcher { display: flex; align-items: center; flex-shrink: 0; }

.lang-dropdown { position: relative; }

.lang-dropdown-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1px solid rgba(255,255,255,0.25);
  color: #aabfe1;                       /* navy-200 */
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  transition: color .2s, border-color .2s, background .2s;
}
.lang-dropdown-btn:hover {
  color: #FF6B00;                       /* orange-safety */
  border-color: #FF6B00;
  background: rgba(255,107,0,0.08);
}
.lang-globe   { flex-shrink: 0; opacity: .85; }
.lang-chevron { flex-shrink: 0; transition: transform .2s; }
.lang-dropdown.open .lang-chevron { transform: rotate(180deg); }

.lang-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 110px;
  background: #fff;
  border: 1px solid #d5dff0;            /* navy-100 */
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.25);
  overflow: hidden;
  z-index: 60;                          /* nav 是 z-50 */
}
.lang-dropdown-menu.open { display: block; }

.lang-dropdown-item {
  display: block;
  width: 100%;
  background: none;
  border: none;
  text-align: left;
  padding: 9px 14px;
  font: inherit;
  font-size: 13px;
  color: #152f60;                       /* navy-700 */
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.lang-dropdown-item:hover { background: #eef2f9; }   /* navy-50 */
.lang-dropdown-item.active { color: #FF6B00; font-weight: 700; }

/* 手機版只留地球圖示：帶著語言名稱的按鈕會佔掉 74px，
   把 logo 擠成三行、撐破 h-16 導覽列（2026-08-11 實測） */
@media (max-width: 767px) {
  .lang-dropdown-btn { padding: 6px 8px; gap: 0; }
  .lang-current-label,
  .lang-chevron { display: none; }
  /* 切換器佔掉寬度後，logo 的英文行原本會折成兩行 → 不換行並縮一級 */
  .logo-en { white-space: nowrap; font-size: 10px; letter-spacing: 0.08em; }
}

/* 英文模式隱藏卡片下方的英文副標，否則與已翻成英文的標題重複 */
html[data-lang="en"] .en-sub { display: none; }

/* ── 中文斷行：標題與導言不要把詞切開 ──
   中文可在任兩字之間斷行，預設會出現「…為每一道塗裝品／質獨立把關。」
   這種切詞＋末行只剩幾個字的狀況（2026-08-11 實測）。
   text-wrap: balance 讓瀏覽器把行長平均分配，斷點自然落在標點或中英交界。
   注意：只用在標題與短導言（balance 是給短區塊的）；不支援的瀏覽器會忽略，退回原本行為。 */
.accent-line,
.accent-line-center,
[data-i18n-html="hero_desc"],
[data-i18n="svc_desc"],
[data-i18n="cip_lead"],
[data-i18n="ct_desc"] { text-wrap: balance; }