/**
 * Theme Name: Jingrui Design Core
 * Author: 靜睿設計所 施睿皇 Ray
 * Author URI: https://ray-shi.jingruidesign.com/
 * Description: 本專案為 靜睿設計所 (Jingrui Design Studio) 獨家構建的企業級 WordPress 子主題架構，旨在為所有客戶專案奠定堅實的數位地基。作為驅動網站的核心引擎，本系統深度整合了高規格的安全性防護、SEO 結構優化與極致的載入效能。我們透過標準化的開發邏輯，有效解決父主題更新可能帶來的兼容性風險，確保長期運維的穩定性與擴充彈性。這不僅是一套程式碼，更是靜睿設計所貫徹「慢構」精神，將設計美學與技術工藝完美結合，對每一份交付品質的絕對承諾。
 * Version: 3.2.0
 * License: GNU General Public License v2 or later
 * License URI: http://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain: jingrui-design-core
 * Template: astra
 * Last Updated: 2026-07-07
 * Copyright: Copyright (c) 2026 靜睿設計所 Jingrui Design Studio. All rights reserved.
 */


@charset "UTF-8";

/* ==========================================================================
   靜睿設計所 (Jingrui Design Core) 設計系統變數 - 方案 A
   ========================================================================== */
:root {
  /* 客戶品牌配色：優雅紅/墨綠色/米白系列 */
  --jds-primary: #D2695E;         /* 品牌主色 (磚紅/珊瑚紅) */
  --jds-primary-hover: #E2796E;   /* 品牌主色 Hover */
  --jds-secondary: #D1A153;       /* 品牌副色 (金/赭黃) */
  --jds-bg-main: #F6F4EE;         /* 網站主背景 (米白/暖灰) */
  --jds-bg-card: #ffffff;         /* 卡片與內容背景 (純白) */
  --jds-border: #C2C8C5;          /* 邊框 / 分隔線 */
  --jds-text-dark: #303935;       /* 標題與粗體字 (深墨綠/黑) */
  --jds-text-main: #44514B;       /* 內文主色 (墨綠/深灰) */
  --jds-text-muted: #5c6762;      /* 輔助/靜音文字 */
}

/* 1. 極致深色主題 */
body.theme-dark {
  --jds-bg-main: #0f172a;
  --jds-bg-card: #1e293b;
  --jds-border: #334155;
  --jds-text-dark: #f8fafc;
  --jds-text-main: #cbd5e1;
  --jds-text-muted: #94a3b8;
  --jds-primary: #8b5cf6;
  --jds-primary-hover: #a78bfa;
}

/* 2. 溫暖暖色主題 */
body.theme-warm {
  --jds-bg-main: #fdfbf7;
  --jds-bg-card: #fffbeb;
  --jds-border: #fde68a;
  --jds-text-dark: #451a03;
  --jds-text-main: #78350f;
  --jds-text-muted: #b45309;
  --jds-primary: #d97706;
  --jds-primary-hover: #fbbf24;
}

/* ==========================================================================
   全站基礎樣式與 Astra 變數綁定（配合配色切換）
   ========================================================================== */
body {
  /* 注入並覆寫 Astra 原生變數，使前台元件無縫繼承配色，避免 !important 破壞佈局 */
  --ast-global-color-0: var(--jds-primary);       /* 品牌主色 */
  --ast-global-color-1: var(--jds-primary-hover); /* 品牌主色 Hover */
  --ast-global-color-2: var(--jds-text-dark);     /* 標題與粗體字 */
  --ast-global-color-3: var(--jds-text-main);     /* 內文主色 */
  --ast-global-color-4: var(--jds-border);        /* 邊框 / 分隔線 */
  --ast-global-color-5: var(--jds-bg-card);       /* 內容區塊背景 / 卡片背景 */
  --ast-global-color-6: var(--jds-bg-main);       /* 網站總背景色 */

  background-color: var(--jds-bg-main);
  color: var(--jds-text-main);
  transition: background-color 0.3s ease, color 0.3s ease;
}

h1, h2, h3, h4, h5, h6 {
  color: var(--jds-text-dark);
}

a {
  color: var(--jds-secondary);
  transition: color 0.2s ease;
}

a:hover, a:focus {
  color: var(--jds-primary);
}

/* 模組區塊「各單元」 */
@import url(css/home.css);
@import url(css/about.css);
@import url(css/news.css);
/*@import url(css/blog.css);*/
@import url(css/service.css);
@import url(css/contact.css);
@import url(css/gallery.css);
@import url(css/portfolio.css);
@import url(css/shop.css);
@import url(css/membership.css);

/*銷售王者組合開啟的話，會影響到側邊的浮動按鈕座標，兩個只能二選一*/

/* 客製化單一商品頁面(需要搭配 shopping_related.php 內的開關) */
/* @import url(css/single-shop.css); */

/* 模組區塊「Module」 */
@import url(css/Module/common.css);
@import url(css/Module/header.css);
@import url(css/Module/footer.css);
@import url(css/Module/navbar.css);
@import url(css/Module/main.css);
@import url(css/Module/sidebar.css);
@import url(css/Module/floating-window.css);
@import url(css/Module/popup-window.css);

/* 前導動畫 loading */
@import url(css/Home/loading-animation.css);

/* 追加美編頁面 */
/* @import url(css/edit-style.css); */


/* ==========================================================================
   TablePress 表格欄位統一樣式初始化
   ========================================================================== */
/*前台表格顯示時，關閉上下篩選器及搜尋功能*/
.dt-container .dt-layout-row {
  display: none;
}

/*前台表格顯示*/
.dt-container .dt-layout-row.dt-layout-table {
  display: flex;
}

/* ===== TablePress + DataTables 整體美化 ===== */

.dt-container .tablepress {
  width: 100%;
  border-collapse: collapse;
  text-align: center;
  white-space: nowrap;
}

.dt-container .tablepress thead th {
  position: relative;
  /* 為了排序箭頭定位 */
  background-color: var(--jds-primary);
  color: #fff;
  text-align: center;
  vertical-align: middle;
  padding: 10px;
  font-weight: 600;
  border: 1px solid var(--jds-border);
}

/* 內文欄位 */
.dt-container .tablepress tbody td {
  text-align: center;
  vertical-align: middle;
  padding: 8px 10px;
  border: 1px solid var(--jds-border);
  background-color: var(--jds-bg-card);
  color: var(--jds-text-main);
}

/* 隔行變色 + Hover */
.dt-container .tablepress tbody tr:nth-child(even) td {
  background-color: var(--jds-bg-main);
}

.dt-container .tablepress tbody tr:hover td {
  background-color: var(--jds-border);
}

/* 響應式捲動 */
@media screen and (max-width: 1024px) {
  .dt-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .dt-container .tablepress {
    min-width: 900px;
  }
}

/* ===== 排序箭頭樣式（黑底白字風格） ===== */

/* 箭頭容器位置 */
.dt-container .tablepress thead .dt-column-order {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 12px;
  opacity: 0.6;
  cursor: pointer;
}

/* 預設顯示上下箭頭 */
.dt-container .tablepress thead .dt-column-order:before,
.dt-container .tablepress thead .dt-column-order:after {
  content: "";
  display: block;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  opacity: 0.3;
}

/* 上箭頭 */
.dt-container .tablepress thead .dt-column-order:before {
  border-bottom: 6px solid #ffffff;
  margin-bottom: 2px;
}

/* 下箭頭 */
.dt-container .tablepress thead .dt-column-order:after {
  border-top: 6px solid #ffffff;
}

/* 啟用排序樣式強化 */
.dt-container .tablepress thead .dt-ordering-asc .dt-column-order:before,
.dt-container .tablepress thead .dt-ordering-desc .dt-column-order:after {
  opacity: 1;
}

/* 滑入表頭變色（含排序欄位） */
.dt-container .tablepress thead th.dt-orderable-asc:hover,
.dt-container .tablepress thead th.dt-orderable-desc:hover,
.dt-container .tablepress thead th.dt-ordering-asc,
.dt-container .tablepress thead th.dt-ordering-desc {
  background-color: var(--jds-primary-hover);
  color: #fff;
}

/* 滑入表頭時，箭頭透明度變高 */
.dt-container .tablepress thead th.dt-orderable-asc:hover .dt-column-order:before,
.dt-container .tablepress thead th.dt-orderable-asc:hover .dt-column-order:after,
.dt-container .tablepress thead th.dt-orderable-desc:hover .dt-column-order:before,
.dt-container .tablepress thead th.dt-orderable-desc:hover .dt-column-order:after {
  opacity: 0.6;
}

/* 排序中的欄位箭頭也加強顯示 */
.dt-container .tablepress thead th.dt-ordering-asc .dt-column-order:before,
.dt-container .tablepress thead th.dt-ordering-desc .dt-column-order:after {
  opacity: 1;
}


/* ==========================================================================
   WooCommerce 表單欄位統一樣式初始化
   ========================================================================== */

/* 對商品數量欄位進行獨立設計 */
.woocommerce .quantity .qty {
  height: auto !important;
  min-height: unset !important;
  line-height: 1.4 !important;
  padding: 0.4rem 0.6rem !important;
  font-size: 15px !important;
  border: 1px solid var(--jds-border) !important;
  border-radius: 0 !important;
  width: 60px !important;
  text-align: center;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
  appearance: textfield;
}

/* 移除上下箭頭（數字 input 預設 UI） */
.woocommerce .quantity .qty::-webkit-inner-spin-button,
.woocommerce .quantity .qty::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* +/- 按鈕基本設計 */
.woocommerce .quantity .plus,
.woocommerce .quantity .minus {
  padding: 5px 0 5px;
  font-size: 1em;
  font-weight: bold;
  color: var(--jds-text-main) !important;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-main) !important;
  /* border-radius: 4px; */
  user-select: none;
  line-height: 1.4;
}

/* 間距微調 */
.woocommerce .quantity.buttons_added {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   全站輸入欄位統一樣式（含 WooCommerce / Select2）
========================================================================== */

/* 所有輸入框與選單欄位 */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea {
  height: 50px !important;
  min-height: 50px !important;
  line-height: 1.5 !important;
  font-size: 16px !important;
  padding: 0.75rem 1rem !important;
  border: 1px solid var(--jds-border) !important;
  border-radius: 6px !important;
  box-sizing: border-box !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
  appearance: none !important;
  width: 100%;
}

/* Textarea 特例：可多行但高度統一起始值 */
textarea {
  height: auto !important;
  min-height: 120px !important;
  resize: vertical;
}

/* ==========================================================================
   初始化浮動標籤樣式
========================================================================== */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input label:not(.checkbox):not(.woocommerce-form__label-for-checkbox) {
  position: absolute;
  top: 9px;
  left: 15px;
  background: var(--jds-bg-card) !important;
  padding: 0 0.4em;
  font-size: 13px;
  color: var(--jds-text-muted) !important;
  z-index: 2;
  opacity: 1;
  pointer-events: none;
  transition: all 0.2s ease;
}

/* 輸入框容器需加 padding-top 讓 label 有空間 */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input {
  position: relative;
  padding-top: 1.5rem;
}

/* 修正錯位的 select */
body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input select {
  line-height: 1.5;
}

/* 小尺寸裝置支援 */
@media (max-width: 768px) {
  body:not(.cartflows-canvas):not(.cartflows-default) .woocommerce form .form-row.ast-animate-input label {
    font-size: 12px;
  }
}



/* ==========================================================================
   鄉鎮縣市下拉選單的優化
========================================================================== */
/* Select 與 Select2：右側箭頭控制 */
select,
.select2-container .select2-selection--single {
  background-position-x: calc(100% - 12px) !important;
  background-position-y: center !important;
  background-size: 12px !important;
  background-repeat: no-repeat !important;
  padding-right: 2.5rem !important;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
}

/* 修正 Select2 選單內文字垂直對齊錯誤 */
.select2-container--default .select2-selection--single {
  height: 50px !important;
  line-height: 50px !important;
  padding: 0 !important;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border: 1px solid var(--jds-border) !important;
  background-color: var(--jds-bg-card) !important;
  color: var(--jds-text-main) !important;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
  padding-left: 1rem !important;
  padding-right: 2rem !important;
  font-size: 16px !important;
  line-height: normal !important;
  height: auto !important;
  display: block !important;
  width: 100% !important;
  box-sizing: border-box;
  color: var(--jds-text-main) !important;
}

/* 小裝置補強 */
@media (max-width: 768px) {

  input,
  textarea,
  select,
  .select2-container .select2-selection--single {
    font-size: 15px !important;
    padding: 0.7rem 1rem !important;
    height: 50px !important;
    min-height: 50px !important;
  }
}




/* ==========================================================================
   WooCommerce 三欄欄位（郵遞區號／縣市／鄉鎮）響應式排列
========================================================================== */

/* 桌機與平板以上：三欄併排 */
@media (min-width: 769px) {

  #billing_postcode_field,
  #billing_state_field,
  #billing_city_field,
  #shipping_postcode_field,
  #shipping_state_field,
  #shipping_city_field {
    float: left;
    width: 33.3333%;
    padding-right: 1rem;
    box-sizing: border-box;
    clear: none;
  }

  /* 移除最後一欄的右 padding，避免超寬 */
  #billing_city_field,
  #shipping_city_field {
    padding-right: 0;
  }
}

/* 行動裝置：欄位改為垂直堆疊 */
@media (max-width: 768px) {

  #billing_postcode_field,
  #billing_state_field,
  #billing_city_field,
  #shipping_postcode_field,
  #shipping_state_field,
  #shipping_city_field {
    float: none !important;
    width: 100% !important;
    padding-right: 0 !important;
    clear: both;
  }
}

/* ==========================================================================
   檢核按鈕 Checkbox 樣式初始化（WooCommerce / 表單共用）
========================================================================== */

/* 統一 checkbox 外觀與可點擊範圍 */
.woocommerce-form__label-for-checkbox,
.woocommerce-form__label.checkbox,
.woocommerce-checkout .form-row .woocommerce-form__label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 15px;
  line-height: 1.6;
  color: var(--jds-text-main) !important;
  cursor: pointer;
  margin-bottom: 1rem;
}

/* 美化 checkbox 勾選框 */
input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--jds-primary) !important;
  /* 可自訂品牌色 */
  margin: 0;
  vertical-align: middle;
  cursor: pointer;
}

/* checkbox 與文字之間的空間（防止靠太近） */
.woocommerce input[type="checkbox"]+span,
.woocommerce label>span {
  margin-left: 0.4rem;
  display: inline-block;
}

/* 補強小裝置觸控點 */
@media (max-width: 768px) {
  .woocommerce-form__label-for-checkbox {
    font-size: 14px;
  }

  input[type="checkbox"] {
    width: 20px;
    height: 20px;
  }
}

/**
 * ==============================================================================
 * Project: 宏祥會計師律師代書聯合事務所
 * Feature: 首頁六大選單區塊 - 145px 正方形、強制緊湊靠攏、預設單色與呼吸動畫
 * ==============================================================================
 */

/* ------------------------------------------------------------------------------
 * 0. 【核心修復：打破 Elementor 網格，強制置中緊湊靠攏】
 * ------------------------------------------------------------------------------ */
#in_menu_box {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important; /* 讓所有 145px 的按鈕往正中間集中 */
    gap: 16px !important;               /* 👇 這裡就是按鈕之間真實的上下左右間距，可自由改 16px 或 20px */
}

/* ------------------------------------------------------------------------------
 * 1. 選單連結外層 (a 標籤)：設定 145px 正方形與垂直置中
 * ------------------------------------------------------------------------------ */
#in_menu_box a {
    /* 排版置中設定 */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    text-align: center !important;
    
    /* 👇 限制寬高：直接寫死 145px 正方形，取代 aspect-ratio 更穩定 */
    width: 180px !important;
    height: 180px !important;
    margin: 0 !important; /* 移除 auto，因為父層已經用 flex 置中了 */
    padding: 12px !important;
    
    /* 原有動畫 */
    transition: background-color 0.4s ease, transform 0.4s ease !important;
    overflow: hidden; /* 防止放大動畫超出身體 */
}

/* 確保內部元件預設有過場動畫 */
#in_menu_box .elementor-icon-box-title span,
#in_menu_box .elementor-icon-box-icon,
#in_menu_box svg {
    transition: all 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) !important;
    will-change: transform, color, filter;
}

/* ------------------------------------------------------------------------------
 * 1.5 【預設單色狀態】強制文字在滑入前與 SVG 維持深墨色，並微調大小
 * ------------------------------------------------------------------------------ */
#in_menu_box .elementor-icon-box-title span {
    color: #44514B !important; 
    font-size: 18px !important; /* 配合 145px 空間微調字體大小 */
}

/* 預設 SVG 單色黑化 */
#in_menu_box .elementor-icon svg {
	filter: invert(50%) sepia(50%) saturate(6%) hue-rotate(100deg) brightness(100%) contrast(10%);
    width: 65px !important;  /* 配合 145px 微縮圖示 */
    height: 65px !important;
    margin-bottom: 8px !important;
}

/* ------------------------------------------------------------------------------
 * 2. 【滑入效果】背景變紅、文字變白、上推位移
 * ------------------------------------------------------------------------------ */
#in_menu_box a:hover {
    background-color: #D2695E !important;
    box-shadow: 0px 16px 32px rgba(210, 105, 94, 0.2) !important; 
}

#in_menu_box a:hover .elementor-icon-box-title span {
    color: #FFFFFF !important;
}

#in_menu_box a:hover .elementor-icon-box-icon {
    transform: translateY(-8px) !important;
}

/* ------------------------------------------------------------------------------
 * 3. 【SVG 強制白化】與 【呼吸感動畫】
 * ------------------------------------------------------------------------------ */
#in_menu_box a:hover .elementor-icon svg {
    filter: brightness(0) invert(1) !important; 
    animation: svg-breathing 2s ease-in-out 0.1s infinite alternate !important;
}

/* ------------------------------------------------------------------------------
 * 4. 定義呼吸感動畫的 Keyframes
 * ------------------------------------------------------------------------------ */
@keyframes svg-breathing {
    0% { transform: scale(1); }
    100% { transform: scale(1.05); }
}



/**
 * ==============================================================================
 * Project: 宏祥會計師律師代書聯合事務所
 * Feature: 主選單強制覆蓋 (圖上字下 + 10%虛線分隔 + SVG強制白化 + 終極防禦干擾)
 * ==============================================================================
 */

/* ------------------------------------------------------------------------------
 * 1. 強制覆蓋原生排版：改為「圖上字下」
 * ------------------------------------------------------------------------------ */
#ast-desktop-header .main-header-menu .menu-item > .menu-link {
    display: flex !important;
    flex-direction: column !important; 
    align-items: center !important;
    justify-content: center !important;
    padding: 15px 25px !important; 
    line-height: 1.4 !important;
    text-decoration: none !important; 
    box-shadow: none !important;
}

/* 徹底隱藏 Astra 下拉小箭頭 */
#ast-desktop-header .main-header-menu .menu-item > .menu-link .ast-icon.icon-arrow {
    display: none !important;
}

/* ------------------------------------------------------------------------------
 * 2. 建立精緻分隔線 (10% 高度虛線)
 * ------------------------------------------------------------------------------ */
#ast-desktop-header .main-header-menu .menu-item {
    position: relative !important;
}

#ast-desktop-header .main-header-menu .menu-item:not(:last-child)::after {
    content: "";
    position: absolute !important;
    right: 0 !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 0px !important; 
    border-right: 1px dashed #EFECE5 !important; 
    height: 10% !important; 
    background-color: transparent !important;
    pointer-events: none !important;
}

/* ------------------------------------------------------------------------------
 * 3. 圖示佔位空間 (裝甲級防禦定位 + Mask 強制白化黑魔法)
 * ------------------------------------------------------------------------------ */
#ast-desktop-header .main-header-menu .menu-item > .menu-link::before,
#ast-desktop-header .main-header-menu .menu-item:hover > .menu-link::before {
    content: "";
    display: block !important;
    
    /* 解除 Astra 底線的 absolute 干擾 */
    position: relative !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    
    /* 鎖死寬高，防止 Astra Hover 變形 */
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important; 
    margin-bottom: 8px !important;
    margin-top: 0 !important; margin-left: 0 !important; margin-right: 0 !important;
    
    /* 👇 【強制白化】透過背景色填滿純白，搭配下方的 mask-image 切出形狀 */
    background-color: #FFFFFF !important; 
    
    border: none !important;
    box-shadow: none !important;
    
    /* 將背景圖改用 mask-image 處理 */
    -webkit-mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-size: contain !important;
    mask-repeat: no-repeat !important;
    mask-position: center !important;
    
    /* 只針對位移做平滑動畫，保持顏色不變 */
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1) !important; 
}

/* ------------------------------------------------------------------------------
 * 4. 綁定各單元專屬圖示 (使用 mask-image 載入路徑)
 * ------------------------------------------------------------------------------ */
.icon_about > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_about.svg') !important; 
    mask-image: url('images/menu/icon_about.svg') !important; 
}
.icon_team > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_team.svg') !important; 
    mask-image: url('images/menu/icon_team.svg') !important; 
}
.icon_solutions > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_solutions.svg') !important; 
    mask-image: url('images/menu/icon_solutions.svg') !important; 
}
.icon_global-network > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_global-network.svg') !important; 
    mask-image: url('images/menu/icon_global-network.svg') !important; 
}
.icon_insights > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_insights.svg') !important; 
    mask-image: url('images/menu/icon_insights.svg') !important; 
}
.icon_contact > .menu-link::before { 
    -webkit-mask-image: url('images/menu/icon_contact.svg') !important; 
    mask-image: url('images/menu/icon_contact.svg') !important; 
}

/* ------------------------------------------------------------------------------
 * 5. 滑鼠懸停互動 (Hover Effect)
 * ------------------------------------------------------------------------------ */
/* 滑入時只做 Y 軸上推，顏色維持白色不變 */
#ast-desktop-header .main-header-menu .menu-item:hover > .menu-link::before {
    transform: translateY(-4px) !important;
}






/* 當首頁「尚未」進入固定選單狀態時，隱藏最上方的桌機版靜態標頭 */
body.home:not(.ast-primary-sticky-header-active) #masthead #ast-desktop-header {
    display: none !important;
}

/* 若手機版一開始也要隱藏，捲動才出現，請加上這段 */
body.home:not(.ast-primary-sticky-header-active) #masthead #ast-mobile-header {
    display: none !important;
}

/*搜尋結果樣式優化*/







/**
 * ==============================================================================
 * Project: 宏祥會計師律師代書聯合事務所
 * Author: Ray Shih (施睿皇) - Jingrui Design Studio
 * Email: n8822314n@gmail.com
 * Contact: services@jingruidesign.com
 * Created: 2026-05-18 16:15
 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved.
 * * Unauthorized use, reproduction, or distribution is prohibited.
 * ==============================================================================
 */

/*
 * 更新日誌：
 * [2026-05-18 16:15 V1.0.6] 強化 SVG 權重，並引入 transform: scaleY() 作為控制斜率的絕對保險，解決高度無法改變的問題。
 * [2026-05-18 14:55 V1.0.5] 調整 SVG 遮罩比例。
 */

/* ------------------------------------------------------------------------------
 * 1. 核心容器：清除內距防裁切，並加上邊緣圓角
 * ------------------------------------------------------------------------------ */
#index_banner {
    position: relative !important;
    overflow: hidden !important;
    padding: 0 !important; 
    border-radius: 0 32px 0 0  !important;
}

/* ------------------------------------------------------------------------------
 * 2. SVG 遮罩層絕對定位與包裝層淨空
 * ------------------------------------------------------------------------------ */
#index_banner .elementor-widget-html {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 999 !important;
    pointer-events: none !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important; 
}

/* 防呆：確保 Elementor 內建容器不會干擾高度 */
#index_banner .elementor-widget-html .elementor-widget-container {
    height: auto !important;
    line-height: 0 !important;
}

/* ------------------------------------------------------------------------------
 * 4. RWD 平板版與手機版斷點設定
 * ------------------------------------------------------------------------------ */

@media screen and (max-width: 767px) {

    #index_banner {
        border-radius: 0 0 10px 10px !important;
    }
}










/**
 * ==============================================================================
 * Project: 宏祥會計師律師代書聯合事務所
 * Author: Ray Shih (施睿皇) - Jingrui Design Studio
 * Email: n8822314n@gmail.com
 * Contact: services@jingruidesign.com
 * Created: 2026-05-18 15:47
 * * Copyright (c) 2026 Jingrui Design Studio. All rights reserved.
 * * Unauthorized use, reproduction, or distribution is prohibited.
 * ==============================================================================
 */

/*
 * 更新日誌：
 * [2026-05-18 15:47 V1.0.0] 建立首頁 .index_banner_text 左至右循環跑馬燈動畫設定。
 */

/* ------------------------------------------------------------------------------
 * 1. 跑馬燈外層容器：隱藏溢出，強制文字維持單行
 * ------------------------------------------------------------------------------ */
.index_banner_text {
    overflow: hidden !important; /* 絕對防呆：裁切掉超出畫面的文字，避免下方跑出橫向卷軸 */
    white-space: nowrap !important; /* 強制文字不換行，保持長條狀 */
    width: 100%;
    display: flex;
    align-items: center;
}

/* ------------------------------------------------------------------------------
 * 2. 跑馬燈文本模組：綁定動畫與硬體加速
 * ------------------------------------------------------------------------------ */
.index_banner_text .elementor-widget-heading {
    display: inline-block;
    /* * 執行跑馬燈動畫 
     * 20s: 跑完一次的時間，數字越大速度越「慢」，可依喜好微調
     * linear: 勻速移動，確保過程中不會忽快忽慢
     * infinite: 無限循環
     */
    animation: marquee-ltr 120s linear infinite;
    will-change: transform; /* 提示瀏覽器啟用 GPU 硬體加速，讓滑動更絲滑 */
}

/* ------------------------------------------------------------------------------
 * 3. 定義由左至右 (Left to Right) 的動畫軌跡
 * ------------------------------------------------------------------------------ */
@keyframes marquee-ltr {
    0% {
        /* 從畫面最左側的「視線外」出發 (-100% 代表向左退一個文字本身的寬度) */
        transform: translateX(-100%);
    }
    100% {
        /* 移動到畫面最右側的「視線外」 (100vw 代表整個螢幕的寬度) */
        transform: translateX(100vw);
    }
}

/* ------------------------------------------------------------------------------
 * 4. (選用) 友善互動：滑鼠懸停時暫停跑馬燈
 * ------------------------------------------------------------------------------ */
.index_banner_text:hover .elementor-widget-heading {
    animation-play-state: paused; /* 讓使用者可以停下來看清楚文字 */
}







/* 1. 整個無結果區塊的置中與間距優化 */
.no-results.not-found .page-content {
    max-width: 600px;
    margin: 40px auto;
    padding: 30px;
    text-align: center;
}

/* 2. 提示文字的美化 (SEO 跳出率防護) */
.no-results.not-found .page-content p {
    font-size: 1.1rem;
    color: #555555;
    margin-bottom: 25px;
    line-height: 1.6;
}

/* 3. 搜尋表單容器改用 Flexbox 排版 */
.no-results.not-found .search-form {
    display: flex;
    align-items: center;
    position: relative;
    width: 100%;
    max-width: 500px;
    margin: 0 auto;
}

/* 4. 處理 Label 以填滿空間 */
.no-results.not-found .search-form label {
    width: 100%;
    margin: 0;
    position: relative;
    display: flex;
}

/* 5. 隱藏不必要的螢幕閱讀器文字，但不影響無障礙訪問 */
.no-results.not-found .search-form .screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
    word-wrap: normal !important;
}

/* 6. 搜尋輸入框美化 (Mac Safari 視覺優化) */
.no-results.not-found .search-field {
    width: 100%;
    padding: 15px 50px 15px 20px; /* 右側留空間給 SVG 按鈕 */
    font-size: 1rem;
    color: #333;
    background-color: #ffffff;
    border: 2px solid #eaeaea;
    border-radius: 30px;
    outline: none;
    transition: all 0.3s ease;
    -webkit-appearance: none; /* 移除 Safari 預設樣式 */
}

/* 延伸技術：使用 :focus-within 提升互動感 */
.no-results.not-found .search-field:focus {
    border-color: #4facfe;
    box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.2);
}

/* 7. 內建 SVG 放大鏡按鈕美化 (絕對定位至右側) */
.no-results.not-found .search-form button.search-submit.ast-search-submit {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    padding: 10px;
    cursor: pointer;
    color: #888;
    transition: color 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
}

.no-results.not-found .search-form button.search-submit:hover {
    color: #4facfe;
}

.no-results.not-found .search-form button.search-submit svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

/* 8. 隱藏 WP 預設多餘的醜陋 Submit 按鈕 */
.no-results.not-found .search-form > input[type="submit"] {
    display: none; /* 隱藏它，我們已經有 SVG 按鈕了 */
}



/*團隊介紹-特殊獎項列表*/
.team-honors-list {
    list-style: none; /* 移除預設的小黑點 */
    padding: 0;
    margin: 0;
}

.team-honors-list li {
    position: relative;
    padding-left: 20px; /* 與左側拉開距離 */
    margin-bottom: 10px; /* 增加行間距，閱讀更舒適 */
    line-height: 1.6;
    color: #4A4A4A;
}

/* 加上一個精緻的紅色小箭頭或線條作為 Bullet */
.team-honors-list li::before {
    content: "—"; /* 使用橫線作為優雅的列表符號 */
    position: absolute;
    left: 0;
    color: #D23333; /* 使用宏祥品牌紅 */
    font-weight: bold;
}


/*團隊介紹-職涯經歷列表*/
.team-experience-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.8;
}

.team-experience-list li {
    margin-bottom: 8px;
    border-bottom: 1px solid #F0F0F0; /* 每行底下的淡淡分隔線，增加秩序感 */
    padding-bottom: 4px;
}

.team-experience-list li strong {
    color: #4A4A4A; /* 公司/機構名稱使用較深色，強化辨識度 */
    font-weight: 600;
}


/*團隊介紹-個人著作列表*/
.team-publication-list {
    list-style: none;
    padding-left: 0;
}

.team-publication-list > li > strong {
    display: block;
    margin-top: 15px;
    margin-bottom: 5px;
    padding-bottom: 5px;
    border-bottom: 2px solid #D23333; /* 用品牌紅標示類別 */
    color: #1A1E1C;
}

.team-publication-list ul {
    list-style: none;
    padding-left: 15px;
    margin-bottom: 10px;
}

.team-publication-list li li {
    font-size: 14px;
    color: #5A605C;
    margin-bottom: 5px;
    position: relative;
}

.team-publication-list li li::before {
    content: "•";
    margin-right: 8px;
    color: #D2695E; /* 珊瑚磚紅的小點 */
}