/*
Theme Name: Tokyo Hub Clinic Child
Template: twentytwentyfive
Version: 0.4.0
Text Domain: tokyohub-child
Description: tokyohub-clinic.com 用の子テーマ（親=Twenty Twenty-Five）。デザイントークンは theme.json（正本）で一元管理。
 本ファイルは theme.json で表せない装飾のみ（functions.php で enqueue）。色は var(--wp--preset--color--*) を参照しハードコードしない。
*/

/* ============ ヘッダー（sticky・ワードマーク・ナビ・CTA） ============ */
.thc-header {
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 1px 0 rgba(21, 65, 74, 0.08), 0 6px 18px rgba(21, 65, 74, 0.04);
}
/* ワードマーク：teal の医療クロスをロゴマーク代わりに前置 */
.thc-wordmark a { text-decoration: none; letter-spacing: -0.01em; }
.thc-wordmark a::before {
	content: "✚";
	color: var(--wp--preset--color--brand);
	margin-right: 0.4em;
	font-weight: 800;
}
/* ナビ：字間を締める・hover で brand */
.thc-header .wp-block-navigation a { font-weight: 500; }
.thc-header .wp-block-navigation a:hover { color: var(--wp--preset--color--brand); }
/* ヘッダー内 Appointment ボタンは少しコンパクトに */
.thc-header-cta .wp-block-button__link {
	padding: 0.55em 1.5em;
	font-size: 0.95rem;
}

/* ============ ボタン体系 ============ */
/* 既定（theme.json）＝塗りbrand teal。hover を付与 */
.wp-block-button__link { transition: filter .15s ease, background-color .15s ease; }
.wp-block-button__link:hover { filter: brightness(0.94); }
/* 明色ボタン（暗い背景＝HERO/CTA上の主CTA。最大コントラストでCVR） */
.thc-btn-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--brand-dark) !important;
	box-shadow: 0 8px 20px rgba(21, 65, 74, 0.18);
}
.thc-btn-light .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--section-soft) !important;
	filter: none;
}
/* Cover 内のアウトラインボタンは白枠 */
.wp-block-cover .is-style-outline .wp-block-button__link {
	background: transparent !important;
	border: 2px solid var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--base) !important;
}

/* ============ FV スライダー（旧SWELLメインビジュアルの再現・プラグイン無し） ============ */
.thc-fv { padding: 0 !important; }
.thc-slider { position: relative; overflow: hidden; }
.thc-slider__track {
	display: flex; overflow-x: auto; scroll-snap-type: x mandatory;
	scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.thc-slider__track::-webkit-scrollbar { display: none; }
.thc-slide {
	position: relative; flex: 0 0 100%; scroll-snap-align: start;
	min-height: clamp(460px, 72vh, 660px);
	display: flex; align-items: center; justify-content: center; padding: 2rem 1.5rem;
	background-image:
		linear-gradient(180deg,
			color-mix(in srgb, var(--wp--preset--color--brand-dark) 30%, transparent),
			color-mix(in srgb, var(--wp--preset--color--brand-dark) 58%, transparent)),
		var(--thc-bg);
	background-size: cover; background-position: center;
}
.thc-slide__inner { max-width: 760px; text-align: center; color: var(--wp--preset--color--base); }
.thc-slide__title {
	font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; line-height: 1.2;
	letter-spacing: -0.01em; margin: 0 0 0.6em; text-shadow: 0 2px 16px rgba(0,0,0,0.3);
}
.thc-slide__text {
	font-size: clamp(1rem, 2.4vw, 1.2rem); line-height: 1.7; margin: 0 auto 1.6em;
	max-width: 620px; text-shadow: 0 1px 12px rgba(0,0,0,0.3);
}
.thc-slide__btn {
	display: inline-block; background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--brand-dark); font-weight: 600; text-decoration: none;
	padding: 0.85em 2.2em; border-radius: 999px; box-shadow: 0 8px 20px rgba(21,65,74,0.22);
	transition: background-color 0.15s ease;
}
.thc-slide__btn:hover { background: var(--wp--preset--color--section-soft); }
.thc-slider__prev, .thc-slider__next {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 44px; height: 44px; border: 0; cursor: pointer; border-radius: 999px;
	background: color-mix(in srgb, var(--wp--preset--color--brand-dark) 35%, transparent);
	color: var(--wp--preset--color--base); font-size: 1.5rem; line-height: 1;
	display: flex; align-items: center; justify-content: center;
}
.thc-slider__prev { left: 14px; } .thc-slider__next { right: 14px; }
.thc-slider__prev:hover, .thc-slider__next:hover { background: var(--wp--preset--color--brand); }
.thc-slider__dots {
	position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
	display: flex; gap: 8px; justify-content: center;
}
.thc-slider__dot {
	width: 10px; height: 10px; border-radius: 999px; border: 0; cursor: pointer; padding: 0;
	background: color-mix(in srgb, var(--wp--preset--color--base) 55%, transparent);
	transition: width 0.2s ease;
}
.thc-slider__dot.is-active { background: var(--wp--preset--color--base); width: 26px; }
@media (max-width: 600px) {
	.thc-slider__prev, .thc-slider__next { display: none; }
}

/* ============ 中段CTAバナー ============ */
.thc-cta > .wp-block-cover__background {
	background: linear-gradient(135deg, var(--wp--preset--color--brand) 0%, var(--wp--preset--color--brand-dark) 100%) !important;
	opacity: 1;
}

/* ============ 見出しの teal アンダーライン（Cover内は出さない） ============ */
h2.has-text-align-center::after {
	content: "";
	display: block;
	width: 64px;
	height: 3px;
	background: var(--wp--preset--color--brand);
	border-radius: 2px;
	margin: 0.8rem auto 0;
}
.wp-block-columns h3.has-text-align-center::after {
	content: "";
	display: block;
	width: 40px;
	height: 3px;
	background: var(--wp--preset--color--brand);
	border-radius: 2px;
	margin: 0.5rem auto 0;
}
.wp-block-cover h2.has-text-align-center::after { content: none; }

/* ============ Clinic Information カード ============ */
.thc-card {
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-dark) 14%, transparent);
	border-radius: 12px;
	padding: 1.7rem;
	background: var(--wp--preset--color--base);
	box-shadow: 0 2px 14px rgba(21, 65, 74, 0.06);
}
.thc-card h3 { margin-top: 0; }

/* ============ 表 ============ */
.wp-block-table table { border-collapse: collapse; width: 100%; }
.wp-block-table td { padding: 0.6em 0.9em; border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--brand-dark) 10%, transparent); }

/* ============ フロント限定：ページタイトル「Home」非表示＋白余白除去 ============ */
.home .wp-block-post-title { display: none !important; }
.home main > .wp-block-group { padding-top: 0 !important; }

/* ============ モバイル ============ */
html, body { overflow-x: hidden; } /* 横スクロール保険 */
.wp-block-heading { overflow-wrap: break-word; }
@media (max-width: 600px) {
	.thc-header { padding-left: 1rem; padding-right: 1rem; }
	.thc-header-cta .wp-block-button__link { padding: 0.5em 1.1em; }
	.wp-block-cover .wp-block-cover__inner-container { padding-left: 1rem; padding-right: 1rem; }
}