/*
 * header.css — サイトヘッダー（ブリーフ §3.1）。
 *
 * PC / SP の切り替えはメディアクエリだけで行う（サーバー側の UA 判定はしない）。
 * ブレークポイントの約束: SP < 48rem / タブレット 48rem / PC 64rem（= 1024px）。
 * ただしメニューの横並びだけは 80rem（= 1280px）から（下の「メニューを横並びにする幅」）。
 * position: fixed にはしない。スクロールしても消えない普通のヘッダー。
 */

/*
 * 下辺の明るいシアンの帯は STORK19 のヘッダーの見え方を引き継ぐもの。
 * 高さが変わらないよう border ではなく背景で描く。
 */
.pc-header {
	position: relative;
	z-index: var(--picico-z-header);
	border-bottom: var(--picico-border-width) solid var(--picico-color-border);
	background-color: var(--picico-color-surface);
	background-image: linear-gradient(
		90deg,
		var(--picico-color-primary) 0%,
		var(--picico-color-primary-light) 100%
	);
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: 100% 3px;
	box-shadow: var(--picico-shadow-sm);
}

.pc-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--picico-space-sm);
	min-height: var(--picico-header-height);
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding-inline: var(--picico-gutter);
}

/* ---- ロゴ / サイト名 ---- */

.pc-site-branding {
	min-width: 0;
	margin: 0;
	font-size: var(--picico-font-size-md);
	line-height: 1.25;
}

.pc-site-branding__text {
	display: inline-block;
	color: var(--picico-color-primary-dark);
	font-family: var(--picico-font-display);
	font-weight: var(--picico-font-weight-bold);
	letter-spacing: 0.01em;
	text-decoration: none;
}

/* ロゴ画像は 36px でも、押す場所としては 44px 確保する（Phase 4）。 */
.pc-site-branding .custom-logo-link {
	display: flex;
	align-items: center;
	min-height: var(--picico-tap-size);
}

.pc-site-branding img {
	width: auto;
	max-height: 2.25rem;
}

/* ---- 右側のボタン群 ---- */

.pc-header__actions {
	display: flex;
	align-items: center;
	gap: var(--picico-space-xs);
}

.pc-header__toggle {
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.1rem;
	min-width: var(--picico-tap-size);
	min-height: var(--picico-tap-size);
	padding-inline: var(--picico-space-xs);
	border: var(--picico-border-width) solid transparent;
	border-radius: var(--picico-radius-sm);
	color: var(--picico-color-primary-dark);
	background-color: transparent;
}

.pc-header__toggle:hover {
	background-color: var(--picico-color-primary-pale);
}

.pc-header__toggle-label {
	font-size: 0.625rem;
	font-weight: var(--picico-font-weight-bold);
	line-height: 1;
	letter-spacing: 0;
}

.pc-header__toggle[aria-expanded="true"] {
	color: var(--picico-color-on-primary);
	background-color: var(--picico-color-primary);
	border-color: var(--picico-color-primary);
}

/* 予約ボタンは PC だけ。SP はドロワーの中に同じ導線がある。 */
.pc-header__cta {
	display: none;
}

/* ---- 検索のポップオーバー ---- */

.pc-header__search {
	border-top: var(--picico-border-width) solid var(--picico-color-border);
	background-color: var(--picico-color-surface-alt);
}

.pc-header__search-inner {
	max-width: var(--picico-wide-width);
	margin-inline: auto;
	padding: var(--picico-space-sm) var(--picico-gutter);
}

/* ---- タブレット以上 ---- */

@media (min-width: 48rem) {
	.pc-site-branding {
		font-size: var(--picico-font-size-lg);
	}

	.pc-site-branding img {
		max-height: 2.75rem;
	}
}

/* ---- PC（1024px 以上） ---- */

@media (min-width: 64rem) {
	.pc-header__inner {
		min-height: var(--picico-header-height-pc);
		gap: var(--picico-space-md);
	}

	.pc-header__cta {
		display: inline-flex;
		/*
		 * 「ご予約・お問い合わせ」が 2 行に折れて読みにくいので折らない。
		 * サイトで一番押してほしいボタンなので 44px も確保する（Phase 4）。
		 */
		flex: 0 0 auto;
		min-height: var(--picico-tap-size);
		white-space: nowrap;
	}

	.pc-header__search-inner {
		max-width: 32rem;
		margin-inline-start: auto;
		margin-inline-end: 0;
	}
}

/*
 * ---- メニューを横並びにする幅（80rem = 1,280px 以上） ----
 *
 * ロゴ・メニュー 6 項目・検索・予約ボタンを 1 段に並べるには約 1,186px 要る（2026-09-15 実測）。
 * 1,024〜1,279px では入りきらずメニューが 2 段に折れるので、その幅はドロワーを開くボタンにする。
 * nav.js の matchMedia も同じ 80rem にそろえてある。
 */
@media (min-width: 80rem) {
	/* ドロワーを開くボタンは出さない。メニューは横並びで常時見えている。 */
	.pc-header__toggle--nav {
		display: none;
	}
}

/* ---- LP 用の最小ヘッダー（ブリーフ §3.4） ---- */

.pc-header--minimal .pc-header__inner {
	justify-content: space-between;
}

.pc-header__back {
	display: inline-flex;
	align-items: center;
	min-height: var(--picico-tap-size);
	color: var(--picico-color-text-muted);
	font-size: var(--picico-font-size-sm);
	letter-spacing: 0;
	text-decoration: none;
}

.pc-header__back:hover {
	color: var(--picico-color-primary-dark);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

/* ---- SNS アイコン列（template-parts/header/sns.php） ----
 *
 * ドロワーの中に出す（フッターは footer.css の別実装）。ヘッダーには置かない（2026-09-15）。
 * アイコンは自作の汎用グリフで、サービス名は読み上げ用テキストで添えてある。
 */

.pc-sns {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	padding: 0;
	list-style: none;
}

.pc-sns__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	/* 独立したリンクなので 44px 角を確保する（Phase 4 / WCAG 2.5.5）。 */
	min-width: var(--picico-tap-size);
	min-height: var(--picico-tap-size);
	border-radius: var(--picico-radius-sm);
	color: var(--picico-color-primary-dark);
	text-decoration: none;
}

.pc-sns__link:hover {
	color: var(--picico-color-primary);
	background-color: var(--picico-color-primary-pale);
}

.pc-sns--drawer {
	flex-wrap: wrap;
	justify-content: center;
	/* 6つが 320px 幅のドロワーでも1行に収まる間隔。 */
	gap: 0.25rem;
	margin-block-start: var(--picico-space-md);
	padding-block-start: var(--picico-space-md);
	border-top: var(--picico-border-width) solid var(--picico-color-border);
}

.pc-sns--drawer .pc-sns__link {
	border: var(--picico-border-width) solid var(--picico-color-border);
}