/*--------------------------------------------------------------
# Site Header
--------------------------------------------------------------*/

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--header-bg);
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.1);
}
.admin-bar .site-header {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar .site-header { top: 46px; }
}

.header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 1.5rem;
	height: 64px;
}

/* Logo / site title */
.site-branding {
	flex-shrink: 0;
}

.site-title {
	margin: 0;
	line-height: 1;
}

.site-title a {
	font-size: 1.125rem;
	font-weight: 800;
	letter-spacing: -0.03em;
	color: var(--header-text);
	text-decoration: none;
}

.site-description {
	display: none;
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/

/* Override Underscores defaults */
.main-navigation {
	display: flex;
	align-items: center;
	width: auto;
}

.main-navigation ul {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 1.75rem;
}

.main-navigation ul ul {
	/* Basic dropdown support */
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	background: #fff;
	border: 1px solid var(--border-color);
	border-radius: 6px;
	box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
	padding: 0.5rem 0;
	min-width: 180px;
	z-index: 200;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	padding: 0.6rem 1rem;
	font-size: 13px;
}

.main-navigation a {
	font-size: 13.5px;
	font-weight: 600;
	color: var(--header-text);
	text-decoration: none;
	letter-spacing: 0.01em;
	transition: color 0.15s ease;
	display: block;
}

.main-navigation a:hover {
	/* アクセントカラー（var(--accent)）はカスタマイザーでヘッダー背景色と
	   同じ・近い色に設定されうるため、色を変えず不透明度で示す
	   （--header-text は常にヘッダー背景と対比する色として選ばれる前提）。 */
	opacity: 0.6;
}

/* Hamburger toggle button */
.menu-toggle {
	display: none;
	flex-direction: column;
	gap: 5px;
	padding: 6px;
	background: none;
	border: none;
	cursor: pointer;
	border-radius: 4px;
}

.menu-toggle__bar {
	display: block;
	width: 22px;
	height: 2px;
	background: var(--header-text);
	border-radius: 2px;
	transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Mobile */
@media (max-width: 768px) {
	.menu-toggle {
		display: flex;
	}

	/* 下スクロールで非表示、少しでも上スクロールしたら再表示 */
	.site-header {
		transition: transform 0.25s ease;
	}
	.site-header.is-hidden {
		transform: translateY(-100%);
	}

	.main-navigation ul {
		display: none;
		position: absolute;
		top: 64px;
		left: 0;
		right: 0;
		flex-direction: column;
		gap: 0;
		background: var(--header-bg);
		border-top: 1px solid var(--border-color);
		box-shadow: 0 6px 20px rgba(0, 0, 0, 0.1);
		padding: 0.5rem 1.5rem 1rem;
	}

	.main-navigation ul li {
		border-bottom: 1px solid var(--border-color);
	}

	.main-navigation ul li:last-child {
		border-bottom: none;
	}

	.main-navigation ul a {
		padding: 0.875rem 0;
		font-size: 15px;
	}

	/* Show when toggled */
	.main-navigation.toggled ul {
		display: flex;
	}

	/* X animation on open */
	.main-navigation.toggled .menu-toggle__bar:nth-child(1) {
		transform: translateY(7px) rotate(45deg);
	}

	.main-navigation.toggled .menu-toggle__bar:nth-child(2) {
		opacity: 0;
	}

	.main-navigation.toggled .menu-toggle__bar:nth-child(3) {
		transform: translateY(-7px) rotate(-45deg);
	}
}


/* ---- Site Header (redesign) ---- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--header-bg);
	border-bottom: 1px solid var(--border-color);
	height: 80px;
}

/* position:sticky + z-index は独自の重ね合わせコンテキストを作るため、
   内側の.nav-panel（SPハンバーガー展開時）にどれだけ高いz-indexを指定しても、
   この値を超えて右下のフローティングボタン（チャットz-index:999999／
   ブックマークz-index:150）より手前には出せない。ハンバーガー展開中
   （body.has-nav-open、js/navigation.js が付与）のみヘッダー自体を
   それらより高くする。常時高くしないのは、agency-premium-chatbotの
   モーダル風オーバーレイ（同じz-index帯）等、他の全画面オーバーレイより
   ヘッダーが常に前面に出てしまう副作用を避けるため。 */
body.has-nav-open .site-header {
	z-index: 1000001;
}
.header-inner {
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 24px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-logo-link {
	font-size: 20px;
	font-weight: 800;
	color: var(--header-text);
	text-decoration: none;
	letter-spacing: 0.02em;
}
.site-logo-link:hover { color: var(--header-text); }
.site-logo-image {
	display: block;
	max-height: 36px;
	width: auto;
}

.header-right {
	display: flex;
	align-items: center;
}
/* nav-menu・検索窓・CTAボタンをまとめる内側のラッパー。
   PCでは横並び、SPではハンバーガー開閉時にこの単位ごと表示/非表示を切り替える
   （メニュー項目に相当しない検索フォーム・CTAリンクをulの外に置くための構造）。 */
.nav-panel {
	display: flex;
	align-items: center;
	gap: 32px;
}
.main-navigation .nav-menu {
	display: flex;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 32px;
}
.main-navigation .nav-menu li { margin: 0; }
.main-navigation .nav-menu a {
	font-size: 14px;
	font-weight: 500;
	color: var(--header-text);
	text-decoration: none;
}
.main-navigation .nav-menu a:hover { opacity: 0.6; }

.header-cta {
	padding: 10px 20px;
}
/* header-cta は.main-navigationの内側（.nav-panel経由）に置かれたため、
   ファイル上部「Override Underscores defaults」セクションの古い
   .main-navigation a（display:block・text-decoration:none等、SP限定ではない）が
   .btn-primary（display:inline-flex等）よりクラス数の詳細度で勝ってしまい、
   ボタンがブロック要素化して左寄せ・配色崩れを起こす。ここで明示的に上書きする。 */
.main-navigation .header-cta.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--btn-text, #fff);
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}
.main-navigation .header-cta.btn-primary:hover {
	opacity: 1;
	background: var(--accent-hover);
	color: var(--btn-text, #fff);
}

/* ---- Header search ---- */
.header-search {
	display: flex;
	align-items: center;
	gap: 8px;
}
.header-search__input-wrap {
	display: flex;
	align-items: center;
	gap: 8px;
	height: 40px;
	background: var(--bg-subtle);
	border-radius: 6px;
	padding: 0 12px;
	cursor: text;
	box-sizing: border-box;
}
.header-search__icon {
	flex-shrink: 0;
}
.header-search .header-search__input {
	border: none;
	outline: none;
	-webkit-appearance: none;
	appearance: none;
	box-shadow: none;
	padding: 0;
	font-size: 13px;
	color: #333;
	background: transparent;
	width: 140px;
}
.header-search .header-search__input:focus {
	color: #333;
	border: none;
	outline: none;
	box-shadow: none;
}
.header-search .header-search__input::placeholder {
	color: var(--text-muted);
}
.header-search__btn {
	height: 40px;
	padding: 0 14px;
	background: var(--accent);
	color: var(--btn-text, #fff);
	border: none;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	box-sizing: border-box;
	transition: opacity 0.2s;
}
.header-search__btn:hover {
	opacity: 0.85;
}

/* ---- Mobile ---- */
@media (max-width: 768px) {
	.site-header { height: 56px; }
	.menu-toggle { display: flex; }
	/* New header redesign nav: hide by default, show when toggled.
	   nav-menu・検索窓・CTAボタンは.nav-panelという1つの単位にまとまっているため、
	   ここを非表示/表示するだけでPCと同じHTMLがそのままハンバーガーの中身になる。 */
	.nav-panel {
		display: none;
		position: fixed;
		top: 56px;
		left: 0;
		right: 0;
		bottom: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		background: var(--header-bg);
		border-top: 1px solid var(--border-color);
		overflow-y: auto;
		padding: 0 24px 32px;
		z-index: 1000001;
	}
	.main-navigation.toggled .nav-panel { display: flex; }

	/* ファイル上部「Override Underscores defaults」セクションの古い
	   .main-navigation ul（position:absolute等、SP用）は、ここで同じ
	   プロパティを明示的に上書きしない限りセレクタ詳細度の関係で
	   素通りしてきてしまう（.main-navigation .nav-menu の方が詳細度が
	   高いのはdisplay/gapのみ実際に指定していたプロパティに限られるため）。
	   position/background/padding等を確実にリセットする。 */
	.main-navigation .nav-menu {
		display: flex;
		flex-direction: column;
		position: static;
		top: auto;
		left: auto;
		right: auto;
		background: none;
		border-top: none;
		box-shadow: none;
		padding: 0;
		gap: 0;
	}
	.main-navigation .nav-menu li { border-bottom: 1px solid var(--border-color); }
	.main-navigation .nav-menu li:last-child { border-bottom: none; }
	.main-navigation .nav-menu a { display: block; padding: 18px 0; font-size: 16px; }

	/* flexアイテムはネストの各階層で min-width:0 を明示しないと、
	   内側のinputが縮められても外側のラッパーの自動最小幅（min-content）
	   に押し戻されて縮まりきらず、画面幅からはみ出す
	   （SE2幅=375pxのような狭い画面で顕在化した実際の不具合）。 */
	.header-search { min-width: 0; margin: 20px 0; }
	.header-search__input-wrap { flex: 1; min-width: 0; }
	.header-search .header-search__input { width: auto; flex: 1; min-width: 0; }

	.header-cta.btn-primary { width: 100%; margin-top: 8px; }

	.main-navigation.toggled .menu-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
	.main-navigation.toggled .menu-toggle__bar:nth-child(2) { opacity: 0; }
	.main-navigation.toggled .menu-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

	/* ハンバーガーメニュー展開中は背面ページのスクロールをロックする
	   （js/navigation.jsがボタンクリック時にbodyへ付与/削除する）。
	   modal.css の body.has-modal-open と同じパターン。 */
	body.has-nav-open {
		overflow: hidden;
	}
}

/* ---- PC/SP表示切り替え（検索窓・CTAボタン共通） ----
   .header-search / .header-cta.btn-primary はコンポーネント側で複数箇所
   displayを指定しているため、詳細度に左右されず確実に隠すよう!importantを使う。 */
@media (min-width: 769px) {
	.is-hidden-pc { display: none !important; }
}
@media (max-width: 768px) {
	.is-hidden-sp { display: none !important; }
}