/**
 * She Know Style Blocks — front-end + editor styles.
 *
 * Uses the theme's CSS custom properties when the She Know Style theme is
 * active, with sensible fallbacks so the blocks also look right with any theme.
 */

/* ---------- Core Heading style variations --------------------------------- */
.is-style-sks-highlight {
	display: inline;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
	background: linear-gradient(transparent 55%, color-mix(in srgb, var(--sks-color-1, #b5876b) 35%, transparent) 0);
	padding: 0 0.12em;
}

.is-style-sks-gradient {
	background: linear-gradient(120deg, var(--sks-color-1, #b5876b), var(--sks-color-2, #7e8b6e));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.is-style-sks-outline {
	color: transparent;
	-webkit-text-stroke: 2px var(--sks-color-3, #2b2a28);
	text-stroke: 2px var(--sks-color-3, #2b2a28);
}

.is-style-sks-underline {
	display: inline-block;
	background-image: linear-gradient(var(--sks-color-1, #b5876b), var(--sks-color-1, #b5876b));
	background-size: 100% 4px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	padding-bottom: 0.12em;
}

.is-style-sks-kicker {
	position: relative;
	padding-top: 0.5em;
}
.is-style-sks-kicker::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.4em;
	height: 4px;
	border-radius: 4px;
	background: var(--sks-color-1, #b5876b);
}
.is-style-sks-kicker[style*="center"]::before,
.has-text-align-center.is-style-sks-kicker::before { left: 50%; transform: translateX(-50%); }

.is-style-sks-boxed {
	background: var(--sks-color-7, #f3eee7);
	border-radius: var(--sks-radius, 8px);
	padding: 0.5em 0.7em;
}

/* ---------- Numbered Heading block (listicle) ----------------------------- */
/* Auto-numbering counter lives on the content area. */
.entry-content,
.editor-styles-wrapper { counter-reset: sks-listicle; }

.sks-numbered-heading {
	display: flex;
	align-items: center;
	gap: 0.6em;
	margin: 1.4em 0 0.6em;
}
.sks-numbered-heading.sks-nh--auto { counter-increment: sks-listicle; }
.sks-nh__title { margin: 0; }

/* The number element */
.sks-nh__num {
	flex: 0 0 auto;
	font-family: var(--sks-font-heading, Georgia, serif);
	font-weight: 700;
	line-height: 1;
	color: var(--sks-color-1, #b5876b);
}

/* Auto number content (plain / padded / with total) */
.sks-nh--auto .sks-nh__num::before { content: counter(sks-listicle); }
.sks-nh--auto.sks-nh--pad .sks-nh__num::before { content: counter(sks-listicle, decimal-leading-zero); }
.sks-nh--auto.sks-nh--total .sks-nh__num::before { content: counter(sks-listicle) " of " attr(data-total); }
.sks-nh--auto.sks-nh--pad.sks-nh--total .sks-nh__num::before { content: counter(sks-listicle, decimal-leading-zero) " of " attr(data-total); }

/* Manual number: text is in the span; optionally append " of N" */
.sks-nh--manual.sks-nh--total .sks-nh__num::after { content: " of " attr(data-total); }

/* Number visual styles */
.sks-nh--badge .sks-nh__num,
.sks-nh--circle .sks-nh__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.2em;
	height: 2.2em;
	padding: 0 0.4em;
	background: var(--sks-color-1, #b5876b);
	color: var(--sks-color-9, #fff);
	border-radius: var(--sks-radius, 8px);
	font-size: 0.9em;
}
.sks-nh--circle .sks-nh__num { border-radius: 50%; padding: 0; }
.sks-nh--large .sks-nh__num { font-size: 2.4em; opacity: 0.85; }
.sks-nh--outline .sks-nh__num {
	color: transparent;
	-webkit-text-stroke: 1.5px var(--sks-color-1, #b5876b);
	font-size: 2em;
}
.sks-nh--plain .sks-nh__num { font-size: 1.4em; }