/*==============================================================================
  ヘッダー共通スタイル
  対象: 予約サイト全ページ（レディース）
  ファイル: common/css/header-common.css

  構成:
    1. 固定ヘッダー (#renew_header)
       ページ上部に吸い付くスティッキーヘッダー。
       ロゴ（左）・ログイン情報（右）を横並びにする。
       スクロール時は磨りガラス（backdrop-filter）で背景を透かす。

    2. ログイン情報バー (.loginInfo)
       ヘッダー外にも単体で使われる横並びのログイン状態表示エリア。
       ログイン中のユーザー名・ログアウトボタンなどを内包する。

    3. ログイン/ログアウトボタン (.btn_loginlogout)
       オレンジのピルボタン。tokens.css の --ka-orange 系トークンを使用。

  依存:
    - common/css/tokens.css（--ka-orange, --ka-orange-hover,
        --ka-orange-pressed, --ka-radius-pill, --reservation-content-width）
==============================================================================*/


/* ─── 1. 固定ヘッダー ──────────────────────────────────────────────────────── */

/* ヘッダーバー本体: 最上部に固定・スクロール中は磨りガラス表示 */
#renew_header {
  position: sticky;
  top: 0;
  z-index: 20;                      /* ドロワー等より低く、コンテンツより高い */
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: rgba(250, 245, 238, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(227, 216, 206, 0.95);
}

/* ロゴコンテナ: 収縮しないよう flex-shrink を無効化 */
#renew_header #pcLogo {
  flex: 0 0 auto;
  margin: 0;
  padding: 0;
}

/* ロゴ画像: 幅固定（高さは自動でアスペクト比を維持） */
#renew_header #pcLogo img {
  width: 110px;
  display: block;
}

/* ページ名テキスト: ヘッダー内では非表示（アクセシビリティ用タイトルのみ保持） */
#renew_header #page_name {
  display: none;
}

/* ヘッダー内のログイン情報エリア: 右端に配置するため余白・幅をリセット */
#renew_header .loginInfo {
  flex: 0 0 auto;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ヘッダー内のボタン: 通常より小さめのコンパクトサイズ */
#renew_header .ka-btn {
  padding: 8px 16px;
  font-size: 13px;
  min-width: auto;
}


/* ─── 2. ログイン情報バー（ヘッダー外で単体利用） ──────────────────────── */

/* ログイン情報バー本体: ユーザー名・ボタンを横並びで右寄せ */
.loginInfo {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 12px;
  padding-left: 2.275%;
  padding-right: 2.275%;
  clear: none;
  float: none;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ログイン情報内テキスト: margin を消してベースラインを揃える */
.loginInfo p {
  margin: 0;
  text-align: right;
}

/* ログイン中のユーザー名: 行間を確保 */
.loginInfo #loginname {
  line-height: 1.5;
}


/* ─── 3. ログイン / ログアウトボタン ────────────────────────────────────── */

/* ボタン <a>: オレンジのピルボタン・立体感のある底面シャドウ付き */
.btn_loginlogout a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ka-orange);
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 8px 16px;
  border-radius: var(--ka-radius-pill);
  border: 1px solid transparent;
  box-shadow: 0 3px 0 var(--ka-orange-pressed);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s, box-shadow 0.2s;
}

/* ホバー: 少し濃いオレンジ・シャドウを高く */
.btn_loginlogout a:hover {
  background: var(--ka-orange-hover);
  box-shadow: 0 4px 0 var(--ka-orange-pressed);
  color: #fff;
}


/* ─── レスポンシブ（タブレット 481px 以上） ────────────────────────────── */

@media only screen and (min-width: 481px) {

  /* ログイン情報バー: タブレット幅に合わせてセンタリング */
  .loginInfo {
    width: 90.675%;
    padding-left: 1.1625%;
    padding-right: 1.1625%;
    clear: none;
    float: none;
    margin-left: auto;
  }

}


/* ─── レスポンシブ（PC 769px 以上） ─────────────────────────────────────── */

@media only screen and (min-width: 769px) {

  /* ヘッダーバー: コンテンツ幅を基準に左右パディングを調整 */
  #renew_header {
    padding-left:  max(32px, calc((100% - var(--reservation-content-width)) / 2));
    padding-right: max(32px, calc((100% - var(--reservation-content-width)) / 2));
  }

  /* ログイン情報バー: コンテンツ幅に合わせてセンタリング */
  .loginInfo {
    width: var(--reservation-content-width);
    padding-left: 0.75%;
    padding-right: 0.75%;
    max-width: 1232px;
    margin: auto;
    clear: none;
    float: none;
    margin-left: auto;
  }

}