/* EX REDESiGN — assets/css/header.css
 * Header / site title / brand / nav row / sticky header / header CTA / custom logo / active nav. Submenu スタイルは submenu.css、モバイルナビは mobile-nav.css に分離。
 *
 * Selectors: .ex-announcement-bar, .ex-announcement-inner, .ex-header-brand, .ex-header-brand-text, .ex-header-cta, .ex-header-menu, .ex-header-nav, .ex-header-nav-inner, .ex-site-header, .ex-site-logo, .ex-site-title, .exr-header-layout-single, … +1
 * Variables consumed: --color-border-subtle, --color-surface, --color-surface-raised, --color-text-muted, --color-text-primary, --color-text-secondary, --exr-gutter, --exr-logo-area-height, …
 *
 * Sections (search anchors — grep `@section <name>`):
 *   @section header                     L16-L181  Header
 *   @section site-title-tagline         L182-L207  Site title & tagline
 *   @section navigation                 L208-L222  Navigation
 *   @section header-cta-button          L223-L245  Header CTA button
 *   @section custom-logo                L246-L259  Custom Logo
 *   @section active-nav-item            L260-L268  Active nav item
 */

/* ── Header ── */
/* The sticky positioning is applied to the outer template-part wrapper
   (<header class="wp-block-template-part">), not the inner .ex-site-header,
   because position:sticky is constrained to its parent block. The inner
   header's parent is the outer template-part wrapper which has nearly the
   same height — leaving no scroll room for the sticky behavior to show.
   Targeting the outer wrapper makes its parent .wp-site-blocks (the whole
   page), giving the header the full page height to stick within. */
header.wp-block-template-part {
  position: sticky;
  top: 0;
  z-index: 100;
}
.ex-site-header {
  width: 100%;
  background: var(--color-surface);
}
.ex-announcement-bar {
  width: 100%;
  background: var(--color-surface-raised);
  border-bottom: 1px solid var(--color-border-subtle);
}
.ex-announcement-inner {
  /* container_width = OUTER 幅、gutter = 内側 INSET というユーザー期待に沿う。
     alignwide との幅揃えは dynamic-css.php の .has-global-padding > .alignwide ルールで処理。 */
  max-width: var(--exr-container, 1200px);
  margin-inline-start: auto;
  margin-inline-end: auto;
  padding: 0.5rem var(--exr-gutter, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ex-announcement-inner p,
.ex-announcement-inner .wp-block-paragraph {
  font-size: var(--exr-fs-xs) !important;
  letter-spacing: 0.03em;
  color: var(--color-text-muted) !important;
  margin: 0;
}
.ex-header-nav { border-bottom: 1px solid var(--color-border-subtle); }

/* メニュー背景色 (--exr-menu-bg)
   - 1段モード: .ex-header-nav (ナビ行全体、フル幅なのでそのままビューポート幅) に適用
   - 2段モード: .ex-header-menu (max-width 1200px の中にある) に適用しつつ、
     ::before 擬似要素でビューポート幅まで背景を拡張する（コンテンツは max-width 内、
     背景だけフルブリード）。 left/right: calc(50% - 50vw) は要素を中央転ぐらせて
     ビューポート両端に伸ばすテクニック。 z-index: -1 でナビ項目の後㐩に配置。 */
body.exr-header-layout-single  .ex-header-nav  { background-color: var(--exr-menu-bg, transparent); }
body.exr-header-layout-stacked .ex-header-menu {
  position: relative;
  z-index: 0;  /* establish stacking context so ::before z-index:-1 stays within */
  background-color: var(--exr-menu-bg, transparent);
}
body.exr-header-layout-stacked .ex-header-menu::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  inset-inline-start: calc(50% - 50vw);
  inset-inline-end: calc(50% - 50vw);
  background-color: var(--exr-menu-bg, transparent);
  z-index: -1;
}
.ex-header-nav-inner {
  /* container_width = OUTER 幅、gutter = 内側 INSET を代表するユーザー期待に沿う。
     alignwide との幅揃えは dynamic-css.php の .has-global-padding > .alignwide ルールで処理。 */
  max-width: var(--exr-container, 1200px);
  margin-inline-start: auto;
  margin-inline-end: auto;
  /* Vertical padding is 0 because the row's total height is fully controlled by
     --exr-menu-height (the "menu area height" option). Horizontal padding uses
     the unified --exr-gutter so the row aligns with all other container edges. */
  padding: 0 var(--exr-gutter, 2rem);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* --exr-menu-height is supplied by dynamic.php from the header_menu_height option.
     The row's height equals this value exactly; content is centered within. */
  height: var(--exr-menu-height, 72px);
}

/* Logo auto-sizes based on the tagline toggle — matches the height of the
   adjacent text column (site title alone, or site title + tagline).
   --exr-logo-size is set to 22px (no tagline) or 40px (with tagline) by
   dynamic.php. Capped by --exr-menu-height via min() so the logo never
   overflows the menu row, even if the user sets a small menu height. */
.ex-header-brand { align-items: center; }
.ex-header-brand .wp-block-site-logo img.custom-logo,
.ex-header-brand .wp-block-site-logo img {
  height: min(var(--exr-logo-size, 22px), var(--exr-menu-height, 72px)) !important;
  width: auto !important;
  max-height: none !important;
  display: block;
}

/* === Header layout: stacked (2-row) ===
   The stacked variant uses parts/header-stacked.html as a separate
   template-part (swapped at render time by dynamic.php based on the
   header_layout option). The file encodes the 2-row structure via block
   attributes (orientation:vertical on .ex-header-nav-inner, and the inner
   brand/nav blocks' own justifyContent).

   The rules below handle only dimensional concerns (heights + width:100%),
   which are kept as theme settings (--exr-logo-area-height, --exr-menu-height)
   so they can be tuned from the UI without editing the variant file. */
body.exr-header-layout-stacked .ex-header-nav-inner {
  height: auto;  /* override the single-row height; rows have their own */
  /* Kill WP's default block-gap (.is-layout-flex { gap: 20px }) between the
     brand row and the menu row. Both rows already have explicit heights
     (--exr-logo-area-height / --exr-menu-height), so any gap shows up as a
     dead strip below the brand — making the logo appear top-aligned even
     though it is centered within its own 72px row. */
  gap: 0 !important;
}
/* Stacked-mode brand row: use grid instead of flex so that vertical centering
   cannot be knocked off by WP layout CSS (wp-container-... flex rules) or
   inherited align-self values. `place-items: center` centers each grid item
   on both axes; `grid-template-columns: auto 1fr` keeps the logo at its
   natural width with the text column filling the remainder.

   Flex was the earlier approach but in stacked mode the brand-text column's
   intrinsic height (title + tagline) plus the logo's fixed height created
   mixed alignment signals that reliably centered under flex only if no
   ancestor rule set align-self. Switching to grid avoids that fragility. */
/* 新構造: .ex-header-brand-row がブランド行全体、.ex-header-brand はその左子、
   .ex-header-contact が右子。ブランド行の高さをロゴエリア高さオプションに揃えて、
   コンタクトとボタンをその高さに stretch させる。 */
body.exr-header-layout-stacked .ex-header-brand-row {
  width: 100%;
  min-height: var(--exr-logo-area-height, 72px);
  box-sizing: border-box;
}
body.exr-header-layout-stacked .ex-header-brand {
  height: 100%;
  box-sizing: border-box;
  display: grid !important;
  /* 新構造: 2 グリッドカラム logo (auto) | brand-text (1fr)。cta はコンタクト側に移動したため 3 列目不要。 */
  grid-template-columns: auto 1fr;
  align-items: center !important;
  align-content: center !important;
  justify-content: start !important;
  gap: 1rem;
}
/* Force each direct child to sit centered in its grid cell. Strip any vertical
   margins WP or theme.json may inject via block-gap; those would shift the
   item relative to the cell center. */
body.exr-header-layout-stacked .ex-header-brand > * {
  align-self: center !important;
  justify-self: start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
/* Ensure the site-logo block (wrapper div + inner anchor) doesn't introduce
   inline-whitespace baseline gaps that would push the logo off-center, and
   collapses to the image height so align-self:center on the wrapper actually
   centers the visible image rather than a taller invisible box. */
body.exr-header-layout-stacked .ex-header-brand .wp-block-site-logo,
body.exr-header-layout-stacked .ex-header-brand .wp-block-site-logo a {
  display: flex;
  align-items: center;
  line-height: 0;
  height: auto;
}
body.exr-header-layout-stacked .ex-header-menu {
  width: 100%;
  height: var(--exr-menu-height, 72px);
  box-sizing: border-box;
}
/* In stacked, the logo cap tracks --exr-logo-area-height (the brand row)
   instead of --exr-menu-height (which now controls the nav row below). */
body.exr-header-layout-stacked .ex-header-brand .wp-block-site-logo img.custom-logo,
body.exr-header-layout-stacked .ex-header-brand .wp-block-site-logo img {
  height: min(var(--exr-logo-size, 22px), var(--exr-logo-area-height, 72px)) !important;
}

/* ── Site title & tagline ── */
.ex-header-brand .wp-block-site-title {
  margin: 0 !important;
  line-height: 1 !important;
}
.wp-block-site-title a {
  font-size: var(--exr-fs-xl);
  font-weight: 700;
  letter-spacing: -0.03em;
  color: var(--color-text-primary);
  text-decoration: none;
  line-height: 1;
}
/* Defensive: the nav <ul> should not contribute vertical margins to the header row */
.wp-block-navigation__container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.wp-block-site-tagline {
  font-size: var(--exr-fs-xs) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted) !important;
  margin: 0;  /* spacing handled by .ex-header-brand-text { gap } in flex parent */
  /* Tight line-height so the inherited body 1.75 doesn't inflate the line-box
     and push the glyph visual center up relative to the row center. */
  line-height: 1.2;
}

/* ── Navigation ── */
/* 項目内部の padding (ホバー背景のテキスト周りの余白) は固定。
   項目間の隔たり (ホバー背景同士の距離) は --exr-menu-gap で制御 (下の ul rule)。 */
.wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 200ms;
  padding-block: 0;
  padding-inline: 1rem;
}
/* 項目間の距離。WP コアのデフォルト block-gap を上書き。 */
.ex-header-menu .wp-block-navigation__container {
  gap: var(--exr-menu-gap, 0px) !important;
}
/* Keep the header nav on a single line even when 5–7 pages are present.
   With page-list auto-including all published pages, default flex-wrap caused
   items to fall to a second row and break the header layout. */
.ex-header-menu.wp-block-navigation { flex-wrap: nowrap; }
.wp-block-navigation .wp-block-navigation-item__content:hover {
  color: var(--color-text-primary);
}

/* グローバルメニュー項目のホバー背景色。トップレベル <li> はナビ行高さいっぱいに伸びているため、
   <li> に背景をつければナビ行ボトムまで背景が広がる。サブメニューをホバーしている間も
   :focus-within で背景が保たれる。 */
header .wp-block-navigation__container > .wp-block-navigation-item {
  transition: background-color 150ms ease;
}
header .wp-block-navigation__container > .wp-block-navigation-item:hover,
header .wp-block-navigation__container > .wp-block-navigation-item:focus-within {
  background-color: var(--color-surface-raised, var(--wp--preset--color--surface-raised));
}


/* ── Header CTA button ──
   Sits at the right edge of the brand row in stacked layout, or at the
   right end of the row in single-row layout (placed via parts/header*.html).
   Compact pill-style button using the design system's primary text color. */
.ex-header-cta { margin: 0; }
.ex-header-cta .wp-block-button { margin: 0; }
/* Header CTA の背景色 / 文字色は theme.json の styles.elements.button に一任。
   グローバルスタイル UI でブランド色を一括変更したとき、Header CTA も同期して動くようにするため、
   ここでは形状系 (font-size / padding / border-radius / text-transform / transition) のみ設定。 */
.ex-header-cta .wp-block-button__link {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.6rem 1.25rem;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 200ms;
}

/* ── Custom Logo ── */
.ex-site-logo, .wp-block-site-logo { line-height: 0; }
.ex-site-logo img, .wp-block-site-logo img, .wp-block-site-logo .custom-logo {
  max-height: var(--exr-logo-height, 40px) !important;
  height: auto !important;
  width: auto !important;
  max-width: 200px;
  object-fit: contain;
}
/* Tighten line-height on the site-title and tagline. Body inherits
   line-height 1.75 from theme.json which inflates the line-box around small
   header glyphs and visually shifts content slightly above the row's
   geometric center. 1.2 keeps the line-box close to the glyph height so the
   visual center matches the geometric center. */
.ex-header-brand .wp-block-site-title,
.ex-header-brand .ex-site-title {
  line-height: 1.2;
}

/* Note: there is NO display:none rule for .ex-site-title here. The user
   layout shows logo + site-title + tagline together. If a future site wants
   logo-only, set Site Title via Site Editor or override in a child theme. */
.ex-header-brand {
  gap: 1rem !important; /* horizontal gap between logo and the title/tagline column */
  flex-wrap: nowrap !important; /* ロゴとブランドテキストを狭幅でも右へ並べる（下に折り返さず） */
}
.ex-header-brand-text {
  min-width: 0; /* ブランドテキストコラムを可縮小にし、内部でタグラインを自然折り返し可能にする */
}
.ex-header-brand-text { gap: 4px !important; } /* vertical gap between site title and tagline */


/* ── Active nav item ── */
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content,
.wp-block-navigation .current-page-item > .wp-block-navigation-item__content {
  color: var(--color-text-primary) !important; font-weight: 600;
}


/* ヘッダーコンタクト（2 段レイアウトでロゴ右侧にコンパクトに集める電話ブロック + ボタン）。
   - .ex-header-brand-row は space-between で、左に .ex-header-brand、右に .ex-header-contact。
   - .ex-header-contact は電話ブロック + ボタンを隣接させ、コンパクトに並べる。
   - WP ブロックレイアウトのデフォルト gap (var(--wp--style--block-gap)) を上書きして、
     電話ブロックとボタン間の隅間を、表示上適切な 1.25rem に揃える。 */
.ex-header-contact {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 1.25rem !important;
}

/* ロゴブランドとコンタクトの間のスペースもコードで控える（space-between に依存しつつ、
   何らかの WP デフォルト gap が譙を陸げたりしないよう）。 */
.ex-header-brand-row {
  gap: 2rem !important;
}

/* 電話ブロック：電話番号と受付時間を中央揃えで縦スタック。 */
.ex-header-phone {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 2px;
  padding: 0;
  min-width: 0;
  text-align: center;
}
.ex-header-phone-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-text-primary, #1f2937);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: var(--exr-fs-xl);
  line-height: 1.15;
  white-space: nowrap;
}
.ex-header-phone-link:hover { opacity: 0.7; }
.ex-header-phone-icon { flex-shrink: 0; color: currentColor; }
.ex-header-phone-number {
  /* サイトのデフォルトフォントを継承（Inter / Noto Sans JP）。電話番号は少し大きめに。 */
  font-size: var(--exr-fs-xl);
  letter-spacing: 0.02em;
}
.ex-header-phone-hours {
  display: block;
  font-size: var(--exr-fs-xs);
  color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1.4;
}

/* CTA ボタングループ：コンパクトに並べ、ボタン間にスペースを見える余計な gap を付けない。 */
.ex-header-contact .ex-header-cta {
  margin: 0;
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 0.5rem !important;
  align-items: center;
}
.ex-header-contact .ex-header-cta .wp-block-button { margin: 0; display: flex; }
.ex-header-contact .ex-header-cta .wp-block-button__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.5rem;
  border-radius: 4px;
  font-size: var(--exr-fs-sm);
  letter-spacing: 0.04em;
  white-space: nowrap;
  line-height: 1;
}

/* 狭いビューポート */
@media (max-width: 600px) {
  .ex-header-phone-hours { display: none; }
  .ex-header-contact { gap: 0.75rem !important; }
  .ex-header-contact .ex-header-cta .wp-block-button__link {
    padding: 0.6rem 1rem;
    font-size: var(--exr-fs-xs);
  }
}

/* スマホ階層（≦600px）: コンテナガターを 1rem に縮めて、ロゴを左端近くに表示 */
@media (max-width: 600px) {
  .ex-header-nav-inner,
  .ex-announcement-inner {
    padding-inline-start: 1rem !important;
    padding-inline-end: 1rem !important;
  }
}

/* CTA ボタン・コンタクトエリアの非表示閾値は nav_overlay_breakpoint 設定に連動。
   「ハンバーガーが表示されている間」は CTA も隠す（お問い合わせはハンバーガーメニュー経由
   でアクセス可能なため、横並び表示にする必要がない）。
   - smartphone モード: ≦768px で隠す
   - tablet     モード: ≦1024px で隠す */
@media (max-width: 600px) {
  body.exr-nav-breakpoint-smartphone .ex-header-contact { display: none !important; }
  body.exr-nav-breakpoint-smartphone .ex-header-actions .ex-header-cta { display: none !important; }
}
@media (max-width: 1024px) {
  body.exr-nav-breakpoint-tablet .ex-header-contact { display: none !important; }
  body.exr-nav-breakpoint-tablet .ex-header-actions .ex-header-cta { display: none !important; }
}


/* 2 段レイアウト専用: コンタクトエリアをブランド行いっぱいに伸ばし、中で電話ブロックを
   中央揃え、ボタンだけを上下ゼロパディングで背景を「縦いっぱい」に見せる。 */

/* ブランド行の高さを一意に固定、子要素は中央揃えを保ちつつ、コンタクトだけ上下いっぱいに伸ばす。 */
body.exr-header-layout-stacked .ex-header-brand-row {
  height: var(--exr-logo-area-height, 72px) !important;
  min-height: var(--exr-logo-area-height, 72px) !important;
}

/* コンタクトエリア: ブランド行の高さいっぱいに伸ばす (背景ストレッチの位置コンテキストを作る) */
body.exr-header-layout-stacked .ex-header-contact {
  align-self: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;  /* 電話ブロックを中央揃え。ボタンは中で個別に stretch 上書き */
  gap: 1.25rem !important;
}

/* 電話ブロック: コンテンツ高さ、コンタクトの align-items: center により上下中央揃え、中身は左右も中央揃え */
body.exr-header-layout-stacked .ex-header-contact .ex-header-phone {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 4px !important;
  padding: 0 !important;
}

/* CTA ボタンタイプの切り替え (header_cta_button_type オプション連動)。
   デフォルト (compact) = ピル型丸角・高さ控えめ — 1段/2段とも同じ見た目。
   下の exr-cta-button-full を選んだ場合のみ、ボタンをヘッダー行いっぱいに
   stretch してシャープな矩形スタイルにする（1段/2段とも）。 */
body.exr-cta-button-full .ex-header-cta {
  align-self: stretch !important;
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  /* margin-bottom: -1px で CTA をヘッダー行の下端より 1px はみ出させ、
     .ex-header-nav の border-bottom (1px) をボタン背景で覆い隠す。 */
  margin: 0 0 -1px 0 !important;
}
body.exr-cta-button-full .ex-header-cta .wp-block-button {
  margin: 0 !important;
  display: flex !important;
  align-items: stretch !important;
}
/* 1段レイアウトで full を使う際は、親の .ex-header-actions もストレッチさせる必要がある。 */
body.exr-cta-button-full .ex-header-actions {
  align-self: stretch !important;
  align-items: stretch !important;
}

/* ボタン本体: 高さフル、シャープな矩形、文字の太さは標準 */
body.exr-cta-button-full .ex-header-cta .wp-block-button__link {
  display: flex !important;
  align-items: center !important;
  gap: 0.5rem;
  height: 100% !important;
  padding: 0 1.75rem !important;
  border-radius: 0 !important;
  font-size: var(--exr-fs-sm);
  letter-spacing: 0.04em;
  font-weight: 400;
  white-space: nowrap;
  line-height: 1;
  text-transform: none;
}

/* ── デバイス別表示制御（body クラス + メディアクエリ） ──
   PC： 1024px 超   タブレット： 601–1024px   スマホ： 600px 以下 */
/* アナウンスバー */
@media (min-width: 1025px) {
  body:not(.exr-announcement-show-pc) .ex-announcement-bar { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  body:not(.exr-announcement-show-tablet) .ex-announcement-bar { display: none !important; }
}
@media (max-width: 600px) {
  body:not(.exr-announcement-show-smartphone) .ex-announcement-bar { display: none !important; }
}
/* タグライン */
@media (min-width: 1025px) {
  body:not(.exr-tagline-show-pc) .ex-header-tagline,
  body:not(.exr-tagline-show-pc) .wp-block-site-tagline { display: none !important; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  body:not(.exr-tagline-show-tablet) .ex-header-tagline,
  body:not(.exr-tagline-show-tablet) .wp-block-site-tagline { display: none !important; }
}
@media (max-width: 600px) {
  body:not(.exr-tagline-show-smartphone) .ex-header-tagline,
  body:not(.exr-tagline-show-smartphone) .wp-block-site-tagline { display: none !important; }
}