/**
 * Forgeee Header Grid Block Styles
 * 
 * @package Forgeee
 * @since 1.0.0
 */

/* ========================================
   基本レイアウト
   ======================================== */
.fg-header-grid {
    position: relative;
    background: #fff;
    border-bottom: 1px solid #eee;
}

/* オーバーレイモード */
.fg-header-grid--overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

/* オーバーレイモードでメニューリンクの色を調整 */
.fg-header-grid--overlay a {
    color: #333;
}

.fg-header-grid--overlay .fg-header-grid__menu-list > li > a:hover {
    color: var(--fg-primary, #cba136);
}

/* センターレイアウト */
.fg-header-grid--centered .fg-header-grid__inner {
    position: relative;
    padding: 1rem 1.5rem;
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    width: 100%;
}

.fg-header-grid--centered .fg-header-grid__centered {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.fg-header-grid--centered .fg-header-grid__logo {
    margin-bottom: 0.5rem;
}

.fg-header-grid--centered .fg-header-grid__menu {
    width: 100%;
    text-align: center;
}

/* センターレイアウトの右上アクションエリア */
.fg-header-grid--centered .fg-header-grid__actions-top {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    z-index: 10;
}

/* フレキシブルレイアウト（ロゴとアクション：内容幅、メニュー：残り全て） */
.fg-header-grid--flexible .fg-header-grid__inner {
    display: flex;
    align-items: center;
    gap: 2rem;
    padding: 1rem 1.5rem;
    max-width: var(--container-width, 1280px);
    margin: 0 auto;
    width: 100%;
}

.fg-header-grid--flexible .fg-header-grid__logo {
    flex: 0 0 auto;  /* 内容に応じた幅、縮小しない */
}

.fg-header-grid--flexible .fg-header-grid__menu {
    flex: 1 1 auto;  /* 残りの空間を全て使用 */
    min-width: 0;    /* flexアイテムのオーバーフロー対策 */
}

/* フレキシブルレイアウトのメニュー位置 */
.fg-header-grid--flexible .fg-header-grid__nav--left {
    justify-content: flex-start;
}

.fg-header-grid--flexible .fg-header-grid__nav--center {
    justify-content: center;
}

.fg-header-grid--flexible .fg-header-grid__nav--right {
    justify-content: flex-end;
}

.fg-header-grid--flexible .fg-header-grid__nav {
    display: flex;
    align-items: center;
    width: 100%;
}

.fg-header-grid--flexible .fg-header-grid__actions {
    flex: 0 0 auto;  /* 内容に応じた幅、縮小しない */
}


/* ========================================
   ロゴエリア
   ======================================== */
.fg-header-grid__logo {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* ロゴを左寄せ */
}

.fg-header-grid__logo-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.fg-header-grid__logo-img {
    display: block;
    height: 40px;
    width: auto;
    max-width: 150px;
    object-fit: contain;
}

/* エディターでのロゴ表示を確実に */
.editor-styles-wrapper .fg-header-grid__logo-img {
    display: block !important;
    height: 40px !important;
    width: auto !important;
    max-width: 150px !important;
}

/* ========================================
   メニューエリア
   ======================================== */
.fg-header-grid__menu {
    display: flex;
    align-items: center;
}

.fg-header-grid__nav {
    width: 100%;
}

.fg-header-grid__menu-list {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 2rem;
}

/* メニュー配置 */
.fg-header-grid__nav--left .fg-header-grid__menu-list {
    justify-content: flex-start;
}

.fg-header-grid__nav--center .fg-header-grid__menu-list {
    justify-content: center;
}

.fg-header-grid__nav--right .fg-header-grid__menu-list {
    justify-content: flex-end;
}

.fg-header-grid__menu-list a {
    color: #333;
    text-decoration: none;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.fg-header-grid__menu-list a:hover {
    color: var(--fg-primary, #cba136);
}

/* メニューアイコン */
.fg-header-grid__menu-list .menu-icon {
    font-size: 1.125rem;
    vertical-align: middle;
    font-weight: 300;
    font-variation-settings: 'wght' 300;
}

/* ドロップダウンメニュー */
.fg-header-grid__menu-list li {
    position: relative;
}

.fg-header-grid__menu-list .sub-menu,
.fg-header-grid__menu-list .children {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #fff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    border-radius: 0.5rem;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-10px);
    transition: all 0.3s ease;
    z-index: 999;
    list-style: none;
}

.fg-header-grid__menu-list li:hover > .sub-menu,
.fg-header-grid__menu-list li:hover > .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.fg-header-grid__menu-list .sub-menu a,
.fg-header-grid__menu-list .children a {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.5rem;
    color: #333;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.3s ease;
}

.fg-header-grid__menu-list .sub-menu a:hover,
.fg-header-grid__menu-list .children a:hover {
    background: #f5f5f5;
    color: var(--fg-primary, #cba136);
}

/* 多階層ドロップダウン */
.fg-header-grid__menu-list .sub-menu .sub-menu,
.fg-header-grid__menu-list .children .children {
    left: 100%;
    top: 0;
    margin-top: 0;
    margin-left: 0.5rem;
}

/* エディターでのドロップダウン表示 */
.editor-styles-wrapper .fg-header-grid__menu-list li:hover > .sub-menu,
.editor-styles-wrapper .fg-header-grid__menu-list li:hover > .children {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* メニュープレースホルダー */
.fg-header-grid__menu-placeholder {
    padding: 1rem;
    background: #f5f5f5;
    border: 2px dashed #ddd;
    border-radius: 0.5rem;
    color: #666;
    text-align: center;
}

/* ========================================
   アクションエリア
   ======================================== */
.fg-header-grid__actions {
    display: grid;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
}

/* InnerBlocksのレイアウト調整 */
.fg-header-grid__actions[data-columns="1"] {
    grid-template-columns: 1fr;
}

.fg-header-grid__actions[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr);
}

.fg-header-grid__actions[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr);
}

/* アクションエリア */
.fg-header-grid__actions {
    min-width: 200px;
}

/* アクションエリア内のカラム */
.fg-header-grid__actions .wp-block-columns {
    margin: 0;
    gap: 0.5rem;
}

.fg-header-grid__actions .wp-block-column {
    margin: 0;
    padding: 0;
    flex: 1 1 0% !important; /* 均等幅を強制 */
}

/* エディターでのカラム表示 */
.editor-styles-wrapper .fg-header-grid__actions .wp-block-column {
    min-height: 60px;
    padding: 0.5rem;
    display: flex;
    align-items: stretch;
    position: relative;
    border: 2px dashed #ccc !important;
    border-radius: 8px;
    background: #f8f8f8;
}

/* スロットのグループブロック */
.editor-styles-wrapper .fg-header-grid__slot-1,
.editor-styles-wrapper .fg-header-grid__slot-2,
.editor-styles-wrapper .fg-header-grid__slot-3,
.editor-styles-wrapper .fg-header-grid__slot-1 .wp-block-group,
.editor-styles-wrapper .fg-header-grid__slot-2 .wp-block-group,
.editor-styles-wrapper .fg-header-grid__slot-3 .wp-block-group {
    border: 2px dashed #ccc !important;
    border-radius: 8px;
    min-height: 60px;
    padding: 0.5rem;
    background: #f8f8f8;
    width: 100%;
}

/* ACFブロックのInnerBlocks領域も点線枠 */
.editor-styles-wrapper .fg-header-grid__actions .block-editor-inner-blocks .block-editor-block-list__layout > .wp-block-group {
    border: 2px dashed #ccc !important;
    border-radius: 8px;
    min-height: 60px;
    padding: 0.5rem;
    background: #f8f8f8;
}

/* スロット内にコンテンツがある場合 */
.editor-styles-wrapper .fg-header-grid__slot-1:has(.wp-block),
.editor-styles-wrapper .fg-header-grid__slot-2:has(.wp-block),
.editor-styles-wrapper .fg-header-grid__slot-3:has(.wp-block) {
    background: #fff;
    border-color: #999;
}

/* グループブロック自体のマージンをリセット */
.fg-header-grid__actions .wp-block-group {
    margin: 0;
    padding: 0;
}

/* 強制カラム表示用のスタイル */
.fg-header-grid__columns-wrapper {
    display: grid;
    gap: 0.5rem;
    width: 100%;
}

.fg-header-grid__actions[data-columns="2"] .fg-header-grid__columns-wrapper {
    grid-template-columns: repeat(2, 1fr);
}

.fg-header-grid__actions[data-columns="3"] .fg-header-grid__columns-wrapper {
    grid-template-columns: repeat(3, 1fr);
}

.fg-header-grid__column-slot {
    border: 2px dashed #ccc;
    border-radius: 8px;
    min-height: 60px;
    padding: 0.5rem;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fg-header-grid__slot-inner {
    width: 100%;
    text-align: center;
    color: #999;
    font-size: 12px;
}

.fg-header-grid__slot-inner::before {
    content: 'スロット ' attr(data-slot);
}

/* アクションエリアが1列の場合 */
.fg-header-grid__actions[data-columns="1"] {
    display: flex;
    justify-content: flex-end;
}

.fg-header-grid__actions[data-columns="1"] > .block-editor-inner-blocks {
    width: 100%;
}

/* 1列の場合のエディター表示 */
.editor-styles-wrapper .fg-header-grid__actions[data-columns="1"] {
    border: 2px dashed #ccc;
    border-radius: 8px;
    min-height: 60px;
    padding: 0.5rem;
    background: #f8f8f8;
}

/* 1列の場合のInnerBlocks内のグループブロック */
.editor-styles-wrapper .fg-header-grid__actions[data-columns="1"] > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block-group {
    border: 2px dashed #ccc !important;
    border-radius: 8px;
    min-height: 60px;
    padding: 0.5rem;
    background: #f8f8f8;
}

/* 2列・3列のカラムサイズ固定 */
.fg-header-grid__columns-2 .wp-block-column {
    width: 50% !important;
    max-width: none !important;
}

.fg-header-grid__columns-3 .wp-block-column {
    width: 33.33% !important;
    max-width: none !important;
}

/* カラムの追加・削除ボタンを非表示 */
.editor-styles-wrapper .fg-header-grid__columns-2 .block-list-appender,
.editor-styles-wrapper .fg-header-grid__columns-3 .block-list-appender {
    display: none !important;
}

.editor-styles-wrapper .fg-header-grid__columns-2 .block-editor-block-list__insertion-point,
.editor-styles-wrapper .fg-header-grid__columns-3 .block-editor-block-list__insertion-point {
    display: none !important;
}

/* ブロックのマージンをリセット */
.fg-header-grid__actions .wp-block {
    margin: 0;
}

/* ========================================
   エディタースタイル
   ======================================== */
.editor-styles-wrapper .fg-header-grid {
    margin: 20px 0;
    border: 2px dashed #ccc;
    border-radius: 10px;
}

/* エディターでのアクションエリアの調整 */
.editor-styles-wrapper .fg-header-grid__actions {
    display: grid !important;
    gap: 0.5rem !important;
}

.editor-styles-wrapper .fg-header-grid__actions[data-columns="1"] {
    grid-template-columns: 1fr !important;
}

.editor-styles-wrapper .fg-header-grid__actions[data-columns="2"] {
    grid-template-columns: repeat(2, 1fr) !important;
}

.editor-styles-wrapper .fg-header-grid__actions[data-columns="3"] {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* 各ブロックのスタイル */
.editor-styles-wrapper .fg-header-grid__actions .wp-block {
    margin: 0 !important;
}

/* フロントエンドでのカラム表示 */
.fg-header-grid__actions .wp-block-columns {
    height: 100%;
    align-items: center;
}

.fg-header-grid__actions .wp-block-column {
    display: flex;
    align-items: center;
    justify-content: center;
}

/* フロントエンドでの1列表示 */
.fg-header-grid__actions[data-columns="1"] {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

/* ========================================
   サブメニューインジケーター
   ======================================== */
.submenu-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.5rem;
    font-size: 0.875em;
    line-height: 1;
    transition: transform 0.3s ease;
}

/* Material Symbolsアイコン用 */
.submenu-indicator .material-symbols-outlined {
    font-size: 1.25em;
}

/* プラス・マイナス */
.submenu-indicator--plus-minus .indicator-minus {
    display: none;
}

.menu-item.is-open .submenu-indicator--plus-minus .indicator-plus {
    display: none;
}

.menu-item.is-open .submenu-indicator--plus-minus .indicator-minus {
    display: inline;
}

/* 展開・縮小アイコン */
.submenu-indicator--expand .indicator-collapse {
    display: none;
}

.menu-item.is-open .submenu-indicator--expand .indicator-expand {
    display: none;
}

.menu-item.is-open .submenu-indicator--expand .indicator-collapse {
    display: inline;
}

/* 回転アニメーション */
.submenu-indicator--rotate {
    transition: transform 0.3s ease;
    display: inline-block;
}

.menu-item.is-open .submenu-indicator--rotate {
    transform: rotate(180deg);
}

/* Material Symbolsアイコンも回転させる */
.submenu-indicator--rotate .material-symbols-outlined {
    display: inline-block;
    transition: transform 0.3s ease;
}

.menu-item.is-open .submenu-indicator--rotate .material-symbols-outlined {
    transform: rotate(180deg);
}

/* 矢印用の90度回転 */
.submenu-indicator--arrow.submenu-indicator--rotate .material-symbols-outlined {
    transition: transform 0.3s ease;
}

.menu-item.is-open .submenu-indicator--arrow.submenu-indicator--rotate .material-symbols-outlined {
    transform: rotate(90deg);
}

/* フェードアニメーション */
.submenu-indicator--fade .indicator-plus,
.submenu-indicator--fade .indicator-minus,
.submenu-indicator--fade .indicator-expand,
.submenu-indicator--fade .indicator-collapse {
    transition: opacity 0.3s ease;
}

.submenu-indicator--fade .indicator-minus,
.submenu-indicator--fade .indicator-collapse {
    position: absolute;
    opacity: 0;
}

.menu-item.is-open .submenu-indicator--fade .indicator-plus,
.menu-item.is-open .submenu-indicator--fade .indicator-expand {
    opacity: 0;
}

.menu-item.is-open .submenu-indicator--fade .indicator-minus,
.menu-item.is-open .submenu-indicator--fade .indicator-collapse {
    opacity: 1;
}

/* 切り替えアニメーション */
.submenu-indicator--switch {
    overflow: hidden;
    position: relative;
}

.submenu-indicator--switch .indicator-plus,
.submenu-indicator--switch .indicator-minus,
.submenu-indicator--switch .indicator-expand,
.submenu-indicator--switch .indicator-collapse {
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.submenu-indicator--switch .indicator-minus,
.submenu-indicator--switch .indicator-collapse {
    position: absolute;
    transform: translateY(100%);
    opacity: 0;
}

.menu-item.is-open .submenu-indicator--switch .indicator-plus,
.menu-item.is-open .submenu-indicator--switch .indicator-expand {
    transform: translateY(-100%);
    opacity: 0;
}

.menu-item.is-open .submenu-indicator--switch .indicator-minus,
.menu-item.is-open .submenu-indicator--switch .indicator-collapse {
    transform: translateY(0);
    opacity: 1;
}

/* ========================================
   アクションエリアのボタンスタイル
   ======================================== */
.fg-header-grid__actions {
    display: flex;
    justify-content: flex-end;
}

/* カラムレイアウト */
.fg-header-grid__actions .wp-block-columns,
.fg-header-action-columns-2,
.fg-header-action-columns-3 {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: flex-end;
    margin: 0;
    gap: 0.5rem;
}

.fg-header-grid__actions .wp-block-column {
    margin: 0 !important;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: none !important;
}

/* WordPressのデフォルトスタイルを上書き */
.fg-header-grid__actions .wp-block-column.is-layout-flow {
    display: flex !important;
    flex-direction: row !important;
}

/* ボタンスタイル */
.fg-header-grid__actions .wp-block-button {
    margin: 0;
}

.fg-header-grid__actions .wp-block-button__link {
    white-space: nowrap;
    min-width: auto;
    padding: 0.5rem 1rem;
    font-size: 14px;
}

/* ========================================
   ハンバーガーボタン
   ======================================== */
.fg-hamburger-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 8px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
}

.fg-hamburger-label {
    font-size: 10px;
    line-height: 1;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

/* ボタンスタイル別設定 */
.fg-hamburger-button--icon-only .fg-hamburger-label {
    color: inherit;
}

.fg-hamburger-button--default .fg-hamburger-label,
.fg-hamburger-button--rounded .fg-hamburger-label {
    color: #ffffff;
}

/* ========================================
   ハンバーガーパネル
   ======================================== */
.fg-hamburger-panel {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 99998;
    pointer-events: none;
    visibility: hidden;
}

.fg-hamburger-panel:not([hidden]) {
    pointer-events: auto;
    visibility: visible;
}

.fg-hamburger-panel.is-active {
    pointer-events: auto;
    visibility: visible;
}

/* コンテンツエリアのアニメーション */
.fg-hamburger-content {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease;
}

.fg-hamburger-panel[hidden] {
    display: none !important;
}

/* オーバーレイ */
.fg-hamburger-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 9998;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.fg-hamburger-panel:not([hidden]) .fg-hamburger-overlay {
    opacity: 1;
}

/* コンテンツエリア */
.fg-hamburger-content {
    position: fixed;
    background: var(--menu-bg-color, #ffffff);
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    z-index: 99999;
    padding: 60px 0 30px;
    height: 100vh;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

/* スライド方向: 右から */
.fg-hamburger-panel--right .fg-hamburger-content {
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(100%);
}

.fg-hamburger-panel--right.is-active .fg-hamburger-content {
    transform: translateX(0);
}

/* スライド方向: 左から */
.fg-hamburger-panel--left .fg-hamburger-content {
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    transform: translateX(-100%);
}

.fg-hamburger-panel--left.is-active .fg-hamburger-content {
    transform: translateX(0);
}

/* スライド方向: 上から */
.fg-hamburger-panel--top .fg-hamburger-content {
    top: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 100vh;
    transform: translateY(-100%);
}

.fg-hamburger-panel--top.is-active .fg-hamburger-content {
    transform: translateY(0);
}

/* スライド方向: 下から */
.fg-hamburger-panel--bottom .fg-hamburger-content {
    bottom: 0;
    left: 0;
    right: 0;
    height: auto;
    max-height: 100vh;
    transform: translateY(100%);
}

.fg-hamburger-panel--bottom.is-active .fg-hamburger-content {
    transform: translateY(0);
}

/* アニメーション: スライドのみ（デフォルト） */
.fg-hamburger-panel--slide .fg-hamburger-content {
    /* transformのみでアニメーション */
}

/* アニメーション: フェード＋スライド */
.fg-hamburger-panel--fade-slide .fg-hamburger-content {
    opacity: 0;
}

.fg-hamburger-panel--fade-slide.is-active .fg-hamburger-content {
    opacity: 1;
}

/* アニメーション: オーバーレイ（フェードのみ） */
.fg-hamburger-panel--overlay .fg-hamburger-content {
    transform: none !important;
    opacity: 0;
}

.fg-hamburger-panel--overlay.is-active .fg-hamburger-content {
    opacity: 1;
}

/* Forgeeeパーツコンテンツエリア */
.fg-hamburger-parts-content {
    max-width: 100%;
    width: 100%;
    padding: 0 20px;
}

.fg-hamburger-parts-content--full {
    width: 100%;
}

.fg-hamburger-parts-content--container {
    max-width: var(--fg-container-width, 1280px);
    margin: 0 auto;
}

.fg-hamburger-parts-content--narrow {
    max-width: 800px;
    margin: 0 auto;
}

.fg-hamburger-parts-inner {
    width: 100%;
}

/* プレースホルダー */
.fg-hamburger-placeholder {
    padding: 40px 20px;
    text-align: center;
    color: #666;
}

.fg-hamburger-placeholder p {
    margin: 10px 0;
}