/**
 * Hauzii Universal Block Preview CSS
 *
 * This file contains generic layout rules for the Block Editor preview.
 * It is injected by UniversalBlockRenderer via data attributes.
 *
 * @package Hauzii\Canvas
 */

/* =========================================
   Tailwind Preflight Conflict Fixes
   =========================================

   Tailwind CDN (unpkg) 包含 preflight，會和 WordPress CSS 衝突。
   如果編輯器出現奇怪樣式，先檢查是否需要在這裡加修復。

   衝突原因：
   - Tailwind preflight: `*, ::before, ::after { border-style: solid }`
   - WordPress common.css: `img { border: none }` (只設 border-style: none)
   - Tailwind 後載入，覆蓋 border-style → 產生邊框

   已知問題：
   - img border: Tailwind 設定 border-style: solid，造成灰框

   長期解法：自訂 Tailwind build（不含 preflight）
   ========================================= */
:where(.editor-styles-wrapper) img,
:where(body.block-editor-iframe__body) img {
    border-width: 0;
}

/* =========================================
   Layout: Row (Flex Row / 2-Column Split)
   Used by: hero-01
   ========================================= */

.editor-styles-wrapper [data-hz-preview-layout="row"],
body.block-editor-iframe__body [data-hz-preview-layout="row"] {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2rem !important;
}

.editor-styles-wrapper [data-hz-preview-layout="row"]> :first-child,
.editor-styles-wrapper [data-hz-preview-layout="row"]> :last-child,
body.block-editor-iframe__body [data-hz-preview-layout="row"]> :first-child,
body.block-editor-iframe__body [data-hz-preview-layout="row"]> :last-child {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

.editor-styles-wrapper [data-hz-preview-layout="row"]> :first-child,
body.block-editor-iframe__body [data-hz-preview-layout="row"]> :first-child {
    text-align: left !important;
}

.editor-styles-wrapper [data-hz-preview-layout="row"]> :last-child,
body.block-editor-iframe__body [data-hz-preview-layout="row"]> :last-child {
    margin-top: 0 !important;
}

/* Specific fix for hero-01 inner flex containers if they exist,
   but generalized for any row layout having mt-4 flex containers
   that need start alignment */
.editor-styles-wrapper [data-hz-preview-layout="row"]> :first-child div.mt-4.flex,
body.block-editor-iframe__body [data-hz-preview-layout="row"]> :first-child div.mt-4.flex {
    justify-content: flex-start !important;
}

/* =========================================
   InnerBlocks Container: 透明 Wrapper
   讓 Gutenberg + ACF 的多層 wrapper 不影響佈局
   適用於所有 data-hz-innerblocks="true" 容器

   注意: 暫時停用，可能影響 ACF 控制功能
   ========================================= */

/* 暫時停用 - display: contents 可能破壞 ACF 控制
[data-hz-innerblocks="true"] .block-editor-inner-blocks .wp-block {
    display: contents !important;
}
[data-hz-innerblocks="true"] .block-editor-inner-blocks .acf-block-component {
    display: contents !important;
}
[data-hz-innerblocks="true"] .block-editor-inner-blocks .acf-block-body {
    display: contents !important;
}
[data-hz-innerblocks="true"] .block-editor-inner-blocks .acf-block-body > div {
    display: contents !important;
}
[data-hz-innerblocks="true"] .block-editor-inner-blocks .acf-block-preview {
    display: contents !important;
}
*/

/* DEBUG: 關閉 (開發時可取消註解) */
/*
[data-hz-innerblocks="true"] { outline: 3px solid red !important; }
[data-hz-innerblocks="true"] .block-editor-inner-blocks { outline: 3px solid blue !important; }
[data-hz-innerblocks="true"] .wp-block { outline: 2px dashed green !important; }
*/

/* =========================================
   @layout: Grid/Flex 內的 InnerBlocks
   讓 Gutenberg wrapper 在視覺上「消失」
   確保 grid/flex layout 正常運作

   注意：.wp-block 不能用 display: contents
   否則 ACF 點擊偵測會失效
   ========================================= */

/* Grid layouts - 只對 Gutenberg 的中間層 wrapper 透明 */
.grid > .block-editor-inner-blocks,
.grid > .block-editor-inner-blocks > .block-editor-block-list__layout,
[class*="grid-cols"] > .block-editor-inner-blocks,
[class*="grid-cols"] > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents !important;
}

/* Flex layouts */
.flex > .block-editor-inner-blocks,
.flex > .block-editor-inner-blocks > .block-editor-block-list__layout,
[class*="flex-"] > .block-editor-inner-blocks,
[class*="flex-"] > .block-editor-inner-blocks > .block-editor-block-list__layout {
    display: contents !important;
}

/* =========================================
   Image Height Override
   =========================================

   模板 HTML 可能設定固定高度 class（如 Tailwind 的 h-64），
   搭配 object-fit: cover 會裁切圖片。

   桌面編輯器有 WP 內建的 `.block-editor__container img { height: auto }` 覆蓋，
   但平板/手機 iframe 預覽沒有此規則 → 圖片被裁切。

   全域覆蓋：對所有 data-hz-image img 強制 height: auto，
   確保編輯器預覽一致，不受模板高度 class 影響。
   ========================================= */
:where(.editor-styles-wrapper) img[data-hz-image],
:where(body.block-editor-iframe__body) img[data-hz-image] {
    height: auto !important;
}

/* =========================================
   YouTube/Vimeo Error 153 Fix
   =========================================

   Gutenberg 平板/手機預覽使用 blob: origin 的 editor-canvas iframe，
   YouTube/Vimeo 拒絕在此環境播放 → Error 153。
   純 CSS：隱藏 iframe，用淡背景提示編輯者。
   僅影響 editor-canvas，前台/桌面編輯器不受影響。
   ========================================= */
body.block-editor-iframe__body [class*="hz-bg-video"] iframe {
    display: none;
}

body.block-editor-iframe__body [class*="hz-bg-video"] {
    background: rgba(0, 0, 0, 0.03)
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 80'%3E%3Cpolygon points='68,20 68,46 88,33' fill='%23ccc'/%3E%3Ctext x='80' y='62' text-anchor='middle' fill='%23bbb' font-family='system-ui,sans-serif' font-size='10'%3E%E5%BD%B1%E7%89%87%E8%83%8C%E6%99%AF%3C/text%3E%3C/svg%3E")
        center / 160px auto no-repeat;
}

/* =========================================
   FAQ Accordion: Editor Preview 強制展開
   =========================================

   <details> 在前端預設收合（原生 accordion 行為），
   但編輯器需要展開所有項目，讓用戶能點選答案文字。
   此規則只在 editor 生效，前端不受影響。
   ========================================= */
:where(.editor-styles-wrapper) details.group::details-content,
:where(body.block-editor-iframe__body) details.group::details-content {
    display: block !important;
    content-visibility: visible !important;
}

:where(.editor-styles-wrapper) details.group > summary svg,
:where(body.block-editor-iframe__body) details.group > summary svg {
    transform: rotate(45deg);
}

/* =========================================
   Heading/Paragraph Margin Reset for Blocks
   =========================================

   Classic theme（如 Flatsome）載入 wp-reset-editor-styles (reset.min.css)，
   其中 `:where(.editor-styles-wrapper) p { margin: revert }` 等規則是
   **非 layered CSS**，永遠覆蓋 Tailwind v4 的 `@layer utilities`
   （包括 mt-8、mb-4 等 margin/padding class）。

   解法：`revert-layer` 將 margin/padding 回退到上一個 cascade layer，
   即 Tailwind 的 `@layer utilities`，讓 Tailwind class 正常生效。
   若元素無 Tailwind margin class，則 revert 到 UA default（通常為 0）。

   Block theme 不載入 reset.min.css，此規則無影響（revert-layer 在
   無競爭 layer 時等同 unset）。

   注意：選擇器不使用 :where() 包裝 — 需要足夠特異性覆蓋 reset.min.css
   的 :where(.editor-styles-wrapper) p { margin: revert }。
   ========================================= */
.editor-styles-wrapper [data-hz-surface] :is(h1, h2, h3, h4, h5, h6, p),
body.block-editor-iframe__body [data-hz-surface] :is(h1, h2, h3, h4, h5, h6, p) {
    margin: revert-layer;
    padding: revert-layer;
}

/* =========================================
   Classic Theme Layout Fix
   =========================================

   問題：Classic theme（如 Flatsome）載入 wp-editor-classic-layout-styles
   (classic.min.css)，其中 `html :where(.wp-block) { max-width: 840px }`
   限制所有 block 寬度。突破規則 [data-align=full] 在 WP 6.x 無效，
   因為 ACF block 的 .wp-block wrapper 不輸出 data-align attribute，
   也沒有 alignfull class。

   解法：由 Plugin.php 的 fix_classic_theme_editor_layout() dequeue
   整個 classic layout，並在此補回有用的規則（間距、置中）。
   只移除 max-width 限制，其他 classic layout 行為保留。

   技術債：WP 核心 block（paragraph 等）也失去 840px 限制。
   可用 :where(.wp-block:not([data-type^="acf/hauzii"])) { max-width: 840px }
   補回，但目前 Canvas page 不混用核心 block，暫不處理。

   影響：僅在 classic theme 生效（block theme 不載入 classic layout）。
   未來 WP 修復 ACF block 的 data-align 輸出後，可移除此段。
   ========================================= */
.editor-styles-wrapper :where(:not(.is-layout-flex,.is-layout-grid)) > .wp-block {
    margin-left: auto;
    margin-right: auto;
}

html :where(.wp-block) {
    margin-bottom: 28px;
    margin-top: 28px;
}