/*
Theme Name: 山牧整合設計
Theme URI: https://woogopro.com/
Author: CGLandmark Studio
Author URI: https://woogopro.com/
Description: 專為山牧設計官方網站開發的 WordPress 主題，整合 Bootstrap 5 和 WooCommerce 支援。
Version: 1.0.2
Requires at least: 5.5
Tested up to: 6.4
Requires PHP: 7.4
License: All Rights Reserved
Text Domain: shanmu
Domain Path: /languages
Tags: e-commerce, taiwan, bootstrap, woocommerce, responsive, custom-header, translation-ready
*/

:root {
  /* == Theme Specific Variables (用於非 Bootstrap 控制的元素或特殊目的) == */
  /* 這些是您自訂的變數，與 Bootstrap 無直接關係，除非您在下面將 BS 變數指向它們 */
  --woogopro-font-family-sans: "Noto Sans TC", "Microsoft JhengHei",
    "微軟正黑體", sans-serif;
  --woogopro-font-family-serif: "Noto Serif TC", serif;
  /* 可選的襯線字體 */
  /* --woogopro-special-color: #ff6600; */
  /* 範例：主題特殊色 */
  --spacing-base: 1rem;
  /* 沿用之前的定義，方便控制非 BS 間距 */
  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;

  /*
   * ============================================
   * == Bootstrap Variable Overrides ==
   * ============================================
   * 在這裡重新定義 Bootstrap 的 CSS 變數，以全域修改主題外觀。
   * 確保此 style.css 在 Bootstrap 的 CSS 之後載入。
   * 取消註解並修改您需要調整的變數。
   * 參考 Bootstrap 5 官方文件以獲取完整的變數列表。
   */

  /* --- 整體顏色 (Body & Links) --- */
  /* --bs-body-font-family: var(--woogopro-font-family-sans); */
  /* 全站使用您的 Noto Sans TC 字體 */
  /* --bs-body-font-size: 1rem; */
  /* --bs-body-line-height: 1.7; */
  /* 例如，稍微增加行高 */
  /* --bs-body-color: #2a2a2a; */
  /* 稍微改變預設文字顏色 */
  /* --bs-body-bg: #fdfdfd; */
  /* 稍微改變預設背景色 */
  /* --bs-link-decoration: underline; */
  /* 預設加上底線 */
  /* --bs-link-hover-decoration: none; */
  /* 滑鼠懸停時移除底線 */

  /* --- 核心主題顏色 (Primary, Secondary etc.) --- */
  /* --bs-primary: #c0392b; */
  /* 例如：將主要色改為紅色系 */
  /* --bs-primary-rgb: 192, 57, 43; */
  /* 務必同時更新 RGB 版本 (用於透明度) */
  /* --bs-secondary: #7f8c8d; */
  /* 例如：將次要色改為灰色系 */
  /* --bs-secondary-rgb: 127, 140, 141; */
  /* --bs-success: #27ae60; */
  /* --bs-success-rgb: 39, 174, 96; */
  /* --bs-info: #2980b9; */
  /* --bs-info-rgb: 41, 128, 185; */
  /* --bs-warning: #f39c12; */
  /* --bs-warning-rgb: 243, 156, 18; */
  /* --bs-danger: #e74c3c; */
  /* --bs-danger-rgb: 231, 76, 60; */
  /* --bs-light: #ecf0f1; */
  /* 例如：淺灰色背景 */
  /* --bs-light-rgb: 236, 240, 241; */
  /* --bs-dark: #2c3e50; */
  /* 例如：深藍灰色 */
  /* --bs-dark-rgb: 44, 62, 80; */

  /* 將您原本的 primary color 指定給 Bootstrap primary */
  --bs-primary: var(--woogopro-link-color,
      #0d6efd);
  /* 使用您之前定義的連結色作為 BS 主色 */
  --bs-primary-rgb: 13, 110, 253;
  /* 對應的 RGB 值 */
  /* 連結顏色也直接使用 BS 的變數 */
  --bs-link-color: var(--bs-primary);
  --bs-link-hover-color: color-mix(in srgb,
      var(--bs-primary) 80%,
      black);
  /* 使用 color-mix 自動產生深色 */

  /* --- 字體 (Headings etc.) --- */
  /* --bs-heading-font-family: var(--woogopro-font-family-serif); */
  /* 例如：標題使用襯線體 */
  /* --bs-headings-color: var(--bs-primary); */
  /* 例如：標題使用主要顏色 */
  /* --bs-display-font-weight: 700; */

  /* --- 元件 (Components) --- */
  /* --bs-border-radius: 0.1rem; */
  /* 例如：稍微減少圓角 */
  /* --bs-border-radius-lg: 0.2rem; */
  /* --bs-border-color: #bdc3c7; */
  /* 例如：改變邊框顏色 */
  /* --bs-card-border-color: var(--bs-border-color); */
  /* --bs-card-cap-bg: rgba(var(--bs-primary-rgb), 0.05); */
  /* 卡片頭部用淡淡的主色背景 */
  /* --bs-btn-border-radius: var(--bs-border-radius); */
  /* 按鈕圓角與全域一致 */
  /* --bs-btn-padding-y: 0.5rem; */
  /* 稍微增加按鈕垂直內距 */
  /* --bs-form-select-border-radius: var(--bs-border-radius); */
  /* 下拉選單圓角 */
  /* --bs-modal-header-border-color: var(--bs-border-color); */
  /* 模態框頭部邊框顏色 */

  /* --- 間距 (Spacing) --- */
  /* Bootstrap 的 spacer 預設是 1rem, 這裡通常不需要改 */
  /* 但您可以修改 gutter (欄位間距) */
  /* --bs-gutter-x: 2rem; */
  --bs-gutter-x: 12px;
  --bs-gutter-y: 12px;
}

/* == 原有的 Theme Specific Styles == */
/* 這裡的樣式若要與 Bootstrap 一致，建議改用 Bootstrap 的變數 */

body {
  /* 樣式由 :root 中的 --bs-body-* 控制 */
}

a {
  /* 樣式由 :root 中的 --bs-link-* 控制 */
  /* 如果需要額外樣式，可以在這裡添加 */
}

img {
  max-width: 100%;
  height: auto;
}

.site-main .page-header {
  margin-bottom: 12px !important;
}

/* WordPress 核心樣式 */
/* 可以考慮將 margin 替換成 Bootstrap 的 spacer 變數，如 var(--bs-spacer) * 1.5 */
.alignleft {
  float: left;
  margin-right: var(--spacing-md);
  /* 使用自訂間距或 BS spacer */
  margin-bottom: var(--spacing-md);
}

.alignright {
  float: right;
  margin-left: var(--spacing-md);
  margin-bottom: var(--spacing-md);
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: var(--spacing-md);
}
.copyright {
  text-align: center;
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 10px;
}
@media (max-width: 767px) {
  .copyright{
    font-size: 0.8em;
    position: fixed;
    bottom: 10px;
    left: 15%;
    right: 15%;
  }
}

/* 小工具樣式 */
.widget {
  margin-bottom: var(--spacing-lg);
  /* 使用自訂間距或 BS spacer */
}

.widget-title {
  margin-bottom: var(--spacing-sm);
  font-size: 1.25rem;
  font-weight: 600;
  /* 或 var(--bs-heading-font-weight); */
  /* color: var(--bs-headings-color); */
  /* 考慮與標題顏色一致 */
}

/* 頁尾樣式 */
.site-footer {
  background-color: var(--bs-light);
  /* 使用修改後的 BS light 顏色 */
  border-top: 1px solid var(--bs-border-color);
  /* 使用修改後的 BS 邊框顏色 */
}

/*--------------------------------------------------------------
# Homepage - Fixed Sidebar Layout
--------------------------------------------------------------*/
.front-page-layout {
  /* Ensure it works correctly with potential admin bar */
  position: relative;
}

.fixed-sidebar {
  width: 260px;
  /* Sidebar width */
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  /* Full viewport height */
  overflow-y: auto;
  /* Scroll sidebar if content overflows */
  z-index: 1020;
  /* Transition for potential future off-canvas effects */
  transition: transform 0.3s ease-in-out;

  /* Adjust top position if WordPress Admin Bar is showing */
  /* This uses CSS variables set by WordPress */
  padding-top: var(--wp-admin--admin-bar--height, 0px);
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  background-color: #ffffff;
  border-left: 22px #F0F0F0 solid;
}

/* Style sidebar nav links */
.sidebar-navigation .nav-link {
  color: var(--bs-nav-link-color,
      var(--bs-link-color));
  /* Use BS variable or fallback */
  padding: 0.6rem 1rem;
  border-radius: var(--bs-nav-pills-border-radius);
  /* Match Bootstrap's pill radius */
  margin-bottom: 2px;
  /* Small gap between links */
}

.sidebar-navigation .nav-link:hover,
.sidebar-navigation .nav-link:focus {
  color: var(--bs-nav-link-hover-color, var(--bs-link-hover-color));
  background-color: var(--bs-tertiary-bg);
  /* Use a light BS background */
}

.sidebar-navigation .nav-item.current-menu-item>.nav-link,
.sidebar-navigation .nav-item.current-menu-ancestor>.nav-link {
  color: var(--bs-nav-pills-link-active-color);
  background-color: var(--bs-nav-pills-link-active-bg);
}

/* Styling for nested menu items */
.sidebar-navigation .sub-menu {
  list-style: none;
  padding-left: 1.5rem;
  /* Indent sub-menu */
  margin-top: 0.25rem;
  margin-bottom: 0.5rem;
}

.sidebar-navigation .sub-menu .nav-link {
  padding-top: 0.4rem;
  padding-bottom: 0.4rem;
  font-size: 0.9em;
  /* Slightly smaller text */
}

.sidebar-navigation .sub-menu .sub-menu {
  padding-left: 1rem;
  /* Further indent nested sub-menus */
}

.scrollable-content {
  /* Adjust left margin to make space for the fixed sidebar */
  margin-left: 260px;
  /* MUST match sidebar width */
  width: calc(100% - 260px);
  /* Calculate remaining width */
  /* Ensure content respects the Admin Bar */
  padding-top: var(--wp-admin--admin-bar--height, 0px);
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  overflow-y: scroll;
  /* Enable vertical scrolling */
  /* padding: 2rem; /* Adjust overall padding as needed (p-4 added in PHP) */
}

/* --- Responsive adjustments for smaller screens (below lg breakpoint: 992px) --- */
@media (max-width: 991.98px) {

  /* Stack layout: Content takes full width, sidebar is hidden (d-none d-lg-block handles this) */
  .scrollable-content {
    margin-left: 0;
    width: 100%;
    height: auto;
    /* Allow content to determine height */
    overflow-y: visible;
    /* Disable independent scrolling */
    /* Add back normal page padding if needed */
    /* padding-top: 1rem; */
    /* padding-bottom: 1rem; */
  }

  /* You'll need to rely on the main header (header.php) for navigation on small screens */
  /* Or implement an off-canvas toggle for the sidebar content */
}

/* Fix potential issue with body scroll when admin bar is present and sidebar is fixed */
html {
  /* Prevent unexpected scroll jump when content is shorter than viewport */
  /* overflow-y: scroll; */
  /* Consider if this is needed, might always show scrollbar */
}

/* style.css */

/* Keep all the previously added CSS for the general layout, sidebar, content, etc. */
/* Add or modify the following rules specifically for mobile improvements: */

/*--------------------------------------------------------------
# Mobile Navigation & Responsive Refinements
--------------------------------------------------------------*/

/* --- Offcanvas Mobile Sidebar --- */
.offcanvas-mobile-sidebar {
  width: 280px;
  /* Adjust width as desired for mobile offcanvas */
  color: var(--bs-dark);
  background-color: rgba(255, 255, 255, 0.8);

  /* Ensure it respects the admin bar */
  padding-top: var(--wp-admin--admin-bar--height, 0px);
  height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  /* Add transition for smooth appearance */
  transition: transform 0.3s ease-in-out;
}

/* Offcanvas Header */
.offcanvas-mobile-sidebar .offcanvas-header {
  border-bottom: 1px solid var(--bs-border-color);
  padding: 1rem 1.25rem;
}

.offcanvas-mobile-sidebar .offcanvas-title {
  font-size: 1.1rem;
  font-weight: 600;
  display: flex;
  /* Help align logo if present */
  align-items: center;
}

.offcanvas-mobile-sidebar .offcanvas-title .custom-logo {
  max-height: 60px;
  width: auto;
  margin-right: 0.5rem;
  /* Space between logo and title text */
}

/* Offcanvas Body */
.offcanvas-mobile-sidebar .offcanvas-body {
  padding: 0;
  /* Remove default padding */
  overflow-y: auto;
  /* Allow scrolling within the offcanvas body */
}

/* Padding for sections inside Offcanvas Body */
.offcanvas-mobile-sidebar .sidebar-branding {
  padding: 1.25rem;
}

.offcanvas-mobile-sidebar .sidebar-navigation {
  padding: 0 1.25rem 1.25rem 1.25rem;
}

.offcanvas-mobile-sidebar .sidebar-widgets {
  padding: 1.25rem;
  border-top: 1px solid var(--bs-border-color);
  /* Add separator if widgets follow nav */
}

/* Enhance Tap Targets for Offcanvas Navigation */
.offcanvas-mobile-sidebar .sidebar-navigation .nav-link {
  padding: 0.8rem 1rem;
  /* More vertical padding for easier tapping */
  font-size: 1rem;
  /* Ensure readable font size */
}

.offcanvas-mobile-sidebar .sidebar-navigation .sub-menu .nav-link {
  padding: 0.6rem 1rem 0.6rem 1.75rem;
  /* Ensure sufficient padding for sub-items */
  font-size: 0.95rem;
}

/* Ensure close button is easily tappable */
.offcanvas-mobile-sidebar .btn-close {
  padding: 0.5rem;
  /* Ensure adequate tap area */
  /* font-size: 1rem; /* Adjust if needed */
}

.skip-link {
  display: none;
}

/* --- General Responsive Content Spacing --- */
@media (max-width: 991.98px) {

  /* Adjust padding for the main content area on mobile */
  .scrollable-content-wrapper main#primary {
    padding: 1.5rem 1rem;
    /* Example: Less horizontal padding */
  }

  /* Adjust padding for WooCommerce notices container on mobile */
  .woo-notices-container {
    padding: 1rem 1rem 0 1rem;
    /* Match main content padding */
  }

  /* Example: Reduce default footer widget padding on mobile */
  .site-footer .footer-widgets {
    padding-top: 2.5rem;
    padding-bottom: 1rem;
    /* Reduce bottom padding as columns stack */
  }

  .site-footer .footer-widgets>.container>.row>div {
    margin-bottom: 1.5rem !important;
    /* Ensure consistent spacing when stacked */
  }
}

/* Prevent body scroll when Bootstrap offcanvas is shown */
/* Usually handled by Bootstrap, but good to reinforce */
body.offcanvas-backdrop-show {
  overflow: hidden;
}

/*
 * Enhanced Fixed Sidebar and Project Grid Layout
 * Add these styles to your style.css file
 */

/* Brand Logo in Sidebar */
.sidebar-branding {
  padding: 2rem 1.5rem 1.5rem 3rem;
}

.sidebar-branding img.custom-logo {
  max-height: 80px;
  width: auto;
}

.sidebar-branding .site-title {
  font-weight: 600;
  margin-bottom: 0;
}

.sidebar-branding .site-title a {
  color: #111;
  text-decoration: none;
}

/* Sidebar Navigation Styles */
.sidebar-navigation {
  flex: 1;
}

.sidebar-navigation .nav {
  --nav-link-spacing-y: 0.6rem;
}

.sidebar-navigation .nav-link {
  color: #333;
  font-weight: 500;
  padding: var(--nav-link-spacing-y) 1.25rem;
  border-radius: 0;
  transition: all 0.2s ease;
  position: relative;
}

.sidebar-navigation .nav-link:hover,
.sidebar-navigation .nav-link:focus {
  background-color: rgba(0, 0, 0, 0.03);
  color: var(--bs-primary);
}

.sidebar-navigation .nav-item.current-menu-item>.nav-link {
  color: var(--bs-primary);
  background-color: rgba(var(--bs-primary-rgb), 0.08);
  font-weight: 600;
}

.sidebar-navigation .nav-item.current-menu-item>.nav-link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 3px;
  background-color: var(--bs-primary);
}

/* Scrollable Content Styling */
.scrollable-content-wrapper {
  flex: 1;
  background-color: #ffffff;
}

@media (min-width: 992px) {
  .scrollable-content-wrapper {
    margin-left: 260px;
    /* Match sidebar width */
    width: calc(100% - 260px);
    min-height: 100vh;
    background-color: #fff;
  }

  .site-main {
    max-width: 1600px;
    /* Increased to accommodate 4 columns */
    margin: 0 auto;
    padding: 2.5rem 2rem !important;
  }
}

/* Project Grid Styling */
.project-grid+.project-grid {
  margin-top: 3rem;
}

.project-card {
  padding: 0;
  border: none;
  transition: all 0.3s ease;
  margin-bottom: 1rem;
}

.project-card:hover {
  opacity: 0.8;
  transform: none;
}

.project-thumbnail {
  overflow: hidden;
  border-radius: 8px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  background-color: #f8f9fa;
}

.project-thumbnail img {
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: transform 0.4s ease;
  aspect-ratio: 4 / 3; 
}

.project-card:hover .project-thumbnail img {
  opacity: 0.8;
}

.project-title {
  font-size: 1rem;
  line-height: 1.4;
  margin-top: 1rem;
  color: #222;
}

.project-categories {
  color: #666;
  font-size: 0.8rem;
  display: flex;
  flex-wrap: wrap;
}

.project-categories .mx-1 {
  color: #aaa;
}

/* Mobile Sidebar Enhancement */
.mobile-sidebar-toggler {
  position: fixed;
  top: 15px;
  left: calc(100vw - 45px);
  z-index: 1040;
  width: 45px;
  height: 45px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.mobile-sidebar-toggler:hover,
.mobile-sidebar-toggler:focus {
  background-color: var(--bs-light);
  border-color: rgba(0, 0, 0, 0.15);
}

.mobile-sidebar-toggler i {
  font-size: 1.5rem;
}

.offcanvas-mobile-sidebar {
  border-right: none;
  box-shadow: 5px 0 15px rgba(0, 0, 0, 0.1);
}

.offcanvas-mobile-sidebar .offcanvas-header {
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
}

/* Hero Section Styling */
.site-main>div:first-child {}

.site-main .display-4 {
  font-weight: 700;
  color: #222;
}

.site-main .lead {
  color: #666;
  font-size: 1.25rem;
  font-weight: 300;
}

/* Enhanced row styling */
.row.g-4 {
  --bs-gutter-x: 25px;
}

/* Responsive Adjustments */
@media (min-width: 992px) and (max-width: 1399.98px) {

  /* Adjust for large screens but not XL */
  .row-cols-lg-4>* {
    flex: 0 0 auto;
    width: 33.333333%;
    /* 3 columns instead of 4 on large screens */
  }
}

@media (min-width: 1400px) {

  /* Proper 4 columns on XL screens */
  .row-cols-lg-4>* {
    flex: 0 0 auto;
    width: 25%;
  }
}

@media (min-width: 768px) and (max-width: 991.98px) {

  /* Tablet-sized screens */
  .row-cols-md-2>* {
    flex: 0 0 auto;
    width: 50%;
  }

  .project-title {
    font-size: 0.9rem;
  }
}

@media (max-width: 767.98px) {

  /* On small screens allow more spacing */
  .project-grid .row .col:first-of-type {
    margin-top: 0 !important;
  }

  .project-card {
    margin-bottom: 0.8rem;
  }

  .project-title {
    font-size: 0.95rem;
    margin-top: 0.7rem;
  }

  .site-main .display-4 {
    font-size: 2rem;
  }

  .site-main .lead {
    font-size: 1.1rem;
  }
}

/* Sidebar Footer */
.sidebar-footer {
  padding: 1.5rem;
}

.sidebar-footer .social-icon:hover i.bi {
  color: #939393;
}

.social-links a {
  color: #555;
  font-size: 1.2rem;
  transition: color 0.2s ease;
}

.social-links a:hover {
  color: var(--bs-primary);
}

.site-info {
  margin-left: 260px;
  width: calc(100% - 260px);
  text-align: center;
  font-size: 0.8rem;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.2);
}

/* 手機版：移除左邊距與特殊寬度 */
@media (max-width: 767.98px) {
  .site-info {
    margin-left: 0;
    width: 100%;
  }
}

/* 
 * Final CSS refinements for the Shanmu theme
 * Add these to your style.css after the previous additions
 */

/* Project Card Refinements */
.project-card {
  backface-visibility: hidden;
  /* Prevents safari glitches with transforms */
}

/* Enhance the grid appearance */
.project-grid {
  position: relative;
}

/* Slightly reduce spacing on smaller screens */
@media (max-width: 1299.98px) {
  .row.g-4 {
    --bs-gutter-x: 20px;
  }
}

/* Hover animation class added by JS */
.project-card-hoverable {
  will-change: transform;
}

/* Enhance thumbnail appearance */
.project-thumbnail {
  position: relative;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* Create subtle overlay effect on hover */
.project-thumbnail::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.75);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}

.project-card:hover .project-thumbnail::after {
  opacity: 1;
  transform: none !important;
}

/* Improve typography on project cards */
.project-title {
  font-weight: 600;
  color: #333;
  transition: color 0.3s ease;
  margin-top: 1rem;
  line-height: 1.3;
}

.project-card:hover .project-title {
  color: #555;
}

.project-categories {
  line-height: 1.5;
}

/* Make font smaller on smaller devices to fit better */
@media (max-width: 1199.98px) {
  .project-title {
    font-size: 0.95rem;
  }

  .project-categories {
    font-size: 0.75rem;
  }
}

/* Sidebar branding enhancement */
.sidebar-branding h1.site-title {
  font-size: 1.1rem;
  /* Adjust size to match design */
}

/* Set main content background to pure white */
.scrollable-content-wrapper {
  background-color: #ffffff;
}

/* Adjust header spacing for better appearance */
.site-main>div:first-child {
  margin-bottom: 2.5rem;
}

/* Ensure proper spacing between rows */
.project-grid+.project-grid {
  margin-top: 2.5rem;
  /* Consistent spacing */
}


/* Improve sidebar nav appearance */
.sidebar-navigation .nav-item {
  margin-bottom: 3px;
}

/* Add subtle transition to the content area */
.scrollable-content-wrapper {
  transition: padding 0.3s ease;
}

/* 回應式調整 */
@media (max-width: 768px) {

  .alignleft,
  .alignright {
    float: none;
    margin-left: auto;
    margin-right: auto;
    display: block;
  }

  .project-grid .row .col {
    padding-left: 0px;
    padding-right: 0px;
  }
}

/* 
 * Scrolling Fixes for the Shanmu Theme
 * Add these to fix any scrolling issues with the fixed sidebar layout
 */

/* Fix scrollable content area on desktop */
@media (min-width: 992px) {

  /* Ensure content area is independently scrollable */
  .scrollable-content-wrapper {
    height: 100vh;
    /* Full viewport height */
    overflow-y: auto;
    /* Enable vertical scrolling */
    position: relative;
    /* Respect WordPress admin bar if present */
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
  }

  /* Make sure the main content doesn't need its own scrollbar */
  .site-main {
    height: auto;
    /* Let content determine height */
    overflow: visible;
    /* Don't add another scrollbar */
    padding-bottom: 3rem !important;
    /* Add bottom padding for spacing */
  }

  /* Keep fixed sidebar properly positioned */
  .fixed-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    height: 100vh;
    overflow-y: auto;
    /* Allow sidebar to scroll if content is tall */
    /* Respect WordPress admin bar if present */
    height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
    top: var(--wp-admin--admin-bar--height, 0px);
  }
}

/* Make sure mobile view scrolls normally */
@media (max-width: 991.98px) {
  .scrollable-content-wrapper {
    height: auto;
    overflow-y: visible;
  }

  .site-main {
    height: auto;
    overflow: visible;
  }
}

/* Ensure the site layout container doesn't interfere with scrolling */
.site-layout {
  min-height: 100vh;
}

/* Mobile Sidebar Navigation - List and Text Styles */

/* Menu container */
.sidebar-navigation ul {
  list-style: none;
  padding: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
}

/* Menu items */
.sidebar-navigation li {
  margin: 0;
}

.sidebar-navigation li:last-child {
  border-bottom: none;
}

/* Menu links */
.sidebar-navigation a {
  display: block;
  padding: 8px 0px 8px 32px;
  color: #777;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.3px;
  transition: all 0.2s ease;
}
@media (max-width: 768px) {
  .sidebar-navigation a {
    font-size: 18px;
  }
}
/* Hover state */
.sidebar-navigation a:hover {
  background-color: #F0F0F0;
  color: #212529;
  padding-left: 22px;
}

/* Active state */
.sidebar-navigation .current-menu-item a {
  font-weight: 700;
  color: #000;
}

/* Mobile Top Bar Styles */
.mobile-top-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 60px;
  background-color: rgba(255, 255, 255, 0.8);
  -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 1030;
  /* Higher than mobile sidebar toggle but lower than offcanvas */
  padding: 0 15px;
  /* Respect WordPress admin bar if present */
  top: var(--wp-admin--admin-bar--height, 0px);
}

.mobile-top-logo {
  text-align: center;
  max-width: 180px;
  /* Adjust based on logo size */
}

.mobile-top-logo img {
  max-height: 40px;
  width: auto;
}

/* Adjust existing mobile toggle button position */
.mobile-sidebar-toggler {
  top: calc(var(--wp-admin--admin-bar--height, 0px) + 19px);
  z-index: 1035;
  /* Ensure it's above the top bar */
}

/* Adjust the main content to account for top bar on mobile */
@media (max-width: 991.98px) {
  .scrollable-content-wrapper {
    margin-top: 60px;
    /* Same as top bar height */
    padding-top: 0;
  }

  /* If there's an admin bar, we need to adjust accordingly */
  body.admin-bar .scrollable-content-wrapper {
    margin-top: 60px;
    /* Still the same, as we've adjusted the top bar position */
  }

  /* Adjust offcanvas position for the admin bar */
  body.admin-bar .offcanvas-mobile-sidebar {
    top: var(--wp-admin--admin-bar--height, 0px);
  }

  /* Only add top padding to the site-main on mobile */
  .site-main {
    padding-top: 1rem !important;
  }

}
@media only screen and (min-width: 768px) and (max-width: 1024px) {
  .shanmu-menu-block-right {
    margin-left: -20px!important;
  }
}
@media (min-width: 992px) and (max-width: 1440px) {
  .shanmu-menu-block-right {
    margin-left: -120px;
  }
}
    @media (min-width: 992px) {
      .shanmu-menu-block-right {
        margin-left: -150px;
      } }

/* Ensure the mobile logo is properly centered */
.mobile-top-logo .custom-logo-link {
  display: inline-block;
}

/* Improve top bar appearance on very small screens */
@media (max-width: 575.98px) {
  .mobile-top-bar {
    height: 72px;
    /* Slightly smaller on very small screens */
  }

  .mobile-top-logo img {
    max-height: 50px;
    /* Slightly smaller logo */
  }

  .scrollable-content-wrapper {
    margin-top: 72px;
    /* Match the new height */
  }
}

/* Fix for iOS Safari bounce effect */
html,
body {
  overscroll-behavior-y: none;
}

/* Improve scrollbar appearance */
.scrollable-content-wrapper::-webkit-scrollbar {
  width: 8px;
}

.scrollable-content-wrapper::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.scrollable-content-wrapper::-webkit-scrollbar-thumb {
  background: #ccc;
  border-radius: 4px;
}

.scrollable-content-wrapper::-webkit-scrollbar-thumb:hover {
  background: #aaa;
}

/* 台灣特定樣式 */
.tax-id-field,
.einvoice-field {
  margin-bottom: var(--spacing-sm);
}

.tax-id-field label,
.einvoice-field label {
  display: block;
  margin-bottom: var(--spacing-xs);
}

/* WooCommerce 基本樣式覆蓋 */
/* **建議**: 與其在這裡覆寫按鈕樣式，不如直接在 WooCommerce 樣板中
 * 為按鈕加上 Bootstrap 的 class，例如 class="button btn btn-primary"
 * 這樣按鈕樣式就能完全跟隨您在 :root 中定義的 --bs-primary 和 --bs-btn-* 變數了。
 * 如果無法修改樣板，才使用下面的覆寫，並使用 BS 變數：
 */
/*
.woocommerce #respond input#submit,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button {
  background-color: var(--bs-primary);
  color: var(--bs-light); // 或計算出的對比色
  border-color: var(--bs-primary);
  padding: var(--bs-btn-padding-y) var(--bs-btn-padding-x);
  font-size: var(--bs-btn-font-size);
  border-radius: var(--bs-btn-border-radius);
  // ... 其他按鈕樣式 ...
}

.woocommerce #respond input#submit:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover {
  background-color: color-mix(in srgb, var(--bs-primary) 85%, black); // 自動變深
  border-color: color-mix(in srgb, var(--bs-primary) 85%, black);
  color: var(--bs-light);
}
*/

/* Custom styles 自訂樣式 */

/* Responsive Adjustment 響應式調整 */
/* mobile screen */
@media screen and (max-width: 575.98px) {}

/* Small Devices (Landscape Phones, ≥576px and <768px) */
@media (min-width: 576px) and (max-width: 767.98px) {}

/* Medium Devices (Tablets, ≥768px and <992px) */
@media (min-width: 768px) and (max-width: 991.98px) {}

/* Large Devices (Desktops, ≥992px and <1200px) */
@media (min-width: 992px) and (max-width: 1199.98px) {}

/* Extra Large Devices (Large Desktops, ≥1200px and <1400px) */
@media (min-width: 1200px) and (max-width: 1399.98px) {}

/* XX Large Devices (Very Large Desktops, ≥1400px) */
@media (min-width: 1400px) {}

/* 關於我們選單樣式 */
.shanmu-about-menus {
  display: flex;
  /* 使用 Flexbox 排版 */
  flex-wrap: wrap;
  /* 允許換行 */
  gap: 30px 50px;
  /* 垂直間隔 30px, 水平間隔 50px */
  margin-top: 2.5rem;
  /* 與上方內容的間距 */
  margin-bottom: 2.5rem;
  /* 與下方內容的間距 */
  padding-top: 2rem;
  /* 頂部內邊距 */
  border-top: 1px solid #ddd;
  /* 分隔線 */
}

.shanmu-menu-column {
  flex: 1;
  /* 每欄自動分配空間 */
  min-width: 220px;
  /* 每欄最小寬度，小於此寬度會換行 */
}

.shanmu-menu-title {
  font-size: 1.25rem;
  /* 標題字體大小 */
  font-weight: 600;
  /* 標題字重 */
  color: #2c3e50;
  /* 標題顏色 (深藍灰) - 請依你的品牌色調整 */
  margin-bottom: 1.5rem;
  /* 標題下方間距 */
  padding-bottom: 0.5rem;
  /* 底線與文字間距 */
  border-bottom: 2px solid #7f8c8d;
  /* 標題底線顏色 (灰) - 請依你的品牌色調整 */
  display: inline-block;
  /* 讓底線只跟隨文字寬度 */
}

.shanmu-menu-list {
  list-style: none;
  /* 移除項目符號 */
  padding: 0;
  margin: 0;
}

.shanmu-menu-list li {
  margin-bottom: 0.8rem;
  /* 列表項目間距 */
}

.shanmu-menu-list li a {
  text-decoration: none;
  color: #777;
  /* 連結文字顏色 */
  font-size: 1rem;
  /* 連結文字大小 */
  transition: color 0.3s ease, padding-left 0.3s ease;
  /* 過渡效果 */
  display: inline-block;
  position: relative;
}

.shanmu-menu-list li a:hover {
  color: #555;
  /* 滑鼠移過時的顏色 (藍色) - 請依你的品牌色調整 */
  padding-left: 12px;
  /* 滑鼠移過時向右推移 */
}

/* 滑鼠移過時顯示小圓點 (可選) */
.shanmu-menu-list li a:hover::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #555;
  /* 小圓點顏色，同 hover 顏色 */
  border-radius: 50%;
  transition: opacity 0.3s ease;
  /* 讓它淡入淡出 */
  opacity: 1;
}

.shanmu-menu-list li a::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 5px;
  height: 5px;
  background-color: #3498db;
  border-radius: 50%;
  opacity: 0;
  /* 預設隱藏 */
}
.shanmu-about-menus {
	gap: 0 30px;
}
.shanmu-menu-block {
  padding-left: 15px;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 767px) {
  .shanmu-about-menus {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      gap: 0!important;
      margin-left: 5%;
      margin-right: 5%;
    }

  .shanmu-menu-column {
    min-width: 100%;
    /* 欄位佔滿全寬 */
  }

  .shanmu-menu-title {
    font-size: 1.15rem;
    /* 稍微縮小標題 */
  }

  .shanmu-menu-list li a {
    font-size: 0.95rem;
    /* 稍微縮小列表文字 */
  }

  .shanmu-about-menus-img {
    display: none;
  }

    .shanmu-menu-block {
      width: 48%;
      /* 每個約一半，加一點 margin 空間 */
      margin-bottom: 20px;
    }
}

/* 如果使用 shortcode 方法，加入提示訊息的樣式 */
.shanmu-menu-column p {
  font-style: italic;
  color: #888;
  font-size: 0.9em;
}

.portfolio-template .fixed-sidebar {
  background-color: rgba(255, 255, 255, 0.8);
}

.portfolio-template .e-con>.e-con-inner {
  max-width: 100%;
}

.portfolio-template .elementor img {
  width: 100%;
}

#content {
  overflow-x: hidden;
}

@media (min-width: 992px) {
  .portfolio-template #content.scrollable-content-wrapper {
    margin-left: 0;
    width: 100vw;
  }
}

/* --- 服務流程圖 CSS --- */
.process-flow-row {
  position: relative;
  /* 為了讓絕對定位的偽元素有參考點 */
}

.process-step-col {
  position: relative;
  /* 為了讓絕對定位的偽元素有參考點 */
  z-index: 1;
  /* 確保卡片在連接線之上 */
}

/* 在中等螢幕及以上 (通常是 > 768px) 顯示連接線 */
@media (min-width: 768px) {
  .process-step-col:not(:last-child)::after {
    content: "";
    /* 必須有 content */
    position: absolute;
    top: 50px;
    /* 調整垂直位置，大約在圖示下方一點 */
    right: -16px;
    /* 水平位置，大約在欄位間距的一半 (g-4 是 1.5rem -> 24px / 2 = 12px + 額外調整) */
    width: 25px;
    /* 線或箭頭的寬度 */
    height: 2px;
    /* 線的粗細 */
    background-color: #3a3a3a;
    /* 使用主題的主色或預設藍色 */
    transform: translateY(-50%);
    /* 垂直置中 */
    z-index: 0;
    /* 讓連接線在卡片下方 */

    /* --- 可選：如果想用箭頭 --- */
    /*
        background-color: transparent;
        border-top: 2px solid var(--bs-primary, #0d6efd);
        border-right: 2px solid var(--bs-primary, #0d6efd);
        width: 10px;
        height: 10px;
        transform: translateY(-50%) rotate(45deg);
        right: -10px; // 箭頭位置需要微調
        */
  }

  /* 如果使用 col-lg-3 (4欄)，可能需要調整最後一個 :after 的位置 */
  /* .col-lg-3.process-step-col:not(:last-child)::after { right: -16px; } */
  /* 如果使用 col-lg-4 (3欄)，可能需要調整 :after 的 right 值 */
  /* .col-lg-4.process-step-col:not(:last-child)::after { right: -16px; } */
}

.process-step {
  /* 可以添加 transition 讓滑鼠懸停效果更平滑 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.process-step:hover {
  transform: none;
  /* 滑鼠懸停時稍微上移 */
  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important;
  /* 增加陰影 */
}

.step-icon i {
  /* 圖示樣式 */
  display: inline-block;
}

.step-number {
  font-size: 0.75rem;
  /* 步驟數字大小 */
}

.step-title {
  /* 標題樣式 */
  color: #333;
}

.step-description {
  /* 描述文字樣式 */
  line-height: 1.6;
}

.service-flow-section .bg-primary {
  background-color: #555 !important;
}

.service-flow-section .border-primary {
  border-color: #555 !important;
}

.service-flow-section .text-primary {
  color: #555 !important;
}

.h1,
h1 {
  font-size: 1.5rem;
}

.navigation.pagination .nav-links {
  display: flex;
  align-items: center;
  gap: 10px;
}

.navigation.pagination .nav-links .page-numbers {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  text-decoration: none;
  font-weight: 500;
  transition: all 0.3s ease;
}

.navigation.pagination .nav-links .page-numbers.current {
  background-color: #3d3d3d;
  color: white;
}

.navigation.pagination .nav-links .page-numbers:not(.current) {
  background-color: #f0f0f0;
  color: #333;
}

.navigation.pagination .nav-links .page-numbers:hover:not(.current) {
  background-color: #e0e0e0;
}

.navigation.pagination .nav-links .next.page-numbers {
  width: auto;
  padding: 0 15px;
  border-radius: 20px;
}

.navigation.pagination .nav-links .prev.page-numbers {
  width: auto;
  padding: 0 15px;
  border-radius: 20px;
}

.navigation.pagination .screen-reader-text {
  display: none;
}

.site-main:has(.project-grid) {
  padding-top: 0 !important;
}

.about-banner img {
  height: 75vh;
  object-fit: cover;
  object-position: center center;
}

/* 版本2的服務流程 */

.flowchart-container {
  background-color: #fff;
  padding: 30px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.flowchart {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  /* 允許在空間不足時換行 */
  justify-content: space-around;
  /* 平均分配步驟 */
  align-items: center;
  /* 垂直居中 */
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 20px;
  text-align: center;
  position: relative;
  /* 為了線條定位 */
}

.circle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background-color: #e0f7fa;
  /* 淺藍色背景 */
  color: #00bcd4;
  /* 青色文字 */
  border: 2px solid #00bcd4;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1.2em;
  font-weight: bold;
  margin-bottom: 10px;
}

.content h3 {
  margin-top: 0;
  color: #333;
  font-size: 1em;
}

.content p {
  color: #666;
  font-size: 0.9em;
}

/* 連接線 */
.step::before {
  content: '';
  position: absolute;
  top: 75px;
  /* 調整垂直位置 */
  left: 50%;
  width: 2px;
  height: 20px;
  /* 線的長度 */
  background-color: #ccc;
  transform: translateX(-50%);
  z-index: -1;
  /* 放在圓圈下方 */
}

/* 隱藏第一個步驟之前的線 */
.flowchart li:first-child::before {
  display: none;
}

/* 調整在小螢幕上的佈局 */
@media (max-width: 600px) {
  .flowchart {
    flex-direction: column;
    align-items: stretch;
  }

  .step {
    flex-direction: row;
    align-items: center;
    text-align: left;
    margin: 15px 0;
  }

  .circle {
    margin-right: 15px;
  }

  .step::before {
    top: 50%;
    left: 0;
    width: 20px;
    height: 2px;
    transform: translateY(-50%);
  }

  .flowchart li:first-child::before {
    display: none;
  }
}

.shanmu-related-portfolios {
  padding-top: 30px;
}