/*
 * 共通レイアウト: ヘッダー・フッター
 *
 * 中身(ロゴ・メニュー・ボタン)は Blocksy のヘッダー/フッタービルダーと WordPress のメニューで管理し、
 * ここでは見た目だけを調整する。
 *   ヘッダーのロゴ           → カスタマイザー > ヘッダー > ロゴ(1P マーク + サイト名 + キャッチフレーズ)
 *   ヘッダーのメニュー項目   → 外観 > メニュー > グローバルメニュー2(PC・スマホ共通)
 *   ヘッダーのボタン         → カスタマイザー > ヘッダー > ボタン
 *   フッターの列             → 外観 > ウィジェット > フッター ウィジェットエリア 1 / 4 / 5 / 6
 *   フッターのリンク         → 外観 > メニュー > フッターメニュー サービス / 会社 / ポリシー
 */

/* =========================================================
 * Header: 画面の端から少し浮いた、角丸の白いバー
 * ========================================================= */
#header.ct-header {
	position: sticky;
	top: 0;
	z-index: 50;
	padding: 12px var(--pi-panel-inset) 0;
}
.admin-bar #header.ct-header { top: var(--admin-bar, 32px); }
@media (max-width: 782px) {
	.admin-bar #header.ct-header { top: 0; }
}

[data-header] .ct-header [data-row*="middle"] {
	--height: 72px;
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
[data-header] .ct-header [data-row*="middle"] > .ct-container {
	max-width: calc(var(--pi-container) + 48px);
	padding-inline: 28px 12px;
	background: rgba(255, 255, 255, 0.88);
	backdrop-filter: saturate(180%) blur(14px);
	-webkit-backdrop-filter: saturate(180%) blur(14px);
	border: 1px solid color-mix(in srgb, var(--pi-border) 80%, transparent);
	border-radius: var(--pi-radius-pill);
	box-shadow: 0 8px 30px rgba(17, 24, 39, 0.07);
}
@media (max-width: 999px) {
	[data-header] .ct-header [data-row*="middle"] { --height: 60px; }
	[data-header] .ct-header [data-row*="middle"] > .ct-container { padding-inline: 20px 8px; }
}

/* ロゴ: 1P マーク + サイト名。キャッチフレーズは小さく控えめに */
[data-header] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 40px; }
[data-header] .ct-header [data-id="logo"] .site-title {
	--theme-font-size: 21px;
	letter-spacing: -0.01em;
}
[data-header] .ct-header [data-id="logo"] .site-description {
	--theme-font-size: 11px;
	color: var(--pi-text-muted);
	letter-spacing: 0.08em;
}
@media (max-width: 999px) {
	[data-header] .ct-header [data-id="logo"] .site-logo-container { --logo-max-height: 34px; }
	[data-header] .ct-header [data-id="logo"] .site-title { --theme-font-size: 18px; }
	[data-header] .ct-header [data-id="logo"] .site-description { display: none; }
}

/* グローバルメニュー: ホバーで下線、今いるページはオレンジ */
[data-header] .ct-header [data-id="menu"] > ul > li > a {
	--theme-font-size: 15px;
	--theme-font-weight: 600;
	--theme-text-transform: none;
	--theme-link-initial-color: var(--pi-heading);
	--theme-link-hover-color: var(--pi-primary);
	letter-spacing: 0.04em;
	text-decoration-line: underline;
	text-decoration-color: transparent;
	text-decoration-thickness: 2px;
	text-underline-offset: 10px;
	transition: color var(--pi-transition), text-decoration-color var(--pi-transition);
}
[data-header] .ct-header [data-id="menu"] > ul > li > a:hover { text-decoration-color: var(--pi-primary); }
[data-header] .ct-header [data-id="menu"] > ul > li:is(.current-menu-item, .current-menu-ancestor, .current_page_ancestor) > a {
	--theme-link-initial-color: var(--pi-primary);
}

/* ドロップダウン: 白背景のカード + 濃い文字(Blocksy の既定は明るい文字色なので、リンク側で上書きする) */
[data-header] .ct-header [data-id="menu"] .sub-menu {
	--dropdown-background-color: var(--pi-bg);
	--dropdown-divider: 1px solid var(--pi-border);
	--theme-border-radius: var(--pi-radius-md);
	--theme-box-shadow: var(--pi-shadow-lg);
	padding-block: 6px;
}
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link {
	--theme-link-initial-color: var(--pi-heading);
	--theme-link-hover-color: var(--pi-primary);
	--theme-font-size: 14px;
	--theme-font-weight: 500;
}

/* メニューの調整用クラス(外観 > メニュー > 各項目の「CSSクラス」で指定)
 *   pi-menu-nolink  … 項目自体はクリックできない(子メニューを開くだけ)
 *   pi-menu-hide-pc … PCでは非表示(ヘッダーのボタンと重複する項目用)
 */
.pi-menu-nolink > a,
.pi-menu-nolink > .ct-sub-menu-parent > a { cursor: default; }
@media (min-width: 1000px) {
	[data-header] [data-id="menu"] .pi-menu-hide-pc { display: none !important; }
}

/* お問い合わせボタン: オレンジの丸いボタン + 矢印 */
[data-header] .ct-header [data-id="button"] .ct-button {
	--theme-button-border-radius: var(--pi-radius-pill);
	--theme-button-font-size: 14px;
	min-height: 48px;
	padding-inline: 24px 20px;
	font-weight: 700;
	letter-spacing: 0.04em;
	gap: 10px;
	transition: transform var(--pi-transition), box-shadow var(--pi-transition), background-color var(--pi-transition);
}
[data-header] .ct-header [data-id="button"] .ct-button::after {
	content: "";
	width: 16px;
	height: 16px;
	background: var(--pi-arrow-white) center / contain no-repeat;
	transition: transform var(--pi-transition);
}
[data-header] .ct-header [data-id="button"] .ct-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 20px color-mix(in srgb, var(--pi-primary) 35%, transparent);
}
[data-header] .ct-header [data-id="button"] .ct-button:hover::after { transform: translateX(3px); }

/* スマホのメニュー(右から出るパネル) */
#offcanvas [data-id="button"] { margin-top: var(--pi-space-lg); }
#offcanvas [data-id="button"] .ct-button { width: 100%; justify-content: center; min-height: 52px; border-radius: var(--pi-radius-pill); }

/* =========================================================
 * Footer: 上の角を丸めた薄いグレーの面。左にロゴ・紹介文、右にリンク3列
 * ========================================================= */
.ct-footer {
	margin-inline: var(--pi-panel-inset);
	background-color: var(--pi-bg-muted) !important;
	border-radius: var(--pi-radius-xl) var(--pi-radius-xl) 0 0;
	font-size: 14px;
}
/* 上下の余白は Blocksy の --container-spacing で決まる(既定 70px)。二重に付かないよう、ここで値だけ上書きする */
[data-footer] .ct-footer [data-row*="middle"] > div { --container-spacing: 48px; }
[data-footer] .ct-footer [data-row*="bottom"] > div { --container-spacing: 20px; }
@media (max-width: 999px) {
	[data-footer] .ct-footer [data-row*="middle"] > div { --container-spacing: 40px; }
}
@media (max-width: 689px) {
	[data-footer] .ct-footer [data-row*="middle"] > div { --container-spacing: 32px; }
}

/* ロゴ(横長の 1Professionals)と紹介文 */
.ct-footer [data-column="widget-area-1"] .wp-block-image { margin: 0 0 var(--pi-space-md); }
.ct-footer [data-column="widget-area-1"] .wp-block-image img {
	width: clamp(200px, 22vw, 260px) !important;
	height: auto !important;
}
.ct-footer [data-column="widget-area-1"] p {
	margin: 0;
	font-size: 14px;
	line-height: 2;
	color: var(--pi-text);
}

/* 列の見出し(サービス・会社情報・各種情報) */
.ct-footer .ct-widget :is(h2, h3, h4, h5, h6) {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px !important;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	color: var(--pi-ink);
}
.ct-footer .ct-widget :is(h2, h3, h4, h5, h6)::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--pi-primary);
}

/* リンク一覧 */
.ct-footer .widget_nav_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.ct-footer .widget_nav_menu li { margin: 0 0 12px; }
.ct-footer a {
	color: var(--pi-text);
	text-decoration: none;
	transition: color var(--pi-transition);
}
.ct-footer a:hover { color: var(--pi-primary); }

/* コピーライト */
.ct-footer [data-row*="bottom"] > div {
	border-top: 1px solid var(--pi-border) !important;
}
.ct-footer [data-row*="bottom"] {
	color: var(--pi-text-muted);
	font-size: 12px;
	letter-spacing: 0.04em;
}
.ct-footer [data-id="copyright"] { --theme-font-size: 12px; }

@media (max-width: 999px) {
	.ct-footer [data-column="widget-area-1"] { grid-column: 1 / -1; }
}
@media (max-width: 689px) {
	.ct-footer { border-radius: var(--pi-radius-lg) var(--pi-radius-lg) 0 0; }
	.ct-footer [data-row*="middle"] > div { --grid-template-columns: 1fr !important; row-gap: var(--pi-space-lg); }
}

/* =========================================================
 * ページ上部へ戻るボタン(Blocksy の機能。カスタマイザー > 一般 > トップへ戻るボタン で表示/非表示)
 * ========================================================= */
.ct-back-to-top {
	--top-button-background-color: var(--pi-primary);
	--top-button-background-hover-color: var(--pi-primary-hover);
	--theme-icon-color: #fff;
	--theme-icon-hover-color: #fff;
	--back-top-side-offset: 24px;
	--back-top-bottom-offset: 24px;
	width: 52px;
	height: 52px;
	padding: 0;
	box-shadow: 0 8px 24px color-mix(in srgb, var(--pi-primary) 35%, transparent);
	transition: opacity var(--pi-transition), visibility var(--pi-transition), transform var(--pi-transition), background-color var(--pi-transition);
}
.ct-back-to-top:hover { transform: translateY(-3px); }
@media (max-width: 689px) {
	.ct-back-to-top { width: 44px; height: 44px; --back-top-side-offset: 16px; --back-top-bottom-offset: 16px; }
}