/* ============================================================
   記事ページ共通スタイル
   - カスタム固定ヘッダー分のオフセット
   - SWELL 親テーマ CSS のヘッダー干渉リセット
   ============================================================ */

/* カスタムヘッダー（position:fixed / 高さ約72px）分のオフセット */
body.kimono-article {
  padding-top: 72px !important;
}

@media (max-width: 768px) {
  body.kimono-article {
    padding-top: 60px !important;
  }
}

/* 管理バー（デスクトップ 32px / SP 46px）オフセット */
body.admin-bar.kimono-article {
  padding-top: 104px !important; /* 72 + 32 */
}
body.admin-bar .site-header {
  top: 32px !important;
}

@media screen and (max-width: 782px) {
  body.admin-bar.kimono-article {
    padding-top: 106px !important; /* 60 + 46 */
  }
  body.admin-bar .site-header {
    top: 46px !important;
  }
}

/* ===========================================================
   SWELL 親テーマ CSS の干渉リセット
   記事ページでは SWELL の全体 CSS が読み込まれるため、
   #body_wrap 内にあるカスタムヘッダーに意図しないスタイルが
   当たる。 #body_wrap .xxx で詳細度を上げて封じる。
   =========================================================== */

/* ヘッダー背景・z-index の保護 */
#body_wrap .site-header {
  background: rgba(250,247,242,.85) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border-bottom: 1px solid var(--c-border) !important;
}

/* ロゴリンクの色・下線リセット */
#body_wrap .logo {
  color: inherit !important;
  text-decoration: none !important;
}

/* ナビゲーションリンク — SWELLのリンク色・下線を上書き */
#body_wrap .global-nav a {
  font-size: 14px !important;
  font-weight: 400 !important;
  color: var(--c-text-soft) !important;
  text-decoration: none !important;
  background: none !important;
  padding: 4px 0 !important;
}

/* 言語切り替えボタン */
#body_wrap .lang-switch__btn {
  font-size: 13px !important;
  color: var(--c-text-muted) !important;
  background: none !important;
  border: none !important;
  font-weight: 400 !important;
  cursor: pointer !important;
  padding: 2px 4px !important;
  text-decoration: none !important;
}

#body_wrap .lang-switch__btn.is-active {
  color: var(--c-text) !important;
  font-weight: 600 !important;
}

/* ハンバーガーボタン — SWELLのbutton CSSリセット */
#body_wrap .hamburger {
  appearance: none !important;
  -webkit-appearance: none !important;
  background: none !important;
  border: none !important;
  padding: 0 !important;
  cursor: pointer !important;
}

#body_wrap .hamburger span {
  background: var(--c-text) !important;
  display: block !important;
  height: 1.5px !important;
  margin: 0 !important;
}

/* SP: ナビ表示切替の保護（front-page.css の media query が SWELL に上書きされないよう） */
@media (max-width: 768px) {
  #body_wrap .global-nav {
    display: none !important;
  }
  #body_wrap .hamburger {
    display: flex !important;
  }
}

/* SP: ハンバーガーメニュー — 開いた状態 */
@media (max-width: 768px) {
  #body_wrap .global-nav.is-open {
    display: flex !important;
    flex-direction: column !important;
    position: fixed !important;
    top: 60px;
    left: 0;
    right: 0;
    background: rgba(250, 247, 242, 0.97) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border-bottom: 1px solid var(--c-border) !important;
    padding: var(--sp-4) var(--sp-5) !important;
    gap: var(--sp-4) !important;
    z-index: 99 !important;
  }

  #body_wrap .global-nav.is-open a {
    display: block !important;
    font-size: 15px !important;
    padding: var(--sp-2) 0 !important;
    border-bottom: 1px solid var(--c-border) !important;
    color: var(--c-text) !important;
  }

  #body_wrap .global-nav.is-open a:last-child {
    border-bottom: none !important;
  }
}

/* SWELL が JS で動的追加する固定ヘッダーをブロック */
body.kimono-article #l_header,
body.kimono-article .l-header,
body.kimono-article #fix_header,
body.kimono-article .l-fixHeader,
body.kimono-article .c-fixedHeader {
  display: none !important;
  pointer-events: none !important;
}