/* custom-header.css — header.hbs 専用。document_head.hbs から全ページ共通で読み込まれる */

/* ===== トークン ===== */
:root {
  --spacing-sss: 4px;
  --spacing-ss: 8px;
  --spacing-s: 16px;
  --spacing-m: 24px;
  --color-text-lixil-gray: #3C3B38;
  --color-text-on-surface: #FFFFFF;
  --color-text-primary: #505050;
  --color-bg-white: #FFFFFF;
  --color-border-base: #DFDFDF;
  --color-border-orange: #ED6C00;
  --font-size-title-h4: 16px;
  --font-size-body-m: 14px;
  --font-size-body-l: 16px;
  --font-weight-w3: 300;
  --font-weight-w6: 600;
  --line-height-base: 1.5;
  --shadow-md: 0px 6px 16px 0px #0000001F;
  /*! ヘッダーバーとメニューパネルが共用。片方だけ直すと幅がずれる */
  --custom-header-max-width: 1200px;
}
@media (min-width: 768px) {
  :root {
    --spacing-sss: 8px;
    --spacing-ss: 16px;
    --spacing-s: 24px;
    --spacing-m: 40px;
  }
}

/* ===== ページ全体の余白リセット ===== */
/*! body 単独では style.css に負ける */
html body {
  margin: 0;
}

/* ===== ヘッダーバー ===== */
.siteHeader.custom-header__bar {
  background-color: var(--color-text-lixil-gray);
}
.siteHeader__container.custom-header__container {
  max-width: var(--custom-header-max-width);
  padding: var(--spacing-sss) var(--spacing-s);
}

/* ===== ロゴ・サイトタイトル ===== */
.siteHeader__titleContainer.custom-header__titleContainer > a {
  display: flex;
  align-items: center;
  gap: 8px;
}
.custom-header__logo {
  display: block;
  width: 80px; /* Mobile・PC共通 */
  /*! height を固定値に戻さないこと（アセットの比率をそのまま使うため） */
  height: auto;
  flex-shrink: 0;
}
.siteHeader__title.custom-header__title {
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
}
@media (max-width: 767px) {
  .siteHeader__title.custom-header__title {
    font-size: var(--font-size-body-m);
  }
}

/* ===== ハンバーガーメニューボタン ===== */
.siteHeader__menu.custom-header__menu {
  background-image: none; /*! style.css の画像アイコンを打ち消す */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  min-height: 36px;
  cursor: pointer;
  text-decoration: none;
}
@media (max-width: 767px) {
  .siteHeader__menu.custom-header__menu {
    min-height: 24px;
    gap: 2px;
  }
}
.custom-header__menuIcon {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
}
@media (max-width: 767px) {
  .custom-header__menuIcon {
    width: 16px;
    height: 11px;
  }
}
.custom-header__menuIcon span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-text-on-surface);
}
.custom-header__menuLabel {
  font-size: 12px; /*! トークン体系外の直値 */
  font-weight: var(--font-weight-w3);
  line-height: 1; /*! トークン体系外の直値 */
  color: var(--color-text-on-surface);
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* ===== 開いたメニューパネル（style.css の直値を上書き） ===== */
/*! 上書きは header.hbs の custom-header__navPanel / custom-header__nav が前提。外すと元の直値に戻る */
/*! 背景の2つは元クラスとの複合が必須。単独クラスでは style.css に負ける */
.globalNav.custom-header__navPanel {
  max-width: var(--custom-header-max-width);
  left: 0;
  right: 0;
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
  background-color: var(--color-bg-white);
  box-shadow: var(--shadow-md);
}
.globalNav__navContainer.custom-header__nav {
  background-color: var(--color-bg-white);
  padding-inline: var(--spacing-s);
}
.custom-header__nav .globalNav__navItem {
  border-bottom-color: var(--color-border-base);
}
.custom-header__nav .globalNav__heading {
  border-left-color: var(--color-border-orange);
  font-size: var(--font-size-title-h4);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
}
.custom-header__nav .globalNav__navItemLink {
  color: var(--color-text-primary);
  font-size: var(--font-size-body-m);
  font-weight: var(--font-weight-w6);
  line-height: var(--line-height-base);
}
@media (min-width: 768px) {
  .custom-header__nav .globalNav__navItemLink {
    font-size: var(--font-size-body-l);
  }
}