/**
 * Header Styles
 * 
 * 各ヘッダーレイアウト用のスタイルは
 * template-parts/header/以下の各ファイルで管理
 * 
 * @package DGF_Theme
 */

/* 共通のヘッダースタイル */
.dgf-header {
    transition: all 0.3s ease;
    position: relative;
    z-index: 999; /* ドロップダウンメニューが正しく表示されるように */
}

/* スティッキーヘッダーのブラー効果サポート */
.dgf-header.dgf-sticky-active {
    /* ブラー効果が適用される場合のベーススタイル */
    will-change: transform, backdrop-filter;
}

/* ブラー効果が有効な場合の背景調整 */
.dgf-header[style*="backdrop-filter"] {
    /* ブラー効果時は境界線を柔らかく */
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* ナビゲーションメニューのホバー効果 */
.dgf-header .main-navigation a:hover,
.dgf-header .main-navigation a:focus {
    color: var(--dgf-nav-hover-color, #007cba) !important;
    transition: color 0.3s ease;
}

/* サブメニューのホバー効果も対応 */
.dgf-header .main-navigation .sub-menu a:hover,
.dgf-header .main-navigation .sub-menu a:focus {
    color: var(--dgf-nav-hover-color, #007cba) !important;
}

/* ドロップダウンメニューは常に通常時の色を使用 */
.dgf-header .main-navigation .sub-menu {
    z-index: 1001; /* ヘッダーより上に表示 */
}

.dgf-header .main-navigation .sub-menu a {
    color: var(--dgf-header-text-color, #333333) !important;
}

.dgf-header .main-navigation .sub-menu a:hover,
.dgf-header .main-navigation .sub-menu a:focus {
    color: var(--dgf-nav-hover-color, #007cba) !important;
}

/* オーバーレイ時もドロップダウンは通常色を維持 */
body.dgf-header-transparent:not(.scrolled) .main-navigation .sub-menu a {
    color: var(--dgf-header-text-color, #333333) !important;
}

body.dgf-header-transparent:not(.scrolled) .main-navigation .sub-menu a:hover,
body.dgf-header-transparent:not(.scrolled) .main-navigation .sub-menu a:focus {
    color: var(--dgf-nav-hover-color, #007cba) !important;
}

/* スティッキー時もドロップダウンは通常色を維持 */
.dgf-header.dgf-sticky-active .main-navigation .sub-menu a {
    color: var(--dgf-header-text-color, #333333) !important;
}

.dgf-header.dgf-sticky-active .main-navigation .sub-menu a:hover,
.dgf-header.dgf-sticky-active .main-navigation .sub-menu a:focus {
    color: var(--dgf-nav-hover-color, #007cba) !important;
}

/* スマートスティッキーヘッダーの隠れアニメーション */
.dgf-header.dgf-header-hidden {
    transform: translateY(-100%) !important;
    transition: transform 0.3s ease;
}

/* カードアニメーション時のスマートスティッキー */
.dgf-header.dgf-sticky-active[data-sticky-animation="card"].dgf-header-hidden,
.dgf-header.dgf-sticky-active[data-sticky-animation="card-blur"].dgf-header-hidden {
    transform: translateY(calc(-100% - 20px)) !important;
}

/* モバイルデバイスでのブラー効果最適化 */
@media (max-width: 768px) {
    .dgf-header[style*="backdrop-filter"] {
        /* モバイルではパフォーマンスを考慮してブラー強度を調整 */
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
}

/* Centeredレイアウトのスティッキー時のスタイル */
.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky {
    /* スティッキー時は要素を再配置 */
    display: flex;
    align-items: center;
}

/* コンテナを横並びに */
.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky .dgf-header-container {
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    width: 100%;
    display: flex;
}

/* コンテナ幅設定 - 通常の設定を維持 */
/* containedクラスがある場合は既に幅が設定されているので追加のスタイル不要 */

/* ロゴを左に配置 */
.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky .dgf-site-branding {
    flex: 0 0 auto;
    margin-right: 2rem;
}

.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky .dgf-site-logo {
    /* ロゴサイズはACF設定の最大幅を使用 */
    height: auto;
}

/* メニューを中央に配置 */
.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky .main-navigation {
    flex: 1 1 auto;
    margin-top: 0;
    display: flex;
    justify-content: center;
}

/* CTAを右に移動してコンテナ内に配置 */
.dgf-header-centered.dgf-sticky-active.dgf-centered-sticky .dgf-header-cta {
    position: static !important;
    flex: 0 0 auto;
    top: auto !important;
    right: auto !important;
    margin-left: 2rem;
}

/* ヘッダーオーバーレイスタイル（一番上にいる時だけ浮かせる） */
body.dgf-header-transparent .site-header.dgf-header-standard,
body.dgf-header-transparent .site-header.dgf-header-centered,
body.dgf-header-transparent .site-header.dgf-header-split,
body.dgf-header-transparent .site-header.dgf-header-minimal {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    z-index: 1000;
    background-color: transparent !important;
}

/* オーバーレイ時の初期状態（スクロールしていない時） */
body.dgf-header-transparent:not(.scrolled) .site-header {
    background-color: transparent;
}

/* オーバーレイ時のテキスト色（白色想定） */
body.dgf-header-transparent:not(.scrolled) .site-header,
body.dgf-header-transparent:not(.scrolled) .site-header a,
body.dgf-header-transparent:not(.scrolled) .main-navigation a,
body.dgf-header-transparent:not(.scrolled) .dgf-site-title a {
    color: #ffffff;
}

/* オーバーレイ時のホバー色 */
body.dgf-header-transparent:not(.scrolled) .main-navigation a:hover,
body.dgf-header-transparent:not(.scrolled) .main-navigation a:focus {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* ヘッダー下のコンテンツがヘッダーの高さ分下がらないようにする */
body.dgf-header-transparent .site-content {
    padding-top: 0;
}

/* スクロール時は通常のヘッダーに戻る */
body.dgf-header-transparent.scrolled .site-header {
    position: fixed;
    background-color: var(--dgf-header-bg-color, #ffffff);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

/* スクロール時は通常のテキスト色に戻る */
body.dgf-header-transparent.scrolled .site-header,
body.dgf-header-transparent.scrolled .site-header a,
body.dgf-header-transparent.scrolled .main-navigation a,
body.dgf-header-transparent.scrolled .dgf-site-title a {
    color: var(--dgf-header-text-color, #333333);
}

/* プレースホルダーの調整 */
body.dgf-header-transparent .dgf-header-placeholder {
    display: none !important;
}

/* ==========================================================================
   ミニマルヘッダー
   ========================================================================== */
/* 基本的なミニマルヘッダースタイルはheader-minimal.php内で管理 */

/* ミニマルヘッダーのスティッキー時のスタイル */
.dgf-header-minimal.dgf-sticky-active {
    /* JavaScriptでfixedに変更される */
}

/* レスポンシブ: モバイルではミニマルヘッダーのサイズ調整 */
@media (max-width: 767px) {
    .dgf-header-minimal .dgf-site-title {
        font-size: 1.25rem;
    }
    
    .dgf-header-inner-minimal {
        padding: 0 1rem;
    }
    
    .dgf-header-inner-minimal.dgf-header-inner-center .dgf-hamburger-left {
        left: 1rem;
    }
    
    .dgf-header-inner-minimal.dgf-header-inner-center .dgf-hamburger-right {
        right: 1rem;
    }
}

/* ==========================================================================
   レスポンシブ対応 - ブレイクポイントでの切り替え
   ========================================================================== */
/* ブレイクポイントはheader.phpで動的に生成されるため、ここでは定義しない */
/* ACF設定: レイアウト・デザイン > 共通設定 > レイアウト設定（ベース） > タブレット ブレークポイント */