/**
 * Header Bar - Simple Pattern CSS
 * 依存: ../../header-bar.css（共通CSS）
 * シンプルパターン固有のスタイル - ミニマルなデザイン
 */

/* ==========================================================================
   Simple Pattern Variables - シンプルパターン専用変数
   ========================================================================== */

.header-bar-pattern-simple {
    /* シンプルパターン固有の設定変数 */
    --simple-border-color: transparent;
    --simple-border-width: 0;
    --simple-border-style: none;
    --simple-padding: 0 1rem;
    --simple-text-align: center;
    
    /* ホバー時の設定 */
    --simple-hover-transition: color 0.2s ease;
    --simple-hover-underline: 2px solid var(--arkhe-color-primary, #007cba);
    
    /* アクティブ状態 */
    --simple-active-underline: 3px solid var(--arkhe-color-primary, #007cba);
}

/* ==========================================================================
   Simple Pattern Specific Styles - シンプルパターン固有スタイル
   ========================================================================== */

/* メニュー項目のボーダー（シンプルパターンはボーダーなし） */
.header-bar-pattern-simple .header-bar-menu > li {
    border-right: var(--simple-border-width) var(--simple-border-style) var(--simple-border-color);
    flex: none;
    width: auto;
}

.header-bar-pattern-simple .header-bar-menu > li:last-child {
    border-right: none;
}

/* メニューコンテナ（間隔調整） */
.header-bar-pattern-simple .header-bar-menu {
    justify-content: center;
}

/* ホバー効果（シンプル - 下線のみ） */
.header-bar-pattern-simple .header-bar-menu > li:hover {
    background-color: transparent;
    transition: var(--simple-hover-transition);
}

.header-bar-pattern-simple .header-bar-menu > li:hover a {
    color: var(--header-bar-hover-text-color, var(--arkhe-color-primary, #007cba));
    border-bottom: var(--simple-hover-underline);
}

/* アクティブ状態（現在ページ - 下線のみ） */
.header-bar-pattern-simple .current-menu-item,
.header-bar-pattern-simple .current_page_item,
.header-bar-pattern-simple .current-menu-ancestor,
.header-bar-pattern-simple .current-page-ancestor,
.header-bar-pattern-simple .current-menu-parent,
.header-bar-pattern-simple .current_page_parent {
    background-color: transparent;
}

.header-bar-pattern-simple .current-menu-item > a,
.header-bar-pattern-simple .current_page_item > a,
.header-bar-pattern-simple .current-menu-ancestor > a,
.header-bar-pattern-simple .current-page-ancestor > a,
.header-bar-pattern-simple .current-menu-parent > a,
.header-bar-pattern-simple .current_page_parent > a {
    background-color: transparent;
    border-bottom: var(--simple-active-underline);
    border-top: none;
}

/* メニューリンクの調整 */
.header-bar-pattern-simple .header-bar-menu a {
    padding: var(--simple-padding);
    border-bottom: 2px solid transparent;
    transition: var(--simple-hover-transition);
    height: 30px;
}

.header-bar-pattern-simple .hb-link{
        flex-direction: row;
        font-size: min(14px, 2.6vw);
}

/* ドロップダウンアイコン */
.header-bar-pattern-simple .dropdown-icon {
    position: relative;
    right: initial;
    top: -3px;
}

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

/* ==========================================================================
   Simple Pattern Responsive - レスポンシブ対応
   ========================================================================== */
@media not all and (min-width: 1000px) {
.header-bar-pattern-simple .l-header__logo{
    font-size: unset;
}
.header-bar-pattern-simple .has-image>.c-headLogo{
    height: auto;
}
}

@media (max-width: 768px) {
    
    .header-bar-pattern-simple .header-bar-menu > li {
        flex: 1;
    }
    
    .header-bar-pattern-simple .header-bar-menu a {
        padding: 0.5rem 0.25rem;
    }
}

@media (max-width: 480px) {
    
    .header-bar-pattern-simple .header-bar-menu a {
        padding: 0.4rem 0.1rem;
    }
    
    .header-bar-pattern-simple .dropdown-icon {
        font-size: 0.7rem;
        margin-left: 0.25rem;
    }
}

/* ==========================================================================
   Simple Pattern Design Notes - デザインノート
   ========================================================================== */

/*
シンプルパターンの特徴:
1. ボーダーなし - すっきりとした見た目
2. 下線によるホバー・アクティブ表示
3. 背景色の変更なし
4. 均等配置ではなく、コンテンツ幅に応じた配置
5. 余白を多めに取った余裕のあるデザイン

使用場面:
- ミニマルなデザインを好む場合
- メニュー項目が少ない場合
- 上品で洗練された印象を与えたい場合
*/