/*
Theme Name: FYWSS Theme (Tailwind Modernized)
Theme URI: https://www.fywss.edu.hk
Author: Titus C / Modernized by AI
Author URI: https://www.fywss.edu.hk
Description: 現代化中華基督教會方潤華中學官方主題，全面升級支援 WordPress 7.x、PHP 8.3+ 與 Tailwind CSS 響應式切版。
Version: 2.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: fywss
*/

/* ============================================================
   1. Base & Global Reset Settings
   ============================================================ */
html {
    scroll-behavior: smooth;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: "Noto Sans TC", "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #1e293b;
    background-color: #f8fafc;
}

/* 設定標題專用字體：思源宋體 (Noto Serif TC) */
h1, h2, h3, h4, h5, h6, .font-serif {
    font-family: 'Noto Serif TC', "Songti TC", "PMingLiU", serif !important;
    font-weight: 700; /* 設定為粗體，才能展現圖中的大氣感 */
}

/* Fix images overflow */
img, iframe, object, embed {
    max-width: 100%;
    height: auto;
}

/* Custom Scrollbar Styling */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}



/* ============================================================
   3. Custom Animations & Utilities
   ============================================================ */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.animate-fade-in {
    animation: fadeIn 0.25s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Line Clamp Utilities Fallback */
.line-clamp-1 {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* WordPress Alignments */
.aligncenter {
    display: block;
    margin-left: auto;
    margin-right: auto;
}
.alignright {
    float: right;
    margin-left: 1.5rem;
    margin-bottom: 1rem;
}
.alignleft {
    float: left;
    margin-right: 1.5rem;
    margin-bottom: 1rem;
}

/* Responsive Video Container */
.video-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 1rem;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

/* ========== 修正新版 WordPress 區塊編輯器 (Gutenberg) 相簿與排版走位 ========== */

/* 1. 確保相簿容器使用 Flexbox 並正確換行與計算間距 */
.entry-content .wp-block-gallery.has-nested-images {
    display: flex;
    flex-wrap: wrap;
    gap: var(--wp--style--unstable-gallery-gap, 1rem);
    margin: 1.5rem 0;
}

/* 2. 清除 Tailwind / Prose 對相簿內子 figure 的預設上下邊距 */
.entry-content .wp-block-gallery.has-nested-images figure.wp-block-image {
    margin: 0 !important;
    display: flex;
    flex-direction: column;
    position: relative;
    box-sizing: border-box;
}

/* 3. 修復裁剪圖片 (Crop Images) 開啟時的走位與高度塌陷 */
.entry-content .wp-block-gallery.has-nested-images.is-cropped figure.wp-block-image img {
    width: 100%;
    height: 100% !important;
    object-fit: cover;
    flex: 1 0 0%;
    margin: 0 !important;
}

/* 4. 修復未開啟裁剪時的圖片比例 */
.entry-content .wp-block-gallery.has-nested-images:not(.is-cropped) figure.wp-block-image img {
    width: 100%;
    height: auto;
    margin: 0 !important;
}

/* 5. 美化相簿內部的圖片說明文字 (Caption) */
.entry-content .wp-block-gallery figure.wp-block-image figcaption {
    margin: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.85rem;
    text-align: center;
    line-height: 1.4;
}

/* 6. 支援 WordPress 齊寬 (alignfull) 與 寬幅 (alignwide) 設定，防止超出白色卡片 */
.entry-content .alignwide,
.entry-content .alignfull {
    max-width: 100%;
    width: 100%;
}
/* 讓 WordPress 編輯器設定的字型大小在 .prose 內正常生效 */
.prose .has-small-font-size {
    font-size: var(--wp--preset--font-size--small, 0.875rem) !important;
}
.prose .has-medium-font-size {
    font-size: var(--wp--preset--font-size--medium, 1.125rem) !important;
}
.prose .has-large-font-size {
    font-size: var(--wp--preset--font-size--large, 1.5rem) !important;
    line-height: 1.45 !important;
}
.prose .has-x-large-font-size {
    font-size: var(--wp--preset--font-size--x-large, 2rem) !important;
    line-height: 1.35 !important;
}
.prose .has-huge-font-size {
    font-size: var(--wp--preset--font-size--huge, 2.5rem) !important;
    line-height: 1.25 !important;
}

/* 修正自訂像素大小（如 24px）時行距過窄重疊的問題 */
.prose [style*="font-size"] {
    line-height: 1.45;
}

/* 兼容舊版編輯器（Classic Editor）產生的 <font size="..."> 標籤 */
.prose font[size="1"] { font-size: 0.75rem; }
.prose font[size="2"] { font-size: 0.875rem; }
.prose font[size="3"] { font-size: 1rem; }
.prose font[size="4"] { font-size: 1.125rem; }
.prose font[size="5"] { font-size: 1.5rem; line-height: 1.45; }
.prose font[size="6"] { font-size: 2rem; line-height: 1.35; }
.prose font[size="7"] { font-size: 2.5rem; line-height: 1.25; }