/* ---------------------------------------------------------------------------
   台灣升鴻機械 — 重製模型主題
   依 docs/design-spec.md 復刻原站 Weebly 主題（assets/css/main_style.css）。
   結構 id / class 沿用原站命名，方便與原始 CSS 逐條對照。
   多欄區塊改用 flex（原站為 table），其餘視覺數值與原站一致。
--------------------------------------------------------------------------- */

:root {
  --bg-page: #292929;
  --bg-sub: #232324;
  --brand: #52ae8c;
  --brand-hover: #5ac59e;
  --brand-active: #449275;
  --btn-normal: #393939;
  --btn-normal-hover: #424242;
  --btn-normal-active: #303030;
  --text: #767676;
  --heading: #ffffff;
  --nav-hover-bg: #3f3f3f;
  --nav-hover-fg: #a3a3a3;
  --submenu-hover-bg: #343434;
  --submenu-hover-fg: #858585;
  --line: #373737;
  --font-body: 'Raleway', 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --font-heading: 'Lora', 'Noto Serif TC', 'PingFang TC', serif;
}

* { box-sizing: border-box; }

html { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 500;
  color: var(--text);
  background: var(--bg-page);
  min-height: 100%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, div.paragraph, blockquote, fieldset, input {
  margin: 0;
  padding: 0;
}

a {
  color: var(--brand);
  text-decoration: none;
  transition: all 0.2s ease-in-out;
}
a:hover { color: #ffffff; }
a img { border: 0; }

h2 {
  font-family: var(--font-heading);
  font-size: 1.7em;
  font-weight: normal;
  color: var(--heading);
  margin: 0 auto .3em;
}

div.paragraph { line-height: 1.5; margin: 0 auto 1em; }

hr.styled-hr {
  background-color: var(--line);
  border: 0;
  height: 1px;
  margin: 1em auto;
}

/* --- 頁首 ---------------------------------------------------------------- */

#header {
  background: var(--bg-sub);
  text-align: center;
  padding-top: 52px;
  padding-bottom: 25px;
}

.wsite-logo a {
  color: var(--heading);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 36px;
  text-transform: uppercase;
}
.wsite-logo img { vertical-align: middle; }

.nav-trigger { display: none; text-align: center; }
.nav-trigger span.mobile {
  display: block;
  background-color: var(--nav-hover-fg);
  height: 3px;
  width: 24px;
  position: relative;
  margin: 0 auto 5px;
  box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 1);
}
.nav-trigger span.mobile:last-child { margin-bottom: 0; }

/* --- 桌機主選單 ---------------------------------------------------------- */

.bg-wrapper { background-color: var(--bg-sub); }

#navigation {
  width: 960px;
  margin: auto;
  padding-bottom: 40px;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-size: 13px;
}

#navigation ul { list-style-type: none; }

/* 選單兩側的水平裝飾線。原站用 50% 寬的偽元素配負 margin 再以 overflow 裁切，
   這裡改用 flex 讓線自動填滿剩餘空間，效果相同但不會裁到下拉選單。 */
#navigation > ul {
  display: flex;
  flex-wrap: nowrap;
  justify-content: center;
  align-items: center;
}
#navigation > ul:before,
#navigation > ul:after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background-color: var(--line);
}
#navigation > ul:before { margin-right: 29px; }
#navigation > ul:after { margin-left: 29px; }

#navigation li { display: inline-block; position: relative; flex: 0 0 auto; }
#navigation a { display: inline-block; padding: 10px 14px; color: inherit; }
#navigation > ul > li:hover,
#navigation > ul > li#active { background-color: var(--nav-hover-bg); color: var(--nav-hover-fg); }

.wsite-menu-arrow { font-size: 0; margin-left: 10px; }
.wsite-menu-arrow:before {
  display: inline-block;
  content: '\203A';
  vertical-align: bottom;
  font-size: 20px;
}

/* 下拉子選單（原站由 JS 產生 #wsite-menus，此處改為純 CSS hover） */
#navigation .wsite-menu-wrap {
  display: none;
  position: absolute;
  left: 0;
  top: 100%;
  z-index: 20;
  min-width: 190px;
  text-align: left;
}
#navigation li:hover > .wsite-menu-wrap { display: block; }
#navigation .wsite-menu-wrap ul { margin: 0; }
#navigation .wsite-menu-wrap li { display: block; }
#navigation .wsite-menu-wrap a {
  display: block;
  padding: 10px 14px;
  background-color: var(--nav-hover-bg);
  color: var(--nav-hover-fg);
  white-space: nowrap;
}
#navigation .wsite-menu-wrap a:hover {
  background-color: var(--submenu-hover-bg);
  color: var(--submenu-hover-fg);
}
#navigation .wsite-menu-wrap .wsite-menu-wrap { left: 100%; top: 0; }
#navigation .wsite-menu-more > .wsite-menu-wrap { left: auto; right: 0; }
#navigation .wsite-menu-more > .wsite-menu-wrap .wsite-menu-wrap { left: auto; right: 100%; }

/* --- 橫幅 ---------------------------------------------------------------- */

.banner-wrap {
  position: relative;
  text-align: center;
  width: 100%;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
}
.wsite-background:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, .1);
  z-index: 1;
}
.banner-wrap a { color: var(--brand); }
.banner-wrap a:hover { text-decoration: underline; }

#banner {
  position: relative;
  width: 600px;
  height: 100%;
  margin: auto;
  display: table;
  table-layout: fixed;
  z-index: 2;
}
#banner-container { display: table-cell; vertical-align: middle; padding: 2em 1.6em; }
/* 型號字串（129,229,…）沒有斷行點，要允許強制換行才不會撐破 600px 的橫幅容器 */
#banner h2 { font-size: 50px; color: #fff; padding: 0; margin: 0; overflow-wrap: anywhere; }
#banner div.paragraph { font-size: 1.33em; margin: 0 auto; color: #fff; }
#banner .button-wrap { padding: 0; }
.banner-wrap .button-wrap > div:before { content: ''; display: block; padding-top: 40px; }
.banner-wrap .wsite-button-inner {
  font-family: var(--font-body);
  text-transform: uppercase;
  font-size: 15px;
}

.landing-page #banner { height: 460px; }
.tall-header #banner { height: 380px; }
.no-header #content { padding-top: 2em; }

/* --- 內容 ---------------------------------------------------------------- */

#content-wrapper { width: 960px; margin: auto; }
#content { padding: 4em 1.6em; margin: 0 auto; }
#wsite-content { text-align: center; }

h2.wsite-content-title { line-height: 1.3; }

.wsite-image { margin: 0 auto 1em; }
.wsite-image img { max-width: 100%; height: auto; vertical-align: middle; }
.wsite-image-border-hairline img { border: 1px solid var(--line); }

.wsite-spacer { display: block; }

/* 多欄區塊：原站以 table 排版並寫死欄寬百分比，此處改用 flex 保留相同比例 */
.wsite-multicol { margin: 0 -15px 1em; }
.wsite-multicol-table {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  width: 100%;
}
.wsite-multicol-col { padding: 0 15px; min-width: 0; }

/* 按鈕 */
.button-wrap { margin: 0 auto 1em; }
.wsite-button {
  display: inline-block;
  color: #fff;
  background-color: var(--brand);
  padding: 8px 20px;
  line-height: 1.25;
}
.wsite-button:hover { color: #fff; }
.wsite-button-large { padding: 10px 25px; }
.wsite-button-highlight:hover { background-color: var(--brand-hover); }
.wsite-button-highlight:active { background-color: var(--brand-active); }
.wsite-button-normal { background-color: var(--btn-normal); }
.wsite-button-normal:hover { background-color: var(--btn-normal-hover); }
.wsite-button-normal:active { background-color: var(--btn-normal-active); }
/* 需要比 .banner-wrap a 更高的權重，否則橫幅按鈕文字會變成與底色同一個綠 */
.wsite-button .wsite-button-inner { background-color: inherit; color: #fff; }

/* 檔案下載卡（CAD .dwg） */
.wsite-file-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin: 0 auto .5em;
  text-align: left;
}
.wsite-file-table th,
.wsite-file-table td { padding: 2px 4px; font-weight: normal; }
.wsite-file-table th { color: var(--heading); }
.wsite-file-icon { display: inline-block; color: var(--nav-hover-fg); }

/* 清單（商店頁分享連結等） */
#wsite-content ul.plain-list { list-style: none; margin: 0 auto 1em; padding: 0; }
#wsite-content ul.plain-list li { margin: 3px 0; }

/* 商店商品卡（原站為 Weebly 電商模組，模型改為靜態卡片） */
.wsite-com-product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 auto 1em;
}
.wsite-com-product-card {
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 10px;
  font-size: 13px;
}
.wsite-com-product-card .wsite-image { margin-bottom: .5em; }
/* 原站商品圖是固定正方形縮圖（CSS background cover），這裡用 object-fit 取得相同裁切 */
.wsite-com-product-card .wsite-image img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border: 1px solid var(--line);
}
.wsite-com-product-card h2 { font-family: var(--font-heading); font-size: 1.15em; }
.wsite-com-product-card .button-wrap { margin-bottom: 0; }

/* 一般表格（規格對照） */
.wsite-table { border-collapse: collapse; margin: 0 auto 1em; font-size: 14px; }
.wsite-table th,
.wsite-table td { border: 1px solid var(--line); padding: 6px 10px; }
.wsite-table th { color: var(--heading); font-weight: normal; }

/* 嵌入元件（YouTube / Google 地圖） */
.wsite-embed { margin: 10px auto; }
.wsite-embed-responsive { position: relative; width: 100%; padding-bottom: 56.25%; }
.wsite-embed-responsive iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.wsite-embed-map iframe { width: 100%; height: 450px; border: 0; display: block; }

/* 表單 */
.wsite-form { max-width: 480px; margin: 0 auto; text-align: left; }
.wsite-form-field { margin-bottom: 12px; }
.wsite-form-label { display: block; font-weight: normal; margin-bottom: 2px; }
.wsite-input,
.wsite-form-input {
  width: 100%;
  border: solid 1px var(--line);
  border-radius: 0;
  margin: 8px 0;
  outline: none;
  min-height: 35px;
  padding: 8px;
  font-size: 13px;
  font-family: var(--font-body);
  background: transparent;
  color: var(--heading);
}
textarea.wsite-form-input { min-height: 120px; resize: vertical; }
.wsite-input:focus,
.wsite-form-input:focus { border-color: var(--brand); }
.wsite-form-note { font-size: 12px; margin-top: 8px; }
button.wsite-button { border: 0; cursor: pointer; font-family: var(--font-body); font-size: 15px; }

/* --- 頁尾 ---------------------------------------------------------------- */

#footer {
  font-family: var(--font-body);
  font-size: 14px;
  background: var(--bg-page);
}
#footer-content { width: 960px; margin: auto; padding: 4em 1.6em; }
#footer h2 {
  font-family: var(--font-body);
  font-size: 18px;
  text-transform: uppercase;
}
.wsite-footer { text-align: center; }

/* --- 手機抽屜選單 -------------------------------------------------------- */

.navmobile-wrapper { display: none; }

#navmobile ul { list-style-type: none; }
#navmobile a { color: inherit; padding: 10px; display: block; }
#navmobile a:hover { background: var(--nav-hover-bg); color: var(--nav-hover-fg); }
#navmobile li#active > a { background: var(--nav-hover-bg); color: var(--nav-hover-fg); }
#navmobile .wsite-menu { margin-left: 12px; display: none; }
#navmobile li.open > .wsite-menu { display: block; }
.wsite-menu-mobile-arrow {
  display: inline-block;
  padding: 0 5px;
  float: right;
  cursor: pointer;
}
.wsite-menu-mobile-arrow:before { content: '\203A'; display: inline-block; }
#navmobile li.open > a .wsite-menu-mobile-arrow:before { content: '\2039'; }

/* --- 響應式 -------------------------------------------------------------- */

@media (max-width: 1024px) {
  #navigation,
  #banner,
  #content-wrapper,
  #footer-content { width: auto; min-width: 100%; }
  #wrapper { position: relative; left: 0; transition: left 0.3s ease-in-out; }
}

@media (max-width: 992px) {
  h2 { font-size: 1.4em; margin-bottom: 7px; }
  .wsite-button-inner { font-size: 0.8em; }

  #header {
    padding: 0 10px;
    height: 65px;
    display: table;
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background: var(--bg-sub);
    border-bottom: solid 1px #d0d0d0;
    z-index: 11;
  }
  #sitename { margin: 0 60px; vertical-align: middle; display: table-cell; }
  .wsite-logo img { max-height: 45px; max-width: 170px; }

  .nav-trigger { display: table-cell; vertical-align: middle; width: 24px; }
  .open-btn { display: block; position: relative; z-index: 11; width: 24px; padding: 15px; cursor: pointer; }

  #navigation { display: none; }

  #wrapper {
    z-index: 10;
    background: var(--bg-page);
    position: relative;
    width: 100%;
    min-height: 100%;
    padding-top: 64px;
    box-shadow: 0 0 5px rgba(87, 87, 87, 0.2);
  }

  .navmobile-wrapper {
    position: fixed;
    display: block;
    opacity: 0;
    width: 275px;
    height: 100%;
    padding: 80px 0 20px;
    top: 0;
    left: 0;
    overflow-y: auto;
    background: var(--bg-sub);
    transition: opacity 0s 1s linear;
  }
  #navmobile {
    margin: 0 15px;
    font-size: 0.9em;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    font-family: var(--font-body);
  }
  #navmobile > ul { width: 60%; }

  body.menu-open #wrapper { left: 275px; }
  body.menu-open .navmobile-wrapper { opacity: 1; transition: opacity 0s 0s linear; }

  .landing-page #banner { height: 400px; }
  .tall-header #banner { height: 300px; }
  #banner h2 { font-size: 3em; line-height: 1; }
  #banner div.paragraph { font-size: 1em; }
  .banner-wrap .button-wrap > div:before { padding-top: 35px; }

  #footer { padding: 0; }
}

@media (max-width: 767px) {
  #navmobile > ul { width: 100%; }
  .landing-page #banner { height: 300px; }
  .tall-header #banner { height: 230px; }
  #banner h2 { font-size: 2em; }
  .banner-wrap .button-wrap > div:before { padding-top: 30px; }

  /* 多欄區塊在手機堆疊為單欄；欄數多的型號按鈕列改為自動換行格狀 */
  .wsite-multicol-table { flex-wrap: wrap; }
  .wsite-multicol-col { width: 100% !important; max-width: 100% !important; margin: 0 auto 1em; }
  .wsite-multicol-table.cols-many { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); }
  .wsite-multicol-table.cols-many .wsite-multicol-col { width: auto !important; margin: 0; }

  .wsite-com-product-grid { grid-template-columns: repeat(2, 1fr); }
}