/**
 * Custom block style variations (registered in functions.php via
 * register_block_style). Loaded on both the frontend and in the editor
 * so authors see an accurate preview while writing.
 */

/* List: Checkmarks */
ul.is-style-checkmarks {
	list-style: none;
	padding-left: 0;
}

ul.is-style-checkmarks li {
	position: relative;
	padding-left: 1.5em;
}

ul.is-style-checkmarks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	color: currentColor;
	font-weight: bold;
}

/* List: No Bullets */
ul.is-style-no-bullets {
	list-style: none;
	padding-left: 0;
}

/* Separator: Short & Centered */
hr.is-style-short-centered {
	width: 4rem;
	margin-left: auto;
	margin-right: auto;
	border-top-width: 3px;
}

/* Quote: Bordered */
blockquote.is-style-bordered {
	border-left: 4px solid currentColor;
	padding-left: 1.25rem;
	font-style: italic;
}

/**
 * Workflow Steps patterns (registered in functions.php via
 * register_block_pattern). Each step is a card; each connecting arrow is a
 * core/separator with a "Workflow Arrow" style variation chosen from the
 * block Styles panel. Every arrow rule below requires one of the three
 * workflow shape styles (triangle/chevron/pill-line) in addition to
 * .workflow-arrow, so switching a separator to an unrelated style (Dots,
 * Wide, Short & Centered, etc.) falls back to that style's own look
 * instead of inheriting our sizing/color/border overrides.
 */

/*
 * Local fallback for the --deque-new-* palette (also defined in
 * deque-bulma.css). The block editor's iframed canvas only loads
 * stylesheets registered via add_editor_style() - deque-bulma.css isn't
 * one of them - so without this, these variables are undefined there and
 * the arrows render invisible (correct shape, no fill).
 */
:root {
	--deque-new-blue: #2E5F7A;
	--deque-new-rose: #B25295;
	--deque-new-orange: #CC463B;
	--deque-new-yellow: #F3A326;
}

.workflow-steps {
	display: flex;
	gap: 1.25rem;
	margin: 2rem 0;
}

.workflow-steps--horizontal,
.workflow-steps--zigzag {
	align-items: center;
}

.workflow-steps--vertical {
	flex-direction: column;
	align-items: stretch;
}

.workflow-step {
	flex: 1;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 0.5rem 1rem rgba(10, 10, 10, 0.04);
	padding: 1.5rem;
}

.workflow-steps--zigzag .workflow-step--offset {
	margin-top: 2.5rem;
}

.workflow-step__badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	margin: 0 0 0.75rem;
	border-radius: 9999px;
	color: #fff;
	font-weight: bold;
}

.workflow-step--1 .workflow-step__badge {
	background-color: var(--deque-new-blue);
}

.workflow-step--2 .workflow-step__badge {
	background-color: var(--deque-new-rose);
}

.workflow-step--3 .workflow-step__badge {
	background-color: var(--deque-new-orange);
}

.workflow-step--4 .workflow-step__badge {
	background-color: var(--deque-new-yellow);
}

/*
 * Arrow: shared base, active only for the three workflow arrow shapes.
 * The shape itself comes from an SVG mask (see the is-style-* rules below)
 * so the fill color below determines what's actually visible - no
 * clip-path, no dependency on the SVG's own fill color.
 */
hr.wp-block-separator.workflow-arrow:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	flex-shrink: 0;
	align-self: center;
	width: 2.5rem;
	height: 2.5rem;
	margin: 0;
	border: none;
	opacity: 1;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/*
 * Auto-cycled color. A background color chosen via the separator block's
 * native Color panel renders as an inline style, which wins over these
 * classes automatically (no extra CSS needed) - that's how an editor
 * overrides one arrow's color without fighting the shape style.
 */
hr.wp-block-separator.workflow-arrow--1:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	background-color: var(--deque-new-blue);
}

hr.wp-block-separator.workflow-arrow--2:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	background-color: var(--deque-new-rose);
}

hr.wp-block-separator.workflow-arrow--3:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	background-color: var(--deque-new-orange);
}

hr.wp-block-separator.workflow-arrow--4:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	background-color: var(--deque-new-yellow);
}

/*
 * Arrow shapes. Each points right by default; SVGs live in
 * assets/images/workflow-arrows/ as plain black silhouettes on a
 * transparent square canvas - the mask uses their alpha channel only, so
 * their own fill color doesn't matter.
 */
hr.wp-block-separator.workflow-arrow.is-style-triangle {
	-webkit-mask-image: url(../images/workflow-arrows/triangle.svg);
	mask-image: url(../images/workflow-arrows/triangle.svg);
}

hr.wp-block-separator.workflow-arrow.is-style-chevron {
	-webkit-mask-image: url(../images/workflow-arrows/chevron.svg);
	mask-image: url(../images/workflow-arrows/chevron.svg);
}

hr.wp-block-separator.workflow-arrow.is-style-pill-line {
	-webkit-mask-image: url(../images/workflow-arrows/pill-line.svg);
	mask-image: url(../images/workflow-arrows/pill-line.svg);
}

hr.wp-block-separator.workflow-arrow.is-style-solid-line {
	-webkit-mask-image: url(../images/workflow-arrows/solid-line.svg);
	mask-image: url(../images/workflow-arrows/solid-line.svg);
}

hr.wp-block-separator.workflow-arrow.is-style-dotted-line {
	-webkit-mask-image: url(../images/workflow-arrows/dotted-line.svg);
	mask-image: url(../images/workflow-arrows/dotted-line.svg);
}

/* Orientation: vertical arrows point down. */
.workflow-steps--vertical .workflow-arrow:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	margin: 0.25rem auto;
	transform: rotate(90deg);
}

/* Orientation: zigzag arrows point diagonally, alternating direction. */
.workflow-arrow.is-zig-a:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	transform: rotate(35deg);
}

.workflow-arrow.is-zig-b:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
	transform: rotate(-35deg);
}

/* Collapse horizontal/zigzag layouts to a stacked vertical flow on small screens. */
@media (max-width: 600px) {
	.workflow-steps--horizontal,
	.workflow-steps--zigzag {
		flex-direction: column;
		align-items: stretch;
	}

	.workflow-steps--zigzag .workflow-step--offset {
		margin-top: 0;
	}

	.workflow-steps--horizontal .workflow-arrow:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line),
	.workflow-steps--zigzag .workflow-arrow:is(.is-style-triangle, .is-style-chevron, .is-style-pill-line, .is-style-solid-line, .is-style-dotted-line) {
		margin: 0.25rem auto;
		transform: rotate(90deg);
	}
}