/* 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);
  /* v1.4.8: ヘッダー下端の subtle 影。Default では明るい背景上で淡いラインに、
     Dark では暗背景上でほぼ消える (shadow color が黒 = 黒 on 黒 ≒ 不可視)。
     palette 非依存で両 preset で適切に動作する。
     旧 .ex-header-nav の border-bottom (border-subtle = #334155) は Dark で
     surface (#1E293B) 上に "明るい線" として浮き上がっていたため削除した。 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}
.ex-announcement-bar {
  width: 100%;
  background: var(--color-surface-raised);
  /* border-bottom は撤去 — Dark では border-subtle = surface-raised で同色化し
     視覚的に announcement bar 自体が 1px 高くなるだけだったが、Default では
     視覚的ノイズになることがある。bg-color の自然な切替 (surface-raised → surface)
     で十分区切られる。 */
}
.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;
  /* v1.4.6: text-muted (#64748B) は Dark preset の surface-raised (#334155) 上で
     コントラスト約 2:1 となり視認困難。text-secondary に変更して両 preset で AA 確保。
     subtle 感は font-size:xs + letter-spacing で十分維持。 */
  color: var(--color-text-secondary) !important;
  margin: 0;
}
/* v1.4.8: 旧 .ex-header-nav border-bottom は撤去。Dark preset で border-subtle (#334155)
   が surface (#1E293B) 上で目立つ "明るい線" として浮き上がる事故を解消。
   代わりに .ex-site-header に subtle な box-shadow を付け、preset 非依存の elevation 表現に。 */

/* メニュー背景色 (--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 */
  /* v1.4.19: 2 段モードのデフォルトは bg-base (= page 背景色) に変更。
     1 段モードと違い、2 段ではロゴ行とメニュー行が同色だとべったり同化して
     視覚階層が出ない。bg-base にすることでメニュー行が「page と直結する帯」、
     ロゴ行が「page から浮き上がるカード」という明確な階層になる。
     ユーザーが --exr-menu-bg を明示設定すればその色で上書き (両モード共通動作)。 */
  background-color: var(--exr-menu-bg, var(--color-bg-base));
}
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, var(--color-bg-base));
  z-index: -1;
}
/* v1.4.21: ロゴ行とメニュー行の区切り線 (EX REDESiGN 設定 > ヘッダーレイアウトで設定)。
   ::before に border-top を付けると親 (.ex-header-menu max-width:1200px) の bg が
   上塗りして中央エリアで線が消える事故が発生 (v1.4.20)。
   独立した ::after に分離して z-index:1 で parent bg より前面に出し、
   ビューポート全幅 (inset-inline-*: calc(50%-50vw)) に渡って描画。
   width = 0 がデフォルト (= 線なし)。color 未指定時は palette border-subtle に連動。 */
body.exr-header-layout-stacked .ex-header-menu::after {
  content: "";
  position: absolute;
  top: 0;
  inset-inline-start: calc(50% - 50vw);
  inset-inline-end: calc(50% - 50vw);
  height: var(--exr-stacked-divider-width, 0);
  background-color: var(--exr-stacked-divider-color, var(--color-border-subtle));
  z-index: 1;
  pointer-events: none;
}
.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; }

/* ブランドエリア全体リンク (= header-brand-link.php で <a> wrap) */
.ex-header-brand-link {
  display: block;
  color: inherit;
  text-decoration: none;
}
.ex-header-brand-link:hover,
.ex-header-brand-link:focus { color: inherit; text-decoration: none; }
.ex-header-brand-link:focus-visible { outline: 2px solid var(--color-accent, currentColor); outline-offset: 2px; border-radius: 4px; }

.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 ──
   v1.4.52 で header.html の wp:site-title / wp:site-tagline を wp:paragraph
   (class=ex-site-title / ex-header-tagline) に置換したため、 セレクタは旧コア
   ブロッククラス (wp-block-site-title / wp-block-site-tagline) と新クラス
   (ex-site-title / ex-header-tagline) を併記し、 移行期間中も既存サイトの
   見た目を維持する。 paragraph 内のリンクは <a> 直下にあるので a セレクタ
   は両方の構造で機能する。 */
.ex-header-brand .wp-block-site-title,
.ex-header-brand .ex-site-title {
  margin: 0 !important;
  line-height: 1 !important;
}
.wp-block-site-title a,
.ex-site-title,
.ex-site-title a {
  font-size: var(--exr-fs-xl) !important;
  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,
.ex-header-tagline {
  font-size: var(--exr-fs-xs) !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  /* v1.4.6: text-muted は Dark preset の surface (#1E293B) 上でコントラスト約 2.7:1 と
     視認困難。text-secondary に変更して両 preset で AA 確保。タグラインの subdued 感は
     uppercase + letter-spacing:0.12em + xs font-size で維持される。 */
  color: var(--color-text-secondary) !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)。
   クリック可能領域を背景色と一致させるため inline-flex + height:100% で
   <li> の行高さいっぱいに <a> を伸ばし、 align-items:center でテキストを中央揃え。 */
.wp-block-navigation .wp-block-navigation-item__content {
  font-size: var(--exr-fs-xs);
  letter-spacing: 0.1em;
  /* v1.4.68: text-transform: uppercase 廃止。 GREViA / EX POSTRiA / EX REDESiGN 等
     ブランド名の小文字 "i" が "I" に潰されるため。 submenu.css は v1.4.12 で対応済、
     親メニューもここで対応。 */
  /* v1.4.2: 通常状態を text-primary (濃い色) に修正。以前は text-secondary (薄い灰)
     を使っていたが、白背景プリセットでメニューが薄すぎて見えない問題があった。
     ホバー時は逆に text-secondary に薄くしてフィードバックを表現する。 */
  color: var(--color-text-primary);
  text-decoration: none;
  transition: color 200ms;
  padding-block: 0;
  padding-inline: 1rem;
  display: inline-flex;
  align-items: center;
  height: 100%;
  box-sizing: border-box;
  /* v1.4.35: スペース含み項目 (例: "ABOUT US" / "Business Introduction") が
     <a> 内で折り返さないように nowrap で固定。 ヘッダー <ul> の flex-wrap も
     既に nowrap になっており、項目数 × 各項目幅は --exr-menu-gap と
     --exr-content-width で吸収する設計。 */
  white-space: nowrap;
}
/* 項目間の距離。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 {
  /* v1.4.2: 通常=text-primary、ホバー=text-secondary に逆転 (上の通常スタイル参照)。*/
  color: var(--color-text-secondary);
}

/* グローバルメニュー項目のホバー背景色。トップレベル <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, color 200ms, opacity 200ms;
}
/* ホバー時の色 (background / color / opacity) は assets/css/blocks.css のグローバルボタンルールで一括保証。
   theme.json elements.link.:hover の cascade 関連だが、サイト全体に同仕様を適用したいため
   header 専用ルールをそちらに送り、ここでは形状系のみ保つ。 */

/* ── Custom Logo ──
   ロゴ画像の上限寸法:
     --exr-logo-height        : 高さ上限 (既存 / 設定 > ヘッダーより取得)
     --exr-logo-max-width     : 幅上限 (Style Variation や user CSS で上書き可、デフォルト 200px)
   巨大なロゴ画像アップでヘッダーが壊れるのを防ぐためのガードレール。 */
.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: var(--exr-logo-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;
  /* v1.4.11: margin-bottom: -1px の hack を削除。
     v1.4.8 以前は .ex-header-nav に border-bottom: 1px solid border-subtle が
     あったため、ボタンを 1px 下にはみ出させてその border をボタン背景で覆い隠していた。
     v1.4.8 で border-bottom を削除したのに依存する hack が残っていたため、
     現在は何も覆い隠さず単純に 1px ヘッダー下にはみ出す事故となっていた。 */
  margin: 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; }
}

/* ── 言語切替 自動配置スロット (v1.4.45+) ──
   render-block.php が .exr-lang-host を 2 種注入する:
     - --announcement-right : ex-announcement-tools の末尾 (検索アイコンの隣)
     - --drawer             : ex-header-menu の overlay 内 最上段
   body class `exr-lang-{device}-{position}` がブレークポイントごとに有効なスロットを 1 つだけ選ぶ。
   non-active なスロットは display:none。 */
.exr-lang-host { display: none; }
@media (min-width: 1025px) {
  body.exr-lang-pc-announcement-right .exr-lang-host--announcement-right { display: inline-flex; align-items: center; }
}
@media (min-width: 601px) and (max-width: 1024px) {
  body.exr-lang-tablet-announcement-right .exr-lang-host--announcement-right { display: inline-flex; align-items: center; }
  body.exr-lang-tablet-drawer             .exr-lang-host--drawer             { display: flex; justify-content: center; padding: 16px 0; }
}
@media (max-width: 600px) {
  body.exr-lang-smartphone-announcement-right .exr-lang-host--announcement-right { display: inline-flex; align-items: center; }
  body.exr-lang-smartphone-drawer             .exr-lang-host--drawer             { display: flex; justify-content: center; padding: 16px 0; }
}

/* ============================================================
 * アナウンスバー 右端ツール (言語切替 + 検索)
 * ============================================================ */
.ex-announcement-tools {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
}

/* 言語切替 (grevia/language-switcher) — JP | EN を CSS border で区切る */
.exr-language-switcher {
  display: inline-flex;
  align-items: center;
  gap: 0;
  font-size: var(--exr-fs-xs);
  color: var(--color-text-muted);
  transition: transform 0.3s ease;
}
.exr-language-switcher .exr-language-link {
  padding: 0 8px;
  color: inherit;
  text-decoration: none;
  line-height: 1.2;
}
.exr-language-switcher .exr-language-link.is-current {
  font-weight: 600;
  color: var(--color-text-primary);
}
.exr-language-switcher .exr-language-link:hover {
  color: var(--color-text-primary);
}
/* セパレータ: HTML 上の「|」文字は隠し、代わりに CSS で縦 1px ラインを描画する。
   ポイント:
   - height は px 固定 (font-size:0 にしてあるため em ・ レムはゼロになる)
   - background-color は text-muted を明示指定 (block style.css が color を border-subtle に上書きしてしまうため currentColor は使わない)
   - flex-shrink:0 で inline-flex 親の中で縮まないよう保証 */
.exr-language-switcher .exr-language-separator {
  display: inline-block;
  flex-shrink: 0;
  align-self: center;
  width: 1px;
  height: 14px;
  background-color: var(--color-text-muted, #9ca3af);
  opacity: 0.5;
  /* HTML 内の "|" 文字を不可視化 */
  font-size: 0;
  line-height: 0;
  color: transparent;
  overflow: hidden;
  vertical-align: middle;
}

/* ヘッダー検索ボタン + スライドインする検索フォーム */
.exr-header-search {
  display: inline-flex;
  align-items: center;
  position: relative;
}
.exr-header-search__toggle {
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 4px 8px;
  color: var(--color-text-muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  border-radius: 4px;
  transition: color 0.15s ease, background 0.15s ease;
}
.exr-header-search__toggle:hover,
.exr-header-search__toggle:focus-visible {
  color: var(--color-text-primary);
  outline: none;
}
.exr-header-search__toggle svg {
  display: block;
}
/* 検索フォーム：初期状態は width 0 で「隠れている」。 トグルで width アニメーションするため flex コンテナ内で他要素を押し出す → JP|EN が左にスライド */
.exr-header-search__form {
  display: flex;
  align-items: center;
  width: 0;
  opacity: 0;
  overflow: hidden;
  transition: width 0.3s ease, opacity 0.25s ease;
  margin-inline-start: 0;
}
/* 検索バー展開幅: --exr-header-search-width で上書き可 (デフォルト 240px) */
.exr-header-search.is-open .exr-header-search__form {
  width: var(--exr-header-search-width, 240px);
  opacity: 1;
  margin-inline-start: 6px;
}
/* 検索フォームを開いたら、 入力欄の左にあるトグルアイコンは冗長なので隠す。
   送信ボタン (右の虫眼鏡) は検索実行のために残す。 */
.exr-header-search.is-open .exr-header-search__toggle {
  display: none;
}
.exr-header-search__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border-subtle);
  border-right: 0;
  border-radius: 3px 0 0 3px;
  background: var(--color-surface, #fff);
  color: var(--color-text-primary);
  font-size: var(--exr-fs-xs);
  outline: none;
  box-shadow: none;
}
.exr-header-search__input:focus,
.exr-header-search__input:focus-visible {
  /* フォーカス時の強調圧示なし (ユーザー要望)。 デフォルト表示と同じ見た目を保つ。 */
  border-color: var(--color-border-subtle);
  outline: none;
  box-shadow: none;
}
.exr-header-search__submit {
  flex: 0 0 auto;
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--color-border-subtle);
  border-left: 0;
  border-radius: 0 3px 3px 0;
  background: var(--color-surface-raised);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.exr-header-search__submit:hover {
  color: var(--color-text-primary);
}

/* エディタープレビュー表示 (実隔と同じアイコンだけ表示) */
.exr-header-search--editor {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  color: var(--color-text-muted);
  font-size: var(--exr-fs-xs);
}
.exr-header-search--editor .exr-header-search__hint {
  opacity: 0.6;
}