/* =========================================================
   THTS Website — style.css (2025-09-17 最新版)
   - 全站連結 hover 不變色
   - 導覽列保留底線效果，但文字不變色
   - HERO / Header / Map / Accessibility 強化
   ========================================================= */

/* -------------------------
   Design tokens
------------------------- */
:root{
  --bg-gradient-start:#1A1F2B;
  --bg-gradient-end:#2C3E50;
  --surface-1:#202533;
  --surface-2:#262B3A;
  --surface-3:#30364A;
  --primary-300:#7DD3FC;
  --primary-400:#38BDF8;
  --primary-500:#0EA5E9;
  --primary-700:#0369A1;
  --primary-900:#1E3A8A;
  --accent-400:#FB923C;
  --accent-500:#F59E0B; /* 橘色系 */
  --success:#22C55E;
  --warning:#F59E0B;
  --danger:#EF4444;
  --text-strong:#FFFFFF;
  --text-base:#E5E7EB;
  --text-muted:#D1D5DB;
  --border-soft:#3C445A;
  --ring:#7DD3FC;
  --radius:12px;
  --shadow:0 12px 28px rgba(0,0,0,.25);
}

html{ color-scheme: dark; }

/* -------------------------
   Base
------------------------- */
html,body{
  margin:0;
  padding:0;
  background:linear-gradient(180deg,var(--bg-gradient-start),var(--bg-gradient-end));
  color:var(--text-base);
  font-family:"Inter","Noto Sans TC",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji";
}
img{max-width:100%;height:auto;display:block}
a{color:var(--primary-300);text-decoration:none;transition:color .2s ease}
/* 全站連結 hover 不變色 */
a:hover{color:inherit !important;}
.container{max-width:1180px;margin:0 auto;padding:0 1.25rem}

/* -------------------------
   Header / Nav
------------------------- */
header{
  background:linear-gradient(90deg,rgba(26,31,43,.85),rgba(44,62,80,.85));
  backdrop-filter:saturate(1.1) blur(6px);
  -webkit-backdrop-filter:saturate(1.1) blur(6px);
  border-bottom:1px solid rgba(60,68,90,.7);
  position:sticky;top:0;z-index:50;
  transform:translateZ(0);
}
.bar{display:flex;align-items:center;justify-content:space-between;padding:1rem 0}
.logo{display:flex;align-items:center;gap:.6rem;font-weight:700;color:var(--primary-400)}

nav{display:flex;gap:.8rem;align-items:center;position:relative}
.nav-link{
  color:var(--text-base);
  padding:.5rem .75rem;
  border-radius:8px;
  position:relative;
}
/* underline glide */
.nav-link::after{
  content:"";position:absolute;left:.75rem;right:.75rem;bottom:.3rem;height:2px;
  background:linear-gradient(90deg,var(--primary-400),var(--primary-900));
  opacity:0;transform:scaleX(0);
  transition:opacity .2s,transform .2s;
}
.nav-link:hover::after{opacity:1;transform:scaleX(1)}

@media (hover:none){
  .nav-link::after{display:none;}
}

/* Submenu */
.has-sub{position:relative}
.submenu{
  position:absolute;top:100%;left:0;min-width:280px;
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:12px;box-shadow:var(--shadow);
  padding:.5rem;display:none;
  max-height:60vh;overflow:auto;overscroll-behavior:contain;
}
.has-sub:focus-within .submenu,.has-sub:hover .submenu{display:block}
.submenu a{
  display:block;color:var(--text-base);
  padding:.6rem .8rem;border-radius:8px;
  white-space:nowrap;
}
.submenu a:hover{background:rgba(125,211,252,.08)}

/* -------------------------
   HERO
------------------------- */
.hero--media{
  position:relative;
  display:flex;align-items:center;
  isolation:isolate;
  min-height:min(70svh,800px);
  max-height:84svh;
  overflow:hidden;
  padding:0;
  padding-top:max(env(safe-area-inset-top),0px);
}
@media (max-width:768px){
  .hero--media{ min-height:50vh; }
}

.hero__bg{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero__bg img, .hero__bg video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center 30%;
  filter:brightness(.86) contrast(1.05);
}
.hero__gradient, .hero__pattern, .hero__overlay{
  position:absolute; inset:0; pointer-events:none;
}
.hero__gradient{
  background:
    radial-gradient(60rem 60rem at 20% 25%, rgba(125,211,252,.10), transparent 60%),
    radial-gradient(40rem 40rem at 80% 70%, rgba(14,165,233,.08), transparent 62%);
  z-index:0;
}
.hero__pattern{ background:none !important; z-index:1; }
.hero__overlay{
  background:
    radial-gradient(ellipse at 30% 20%, rgba(56,189,248,.12), transparent 50%),
    linear-gradient(to bottom, rgba(20,24,36,.55), rgba(28,36,50,.65));
  z-index:2;
}

.hero__content{
  position:relative;z-index:3;
  width:100%;max-width:1200px;margin:0 auto;padding:2rem;
  text-align:center;color:#fff;
}
.kicker{letter-spacing:.12em;text-transform:uppercase;color:var(--primary-300);font-size:.9rem;margin-bottom:1rem}
.hero__title{font-size:clamp(2rem,5vw,3.5rem);font-weight:700;margin-bottom:1rem;line-height:1.2}
.hero__subtitle{font-size:clamp(1rem,2vw,1.25rem);font-weight:400;color:rgba(255,255,255,.85);max-width:720px;margin:0 auto 2rem}
.hero__actions{display:flex;justify-content:center;gap:1rem}

.hero--reading .hero__content{max-width:980px;text-align:left}
.hero--reading .hero__subtitle{margin-bottom:1.25rem}

/* -------------------------
   Buttons
------------------------- */
.btn{
  display:inline-block;font-weight:700;
  padding:.85rem 1.4rem;border-radius:var(--radius);
  border:1px solid rgba(255,255,255,.06);
  transition:transform .12s ease,background .2s ease;
  box-shadow:var(--shadow);background:var(--surface-3);color:var(--text-base);
}
.btn.primary{color:#fff;background:linear-gradient(90deg,var(--primary-500),var(--primary-900))}
.btn.primary:hover{background:linear-gradient(90deg,var(--primary-700),var(--primary-900));transform:translateY(-2px)}
.btn:hover{transform:translateY(-2px)}

/* -------------------------
   Sections / Grids / Cards
------------------------- */
.section{padding:3rem 0}
.grid{display:grid;gap:1rem}
.cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cols-3{grid-template-columns:1fr}}

.card{
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  border-radius:12px;
  padding:1.4rem;
  box-shadow:0 10px 24px rgba(0,0,0,.22);
}
.card h3{color:var(--text-strong);margin:.2rem 0 .6rem}
.card .muted{color:var(--text-muted)}

.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:2rem;align-items:center}
@media (max-width:900px){
  .two-col{grid-template-columns:1fr;gap:1.25rem}
  .media-left{order:0}
  .content-right{order:1}
}

/* -------------------------
   Long-form typography
------------------------- */
.prose{
  max-width:70ch;
  margin:0 auto;
  font-size:1.05rem;
  line-height:1.9;
  letter-spacing:.01em;
  color:var(--text-base);
  text-wrap:pretty;
}
@media (max-width:900px){
  .prose{font-size:1rem;line-height:1.85;padding:0 .25rem}
}
.prose p{margin:0 0 1.1em}
.prose h2,.prose h3{color:var(--text-strong);line-height:1.35;margin:1.6em 0 .6em}
.prose h2{font-size:clamp(1.5rem,3vw,2.1rem)}
.prose h3{font-size:clamp(1.25rem,2.2vw,1.5rem)}
.prose ul{margin:0 0 1.2em 0;padding-left:1.2em;list-style:none}
.prose ul li{position:relative;margin:.45em 0;padding-left:.9em}
.prose ul li::before{
  content:"";width:.42em;height:.42em;border-radius:50%;
  background:var(--primary-400);
  box-shadow:0 0 0 3px rgba(56,189,248,.12);
  position:absolute;left:0;top:.7em;
}
.prose strong{color:var(--text-strong)}
.prose a{ text-decoration: underline; text-underline-offset: .2em; }

/* -------------------------
   Reveal on scroll
------------------------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; transition:none !important; scroll-behavior:auto !important; }
  .reveal{ opacity:1 !important; transform:none !important; }
}

/* -------------------------
   Footer
------------------------- */
footer{background:var(--surface-1);border-top:1px solid var(--border-soft);margin-top:2rem}
.foot{display:flex;align-items:center;justify-content:space-between;padding:1rem 0;gap:1rem;flex-wrap:wrap}
.mini{font-size:.9rem;color:var(--text-muted)}

.address{
  display:flex;flex-wrap:wrap;gap:.75rem 1.25rem;align-items:center;
  color:var(--text-muted);font-size:.95rem;
}
.address a{color:var(--text-base);text-decoration:underline;text-underline-offset:.2em}

/* -------------------------
   Accessibility
------------------------- */
:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

/* -------------------------
   Utilities
------------------------- */
.text-center{text-align:center}

/* === Disabled: hover alt English label on nav items === */
.nav-link[data-alt]:hover::before{ content:none !important; }
.nav-link[data-alt]:hover{ color:inherit !important; }

/* -------------------------
   Google Map embed
------------------------- */
.contact-grid{
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:1.25rem;
  align-items:start;
}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr;}
}

.map-embed{
  width:100%;
  aspect-ratio:16/9;
  border:0;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  filter:grayscale(10%) contrast(1.05) brightness(.98);
  background:#0b1220;
}


/* RWD Core in style.css (auto) */
/* Header：桌機基準（確保導覽橫排） */
.bar { display:flex; align-items:center; justify-content:space-between; }
.bar nav { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; }

/* 手機（≤768px）：收合 + 點擊展開子選單 */
@media (max-width: 768px) {
  .bar { flex-wrap: wrap; gap: .75rem; }
  .bar nav { display:none; flex-direction:column; gap:.5rem; width:100%; margin-top:.25rem; }
  body.nav-open .bar nav { display:flex; }
  .has-sub { position: static; }
  .has-sub .submenu {
    display:none; position:static; margin-top:.25rem; padding:8px;
    border-radius:12px; border:1px solid rgba(255,255,255,.12);
    background:var(--surface-2,#262B3A);
  }
  .has-sub.open .submenu { display:block; }
}
@media (min-width: 769px) {
  .has-sub { position:relative; }
  .has-sub .submenu {
    position:absolute; left:0; top:100%;
    margin-top:8px; min-width:320px; padding:8px;
    border-radius:12px; border:1px solid rgba(255,255,255,.12);
    background:var(--surface-2,#262B3A); box-shadow:0 10px 30px rgba(0,0,0,.25); display:none; z-index:20;
  }
  .has-sub:hover .submenu { display:block; }
}


/* Force mobile collapsed (auto) */
@media (max-width: 768px) {
  header .bar nav { display: none !important; }
  body.nav-open header .bar nav { display: flex !important; }
}



/* === Nav Layout Hardening (auto) === */
/* 桌機：橫排並防止意外縱向 */
@media (min-width: 769px) {
  .bar { display:flex; align-items:center; justify-content:space-between; }
  .bar nav { display:flex; align-items:center; gap:1rem; flex-wrap:wrap; flex-direction: row !important; }
  .bar nav .nav-link { display:inline-flex; align-items:center; white-space:nowrap; }
  .lang-switch { margin-left:auto; }
}
/* 手機：預設收合，展開後直向排列 */
@media (max-width: 768px) {
  header .bar nav { display:none; flex-direction:column; gap:.5rem; width:100%; margin-top:.25rem; }
  body.nav-open header .bar nav { display:flex; }
  .has-sub { position: static; }
  .has-sub .submenu { display:none; position:static; margin-top:.25rem; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:var(--surface-2,#262B3A); }
  .has-sub.open .submenu { display:block; }
}



/* === Nav Layout Hardening V2 (auto) === */
/* 桌機：固定 header 水平排版，避免任何 wrap/覆寫造成直排 */
@media (min-width: 769px) {
  header .bar { display:flex; align-items:center; justify-content:space-between; gap:1rem; }
  header .bar > .logo { flex:0 0 auto; display:flex; align-items:center; gap:.6rem; }
  header .bar > nav { 
    flex:1 1 auto; display:flex; align-items:center; justify-content:flex-end; 
    gap:1rem; flex-direction:row !important; flex-wrap:nowrap !important;
  }
  header .bar > nav .nav-link { display:inline-flex; align-items:center; white-space:nowrap; flex:0 0 auto; }
  header .nav-toggle { display:none !important; }
}
/* 手機：預設收合；展開後直向排列（保留原有行為） */
@media (max-width: 768px) {
  header .bar { flex-wrap:wrap; gap:.75rem; }
  header .bar nav { display:none; flex-direction:column; gap:.5rem; width:100%; margin-top:.25rem; }
  body.nav-open header .bar nav { display:flex; }
  .has-sub { position: static; }
  .has-sub .submenu { display:none; position:static; margin-top:.25rem; padding:8px; border-radius:12px; border:1px solid rgba(255,255,255,.12); background:var(--surface-2,#262B3A); }
  .has-sub.open .submenu { display:block; }
}



/* === Header Logo Fix (auto) === */
/* 有些全域樣式（例如 img{width:100%}）會把 header 的 logo 撐滿，這裡強制矯正 */
header .logo { display:flex; align-items:center; gap:.5rem; }

header .logo img {
  height: 60px;
  max-height: 60px;
  width: auto;
  display: inline-block;
}

/* 窄畫面維持同樣高度 */
@media (max-width: 768px) {
  
header .logo img {
  height: 60px;
  max-height: 60px;
  width: auto;
  display: inline-block;
}

}


/* === Header/Nav RWD — unified (final) === */

/* 固定 header logo 尺寸，不受全域 img 規則影響 */
header .logo{display:flex;align-items:center;gap:.6rem}

header .logo img {
  height: 60px;
  max-height: 60px;
  width: auto;
  display: inline-block;
}


/* 漢堡按鈕基礎（桌機預設不顯示） */
.nav-toggle{
  display:none;background:transparent;color:inherit;cursor:pointer;
  border:1px solid rgba(255,255,255,.2);border-radius:8px;
  width:40px;height:40px;font-size:1.1rem;align-items:center;justify-content:center;
}

/* 桌機 ≥769px：整組 nav 貼齊右側 */
@media (min-width:769px){
  header .bar{display:flex;align-items:center;justify-content:space-between;gap:1rem}
  header .bar > nav{
    display:flex;align-items:center;gap:1rem;
    margin-left:auto;justify-content:flex-end;flex-wrap:nowrap;
    flex-direction:row !important;
  }
  header .bar > nav .nav-link{display:inline-flex;align-items:center;white-space:nowrap}
  header .bar > nav .lang-switch{margin-left:1rem}
  header .nav-toggle{display:none !important}

  /* 桌機子選單用 hover/聚焦展開 */
  .has-sub{position:relative}
  .has-sub .submenu{
    position:absolute;left:0;top:100%;
    margin-top:8px;min-width:320px;padding:8px;
    border-radius:12px;border:1px solid var(--border-soft);
    background:var(--surface-2);box-shadow:var(--shadow);display:none;z-index:20;
  }
  .has-sub:hover .submenu,.has-sub:focus-within .submenu{display:block}
}

/* 手機 ≤768px：預設收合；展開後直向排列 */
@media (max-width:768px){
  header .bar{display:flex;flex-wrap:wrap;gap:.75rem}
  header .bar nav{display:none;flex-direction:column;gap:.5rem;width:100%;margin-top:.25rem}
  body.nav-open header .bar nav{display:flex}
  .nav-toggle{display:inline-flex;margin-left:auto}

  .has-sub{position:static}
  .has-sub .submenu{
    display:none;position:static;margin-top:.25rem;padding:8px;
    border-radius:12px;border:1px solid var(--border-soft);
    background:var(--surface-2);
  }
  .has-sub.open .submenu{display:block}
}


:root{
  --logo-h-m: 40px;  /* 手機高度 */
  --logo-h-d: 48px;  /* 桌機高度（改這個就會變大） */
}

/* 手機 ≤768px */
@media (max-width:768px){
  
header .logo img {
  height: 60px;
  max-height: 60px;
  width: auto;
  display: inline-block;
}

}

/* 桌機 ≥769px */
@media (min-width:769px){
  
header .logo img {
  height: 52px;
  max-height: 52px;
  width: auto;
  display: inline-block;
}

}


@media (min-width: 769px){
  .has-sub{ position:relative; }
  .has-sub::after{
    content:"";
    position:absolute;
    left:0; right:0;
    top:100%;
    height:12px;
  }
}