/* =======================================================================
   pages.css — 站台專屬樣式（CSP style-src 'self' 前置重構的產物）
   原站（Joomla as002057free 模板）把樣式分散寫在兩個地方，全部集中到這裡：
     1. 每頁 <head> 內嵌的 3 段 <style>（樣板色彩/字型、主選單模組、輪播模組），
        每頁逐字相同 → 收錄成不分頁面的共用規則（見「一、全站共用」）。
     2. 各頁內文自帶的 <style> 與 style="..." 行內屬性
        → 收錄成頁面專屬規則，用 .page-xxx 前綴隔離（見「三、各頁專屬」）。
   ⚠️ 跨頁同名 class（.category-item / .contact-item 等）在 LightClock 與 NISD
   兩頁的定義並不相同，務必維持 .page-lightclock / .page-nisd 前綴隔離，
   不要為了「集中管理」合併，會讓其中一頁跑版。
   ======================================================================= */

/* =======================================================================
   一、全站共用（原站每頁 <head> 內嵌 <style> 逐字照收）
   原始碼裡大量 `color: #;` `background-color: #;` 這種沒填值的殘留宣告已略過
   （逐條核對過大括號內容是否為空，不是整段跳過），有實際值的規則全數收錄。
   ======================================================================= */

body {
  font-family: Tahoma, Geneva, sans-serif, Arial;
  font-size: 14px;
}

a,
#featured-row .mod-newsflash .item:hover h2 {
  color: #c65752;
}

input,
button,
select,
textarea {
  font-family: Tahoma, Geneva, sans-serif, Arial;
}

h1,
h2,
h3,
h4,
h5,
.item_header .item_title {
  font-family: 'Open Sans', Arial, serif !important;
}

.categories-module li a,
.archive-module li a {
  color: #c65752;
}

#header-row .moduletable.call-now {
  color: #c65752;
}

#header-row .moduletable.call-now div {
  font-family: 'Open Sans', Arial, serif !important;
}

#header-row .logo {
  float: left;
  line-height: 60px;
  min-width: 240px;
}

#header-row .logo,
#header-row .logo a,
#header-row .logo a:hover {
  font-family: 'Open Sans', Arial, serif !important;
  font-style: normal;
  font-weight: normal;
}

#header-row .logo span.slogan {
  left: 5px;
  top: 0px;
  font-family: 'Open Sans', Arial, serif !important;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
}

#footer-row ul.nav li a:hover {
  color: #c65752;
}

#copyright-menu li a:hover {
  color: #c65752;
}

/* --- 主選單模組（mod_as_menu）--- */

#as-menu #menu_1,
#as-menu ul#menu_1.as-menu ul {
  border-radius: 5px;
}

#as-menu ul#menu_1.as-menu > li > a,
#as-menu ul#menu_1.as-menu > li > span {
  font-size: 18px;
  line-height: 20px;
  font-family: 'Noto Sans TC', sans-serif;
}

#as-menu ul#menu_1.as-menu > li.active > a,
#as-menu ul#menu_1.as-menu > li.asHover > a,
#as-menu ul#menu_1.as-menu > li.current > a,
#as-menu ul#menu_1.as-menu > li.active > span,
#as-menu ul#menu_1.as-menu > li.asHover > span,
#as-menu ul#menu_1.as-menu > li.current > span,
#as-menu ul#menu_1.as-menu > li > a:hover,
#as-menu ul#menu_1.as-menu > li > span:hover,
#as-menu ul#menu_1.as-menu ul li a:hover,
#as-menu ul#menu_1.as-menu ul li span:hover,
#as-menu ul#menu_1.as-menu ul li.active > a,
#as-menu ul#menu_1.as-menu ul li.asHover > a,
#as-menu ul#menu_1.as-menu ul li.active > span,
#as-menu ul#menu_1.as-menu ul li.asHover > span {
  color: #c65752;
}

#as-menu ul#menu_1.as-menu ul {
  width: 191px;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  -webkit-border-bottom-right-radius: 5px;
  -moz-border-radius-bottomright: 5px;
  border-bottom-right-radius: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -moz-border-radius-bottomleft: 5px;
  border-bottom-left-radius: 5px;
}

#as-menu ul#menu_1.as-menu ul li a,
#as-menu ul#menu_1.as-menu ul li span {
  font-size: 16px;
  line-height: 18px;
  font-family: 'Noto Sans TC', sans-serif;
}

#as-menu ul#menu_1.as-menu li li:hover ul,
#as-menu ul#menu_1.as-menu li li.asHover ul,
#as-menu ul#menu_1.as-menu li li li:hover ul,
#as-menu ul#menu_1 .as-menu li li li.asHover ul {
  left: 191px;
}

/* --- Banner 輪播模組（mod_as_artslider）--- */

.camera_caption p {
  font-size: 14px;
}

.camera_wrap .camera_pag .camera_pag_ul li.cameracurrent,
.camera_wrap .camera_pag .camera_pag_ul li:hover {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

.camera_wrap .camera_pag .camera_pag_ul li {
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
}

/* Banner 輪播套件（camera.min.js）動態插入的 3 段行內 style="..." 的等效覆蓋。
   跟 aesc/lipers 是同一套樣板供應商、同一支套件、幾乎一樣的設定
   （fx:'random'、cols:6、rows:4、pagination:1），已由 csp-vendor-scan 掃出，
   已知會被 style-src 'self'（無 unsafe-inline）擋下：
   1. 分頁圓點 `.append('<li ... style="position:relative; z-index:1002">')`
      ——position/z-index 不生效會讓分頁圓點退回 static、被其他圖層蓋住點不到。
   2. loading bar `.append('<div class="camera_bar" style="display:none">')`
      ——display:none 不生效，本來不該顯示的灰底 bar 會跑出來。
   3. `fx:'random'` 隨機挑到 mosaic/curtain 系列轉場時，切格用的
      `.append('<div class="cameraappended" style="display:none; overflow:hidden;
      position:absolute; z-index:1000">')`——三個屬性都不生效，畫面會變成同一張圖
      複製貼成一整排格子、且沒有切換動畫。
   ⚠️ 三筆都會被目前的設定觸發，不要因為「看起來用不到」而略過任何一筆
   （aesc 當初就是漏了第 3 筆，上線後才被使用者看到馬賽克畫面）。 */
.camera_wrap .camera_pag .camera_pag_ul li {
  position: relative;
  z-index: 1002;
}

.camera_wrap .camera_bar,
.camera_wrap .camera_bar_cont {
  display: none !important;
}

.cameraappended {
  display: none;
  overflow: hidden;
  position: absolute;
  z-index: 1000;
}

/* =======================================================================
   二、共用小工具 class（原本散在各頁的 style="..." 行內屬性，內容逐字相同）
   ======================================================================= */

.clear-both {
  clear: both;
}

/* ⚠️ 這條必須帶 .item_fulltext 前綴才會生效：style.default.css 有一條
   `.item_fulltext img { border: 1px solid #d4d4d4; padding: 5px; ... }`
   （specificity 0,1,1），原站是靠行內 style="border: 0px"（優先權最高）蓋掉它；
   抽成一般 class `.img-noborder`（0,1,0）後反而輸給那條規則，圖片會多出
   1px 灰邊、整頁高度差 2px——用 getComputedStyle 跟正式站比對才抓到。 */
.item_fulltext img.img-noborder {
  border: 0px;
}

.text-center {
  text-align: center;
}

/* 頁尾第二列的網站導覽（原站每個項目都是 float:left; margin:0 60px） */
.footer-nav-item {
  float: left;
  margin: 0 60px;
}

/* 頁尾聯絡資訊 */
.footer-contact-title {
  font-size: 14pt;
  color: #c65752;
}

.footer-contact-addr {
  font-size: 10pt;
}

/* 區塊標題（首頁「代 理 品 牌」「造訪日電貿集團」共用同一組樣式） */
.section-title {
  text-align: center;
  margin: 0 auto 20px auto;
  width: 140px;
  border-bottom: 3px solid #c65752;
}

.section-title p {
  padding: 5px 0;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}

/* 品牌 logo 磚（首頁代理品牌、造訪日電貿集團共用） */
.brand-tile {
  float: left;
  margin: 10px;
}

/* =======================================================================
   三、各頁專屬（.page-xxx 前綴隔離，對應 content/*.html 最外層容器）
   ======================================================================= */

/* --- 首頁：三欄導引區 --- */

.home-intro {
  margin-left: 20px;
}

.home-intro-col {
  width: 240px;
  float: left;
  padding: 0 6% 0 6%;
}

.home-intro-col.is-last {
  padding: 0 0 0 6%;
}

.home-intro-heading {
  text-align: center;
  color: #c65752;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
  padding: 10px 0 20px 0;
}

.home-intro-text {
  font-size: 12px;
  color: #5c5c5c;
  font-family: 'Noto Sans TC', sans-serif;
}

.home-intro-more {
  text-align: center;
  color: white;
  background-color: #c65752;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 12px;
  margin: 20px 50px;
  padding: 6px;
  border-radius: 3px;
  cursor: pointer;
}

/* --- 首頁：代理品牌／造訪日電貿集團兩個區塊的容器 --- */

.home-brands-list {
  text-align: center;
  padding-left: 50px;
}

.home-ndb-list {
  text-align: center;
  padding-left: 120px;
}

/* --- 首頁：品質認證 --- */

.cert-wrapper {
  font-family: 'Noto Sans TC', 'Noto Sans SC', 'Roboto', sans-serif;
}

.cert-title {
  text-align: center;
  margin: 0 auto 20px auto;
  width: 140px;
  border-bottom: 3px solid #c65752;
  padding: 5px 0;
  font-size: 18px;
  letter-spacing: 3px;
}

.cert-content {
  padding-left: 50px;
}

.cert-content-iso {
  color: #c65752;
  font-size: 18px;
  padding: 10px 0 10px 10px;
}

.cert-content-img img {
  margin: 0px 10px 10px;
  box-shadow: 1px 1px 3px #333;
}

/* --- 關於通盛（/corporation/）--- */

.page-corporation .corp-en {
  text-align: right;
  font-size: 10pt;
}

.page-corporation .corp-en h2 {
  padding: 20px 0px;
}

.page-corporation .corp-heading {
  background-image: url('/images/icon/ico.adv3.png');
  background-repeat: no-repeat;
  padding: 20px 0px 20px 85px;
}

.page-corporation .corp-zh {
  border-left: dashed 1px #cccccc;
  margin-left: 50px;
  padding-left: 55px;
  line-height: 21px;
  font-size: 10pt;
}

/* --- 通盛優勢（/benefits/）--- */

.page-benefits .benefit-block {
  margin-top: 30px;
}

.page-benefits .benefit-badge {
  border-radius: 50%;
  background-color: #c65752;
  padding: 10px 17px 10px;
  margin-right: 18px;
  color: white;
}

/* 原站最後一項（W）的左右 padding 比其他項窄 3px，逐字保留 */
.page-benefits .benefit-badge.is-narrow {
  padding: 10px 14px 10px;
}

.page-benefits .benefit-lead {
  margin: 30px 60px 0px;
}

.page-benefits .benefit-item {
  margin-left: 60px;
}

/* --- 招募菁英（/jobs-at-tonsam/）--- */

.page-jobs .page-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.page-jobs .page-frame {
  float: left;
  font-size: 13px;
  width: 160px;
  border: 0;
}

.page-jobs .page-type {
  margin-bottom: 16px;
  width: 120px;
  border-bottom: 3px solid #c65752;
  padding: 5px 0;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}

.page-jobs .page-images {
  max-width: 130px;
  position: center;
  border: 0;
}

.page-jobs .page-images > img {
  width: 400px;
  position: center;
  border: 0;
}

.page-jobs .contact-frame {
  float: left;
  font-size: 13px;
  width: 400px;
}

.page-jobs .contact-type {
  margin-bottom: 12px;
  width: 350px;
  border-bottom: 3px solid #f1025e;
  padding: 5px 0;
  font-family: 'Noto Sans TC', sans-serif;
  font-size: 18px;
}

.page-jobs .contact-info {
  max-width: 280px;
  position: center;
  border: 0;
  font-size: 14px;
  font-weight: 600;
}

.page-jobs .contact-images {
  width: 400px;
  position: center;
  border: 0;
}

.page-jobs .contact-images > img {
  width: 400px;
  position: center;
  border: 0;
}

.page-jobs .title-frame {
  float: left;
  font-size: 13px;
  width: 800px;
}

.page-jobs .title-info {
  max-width: 800px;
  position: center;
  border: 0;
  font-size: 18px;
  font-weight: 600;
}

.page-jobs .jobs-warning {
  color: red;
  font-weight: bold;
  font-size: 18px;
}

/* =======================================================================
   四、品牌頁（/acool/ … /pulsotronic/ 與 /product-lines/）共用版型
   9 個頁面版型完全一致：標題列 + 廠商 logo + 說明文 + Category/Contact 分頁。
   原站的分頁切換是 <li onclick="...document.getElementById(..).style='...'">，
   已改成 site-init.js 的事件委派 + 下列 is-active class（CSP script-src 'self'）。
   ======================================================================= */

.brand-head {
  border-bottom: 4px solid #c65752;
}

.brand-body {
  margin-top: 30px;
}

.brand-logo {
  float: right;
}

/* 各品牌頁的 logo 內距原站就有 4 種寫法，逐頁逐字保留，不統一 */
.brand-logo img {
  border: 0px;
}

.brand-logo.pad-x20 img {
  padding: 0 20px;
}

.brand-logo.pad-x10 img {
  padding: 0 10px;
}

.brand-logo.pad-l10 img {
  padding-left: 10px;
}

.brand-desc-sm {
  font-size: 12px;
}

.brand-tabs {
  margin-top: 30px;
}

/* 分頁標籤：未選中 */
/* ⚠️ 原站 onclick 字串裡未選中狀態其實有兩段 border 宣告疊加：
   `border:#cccccc solid 1px; border-bottom: #c65752;`——後面這段只覆蓋
   border-bottom 的顏色，讓底線跟下方內容區的紅色頂線同色，只有上/左/右三邊
   維持灰色。第一次轉寫成 class 時只收了第一段，漏掉這個覆蓋，導致未選中
   分頁的底線變成灰色、視覺上跟另一側的底線粗細/顏色不一致。 */
.brand-tab {
  font-weight: bold;
  border-radius: 5px 5px 0px 0px;
  padding: 10px 30px;
  border: #cccccc solid 1px;
  border-bottom-color: #c65752;
  display: inline;
  cursor: pointer;
}

.brand-tab[data-tab='category'] {
  margin-left: -25px;
}

.brand-tab[data-tab='contact'] {
  margin-left: -5px;
}

/* 分頁標籤：選中 */
/* 原站選中的那一顆標籤，行內樣式沒有帶 cursor: pointer（只有未選中的有），
   實測正式站 getComputedStyle 確認是 auto，這裡逐字照做維持一致。 */
.brand-tab.is-active {
  background-color: #c65752;
  color: white;
  border: #c65752 solid 1px;
  cursor: auto;
}

/* 分頁內容區 */
.brand-panel {
  margin-top: -7.6px;
  padding-top: 7.6px;
  border: 1px solid #cccccc;
  border-top: 4px solid #c65752;
  display: none;
}

.brand-panel.is-active {
  display: block;
}

.brand-panel-title {
  padding-bottom: 12px;
}

.brand-panel-indent {
  padding-left: 18px;
}

/* AKM 的 Contact 分頁有 5 位 P/M，原站排成 280px 寬的浮動欄 */
.brand-contact-col {
  width: 280px;
  float: left;
}

/* --- LightClock 專屬（class 名稱與 NISD 撞名但定義不同，務必保持隔離）--- */

.page-lightclock .company-text {
  font-size: 12px;
}

.page-lightclock .category-item {
  padding: 8px 0 8px 18px;
  font-size: 12px;
}

.page-lightclock .category-item ul li {
  list-style-image: none;
}

.page-lightclock .category-item-sub1 {
  padding: 6px 0;
}

.page-lightclock .category-item-sub2 {
  padding-left: 14px;
}

.page-lightclock .contact-item {
  padding: 14px 0 0 28px;
}

.page-lightclock .contact-item-sub2 {
  padding-top: 8px;
}

/* --- NISD 專屬（同上，與 LightClock 定義不同）--- */

.page-nisd .category-item {
  padding: 8px 0 8px 18px;
}

.page-nisd .category-item ul li {
  list-style-image: none;
}

.page-nisd .category-item-sub1 {
  padding: 10px 0 10px 14px;
  font-size: 20px;
}

.page-nisd .category-item-sub2 {
  padding: 6px 0 8px 14px;
}

.page-nisd .contact-item {
  padding: 14px 0 0 28px;
}

.page-nisd .contact-item-sub2 {
  padding-top: 8px;
}
