/*!
Theme Name:     Yuki
Theme URI:      https://www.wpmoose.com/themes/yuki-theme
Description:    Yuki is a modern and highly customizable multipurpose WordPress theme. It has powerful Header Builder, Footer Builder and Homepage Builder to fully customize your website. You can build any kind of websites, like blog, business, portfolio, WooCommerce storefronts etc. It fits bloggers, editors, online magazines, newspaper, news portals, content publishers, creative business, small businesses, startups and freelancers. This theme is responsive, translation ready and more.
Author:         WP Moose
Author URI:     https://www.wpmoose.com
License:        GNU General Public License v2 or later
License URI:    http://www.gnu.org/licenses/gpl-2.0.html
Version: 1.4.12
Tested up to: 6.8
Requires PHP: 7.4
Text Domain: yuki
Tags: news, blog, portfolio, grid-layout, one-column, two-columns, three-columns, four-columns, left-sidebar, right-sidebar, block-styles, custom-background, custom-colors, custom-header, custom-logo, custom-menu, editor-style, featured-image-header, featured-images, footer-widgets, full-width-template, rtl-language-support, sticky-post, threaded-comments, theme-options, translation-ready, wide-blocks

*/

/* ===== PACKAGE CARDS ===== */
.package-cards-section {
    padding: 60px 20px;
    background: transparent;
}
.package-cards-section h2 {
    text-align: center;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}
.package-cards-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 40px;
    font-size: 1.1em;
}
.package-cards-container {
    display: flex;
    justify-content: center;
    gap: 24px;
    max-width: 1000px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.package-card {
    background: #fff;
    border-radius: 16px;
    padding: 32px 28px;
    width: 300px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    overflow: hidden;
}
.package-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(205, 144, 126, 0.2);
}
.package-card.featured {
    border: 2px solid #CD907E;
}
.package-card.featured::before {
    content: "熱門";
    position: absolute;
    top: 10px;
    right: -45px;
    background: #CD907E;
    color: #fff;
    padding: 6px 0; width: 180px;
    font-size: 0.8em;
    font-weight: 600;
    transform: rotate(45deg);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    text-align: center;
}
.package-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #CD907E 0%, #e8b4a4 100%);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.package-icon svg {
    width: 32px;
    height: 32px;
    fill: #fff;
}
.package-card h3 {
    font-size: 1.4em;
    color: #333;
    margin: 0 0 8px 0;
    font-weight: 700;
}
.package-card .package-subtitle {
    color: #CD907E;
    font-size: 0.95em;
    font-weight: 600;
    margin-bottom: 16px;
}
.package-card .package-features {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
}
.package-card .package-features li {
    padding: 8px 0;
    color: #555;
    font-size: 0.95em;
    border-bottom: 1px solid #f0ebe6;
    display: flex;
    align-items: center;
    gap: 8px;
}
.package-card .package-features li:last-child {
    border-bottom: none;
}
.package-card .package-features li::before {
    content: "✓";
    color: #CD907E;
    font-weight: bold;
}
.package-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
    margin-bottom: 20px;
}
.package-price .currency {
    font-size: 1em;
    color: #666;
}
.package-price .amount {
    font-size: 2em;
    font-weight: 700;
    color: #333;
}
.package-cards-section a.package-btn {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: #CD907E;
    color: #fff !important;
    text-align: center;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 1em;
    box-sizing: border-box;
}
.package-cards-section a.package-btn:hover {
    background: #b8806f;
}
.package-cards-section a.package-btn.outline {
    background: transparent;
    border: 2px solid #CD907E;
    color: #CD907E !important;
}
.package-cards-section a.package-btn.outline:hover {
    background: #CD907E;
    color: #fff !important;
}
.package-card-consult {
    background: linear-gradient(135deg, #f8f5f2 0%, #f0ebe6 100%);
    border: 2px dashed #ddd;
}
.package-card-consult .package-icon {
    background: linear-gradient(135deg, #666 0%, #888 100%);
}
@media (max-width: 768px) {
    .package-cards-section { padding: 40px 16px; }
    .package-cards-container { flex-direction: column; align-items: center; }
    .package-card { width: 100%; max-width: 340px; }
}

/* ===== FAQ SECTION ===== */
.faq-section {
    padding: 60px 20px;
    background: transparent;
    max-width: 800px;
    margin: 0 auto;
}
.faq-section h2 {
    text-align: center;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 40px;
    font-weight: 700;
}
.faq-item {
    border-bottom: 1px solid #e8e0d8;
    margin-bottom: 0;
}
.faq-item:last-child {
    border-bottom: none;
}
.faq-question {
    width: 100%;
    background: none;
    border: none;
    padding: 20px 40px 20px 0;
    text-align: left;
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    position: relative;
    display: block;
}
.faq-question::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    color: #CD907E;
    font-weight: 300;
    transition: transform 0.3s ease;
}
.faq-item.active .faq-question::after {
    content: "−";
}
.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 0 0 0;
}
.faq-item.active .faq-answer {
    max-height: 300px;
    padding: 0 0 20px 0;
}
.faq-answer p {
    color: #555;
    line-height: 1.8;
    margin: 0;
    font-size: 1em;
}
@media (max-width: 768px) {
    .faq-section { padding: 40px 16px; }
    .faq-question { font-size: 1em; padding: 16px 32px 16px 0; }
}
/* ===== LATEST ARTICLES SECTION ===== */
.latest-articles-section {
    padding: 60px 20px;
    background: transparent;
    max-width: 1200px;
    margin: 0 auto;
}
.latest-articles-section h2 {
    text-align: center;
    font-size: 1.8em;
    color: #333;
    margin-bottom: 10px;
    font-weight: 700;
}
.latest-articles-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 30px;
    font-size: 1.1em;
}
.articles-scroll-container {
    overflow-x: auto;
    padding-bottom: 20px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: #CD907E #f0ebe6;
}
.articles-scroll-container::-webkit-scrollbar {
    height: 8px;
}
.articles-scroll-container::-webkit-scrollbar-track {
    background: #f0ebe6;
    border-radius: 4px;
}
.articles-scroll-container::-webkit-scrollbar-thumb {
    background: #CD907E;
    border-radius: 4px;
}
.articles-row {
    display: flex;
    gap: 20px;
    padding: 10px 5px;
    width: max-content;
}
.article-card {
    width: 280px;
    flex-shrink: 0;
    background: #faf8f6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.article-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(205, 144, 126, 0.15);
}
.article-card-image {
    width: 100%;
    height: 160px;
    object-fit: cover;
    background: linear-gradient(135deg, #e8e0d8 0%, #d4c8bc 100%);
    display: block;
    margin: 0;
}
.article-card-content {
    padding: 10px 12px;
}
.article-card-title {
    font-size: 0.95em;
    font-weight: 600;
    color: #333;
    line-height: 1.5;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.article-card-link {
    text-decoration: none;
    color: inherit;
}
.article-card-link:hover .article-card-title {
    color: #CD907E;
}
@media (max-width: 768px) {
    .latest-articles-section {
    padding: 60px 20px;
    background: transparent;
    max-width: 1200px;
    margin: 0 auto;
}
    .latest-articles-section { padding: 40px 16px; }
    .article-card { width: 250px; }
    .article-card-image { height: 140px; }
}

.article-card img.article-card-image {
    margin-bottom: 0 !important;
    padding: 0 !important;
    border: none !important;
}
.article-card .article-card-content {
    margin-top: 0 !important;
    padding-top: 8px !important;
}

/* ===== COUNTDOWN TIMER ===== */
.countdown-inline {
    background: #f9f7f5;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 16px;
    text-align: center;
    border: 1px solid #ebe5df;
}
.countdown-numbers {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 6px;
}
.cd-item {
    text-align: center;
}
.cd-num {
    font-size: 1.3em;
    font-weight: 700;
    color: #CD907E;
}
.cd-label {
    font-size: 0.7em;
    color: #999;
    margin-left: 2px;
}
.countdown-title {
    color: #666;
    font-size: 0.75em;
    font-weight: 500;
}
.countdown-title span {
    color: #CD907E;
    font-weight: 600;
}

/* 衛教文章列表卡片樣式 */
.card-list .card-wrapper {
    flex: 0 0 calc(33.333% - 16px) !important;
    max-width: calc(33.333% - 16px) !important;
}
@media (max-width: 768px) {
    .card-list .card-wrapper {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}
@media (max-width: 480px) {
    .card-list .card-wrapper {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}
.card-thumbnail {
    width: 100%;
    height: 180px !important;
    overflow: hidden;
}
.card-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}
.card-list .card {
    display: flex;
    flex-direction: column;
    height: 100%;
}
.card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
}


/* ===== CATEGORY PAGE: 4-COLUMN GRID with 16:9 THUMBNAILS ===== */
.archive .card-list,
.category .card-list {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.archive .card-list .card-wrapper,
.category .card-list .card-wrapper {
    flex: 0 0 calc(25% - 12px) !important;
    max-width: calc(25% - 12px) !important;
}

.archive .card-thumbnail,
.category .card-thumbnail {
    width: 100%;
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
    overflow: hidden;
}

.archive .card-thumbnail img,
.category .card-thumbnail img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center;
}

/* 縮小標題字體適應6欄 */
.archive .card-title,
.category .card-title {
    font-size: 0.85em !important;
    line-height: 1.4 !important;
}

/* 平板 4 欄 */
@media (max-width: 1200px) {
    .archive .card-list .card-wrapper,
    .category .card-list .card-wrapper {
        flex: 0 0 calc(25% - 12px) !important;
        max-width: calc(25% - 12px) !important;
    }
}

/* 小平板 3 欄 */
@media (max-width: 900px) {
    .archive .card-list .card-wrapper,
    .category .card-list .card-wrapper {
        flex: 0 0 calc(33.333% - 11px) !important;
        max-width: calc(33.333% - 11px) !important;
    }
}

/* 手機 2 欄 */
@media (max-width: 600px) {
    .archive .card-list .card-wrapper,
    .category .card-list .card-wrapper {
        flex: 0 0 calc(50% - 8px) !important;
        max-width: calc(50% - 8px) !important;
    }
}


/* 網誌表格樣式修正 */
table th,
table td {
    padding: 12px 16px !important;
}
table th:last-child {
    padding-right: 24px !important;
    text-align: center !important;
}
table thead th {
    text-align: center !important;
}


    .yuki-article-content h3,
    .entry-content h3,
    h3.wp-block-heading {
        font-size: 1.25rem !important;
    }
}

/* 文章 H3 標題放大 - 最高優先級 */
body .yuki-article-content h3,
body .entry-content h3,
body article h3,
body h3.wp-block-heading {
    font-size: 1.35rem !important;
    line-height: 1.4 !important;
}
@media (max-width: 768px) {
    body .yuki-article-content h3,
    body .entry-content h3,
    body article h3,
    body h3.wp-block-heading {
        font-size: 1.25rem !important;
    }
}


/* ===== TABLE TEXT SIZE FIX ===== */
.yuki-article-content table td,
.yuki-article-content table th,
.entry-content table td,
.entry-content table th,
article table td,
article table th {
    font-size: 0.9rem !important;
    line-height: 1.6 !important;
    color: var(--yuki-accent-color, #4a5568) !important;
}
.yuki-article-content table td *,
.entry-content table td *,
article table td * {
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
}


/* ===== RELATED POSTS BACKGROUND (match disclaimer) ===== */
.wellness-related-posts {
    background: #f0e0dc !important;
    padding: 24px !important;
    border-radius: 8px !important;
    margin-top: 24px !important;
}
.wellness-related-posts .card {
    background-color: #fff !important;
}



/* Fix package icon sizing + countdown layout (home page) */
.package-icon {width:60px;height:60px;margin:0 auto 12px;display:flex;align-items:center;justify-content:center;border-radius:12px;background:#cfa08d;}
.package-icon svg {width:32px;height:32px;display:block;}
.countdown-numbers {display:flex;justify-content:center;gap:12px;flex-wrap:nowrap;}
.cd-item {display:flex;align-items:baseline;gap:2px;}