/*
Theme Name: Enfold MORPH Child
Theme URI: https://morph-lab.net
Description: Enfold子テーマ - MORPH Lab用背景エフェクト追加
Author: MORPH Lab
Version: 1.1.4
Template: enfold
*/

/* Enfold CSS変数を透明に上書き */
:root {
    --enfold-main-color-bg: transparent !important;
    --enfold-header-color-bg: transparent !important;
}

/* 背景キャンバス */
#morph-background-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
}

/* Enfoldの背景を透明にして、Three.js背景を表示 */
/* Enfold動的CSSの.html_stretched #wrap_allより高い詳細度が必要 */
html,
html.html_stretched #wrap_all,
html #wrap_all,
#wrap_all,
html #main,
#main {
    background-color: transparent !important;
    background-image: none !important;
    background: transparent !important;
}

/* メインコンテンツエリア - 背景パーティクルがくっきり見えるよう透明度を高く */
/* Enfold動的CSSの.main_colorセレクタより高い詳細度が必要 */
html body .main_color,
html body .alternate_color,
html body .container_wrap,
html body .container_wrap_first,
.main_color,
.alternate_color,
.container_wrap,
.container_wrap_first {
    background-color: rgba(255, 255, 255, 0.15) !important;
    background-image: none !important;
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* サイドバーも半透明 */
.sidebar,
.avia-section {
    background-color: transparent !important;
}

/* テキストブロックのみに背景を適用（読みやすさ確保） */
.avia_textblock {
    background-color: rgba(255, 255, 255, 0.65) !important;
    padding: 15px !important;
    border-radius: 8px !important;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* ヘッダーは半透明 */
.header_color,
#header {
    background-color: rgba(255, 255, 255, 0.6) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* フッターは半透明 */
.footer_color,
.socket_color,
#footer,
#socket {
    background-color: rgba(255, 255, 255, 0.7) !important;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

/* ===== モバイル専用 (WKWebView対応) ===== */
@media only screen and (max-width: 989px) {

    /* 全セクションの背景を透明化 */
    html,
    body,
    #wrap_all,
    #main,
    .main_color,
    .alternate_color,
    .container_wrap,
    .container_wrap_first,
    .avia-section,
    .av_section_color_section,
    .avia-color-custom {
        background-color: transparent !important;
        background-image: none !important;
        background: transparent !important;
    }

    /* キャンバスのz-index調整 */
    #morph-background-canvas {
        z-index: 0 !important;
    }

    #wrap_all {
        position: relative !important;
        z-index: 1 !important;
    }

    /* テキストブロックのみに控えめな背景 */
    .avia_textblock {
        background-color: rgba(255, 255, 255, 0.35) !important;
        padding: 12px !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
    }

    /* 見出しの背景 */
    .av-special-heading-tag {
        background-color: rgba(255, 255, 255, 0.35) !important;
        padding: 8px 15px !important;
        border-radius: 6px !important;
        display: inline-block !important;
    }
}

/* ===== ハンバーガーメニュー (Burger Flyout) ===== */
/* Enfold 'classic' オーバーレイを 'minimal' サイドバーに完全変換 */
/* 参考: takasuka.morph-lab.net と同じ表示に変換 */
/* 重要: Enfoldは #top を使用する高詳細度セレクタでスタイルを設定
         → 同じ #top プレフィックスで確実に上書き */

/* --- ベースオーバーレイ: 透明 + 閉じ時はクリック透過 --- */
#top .av-burger-overlay {
    background-color: transparent !important;
    background: transparent !important;
    pointer-events: none !important;
}

html.av-burger-overlay-active #top .av-burger-overlay {
    pointer-events: auto !important;
}

/* --- 背景ディマー --- */
html.av-burger-overlay-active #top .av-burger-overlay .av-burger-overlay-bg,
#top .av-burger-overlay-bg {
    background-color: rgb(0, 0, 0) !important;
    opacity: 0.1 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* --- スクロールコンテナ: flex→block、350pxサイドバー --- */
html.av-burger-overlay-active #top .av-burger-overlay .av-burger-overlay-scroll,
#top .av-burger-overlay .av-burger-overlay-scroll,
#top .av-burger-overlay-scroll {
    display: block !important;
    position: absolute !important;
    width: 350px !important;
    max-width: none !important;
    height: 100% !important;
    top: 0 !important;
    left: auto !important;
    right: 0 !important;
    background-color: rgb(255, 255, 255) !important;
    overflow-y: auto !important;
    /* flex完全解除 */
    flex-wrap: initial !important;
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
}

/* --- インナーコンテナ --- */
html.av-burger-overlay-active #top .av-burger-overlay-scroll .av-burger-overlay-inner,
#top .av-burger-overlay-inner {
    display: table !important;
    width: 100% !important;
    height: 100% !important;
    text-align: left !important;
}

/* --- メニューリスト: table-cellで垂直中央、左揃え --- */
html.av-burger-overlay-active #top #av-burger-menu-ul,
#top #av-burger-menu-ul {
    display: table-cell !important;
    vertical-align: middle !important;
    text-align: left !important;
    padding: 80px 0px !important;
    width: 350px !important;
    /* flex完全解除 */
    flex-direction: initial !important;
    align-items: initial !important;
    justify-content: initial !important;
}

/* --- メニュー項目 --- */
html.av-burger-overlay-active #top #av-burger-menu-ul>li,
#top #av-burger-menu-ul li {
    display: block !important;
    text-align: left !important;
    border: none !important;
    width: 100% !important;
}

/* --- メニューリンク --- */
html.av-burger-overlay-active #top #av-burger-menu-ul li a,
#top #av-burger-menu-ul li a {
    display: block !important;
    color: rgb(0, 0, 0) !important;
    text-transform: uppercase !important;
    font-weight: 100 !important;
    font-size: 20px !important;
    letter-spacing: 2px !important;
    padding: 15px 50px !important;
    text-align: left !important;
    border: none !important;
    border-bottom: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* --- ×ボタン可視化: z-indexスタック制御 --- */
/* .av-burger-menu-main と .av-burger-overlay は同じ .avia-menu 内の兄弟要素。
   Enfold既定: overlay z-index 999999 > burger z-index 20 → ×が白パネルの下に隠れる。
   修正: overlay を 99 に下げ、burger を 999 に上げる → ×が白パネルの上に表示 */
#top .av-burger-overlay {
    z-index: 99 !important;
}

html.av-burger-overlay-active #top .av-burger-overlay {
    z-index: 99 !important;
}

html.av-burger-overlay-active .av-burger-menu-main {
    z-index: 999 !important;
    position: relative !important;
}

/* × ボタンのバーを暗色に（白背景で見えるように） */
html.av-burger-overlay-active #top .av-hamburger.is-active .av-hamburger-inner,
html.av-burger-overlay-active #top .av-hamburger.is-active .av-hamburger-inner::before,
html.av-burger-overlay-active #top .av-hamburger.is-active .av-hamburger-inner::after {
    background-color: rgb(0, 0, 0) !important;
}