/* /assets/css/header.css（全文：logo stack対応に更新） */
/* =========================================================
   fudosha.net
   assets/css/header.css
   - Header (SP: fixed / PC: absolute = scroll with page)
   - Brand logo
   - PC overlay: brandIllustOverlay (A)
   - SP trigger button (hamburger)
   ========================================================= */

/* -------------------------
   Header (default: fixed for SP)
   ------------------------- */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;

  background: transparent;
  border-bottom: none;
  backdrop-filter: none;

  /* フェードの制御は motion.css に集約（fixed page: シーケンス制御 / HOME: 従来の挙動） */
  opacity: 1;
}

/* PCは固定しない（ページと一緒に流す） */
@media (min-width: 768px){
  .site-header{
    position: absolute;
  }
}

.header-inner{
  width: var(--bgw);
  max-width: var(--max);
  margin: 0 auto;
  padding: calc(18px * var(--pc-ui-scale, 1)) 0;
  position: relative;
}

/* brand wrapper */
.brand{
  position: relative;
  width: 100%;
  overflow: visible; /* overlay を下にはみ出させるため */
}

/* =========================================================
   PC: ロゴ箱を 960x300 として固定（nav の基準を必ずロゴ下端へ戻す）
   ========================================================= */
@media (min-width: 768px){
  .brand-link{
    aspect-ratio: 960 / 300;   /* logo-pc.png の比率 */
  }
}

/* =========================================================
   (A) Brand illust overlay (PC only)
   - ロゴ(brand-link)より上
   - PCナビ(#navDesktopSlot)より下
   - クリックを邪魔しない（pointer-events:none）
   - overlay 自体は 960x420 の箱を作って下へはみ出す
   ========================================================= */

.brand-illust-overlay{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;

  /* illust の想定比率（960x420） */
  aspect-ratio: 960 / 420;
  height: auto;

  z-index: 10; /* logo(1) < overlay(2) < nav(3) */
  pointer-events: none;

  display: none;
}

@media (min-width: 768px){
  body.has-brand-illust .brand-illust-overlay{
    display: block;
  }
}

/* JSが差し込む img */
.brand-illust-overlay img{
  display: block;
  width: 100%;
  height: auto;

  object-fit: contain;
  object-position: top center;

  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* =========================================================
   Logo base (stack)
   ========================================================= */

.brand-link{
  text-decoration: none;
  color: inherit;
  display: block;
  width: 100%;
  position: relative;
  z-index: 1;
}

.brand-logo-stack{
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
}

/* スタック内の各ロゴは同じ箱に重ねる */
.brand-logo{
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: top center;
}

/* PCではSPロゴを隠す / SPではPCロゴを隠す */
@media (min-width: 768px){
  .brand-logo--sp{ display: none !important; }
}
@media (max-width: 767px){
  .brand-logo--pc{ display: none !important; }
}

/* SP時：ロゴ箱モデル統一 */
@media (max-width: 767px){
  .brand{
    aspect-ratio: 1280 / 400; /* logo-sp.png の比率 */
  }

  .brand-link{
    width: 100%;
    height: 100%;
  }

  .brand-illust-overlay{
    display: none !important;
  }
}

/* =========================================================
   Desktop nav container layering
   ========================================================= */
#navDesktopSlot{
  position: relative;
  z-index: 3;
}

/* -------------------------
   SP trigger button
   ------------------------- */
.menu-toggle{
  position: fixed;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  right: calc(env(safe-area-inset-right, 0px) + 12px);
  z-index: 1900;

  width: 50px;
  height: 50px;
  border-radius: 12px;
  border: 0;

  background: rgba(255, 255, 255, 0.438);
  box-shadow: 0 6px 16px rgba(15, 18, 28, 0.10);
  cursor: pointer;
}

@media (min-width: 768px){
  .menu-toggle{ display: none; }
}

.menu-icon{
  position: relative;
  display: block;
  width: 22px;
  height: 2px;
  margin: 0 auto;

  background: rgba(15,18,28,0.72);
  transform: translateY(6px);
  transition: background .25s ease;
}

.menu-icon::before,
.menu-icon::after{
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;

  background: rgba(15,18,28,0.72);
  transition: transform .25s ease, top .25s ease, opacity .25s ease;
}

.menu-icon::before{ top: -6px; }
.menu-icon::after { top: 6px; }

.menu-toggle[aria-expanded="true"] .menu-icon{ background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-icon::before{
  top: 0;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-icon::after{
  top: 0;
  transform: rotate(-45deg);
}