@charset "UTF-8";
/*
 * sonet-hf-ssr.css — 頁首頁尾 SSR 專用微調（HEADER_FOOTER_SSR §4.3 / C3b）
 * ---------------------------------------------------------------------------
 * 背景：CSP-clean 化後，無真連結的父層選單（最新優惠方案…、桌機下拉父層）由 <a href="javascript:;">
 *       改為語意正確的 <button>。但 theme.css 的選單樣式是針對 <a> 寫的，未重置 <button> 的
 *       瀏覽器預設樣式（邊框/灰底/預設字體/非滿版）→ 會出現「按鈕框、靠左」不一致。
 * 對策：本檔把這些 <button> 的 UA 預設歸零、外觀對齊原 <a>。
 *       載入順序：排在 theme.css 之後（manifest css 最後一項），cascade 後者勝。
 * 不動 theme.css 本體（全站共用，避免回歸）。
 */

/*
 * 基準字級對齊 So-net（欄高一致的關鍵）
 * So-net primary.css：桌機 body font-size = 1em(=16px)、@media(max-width:980px) 為 0.875em(=14px)。
 * 線上申辦 body 未設字級 → 用瀏覽器預設 16px，於手機斷點抽屜 .mobile-menu(1.475em) 會偏大、欄高偏高。
 * 對策：把 SSR chrome 根容器基準字級 pin 成 So-net 的計算值(桌機16px/手機14px，用 px 免受宿主頁字級影響)，
 *       使內部所有 em 與 So-net 一致。抽屜在 <header class="sonet-hf-header"> 內，故只需 pin header 與 footer 兩根，
 *       勿再對 .mobile-menu-container 重複設 em（會二次相乘）。
 */
.sonet-hf-header,
.sonet-hf .page-footer {
  /* 錨定到消費站 root（sonet-hf-root.css 已把 html 設成 materialize 的 responsive 值），使頁首頁尾 em
     基準 = root = 正式機（materialize 全域時 header 即以 root 計）。原本 pin 死 16px/14px 會比正式機
     的 15px root 偏大（標題等 em 字放大），故改 1rem 跟隨 root。 */
  font-size: 1rem;
}

/* 通用 UA 歸零（.hamburger 內的 span 視覺不受影響） */
.sonet-hf .mobile-menu .collapsible-header,
.sonet-hf .header-second-menu .dropdown-button,
.sonet-hf .button-collapse,
.sonet-hf .scroll-to-top-button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font: inherit;
  cursor: pointer;
}

/* 清掉 Materialize 的 button:focus{background-color:#2ab7a9} 青色底：
   點漢堡(變X)/父選單/回頂後拿到 :focus 不該出現色塊。特異度需高過 materialize 的 button:focus。 */
.sonet-hf .mobile-menu .collapsible-header:focus,
.sonet-hf .mobile-menu .collapsible-header:active,
.sonet-hf .header-second-menu .dropdown-button:focus,
.sonet-hf .header-second-menu .dropdown-button:active,
.sonet-hf .button-collapse:focus,
.sonet-hf .button-collapse:active,
.sonet-hf .scroll-to-top-button:focus,
.sonet-hf .scroll-to-top-button:active {
  background-color: transparent;
  outline: none;
}

/* 手機抽屜父層：滿版、置中、白字、與 .mobile-menu-link 相同 padding */
.sonet-hf .mobile-menu .collapsible-header {
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 0;
  color: #fff;
  text-align: center;
  line-height: 1; /* 對齊原 <a>（繼承 body line-height:1），勿用 normal 以免父層偏高 */
}

/* 父層 <button> 的 hover 回饋：原站 .mobile-menu a:hover 只作用於 <a>，改 <button> 後會失去，
   這裡補回，與子選單/原站一致（綠字 #82d200）。 */
.sonet-hf .mobile-menu .collapsible-header:hover {
  color: #82d200;
}

/* 桌機主選單下拉父層：比照 .header-second-menu li a（padding:0 30px; 白字） */
.sonet-hf .header-second-menu .dropdown-button {
  padding: 0 30px;
  color: #fff;
  line-height: inherit;
}
/* 桌機下拉父層 hover 綠字（對齊 .header-second-menu li a:hover） */
.sonet-hf .header-second-menu .dropdown-button:hover {
  color: #82d200;
}
/* 桌機下拉內容置中（materialize 預設 .dropdown-content li>a 為 text-align:left）。
   寬度由 JS 鎖成 trigger 寬（原版 constrainWidth），此處讓項目文字置中。 */
.sonet-hf .header-second-menu .dropdown-content li > a {
  text-align: center;
}

/* 第二層(子選單)間距較第一層緊一些（對齊 stage）。
   父層 .mobile-menu-link 為 padding:12px 0；子選單只在 .collapsible-body 內縮小上下 padding。 */
.sonet-hf .mobile-menu .collapsible-body .mobile-menu-link {
  padding-top: 6px;
  padding-bottom: 6px;
}