/**
 * 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
   =========================================

   WordPress load-styles.php 設定 `h2, h3 { margin-top: 1em }`，
   干擾 Block 內使用 flex gap 控制的間距。
   在 Block 容器 [data-hz-surface] 內歸零，讓 flex gap 掌控間距。
   前端由主題 reset 處理，此規則僅影響編輯器。
   ========================================= */
.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: 0;
    padding: 0;
}