/*
 * front-page.css
 * トップページのパターン（front-page-hero / front-page-features / front-page-cta）の CSS
 *
 * 色はすべてパレットのプリセットを参照する。スタイル（styles/*.json）を
 * 切り替えると、飾りの丸・カードの線・帯の色も一緒に変わる。
 */

/* ------------------------------------------------------------------
   Hero — 飾りの丸
   中身の無いグループを重ねた飾り。文字を持たないので、読み上げでは飛ばされる。
   ------------------------------------------------------------------ */
.abira-hero-art {
	position: relative;
	width: 100%;
	max-width: 420px;
	aspect-ratio: 1 / 1;
	margin-inline: auto;
}

/* レイアウト機能が子に付ける上の余白（blockGap）を打ち消す */
.abira-hero-art > .abira-hero-art__shape {
	position: absolute;
	aspect-ratio: 1 / 1;
	margin: 0;
	border-radius: 50%;
}

.abira-hero-art__shape--large {
	top: 4%;
	left: 4%;
	width: 62%;
}

.abira-hero-art__shape--medium {
	top: 48%;
	left: 50%;
	width: 42%;
}

.abira-hero-art__shape--small {
	top: 8%;
	left: 74%;
	width: 18%;
}

.abira-hero-art__shape--tiny {
	top: 82%;
	left: 10%;
	width: 10%;
}

@media (width < 782px) {

	.abira-hero-art {
		max-width: 260px;
	}
}


/* ------------------------------------------------------------------
   Features — 番号付きのカード
   ------------------------------------------------------------------ */
.abira-feature-card {
	background-color: var(--wp--preset--color--base);
	border: 1px solid var(--wp--preset--color--accent-light);
	border-top: 5px solid var(--wp--preset--color--accent);
	border-radius: 10px;
}

.abira-feature-card__number {
	font-weight: 600;
	line-height: 1;
}


/* ------------------------------------------------------------------
   Call to action — 暗い帯
   ------------------------------------------------------------------ */

/* ボタンの色はプリセットのクラス（!important 付き）で出力されるため、
   ホバー時の上書きにも !important が要る。
   既定のホバー（背景 contrast）だと帯と同じ色になり、ボタンの形が消える。 */
.abira-cta .wp-block-button__link:hover,
.abira-cta .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-light) !important;
	color: var(--wp--preset--color--contrast) !important;
}

/* 暗い背景の上では、アクセント色のフォーカスリングが見えにくい
   （Bloom の accent × contrast で約 2:1）。背景色で描く。 */
.abira-cta :focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}

/* 「コントラストを上げる」設定では、style.css と同じく太くする */
@media (prefers-contrast: more) {

	.abira-cta :focus,
	.abira-cta :focus-visible {
		outline: 3px solid var(--wp--preset--color--base);
		outline-offset: 2px;
	}
}