/* ========================================
   ヘッダー追従 完全修正版 - les SALON
   overflow-x: hidden との共存
   ======================================== */

/* 
  問題: overflow-x: hidden が親にあると sticky が効かない
  解決: fixed を使い、transform で GPU 加速
*/

.elegant-header {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(248, 245, 242, 0.98));
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(139, 115, 85, 0.08);
  z-index: 999 !important;
  border-bottom: 1px solid rgba(201, 168, 130, 0.15);
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* WordPress管理バー対応 */
.admin-bar .elegant-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  .admin-bar .elegant-header {
    top: 46px !important;
  }
}

/* ヘッダーの高さ分のスペーサー（fixedで画面から消えるため） */
body::before {
  content: '';
  display: block;
  height: 80px;
  width: 100%;
}

/* 管理バー表示時のスペーサー調整 */
.admin-bar body::before {
  height: calc(80px + 32px);
}

@media screen and (max-width: 782px) {
  .admin-bar body::before {
    height: calc(60px + 46px);
  }
}

@media (max-width: 768px) {
  body::before {
    height: 60px;
  }
}

/* ヒーローセクションは例外（全画面表示） */
.hero-section ~ * {
  /* 通常のコンテンツにのみ適用 */
}

/* ヒーローセクション自体の調整は hero.css で */