/**
 * Header Bar - Default Pattern CSS
 * 依存: ../../header-bar.css（共通CSS）
 * デフォルトパターン固有のスタイル - 拡張性を考慮した設計
 */

/* ==========================================================================
   Default Pattern Variables - 将来のパターン追加時に参考にする変数設計
   ========================================================================== */

.header-bar-pattern-default {
    /* デフォルトパターン固有の設定変数 */
    --default-border-color: rgba(0, 0, 0, 0.1);
    --default-border-width: 1px;
    --default-border-style: solid;
    --default-active-border-top: 3px solid var(--arkhe-color-primary, #007cba);
    --default-text-align: center;
    --default-height: 60px;
    
    /* ホバー時の設定 */
    --default-hover-transition: background-color 0.3s ease;
}

/* ==========================================================================
   Default Pattern Specific Styles - 既存構造維持
   ========================================================================== */

/* メニュー項目のボーダー（既存のクラス名を維持） */
.header-bar-pattern-default .header-bar-menu > li {
    border-right: var(--default-border-width) var(--default-border-style) var(--default-border-color);
}

.header-bar-pattern-default .header-bar-menu > li:last-child {
    border-right: none;
}
.header-bar-pattern-default .hb-icon--dropdown{
    transform: translateY(-50%);
}

.header-bar-pattern-default .hb-item--dropdown:hover .hb-icon--dropdown {
    transform: translateY(-50%) rotate(45deg);
}

/* ==========================================================================
   Menu Links - BEMメニューリンク
   ========================================================================== */

.header-bar-pattern-default .hb-link {
    min-height: var(--default-height);
        font-size: min(16px, 2.5vw);
}

 
/* ==========================================================================
   Default Pattern Responsive - レスポンシブ対応
   ========================================================================== */

@media (max-width: 768px) {

    .header-bar-pattern-default {
        --default-height: 50%;
    }

    .header-bar-pattern-default .header-bar-menu > li {
        border-right: none;
        border-bottom: var(--default-border-width) var(--default-border-style) var(--default-border-color);
    }
    
    .header-bar-pattern-default .header-bar-menu > li:last-child {
        border-bottom: none;
    }
    
    /* スマホでは上部ボーダーを非表示 */
    .header-bar-pattern-default .current-menu-item > a,
    .header-bar-pattern-default .current_page_item > a,
    .header-bar-pattern-default .current-menu-ancestor > a,
    .header-bar-pattern-default .current-page-ancestor > a,
    .header-bar-pattern-default .current-menu-parent > a,
    .header-bar-pattern-default .current_page_parent > a {
        border-top: none;
    }
}

@media (max-width: 480px) {
    .header-bar-pattern-default {
        --default-height: 50%;
    }
}

/* ==========================================================================
   Pattern Extension Guide - 新パターン追加時のガイドライン
   ========================================================================== */

/*
将来のパターン追加例:

.header-bar-pattern-modern {
    --modern-border-radius: 8px;
    --modern-gap: 0.25rem;
    --modern-box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.header-bar-pattern-modern .header-bar-menu > li {
    border-radius: var(--modern-border-radius);
    margin: 0 var(--modern-gap);
    box-shadow: var(--modern-box-shadow);
    border-right: none;
}

新パターン作成手順:
1. templates/modern/ ディレクトリ作成
2. modern.css, modern.js, modern.php ファイル作成
3. header-bar.php のパターン定義に追加
4. カスタマイザー設定追加
*/