/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
	text-decoration-thickness: 1px !important;
	text-underline-offset: .1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
	outline-width: 2px;
	outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation .wp-block-navigation-submenu .wp-block-navigation-item:not(:last-child) {
	margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation .wp-block-navigation-item .wp-block-navigation-item__content {
	outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation .wp-block-navigation-item ul.wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1, h2, h3, h4, h5, h6, blockquote, caption, figcaption, p {
	text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
	display: block;
}
              <style>
        /* =========================================
           統一 CSS 樣式表
           ========================================= */
/* --- 聯絡表單樣式 (複製到 WordPress 附加 CSS) --- */
.contact-form-container {
    max-width: 700px;
    margin: 0 auto;
    text-align: left;
    padding: 40px;
    background: #f3f0e9; /* secondary-bg */
    border-radius: 10px;
}

.form-header {
    text-align: center;
    margin-bottom: 30px;
    font-size: 1.8rem;
    font-style: italic;
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: bold;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    font-size: 0.9rem;
    margin-bottom: 8px;
    color: #333;
    font-family: 'Microsoft JhengHei', sans-serif;
    font-weight: bold;
}

.form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #ddd;
    font-family: 'Microsoft JhengHei', sans-serif;
    font-size: 0.95rem;
    background: #fff;
    outline: none;
    transition: 0.3s;
    box-sizing: border-box; /* 重要：防止寬度跑版 */
}

.form-control:focus {
    border-color: #333;
    box-shadow: 0 0 5px rgba(0,0,0,0.1);
}

textarea.form-control {
    resize: vertical;
    min-height: 150px;
}

/* 黑色按鈕樣式 */
.btn-black { 
    background: #000; 
    color: #fff; 
    padding: 12px 35px; 
    border: 1px solid #000; 
    border-radius: 0; 
    font-size: 0.9rem;
    display: inline-block;
    margin-top: 20px;
    cursor: pointer;
    font-family: 'Microsoft JhengHei', sans-serif;
    border: none; /* 移除預設邊框 */
}
.btn-black:hover {
    background: #333;
}

        /* --- 1. 基礎設定 --- */
        :root {
            --primary-bg: #ffffff;
            --secondary-bg: #f3f0e9;
            --text-color: #4a4a4a;
            --heading-font: 'Playfair Display', serif;
            --body-font: 'Lato', sans-serif;
            --chinese-font: 'Microsoft JhengHei', '微軟正黑體', sans-serif;
        }

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

        body {
            font-family: var(--body-font);
            color: var(--text-color);
            line-height: 1.6;
            overflow-x: hidden;
            background-color: var(--primary-bg);
        }

        h1, h2, h3, h4 { font-family: var(--heading-font); font-weight: 400; }
        a { text-decoration: none; color: inherit; transition: 0.3s;}
        ul { list-style: none; }

        /* 按鈕樣式 */
        .btn { display: inline-block; padding: 10px 30px; border: 1px solid white; color: white; border-radius: 50px; margin-top: 20px; font-size: 0.9rem; cursor: pointer; }
        .btn:hover { background: white; color: #333; }
        
        .btn-dark { border: 1px solid #333; color: #333; }
        .btn-dark:hover { background: #333; color: white; }

        /* 黑色方形按鈕 */
        .btn-black { 
            background: #000; 
            color: #fff; 
            padding: 12px 35px; 
            border: 1px solid #000; 
            border-radius: 0; 
            font-size: 0.9rem;
            display: inline-block;
            margin-top: 20px;
            cursor: pointer;
        }
        .btn-black:hover {
            background: #333;
            border-color: #333;
        }

        section { padding: 80px 10%; text-align: center; }

        /* --- 2. 導覽列 (Navbar) --- */
        nav {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 50px;
            background: white;
            position: fixed;
            width: 100%;
            top: 0;
            z-index: 1000;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            height: 80px;
        }

        .logo-container { text-align: center; }
        .logo { font-size: 1.8rem; font-family: var(--heading-font); font-weight: bold; line-height: 1; }
        .logo-sub { font-size: 0.7rem; letter-spacing: 1px; color: #888; display: block; margin-top: 5px; font-family: var(--body-font);}
        
        /* 導覽列字型設定 */
        .nav-links { 
            display: flex; 
            gap: 30px; 
            font-size: 1.15rem; /* 大字體 */
            text-transform: uppercase; 
            letter-spacing: 1px; 
            font-family: var(--chinese-font); 
            font-weight: 700; /* 粗體 */
            color: #000; /* 純黑 */
        }

        .desktop-icons { display: flex; align-items: center; gap: 20px; }
        .desktop-icons .icon-link { font-size: 1.2rem; color: #333; position: relative; display: flex; align-items: center; }
        .desktop-icons .icon-link:hover { color: #888; }
        /* 新增：會員登入文字樣式 */
        .login-text { font-size: 0.85rem; margin-left: 8px; font-family: var(--chinese-font); font-weight: 600; white-space: nowrap; }

        .cart-wrap { position: relative; display: flex; align-items: center; }
        .cart-badge-desktop { position: absolute; top: -5px; right: -8px; background: black; color: white; font-size: 0.6rem; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: sans-serif; }

        /* 手機版導覽列元素 */
        .mobile-toggle, .mobile-left-icons { display: none; } /* 修改：原 mobile-cart 改為 mobile-left-icons */
        
        /* 手機左側圖示區塊 */
        .mobile-left-icons { display: none; align-items: center; gap: 15px; }
        .mobile-icon-link { color: #333; font-size: 1.3rem; position: relative; }
        .cart-badge { position: absolute; top: -5px; right: -8px; background: black; color: white; font-size: 0.6rem; width: 16px; height: 16px; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-family: sans-serif; }
        
        .mobile-toggle { font-size: 1.5rem; cursor: pointer; color: #333; }

        /* --- 3. Social Sidebar --- */
        .social-sidebar {
            position: fixed;
            top: 50%;
            left: 25px;
            transform: translateY(-50%);
            display: flex;
            flex-direction: column;
            gap: 20px;
            z-index: 999;
        }
        .social-sidebar a { color: #aaa; font-size: 1.1rem; transition: all 0.3s ease; }
        .social-sidebar a:hover { color: #4a4a4a; transform: scale(1.2); }

        /* --- 4. 首頁專用樣式 --- */
        .hero {
            height: 100vh;
            background: linear-gradient(rgba(0,0,0,0.2), rgba(0,0,0,0.2)), url('https://www.easywellnesshk.com/wp-content/uploads/2025/11/hero_new.jpeg');
            background-size: cover; 
            background-position: center center; 
            display: flex; 
            flex-direction: column; 
            justify-content: center; 
            align-items: center;
            color: white; 
            margin-top: 80px;
            text-align: center;
        }
        
        /* Hero Slogan 樣式 */
        .hero h1 { 
            font-family: var(--chinese-font);
            font-size: 3.5rem; 
            font-weight: bold; 
            margin-bottom: 20px; 
            text-shadow: 0 2px 4px rgba(0,0,0,0.3); 
            padding: 0 20px;
            line-height: 1.4;
        }

        .about h2 { font-size: 2rem; margin-bottom: 20px; font-style: italic;}
        
        /* --- 關於我們內文樣式 --- */
        .about p { 
            max-width: 700px;
            margin: 0 auto; 
            font-size: 1.15rem;
            color: #333;
            text-align: left; 
            line-height: 1.8;
        }

        .features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; padding-top: 0; }
        .feature-card { background: var(--secondary-bg); padding-bottom: 40px; }
        
        .feature-img {
            width: 100%;
            height: auto; 
            margin-bottom: 30px;
        }
        
        .feature-content { padding: 0 30px; }
        
        /* Features 標題樣式 */
        .feature-content h3 { 
            margin-bottom: 15px; 
            font-size: 1.3rem; 
            font-family: var(--chinese-font); 
            font-weight: bold;
        } 
        
        /* Features 內文樣式 */
        .feature-content p { 
            font-size: 0.95rem; 
            color: #777; 
            font-family: var(--chinese-font);
            line-height: 1.8; 
        }

        /* --- Intro Promo --- */
        .intro-promo {
            background: linear-gradient(rgba(0,0,0,0.3), rgba(0,0,0,0.3)), url('https://www.easywellnesshk.com/wp-content/uploads/2025/11/op.jpeg');
            background-attachment: fixed; 
            background-size: cover; 
            background-position: center;
            color: white; 
            padding: 150px 0;
        }
        .intro-promo h2 { font-size: 2.5rem; font-style: italic; margin-bottom: 10px; }
        .intro-promo span { display: block; margin-bottom: 20px; font-size: 0.9rem; letter-spacing: 2px; }

        .quote { background: white; padding: 100px 15%; }
        .quote h3 { font-size: 1.8rem; font-style: italic; color: #555; margin-bottom: 20px; line-height: 1.5; }
        .quote p { font-size: 0.9rem; text-align: right; margin-top: 20px; border-top: 1px solid #ddd; display: inline-block; padding-top: 10px; }

        .team { background: var(--secondary-bg); }
        .team h2 { font-size: 2rem; margin-bottom: 60px; font-style: italic; }
        .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; }
        .team-member img { width: 150px; height: 150px; border-radius: 50%; object-fit: cover; margin-bottom: 20px; }
        .team-member h4 { font-size: 1.1rem; margin-bottom: 5px; }
        .team-member span { font-size: 0.8rem; text-transform: uppercase; color: #888; display: block; margin-bottom: 15px; }

        /* --- Teacher Page 樣式 --- */
        .teachers-page-wrapper { padding-top: 120px; background-color: #fff; }
        .teacher-section { padding: 80px 10%; max-width: 900px; margin: 0 auto; text-align: center; border-bottom: 1px solid #eee; }
        .teacher-section:last-child { border-bottom: none; }
        .teacher-img-large { width: 300px; height: 300px; border-radius: 50%; object-fit: cover; margin-bottom: 40px; box-shadow: 0 10px 25px rgba(0,0,0,0.08); }
        .teacher-name-large { font-size: 2.5rem; font-style: italic; margin-bottom: 10px; color: #333; }
        .teacher-desc-container { max-width: 700px; margin: 0 auto; }
        .teacher-role { font-size: 0.9rem; text-transform: uppercase; letter-spacing: 2px; color: #333; margin-bottom: 30px; display: block; }
        .teacher-bio { font-size: 1rem; color: #666; line-height: 1.9; margin-bottom: 40px; }
        .teacher-email { font-size: 0.9rem; color: #888; }

        /* --- Classes Page 樣式 --- */
        .classes-wrapper { padding: 120px 10% 80px; background: #fff; text-align: center; }
        .class-title-main { font-size: 3.5rem; font-style: italic; margin-bottom: 30px; color: #333; }
        .class-desc-main { max-width: 800px; margin: 0 auto 60px; color: #666; font-size: 1rem; line-height: 1.8; }
        .class-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; text-align: left; }
        .class-card { background: #fff; border: 1px solid #eee; display: flex; flex-direction: column; transition: 0.3s; }
        .class-card:hover { box-shadow: 0 10px 30px rgba(0,0,0,0.05); transform: translateY(-5px); }
        .class-img { width: 100%; height: 250px; object-fit: cover; }
        .class-content { padding: 30px; display: flex; flex-direction: column; flex-grow: 1; }
        .class-name { font-size: 1.4rem; font-weight: 400; margin-bottom: 20px; font-family: var(--body-font); }
        .class-divider { width: 50px; height: 1px; background: #ddd; margin-bottom: 20px; }
        .class-info-row { font-size: 0.9rem; color: #555; margin-bottom: 5px; }
        .class-price { font-size: 1rem; margin-top: 10px; margin-bottom: 30px; color: #333; }

        /* --- Pricing Page 樣式 --- */
        .pricing-wrapper { padding: 120px 10% 80px; background: #fff; text-align: center; }
        .pricing-header h1 { font-size: 3.5rem; font-style: italic; margin-bottom: 15px; color: #333; }
        .pricing-header p { font-size: 1rem; color: #666; margin-bottom: 60px; }
        .pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; align-items: start; }
        .pricing-card { background: #fff; border: 1px solid #eee; padding: 50px 30px; text-align: center; position: relative; transition: 0.3s; }
        .pricing-card.highlight { background-color: #f9f9f9; border-color: #eee; }
        .best-value-badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; padding: 5px 15px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; }
        .plan-name { font-size: 1.3rem; color: #333; margin-bottom: 10px; font-family: var(--body-font); }
        .plan-price-block { margin: 20px 0; color: #333; }
        .currency { font-size: 1rem; vertical-align: top; display: inline-block; margin-top: 5px; }
        .amount { font-size: 3.5rem; font-family: var(--body-font); font-weight: 300; line-height: 1; }
        .frequency { display: block; font-size: 0.8rem; color: #888; margin-top: 5px; }
        .plan-desc { font-size: 0.9rem; color: #666; margin: 20px 0; line-height: 1.5; min-height: 40px; }
        .plan-validity { font-size: 0.8rem; color: #333; margin-bottom: 25px; }
        .features-list { margin-top: 40px; border-top: 1px solid #eee; padding-top: 30px; }
        .features-list li { margin-bottom: 15px; font-size: 0.9rem; color: #666; }

        /* --- Contact Page 樣式 --- */
        .contact-wrapper { padding: 120px 10% 80px; background: #fff; text-align: center; }
        .contact-title { font-size: 3.5rem; font-style: italic; margin-bottom: 60px; color: #333; }
        .contact-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 40px; margin-bottom: 80px; }
        .contact-info-card { padding: 30px; background: #fff; border: 1px solid #f0f0f0; transition: all 0.3s ease; }
        .contact-info-card:hover { border-color: #ddd; transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0,0,0,0.05); }
        .contact-icon { font-size: 2rem; color: #333; margin-bottom: 20px; display: inline-block; }
        .contact-subtitle { font-size: 1.3rem; font-style: italic; margin-bottom: 15px; color: #333; }
        .contact-text { font-size: 0.9rem; color: #666; line-height: 1.8; font-family: var(--body-font); }
        .contact-form-container { max-width: 600px; margin: 0 auto; text-align: left; }
        .form-header { text-align: center; margin-bottom: 30px; font-size: 1.5rem; font-style: italic; }
        .form-group { margin-bottom: 20px; }
        .form-group label { display: block; font-size: 0.85rem; margin-bottom: 8px; color: #333; text-transform: uppercase; letter-spacing: 1px; }
        .form-control { width: 100%; padding: 12px; border: 1px solid #ddd; font-family: var(--body-font); font-size: 0.95rem; background: #fafafa; outline: none; transition: 0.3s; }
        .form-control:focus { border-color: #333; background: #fff; }
        textarea.form-control { resize: vertical; min-height: 120px; }

        /* --- 動畫系統 --- */
        .anim-slow-fade { opacity: 0; transition: opacity 2s ease-out; }
        .anim-slow-fade.visible { opacity: 1; }
        .anim-fade-up { opacity: 0; transform: translateY(40px); transition: opacity 1s ease-out, transform 1s ease-out; }
        .anim-fade-up.visible { opacity: 1; transform: translateY(0); }
        .delay-content { transition-delay: 0.2s; }
        .delay-last { transition-delay: 1.2s; } 
        .anim-img { transition: opacity 1.2s; }
        .anim-title { transition: opacity 1.2s; transition-delay: 0.3s; }
        .anim-desc { transform: translateY(-30px); transition: opacity 1s, transform 1s; transition-delay: 0.6s; }
        .anim-email { transform: translateY(30px); transition: opacity 1s, transform 1s; transition-delay: 0.9s; }
        .teacher-section.visible .anim-img { opacity: 1; }
        .teacher-section.visible .anim-title { opacity: 1; }
        .teacher-section.visible .anim-desc { opacity: 1; transform: translateY(0); }
        .teacher-section.visible .anim-email { opacity: 1; transform: translateY(0); }
        .reveal-text { opacity: 0; transform: translateY(50px); transition: all 1s ease-out; }
        .reveal-text.active { opacity: 1; transform: translateY(0); }


        /* --- 10. 響應式微調 (包含 iOS Fix) --- */
        @media (max-width: 768px) {
            .social-sidebar, .desktop-icons { display: none; }
            /* 修改：調整 Grid，讓左側區域自動調整寬度以容納兩個圖示 */
            nav { display: grid; grid-template-columns: auto 1fr auto; padding: 10px 20px; height: 70px; }
            .logo-container { display: flex; flex-direction: column; align-items: center; justify-content: center; }
            
            /* 修改：顯示左側圖示區塊並使用 flex 排列 */
            .mobile-toggle, .mobile-left-icons { display: flex; } 
            
            .mobile-left-icons { text-align: left; } 
            .mobile-toggle { text-align: right; justify-content: flex-end; align-items: center;}
            
            .nav-links { display: none; position: absolute; top: 70px; left: 0; width: 100%; background: white; flex-direction: column; padding: 20px 0; text-align: center; gap: 20px; box-shadow: 0 10px 15px rgba(0,0,0,0.05); border-top: 1px solid #eee; }
            .nav-links.active { display: flex; animation: slideDown 0.3s ease-out forwards; }
            
            /* Page Specific Mobile Adjustments */
            .pricing-wrapper, .classes-wrapper, .contact-wrapper { padding: 100px 5% 50px; }
            .pricing-header h1, .class-title-main, .contact-title { font-size: 2.2rem; }
            .amount { font-size: 3rem; }
            
            .class-grid, .contact-info-grid { grid-template-columns: 1fr; }
            .btn-black { width: 100%; text-align: center; }
            .teacher-img-large { width: 200px; height: 200px; }
            .teacher-name-large { font-size: 2rem; }
            .teacher-section { padding: 60px 5%; }

            /* --- iOS Background Fix --- */
            .intro-promo { background-attachment: scroll; }

            /* --- Slogan Mobile 調整 --- */
            .hero {
                height: 65vh; /* 約佔螢幕 65% */
                min-height: 500px; /* 保持最小高度以免文字被切掉 */
            }
            .hero h1 {
                font-size: 2rem; 
                line-height: 1.3;
                text-align: center; 
            }
        }

        @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
    </style>