/* VIP 頁的兩支字型。路徑含站台段，所以放站台 CSS。 */
@font-face {
  font-family: 'ASpaceHeavy';
  font-display: swap;
  src: url('/CdnRedirect/Web.Portal/DN009-01.Portal/Content/Views/Vip/images/ASpaceHeavy.otf')
    format('opentype');
}

@font-face {
  font-family: 'RusselSquareOpti';
  font-display: swap;
  src: url('/CdnRedirect/Web.Portal/DN009-01.Portal/Content/Views/Vip/images/RusselSquareOpti.otf')
    format('opentype');
}

/* 「維護中」字樣的專用字型。只在桌機宣告：手機版有元件寫了同名 font-family，要維持 fallback 字型。 */
@font-face {
  font-family: 'MStiffHeiHK-UltraBold';
  font-display: swap;
  src:
    url('/CdnRedirect/Web.Portal/_Common/fonts/MStiffHeiHK-UltraBold.woff2') format('woff2'),
    url('/CdnRedirect/Web.Portal/_Common/fonts/MStiffHeiHK-UltraBold.woff') format('woff'),
    url('/CdnRedirect/Web.Portal/_Common/fonts/MStiffHeiHK-UltraBold.ttf') format('truetype');
}

/* 拉丁字全站用這支字型 */
@font-face {
  font-family: montserrat;
  src: url('/CdnRedirect/Web.Portal/DN009-01.Portal/Content/fonts/Montserrat-Medium.ttf')
    format('truetype');
  font-display: swap;
}

:root {
  /* 桌機版頂部工具列。它是 fixed，內容區靠這個值讓出高度，兩邊都讀同一個變數。 */
  --height-desktop-header: 103px;

  /* 桌機版左側導覽軌。預設只顯示圖示；導覽軌與內容區讀同一個變數。 */
  --width-desktop-nav: 101px;
}

/* 桌機版導覽軌展開後顯示文字，需要更寬。class 由 SideNav 的 useSideNav 切換。 */
body.desktop-nav-expanded {
  --width-desktop-nav: 224px;
}

/* 桌機顏色瞬間切換，蓋掉 global.css 的 * 轉場；:where 讓權重維持 0，元件自己寫的 transition 照樣生效 */
:where(body.site-CRdefault-desktop) * {
  transition: none;
}

body.site-CRdefault-desktop {
  font-family: montserrat, 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.428571429;
}

@layer utilities {
  .no-scrollbar::-webkit-scrollbar {
    display: none;
  }
  .no-scrollbar {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}

/*
 * 桌機捲軸透明：Chrome 遇到標準的 scrollbar-color 就改畫系統捲軸、忽略 ::-webkit-scrollbar，
 * macOS 的覆蓋式捲軸也因此不佔內容寬度。
 */
body.site-CRdefault-desktop * {
  scrollbar-width: auto;
  scrollbar-color: transparent transparent;
}

/* b / strong 固定 700：Tailwind preflight 的 bolder 會讓粗體裡的 b 變 900 */
body.site-CRdefault-desktop b,
body.site-CRdefault-desktop strong {
  font-weight: bold;
}

/* 窄視窗時頁面維持 1000px、改出橫向捲軸。class 只掛在有站台外框的桌機頁。 */
body.site-CRdefault-desktop.layout {
  min-width: 1000px;
}

/* 桌機元件的旋轉動畫都用這一份 fa-spin，各元件在 themes/theme-50 底下自己的 styles.ts 以 animation: fa-spin 套用。 */
@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(1turn);
  }
}