/* TT5 Heading Styles (Nishiki-like)
   Notes:
   - Works with the Heading block (core/heading). Styles appear under "Styles" in the block sidebar.
   - Uses theme CSS variables (palette + typography) where possible.
*/

:root{
	/* tweakable defaults */
	--tt5hs-pad-y: .35em;
	--tt5hs-pad-x: .55em;
	--tt5hs-border-w: 2px;
	--tt5hs-radius: .25em;
	--tt5hs-gap: .55em;
	--tt5hs-line: 1.1;
}

/* Base: keep headings readable and consistent */
:where(.wp-block-heading[class*="is-style-kudo-"]){
	position: relative;
	line-height: var(--tt5hs-line);
}

/* Helpers: fallback colors */
:where(.wp-block-heading[class*="is-style-kudo-"]){
	--tt5hs-ink: var(--wp--preset--color--contrast, currentColor);
	--tt5hs-paper: var(--wp--preset--color--base, #fff);
	--tt5hs-accent: var(--wp--preset--color--accent, currentColor);
}

/* 1) ドット01 */
:where(.wp-block-heading.is-style-kudo-dot-01){
	padding: var(--tt5hs-pad-y) var(--tt5hs-pad-x);
	padding-left: calc(var(--tt5hs-pad-x) + 1.2em);
}
:where(.wp-block-heading.is-style-kudo-dot-01)::before{
	content:"";
	position:absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1em;
	height: 1.2em;
	background-image: radial-gradient(currentColor 1px, transparent 1px);
	background-size: 6px 6px;
	border-radius: var(--tt5hs-radius);
	opacity: .35;
}

/* 2) 水玉ドット01 */
:where(.wp-block-heading.is-style-kudo-polkadot-01){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .25em);
	color: var(--tt5hs-paper);
	background-color: var(--tt5hs-ink);
	border-radius: var(--tt5hs-radius);
	background-image: radial-gradient(rgba(255,255,255,.22) 1.5px, transparent 1.6px);
	background-size: 10px 10px;
}

/* 3) カラー01 */
:where(.wp-block-heading.is-style-kudo-color-01){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .35em);
	color: var(--tt5hs-paper);
	background: linear-gradient(90deg, var(--tt5hs-accent) 0%, var(--tt5hs-ink) 55%);
	border-radius: var(--tt5hs-radius);
}

/* 4) フキダシ01 */
:where(.wp-block-heading.is-style-kudo-speech-01){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .35em);
	color: var(--tt5hs-paper);
	background-color: var(--tt5hs-ink);
	border-radius: var(--tt5hs-radius);
}
:where(.wp-block-heading.is-style-kudo-speech-01)::after{
	content:"";
	position:absolute;
	left: 20%;
	bottom: -10px;
	width: 0;
	height: 0;
	border: 10px solid transparent;
	border-top-color: var(--tt5hs-ink);
	filter: drop-shadow(0 0 0 rgba(0,0,0,0));
}

/* 5) アクセント01（◇ + 下線） */
:where(.wp-block-heading.is-style-kudo-accent-01){
	padding-left: calc(1em + var(--tt5hs-gap));
	padding-bottom: .2em;
	border-bottom: var(--tt5hs-border-w) solid color-mix(in oklab, currentColor 45%, transparent);
}
:where(.wp-block-heading.is-style-kudo-accent-01)::before{
	content:"";
	position:absolute;
	left: 0;
	top: .35em;
	width: .65em;
	height: .65em;
	background: currentColor;
	transform: rotate(45deg);
	opacity: .9;
	border-radius: 2px;
}

/* 6) アクセント02（左にコーナー） */
:where(.wp-block-heading.is-style-kudo-accent-02){
	padding-left: calc(1em + var(--tt5hs-gap));
}
:where(.wp-block-heading.is-style-kudo-accent-02)::before,
:where(.wp-block-heading.is-style-kudo-accent-02)::after{
	content:"";
	position:absolute;
	left: 0;
	top: .15em;
	width: .85em;
	height: .85em;
	border-left: var(--tt5hs-border-w) solid currentColor;
	border-top: var(--tt5hs-border-w) solid currentColor;
	opacity: .85;
}
:where(.wp-block-heading.is-style-kudo-accent-02)::after{
	top: auto;
	bottom: .15em;
	border-top: 0;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}

/* 7) ストライプ01 */
:where(.wp-block-heading.is-style-kudo-stripe-01){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .35em);
	color: var(--tt5hs-paper);
	background-color: var(--tt5hs-ink);
	border-radius: var(--tt5hs-radius);
	background-image:
		repeating-linear-gradient(
			135deg,
			rgba(255,255,255,.18) 0px,
			rgba(255,255,255,.18) 8px,
			transparent 8px,
			transparent 16px
		);
}

/* 8) ステッチ01（点線枠） */
:where(.wp-block-heading.is-style-kudo-stitch-01){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .35em);
	color: var(--tt5hs-paper);
	background-color: var(--tt5hs-ink);
	border-radius: var(--tt5hs-radius);
	outline: 2px dashed rgba(255,255,255,.35);
	outline-offset: -6px;
}

/* 9) ボーダー（上下） */
:where(.wp-block-heading.is-style-kudo-border-tb){
	padding: var(--tt5hs-pad-y) 0;
	border-top: var(--tt5hs-border-w) solid currentColor;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}

/* 10) ボーダー（下） */
:where(.wp-block-heading.is-style-kudo-border-b){
	padding-bottom: .25em;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}

/* 11) ボーダー（枠） */
:where(.wp-block-heading.is-style-kudo-border-box){
	display: inline-block;
	padding: var(--tt5hs-pad-y) calc(var(--tt5hs-pad-x) + .25em);
	border: var(--tt5hs-border-w) solid currentColor;
	border-radius: var(--tt5hs-radius);
}

/* 12) ボーダー（水平：左線） */
:where(.wp-block-heading.is-style-kudo-border-h){
	padding-left: calc(1.25em + var(--tt5hs-gap));
}
:where(.wp-block-heading.is-style-kudo-border-h)::before{
	content:"";
	position:absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 1.25em;
	height: var(--tt5hs-border-w);
	background: currentColor;
	opacity: .85;
}

/* 13) カッコ（左上左下） */
:where(.wp-block-heading.is-style-kudo-bracket-left-tb){
	padding-left: calc(1em + var(--tt5hs-gap));
}
:where(.wp-block-heading.is-style-kudo-bracket-left-tb)::before,
:where(.wp-block-heading.is-style-kudo-bracket-left-tb)::after{
	content:"";
	position:absolute;
	left: 0;
	width: .85em;
	height: .85em;
	border-left: var(--tt5hs-border-w) solid currentColor;
	opacity: .85;
}
:where(.wp-block-heading.is-style-kudo-bracket-left-tb)::before{
	top: .15em;
	border-top: var(--tt5hs-border-w) solid currentColor;
}
:where(.wp-block-heading.is-style-kudo-bracket-left-tb)::after{
	bottom: .15em;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}

/* 14) カッコ（左右） */
:where(.wp-block-heading.is-style-kudo-bracket-sides){
	padding-left: calc(1em + var(--tt5hs-gap));
	padding-right: calc(1em + var(--tt5hs-gap));
}
:where(.wp-block-heading.is-style-kudo-bracket-sides)::before,
:where(.wp-block-heading.is-style-kudo-bracket-sides)::after{
	content:"";
	position:absolute;
	top: 50%;
	transform: translateY(-50%);
	width: .85em;
	height: 1.15em;
	opacity: .85;
}
:where(.wp-block-heading.is-style-kudo-bracket-sides)::before{
	left: 0;
	border-left: var(--tt5hs-border-w) solid currentColor;
	border-top: var(--tt5hs-border-w) solid currentColor;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}
:where(.wp-block-heading.is-style-kudo-bracket-sides)::after{
	right: 0;
	border-right: var(--tt5hs-border-w) solid currentColor;
	border-top: var(--tt5hs-border-w) solid currentColor;
	border-bottom: var(--tt5hs-border-w) solid currentColor;
}

/* Optional: slightly reduce heavy styles on small screens */
@media (max-width: 480px){
	:where(.wp-block-heading.is-style-kudo-polkadot-01,
	       .wp-block-heading.is-style-kudo-color-01,
	       .wp-block-heading.is-style-kudo-speech-01,
	       .wp-block-heading.is-style-kudo-stripe-01,
	       .wp-block-heading.is-style-kudo-stitch-01){
		display: block;
	}
}