/**
 * 見出しブロック — スタイル「ホペイロ」
 * セレクタは h1–h6 + .wp-block-heading + .is-style-hopeiro の必須3条件（他スタイルへ漏れない）
 */

:is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-hopeiro {
	--msm-hopeiro-green: #163a24;
	--msm-hopeiro-gold: #c2b59b;
	--msm-hopeiro-skew: -18deg;
	--msm-hopeiro-accent-w: 6px;
	--msm-hopeiro-accent-gap: 0.75rem;
	--msm-hopeiro-accent-outset: calc(
		var(--msm-hopeiro-accent-gap) + var(--msm-hopeiro-accent-w) + 0.5rem
	);
	--msm-hopeiro-accent-inset: max(3px, calc(var(--msm-hopeiro-accent-gap) * 0.55));

	position: relative;
	z-index: 0;
	isolation: isolate;
	display: table;
	box-sizing: border-box;
	margin: 1.35em auto;
	padding: 0.62em 2rem;
	max-width: 100%;
	border: none;
	box-shadow: none;
	overflow: visible;

	color: #fff !important;
	font-weight: 700;
	letter-spacing: 0.03em;
	text-align: center;
	line-height: 1.35;
}

:is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-hopeiro a {
	color: #fff !important;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

:is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-hopeiro::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -1rem;
	right: -1rem;
	z-index: -1;
	background-color: var(--msm-hopeiro-green);
	transform: skewX(var(--msm-hopeiro-skew));
	transform-origin: center center;
}

:is(h1, h2, h3, h4, h5, h6).wp-block-heading.is-style-hopeiro::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(-1rem - var(--msm-hopeiro-accent-outset));
	right: calc(-1rem - var(--msm-hopeiro-accent-outset));
	z-index: -2;
	transform: skewX(var(--msm-hopeiro-skew));
	transform-origin: center center;
	pointer-events: none;
	background-color: transparent;
	background-repeat: no-repeat;
	background-size: 100% 100%;
	background-image: linear-gradient(
		to right,
		transparent 0,
		transparent var(--msm-hopeiro-accent-inset),
		var(--msm-hopeiro-gold) var(--msm-hopeiro-accent-inset),
		var(--msm-hopeiro-gold)
			calc(var(--msm-hopeiro-accent-inset) + var(--msm-hopeiro-accent-w)),
		transparent
			calc(var(--msm-hopeiro-accent-inset) + var(--msm-hopeiro-accent-w)),
		transparent
			calc(
				100% - var(--msm-hopeiro-accent-inset) - var(--msm-hopeiro-accent-w)
			),
		var(--msm-hopeiro-gold)
			calc(
				100% - var(--msm-hopeiro-accent-inset) - var(--msm-hopeiro-accent-w)
			),
		var(--msm-hopeiro-gold) calc(100% - var(--msm-hopeiro-accent-inset)),
		transparent calc(100% - var(--msm-hopeiro-accent-inset)),
		transparent 100%
	);
}