/*
 * Idostory 子主題手機版樣式。
 * 此檔案以 media="(max-width: 991px)" 載入，
 * 以下規則只在 991px 或以下生效。
 */

/* ============================================================
   A. 導覽列高 46px（父主題 55px）
   ============================================================ */
.main-navigation .toggle-menu {
    height: 46px;
    width: 64px;
}

.main-navigation .toggle-menu a {
    height: 42px;
}

.ham {
    top: 20px;
}

/* 捲動時置頂列內的站名：配合 46px 列高 */
.main-navigation.aft-sticky-navigation span.af-mobile-site-title-wrap .site-title {
    font-size: 24px;
    line-height: 46px;
}

/* ============================================================
   B. 手機選單面板：白底深字（父主題深灰底白字）
   開合動畫由父主題 jQuery slideUp/slideDown 控制，
   此處只改外觀，唔碰 display。
   ============================================================ */
.main-navigation .menu .menu-mobile {
    background: #fff;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.main-navigation .menu .menu-mobile li {
    border-top: 1px solid #eee;
}

.main-navigation .menu .menu-mobile li a {
    color: #222;
    padding: 14px 20px;
}

.main-navigation .menu .menu-mobile li.current-menu-item > a {
    color: #28B8B9;
    box-shadow: inset 3px 0 0 #28B8B9;
}

/* ============================================================
   C. 分類頁：圖左文右列表（767px 或以下）
   首頁最新文章維持全幅卡片，唔受影響。
   ============================================================ */
@media (max-width: 767px) {
    body.archive .latest-posts-grid .spotlight-post {
        display: flex;
        gap: 12px;
        align-items: flex-start;
    }

    body.archive .latest-posts-grid .spotlight-post > figure {
        flex: 0 0 40%;
        margin: 0;
    }

    body.archive .latest-posts-grid .spotlight-post > figcaption {
        flex: 1;
        min-width: 0;
        border-top: none;
    }

    /* 列表模式唔顯示摘要 */
    body.archive .latest-posts-grid .full-item-discription {
        display: none;
    }

    body.archive .latest-posts-grid .article-title-1 {
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
}

/* ============================================================
   D. 文章頁手機版：內文邊距及 H2 字級
   ============================================================ */
@media (max-width: 575px) {
    .entry-content {
        padding-left: 20px;
        padding-right: 20px;
    }

    .entry-content h2 {
        font-size: 24px;
    }
}

/* ============================================================
   E. 頁底分享列：置中修正＋預留高度＋回頂掣避讓
   置中規則由 Customizer「附加的 CSS」搬來此處
   （AddToAny 1.8.18 在 WordPress 7.1 下行內 transform
   會被 kses 剝走，見實施文件 Phase 1 執行記錄）。
   ============================================================ */
.a2a_floating_style.a2a_default_style {
    transform: translateX(-50%);
}

/* 預留分享列高度，唔遮頁尾內容 */
body {
    padding-bottom: 56px;
    padding-bottom: calc(56px + env(safe-area-inset-bottom));
}

/* 回頂掣升高，唔好畀分享列遮住 */
#scroll-up {
    bottom: 70px;
}