/* ベース: デザイントークン（CSS 変数）と共通レイアウト。
   フォールバック値は子テーマ未解決時の既定（= Conrad のブランド色）。 */
:root {
  --aureate: var(--wp--preset--color--brand-primary, #BC9B6A);
  --aureate-hover: var(--wp--preset--color--brand-primary-hover, #A88555);
  --violet: var(--wp--preset--color--brand-secondary, #49176D);
  --violet-hover: var(--wp--preset--color--brand-secondary-hover, #371151);
  --nardus: var(--wp--preset--color--accent, #ADA2BE);
  --murex: var(--wp--preset--color--accent-deep, #3A2F51);
  --snow: var(--wp--preset--color--surface, #F4F2F3);
  --sand: var(--wp--preset--color--surface-warm, #F0E5D8);
  --line: var(--wp--preset--color--line, #ECECEC);
  --text: var(--wp--preset--color--text, #111111);
  --warm-grey: var(--wp--preset--color--text-muted, #75787B);
  --hilton-blue: var(--aureate);
  --hilton-blue-hover: var(--aureate-hover);
  --container-w: min(1256px, calc(100vw - 64px));
  --gap: 16px;
}

*, *::before, *::after { box-sizing: border-box; }

/* ページ内アンカーのスムーズスクロール。sticky ヘッダー＋（あれば）sticky なページ内リンク帯の
   高さ分だけオフセットして、見出しが帯の裏に隠れないようにする。--lp-nav-h は帯のあるページで
   lp-nav.js が実測してセットする（帯が無ければ 0）。 */
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h, calc(var(--wp--custom--logo-header, 32px) + var(--wp--custom--header-pad-y, 16px) * 2)) + var(--lp-nav-h, 0px)); }
@media (max-width: 700px) {
	html { scroll-padding-top: calc(var(--header-h, calc(var(--wp--custom--logo-header, 32px) + 16px)) + var(--lp-nav-h, 0px)); }
}

body { font-family: var(--wp--custom--brand-body); color: var(--text); background: #fff; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.wrap img { display: block; max-width: 100%; }

/* コンテンツが少なくてもフッターを最下部に固定。 */
.wp-site-blocks { display: flex; flex-direction: column; min-height: 100vh; }
.wp-site-blocks main { flex: 1 0 auto; }
/* template-part のラッパー <div> を flow から外し、中身（header/footer/title-area の sticky や align）
   を直接の子と同じ振る舞いにする。 */
.wp-site-blocks > .wp-block-template-part { display: contents; }
.title-area-wrap { display: contents; }

a { color: inherit; text-decoration: none; }

/* サイト共通の左右ガター。ページ隅からの余白はこの 1 変数で統一する（PC32 / SP16）。
   各コンテナ・帯はこれを参照し、リテラルの 32px / 16px を散らさない。 */
:root { --gutter: 32px; }
@media (max-width: 700px) { :root { --gutter: 16px; } }

.wrap { max-width: 1320px; margin: 0 auto; padding-inline: var(--gutter); }

/* main コンテナのガター。縦余白は spacing.section preset（PC56/SP40 自動縮小）。 */
.page-main,
.archive-main,
.access-main { padding-inline: var(--gutter); padding-block: var(--wp--preset--spacing--section); }
/* 詳細ページの main（KV を 100vw で先頭に置く）。padding-top なし。 */
.single-main { padding-inline: var(--gutter); }
/* taxonomy アーカイブ（リテラル h1）: タイトル直下に一覧が続くときの section 間隔。 */
.archive-main > .sec-head:not(:has(+ p)) { margin-bottom: var(--wp--preset--spacing--section); }
/* Pattern B アーカイブ: タイトル＋全幅カテゴリ帯＋カルーセルの構成。 */
.archive-head { padding-top: var(--wp--preset--spacing--section); padding-inline: var(--gutter); }
/* カテゴリー区切りは罫線を引かず余白だけで分ける（区切り線はプラン等のカルーセル帯のみ）。 */
.archive-cat-section { padding: var(--wp--preset--spacing--section) 0; }
/* タイトル直下の先頭カテゴリーは上 padding を持たない（タイトルの下余白だけで間隔を取る）。 */
.archive-head + .archive-cat-section { padding-top: 0; }
.archive-cat-section__inner { max-width: 1320px; margin-inline: auto; padding-inline: var(--gutter); }
/* シングル（constrained な single-main）配下に置く子ページ一覧（hilton/activity-children 等）は、
   アーカイブと同じく上罫線・帯をビューポート全幅に出す。親の post-content は alignfull が
   1256 でキャップされ中央寄せになるため、ガター分だけのブリードでは広い画面で左端に届かない。
   calc(50% - 50vw) でビューポート基準にブリードさせ（constrained の margin:auto を上書き）、
   中身は __inner が 1320 箱で中央寄せ。 */
.single-main .archive-cat-section { width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; }
/* タイトル直下が区切りセクション（カテゴリ帯 or カルーセル）なら h1 側に下余白を付ける。
   コンテンツが空でカルーセルが先頭に来るアーカイブ（例: アクティビティ＝コンテンツ無し＋プラン）でも
   spa 等（コンテンツ有り）と h1 下の余白が揃うようにする。 */
.archive-head:has(+ .archive-cat-section),
.archive-head:has(+ .peek-carousel-section) { padding-bottom: var(--wp--preset--spacing--section); }

/* sec-head（h1 ラッパー）: タイポだけを担当し、配置／flex は WP のグループレイアウトに任せる。
   横並びが必要な場合は .title-band 側で flex を組む。 */
.sec-head h1 { margin: 0; font-family: var(--wp--custom--brand-heading); font-weight: var(--wp--custom--heading-weight, 700); font-size: var(--wp--custom--heading-size, clamp(22px, 2.6vw, 32px)); line-height: var(--wp--custom--heading-lh, 1.3); letter-spacing: var(--wp--custom--heading-ls, 0.08em); color: var(--wp--custom--heading-color, var(--aureate)); }
/* ページタイトル h1 は中央揃えに統一する（固定/詳細=.sec-head、タクソノミー=.archive-head、
   タイトル帯=.title-band。KV 内タイトルは各 KV 側で中央寄せ済み）。 */
.sec-head h1, .archive-head h1, .title-band h1 { text-align: center; }

main .sec-head { margin-bottom: 0; }
/* リード（タイトル直下の導入文）: 本文より一回り小さく、行間ゆとり。中央揃え（見出しに合わせる）。 */
.lead { font-size: 14px; line-height: 1.75; letter-spacing: 0; text-align: center; }
p.lead:empty,
.wp-block-term-description.lead:empty { display: none; }

/* 見出しの日本語折り返しを文節単位に（本文／リードは budoux JS が同等処理を行う）。 */
h1, h2, h3, h4, h5, h6,
.wp-block-heading {
	word-break: auto-phrase;
}

/* ブランドロゴ（core/site-logo） */
.brand-mark { display: inline-flex; align-items: center; flex-shrink: 0; margin: 0; }
.brand-mark img { height: var(--wp--custom--logo-header, 32px); width: auto; display: block; }
.brand-mark a { display: inline-flex; }

/* パンくず（フッター直上） */
.breadcrumb-bottom { padding: 14px 0; border-top: 1px solid #ececec; background: color-mix(in srgb, var(--aureate) 2%, #fff); }
.breadcrumb-bottom .wrap { display: flex; }
.breadcrumb-bottom .wp-block-breadcrumbs { font-family: var(--wp--custom--brand-ui, var(--wp--custom--brand-body)); font-size: 12px; line-height: 1.5; color: #6E6E6E; letter-spacing: 0; }
.breadcrumb-bottom .wp-block-breadcrumbs a { color: var(--wp--custom--link-color, var(--aureate)); }
.breadcrumb-bottom .wp-block-breadcrumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 700px) {
  :root { --container-w: calc(100vw - 32px); }
  .breadcrumb-bottom { padding: 12px 0; }
}

/* View Transitions: サイト共通シェル（最上部の帯・ヘッダー・フッター・パンくず）を独立の
   遷移グループにする。前後ページで同一のシェルは静止して見え、残り（本文）はルートのフェードで
   切り替わる SPA 風のページ遷移になる（モーフ＝ジオメトリ補間は使わない）。view-transition-name
   は遷移時にのみ意味を持ち、通常の描画には影響しない。名前はページ内で一意であること
   （重複すると遷移全体が中止される）。 */
.site-topbar { view-transition-name: site-topbar; }
.site-header { view-transition-name: site-header; }
.site-footer { view-transition-name: site-footer; }
.breadcrumbs-wrap { view-transition-name: breadcrumbs; }

/* 遷移は main（本文領域）だけに適用する。ヘッダー等のシェルは独立グループで静止、
   ルート（背景等）はアニメーションせず即時切替。main は新旧のクロスフェードではなく
   一旦白を挟む: 旧本文が白へフェードアウトしきってから、新本文が白からフェードインする。
   箱のモーフ（ジオメトリ補間）はしない。 */
main { view-transition-name: main-content; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root),
  ::view-transition-group(main-content) { animation: none; }
  /* シェルはアニメーション一切なしの即時表示。スクロール中の遷移では旧ページのシェルが
     ビューポート外＝スナップショット不在となり、既定のままだと entry のフェードや位置補間で
     ちらつくため、group（位置・サイズ）と old/new（画像）の全てを止めて最終状態を即時に出す。 */
  ::view-transition-group(site-topbar),
  ::view-transition-group(site-header),
  ::view-transition-group(site-footer),
  ::view-transition-group(breadcrumbs),
  ::view-transition-old(site-topbar), ::view-transition-new(site-topbar),
  ::view-transition-old(site-header), ::view-transition-new(site-header),
  ::view-transition-old(site-footer), ::view-transition-new(site-footer),
  ::view-transition-old(breadcrumbs), ::view-transition-new(breadcrumbs) { animation: none; }
  ::view-transition-image-pair(main-content) { background: #fff; }
  ::view-transition-old(main-content) { animation: hilton-vt-to-white 200ms ease-in both; }
  ::view-transition-new(main-content) { animation: hilton-vt-from-white 220ms ease-out 200ms both; }
}
@keyframes hilton-vt-to-white { to { opacity: 0; } }
@keyframes hilton-vt-from-white { from { opacity: 0; } to { opacity: 1; } }