/*
Theme Name: KP Healthcare AI Theme
Theme URI: https://kphealthcare-ai.local/
Author: Antigravity
Author URI: https://kphealthcare-ai.local/
Description: A modern, elegant WordPress theme built for traditional Chinese medicine and pain treatment clinics, inspired by premium clinic designs.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kphealthcare
Tags: custom-colors, custom-menu, featured-images, flexible-header, responsive-layout
*/

/* Reset & Basic Variables */
:root {
  --ink: #1A1A1A;
  --gold: #3D5A45;      /* 墨綠色主調 */
  --gold-light: #577A60; /* 較淺嘅墨綠色，用於 hover 效果 */
  --gold-pale: #EAEFEA;  /* 淡綠色背景點綴 */
  --red-deep: #8b2020;
  --red-warm: #c0392b;
  --cream: #F8F8F8;
  --cream-mid: #E8E8E8;
  --stone: #6b5e4e;
  --stone-light: #a0917f;
  --white: #FFFFFF;
  --shadow: rgba(26, 26, 26, 0.12);
  
  --font-heading: 'Noto Serif TC', serif;
  --font-body: 'Noto Sans TC', sans-serif;
  --wrapper-max: 1200px;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-heading);
  background: var(--white);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--gold);
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: var(--gold-light);
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* 確保 WordPress admin bar 不會遮擋 Fixed Header */
.admin-bar .site-header {
  top: 32px;
}
@media screen and (max-width: 782px) {
  .admin-bar .site-header {
    top: 46px;
  }
}

/* 價目表及治療項目專用樣式 (Price List Styles) */
/* 避免被 WordPress 編輯器過濾，將樣式放喺 theme 裡面 */
.kp-price-list {
    max-width: 800px;
    margin: 0 auto;
    font-family: inherit;
    color: #333;
}
.kp-price-list table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 40px;
    background-color: transparent;
    border: none;
    font-size: 16px;
}
/* 處理th同td的間距與置中，等佢跟返圖嘅排版 */
.kp-price-list th, .kp-price-list td {
    padding: 14px 12px;
    text-align: center;
    border: none;
    vertical-align: middle;
}
.kp-price-list td:first-child, .kp-price-list th:first-child {
    text-align: left;
    font-weight: 500;
}
/* 每個表格第一行嘅大標題樣式 */
.kp-price-list .table-header th {
    color: #fff !important;
    font-size: 20px;
    font-weight: bold;
    border-radius: 8px 8px 0 0;
    padding: 16px;
    text-align: center !important;
}
/* 欄位小標題嘅樣式（例如：正價、會員價） */
.kp-price-list tr.sub-header th, .kp-price-list tr.sub-header td {
    background-color: transparent !important;
    color: #666;
    font-weight: bold;
    font-size: 16px;
    padding: 10px;
    border-bottom: 2px solid #eee;
}
/* 項目下方嘅輔助小字 */
.kp-price-list td small {
    display: block;
    font-size: 13px;
    color: #888;
    margin-top: 4px;
    font-weight: normal;
}

/* 基本內科服務 (孔雀綠) */
.bg-teal table { border-collapse: collapse; }
.bg-teal .table-header th { background-color: #506f65 !important; }
.bg-teal tr.row-even td { background-color: #f5f8ed !important; }
.bg-teal tr.row-odd td { background-color: #e7f4ec !important; }

/* 基本手法服務 (金褐) */
.bg-gold .table-header th { background-color: #c5a47e !important; }
.bg-gold tr.row-even td { background-color: #fdf5e6 !important; }
.bg-gold tr.row-odd td { background-color: #faf0e6 !important; }

/* 中醫美容療程 (水藍色) */
.bg-blue .table-header th { background-color: #5fa4ce !important; }
.bg-blue tr.row-even td { background-color: #eef5fb !important; }
.bg-blue tr.row-odd td { background-color: #dff0f9 !important; }

/* 中醫體重管理療程 (草綠色) */
.bg-green .table-header th { background-color: #598c6d !important; }
.bg-green tr.row-even td { background-color: #f2faed !important; }
.bg-green tr.row-odd td { background-color: #e5f7e7 !important; }

/* 中醫痛症療程 (深棕色) */
.bg-brown .table-header th { background-color: #7a4d34 !important; }
.bg-brown tr.row-even td { background-color: #fcf4eb !important; }
.bg-brown tr.row-odd td { background-color: #f3e6d8 !important; }

/* 推拿 (暗紅色) */
.bg-red .table-header th { background-color: #a33b3b !important; }
.bg-red tr.row-even td { background-color: #fdf2f2 !important; }
.bg-red tr.row-odd td { background-color: #fae6e6 !important; }

/* 頁尾聯絡資訊 */
.kp-price-list .footer-info {
    text-align: center;
    margin-top: 30px;
    font-size: 16px;
    color: #444;
    padding-top: 20px;
    border-top: 1px calc(#eee) solid;
}

@media screen and (max-width: 600px) {
    .kp-price-list th, .kp-price-list td {
        padding: 10px 6px;
        font-size: 14px;
    }
    .kp-price-list .table-header th {
        font-size: 18px;
    }
}

/* ==========================================================================
   Global Scroll Fade-In Effect (Performance Optimized via JS IntersectionObserver)
   ========================================================================== */

/* 預設隱藏並向下偏移 30px */
.scroll-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    /* 著重 performance，提示 browser 將這些 properties 交由 GPU 處理 */
    will-change: opacity, transform;
}

/* 當 js-inserted is-visible 出現時觸發動畫 */
.scroll-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Optional: Stagger delay for grid items if they appear together */
.services-grid .service-card:nth-child(1) { transition-delay: 0.1s; }
.services-grid .service-card:nth-child(2) { transition-delay: 0.2s; }
.services-grid .service-card:nth-child(3) { transition-delay: 0.3s; }
.services-grid .service-card:nth-child(4) { transition-delay: 0.4s; }
.services-grid .service-card:nth-child(5) { transition-delay: 0.5s; }
.services-grid .service-card:nth-child(6) { transition-delay: 0.6s; }

.doctors-track .doctor-slide:nth-child(1) { transition-delay: 0.1s; }
.doctors-track .doctor-slide:nth-child(2) { transition-delay: 0.2s; }
.doctors-track .doctor-slide:nth-child(3) { transition-delay: 0.3s; }
.doctors-track .doctor-slide:nth-child(4) { transition-delay: 0.4s; }

/* ==========================================================================
   應診時間表 (Consultation Schedule)
   ========================================================================== */
.kp-schedule-wrapper {
    overflow-x: auto;
    margin: 2rem 0;
    position: relative;
    max-width: 100%;
    padding: 2px; /* 防裁切 (Fixes right border clipping due to subpixel rendering) */
}
.kp-schedule-table {
    width: 100%;
    min-width: 700px;
    max-width: 900px;
    margin: 0 auto;
    border-collapse: separate; 
    border-spacing: 0;
    font-family: var(--font-heading); 
    color: var(--stone);
    table-layout: fixed; 
    border-top: 2px solid #c5a365; /* 加粗 */
    border-left: 2px solid #c5a365; /* 加粗 */
    box-sizing: border-box;
    background: #fff; /* 防止 Webkit 背景顏色溢出食咗邊框 */
}

/* Base borders */
.kp-schedule-table th,
.kp-schedule-table td {
    border-right: 2px solid #c5a365; /* 加粗 */
    border-bottom: 2px solid #c5a365; /* 加粗 */
    text-align: center;
    vertical-align: middle;
    box-sizing: border-box;
    background-clip: padding-box; 
}

/* Header row styling */
.kp-schedule-table thead th {
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 700; /* 加粗體 */
    color: #4a4a4a;
    padding: 20px 5px; 
    background: #fff;
    position: sticky; 
    top: 0;
    z-index: 10;
}
.kp-schedule-table thead th:first-child {
    width: 130px;
    position: sticky;
    left: 0;
    z-index: 20; 
}

.kp-schedule-table thead th span.sat-time {
    display: block;
    margin-top: 4px;
    font-size: 0.85rem;
    color: #888;
    font-weight: normal; /* 時間保持正常粗細，只粗日字 */
    font-family: var(--font-body); 
}

/* First column headers (上午, 午膳, 下午) */
.kp-schedule-table tbody th {
    font-size: 1.4rem;
    font-weight: 700; /* 加粗體 */
    padding: 15px;
    background: #fff;
    position: sticky; 
    left: 0;
    z-index: 10;
}
.kp-schedule-table tbody th span.time-range {
    display: block;
    font-size: 0.9rem;
    color: #888;
    font-weight: normal; /* 時間保持正常粗細 */
    margin-top: 5px;
    font-family: var(--font-body);
}

/* Two-tone cells */
.kp-schedule-table td.split-cell {
    padding: 0;
    height: 120px;
    background-color: #fff; /* 底色用白，防止右邊溢出 */
}
.kp-schedule-table td.split-cell .split-wrap {
    display: flex;
    height: 100%;
}
.kp-schedule-table td.split-cell .half {
    flex: 1;
    width: 50%; /* 強制平分 */
    max-width: 50%;
    display: flex;
    flex-direction: column;
    align-items: center; /* 修正：將所有圓圈重新置中，解決「靠左右」問題 */
    justify-content: center;
    padding: 5px 0; /* 減少橫向 padding 避免縮埋 */
    box-sizing: border-box;
}
.kp-schedule-table td.split-cell .half.left { background-color: #efe8dc; border-right: 2px solid #c5a365; } 
.kp-schedule-table td.split-cell .half.right { background-color: transparent; }
.kp-schedule-table td.split-cell .half.split-vertical {
    gap: 8px;
}

/* Closed blocks */
.kp-schedule-table td.closed-block {
    background-color: #e8e6e1; /* 灰色 */
}

/* Lunch block */
.kp-schedule-table td.lunch-block {
    background-color: #e8e6e1; /* 灰色 */
    height: 60px;
}

/* Doctor Badges */
.doc-badge {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem; /* 大少少，但保留適當空間 */
    font-weight: 500;
}
.doc-tai { background-color: #5d755a; } /* 戴 - Green */
.doc-lui { background-color: #bda878; } /* 呂 - Gold */
.doc-choy { background-color: #a44f43; } /* 蔡 - Red */
.doc-fong { background-color: #517188; } /* 方 - Blue */

@media (max-width: 768px) {
    .kp-schedule-table thead th { font-size: 1.5rem; }
    .kp-schedule-table tbody th { font-size: 1.2rem; width: 100px; }
    .doc-badge { width: 40px; height: 40px; font-size: 1.15rem; }
    .kp-schedule-table td.split-cell { height: 100px; }
}

/* iPhone 等細屏幕專用 — 壓縮時間表令更多內容可見 */
@media (max-width: 480px) {
    .kp-schedule-table {
        min-width: 500px; /* 縮小最低寬度 */
    }
    .kp-schedule-table thead th {
        font-size: 1.1rem;
        padding: 10px 3px;
    }
    .kp-schedule-table thead th:first-child {
        width: 80px; /* 大幅收窄第一欄 */
    }
    .kp-schedule-table tbody th {
        font-size: 0.9rem;
        padding: 8px 5px;
        width: 80px;
    }
    .kp-schedule-table tbody th span.time-range {
        font-size: 0.7rem;
        margin-top: 2px;
    }
    .doc-badge {
        width: 32px;
        height: 32px;
        font-size: 0.95rem;
    }
    .kp-schedule-table td.split-cell {
        height: 75px;
    }
    .kp-schedule-table td.split-cell .half {
        padding: 3px 0;
    }
    .kp-schedule-table td.split-cell .half.split-vertical {
        gap: 4px;
    }
    .kp-schedule-table td.lunch-block {
        height: 35px;
    }
}

/* ==========================================================================
   應診時間表圖例 (Schedule Legend - Doctor Full Names)
   ========================================================================== */
.schedule-legend {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, max-content));
    justify-content: center;
    justify-items: start;
    gap: 1.2rem 2rem;
    margin-top: 2rem;
    padding: 1.5rem 1rem;
    font-size: 0.95rem;
    color: var(--stone, #5C5851);
    line-height: 1.6;
}

.schedule-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

/* 復用現有 doc-badge 但縮細少少 */
.schedule-legend-item .doc-badge {
    width: 28px;
    height: 28px;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.schedule-legend-item .legend-name {
    font-weight: 500;
    color: var(--ink, #1A1A1A);
    min-width: 85px;
    text-align: left;
}

.schedule-legend-item .legend-days {
    color: var(--stone-light, #a0917f);
    font-size: 0.85rem;
    text-align: left;
}

/* IG 提示 — 位於 legend 下面 */
.schedule-ig-hint {
    text-align: center;
    margin-top: 1.5rem;
    font-size: 0.95rem;
    color: var(--stone, #5C5851);
}

.schedule-ig-hint a {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--ink, #1A1A1A);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.schedule-ig-hint a:hover {
    color: var(--gold, #3D5A45);
}

@media (max-width: 480px) {
    .schedule-legend {
        gap: 0.8rem 1.2rem;
        font-size: 0.85rem;
    }
    .schedule-legend-item .doc-badge {
        width: 24px;
        height: 24px;
        font-size: 0.75rem;
    }
    .schedule-ig-hint {
        font-size: 0.85rem;
    }
}