/* 博多ぶらり 共通スタイル(駐車場/観光地/飲食店で共有)
 * Cocoon Childのfunctions.phpからenqueueして読み込む
 */

.hb-article {
	max-width: 720px;
	margin: 0 auto;
}

/* Cocoon標準の.entry-title(駐車場等の旧post型記事で使用、font-size:26px)とサイズを揃える。
 * CPT移行済み記事(spot/restaurant型、single-spot.php等)はこのhb-titleを使うため、
 * 揃えないと記事によってタイトルの大きさがバラつく(2026-07-23、ユーザー指摘で判明)。
 */
.hb-title {
	font-size: 26px;
	line-height: 1.3;
	margin-top: 1.2em;
	margin-bottom: 0.6em;
}

.hb-eyecatch img {
	width: 100%;
	height: auto;
	border-radius: 0;
}

.hb-body {
	margin: 2em 0;
	line-height: 1.9;
	font-size: 1.05rem;
	letter-spacing: 0.01em;
}

.hb-section {
	margin: 3em 0;
	padding: 0 0 2.2em;
	background: transparent;
	border: none;
	border-bottom: 1px solid #ececec;
	box-shadow: none;
}

.hb-section:last-of-type {
	border-bottom: none;
}

/* Cocoon標準の.article h2ボックス(padding/背景色/角丸)と同じ見た目を、
 * <h2>ではないタグ(ACF情報ブロックの見出し。role="heading"のdiv)でも再現するための指定。
 * <h2>を使っていたsingle-parking.php側では、より詳細度の高い.article h2側の値が優先されるため
 * 実質的に上書きされず、両方の見た目は一致する。
 */
.hb-section-title {
	font-size: 20px;
	line-height: 1.25;
	font-weight: 600;
	padding: 0 0 0 14px;
	background-color: transparent;
	border-left: 4px solid #2c6e91;
	border-radius: 0;
	margin: 0 0 1.2em;
	letter-spacing: 0.02em;
}

/* 本文側の<h2>を、ACFセクション見出し(.hb-section-title)と同じ見た目に統一する。
 * CPT記事(.hb-body h2)と、旧post型のhb-acf-block記事(.hb-acf-block ~ h2、本文中の
 * <h2>はhb-acf-blockの後続兄弟要素になる)の両方をカバーする。
 * Cocoon本体のh2スタイルが優先されて見た目が揃わなかったため、!importantで明示的に上書きする。
 * (2026-07-23、CPT移行記事でセクション見出しと本文見出しの体裁が違うとのご指摘により追加)
 */
.hb-body h2,
.hb-acf-block ~ h2 {
	font-size: 20px !important;
	line-height: 1.25 !important;
	font-weight: 600 !important;
	padding: 0 0 0 14px !important;
	background-color: transparent !important;
	border-left: 4px solid #2c6e91 !important;
	border-radius: 0 !important;
	margin: 2.6em 0 1.2em !important;
	letter-spacing: 0.02em !important;
}

/* 記事本文と「関連記事」系セクションの間に区切り線を入れる */
.hb-related {
	border-top: 1px solid #cccccc;
	padding-top: 2em;
}

.hb-info-table {
	width: 100%;
	border-collapse: collapse;
}

/* Cocoon標準の table tr:nth-of-type(2n+1) による縞模様(奇数行への背景色)を打ち消し、白のみに統一する。
 * (詳細度 .hb-info-table tr:nth-of-type(2n+1) の方がCocoon側の table tr:nth-of-type(2n+1) より高いため上書きできる)
 */
.hb-info-table tr:nth-of-type(2n+1) {
	background-color: #fff;
}

.hb-info-table th,
.hb-info-table td {
	padding: 0.9em 1em;
	border-bottom: 1px solid var(--hb-border, #eceff1);
	text-align: left;
	vertical-align: top;
	font-size: 1.05rem;
	line-height: 1.7;
}

.hb-info-table th {
	width: 7.5em;
	background: transparent;
	color: #374151;
	font-weight: 700;
	white-space: nowrap;
}

.hb-info-table td {
	font-weight: 400;
	color: #1f2937;
}

.hb-note {
	margin-top: 1em;
	padding: 1em 1.2em;
	background: #f7f9fb;
	border-radius: 10px;
	border-left: 3px solid #d4a017;
	font-size: 1.05rem;
	line-height: 1.9;
}

/* 「割引情報」等の見出しは2026-07-23より<h3 class="hb-note-title">として出力し、
 * 目次にも含める(h2と同じ方針転換。functions.phpのhakataburari_render_legacy_parking_info_block参照)。
 * CPT記事の本文(.hb-body h3)・.hb-note内<h3>、旧post型のhb-acf-block記事の本文
 * (.hb-acf-block ~ h3、本文中の<h3>はhb-acf-blockの後続兄弟要素になる)とも見た目を統一するため、
 * 色文字+記号(▸)スタイルをまとめて指定する(h2の箱型スタイルとは差をつけ、階層が分かるようにしている)。
 */
.hb-body h3,
.hb-acf-block ~ h3,
.hb-note-title,
.hb-note h3 {
	font-size: 18px !important;
	font-weight: 600 !important;
	color: #2c6e91 !important;
	line-height: 1.4 !important;
	margin: 2.2em 0 1em !important;
	letter-spacing: 0.01em !important;
	padding: 0 !important;
	border: none !important;
	background: none !important;
	border-radius: 0 !important;
}
.hb-body h3::before,
.hb-acf-block ~ h3::before,
.hb-note-title::before,
.hb-note h3::before {
	content: "▸ ";
}

.hb-map-embed {
	margin-bottom: 1em;
}

.hb-map-embed iframe {
	width: 100%;
	height: 460px;
	border: 0;
	border-radius: 14px;
}

.hb-video-embed {
	margin-bottom: 1em;
}

.hb-video-embed iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 12px;
}

.hb-photo-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1em;
}

/* 写真が1枚だけの場合は2カラムのまま半分の幅で余白ができてしまうため、
 * 横並び(2カラム)にせず1枚を全幅で表示する(料金・支払い/出入口 共通)。2枚以上は従来通り。
 */
.hb-photo-grid > .hb-photo-item:only-child {
	grid-column: 1 / -1;
}

.hb-photo-item img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 10px;
	margin-bottom: 0.4em;
}

.hb-photo-desc {
	font-size: 0.9em;
	margin: 0;
	text-align: center;
}

.hb-last-updated {
	color: var(--hb-text-light, #888);
	font-size: 0.9em;
	text-align: right;
}

@media (max-width: 600px) {
	.hb-photo-grid {
		grid-template-columns: 1fr;
	}

	.hb-info-table th {
		width: 6.5em;
	}

	.hb-title {
		font-size: 1.4em;
	}
}

/* 一覧・アーカイブページ(archive-*.php / taxonomy-*.php) */

.hb-archive-header {
	margin-bottom: 1.5em;
}

.hb-archive-title {
	font-size: 1.4em;
}

.hb-archive-desc {
	color: var(--hb-text-light, #666);
}

.hb-card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 1.5em;
	margin-bottom: 2em;
}

.hb-card {
	border: none;
	border-radius: 12px;
	overflow: hidden;
	background: var(--hb-surface, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.hb-card:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}

.hb-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hb-card-thumb {
	position: relative;
}

.hb-card-thumb img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	display: block;
}

.hb-card-noimage {
	width: 100%;
	height: 160px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f0f0f0;
	color: #aaa;
	font-size: 0.9em;
}

.hb-card-body {
	padding: 0.8em 1em;
}

.hb-card-tag {
	position: absolute;
	top: 0.6em;
	left: 0.6em;
	padding: 0.25em 0.7em;
	background: var(--hb-accent, #2b8cb6);
	color: #fff;
	font-size: 0.75em;
	border-radius: 999px;
}

.hb-card-title {
	margin: 0 0 0.4em;
	font-size: 1em;
	line-height: 1.4;
}

.hb-card-address {
	margin: 0 0 0.3em;
	font-size: 0.85em;
	color: var(--hb-text-light, #666);
}

.hb-card-meta {
	margin: 0;
	font-size: 0.9em;
	font-weight: bold;
}

.hb-pagination {
	text-align: center;
}

/* サイドバー:エリア/ジャンル一覧ウィジェット */

[id^="hakataburari_taxonomy_list"],
[id^="hakataburari_taxonomy_list"] * {
	background: none !important;
	background-color: transparent !important;
}

.hb-taxonomy-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hb-taxonomy-list li {
	border-bottom: 1px solid var(--hb-border, #e0e0e0);
}

.hb-taxonomy-list li:last-child {
	border-bottom: none;
}

.hb-taxonomy-list a {
	display: flex;
	justify-content: space-between;
	padding: 0.05em 0.2em;
	line-height: 1.2;
	text-decoration: none;
}

.hb-taxonomy-count {
	color: var(--hb-text-light, #999);
	font-size: 0.85em;
}

/*
 * 目次・本文見出し(h2)の連番表示を無効化(サイト全体、2026-07-11)
 * - 目次側: Cocoon標準の目次はol要素にブラウザ標準の連番が振られる仕様(tnt-numberクラス)
 * - 本文h2側: スキン(skins/one/style.css)がbodyクラスis-count-on時にCSSカウンターで
 *   「1.」等を::beforeに表示する実装になっている(本体・子テーマのCSSには現れないため見落としやすい)
 */
#toc .toc-list, #toc .toc-list ol { list-style: none !important; padding-left: 0.6em !important; }
#toc .toc-list li::marker { content: none !important; }
.is-count-on #content-in .article h2::before { content: "" !important; display: none !important; }
.is-count-on #content-in .article h2 { padding-left: 0 !important; }

/*
 * スマート化リニューアル(2026-07-23、福岡タワー駐車場記事でユーザー確認・承認済み)
 * - 記事タイトルをアイキャッチ画像の下に表示する(Cocoon標準のentry-header内をflexboxで並び替え。
 *   DOM順序自体は変更せず見た目だけ入れ替えている)
 */
.entry-header.article-header {
	display: flex;
	flex-direction: column;
}
.entry-header.article-header .eye-catch-wrap {
	order: 1;
	margin-bottom: 0.8em;
}
.entry-header.article-header .entry-title {
	order: 2;
}

/*
 * 「周辺の代替駐車場」「エリアの他の駐車場」セクション(.hb-related)内のカードのみ横長レイアウトに変更。
 * .hb-card-gridは一覧・アーカイブページ(archive-parking.php/taxonomy-area.php)でも共用しているため、
 * .hb-relatedの中に限定して上書きし、一覧ページの縦型グリッドには影響させない。
 */
.hb-related .hb-card-grid {
	grid-template-columns: 1fr;
	gap: 0.3em;
}
.hb-related .hb-card-link {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	height: 118px;
	overflow: hidden;
}
.hb-related .hb-card-thumb {
	flex: 0 0 30%;
	max-width: 199px;
	align-self: flex-start;
	height: 100%;
}
.hb-related .hb-card-thumb img,
.hb-related .hb-card-thumb picture {
	height: 100%;
	min-height: 0;
	display: block;
}
.hb-related .hb-card-thumb img {
	object-fit: cover;
}
.hb-related .hb-card-body {
	flex: 1;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;
	padding: 0 1.2em;
}
.hb-related .hb-card-title {
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.5em;
}
.hb-related .hb-card-address {
	font-size: 0.85em;
	margin-bottom: 0.4em;
}
.hb-related .hb-card-meta {
	font-size: 0.85em;
	color: #2c6e91;
	font-weight: 700;
}

/*
 * 本文中に挿入される内部リンクカード(Cocoon標準の.internal-blogcard)を、
 * 「駐車場情報」セクションの.hb-cardと似た横長デザインに寄せる(2026-07-26)。
 * .hb-body配下に限定し、他ページのblogcard表示には影響させない。
 */
.hb-body .internal-blogcard-wrap {
	width: 100%;
	background: none;
	margin: 1.5em 0;
}
.hb-body .internal-blogcard {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	height: 118px;
	overflow: hidden;
	padding: 0;
	border-radius: 12px;
	background: var(--hb-surface, #fff);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.hb-body .internal-blogcard:hover {
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
	transform: translateY(-2px);
}
.hb-body .internal-blogcard-label {
	display: none;
}
.hb-body .internal-blogcard-thumbnail {
	float: none;
	flex: 0 0 30%;
	max-width: 199px;
	width: auto;
	height: 100%;
	margin: 0;
}
.hb-body .internal-blogcard-thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.hb-body .internal-blogcard-content {
	flex: 1;
	height: 100%;
	margin: 0;
	max-height: none;
	min-height: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	overflow: hidden;
	padding: 0 1.2em;
}
.hb-body .internal-blogcard-title {
	font-size: 0.92em;
	font-weight: 600;
	line-height: 1.4;
	margin-bottom: 0.5em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-body .internal-blogcard-snippet {
	font-size: 0.85em;
	color: var(--hb-text-light, #666);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.hb-body .internal-blogcard-footer {
	display: none;
}