/* ===== 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. 防止選單在載入時跳動 */
.site-header,
.main-navigation {
    min-height: 60px;
}

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

/* 6. 為 Hero 區塊保留空間 */
.hero,
.fc-title-hero,
.fc-hero {
    min-height: 300px;
}

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

/* 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. 強制重置滾動和滑塊按鈕樣式，防止變形 */
.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;
}