/* ===== CLS Prevention Core ===== */

/* 1. Lazy loading 圖片過渡效果 */
img.lazyload,
img.lazyloading {
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

img.lazyloaded {
    opacity: 1;
}

/* 2. 防止 iframe 造成 CLS */
iframe {
    max-width: 100%;
}

/* 3. 為影片嵌入保留 16:9 空間 - 僅針對有 iframe 的嵌入區塊 */
.wp-block-embed.is-type-video .wp-block-embed__wrapper,
.wp-block-embed-youtube .wp-block-embed__wrapper,
.wp-block-embed-vimeo .wp-block-embed__wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    height: 0;
    overflow: hidden;
}

.wp-block-embed.is-type-video iframe,
.wp-block-embed-youtube iframe,
.wp-block-embed-vimeo iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }
    100% {
        background-position: 200% 0;
    }
}

/* 4. 僅保留舊 fixed header 流程的預留空間；Menu V8 sticky 模式不需要 body padding */
body.sticky-header-active:not(.sticky-header-mode-enabled) {
    padding-top: var(--v8-sticky-header-height, var(--menu-v8-header-height-sticky, 56px)) !important;
}

@media (max-width: 991px) {
    body.sticky-header-active:not(.sticky-header-mode-enabled) {
        padding-top: var(--v8-sticky-header-height, var(--menu-v8-header-height-sticky, 56px)) !important;
    }
}

/* 4.2 Main layout footprint should be stable before full page CSS finishes loading */
.main-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0;
    min-width: 0;
}

#postshow-a,
#content-main,
.entry-content {
    min-width: 0;
}

body.single.hd-layout-customizable.hd-lm-ab .main-layout-wrapper {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

body.single.hd-layout-customizable {
    --hd-ab-container-width-active: var(--hd-ab-container-width, 1280px);
}

body.single.hd-layout-customizable.hd-abw-1000 { --hd-ab-container-width: 1000px; }
body.single.hd-layout-customizable.hd-abw-1100 { --hd-ab-container-width: 1100px; }
body.single.hd-layout-customizable.hd-abw-1200 { --hd-ab-container-width: 1200px; }
body.single.hd-layout-customizable.hd-abw-1280 { --hd-ab-container-width: 1280px; }
body.single.hd-layout-customizable.hd-abw-1360 { --hd-ab-container-width: 1360px; }
body.single.hd-layout-customizable.hd-abw-1440 { --hd-ab-container-width: 1440px; }
body.single.hd-layout-customizable.hd-abw-1600 { --hd-ab-container-width: 1600px; }
body.single.hd-layout-customizable.hd-sw-260 { --hd-sidebar-width: 260px; }
body.single.hd-layout-customizable.hd-sw-280 { --hd-sidebar-width: 280px; }
body.single.hd-layout-customizable.hd-sw-300 { --hd-sidebar-width: 300px; }
body.single.hd-layout-customizable.hd-sw-330 { --hd-sidebar-width: 330px; }
body.single.hd-layout-customizable.hd-sw-360 { --hd-sidebar-width: 360px; }
body.single.hd-layout-customizable.hd-sw-400 { --hd-sidebar-width: 400px; }
body.single.hd-layout-customizable.hd-sg-0 { --hd-sidebar-gap: 0px; }
body.single.hd-layout-customizable.hd-sg-4 { --hd-sidebar-gap: 4px; }
body.single.hd-layout-customizable.hd-sg-8 { --hd-sidebar-gap: 8px; }
body.single.hd-layout-customizable.hd-sg-12 { --hd-sidebar-gap: 12px; }
body.single.hd-layout-customizable.hd-sg-18 { --hd-sidebar-gap: 18px; }
body.single.hd-layout-customizable.hd-sg-20 { --hd-sidebar-gap: 20px; }
body.single.hd-layout-customizable.hd-sg-24 { --hd-sidebar-gap: 24px; }
body.single.hd-layout-customizable.hd-sg-32 { --hd-sidebar-gap: 32px; }

body.single.hd-layout-customizable.hd-lm-ab .main-layout-wrapper > #postshow-a,
body.single.hd-layout-customizable.hd-lm-ab .main-layout-wrapper > #content-main {
    flex: 1 1 0%;
    min-width: 0;
}

body.single.hd-layout-customizable.hd-lm-ab .main-layout-wrapper > #postshow-b {
    flex: 0 0 var(--hd-sidebar-width, 280px);
    width: var(--hd-sidebar-width, 280px);
    margin-left: var(--hd-sidebar-gap, 0px);
}

@media (max-width: 768px) {
    body.single .main-layout-wrapper {
        flex-direction: column;
    }

    body.single #postshow-a,
    body.single #postshow-b {
        flex-basis: auto;
        width: calc(100% - 30px);
        margin: 0 auto;
    }
}

/* 5. Fix for Lightbox Images - Override global CLS rules */
#nsy-lightbox-overlay img {
    aspect-ratio: auto !important;
    object-fit: contain !important;
}

/* 6. 為 Hero 區塊保留空間 */
.hero,
.fc-title-hero,
.fc-hero,
.top-block-container,
.slider-section {
    min-height: 200px;
}

/* 6.0 Archive / taxonomy term nav reserve its visual shell before enhanced CSS paints */
.listing-term-nav {
    position: relative;
    display: block;
    box-sizing: border-box;
    min-height: 118px;
}

.listing-term-nav::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 92px;
    height: 92px;
    pointer-events: none;
}

.listing-term-nav__header {
    min-height: 24px;
}

.listing-term-nav__scroller {
    min-height: 44px;
}

.listing-term-nav__list {
    min-height: 38px;
}

@media (max-width: 479px) {
    .listing-term-nav {
        min-height: 110px;
    }

    .listing-term-nav__scroller {
        min-height: 40px;
    }

    .listing-term-nav__list {
        min-height: 34px;
    }
}

/* 6.05 Lazy card shells reserve space before Swiper / runtime enhancements settle */
.fc-lazy-card-container {
    min-width: 0;
}

.fc-lazy-card__item {
    box-sizing: border-box;
    min-height: var(--cls-lazy-card-item-min-height, 240px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-lazy-card-item-min-height, 240px);
}

.fc-lazy-card__link {
    display: flex;
    text-decoration: none;
    color: inherit;
    width: 100%;
    height: 100%;
}

.fc-lazy-card--horizontal .fc-lazy-card__link,
.fc-lazy-card--left .fc-lazy-card__link,
.fc-lazy-card--img-left .fc-lazy-card__link {
    flex-direction: row;
    align-items: stretch;
}

.fc-lazy-card--vertical .fc-lazy-card__link,
.fc-lazy-card--grid .fc-lazy-card__link,
.fc-lazy-card--img-top .fc-lazy-card__link {
    flex-direction: column;
}

.fc-lazy-card__media {
    aspect-ratio: var(--fc-lazy-ratio, 16 / 9);
    background: #f3f4f6;
    overflow: hidden;
    flex-shrink: 0;
}

.fc-lazy-card--horizontal .fc-lazy-card__media,
.fc-lazy-card--left .fc-lazy-card__media,
.fc-lazy-card--img-left .fc-lazy-card__media {
    width: var(--fc-lazy-img-width, 40%);
    min-width: 100px;
}

.fc-lazy-card__content {
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: center;
    flex-grow: 1;
    min-width: 0;
    padding: var(--fc-lazy-v-gap, 16px) 20px;
}

.fc-lazy-card__title {
    --fc-lazy-title-min-height: 2.8em;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--fc-lazy-title-lines, 2);
    overflow: hidden;
    line-height: 1.4;
    min-height: var(--fc-lazy-title-min-height, 2.8em);
    margin: 0 0 8px;
}

.fc-lazy-card--carousel .fc-lazy-card__swiper {
    min-height: var(--cls-lazy-card-swiper-min-height, 100px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-lazy-card-swiper-min-height, 100px);
}

.fc-lazy-card--carousel.fc-lazy-card--has-header-nav .fc-lazy-card__swiper {
    min-height: calc(var(--cls-lazy-card-swiper-min-height, 100px) + var(--fc-swiper-pt, 0px));
}

.widget-area-wrapper:has(.fc-lazy-card--carousel),
[data-cls-widget-area]:has(.fc-lazy-card--carousel) {
    min-height: var(--cls-lazy-card-widget-min-height, 100px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-lazy-card-widget-min-height, 100px);
}

/* 6.1 Postcard thumbnails reserve space to reduce CLS */
.main-layout-wrapper .postcard_thumbnail {
    min-height: var(--cls-postcard-thumb-min-height, 150px);
    background: var(--fc-loading-bg, #f5f5f5);
    aspect-ratio: 4 / 3;
}
.main-layout-wrapper .postcard_thumbnail img {
    height: 100% !important;
}
.main-layout-wrapper .postcard--top-image .postcard_thumbnail {
    aspect-ratio: 1.6;
}
.main-layout-wrapper .hd-layout-grid .postcard_thumbnail,
.main-layout-wrapper .hd-layout-card .postcard_thumbnail {
    min-height: var(--cls-postcard-thumb-grid-height, 200px);
}

.main-layout-wrapper .hd-layout-list .postcard.ex {
    min-height: var(--cls-postcard-min-height, 170px);
}

.main-layout-wrapper .postcard.ex {
    contain: layout style;
    content-visibility: auto;
    contain-intrinsic-size: auto var(--cls-postcard-intrinsic-height, 220px);
}

/* 6.2 Sticky widget slots reserve their natural footprint before JS pins them */
.sticky-widget[id^="comprehensive_article_widget-"],
.sticky-widget.widget_comprehensive_article_widget {
    min-height: var(--cls-sticky-widget-min-height, 300px);
    contain-intrinsic-size: auto var(--cls-sticky-widget-min-height, 300px);
}

.sticky-widget.homepage-widget.widget_comprehensive_article_widget,
div[id^="comprehensive_article_widget-"].homepage-widget {
    min-height: var(--cls-home-sticky-widget-min-height, 360px);
    contain-intrinsic-size: auto var(--cls-home-sticky-widget-min-height, 360px);
}

.sticky-widget.sidebar-right.widget_comprehensive_article_widget,
section[id^="comprehensive_article_widget-"].sidebar-right {
    min-height: var(--cls-sidebar-sticky-widget-min-height, 320px);
    contain-intrinsic-size: auto var(--cls-sidebar-sticky-widget-min-height, 320px);
}

/* 7. 卡片容器防止 shift */
.card,
.post-card,
.fc-card {
    contain: layout style paint;
}

/* 7.1 Social share / related posts / forms reserve space */
.social-share-wrapper {
    min-height: var(--cls-social-share-min-height, 220px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-social-share-min-height, 220px);
}
.arcs-meta-t2 {
    min-height: var(--cls-single-meta-min-height, 58px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-single-meta-min-height, 58px);
}
.arcs-meta-t2-1 {
    min-height: var(--cls-single-meta-content-min-height, 33px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-single-meta-content-min-height, 33px);
}
.ab-tabs {
    min-height: var(--cls-author-tabs-row-min-height, 48px);
}
.ab-tab-btn {
    min-height: var(--cls-author-tab-min-height, 44px);
    min-width: var(--cls-author-tab-min-width, 72px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-author-tab-min-height, 44px);
}
.ab-tab-btn .post-count {
    min-width: var(--cls-author-tab-count-min-width, 30px);
    display: inline-flex;
    justify-content: center;
}
.hd-related-posts-container.style-noona {
    min-height: var(--cls-related-noona-min-height, 260px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-related-noona-min-height, 260px);
}
.yourforma-info-master {
    min-height: var(--cls-yourforma-min-height, 140px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-yourforma-min-height, 140px);
}
.social-share-image {
    min-height: var(--cls-social-share-image-min-height, 220px);
    contain: layout style;
    contain-intrinsic-size: auto var(--cls-social-share-image-min-height, 220px);
}

/* 7.2 Ad fallback slots reserve space */
.wp-ad-position-fallback {
    /* Outer wrapper removed min-height to allow natural collapse if empty */
}

.wp-ad-single {
    min-height: var(--cls-ad-min-height, 250px);
}

@media (max-width: 768px) {
    .wp-ad-single {
        min-height: var(--cls-ad-min-height-mobile, 200px);
    }
}

/* Smart Collapse: Remove min-height when AdSense fails to load */
.wp-ad-single[data-ad-status="unfilled"] {
    min-height: 0 !important;
    height: 0 !important;
    overflow: hidden;
    margin: 0 !important;
    padding: 0 !important;
}

/* 8. 內容載入骨架屏 */
.content-loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

/* 9. AJAX 分類頁籤預留空間 */
.tabs-content-container,
.tabs-loading {
    min-height: 600px;
    /*background-color: #f9f9f9;*/
}

@media (max-width: 991px) {
    .tabs-content-container,
    .tabs-loading {
        min-height: 400px;
    }
}

/* 10. 強制重置滾動和滑塊按鈕樣式，防止變形 */
.scroll-btn,
button.scroll-btn,
.slider-btn,
button[class*="swiper"],
button[class*="slick"],
.swiper-button-prev,
.swiper-button-next {
    min-height: unset !important;
    min-width: unset !important;
}

/* ===== Skeleton Screens ===== */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #f8f8f8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 4px;
}

.skeleton-text {
    height: 1em;
    margin-bottom: 0.5em;
}

.skeleton-text:last-child {
    width: 80%;
}

.skeleton-heading {
    height: 2em;
    margin-bottom: 1em;
    width: 60%;
}

.skeleton-image {
    aspect-ratio: 16 / 9;
    width: 100%;
}

.skeleton-card {
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.skeleton-post-list {
    display: grid;
    gap: 1.5rem;
}

.skeleton-post-item {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.skeleton-widget {
    min-height: 250px;
    margin-bottom: 2rem;
    padding: 1rem;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
}

.skeleton-menu {
    height: 60px;
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 0 2rem;
}

.skeleton-menu-item {
    height: 1.2em;
    width: 80px;
}

@media (max-width: 768px) {
    .skeleton-post-item {
        grid-template-columns: 1fr;
    }
    .skeleton-menu {
        padding: 0 1rem;
    }
}

/* ===== Font Loading Optimization ===== */

@font-face {
    font-family: 'Noto Sans TC Fallback';
    src: local('Arial'), local('sans-serif');
    size-adjust: 95%;
    ascent-override: 105%;
    descent-override: 35%;
    line-gap-override: 0%;
}

body,
.entry-content {
    font-family: 'Noto Sans TC', 'Noto Sans TC Fallback', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft JhengHei', sans-serif;
}

.wf-loading body {
    opacity: 1;
    visibility: visible;
}