/*
 * safe-area.css — 全站「安全區域（Safe Area）」共用讓位樣式
 *
 * 目的：
 *   讓 Ripple App（Capacitor Remote-URL 殼包）內的前台網頁，其「固定定位（fixed）的共用元件」
 *   不被 iOS 動態島 / 瀏海 / 狀態列 / Home Indicator、以及橫向時的側邊瀏海遮住。
 *
 * 唯一契約（與《App畫面安全區域實作計畫》第 3、7 節一致）：
 *   全站一律以 `env(safe-area-inset-*, 0px)` 作為唯一的安全距離來源，平台分工、絕不疊加：
 *     - iOS：WebView 邊到邊（viewport-fit=cover），env() 回傳真實 inset 值 → 由「前端 CSS」讓位。
 *     - Android：原生層以 WindowInsets 對 WebView 根容器做 padding → 該平台 env() 回傳 0
 *                → 本檔所有規則自動 no-op，不會與原生 padding 疊加（不會雙重間距）。
 *     - 桌機 / 一般手機瀏覽器：env() fallback = 0 → 版面完全不變（本檔不得造成任何跑版或水平捲軸）。
 *
 * 「桌機零變化」保證做法：
 *   - 只調整既有 fixed 元件的位移／內距；
 *   - 一律使用 `env(safe-area-inset-*, 0px)` fallback 形式；
 *   - 若元件本來就有基準內距（如 Tailwind 的 p-4 / py-6），改用 `max(基準, env())`，
 *     env=0 時取回基準值 → 桌機維持原樣；env>0 時才擴大。
 *
 * 範圍：只處理「全站共用」的固定元件（頂部 header、底部手機導覽、共用 Modal / Popup / Toast / Loading）。
 *   不逐頁寫死高度、不動業務邏輯。單一頁面自己的 fixed 元件與 100vh 版面另行處理（見專案工作記錄）。
 */

/* ------------------------------------------------------------------ *
 * 0) 根變數：全站唯一的安全距離來源。
 *    其他共用元件皆引用這四個變數，日後要調整策略只需改這裡。
 * ------------------------------------------------------------------ */
:root {
    --safe-area-inset-top: env(safe-area-inset-top, 0px);
    --safe-area-inset-right: env(safe-area-inset-right, 0px);
    --safe-area-inset-bottom: env(safe-area-inset-bottom, 0px);
    --safe-area-inset-left: env(safe-area-inset-left, 0px);
}

/* ------------------------------------------------------------------ *
 * 1) 頂部固定 Header（header.html 的 #mainHeader，fixed top-0）。
 *    - padding-top 併入 --safe-area-inset-top：把 logo / 圖示那一列（h-16）
 *      往下推到瀏海 / 動態島下方；header 自身背景（theme-system.css 的 --header-bg）
 *      會自動填滿上方讓出的區域，不會露出後方頁面內容。
 *    - padding-left/right 併入左右 inset：橫向（landscape）時側邊瀏海不遮住 logo / 使用者選單。
 *      直向時左右 inset=0，等同不加。
 *    以 id 選擇器確保 specificity 足夠，且只加內距、不改原本結構。
 * ------------------------------------------------------------------ */
#mainHeader {
    padding-top: var(--safe-area-inset-top);
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

/* ------------------------------------------------------------------ *
 * 2) 底部手機固定導覽列（mobile-nav.html 的 nav，fixed bottom-0，md:hidden）。
 *    - padding-bottom 併入 --safe-area-inset-bottom：導覽列本身（bg-black）向下延伸填滿
 *      Home Indicator 區，圖示（h-16 那一列）維持在其上方、不被遮住。
 *    - 注意「不疊加」：app-shell.css 已對捲動容器 #mainContent 做
 *        padding-bottom: calc(5rem + env(safe-area-inset-bottom, 0px))
 *      那是「為內容保留可捲動空間」；本規則是「導覽列自身讓出 Home Indicator」，
 *      兩者用途不同、作用在不同元素，並非重複的安全距離。
 * ------------------------------------------------------------------ */
#mobile-nav-container nav {
    padding-bottom: var(--safe-area-inset-bottom);
}

/* ------------------------------------------------------------------ *
 * 3) 全站共用 Toast（固定在畫面邊角，最容易被瀏海 / 動態島遮住）。
 *    以 calc(基準 + env) 把它往安全區內推；env=0 時等於原本的 Tailwind 位置（桌機不變）。
 *    - #notificationToast：header.html，原 top-20 right-4。
 *    - #reportToast：report-modal.js，原 top-4 right-4。
 * ------------------------------------------------------------------ */
#notificationToast {
    top: calc(5rem + var(--safe-area-inset-top));
    right: calc(1rem + var(--safe-area-inset-right));
}

#reportToast {
    top: calc(1rem + var(--safe-area-inset-top));
    right: calc(1rem + var(--safe-area-inset-right));
}

/* ------------------------------------------------------------------ *
 * 4) 全站共用「置中型」Modal / Popup 覆蓋層。
 *    這些覆蓋層為 fixed inset-0 + flex 置中，內部卡片可能為 max-h-[90vh] 等接近滿高，
 *    在瀏海 / Home Indicator 機型上卡片頭尾可能被遮。以 env 讓出四方安全距離，
 *    確保卡片永遠落在安全區內。
 *
 *    4a) 原本已有 p-4（1rem）基準內距者：用 max(1rem, env) 保住桌機的 1rem、iOS 才擴大。
 * ------------------------------------------------------------------ */
#reportModal,
#inviteModal,
#emailBindHintModal,
#inAppAnnouncementModal {
    padding-top: max(1rem, var(--safe-area-inset-top));
    padding-right: max(1rem, var(--safe-area-inset-right));
    padding-bottom: max(1rem, var(--safe-area-inset-bottom));
    padding-left: max(1rem, var(--safe-area-inset-left));
}

/* 4b) createPostModal：原本 py-6（上下 1.5rem）、左右無內距。
 *     上下用 max(1.5rem, env) 保住原 py-6；左右用 env（原為 0，桌機維持 0）。 */
#createPostModal {
    padding-top: max(1.5rem, var(--safe-area-inset-top));
    padding-bottom: max(1.5rem, var(--safe-area-inset-bottom));
    padding-left: var(--safe-area-inset-left);
    padding-right: var(--safe-area-inset-right);
}

/* 4c) 原本無基準內距的置中覆蓋層與全域 Loading：直接用 env（fallback 0）。
 *     桌機 / Android env=0 → padding 為 0 → 與原本完全一致。 */
#postTypeModal,
#mobilePostTypeModal,
#mobileCreatePostModal,
#global-loading-overlay {
    padding-top: var(--safe-area-inset-top);
    padding-right: var(--safe-area-inset-right);
    padding-bottom: var(--safe-area-inset-bottom);
    padding-left: var(--safe-area-inset-left);
}

/* ------------------------------------------------------------------ *
 * 5) 手機「個人選單」下拉（mobile-nav.html 的 #mobileProfileMenu 內層面板）。
 *    原以 inline style 設 top:4rem; bottom:4rem（貼齊 header 下緣、nav 上緣）。
 *    App 內 header 會因 safe-area 變高、nav 會因 safe-area 變高，故面板上下緣需一併納入 inset，
 *    避免頂部被加高後的 header 蓋住、底部被加高後的 nav 蓋住。
 *    inline style 優先序高於外部 CSS，需以 !important 覆蓋。
 * ------------------------------------------------------------------ */
#mobileProfileMenu > div {
    top: calc(4rem + var(--safe-area-inset-top)) !important;
    bottom: calc(4rem + var(--safe-area-inset-bottom)) !important;
}

/* ------------------------------------------------------------------ *
 * 6) 內容頂端 offset 併入 --safe-area-inset-top。
 *    #mainHeader（fixed top-0）在 App 內已加高 env(top)，各頁清開 header 的
 *    top offset 也必須同步加上 env(top)，否則 iOS 上內容頂端會被加高後的 header
 *    遮住約瀏海／動態島高度。
 *
 *    做法：用「元素 + 屬性選擇器」specificity=(0,1,1) 覆蓋 Tailwind 的
 *    .pt-16 / .pt-20 / .pt-24（specificity=(0,1,0)），env=0 時 calc 取回原值，
 *    桌機 / 一般瀏覽器 / Android 版面完全不變。
 *
 *    6a) Dashboard／流式版面（my_*, user_* 等）：以 <body> 的 pt-16(4rem) 清開 fixed header。
 *        （少數頁面用 pt-1 或無 pt 者不在此選擇器內，見工作記錄之個別處理清單。）
 * ------------------------------------------------------------------ */
body[class*="pt-16"] {
    padding-top: calc(4rem + var(--safe-area-inset-top));
}

/* 6b) 內容型頁面（landing / expert_page / 404 用 pt-20；privacy / terms / search_results 用 pt-24）：
 *     以 <main> 的 pt-20(5rem) / pt-24(6rem) 清開 fixed header。
 *     已確認這些頁的 <main> 皆為單一、非響應式 pt（無 md:/lg: 變體），靜態覆蓋安全。 */
main[class*="pt-20"] {
    padding-top: calc(5rem + var(--safe-area-inset-top));
}

main[class*="pt-24"] {
    padding-top: calc(6rem + var(--safe-area-inset-top));
}

/* ------------------------------------------------------------------ *
 * 6c) 特例 dashboard 頁：<body> 用 pt-1（0.25rem）＋內層 wrapper 寫死
 *     padding-top:60px 清開 fixed header（my_events / my_review / user_events）。
 *     這些 body 不符合 6a 的 pt-16 選擇器，故 iOS 上 header 加高後頂端內容（如
 *     報名名單面板標題）會被瀏海高度的 header 遮住。
 *     做法：只對 body 補 env(top)，wrapper 的 60px 維持不動 →
 *       桌機/Android(env=0)：0.25rem + 60px = 原本 64px，完全不變；
 *       iOS(env>0)：0.25rem + env + 60px，恰好等於加高後的 header 高度。
 *     用 [class~="pt-1"]（精確 token 比對）確保只命中 pt-1，不會誤中 pt-16。
 * ------------------------------------------------------------------ */
body[class~="pt-1"] {
    padding-top: calc(0.25rem + var(--safe-area-inset-top));
}

/* 6d) 內容型頁面用「全高包裹層」.min-h-screen.pt-16 清開 fixed header
 *     （event_list / event_page / expert_content，以及補了 pt-16 的 post_page）。
 *     6a 只作用在 <body> 的 pt-16，這類 pt-16 在內層 <div>/<main>，需另外涵蓋。
 *     兩個 class 同時存在＝「清 header 用的全高容器」，語意明確、不會誤中一般 pt-16。
 *     env=0 時 calc(4rem)=pt-16 原值，桌機完全不變。 */
.min-h-screen.pt-16 {
    padding-top: calc(4rem + var(--safe-area-inset-top));
}

/* 6e) 置中內容卡 .max-w-3xl.pt-16 清開 fixed header
 *     （event_review / apply_expert / bank_info）。同 6d 概念，
 *     以「max-w-3xl ＋ pt-16」兩 class 併存精準命中，env=0 時等於原 pt-16。 */
.max-w-3xl.pt-16 {
    padding-top: calc(4rem + var(--safe-area-inset-top));
}

/* ------------------------------------------------------------------ *
 * 7) 側邊選單抽屜（my_sidebar.html / user_sidebar.html 的 #sidebar）。
 *    平板寬度（md ~ <lg）時為 `fixed top-16`（貼齊 fixed header 下緣 4rem）；
 *    lg+ 改為 `relative top-0`（隨版面流排，不需 offset）。
 *    App 內 header 因 safe-area 加高後，fixed 抽屜仍停在 4rem → 頂端（「我的空間」
 *    標題）被加高後的 header 蓋住。只在「fixed 抽屜」的平板區間把 top 併入 env(top)，
 *    lg+ 的 relative top-0 完全不受影響（避免桌機側欄被往下推）。
 *    env=0（桌機/Android/一般瀏覽器）時 calc(4rem)=top-16 原值，版面不變。
 * ------------------------------------------------------------------ */
@media (min-width: 768px) and (max-width: 1023.98px) {
    #sidebar {
        top: calc(4rem + var(--safe-area-inset-top));
    }
}