/* ===================================================
   1. 導覽列選單 RWD 優化 ( Blocksy 滑出區域與選單校正 )
   =================================================== */

/* 1-1. 💻 視窗縮小/平板時：選單字級與間距微調 */
@media (max-width: 1200px) {
    .site-header nav,
    header nav ul {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
    }

    header nav ul li,
    .site-header .menu-item,
    header nav a,
    .menu-item a {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 2px !important;
        padding-right: 2px !important;
        font-size: 13px !important;
        white-space: nowrap !important;
    }

    .menu-en {
        margin-left: 3px !important;
        font-size: 10px !important;
    }

    header [class*="button"],
    header .ct-header-call-to-action {
        margin-left: 10px !important;
        padding-left: 10px !important;
        padding-right: 10px !important;
        font-size: 12px !important;
    }
}

/* 1-2. 📱 手機版專屬滑出區域 (Off-Canvas) 排版與字級強制放大 */
@media (max-width: 1024px) {

    /* 1. 外層容器與白框調整 */
    [data-id="offcanvas"],
    .ct-offcanvas-container,
    .ct-offcanvas {
        max-width: 82vw !important;
        right: 0 !important;
        left: auto !important;
        box-sizing: border-box !important;
    }

    .ct-offcanvas .ct-panel-content,
    .ct-offcanvas [data-type="side"],
    .ct-drawer-canvas {
        padding-top: 50px !important;
        padding-bottom: 40px !important;
        box-sizing: border-box !important;
    }

    /* 🎯 關閉按鈕（叉叉）定位 */
    .ct-offcanvas .ct-toggle-close,
    .ct-offcanvas [data-ui*="close"],
    .ct-toggle-close[data-type],
    [data-id="offcanvas"] .ct-toggle-close {
        position: absolute !important;
        top: 15px !important;
        right: 15px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important; /* 強制關閉 JS 位移計算 */
        margin: 0 !important;
        z-index: 999999 !important;
    }

    /* 2. 頂部 Logo 與標題間距 */
    .ct-offcanvas .site-branding,
    .ct-offcanvas [data-id="logo"] {
        margin-bottom: 25px !important;
        padding-left: 20px !important;
    }

    /* 3. 選單容器基礎結構排版 */
    .ct-offcanvas nav,
    .ct-offcanvas ul,
    .ct-offcanvas li {
        text-align: left !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        width: 100% !important;
    }

    .ct-offcanvas nav li,
    .ct-offcanvas .menu-item {
        margin-bottom: 6px !important;
    }

    /* ---------------------------------------------------
       🎯 關鍵修正：Blocksy 專屬選單文字暴力放大 (22px)
       --------------------------------------------------- */
    /* (1) 重設 Blocksy 內建選單 CSS 變數 */
    .ct-offcanvas [data-id="mobile-menu"],
    [data-id="offcanvas"] nav,
    .ct-offcanvas {
        --theme-menu-font-size: 22px !important;
        --theme-font-size: 22px !important;
    }

    /* (2) 直擊最深層連結，強制注入放大與加粗 */
    .ct-offcanvas nav li a,
    .ct-offcanvas .menu-item a,
    [data-device="mobile"] .ct-offcanvas a,
    .ct-offcanvas .ct-menu-link,
    .ct-offcanvas [data-item-id] {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        text-align: left !important;
        padding: 12px 20px !important;
        width: 100% !important;
        font-size: 22px !important;    /* 強制放大至 22px */
        font-weight: 700 !important;   /* 強制加粗 */
        line-height: 1.4 !important;
        box-sizing: border-box !important;
    }

    /* (3) 中文文字核心防護 */
    .ct-offcanvas nav a span:not(.menu-en) {
        font-size: 22px !important;
        font-weight: 700 !important;
    }

    /* (4) 英文副標題保持微調（不跟著變成 22px） */
    .ct-offcanvas .menu-en,
    .ct-offcanvas .ct-menu-link .menu-en {
        margin-left: 8px !important;
        font-size: 13px !important;
        font-weight: 400 !important;
        opacity: 0.75 !important;
        display: inline-block !important;
    }

    /* 4. 下方「預約諮詢」按鈕與社群 Icon 間距鬆開 */
    .ct-offcanvas [class*="button"],
    .ct-offcanvas .ct-header-call-to-action {
        margin-top: 25px !important;
        margin-bottom: 20px !important;
        margin-left: 20px !important;
    }

    .ct-offcanvas [data-id="socials"],
    .ct-offcanvas .ct-socials {
        margin-top: 15px !important;
        padding-left: 20px !important;
    }
}


/* ===================================================
   2. 搜尋結果頁面（Search Results）卡片與 Hover 動畫
   =================================================== */

/* 2-1. 卡片預設樣式（加入平滑動畫轉場 transition） */
.search-results article,
.search-results .post,
.search.search-results .type-post,
.search-results .ast-article-post {
    background-color: #ffffff !important;
    border: 1px solid #e0f2f1 !important; /* 淡綠色外框 */
    border-radius: 12px !important;       /* 圓角 */
    padding: 24px !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
    margin-bottom: 20px !important;
    
    /* 動畫核心：控制浮動與陰影的平滑度 */
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease !important;
}

/* 2-2. 滑鼠懸浮 (Hover) 時的跳動與加深陰影效果 */
.search-results article:hover,
.search-results .post:hover,
.search.search-results .type-post:hover,
.search-results .ast-article-post:hover {
    transform: translateY(-6px) !important; /* 向上微浮 6px */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08) !important; /* 加深立體陰影 */
    cursor: pointer;
}

/* 2-3. 修正搜尋結果頁面的文字顏色與標題 */
.search-results article h2,
.search-results article h2 a,
.search-results article .entry-title,
.search-results article .entry-title a,
.search-results h1,
.search-results .page-title {
    color: #2c3e50 !important;
    font-weight: bold !important;
    text-decoration: none !important;
}

/* 2-4. 修正內文摘要與 meta 資訊顏色 */
.search-results article p,
.search-results article .entry-summary,
.search-results article .entry-meta,
.search-results article .entry-meta * {
    color: #555555 !important;
}

/* 2-5. 修正「閱讀全文」按鈕/連結顏色 */
.search-results article a.read-more,
.search-results article .more-link,
.search-results article a {
    color: #4db6ac !important;
    font-weight: 500 !important;
}


/* ===================================================
   3. 搜尋結果頁面 - 返回專題文章實體按鈕樣式
   =================================================== */
.hl-back-btn {
    display: inline-block !important;
    margin-top: 15px !important;    /* 向下推開與上方選單/Header的距離 */
    margin-bottom: 20px !important; /* 與下方大標題保持間隔 */
    padding: 8px 20px !important;
    background-color: #ffffff !important;
    color: #4db6ac !important;
    border: 1px solid #4db6ac !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05) !important;
}

.hl-back-btn:hover {
    background-color: #4db6ac !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(77, 182, 172, 0.25) !important;
}

/* 📱 手機版專屬優化 (螢幕寬度 < 768px) */
@media (max-width: 768px) {
    /* 修正搜尋頁頂部容器，拉開與上方 Header 的安全距離 */
    .search-results .site-main,
    .search-results #main,
    .search-results .content-area {
        padding-top: 25px !important;
    }

    /* 讓按鈕在手機上獨立一列、靠左對齊，不再擠壓標題 */
    .hl-back-btn {
        display: table !important; /* 確保獨立成列且寬度自適應 */
        margin-top: 10px !important;
        margin-bottom: 15px !important;
        margin-left: 0 !important; /* 靠左邊界齊平 */
    }
}


/* ===================================================
   4. 頁尾訂閱區塊間距修正 (支援 MailPoet 元素)
   =================================================== */

/* 4-1. 💻 電腦版：收緊訂閱標題與輸入框之間的空隙 */
footer form,
.mailpoet_form,
.fcal_wrap,
[class*="subscription"],
[class*="newsletter"] {
    margin-top: 0 !important;
    padding-top: 0 !important;
}

/* 4-2. 📱 手機版專屬 (螢幕寬度 < 768px) */
@media (max-width: 768px) {

    /* 解決頂部 Header 穿透/重疊文字的問題 */
    header,
    #header,
    .site-header,
    [data-device="mobile"] {
        background-color: #ffffff !important;
        z-index: 9999 !important;
    }

    /* 縮小「服務時間」與「聯絡方式」等普通標題的上下空隙 */
    .site-footer h2, .site-footer h3, .site-footer h4,
    footer h2, footer h3, footer h4 {
        margin-top: 10px !important;
        margin-bottom: 8px !important;
    }

    /* 手機版：只在訂閱表單整體「上方」推開與 Email 的距離 */
    footer form,
    .widget_mailpoet_form,
    .fcal_wrap,
    [class*="subscription"] {
        margin-top: 35px !important;
    }

    /* 手機版：修正訂閱表單欄位偏左問題 */
    .site-footer .wp-block-columns,
    .site-footer .wp-block-column,
    footer .wp-block-columns,
    footer .wp-block-column,
    .mailpoet_form,
    .fcal_wrap,
    [class*="subscription"] {
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* 表單輸入框與按鈕 100% 滿版齊左 */
    .site-footer input[type="text"],
    .site-footer input[type="email"],
    .site-footer button,
    .site-footer input[type="submit"],
    .mailpoet_paragraph input {
        width: 100% !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* 手機版：單選/核取選項垂直排列 */
    .wpcf7-list-item,
    .form-check {
        display: block !important;
    }
}


/* ===================================================
   5. 預約諮詢表單 - 性別單選按鈕對齊修正
   =================================================== */

/* 修正單選按鈕外層容器的左側縮排，使其與一般輸入框對齊 */
.wpcf7-radio,
.wpcf7-checkbox,
form .radio,
form .checkbox,
.mailpoet_radio_label,
.mailpoet_checkbox_label {
    margin-left: 10px !important; /* 向右推 10px，與上方的標題/框內文字齊平 */
}

/* 確保單選按鈕選項文字間距舒適 */
.wpcf7-list-item,
.form-check {
    margin-bottom: 8px !important;
}